本文內(nèi)容概要：

　　1 行元素的使用

　　2 塊元素的使用

　　3 行、塊元素的特性區(qū)別

　　4 行、塊元素的區(qū)別總結(jié)

　　5 HTML5元素的總結(jié)

　　在頁(yè)面開(kāi)發(fā)中，我們會(huì)把標(biāo)簽做一個(gè)分類，大致劃分為：行元素、塊元素、第三類元素。接下來(lái)java培訓(xùn)班就帶我們就一起來(lái)看看這三大類元素的使用情況吧~~~

　　一、行元素的使用

　　基本的行元素使用情況到底是怎么樣的呢?來(lái)敲個(gè)實(shí)例看看吧!~~~

　　案例介紹

　　代碼詳解：

　　span標(biāo)簽內(nèi)容樣式與直接顯示沒(méi)什么區(qū)別;

　　strong標(biāo)簽里的內(nèi)容顯示出加粗;

　　em標(biāo)簽里的內(nèi)容顯示出傾斜;

　　a標(biāo)簽的內(nèi)容有一條下劃線并且顯示藍(lán)色字體，當(dāng)你鼠標(biāo)移到a標(biāo)簽之上的時(shí)候，會(huì)顯示title內(nèi)容;

　　img標(biāo)簽顯示一張圖片，但是這時(shí)候我們沒(méi)有在src屬性里面書(shū)寫(xiě)圖片路徑(或者路徑錯(cuò)誤的時(shí)候)，都會(huì)顯示alt的內(nèi)容，當(dāng)鼠標(biāo)移動(dòng)到img標(biāo)簽之上的時(shí)候，會(huì)顯示title內(nèi)容。

　　行元素詳解

　　span標(biāo)簽：

　　span標(biāo)簽是沒(méi)有語(yǔ)義性的標(biāo)簽，類似div，如果不對(duì) span 應(yīng)用樣式，那么 span 元素中的文本與div文本沒(méi)有任何視覺(jué)上的差異。

　　strong標(biāo)簽：

　　strong標(biāo)簽是定義強(qiáng)調(diào)文本，瀏覽器通常是用加粗的字體來(lái)顯示其中的內(nèi)容。

　　em標(biāo)簽：

　　em標(biāo)簽也是定義強(qiáng)調(diào)文本，瀏覽器通常是用傾斜的字體來(lái)顯示其中的內(nèi)容。

　　img標(biāo)簽：

　　img標(biāo)簽向網(wǎng)頁(yè)嵌入一幅圖像。從技術(shù)上講，img標(biāo)簽并不會(huì)在網(wǎng)頁(yè)中插入圖像，而是從網(wǎng)頁(yè)上鏈接圖像，img 標(biāo)簽創(chuàng)建的是被引用圖像的占位空間。img標(biāo)簽常用屬性有src、title、alt。

　　img標(biāo)簽的 src 屬性是必需的，它的值是圖像文件的 URL，也就是引用該圖像的文件的絕對(duì)路徑或相對(duì)路徑，具體開(kāi)發(fā)中我們都是用相對(duì)路徑，這樣有利于我們項(xiàng)目移動(dòng)的時(shí)候不會(huì)發(fā)生圖片路徑錯(cuò)誤。title和alt屬性有利于搜索引擎優(yōu)化，在后面SEO課程會(huì)提到。

　　a標(biāo)簽：

　　a標(biāo)簽定義超鏈接，用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面，a標(biāo)簽常用屬性有title、href。

　　href屬性的值可以是一個(gè)網(wǎng)頁(yè)的路徑(相對(duì)路徑與絕對(duì)路徑)或者是一個(gè)網(wǎng)址，如果未設(shè)置 href 屬性，則只是超鏈接的占位符。title屬性也是有利于搜索引擎優(yōu)化，在后面SEO課程會(huì)提到。

　　行元素總結(jié)

　　span、strong等標(biāo)簽是屬于行元素，行元素顯示在同一行;

　　行元素不可以設(shè)置寬高，對(duì)其設(shè)置上下的margin、padding是無(wú)效;

　　未設(shè)置寬高的時(shí)候，內(nèi)容撐開(kāi)寬高。

