今天小編給大家分享一下HTML5語義化的標(biāo)簽怎么用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)公司專注于恩陽企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),成都做商城網(wǎng)站。恩陽網(wǎng)站建設(shè)公司,為恩陽等地區(qū)提供建站服務(wù)。全流程專業(yè)公司，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

什么是語義化

在我們寫HTML時(shí)其實(shí)無所謂，因?yàn)槟憷锩骈L啥樣，用戶看不到，也不用看到。

因?yàn)槟阌蠧SS的漂亮衣服，即使你的HTML一塌糊涂，CSS也可以讓它光鮮亮麗。

但是用戶看不到，開發(fā)者看得到呀！因此，這個(gè)語義化的友好者是開發(fā)者本身。

所謂語義化，就是憑著HTML本身，也能體驗(yàn)出人性化的結(jié)構(gòu)！

語義化的好處

• 在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)。這樣開發(fā)者一眼就明了你的意圖，一秒破冰！

• 對(duì)SEO友好。對(duì)開發(fā)者友好，那么對(duì)開發(fā)者的小蟲子們也是當(dāng)然！

  當(dāng)標(biāo)簽應(yīng)用得當(dāng)，體現(xiàn)出上下文中你想要關(guān)鍵字的權(quán)重，那么搜索引擎爬蟲就到了你的頭上了。那么網(wǎng)站的訪問量不就來了嗎。

• 可以支持一些特殊的設(shè)備（盲人閱讀、移動(dòng)設(shè)備），網(wǎng)頁翻譯等。

• 最直觀的一點(diǎn)，便是你的隊(duì)友都希望和你合作！你的代碼的語義化，隊(duì)友都愛?。?/p>

  語義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。（跳槽快速融入？）

工作中語義化的思考

• 不要使用一些純樣式標(biāo)簽，這些CSS會(huì)幫我們做到。如：b、font、u等一些標(biāo)簽。

• 需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（，strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）。使用 mark標(biāo)簽來表示標(biāo)注的/突出顯示的文本。

  但是還是可以考慮使用CSS來完成。

• 每個(gè)input標(biāo)簽對(duì)應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對(duì)應(yīng)的input關(guān)聯(lián)起來。

• 表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途。

• 應(yīng)該使用<h2> - <h7>來表示標(biāo)題。

• 當(dāng)用CSS寫樣式的時(shí)候命名也需要遵循HTML的結(jié)構(gòu)，體現(xiàn)出語義化的本質(zhì)。

語義化的標(biāo)簽

1、<header> 標(biāo)簽定義文檔的頁眉

通常包含頁面的正副標(biāo)題。

<header>
<h2>他真的是美男子嗎?</h2>
<p>據(jù)現(xiàn)場勘查，他真的是美男子！</p>
</header>

2、<footer>標(biāo)簽定義文檔或節(jié)的頁腳

頁腳通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等。

可以在一個(gè)文檔中使用多<footer>元素。

<footer>
  <p>Posted by: 美男子</p></footer>

3、<main>標(biāo)簽規(guī)定文檔的主要內(nèi)容。

<main>元素中的內(nèi)容對(duì)于文檔來說應(yīng)當(dāng)是唯一的。

它不應(yīng)包含在文檔中重復(fù)出現(xiàn)的內(nèi)容，比如側(cè)欄、導(dǎo)航欄、版權(quán)信息、站點(diǎn)標(biāo)志或搜索表單。

在一個(gè)文檔中，不能出現(xiàn)多個(gè) <main> 元素。<main>元素不能是以下元素的后代：<article>、<aside>、<footer>、<header>或 <nav>。

<main>
  <h2>我的介紹</h2>
  <p>我是一個(gè)聰明的孩子</p></main>

4、<section> 標(biāo)簽定義文檔中的片段。

比如章節(jié)、頁眉、頁腳或文檔中的其他部分。

<section>
  <h2>PRC</h2>
  <p>The People's Republic of China was born in 1949...</p></section>

5、<article> 標(biāo)簽規(guī)定獨(dú)立的自包含內(nèi)容

比如文章下的評(píng)論之類的

<article>
   <h2>我為什么聰明呢</h2>
   <p>我聰明的秘訣是我愛思考</p></article>

6、<aside> 標(biāo)簽定義其所處內(nèi)容之外的內(nèi)容。

用來裝載非正文類的內(nèi)容。例如廣告，成組的鏈接，側(cè)邊欄等等。

<p>聰明的研究</p><aside>
  <h2>我為什么聰明呢</h2>
  <p>我聰明的秘訣是我愛思考</p></aside>

7、<nav> 元素代表頁面的導(dǎo)航鏈接區(qū)域。

用于定義頁面的主要導(dǎo)航部分。

<nav>
<ul>
<li><a href=”https://www.baidu.com”>百度</a></li>
<li><a href=”https://www.guizimo.com”>歸子莫</a></li>
</ul>
</nav>

一個(gè)語義化模板

先來看一張圖。

看起來，一個(gè)標(biāo)標(biāo)致致的HTML結(jié)構(gòu)就很清晰了。

以上就是“HTML5語義化的標(biāo)簽怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標(biāo)題：HTML5語義化的標(biāo)簽怎么用
URL地址：http://www.rwnh.cn/article20/gcgpco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站收錄、企業(yè)網(wǎng)站制作

廣告

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