HTML標(biāo)簽語義化（含H5）
發(fā)布時間：2013-04-08 14:31:59 作者：佚名 
我要評論
我要評論本篇文章小編為大家介紹HTML標(biāo)簽語義化（含H5） ，有需要的朋友可以參考一下
介紹
HTML是提供網(wǎng)頁文檔內(nèi)容的上下文結(jié)構(gòu)和含義；HTML本身是沒有表現(xiàn)的，我們看到的例如<H3>是粗體，字號為2em；<strong>的加粗，不要認(rèn)為這些是html的表現(xiàn)，這是html的默認(rèn)樣式在起作用，所以我們要知道html和頁面的表現(xiàn)是沒有關(guān)系的，表現(xiàn)是CSS的事。html在頁面中的作用是結(jié)構(gòu)、含義，說白了就是劃分內(nèi)容，這里放什么，我們放的是什么。
結(jié)構(gòu)化
一個頁面比作房子，那HTML就是鋼筋混凝土的墻，房蓋房梁一樣的架子；而CSS就是裝飾材料，地板油漆一類的東西。好的頁面結(jié)構(gòu)就是在沒有CSS裝飾的情況下，頁面結(jié)構(gòu)依然清晰明了，房屋依然可現(xiàn)。而人們常說的DIV+CSS，只是通俗的說法，并不是通篇的DIV，記?。篋IV不是神！
語義化
HTML是一種對文本內(nèi)容和意義（即語義）的補(bǔ)充說法。它會告訴我們說：“這行是一個標(biāo)題，這幾行組成一個段落，這是一個項目列表，那是一個鏈接。”而不是來告訴我們：“這些字是藍(lán)色的，那些又是紅色的，這部分內(nèi)容靠右，這幾個是斜體。”這些是CSS的工作?？傊篐TML告訴我們一塊內(nèi)容是什么（或其意義），而不是它長什么樣子。
復(fù)制代碼
代碼如下:<!--未語義化-->
<div id="header">
<div class="H3">前磚攻城師</div>
<div class="h2">搭積木也要玩藝術(shù)</div>
</div>
<!--語義化之后-->
<div id="header">
<H3>前磚攻城師</H3>
<h2>搭積木也要玩藝術(shù)</h2>
</div>
語義化的好處？
- 去掉樣式能讓頁面結(jié)構(gòu)呈現(xiàn)清晰
- 屏幕閱讀器會按標(biāo)記“讀”你的網(wǎng)頁
- 有益于SEO
- 便于團(tuán)隊開發(fā)和維護(hù)
附:HTML5新增元素
| 標(biāo)簽 | 含義 | 與html4對照 |
| <article> | 標(biāo)簽定義外部的內(nèi)容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內(nèi)容 | HTML5:<article></article> HTML4:<div></div> |
| <section> | 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。 | HTML5: <section></section> HTML4: <div></div> |
| <aside> | 標(biāo)簽定義 article 以外的內(nèi)容。aside 的內(nèi)容應(yīng)該與 article 的內(nèi)容相關(guān)。 | HTML5:<aside>Aside 的內(nèi)容是獨(dú)立的內(nèi)容，但應(yīng)與文檔內(nèi)容相關(guān)。</aside> HTML4:<div>Aside 的內(nèi)容是獨(dú)立的內(nèi)容，但應(yīng)與文檔內(nèi)容相關(guān)。</div> |
| <header> | 標(biāo)簽定義 section 或 document 的頁眉。 | HTML5: <header></header> HTML4: <div></div> |
| <footer> | 標(biāo)簽定義 section 或 document 的頁腳。典型地，它會包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及/或者聯(lián)系信息。 | HTML5: <footer></footer> HTML4: <div></div> |
| <hgroup> | 標(biāo)簽用于對網(wǎng)頁或區(qū)段（section）的標(biāo)題進(jìn)行組合。 | HTML5: <hgroup></hgroup> HTML4: <div></div> |
| <nav> | 標(biāo)簽定義導(dǎo)航鏈接的部分 | HTML5: <nav></nav> HTML4:<ul></ul> |
| <canvas> | 標(biāo)簽定義圖形，比如圖表和其他圖像。這個 HTML 元素是為了客戶端矢量圖形而設(shè)計的。它自己沒有行為，但卻把一個繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。 | HTML5:<canvas id="myCanvas" width="200" height="200"></canvas> HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object> |
| <video> | 標(biāo)簽定義視頻，比如電影片段或其他視頻流。 | HTML5: <video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標(biāo)簽。</video> HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object> |
| <audio> | 標(biāo)簽定義聲音，比如音樂或其他音頻流。 | HTML5:<audio src="someaudio.wav">您的瀏覽器不支持 audio 標(biāo)簽。</audio> HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object> |
| <embed> | 標(biāo)簽定義嵌入的內(nèi)容，比如插件。 | HTML5: <embed src="horse.wav" /> HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object> |
| <source> | 標(biāo)簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。 | HTML5: <source> HTML4: <param> |
| <datalist> | 標(biāo)簽定義可選數(shù)據(jù)的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。 | HTML5: <datalist></datalist> HTML4: none |
| <details> | 標(biāo)簽定義元素的細(xì)節(jié)，用戶可進(jìn)行查看，或通過點(diǎn)擊進(jìn)行隱藏。與 <legend> 一起使用，來制作 detail 的標(biāo)題。該標(biāo)題對用戶是可見的，當(dāng)在其上點(diǎn)擊時可打開或關(guān)閉 detail。 | HTML5: <details></details> HTML4: <dl style="display:hidden"></dl> |
| <summary> | 標(biāo)簽包含 details 元素的標(biāo)題，”details” 元素用于描述有關(guān)文檔或文檔片段的詳細(xì)信息。”summary” 元素應(yīng)該是 “details” 元素的第一個子元素。 | HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details> HTML4: none |
| <figure> | 標(biāo)簽用于對元素進(jìn)行組合。使用 <figcaption> 元素為元素組添加標(biāo)題。 | HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure> HTML4: <dl><H3>PRC</H3><p>The People's Republic of China was born in 1949...</p></dl> |
| <figcaption> | 標(biāo)簽定義 figure 元素的標(biāo)題。”figcaption” 元素應(yīng)該被置于 “figure” 元素的第一個或最后一個子元素的位置。 | HTML5: <figure><figcaption>PRC</figcaption></figure> HTML4: none |
| <mark> | 主要用來在視覺上向用戶呈現(xiàn)那些需要突出的文字。<mark>標(biāo)簽的一個比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞。 | HTML5: <mark></mark> HTML4: <span></span |
| <meter> | 標(biāo)簽定義度量衡。僅用于已知最大和最小值的度量。必須定義度量的范圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。 | HTML5: <meter></meter> HTML4: none |
| <output> | 標(biāo)簽定義不同類型的輸出，比如腳本的輸出。 | HTML5: <output></output> HTML4: <span></span> |
| <progress> | 標(biāo)簽運(yùn)行中的進(jìn)程?？梢允褂?<progress> 標(biāo)簽來顯示 JavaScript 中耗費(fèi)時間的函數(shù)的進(jìn)程。 | HTML5: <progress></progress> HTML4: none |
| <time> | 標(biāo)簽定義日期或時間，或者兩者。 | HTML5: <time></time> HTML4: <span></span> |
| <keygen> | 標(biāo)簽用于對網(wǎng)頁或區(qū)段（section）的標(biāo)題進(jìn)行組合 | HTML5: <keygen> HTML4: none |
| <command> | 標(biāo)簽定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕。 | HTML5: <command onclick=cut()" label="cut"> HTML4: none |
相關(guān)文章
- 這篇文章主要介紹了HTML5語義化元素的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-22
- HTML5 只有一個簡單的文檔類型：<!DOCTYPE html>，表示瀏覽器會按照標(biāo)準(zhǔn)模式解析。今天小編給大家?guī)砹薍TML5新特性之語義化標(biāo)簽，感興趣的朋友一起看看吧2017-10-31
- b 和 i 標(biāo)簽在現(xiàn)在的 Web 標(biāo)準(zhǔn)潛規(guī)則中是不推薦使用，甚至是反對使用的，因?yàn)檎J(rèn)為他們只是“表現(xiàn)”粗體和斜體，而沒有任何“語義”。更多的用 strong2008-10-17
HTML5 語義化結(jié)構(gòu)化規(guī)范化
HTML結(jié)構(gòu)更加清晰、規(guī)范，學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。 HTML5添加了一些新元素，用來標(biāo)識常用的結(jié)構(gòu)，是html更具語義化，可是我們無法直接使用，即使可能用到還要等他個十年2008-10-17
這篇文章主要介紹了詳解HTML5常用的語義化標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2019-09-27- 下面小編就為大家?guī)硪黄獪\談HTML的語義化和一些簡單優(yōu)化。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-12
淺談?wù)Z義化的HTML結(jié)構(gòu)到底有什么好處
下面小編就為大家?guī)硪黄獪\談?wù)Z義化的HTML結(jié)構(gòu)到底有什么好處。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-05使用語義化標(biāo)簽去寫你的HTML 兼容IE6,7,8
下面小編就為大家?guī)硪黄褂谜Z義化標(biāo)簽去寫你的HTML 兼容IE6,7,8。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-14- html標(biāo)簽語義：即html標(biāo)簽的含義2012-11-17
- 前兩天參加了公司組織的一個WD培訓(xùn)，有一節(jié)課講了標(biāo)簽語義化，聽了之后感覺特別有用，更正了我以前對 HTML 和 CSS 的錯誤看法。2011-01-25