　　行元素的嵌套規(guī)則來(lái)說(shuō)，行元素只能包含行元素，不能包含塊元素。

　　注意：如果引入了重置文件，標(biāo)簽的默認(rèn)樣式被清除了，所以標(biāo)簽出來(lái)的樣式?jīng)]有什么差別。

　　二、塊元素的使用

　　了解了行元素使用情況后，對(duì)于所謂的塊元素的使用到底又是怎么樣的呢?也一起來(lái)看下面的實(shí)例吧~~~

　　案例介紹

　　代碼案例圖解：

　　定義列表中的項(xiàng)目

　　描述列表中的項(xiàng)目

　　代碼詳解：

　　從瀏覽器中查看效果，看到了h系列標(biāo)簽是可以設(shè)置寬高，未設(shè)置寬高的時(shí)候由內(nèi)容撐開(kāi)高度，寬度為父元素的100%;

　　p標(biāo)簽沒(méi)有書(shū)寫(xiě)樣式下跟div標(biāo)簽、span標(biāo)簽的樣式上沒(méi)有太大的差別;

　　ol標(biāo)簽前面顯示的是數(shù)字1，2，3等;

　　ul標(biāo)簽前面顯示的是小黑點(diǎn);

　　還有一點(diǎn)的是這些標(biāo)簽都是獨(dú)占一行(寬度為父級(jí)的100%)。

　　塊元素詳解

　　h系列標(biāo)簽：

　　從語(yǔ)義性理解，它是標(biāo)題標(biāo)簽;比如可以在模塊標(biāo)題、詳情頁(yè)中段落標(biāo)題使用等，字體上逐漸變小。

　　h系列標(biāo)簽的范圍為h1~h6，為了SEO優(yōu)化常用h1~h3，h4~h6不推薦使用，h4較為少用。

　　p標(biāo)簽：

　　p標(biāo)簽定義的是段落，p 元素會(huì)自動(dòng)在其前后創(chuàng)建一些空白，瀏覽器會(huì)自動(dòng)添加這些空間，同時(shí)也可以在樣式表中書(shū)寫(xiě)。主要在模塊中內(nèi)容、詳情頁(yè)中的段落等使用。

　　填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)java課程!害怕學(xué)不會(huì)?助教全程陪讀，隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí)，可全國(guó)推薦就業(yè)!

　　ol標(biāo)簽：

　　ol標(biāo)簽定義的是有序列表，ol只能直接嵌套著li標(biāo)簽。

　　ul標(biāo)簽：

　　ul標(biāo)簽定義的是無(wú)序列表，ul只能直接嵌套著li標(biāo)簽;

　　用法：ul和ol常常用于文章標(biāo)題列表排版或者使用圖片列表排版布局;

　　dl標(biāo)簽：

　　dl：自定義列表，只能直接嵌套著dt和dd;

　　用法：dl常用于圖文并茂的結(jié)構(gòu)(有圖片和圖片描述的結(jié)構(gòu))。

　　塊元素總結(jié)

　　以上這些標(biāo)簽都是屬于塊元素的，塊元素是獨(dú)占一行;

　　塊元素可以設(shè)置寬高，對(duì)其設(shè)置margin和padding都有效;

　　未設(shè)置寬高的時(shí)候，寬度是父元素寬度的100%，高度由內(nèi)容撐開(kāi)。

　　塊元素的嵌套規(guī)則來(lái)說(shuō)：p標(biāo)簽是屬于塊元素，但是不能包含塊元素只能包含行元素;ol和ul中只能直接嵌套li標(biāo)簽;dl只能直接嵌套著dt和dd，dt是屬于塊元素，但是不能包含塊元素只能包含行元素。

　　注意：當(dāng)你引入了reset.css文件，ul和ol不會(huì)出現(xiàn)小黑點(diǎn)或者是數(shù)字，因?yàn)槔锩嬉呀?jīng)設(shè)置list-style:none;p標(biāo)簽前后也不會(huì)自動(dòng)添加這些空間，因?yàn)槔锩嬖O(shè)置了margin、padding都為0。

　　三、 行、塊元素的特性區(qū)別

