小編給大家分享一下HTML標(biāo)簽語(yǔ)義化的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

龍灣ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書(shū)合作）期待與您的合作！

結(jié)構(gòu)化

一個(gè)頁(yè)面比作房子，那HTML就是鋼筋混凝土的墻，房蓋房梁一樣的架子；而CSS就是裝飾材料，地板油漆一類的東西。好的頁(yè)面結(jié)構(gòu)就是在沒(méi)有CSS裝飾的情況下，頁(yè)面結(jié)構(gòu)依然清晰明了，房屋依然可現(xiàn)。而人們常說(shuō)的DIV+CSS，只是通俗的說(shuō)法，并不是通篇的DIV，記?。篋IV不是神！

語(yǔ)義化

HTML是一種對(duì)文本內(nèi)容和意義（即語(yǔ)義）的補(bǔ)充說(shuō)法。它會(huì)告訴我們說(shuō)：“這行是一個(gè)標(biāo)題，這幾行組成一個(gè)段落，這是一個(gè)項(xiàng)目列表，那是一個(gè)鏈接?！倍皇莵?lái)告訴我們：“這些字是藍(lán)色的，那些又是紅色的，這部分內(nèi)容靠右，這幾個(gè)是斜體?！边@些是CSS的工作?？傊篐TML告訴我們一塊內(nèi)容是什么（或其意義），而不是它長(zhǎng)什么樣子。

代碼如下:

<!--未語(yǔ)義化-->
<div id="header">
<div class="H3">前磚攻城師</div>
<div class="h3">搭積木也要玩藝術(shù)</div>
</div>
<!--語(yǔ)義化之后-->
<div id="header">
<H3>前磚攻城師</H3>
<h3>搭積木也要玩藝術(shù)</h3>
</div>

語(yǔ)義化的好處？

1. 去掉樣式能讓頁(yè)面結(jié)構(gòu)呈現(xiàn)清晰

2. 屏幕閱讀器會(huì)按標(biāo)記“讀”你的網(wǎng)頁(yè)

3. 有益于SEO

4. 便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)

附:HTML5新增元素

標(biāo)簽	含義	與html4對(duì)照
<article>	標(biāo)簽定義外部的內(nèi)容。比如來(lái)自一個(gè)外部的新聞提供者的一篇新的文章，或者來(lái)自 blog 的文本，或者是來(lái)自論壇的文本。亦或是來(lái)自其他外部源內(nèi)容	HTML5:<article></article> HTML4:<div></div>
<section>	標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。	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 的頁(yè)眉。	HTML5: <header></header> HTML4:<div></div>
<footer>	標(biāo)簽定義 section 或 document 的頁(yè)腳。典型地，它會(huì)包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及/或者聯(lián)系信息。	HTML5: <footer></footer> HTML4:<div></div>
<hgroup>	標(biāo)簽用于對(duì)網(wǎng)頁(yè)或區(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)簽定義圖形，比如圖表和其他圖像。這個(gè) HTML 元素是為了客戶端矢量圖形而設(shè)計(jì)的。它自己沒(méi)有行為，但卻把一個(gè)繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫(huà)布上。	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)簽定義聲音，比如音樂(lè)或其他音頻流。	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)行查看，或通過(guò)點(diǎn)擊進(jìn)行隱藏。與 <legend> 一起使用，來(lái)制作 detail 的標(biāo)題。該標(biāo)題對(duì)用戶是可見(jiàn)的，當(dāng)在其上點(diǎn)擊時(shí)可打開(kāi)或關(guān)閉 detail。	HTML5: <details></details> HTML4:<dl style="display:hidden"></dl>
<summary>	標(biāo)簽包含 details 元素的標(biāo)題，”details” 元素用于描述有關(guān)文檔或文檔片段的詳細(xì)信息?！眘ummary” 元素應(yīng)該是 “details” 元素的第一個(gè)子元素。	HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details> HTML4: none
<figure>	標(biāo)簽用于對(duì)元素進(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)題?！眆igcaption” 元素應(yīng)該被置于 “figure” 元素的第一個(gè)或最后一個(gè)子元素的位置。	HTML5:<figure><figcaption>PRC</figcaption></figure> HTML4:none
<mark>	主要用來(lái)在視覺(jué)上向用戶呈現(xiàn)那些需要突出的文字。<mark>標(biāo)簽的一個(gè)比較典型的應(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)簽來(lái)顯示 JavaScript 中耗費(fèi)時(shí)間的函數(shù)的進(jìn)程。	HTML5: <progress></progress> HTML4: none
<time>	標(biāo)簽定義日期或時(shí)間，或者兩者。	HTML5: <time></time> HTML4: <span></span>
<keygen>	標(biāo)簽用于對(duì)網(wǎng)頁(yè)或區(qū)段（section）的標(biāo)題進(jìn)行組合	HTML5: <keygen> HTML4: none
<command>	標(biāo)簽定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕。	HTML5:<command onclick=cut()" label="cut"> HTML4:none

以上是“HTML標(biāo)簽語(yǔ)義化的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：HTML標(biāo)簽語(yǔ)義化的示例分析-創(chuàng)新互聯(lián)
URL鏈接：http://aaarwkj.com/article6/dohoog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、服務(wù)器托管、標(biāo)簽優(yōu)化、靜態(tài)網(wǎng)站、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)