語義類標(biāo)簽是什么，使用它有什么好處？

語義類標(biāo)簽也是大家工作中經(jīng)常會用到的一類標(biāo)簽，它們的特點(diǎn)是視覺表現(xiàn)上互相都差不多，主要的區(qū)別在于它們表示了不同的語義，比如大家會經(jīng)常見到的section、nav、p，這些都是語義類的標(biāo)簽。
語義是我們說話表達(dá)的意思，多數(shù)的語義實際上都是由文字來承載的。語義類標(biāo)簽則是純文字的補(bǔ)充，比如標(biāo)題、自然段、章節(jié)、列表，這些內(nèi)容都是純文字無法表達(dá)的，我們需要依靠語義標(biāo)簽代為表達(dá)。

很多工作場景里，語義類標(biāo)簽有它們自己無可替代的優(yōu)點(diǎn)。正確地使用語義標(biāo)簽可以帶來很多好處。

• 語義類標(biāo)簽對開發(fā)者更為友好，使用語義類標(biāo)簽增強(qiáng)了可讀性，即便是在沒有CSS的時候，開發(fā)者也能夠清晰地看出網(wǎng)頁的結(jié)構(gòu)，也更為便于團(tuán)隊的開發(fā)和維護(hù)。
• 除了對人類友好之外，語義類標(biāo)簽也十分適宜機(jī)器閱讀。它的文字表現(xiàn)力豐富，更適合搜索引擎檢索（SEO），也可以讓搜索引擎爬蟲更好地獲取到更多有效信息，有效提升網(wǎng)頁的搜索量，并且語義類還可以支持讀屏軟件，根據(jù)文章可以自動生成目錄等等。

語義化標(biāo)簽學(xué)習(xí)的總結(jié)：

1）ul,ol的區(qū)別：

ul是無序列表，ol是有序列表，ul可以用來做菜單欄包裹，ol可以用作有順序的列表，如：1.內(nèi)容一

2.內(nèi)容二

3.內(nèi)容三

2）語義化標(biāo)簽的作用

1.自然語言表達(dá)能力補(bǔ)充，如：<em>用來表達(dá)詞語的肯定，<strong>用來加粗字體

2.文章標(biāo)題摘要，如：合理運(yùn)用h1,h2標(biāo)簽來表述標(biāo)題的上下關(guān)系

3.適合機(jī)器閱讀的整體結(jié)構(gòu)，如：<time datetime="2015-07-09">9 July 2015</time>這句就更容易讓機(jī)器閱讀。

3）常見的以及一些有用的標(biāo)簽

• <section>：從HTML 5開始，我們有了section標(biāo)簽，這個標(biāo)簽可不僅僅是一個“有語義的div”，它會改變h1-h6的語義。section的嵌套會使得其中的h1-h6下降一級，因此，在HTML5以后，我們只需要section和h1就足以形成文檔的樹形結(jié)構(gòu)：

<section>
<h1>HTML語義</h1>
<p>balah balah balah balah</p>
<section>
<h1>弱語義</h1>
<p>balah balah</p>
</section>
<section>
<h1>結(jié)構(gòu)性元素</h1>
<p>balah balah</p>
</section>
......
</section>

• <code>：code可以包裹html語句而不會被瀏覽器再去解析。
• <pre>，<samp>：這是一段HTTP協(xié)議的內(nèi)容描述，因為這段內(nèi)容的換行是非常嚴(yán)格的，所以我們不需要瀏覽器幫我們做自動換行，因此我們使用了pre標(biāo)簽，表示這部分內(nèi)容是預(yù)先排版過的，不需要瀏覽器進(jìn)行排版。

又因為這是一段計算機(jī)程序的示例輸出，所以我們可以使用samp標(biāo)簽：

<pre><samp>
GET /home.html HTTP/1.1
Host: www.example.org
</samp></pre>

• <aside>：一般用作側(cè)邊欄的包裹標(biāo)簽
• <hgroup>：h標(biāo)簽的標(biāo)簽組，

<hgroup> <h1>World Wide Web </h1> <h2>From Wikipedia, the free encyclopedia</h2> </hgroup>。

• <nav>:一般用作導(dǎo)航欄。

個人學(xué)習(xí)筆記，如有錯誤歡迎指正~

總結(jié)

以上是生活随笔為你收集整理的html 树形结构_HTML学习之语义化标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。