HTML標籤語義化

標籤語義化：

語義和默認樣式的區別：

• 默認樣式是瀏覽器設定的一些經常使用tag的表現形式；
• 語義化的主要目的就是讓你們直觀的認識標籤和屬性的用途和做用；

標籤語義化做用：

• 當只有HTML頁面時，沒有CSS，咱們仍然能夠很清晰的看懂頁面的DOM結構
• 團隊維護，當團隊來review代碼或者重構時，加強代碼的可讀性，更利於維護
• 有利於SEO，搜索引擎爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重
• 提升用戶體驗，好比 title 和 alt 等用來解釋內容信息

經常使用語義化的標籤：

• <header>頭部標籤，用來寫網頁最上方的公共頭部，也就是頁眉。

<header>
    <h1>一級標題</h1>
    <h2>二級標題</h2>
</header>

• <nav>標籤，用來寫導航，通常寫在<header>標籤裏面，內部用<ul>無序列表。

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

• <code>：code能夠包裹html語句而不會被瀏覽器再去解析。

• <pre>，<samp>：這是一段HTTP協議的內容描述，由於這段內容的換行是很是嚴格的，因此咱們不須要瀏覽器幫咱們作自動換行，所以咱們使用了pre標籤，表示這部份內容是預先排版過的，不須要瀏覽器進行排版。

• <article>標籤，當咱們要寫網頁文章的主要內容時，要用到這個標籤。

<article>
    <h2>標題</h2>
    <p>內容</p>
</article>

• <address>標籤，定義文檔做者或擁有者的聯繫信息。

若是 <address> 元素位於<article>元素內部，則它表示該文章做者或擁有者的聯繫信息。

一般的作法是將 address 元素添加到網頁的頭部或底部。

• <p>段落標籤

知道了<p>做爲段落，你就不會再使用<br/>來換行了，並且不須要<br/>來區分段落與段落。 <p></p>中的文字會自動換行，並且換行的效果優於<br/>。

<p>段落內容</p>

• <span>標籤

<span>標籤的語義爲被用來組合文檔中的行內元素

• <b>、<em>、<strong>

<b>標籤語義爲「加粗」

<em>標籤語義爲「強調」

<strong>標籤語義爲「更強烈的強調」 並且em 默認用斜體表示，strong 用粗體表示。