HTML5 語義化結(jié)構(gòu)化規(guī)范化
互聯(lián)網(wǎng) 發(fā)布時間:2008-10-17 18:55:27 作者:佚名
我要評論
HTML結(jié)構(gòu)更加清晰、規(guī)范,學習HTML5優(yōu)化結(jié)構(gòu)的思路。
HTML5添加了一些新元素,用來標識常用的結(jié)構(gòu),是html更具語義化,可是我們無法直接使用,即使可能用到還要等他個十年八年的。
那就像微格式一樣,使用class代替,或者隨意點,使用id和class名來代替,讓自己的結(jié)構(gòu)更加清
HTML結(jié)構(gòu)更加清晰、規(guī)范,學習HTML5優(yōu)化結(jié)構(gòu)的思路。
HTML5添加了一些新元素,用來標識常用的結(jié)構(gòu),是html更具語義化,可是我們無法直接使用,即使可能用到還要等他個十年八年的。
那就像微格式一樣,使用class代替,或者隨意點,使用id和class名來代替,讓自己的結(jié)構(gòu)更加清晰化,可以推廣為規(guī)范,讓團隊協(xié)作更加順暢。
一些新增的結(jié)構(gòu)標記
◎section:這可以是書中的一章或一節(jié),實際上可以是在HTML4中有自己的標題的任何東西
◎header:頁面上顯示的頁眉;與head元素不一樣
◎footer:頁腳;可以顯示電子郵件中的簽名
◎nav:指向其他頁面的一組鏈接
◎article:blog、雜志、文章匯編等中的一篇文章
一些例子
HTML5的文檔結(jié)構(gòu)
<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
XHTML的文檔結(jié)構(gòu)
<divid="header">header</div>
<divid="nav">nav</div>
<divclass="article">
<divclass="section">section</div>
</div>
<divid="aside">aside</div>
<divid="footer">footer</div>
HTML5的圖片結(jié)構(gòu)
<figureid="fig2">
<legend>Figure2.InstallMozillaXFormsdialog</legend>
<imgalt="AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsigned"src="installdialog.jpg"/>
</figure>
XHTML的圖片結(jié)構(gòu)
<divclass="figure">
<h4class="legend">Figure2.InstallMozillaXFormsdialog</h4>
<imgalt="AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsigned"src="installdialog.jpg"/>
</div>
HTML5的加上標記
m元素表示文本被“加上標志”,但是不一定要強調(diào)??梢园阉胂癯蓵型怀鲲@示的一節(jié)。
Google的緩存頁面就是典型的用例。如果鏈接到一個緩存的副本,搜索詞就被加上標志。例如,如果搜索“Egret”,那么緩存的Google頁面可能像下面這樣:
TheGreat<m>Egret</m>(alsoknownastheAmerican<m>Egret</m>)isalargewhitewadingbirdfoundworldwide.TheGreat<m>Egret</m>flieswithslowwingbeats.ThescientificnameoftheGreat<m>Egret</m>isCasmerodiusalbus.XHTML的加上標記TheGreat<spanclass="m">Egret</span>(alsoknownastheAmerican<spanclass="m">Egret</span>)isalargewhitewadingbirdfoundworldwide.TheGreat<spanclass="m">Egret</span>flieswithslowwingbeats.ThescientificnameoftheGreat<spanclass="m">Egret</span>isCasmerodiusalbus.
HTML5添加了一些新元素,用來標識常用的結(jié)構(gòu),是html更具語義化,可是我們無法直接使用,即使可能用到還要等他個十年八年的。
那就像微格式一樣,使用class代替,或者隨意點,使用id和class名來代替,讓自己的結(jié)構(gòu)更加清晰化,可以推廣為規(guī)范,讓團隊協(xié)作更加順暢。
一些新增的結(jié)構(gòu)標記
◎section:這可以是書中的一章或一節(jié),實際上可以是在HTML4中有自己的標題的任何東西
◎header:頁面上顯示的頁眉;與head元素不一樣
◎footer:頁腳;可以顯示電子郵件中的簽名
◎nav:指向其他頁面的一組鏈接
◎article:blog、雜志、文章匯編等中的一篇文章
一些例子
HTML5的文檔結(jié)構(gòu)
<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
XHTML的文檔結(jié)構(gòu)
<divid="header">header</div>
<divid="nav">nav</div>
<divclass="article">
<divclass="section">section</div>
</div>
<divid="aside">aside</div>
<divid="footer">footer</div>
HTML5的圖片結(jié)構(gòu)
<figureid="fig2">
<legend>Figure2.InstallMozillaXFormsdialog</legend>
<imgalt="AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsigned"src="installdialog.jpg"/>
</figure>
XHTML的圖片結(jié)構(gòu)
<divclass="figure">
<h4class="legend">Figure2.InstallMozillaXFormsdialog</h4>
<imgalt="AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsigned"src="installdialog.jpg"/>
</div>
HTML5的加上標記
m元素表示文本被“加上標志”,但是不一定要強調(diào)??梢园阉胂癯蓵型怀鲲@示的一節(jié)。
Google的緩存頁面就是典型的用例。如果鏈接到一個緩存的副本,搜索詞就被加上標志。例如,如果搜索“Egret”,那么緩存的Google頁面可能像下面這樣:
TheGreat<m>Egret</m>(alsoknownastheAmerican<m>Egret</m>)isalargewhitewadingbirdfoundworldwide.TheGreat<m>Egret</m>flieswithslowwingbeats.ThescientificnameoftheGreat<m>Egret</m>isCasmerodiusalbus.XHTML的加上標記TheGreat<spanclass="m">Egret</span>(alsoknownastheAmerican<spanclass="m">Egret</span>)isalargewhitewadingbirdfoundworldwide.TheGreat<spanclass="m">Egret</span>flieswithslowwingbeats.ThescientificnameoftheGreat<spanclass="m">Egret</span>isCasmerodiusalbus.
相關(guān)文章
- 這篇文章主要介紹了HTML5語義化元素的相關(guān)知識,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2019-08-22
- HTML5 只有一個簡單的文檔類型:<!DOCTYPE html>,表示瀏覽器會按照標準模式解析。今天小編給大家?guī)砹薍TML5新特性之語義化標簽,感興趣的朋友一起看看吧2017-10-31
- b 和 i 標簽在現(xiàn)在的 Web 標準潛規(guī)則中是不推薦使用,甚至是反對使用的,因為認為他們只是“表現(xiàn)”粗體和斜體,而沒有任何“語義”。更多的用 strong2008-10-17
- 本篇文章小編為大家介紹HTML標簽語義化(含H5) ,有需要的朋友可以參考一下2013-04-08
這篇文章主要介紹了詳解HTML5常用的語義化標簽的相關(guān)資料,需要的朋友可以參考下2019-09-27- 下面小編就為大家?guī)硪黄獪\談HTML的語義化和一些簡單優(yōu)化。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-12
- 下面小編就為大家?guī)硪黄獪\談語義化的HTML結(jié)構(gòu)到底有什么好處。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-05
- 下面小編就為大家?guī)硪黄褂谜Z義化標簽去寫你的HTML 兼容IE6,7,8。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2016-04-14
- html標簽語義:即html標簽的含義2012-11-17
- 前兩天參加了公司組織的一個WD培訓,有一節(jié)課講了標簽語義化,聽了之后感覺特別有用,更正了我以前對 HTML 和 CSS 的錯誤看法。2011-01-25


