還在用div的span打天下嗎：你應該瞭解的HTML標籤

提及HTML，不少人以爲它很是簡單，確實，從本質上來講，它都算不上一種語言，只是一種描述型的標籤。因此，在寫業務的時候，大多數人都是全屏的div和span，徹底知足要求，完美實現效果。但HTML仍然提供了不少其它標籤，那些都沒有用嗎？

嗯...

固然不是。

• 合理使用語義話的標籤能夠加強代碼的可讀性，在沒有進行class命名標識的狀況下也能夠清晰的看懂頁面結構。
• 同時也十分利於機器識別。更加適合搜索引擎檢索。對於有seo需求的站點來講，合適使用html標籤尤其重要。

但，不少同窗在項目中仍然不多使用，主要是由於HTML的標籤實在太多了，不少標籤語義近似，容易用錯，反而形成負面的影響。

以前winter的《重學前端》專欄裏也單獨寫了一節來聊div、span以及其它標籤。他認爲：」用對「比」不用「好，」不用「比」用錯「好，但有理想的前端工程師仍是應該去追求」用對「它們。

因此，做爲有理想的前端程序員，今天咱們來介紹一些你也許還不知道，但真的應該在項目中用並且用對的HTML標籤。

audio

audio用於在文檔中表示用品內容，好比音樂。<audio>能夠包含多個音頻資源，使用src或者source屬性進行描述，瀏覽器會選擇最合適的來用。當前它只支持三種音頻格式：MP3, WAV, and OGG。

<audio controls>
  <!-- Won't play because the mp3 doesn't exist -->
  <source src="cat.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
複製代碼

Video

Video用來處理電影或者視頻流。這個多是你們最熟悉的標籤之一了。它如今支持的視頻格式包括： MP4, WebM, and Ogg。

<video>
  <source src="./cat.mp4" type="video/mp4">
  <source src="./dog.ogg" type="video/ogg">
  你的瀏覽器不支持video屬性
</video>
複製代碼

Blockquote

Blockquote表示這段內容是從哪別的地方引用過來的。一般渲染是這部份內容會有必定的縮緊。能夠是用cite屬性標註引用來源的url。

<blockquote cite="www.frontnotebook.com">
  不少人以爲它很是簡單，確實，從本質上來講，它都算不上一中語言，只是一種描述型的標籤。因此，在寫業務的時候，大多數人都是全屏的div和span，徹底知足要求，實現效果完美。但html仍然提供了不少其它標籤，那些都有什麼用呢？
</blockquote>
複製代碼

Output

Output標籤表示一個計算或者用戶操做結果。

• for：其它影響計算結果的id，能夠有多個，用空格分開
• form：與當前標籤有關聯的form（從屬的biaodan）。該id必須時當前文檔內的表單元素。如爲指明，那麼output標籤必須包含在一個form表單以內。
• name：name屬性

<form oninput="total.value = parseInt(a.value) + parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="total" for="a b"></output>
</form>
複製代碼

Picture

Picture經過包含0個或者多個<source>元素和一個<img>標籤來爲顯示場景提供不一樣像素的圖像。瀏覽器會選擇最匹配的元素，若是沒有匹配上的就會選擇標籤的src屬性指定的url。

useragent會檢查每一個的srcset、media和type屬性來匹配符合當前佈局、設備顯示特徵的圖片。

它包括幾個屬性：

• srcset這是必填的屬性，是指引用圖片的url
• media容許你提供一個用於媒體查詢的條件
• sizes定義圖片的寬度值，或者一些媒體查詢的值
• type定義MIME類型

<picture>
  <source media="(min-width: 700px)" src="./big.png">
  <source media="(min-width: 400px)" src="./small.png">
  <img src="./alter.png" alt="前端記事本" tyle="width: auto">
</picture>
複製代碼

Progress

Progress進度條的形式，表示任務的進度。

progress並非meter的替代品，所以，表示磁盤空間使用狀況或者查詢結果相關性的組件應該使用meter屬性。

<progress value="43" max="100"></progress>
複製代碼

Meter

meter標籤表示在一個定義好的範圍內的度量值。你也能夠理解爲「度量尺」。

能夠用來表示內存空間的使用狀況，或者搜索結果的關聯性。

但它不該該用來表示某項任務的進度，這種狀況下應該使用progress。

<meter value="4" min="0" max="10"></meter>
<meter value="0.3"></meter>
複製代碼

Template

Template用來包含一些在頁面加載時不會呈現的內容，但隨後能夠在運行時使用javascript進行實例化。

能夠用來存儲一段後續要用到的內容片斷，減小了在JavaScript實例化節點時建立模版內容的過程。

<template>
  <h2>前端記事本</h2>
  <p>前端記事本前端記事本前端記事本前端記事本前端記事本前端記事本前端記事本</p>
</template>
複製代碼

在javascript中可使用這部分模版來實例化節點

function createNewNode() {
  const node = document.querySelector('template');
  const template = node.content.cloneNode(true);
  document.body.appendChild(template);
}
複製代碼

Time

time用來標籤訂義日期或者時間。這個元素的目的是以機器可讀的格式表示時間和力氣。因此，當用戶在日曆中定義提醒時間或者日程表時，就能夠用它來編碼機器能夠識別的時間格式。另外，使用這種標籤還可使搜索引擎有更加智能的搜索結果。

<p>前端記事本更新時間<time>7:00</time></p>
<p>
  我但願公衆號的文章在天天早上
  <time dateTiem="6:30">6:30</time>
  自動發佈
</p>
複製代碼

wbr

wbr表示文本中的一個位置瀏覽器能夠選擇在這個位置折行。和<br>不一樣，<br>表示必須折行。而wbr的意思是在寬度足夠的狀況下不換行，當寬度不足的時候，在wbr處主動換行。 因此，若是你有一段很長的文本，其中有一個英文單詞，你不但願在文本自適應寬度時，單詞由於折行被分割成兩個部分，那麼可使用wbr標籤保證這個單詞不會被折行。

注意：這個這種特性在UTF-8編碼的頁面中，也就是中文文本不會有效果。

<p>在文本中使用這個屬性，能夠在頁面寬度變小時，在這個英文單詞<wbr>front<wbr>處折行，保證單詞不會被分割<p>
複製代碼

在寬度足夠的時候，文本是徹底展開的。

當寬度變小，能夠看到圖中還有空間，但front已經到了第二行，保證了front不會被分割。

details

details能夠建立一個掛件，僅在被切換成展開狀態時纔會顯示內容信息。能夠在其中嵌入<summary>標籤，爲該部件提供概要。

<details>
  <summary>概要</summary>
  details能夠建立一個掛件，僅在被切換成展開狀態時纔會顯示內容信息。能夠在其中嵌入`<summary>`標籤，爲該部件提供概要。
</details>
複製代碼

ok，今天就介紹這些，但願你們能夠在看到這些標籤的強大之處，並在項目中嘗試使用。