閱讀目錄：
| 標題 | h1 | h2 | h3 | h4 | h5 | h6 |
| 列表 | ol | ul | li | dl | dt | dd |
| 排版標籤 | p | div | hr | center | pre | |
| 表格 | table | |||||
| 表單 | form |
回到頂部css
h1-h6
標題使用<h1>至<h6>標籤進行定義。<h1>定義最大的標題，<h6>定義最小的標題。具備align屬性，屬性值能夠是：left、center、right。html
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6>
效果python
回到頂部linux
列表
列表又分爲三種，有序列表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的做用，並非給文字增長小圓點的，而是增長列表是否有序的「語義」的，所以不能省略。ide
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>標籤
這三個標籤有與沒有的區別：
- 一、若是寫了，那麼這三個部分的代碼順序能夠任意，瀏覽器顯示的時候仍是按照thead、tbody、tfoot的順序依次來顯示內容。若是不寫thead、tbody、tfoot，那麼瀏覽器解析並顯示錶格內容的時候是從按照代碼的從上到下的順序來顯示。
- 二、當表格很是大內容很是多的時候，若是用thead、tbody、tfoot標籤的話，那麼數據能夠邊獲取邊顯示。若是不寫，則必須等表格的內容所有從服務器獲取完成才能顯示出來。