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

我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、同安ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的同安網(wǎng)站制作公司

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

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

語義化

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

代碼如下:

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

語義化的好處？

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

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

3. 有益于SEO

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

附:HTML5新增元素

標(biāo)簽	含義	與html4對(duì)照
<article>	標(biāo)簽定義外部的內(nèi)容。比如來自一個(gè)外部的新聞提供者的一篇新的文章，或者來自 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 的頁腳。典型地，它會(huì)包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及/或者聯(lián)系信息。	HTML5: <footer></footer> HTML4: <div></div>
<hgroup>	標(biāo)簽用于對(duì)網(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)簽定義圖形，比如圖表和其他圖像。這個(gè) HTML 元素是為了客戶端矢量圖形而設(shè)計(jì)的。它自己沒有行為，但卻把一個(gè)繪圖 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)題對(duì)用戶是可見的，當(dāng)在其上點(diǎn)擊時(shí)可打開或關(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” 元素的第一個(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)題。”figcaption” 元素應(yīng)該被置于 “figure” 元素的第一個(gè)或最后一個(gè)子元素的位置。	HTML5: <figure><figcaption>PRC</figcaption></figure> HTML4: none
<mark>	主要用來在視覺上向用戶呈現(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)簽來顯示 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)頁或區(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)簽語義化的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：HTML標(biāo)簽語義化的示例分析
本文網(wǎng)址：http://chinadenli.net/article40/iphjho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)建站、網(wǎng)站收錄、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)