　　了解不同的行、塊元素各自的特點(diǎn)，也大致知道了行、塊元素之間的區(qū)別。但是要更明白的了解一些特性就要一起來(lái)看看下面的這幾個(gè)案例了。

　　1、尺寸-塊元素和行元素之間的一個(gè)重要的不同點(diǎn)

　　設(shè)置寬度width 無(wú)效;

　　設(shè)置高度height 無(wú)效，可以通過(guò)line-height來(lái)設(shè)置;

　　設(shè)置margin 只有左右margin有效，上下無(wú)效;

　　設(shè)置padding 只有左右padding有效，上下則無(wú)效。

　　注意：這里說(shuō)的無(wú)效均是指行元素，對(duì)其它元素的排列沒(méi)有影響。也就是說(shuō)，對(duì)于設(shè)置了margin，padding的行元素文檔流里的上下元素來(lái)說(shuō)，他們的間距不會(huì)因?yàn)樯舷耺argin或者上下padding而產(chǎn)生間距。但是就本身而言，對(duì)于左右margin與padding是有效的。

　　2、text-align屬性是行、塊元素表現(xiàn)的又一不同

　　這個(gè)特性描述了如何使一個(gè)塊元素的行內(nèi)內(nèi)容對(duì)齊;

　　注意一點(diǎn)，w3c標(biāo)準(zhǔn)里說(shuō)這個(gè)屬性是用來(lái)對(duì)齊行內(nèi)內(nèi)容的，所以不應(yīng)該對(duì)塊級(jí)內(nèi)容起作用;解釋一下，行內(nèi)內(nèi)容是說(shuō)由行內(nèi)元素組成的內(nèi)容;但是問(wèn)題來(lái)了，雖然標(biāo)準(zhǔn)里這么規(guī)定，那么是不是所有瀏覽器都遵守呢?答案是否定的。

　　IE6/7及IE8文檔模式中，text- align:center可以使塊級(jí)元素也居中對(duì)齊。其他瀏覽器中，text-align:center僅作用于行內(nèi)內(nèi)容上。

　　四、 行、塊元素的區(qū)別總結(jié)

　　通過(guò)上文我們知道了行元素與塊元素的使用，也了解了行、塊之間存在區(qū)別的特性。但是要具體的做個(gè)總結(jié)，仍然還不是很明白，接下來(lái)小編就給大家整理出了行、塊元素的區(qū)別總結(jié)，一起來(lái)看看咯~~~

　　塊元素特點(diǎn)

　　1) 獨(dú)占一行，在默認(rèn)情況下，寬度自動(dòng)填滿父元素寬度;

　　2) 寬度和高度可以控制;

　　3) margin和padding橫向縱向設(shè)置都有效;

　　4) 可以通過(guò)display: inline; 轉(zhuǎn)換為行內(nèi)元素;

　　5) 除個(gè)別特殊元素外，其他都可包含塊狀元素和行內(nèi)元素。

　　行元素特點(diǎn)

　　1) 并排顯示，不能獨(dú)占一行;

　　2) 寬高不可設(shè)置，只由內(nèi)容撐開(kāi);

　　3) margin和padding橫向設(shè)置有效，縱向設(shè)置不產(chǎn)生邊距效果;

　　4) 可以通過(guò)display: block; 轉(zhuǎn)換為塊狀元素;

　　5) 除ins和del外，其他都不能包含塊狀元素。

　　五、HTML5的元素總結(jié)

　　上文中我們講解了很多標(biāo)簽的特點(diǎn)與使用方法，究其根本，也仍然還是在對(duì)行、塊元素做了很大篇幅的介紹。而對(duì)于HTML5來(lái)說(shuō)，不僅僅只是由行、塊兩大類元素組成的。在這之外，還有一大類重要的標(biāo)簽，那具體還包括哪些呢?接下來(lái)就給大家來(lái)列舉下吧!

　　HTML文檔標(biāo)簽

　　定義文檔類型.

　　定義HTML文檔.

　　定義文檔的頭部.(頭部?jī)?nèi)包含)

　　定義元素可提供有關(guān)頁(yè)面的元信息，比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞.

　　定義頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo).