什么是 HTML？
HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 標簽(元素)
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
HTML 標簽通常是成對出現的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
開始和結束標簽也被稱為開放標簽和閉合標簽
HTML 文檔 = 網頁
HTML 文檔描述網頁
HTML 文檔包含 HTML 標簽和純文本
HTML 文檔也被稱為網頁
Web 瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。
瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容.
結構 
新建一個HTML文件，會自動生成初始代碼
<!DOCTYPE html> <!--文檔類型--> <html lang="en"> <!--根標簽--> <head> <!--網頁頭部--> <meta charset="UTF-8"> <!--國際編碼UTF-8--> <title>我的第一個HTML網頁</title> <!--網頁標題--> </head> <body><!--網頁的主體 可視化區域--> 666 fde </body> </html>
HTML書寫規范
1.名字用小寫字母
2.以英文開頭，可以包含英文字母，數字，_，-，不能使用中文
3.駝峰命名
className 第二個單詞首字母大寫
4.id命名
id只能有一個名字，而且在頁面中相同的名字只能出現一次，相當於身份證號碼一樣
5.class命名
class可以出現多次，而且相同的名字可以有多個，相當於人名一樣
常用標簽
一般用在文章的標題，有h1~h6（h1標簽，一個網頁只能有一個）
<body><!--網頁的主體 可視化區域--> <!--標題標簽--> <h1>我是h1標簽</h1> <h2>我是h2標簽</h2> <h3>我是h3標簽</h3> <h4>我是h4標簽</h4> <h5>我是h5標簽</h5> <h6>我是h6標簽</h6> </body>
會把HTML文檔分成若干個段落
<body> <h2>段落標簽</h2> <p>我欲乘風歸去</p> <p>又恐瓊樓玉宇</p><br> <p>高處不勝寒</p><br><!--<br>標簽是換行標簽--> <p>起舞弄清影</p> </body>
-->
段落標簽
我欲乘風歸去
又恐瓊樓玉宇
高處不勝寒
起舞弄清影
粗體斜體標簽
粗體標簽將文字加粗，斜體標簽將文字傾斜
<body> <h2>粗體標簽</h2> <!--b標簽 只是物理加粗 strong 不僅加粗 還利於seo搜索--> <b>我是b標簽加粗</b><br><!--<br>標簽是換行標簽--> <strong>我是strong標簽加粗</strong> <h2>斜體標簽</h2> <i>我是i標簽斜體</i><br> <em>我是em標簽斜體</em><hr><!--<hr>水平線標簽--> <h2>粗體 + 斜體標簽</h2> <b><i>我是粗體加斜體標簽</i></b><br> <i><b>我是粗體加斜體標簽</b></i> </body>
-->
粗體標簽
我是b標簽加粗
我是strong標簽加粗
斜體標簽
我是i標簽斜體
我是em標簽斜體
粗體 + 斜體標簽
我是粗體加斜體標簽
我是粗體加斜體標簽
用於網頁之間的跳轉，也可以作為錨點在頁面內跳轉
只有擁有name屬性的a標簽才有錨點
其他標簽可以通過id屬性實現錨點
target屬性
_self 當前頁面打開 默認
_blank 在新窗口打開
<body> <h2>a標簽</h2> <!--href是a標簽的標簽屬性--> <a href="http://www.baidu.com">去百度</a><!--當前頁面跳轉（target=_self）默認--> <a href="http://www.baidu.com" target="_blank">新頁面跳轉</a> <a href="javasript:void(0);">死鏈接(不會跳轉的鏈接)</a> <a href="#">回到頂部</a> </body>
a標簽之間的跳轉
<body> <!--實現來回跳轉--> <a href="#wrap" name="box">我是頂部的錨點</a> .........(表示頁面很長) <!--#固定寫法，點擊跳轉到a標簽name為box的位置--> <a href="#box" name="wrap">錨點</a> </body>
a標簽跳轉其他標簽
<body> <h2 id="hex"> 我是h2標簽 </h2> 。。。。。。 <a href="#hex">前往h2標簽<a> </body>
圖片標簽（img + tab）
用於向頁面插入圖片
src 定義圖片路徑 相對、絕對
alt 圖片描述，用於seo搜索 當圖片路徑錯誤的時候 會顯示在頁面上
width 定義圖片寬度
height 定義圖片高度
title 鼠標划入 有提示
當width/height只給一個值的時候，另一個值等比例縮放，然后不給默認圖片大小
<body> <h2>引入圖片</h2> <img src="python.jpg" alt="錯誤路徑" title="python" width="350" height="300"> </body>
列表標簽
無序標簽（ul>li*4 tab鍵 >這個后面 跟的是子元素 *代表前面的元素幾個）
border-radius: 50%; #增加圓滑的視覺體驗
<body> <h2>列表</h2> <h3>無序列表</h3> <!--ul>li*4 tab鍵 >這個后面 跟的是子元素 *代表前面的元素幾個--> <ul type="circle"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <!-- type disc 默認 小黑圓點 默認不寫 circle 空心圓 square 小方框 --> </body>
<head> <style> li{ list-style: none;/*去掉列表li前面的默認符號*/ } </style> </head>
<body> <h2>有序列表</h2> <ol type="a"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <!-- 1 1 2 3 4 默認 a a b c d A A B C D I i --> </body>
<body> <h2>自定義標簽</h2> <dl> <dt>前端</dt> <dd>html</dd> <dd>css</dd> <dd>js</dd> </dl> <dl> <dd>前端</dd> <dd>html</dd> <dd>css</dd> <dd>js</dd> </dl> </body>
用來分化一個一個的區域
文字標簽
span標簽是單純的文字標簽，只有配合css才有效果
塊級元素（block）會自動換行，行內元素（inline）前后不會換行，
塊級元素可以包含行內和塊級行內元素包含文本和其它行內元素，不建議包含塊級，
塊級元素可以給寬高值，行內元素不行，
塊級元素可以給上下外邊框，行內元素不行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div_span</title> <style> div{ width: 300px; height: 25px; background: cornflowerblue; } span{ width: 300px; height: 25px; background: palevioletred; } </style> </head> <body> <div>第一個</div> <!--div是一個塊級元素，獨自占一行,即display:block--> <div>第二個</div> <span>第1個</span> <!--span是行內元素，display:inline--> <span>第2個</span> <!--div獨自占一行--> <div>第三個</div> </body> </html>
塊級元素div display:block;
可以包含任何塊和行內元素
獨占一行，支持設置寬高
如果沒有設置寬高，高度由內容撐開，寬度默認瀏覽器寬度
沒有內容，在網頁上肉眼看不到東西，但是審查元素，寬度是瀏覽器寬度，高度0
行內（內聯）元素span display:inline;
可以和其他行內元素位於同一行
行內元素不要包塊級元素
不支持設置寬高
內容撐開寬高
如果既想設置行內元素，又想設置寬高：inline-block
<style> div{ width: 50px; height: 25px; background: cornflowerblue; display: inline-block; } span{ width: 50px; height: 25px; background: palevioletred; display: inline-block; } </style>
行內塊元素 display:inline-block;
塊級元素可以橫排展示
行內元素可以設置寬高
元素既能設置寬高 也能排在一排
display:none
隱藏元素,包括他的子標簽，在頁面中不占位置，等同於消失了
<body> <h2>特殊符號</h2> <p>小於號：---<</p> <p>大於號：---></p> <p>空格符號：--- ---</p> <p>空白位：--- ---</p> <p>&字符：---&</p> <p>版權符號：---©</p> </body>
table：表格標簽
thead：表頭標簽
tbody：表身標簽
tfoot：表腳標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> </head> <body> <!--邊框--> <table border="1"> <thead><!--表頭位置--> <tr><!--新開一行--> <th>姓名</th><!--新開一列--> <th>年齡</th><!--新開二列--> <th>住址</th><!--新開三列--> </tr> </thead> <tbody><!--表身位置--> <tr> <td>pywjh</td> <td>18</td> <td>武漢</td> </tr> <tr> <td>wjh</td> <td>18</td> <td>重慶</td> </tr> </tbody> </table> </body> </html>
可以head里面進行style裝飾
<head> <meta charset="UTF-8"> <title>table</title> <style> table{ border-collapse: collapse; /* collapse 邊框合並，如果相鄰的話，共用一個框 separate 默認值，邊框分開，不合並 */ /*文字水平居中*/ text-align: center; } </style> </head>
列合並
<body> <!--邊框--> <table border="1"> <thead><!--表頭位置--> <tr><!--新開一行--> <th>姓名</th><!--新開一列--> <th>年齡</th><!--新開二列--> <th>住址</th><!--新開三列--> </tr> </thead> <tbody><!--表身位置--> <tr> <td>pywjh</td> <td rowspan="2">18</td><!--列合並--> <td>武漢</td> </tr> <tr> <td>wjh</td> <!--<td>18</td>--> <td>重慶</td> </tr> </tbody> </table> </body>
行合並
<body> <!--邊框--> <table border="1"> <thead><!--表頭位置--> <tr><!--新開一行--> <th>姓名</th><!--新開一列--> <th>年齡</th><!--新開二列--> <th>住址</th><!--新開三列--> </tr> </thead> <tbody><!--表身位置--> <tr> <td>pywjh</td> <td colspan="2">18</td> <!--<td>18</td>--> </tr> <tr> <td>wjh</td> <td>18</td> <td>重慶</td> </tr> </tbody> </table> </body>
表單是搜集用戶數據的各種表單元素的集合區域
用於搜集數據並向后台發送，前后交互的方式之一
常用於注冊登錄，搜索，文件上傳
表單的屬性：
action：提交時候的地址，默認使用當前頁面
method：提交的方法，有get和post兩種，默認使用get
entype：設置編碼格式默認：application/x-www-form-urlencoded上傳文件：multipart/form-data不建議使用：text/plain
表單中常用的標簽：
input：表單中使用頻率最高的標簽，沒有之一
input常用的type屬性值：
text：文本框
password：密碼框
radio：單選框
checkbox：復選框
file：文件選擇
hidden：隱藏域
submit：提交
reset：重置
其他屬性：
textarea：文本域，一般用於多行文本
select：下拉框，一般用於選項
表單中常用的標簽：
fileset標簽：給表單設置分組
legend標簽：設置分組表單的標題
label標簽：提高用戶體驗度
創建form表單（form + tab）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <!--創建form表單--> <form action=""> </form> </body> </html>
登錄頁面
action：規定當前提交表單向何處發送表單數據
method： 提交方式get，post 默認get
autocomplete：on，off ，輸入框自動完成，（on表示記住賬號）
placeholder：輸入框的提示信息
required：將輸入框設置為必填
<form action="" autocomplete="on" method="post"> <!--action 規定當前提交表單向何處發送表單數據--> <!--method 默認get post--> <!--autocomplete自動完成，on輸入框會提示 off輸入框不會提示--> <!--?name=value&name=value&name=on--> 賬號：<input type="text" name="user" placeholder="請輸入你的賬號"><br> 密碼：<input type="password" name="psd" required placeholder="請輸入你的密碼"> <!--required 必填字段--> <br> </form>
文件上傳
<input type="file">
單選框
<!--name一樣的才能多選一--> <input type="radio" name="sex">男 <!--只有點到小圓圈才能勾選--> <input type="radio" name="sex">女 <input id="secret" type="radio" name="sex" disable>
<!--disable禁止勾選-->
<!--用label標簽通過id進行連通，達到點文字也能勾選的效果-->
<label for="secret">保密</label><br>
多選框（input + tab）
<input type="checkbox">抽煙 <input type="checkbox">喝酒 <input type="checkbox">燙頭 <input id="crosstalk" type="checkbox" checked> <!--checked 默認勾選--> <label for="crosstalk">相聲</label><br>
文本域（testarea + tab）
<head> <meta charset="UTF-8"> <title>form</title> <style> textarea{ /*resize: horizontal水平;*/ /*resize: vertical垂直;*/ resize: None; width: 200px; height: 20px; } </style> </head> <body> 文本域：<textarea></textarea> </body>
下拉框（select + tab）+ （option + tab）
喜歡的水果：<select name="fruit"> <!--size規定下拉列表中可見選項的數目--> <!--selected 規定在option里面默認展示第幾項--> <option value="1">菠蘿</option> <option value="2" selected>西瓜</option> <!--select 默認顯示--> <option value="3">蘋果</option> <option value="4">梨子</option> </select><br>
提交
提交：<input type="submit" value="確認"><br>
重置
重置：<input type="reset">
