關於行、塊元素的講解以及HTML5元素的分類
繼上週我們講解了所有常用的CSS選擇器以及CSS選擇器的優先順序。到目前為止，你是不是覺得靜態頁面佈局簡單了很多，而不是單單使用類名選擇器（雖然很好用）來操作了。通過其它選擇器的配合使用，頁面佈局顯得不再那麼讓人“捉急”。但是有不少人在這個時候遇到了問題，多種多樣的標籤給我們的佈局操作帶來了一定的難度，因其種類繁多，大家在使用的時候出現了“選擇困難症”。為此，今天的這篇文章主要為大家講解網頁中常用的標籤以及它又是如何進行分類的。
本文內容概要：
1 行元素的使用
2 塊元素的使用
2 行、塊元素的特性區別
4 行、塊元素的區別總結
5 HTML5元素的總結
在頁面開發中，我們會把標籤做一個分類，大致劃分為：行元素、塊元素、第三類元素。接下來我們就一起來看看這三大類元素的使用情況吧~~~
一、行元素的使用
基本的行元素使用情況到底是怎麼樣的呢？來敲個例項看看吧!~~~
案例介紹
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>H5course</title> <style type="text/css"> span { width: 200px; height: 200px; margin: 20px 100px; } </style> </head> <body> <span>這是span標籤</span> <strong>這是strong標籤</strong> <em>這是em標籤</em> <a href="http:www.baidu.com" title='a標籤的title'>這是a標籤</a> <img src="" alt="標籤img" title='標籤title'> </body> </html>
程式碼案例圖解：
程式碼詳解：
- span標籤內容樣式與直接顯示沒什麼區別；
- strong標籤裡的內容顯示出加粗；
- em標籤裡的內容顯示出傾斜；
- a標籤的內容有一條下劃線並且顯示藍色字型，當你滑鼠移到a標籤之上的時候，會顯示title內容；
- img標籤顯示一張圖片，但是這時候我們沒有在src屬性裡面書寫圖片路徑（或者路徑錯誤的時候），都會顯示alt的內容，當滑鼠移動到img標籤之上的時候，會顯示title內容。
行元素詳解
span標籤：
span標籤是沒有語義性的標籤，類似div，如果不對 span 應用樣式，那麼 span 元素中的文字與div文字沒有任何視覺上的差異。
strong標籤：
strong標籤是定義強調文字，瀏覽器通常是用加粗的字型來顯示其中的內容。
em標籤：
em標籤也是定義強調文字，瀏覽器通常是用傾斜的字型來顯示其中的內容。
img標籤：
img標籤向網頁嵌入一幅影象。從技術上講，img標籤並不會在網頁中插入影象，而是從網頁上鍊接影象，img 標籤建立的是被引用影象的佔位空間。img標籤常用屬性有src、title、alt。
img標籤的 src 屬性是必需的，它的值是影象檔案的 URL，也就是引用該影象的檔案的絕對路徑或相對路徑，具體開發中我們都是用相對路徑，這樣有利於我們專案移動的時候不會發生圖片路徑錯誤。title和alt屬性有利於搜尋引擎優化，在後面SEO課程會提到。
a標籤：
a標籤定義超連結，用於從一個頁面連結到另一個頁面，a標籤常用屬性有title、href。
href屬性的值可以是一個網頁的路徑（相對路徑與絕對路徑）或者是一個網址，如果未設定 href 屬性，則只是超連結的佔位符。title屬性也是有利於搜尋引擎優化，在後面SEO課程會提到。
行元素總結
- span、strong等標籤是屬於行元素，行元素顯示在同一行；
- 行元素不可以設定寬高，對其設定上下的margin、padding是無效；
- 未設定寬高的時候，內容撐開寬高。
行元素的巢狀規則來說，行元素只能包含行元素，不能包含塊元素。
注意：如果引入了重置檔案，標籤的預設樣式被清除了，所以標籤出來的樣式沒有什麼差別。
二、塊元素的使用
瞭解了行元素使用情況後，對於所謂的塊元素的使用到底又是怎麼樣的呢？也一起來看下面的例項吧~~~
案例介紹
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>H5course</title>
<style type="text/css">
h1 {
width: 200px;
height: 40px;
margin: 50px;
padding: 50px;
background: #fcf;
}
h2, h3 {
background: #ccf;
}
</style>
</head>
<body>
<h1>這是h1標籤</h1>
<h2>這是h2標籤</h2>
<h3>這是h3標籤</h3>
<h4>這是h4標籤</h4>
<h5>這是h5標籤</h5>
<h6>這是h6標籤</h6>
<p>這是p標籤</p>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<dl>
<dt>定義列表中的專案</dt>
<dd>描述列表中的專案</dd>
</dl>
</body>
</html>程式碼案例圖解：
程式碼詳解：
- 從瀏覽器中檢視效果，看到了h系列標籤是可以設定寬高，未設定寬高的時候由內容撐開高度，寬度為父元素的100%；
- p標籤沒有書寫樣式下跟div標籤、span標籤的樣式上沒有太大的差別；
- ol標籤前面顯示的是數字1，2，3等；
- ul標籤前面顯示的是小黑點；
- 還有一點的是這些標籤都是獨佔一行（寬度為父級的100%）。
塊元素詳解
h系列標籤：
從語義性理解，它是標題標籤；比如可以在模組標題、詳情頁中段落標題使用等，字型上逐漸變小。
h系列標籤的範圍為h1~h6，為了SEO優化常用h1~h3，h4~h6不推薦使用，h4較為少用。
p標籤：
p標籤定義的是段落，p 元素會自動在其前後建立一些空白，瀏覽器會自動新增這些空間，同時也可以在樣式表中書寫。主要在模組中內容、詳情頁中的段落等使用。
ol標籤：
ol標籤定義的是有序列表，ol只能直接巢狀著li標籤。
ul標籤：
ul標籤定義的是無序列表，ul只能直接巢狀著li標籤；
用法：ul和ol常常用於文章標題列表排版或者使用圖片列表排版佈局；
dl標籤：
dl：自定義列表，只能直接巢狀著dt和dd；
用法：dl常用於圖文並茂的結構（有圖片和圖片描述的結構）。
塊元素總結
- 以上這些標籤都是屬於塊元素的，塊元素是獨佔一行;
- 塊元素可以設定寬高，對其設定margin和padding都有效；
- 未設定寬高的時候，寬度是父元素寬度的100%，高度由內容撐開。
塊元素的巢狀規則來說：p標籤是屬於塊元素，但是不能包含塊元素只能包含行元素；ol和ul中只能直接巢狀li標籤；dl只能直接巢狀著dt和dd，dt是屬於塊元素，但是不能包含塊元素只能包含行元素。
注意：當你引入了reset.css檔案，ul和ol不會出現小黑點或者是數字，因為裡面已經設定list-style:none；p標籤前後也不會自動新增這些空間，因為裡面設定了margin、padding都為0。
三、 行、塊元素的特性區別
瞭解不同的行、塊元素各自的特點，也大致知道了行、塊元素之間的區別。但是要更明白的瞭解一些特性就要一起來看看下面的這幾個案例了。
1、尺寸-塊元素和行元素之間的一個重要的不同點
設定寬度width 無效；
設定高度height 無效，可以通過line-height來設定；
設定margin 只有左右margin有效，上下無效；
設定padding 只有左右padding有效，上下則無效。
注意：這裡說的無效均是指行元素，對其它元素的排列沒有影響。也就是說，對於設定了margin，padding的行元素文件流裡的上下元素來說，他們的間距不會因為上下margin或者上下padding而產生間距。但是就本身而言，對於左右margin與padding是有效的。
2、text-align屬性是行、塊元素表現的又一不同
這個特性描述瞭如何使一個塊元素的行內內容對齊；
注意一點，w3c標準裡說這個屬性是用來對齊行內內容的，所以不應該對塊級內容起作用；解釋一下，行內內容是說由行內元素組成的內容；但是問題來了，雖然標準裡這麼規定，那麼是不是所有瀏覽器都遵守呢？答案是否定的。
IE6/7及IE8文件模式中，text- align:center可以使塊級元素也居中對齊。其他瀏覽器中，text-align:center僅作用於行內內容上。
四、 行、塊元素的區別總結
通過上文我們知道了行元素與塊元素的使用，也瞭解了行、塊之間存在區別的特性。但是要具體的做個總結，仍然還不是很明白，接下來小編就給大家整理出了行、塊元素的區別總結，一起來看看咯~~~
塊元素特點
1) 獨佔一行，在預設情況下，寬度自動填滿父元素寬度；
2) 寬度和高度可以控制；
3) margin和padding橫向縱向設定都有效；
4) 可以通過display: inline; 轉換為行內元素；
5) 除個別特殊元素外，其他都可包含塊狀元素和行內元素。
行元素特點
1) 並排顯示，不能獨佔一行；
2) 寬高不可設定，只由內容撐開；
3) margin和padding橫向設定有效，縱向設定不產生邊距效果；
4) 可以通過display: block; 轉換為塊狀元素；
5) 除ins和del外，其他都不能包含塊狀元素。
五、HTML5的元素總結
上文中我們講解了很多標籤的特點與使用方法，究其根本，也仍然還是在對行、塊元素做了很大篇幅的介紹。而對於HTML5來說，不僅僅只是由行、塊兩大類元素組成的。在這之外，還有一大類重要的標籤，那具體還包括哪些呢？接下來就給大家來列舉下吧！
HTML文件標籤
- <!DOCTYPE> 定義文件型別.
- <html> 定義HTML文件.
- <head> 定義文件的頭部.（頭部內包含）
- <meta> 定義元素可提供有關頁面的元資訊，比如針對搜尋引擎和更新頻度的描述和關鍵詞.
- <base> 定義頁面上的所有連結規定預設地址或預設目標.
- <title> 定義文件的標題.
- <link> 定義文件與外部資源的關係.
- <style> 定義 HTML 文件樣式資訊.
- <body> 定義文件的主體.（指令碼在非必須情況時在主體內容最後）
- <script> 定義客戶端指令碼，比如 JavaScript.
- <noscript> 定義在指令碼未被執行時的替代內容.（文字）
佈局標籤&語義化
- <div> 定義塊級元素.
- <span> 定義行業元素.
- <header> 定義區段或頁面的頁首.（頭部）
- <footer> 定義區段或頁面的頁尾.（尾部）
- <section> 定義文件中的區段.
- <article> 定義文章.
- <aside> 定義頁面內容之外的內容.
- <details> 定義元素的細節.
- <summary> 定義 <details> 元素可見的標題.
- <dialog> 定義對話方塊或視窗.
- <nav> 定義導航.
- <hgroup> 定義標題組.
表格標籤
- <table> 定義表格.
- <thead> 定義表頭.
- <tbody> 定義主體.
- <tfoot> 定義頁尾.
- <caption> 定義標題.
- <th> 定義表頭.
- <tr> 定義一行.
- <td> 定義單元格.
表單標籤
- <form> 定義表單.(表單包含在form標籤中)
- <input> 定義輸入域.
- <textarea> 定義文字域.(多行)
- <label> 定義一個控制的標籤.(input 元素的標註)
- <fieldset> 定義域.
- <legend> 定義域的標題.
- <select> 定義一個選擇列表.
- <optgroup> 定義選擇組.
- <option> 定義下拉 列表的選項.
- <button> 定義按鈕.(定義圍繞表單中元素的邊框.)
- <fieldset> 定義圍繞表單中元素的邊框.
- <legend> 定義 fieldset 元素的標題.
- <fieldset> 定義選項列表.與input 元素配合使用該元素，來定義 input 可能的值.
- <keygen> 定義表單的金鑰對生成器欄位.
- <output> 定義不同型別的輸出，比如指令碼的輸出.
列表標籤
- <ul> 定義無序列表.
- <ol> 定義有序列表.
- <li> 定義列表項.
- <dl> 定義自定義列表.
- <dt> 定義自定義列表項.
- <dd> 定義自定義的描述.
影象&連結標籤
- <img> 定義影象.注意加上alt屬性.
- <a> 定義超連結.
- <map> 定義影象對映.
- <area> 定義影象地圖內部的區域.
- <figure> 定義媒介內容的分組.
- <figcaption> 定義 <figure> 元素的標題.
音訊/視訊
- <audio> 定義聲音內容.
- <source> 定義媒介源.
- <track> 定義用在媒體播放器中的文字軌道.
- <video> 定義視訊.
其他元素
- <canvas> 定義圖形容器，必須使用指令碼來繪製圖形.
- <meter> 定義預定義範圍內的度量.
- <progress> 定義任何型別的任務的進度.
五、課程作業安排
根據今天所學的知識點，總結HTML5中的元素分類，優化標籤的選擇。