閱讀目錄：
| 標題 | h1 | h2 | h3 | h4 | h5 | h6 |
| 列表 | ol | ul | li | dl | dt | dd |
| 排版標簽 | p | div | hr | center | pre | |
| 表格 | table | |||||
| 表單 | form |
h1-h6
標題使用<h1>至<h6>標簽進行定義。<h1>定義最大的標題，<h6>定義最小的標題。具有align屬性，屬性值可以是：left、center、right。
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6>
效果
列表
列表又分為三種，有序列表ol，無序列表ul和定義列表dl。其中ol和ul必須結合li標簽使用，而dl則必須結合dt,dd使用。
- ol ordered list 有序列表
- li list item，列表項
- ul unordered list 無序列表
- li list item，列表項
- dl definition list 定義列表
<dt>：definition title 列表的標題，這個標簽是必須的<dd>：definition description 列表的列表項，如果不需要它，可以不加
需要注意的是：
li不能單獨存在，必須包裹在ul或者ol里面；反過來說，ul的“兒子”不能是別的東西，只能有li。
我們這里再次強調，ul或者ol的作用，並不是給文字增加小圓點的，而是增加列表是否有序的“語義”的，因此不能省略。
ol列表（ordered list，即有序列表）
代碼示例：
<ol> <li>linux</li> <li>python</li> <li>go</li> </ol>
顯示結果：
屬性：
type="屬性值"。屬性值可以是：1(阿拉伯數字，默認)、a、A、i、I。結合start屬性表示從幾開始
有序列表也可以進行嵌套
ul列表（unordered list，即無序列表）
代碼示例：
<ul> <li>linux</li> <li>python</li> <li>go</li> </ul>
顯示結果：
屬性：
type="屬性值"。屬性值可以選：disc(實心原點，默認)，square(實心方點)，circle(空心圓)。
ul也是可以嵌套的，例如
dl列表（definition list，即定義列表）
定義列表的作用非常大。
代碼：
<dl> <dt>第一條規則</dt> <dd>不准睡覺</dd> <dd>不准交頭接耳</dd> <dd>不准走神</dd> <dt>第二條規則</dt> <dd>可以泡妞</dd> <dd>可以找妹子</dd> <dd>可以看mv</dd> </dl>
頁面效果：
上圖可以看出，定義列表表達的語義是兩層：
- （1）是一個列表，列出了幾個dd項目
- （2）每一個詞兒都有自己的描述項。
備注：dd是描述dt的。
定義列表用法非常靈活，可以一個dt配很多dd：
還可以拆開，讓每一個dl里面只有一個dt和dd，這樣子感覺清晰一些：
京東案例（京東首頁最下方）
dt、dd都是容器級標簽，想放什么都可以。所以，現在就應該更加清晰的知道：用什么標簽，不是根據樣子來決定，而是語義（語義本質上是結構）。
排版標簽
p
段落標簽<p>
段落：是英文paragraph的縮寫。
屬性：
- align='屬性值'：對齊方式。屬性值包括：left、center、right
代碼示例：
<p>這是一個段落</p> <p align="center">這是另一個段落</p>
頁面結果：
ok,下面這幾句話，大家一定牢牢記住。HTML標簽是分等級的。HTML將所有的標簽分為兩種：
- 文本級標簽：p、span、a、b、i、u、em。文本標簽里只能放文字、圖片、表單元素。
- 容器級標簽：div、h系列、li、dt、dd。容器級標簽里可以放任何東西。
從學習p的第一天開始，就要死死記住：p標簽是一個文本級標簽，p里面只能放文字、圖片、表單元素。其他的一律不能放。
錯誤寫法：（把h系列的標簽放到p里）
<p> 我是個段落 <h2>我是二級標題</h2> </p>
頁面效果和渲染結果：
上圖顯示，瀏覽器不允許你這么做。我們使用Chrome的F12審查元素發現，瀏覽器自己把p封閉掉了，不讓你去包裹h2。
PS：Chrome瀏覽器是世界上HTML5支持最好的瀏覽器。提供了非常好的開發工具，非常適合我們開發人員使用。審查元素功能的快捷鍵是F12。
div
div和span是非常重要的標簽，div的語義是division“分割”； CSS課程中你將知道，這個東西，是最最重要的“盒子”。
div：把標簽中的內容作為一個塊兒來對待(division)。必須單獨占據一行。
div標簽的屬性：
align="屬性值"：設置塊兒的位置。屬性值可選擇：left、right、 center
如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門為定義CSS樣式而生的。或者說，DIV+CSS來實現各種樣式。
示例：
<div> 導航欄 </div> <div> 中心banner </div>
頁面效果：
div在瀏覽器中，除了換行以外，默認是不會增加任何的效果的，但是語義變了，div中的所有元素是一個小區域。
div標簽是一個容器級標簽，里面什么都能放，甚至可以放div自己。
<div class="header"> <div class="logo"></div> <div class="nav"></div> </div> <div class="content"> <div class="guanggao"></div> <div class="shop"></div> </div> <div class="footer"></div>
所以，我們親切的稱呼這種模式叫做“div+css”。div標簽負責布局，負責結構，負責分塊。css負責樣式。
ps:這個class屬性名就與css有很大關聯，講到css模塊會詳細講這塊內容。
hr
水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個部分
代碼示例：
<p>路飛學城介紹</p> <hr> <hr>
頁面效果：
內容居中標簽 <center>
此時center代表是一個標簽，而不是一個屬性值了。只要是在這個標簽里面的內容，都會居於瀏覽器的中間。
示例：
<center> <p>小馬哥</p> </center>
效果如下：
到了H5里面，center標簽不建議使用。
預定義（預格式化）標簽：<pre>
含義：將保留其中的所有的空白字符(空格、換行符)，原封不動的輸出結果（告訴瀏覽器不要忽略空格和空行）
說明：真正排網頁過程中，<pre>標簽幾乎用不着。但在PHP中用於打印一個數組時使用。
示例：
<pre> 鵝鵝鵝 作者：李白 曲項向天歌 白毛浮綠水 </pre>
效果如下：
上圖中，好像pre標簽部分的字體變小了，而且還出現了縮進，好吧， 這個其實是瀏覽器搞的鬼。
為什么要有<pre>這個標簽呢？答案是：所有的瀏覽器默認情況下都會忽略空格和空行，而pre可以保留你寫入標簽內容的格式。
table
表格標簽用<table>表示。
一個表格<table>是由表頭<thead>和表格內容<tbody>組成的。
其中的每一行又是由<tr>組成的，每行中的每一格是由<td>組成的。
在以前，要想固定標簽的位置，唯一的方法就是表格。現在可以通過CSS定位的功能來實現。但是現在在做頁面的時候，表格作用還是有一些的。
<table> <thead> <th>id</th> <th>name</th> <th>age</th> </thead> <tbody> <tr> <td>1</td> <td>alex</td> <td>83</td> </tr> <tr> <td>2</td> <td>wusir</td> <td>74</td> </tr> </tbody> </table>
頁面效果：
上面我們會發現表頭中的文字是默認加粗的，這種樣式我們后面可以通過css調整，所以表格中的表頭部分省略也是可以的。
下面這段代碼就是省略了表頭之后的表格樣式（常用）：
<table> <tr> <td>小馬哥</td> <td>18</td> <td>男</td> <td>山東</td> </tr> <tr> <td>小岳岳</td> <td>45</td> <td>男</td> <td>河南</td> </tr> <tr> <td>鄧紫棋</td> <td>23</td> <td>女</td> <td>香港</td> </tr> </table>
頁面效果：
上圖中的表格好像沒看到邊框呀，不急，接下來看看<table>標簽的屬性。
<table>的屬性：
border：邊框。像素為單位。style="border-collapse:collapse;"：單元格的線和表格的邊框線合並width：寬度。像素為單位。height：高度。像素為單位。bordercolor：表格的邊框顏色。align：表格的水平對齊方式。屬性值可以填：left right center。
注意：這里不是設置表格里內容的對齊方式，如果想設置內容的對齊方式，要對單元格標簽<td>進行設置）cellpadding：單元格內容到邊的距離，像素為單位。默認情況下，文字是緊挨着左邊那條線的，即默認情況下的值為0。
注意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，默認是與左邊那條線的距離。如果設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。cellspacing：單元格和單元格之間的距離（外邊距），像素為單位。默認情況下的值為0bgcolor="#99cc66"：表格的背景顏色。background="路徑src/..."：背景圖片。
背景圖片的優先級大於背景顏色。
單元格帶邊框的效果：
備注：表格中很細表格邊線的制作：
CSS的寫法：
style="border-collapse:collapse;"
<tr>：行
一個表格就是一行一行組成的嘛。
屬性：
dir：公有屬性，設置這一行單元格內容的排列方式。可以取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）bgcolor：設置這一行的單元格的背景色。
注：沒有background屬性，即：無法設置這一行的背景圖片，如果非要設置，可以用css實現。height：一行的高度align="center"：一行的內容水平居中顯示，取值：left、center、rightvalign="center"：一行的內容垂直居中，取值：top、middle、bottom
<td>：單元格
屬性：
align：內容的橫向對齊方式。屬性值可以填：left right center。
如果想讓每個單元格的內容都居中，這個屬性太麻煩了，以后用css來解決。valign：內容的縱向對齊方式。屬性值可以填：top middle bottomwidth：絕對值或者相對值(%)height：單元格的高度bgcolor：設置這個單元格的背景色。background：設置這個單元格的背景圖片。
單元格的合並
如果要將兩個單元格合並，那肯定就要刪掉一個單元格。
單元格的屬性：
colspan：橫向合並。例如colspan="2"表示當前單元格在水平方向上要占據兩個單元格的位置。rowspan：縱向合並。例如rowspan="2"表示當前單元格在垂直方向上
效果：（橫向合並）
效果舉例：（縱向合並）
<th>：加粗的單元格。相當於<td> + <b>
- 屬性同
<td>標簽
<caption>：表格的標題。使用時和tr標簽並列
頁面效果：
表格的<thead>標簽、<tbody>標簽、<tfoot>標簽
這三個標簽有與沒有的區別：
- 1、如果寫了，那么這三個部分的代碼順序可以任意，瀏覽器顯示的時候還是按照thead、tbody、tfoot的順序依次來顯示內容。如果不寫thead、tbody、tfoot，那么瀏覽器解析並顯示表格內容的時候是從按照代碼的從上到下的順序來顯示。
- 2、當表格非常大內容非常多的時候，如果用thead、tbody、tfoot標簽的話，那么數據可以邊獲取邊顯示。如果不寫，則必須等表格的內容全部從服務器獲取完成才能顯示出來。
