持續輸出內容，等你來撩~css
什麼是語義元素？
語義是指對一個詞或者句子含義的正確解釋。不少html標籤也具備語義的意義，也就是說元素自己傳達了關於標籤所包含內容類型的一些信息。例如，當瀏覽器解析到<h1></h1>標籤時，它將該標籤解釋爲包含這一塊內容的最重要的標題。h1標籤的語義就是用它來標識特定網頁或部分最重要的標題。html
爲何要語義化？
- **代碼結構:**使頁面沒有css的狀況下，也可以呈現出很好的內容結構
- 有利於SEO: 爬蟲依賴標籤來肯定關鍵字的權重，所以能夠和搜索引擎創建良好的溝通，幫助爬蟲抓取更多的有效信息
- **提高用戶體驗：**例如title、alt能夠用於解釋名稱或者解釋圖片信息，以及label標籤的靈活運用。
- 便於團隊開發和維護: 語義化使得代碼更具備可讀性，讓其餘開發人員更加理解你的html結構，減小差別化。
- 方便其餘設備解析: 如屏幕閱讀器、盲人閱讀器、移動設備等，以有意義的方式來渲染網頁。
HTML5經常使用的語義元素
HTML5提供了新的語義元素來定義網頁的不一樣部分，它們被稱爲「切片元素」，如圖所示web
大約有100多個HTML語義元素可供選擇，如下是經常使用的語義元素瀏覽器
| 結構體 | 文本 | 一致 |
|---|---|---|
| header 、h一、h二、h三、nav、footer、article、section | p、ul、ol、li、blockquote | a、strong、em、q、abbr、small |
<h1>~<h6>元素ide
定義頁面的標題，h1元素具備最高等級，h6元素具備最低的等級post
<h1>top level heading</h1> <section> <h2>2nd level heading</h2> <h3>3nd level heading</h3> <h4>4th level heading</h4> <h5>5th level heading</h5> <h6>6th level heading</h6> </section>
<header>元素字體
用於定義頁面的介紹展現區域，一般包括網站logo、主導航、全站連接以及搜索框。也適合對頁面內部一組介紹性或導航性內容進行標記。網站
<header> <h1>HTML Reference</h1> <nav> <a>Home</a> <a>About</a> <a>Contact</a> </nav></header>
<nav>元素搜索引擎
定義頁面的導航連接部分區域，不是全部的連接都須要包含在<nav>中，除了頁腳再次顯示頂級全局導航、或者包含招聘信息等重要連接。code
<nav> <a>Home</a> <a>About</a> <a>Contact</a> </nav>
<main>元素
定義頁面的主要內容，一個頁面只能使用一次。若是是web應用，則包圍其主要功能。
<main> <h1>My blog test</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p> <p>etc.</p> </main>
<article>元素
定義頁面獨立的內容，它能夠有本身的header、footer、sections等，專一於單個主題的博客文章，報紙文章或網頁文章。article能夠嵌套article，只要裏面的article與外面的是部分與總體的關係。
<article> <header> <h3> <a href="">My blog post</a> </h3> </header> <section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis. </p> </section> <footer> <small> Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="">Code</a> </small> </footer> </article>
<section>元素
元素用於標記文檔的各個部分，例如長表單文章的章節或主要部分。
<section> <h2>Section title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis. </p> </section>
<aside>元素
定義與主要內容相關的內容塊。一般顯示爲側邊欄。
<aside> <h3>About the author</h3> <p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London. </p> </aside>
<footer>元素
定義文檔的底部區域，一般包含文檔的做者，著做權信息，連接的使用條款，聯繫信息等
<footer> COPYRIGHT@dingFY_Demi</footer>
<small>元素
爲較不重要的內容定義小字體。若是被包圍的字體已是字體模型所支持的最小字號，那麼 <small> 標籤將不起任何做用。
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis. </p> <small>Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="/category/code">Code</a> </small>
<strong>元素
把文本定義爲語氣更強的強調的內容，以表示內容的重要性。
HTML should only be used to write <strong>content</strong>, and keep CSS for <strong>styling</strong> the web page.
<em>元素
標記內容着重點（大量用於提高段落文本語義），一般呈現爲斜體文字。
HTML should only be used to write <em>content</em>, and keep CSS for <em>styling</em> the web page.
<blockquote>元素
定義塊引用，瀏覽器會在 blockquote 元素先後添加換行，並增長外邊距。cite屬性可用來規定引用的來源
<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie"> Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.</blockquote>
<abbr>元素
解釋縮寫詞。使用title屬性可提供全稱，只在第一次出現時使用就ok。
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
關於標籤語義化的內容就到這啦~