HTML結(jié)構(gòu)更加清晰、規(guī)范,學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。_XHTML教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
HTML結(jié)構(gòu)更加清晰、規(guī)范,學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。
HTML 5 添加了一些新元素,用來標(biāo)識(shí)常用的結(jié)構(gòu),是html更具語義化,可是我們無法直接使用,即使可能用到還要等他個(gè)十年八年的。
那就像微格式一樣,使用class代替,或者隨意點(diǎn),使用id和class名來代替,讓自己的結(jié)構(gòu)更加清晰化,可以推廣為規(guī)范,讓團(tuán)隊(duì)協(xié)作更加順暢。
一些新增的結(jié)構(gòu)標(biāo)記
◎ section:這可以是書中的一章或一節(jié),實(shí)際上可以是在 HTML 4 中有自己的標(biāo)題的任何東西
◎ header:頁面上顯示的頁眉;與 head 元素不一樣
◎ footer:頁腳;可以顯示電子郵件中的簽名
◎ nav:指向其他頁面的一組鏈接
◎ article:blog、雜志、文章匯編等中的一篇文章
一些例子
HTML5的文檔結(jié)構(gòu)
XHTML的文檔結(jié)構(gòu)
HTML5的圖片結(jié)構(gòu)
XHTML的圖片結(jié)構(gòu)
HTML5的加上標(biāo)記
m 元素表示文本被 “加上標(biāo)志”,但是不一定要強(qiáng)調(diào)。可以把它想像成書中突出顯示的一節(jié)。
Google 的緩存頁面就是典型的用例。如果鏈接到一個(gè)緩存的副本,搜索詞就被加上標(biāo)志。例如,如果搜索 “Egret”,那么緩存的 Google 頁面可能像下面這樣:
HTML 5 添加了一些新元素,用來標(biāo)識(shí)常用的結(jié)構(gòu),是html更具語義化,可是我們無法直接使用,即使可能用到還要等他個(gè)十年八年的。
那就像微格式一樣,使用class代替,或者隨意點(diǎn),使用id和class名來代替,讓自己的結(jié)構(gòu)更加清晰化,可以推廣為規(guī)范,讓團(tuán)隊(duì)協(xié)作更加順暢。
一些新增的結(jié)構(gòu)標(biāo)記
◎ section:這可以是書中的一章或一節(jié),實(shí)際上可以是在 HTML 4 中有自己的標(biāo)題的任何東西
◎ header:頁面上顯示的頁眉;與 head 元素不一樣
◎ footer:頁腳;可以顯示電子郵件中的簽名
◎ nav:指向其他頁面的一組鏈接
◎ article:blog、雜志、文章匯編等中的一篇文章
一些例子
HTML5的文檔結(jié)構(gòu)
示例代碼 [m.dounai2.com]
<header>...</header>
<nav>...</nav>
<article>
<section> ... </section>
</article>
<aside>...</aside>
<footer>...</footer>
<nav>...</nav>
<article>
<section> ... </section>
</article>
<aside>...</aside>
<footer>...</footer>
XHTML的文檔結(jié)構(gòu)
示例代碼 [m.dounai2.com]
<div id="header">header</div>
<div id="nav">nav</div>
<div class="article">
<div class="section">section</div>
</div>
<div id="aside">aside</div>
<div id="footer">footer</div>
<div id="nav">nav</div>
<div class="article">
<div class="section">section</div>
</div>
<div id="aside">aside</div>
<div id="footer">footer</div>
HTML5的圖片結(jié)構(gòu)
示例代碼 [m.dounai2.com]
<figure id="fig2">
<legend>Figure 2. Install Mozilla XForms dialog</legend>
<img alt="A Web site is requesting permission to install the ollowing item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" />
</figure>
<legend>Figure 2. Install Mozilla XForms dialog</legend>
<img alt="A Web site is requesting permission to install the ollowing item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" />
</figure>
XHTML的圖片結(jié)構(gòu)
示例代碼 [m.dounai2.com]
<div class="figure">
<h4 class="legend">Figure 2. Install Mozilla XForms dialog</h4>
<img alt="A Web site is requesting permission to install the ollowing item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" />
</div>
<h4 class="legend">Figure 2. Install Mozilla XForms dialog</h4>
<img alt="A Web site is requesting permission to install the ollowing item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" />
</div>
HTML5的加上標(biāo)記
m 元素表示文本被 “加上標(biāo)志”,但是不一定要強(qiáng)調(diào)。可以把它想像成書中突出顯示的一節(jié)。
Google 的緩存頁面就是典型的用例。如果鏈接到一個(gè)緩存的副本,搜索詞就被加上標(biāo)志。例如,如果搜索 “Egret”,那么緩存的 Google 頁面可能像下面這樣:
示例代碼 [m.dounai2.com]
The Great <m>Egret</m> (also known as the American <m>Egret</m>) is a large white wading bird found worldwide.The Great <m>Egret</m> flies with slow wing beats. The scientific name of the Great <m>Egret</m> isCasmerodius albus.XHTML的加上標(biāo)記The Great <span class="m">Egret</span> (also known as the American <span class="m">Egret</span>) is a large white wading bird found worldwide.The Great <span class="m">Egret</span> flies with slow wing beats. The scientific name of the Great <span class="m">Egret</span> isCasmerodius albus.
相關(guān)XHTML教程:
- HTML5 INPUT placeholder及兼容性處理
- HTML表單里的Label標(biāo)簽
- 淺析HTML與javascript中常用編碼
- CSS網(wǎng)頁布局中必須要了解的幾個(gè)XHTML標(biāo)簽
- title和alt 標(biāo)簽介紹及其異同
- 淺析HTML標(biāo)簽strong和em的區(qū)別
- 說說XHTML中的alt屬性和title屬性
- Semantics語義是Html Xhtml是否真正符合標(biāo)準(zhǔn)的重要部分
- 九個(gè)W3C XHTML1.0及CSS標(biāo)準(zhǔn)認(rèn)證需要注意的問題
- 請注意頁面head區(qū)域的編碼是不是規(guī)范
- HTML validate - 驗(yàn)證HTML代碼穿越多重瀏覽器標(biāo)準(zhǔn)
- XHTML具有語義的標(biāo)簽:有關(guān)H1位置的討論
XHTML教程Rss訂閱Div+Css教程搜索
XHTML教程推薦
- DIV CSS網(wǎng)頁布局中常用的列表元素ul ol li dl dt dd釋義
- title和alt 標(biāo)簽介紹及其異同
- 通過XHTML校驗(yàn)的幾個(gè)注意事項(xiàng)
- 網(wǎng)頁制作解惑:圖象文件的路徑
- HTML表格標(biāo)記教程(12):邊框樣式屬性FRAME
- HTML高級(jí)教程標(biāo)準(zhǔn)要點(diǎn)(xhtml)
- HTML表格標(biāo)記教程(39):表頭的亮邊框色屬性BORDERCOLORLIGHT
- 淺析HTML與javascript中常用編碼
- HTML教程:收集的常用的HTML標(biāo)簽(4)
- HTML初級(jí)教程標(biāo)簽、屬性和元素
- 相關(guān)鏈接:
復(fù)制本頁鏈接| 搜索HTML結(jié)構(gòu)更加清晰、規(guī)范,學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。
- 教程說明:
XHTML教程-HTML結(jié)構(gòu)更加清晰、規(guī)范,學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。。