詳細瞭解HTML標籤內容模型

小火柴的藍色理想發表於2015-12-31

前面的話

   HTML核心的部分莫過於標籤(tag)了。標籤是用來描述文件中的各自內容基本單元,不同標籤表示著不同的含義,標籤之間的巢狀表示了內容之間的結構。

  HTML標籤在HTML5中內容模型擴充到了7類,包括後設資料型、區塊型、標題型、文件流型、語句型、內嵌型、互動型。即使是這7個類別也沒有完全覆蓋所有元素的所有情況,元素可以不屬於任何一個類別,被稱為穿透的;很多元素可能屬於不止一個類別,稱為混合的

   HTML標籤詳細資訊見此w3c連結

分類

後設資料型(metadata)

  設定展示、行為、關聯文件或其他內容的後設資料的元素

  <head>元素包含文件的元素資料,包括<base>、<command>、<link>、<meta>、<noscript>、<script>、<style>和<title>共8個

  詳細資訊移步到此

 

區塊型(sectioning)

  定義區塊內容範圍的元素,包括<article>、<aside>、<nav>、<section>四個元素

  詳細資訊移步到此

 

標題型(heading)

  定義區塊內容標題的元素,包括<h1>到<h6>以及<hgroup>

  詳細資訊移步到此

 

文件流型(flow)

  大部分文件<body>內的元素,只有部分後設資料式元素不屬於流式,它們是<base>和<title>

  詳細資訊移步至此

 

語句型(phrasing)

  文件裡的文字、在段落中標記文字的元素等

     詳細資訊移步至此

 

內嵌型(embedded)

  由於HTML本身提供的元素的表達能力有限,允許嵌入內容成為瀏覽器開發者不得不做的事情,在文件引入另一個資源的元素或者插入文件的另一種語言。嵌入式內容包括<audio>、<canvas>、<embed>、<iframe>、<img>、<math>、<object>、<svg>和<video>九類

  [注意]該類元素中,<embed>、<iframe>、<object>這三個元素不設定寬高時,預設寬高為300px*150px

  <img>  (<img> -> image 影象)

  關於影象標籤的詳細資訊移步至此

  <iframe>

  關於框架標籤的詳細資訊移步至此

  <canvas>

  關於<canvas>的詳細資訊移步至此

  音訊和視訊

  關於音訊和視訊類標籤的詳細資訊移步至此

 

互動型(interactive)

  專門用於使用者互動的元素,包括<a>、<audio>、<button>、<details>、<embed>、<iframe>、<img>、<input>、<keygen>、<label>、<menu>、<object>、<select>、<textarea>、<video>

  其中,<details>、<summary>、<command>、<menu>這四個互動元素瀏覽器的支援性還不太好

  關於<details>和<summary>的詳細資訊移步至此

相關文章