[譯]HTML進階之Content categories

md解析有些失敗，能夠移步簡書http://www.jianshu.com/p/9ec8...。
原文連接：https://developer.mozilla.org...

1. 主要內容目錄

   - **元數據**
   - **流**
   - **章節**
   - **標題**
   - **短語**
   - **內嵌**
   - **交互**
   - 可觸
   - **表單**

2. 次要內容目錄

   - **腳本支持元素**

3. 透明內容模型
4. 其餘內容模型

每一個HTML標籤都是必定數量的內容目錄中的一員，內容目錄是一個具備相同特性的標籤組。標籤組的劃分是不嚴格的，由於實際上組內的標籤之間是沒有任何聯繫的，可是對於定義和描述他們必須遵照的行爲和規則來講是十分有幫助的，尤爲是當你深刻到他們的錯綜複雜的細節中時。有些元素，不屬於任何這些內容目錄。

有三種內容目錄：

• 主要內容目錄，描述了許多標籤遵循的普通內容規則。
• 表單內容目錄，描述了表單相關標籤的內容規則。
• 特殊內容目錄，描述了一些稀有標籤的內容規則，有時只在特定的上下文中生效。

主要內容目錄

元數據內容

元數據類型標籤會修改當前演示文檔或是剩餘文檔的行爲，例如創建到其餘文檔的連接，或者是實現與其餘文檔的通訊。

屬於這個目錄的標籤包括：<base>, <command>, <link>, <meta>, <noscript>, <script>, <style> and <title>

流式內容

流式內容標籤典型特徵是包含文本或者是內嵌內容。屬於此類的標籤包括：<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> 和文本節點.
有一些標籤也屬於此類，但前提是須要知足一些條件

• <area>，是<map>標籤的子標籤時。
• <link>, itemprop屬性有初始值時。
• <meta>, itemprop屬性有初始值時。
• <style>, scoped屬性有初始值時。

章節內容

屬於章節內容模型的標籤可以在清晰地在大綱中劃分一部分區域出來，例如<header><footer>和標題內容標籤。
屬於章節內容的標籤有<article>, <aside>, <nav> 和<section>.

標題內容

標題內容定義了章節的標題，由一個顯式的章節內容標籤標記或者隱式的由標題內容標籤本身定義。
屬於標題內容的標籤有<h1>,<h2>,<h3>,<h4>,<h5>,<h6>以及<hgroup>。

短語內容

短語內容定義了他包含的文本和包含的標籤,多個短語內容組成段落。
短語內容標籤包括：<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> 和非空純文本。

有一些須要知足特定條件才屬於此目錄的標籤：

• , 僅包含內容短語時
• <area>, 是<map>標籤的子孫元素時
• , 僅包含內容短語時
• <ins>, 僅包含內容短語時
• <link>, itemprop屬性有初始值時
• <map>, 僅包含內容短語時
• <meta>, itemprop屬性有初始值時

內嵌內容

內嵌內容標籤導入其餘內容，或者插入內容到其餘標籤語言和文檔命名空間中。屬於這個目錄的標籤有：`<audio>,<canvas>,<embed>,<iframe>,<img>,<math>,<object>,<svg>,<video>.

交互內容

交互內容標籤包含專門爲了用戶交互而設計的標籤。屬於這個目錄的標籤有：<a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>.
有一些須要知足特定條件才屬於此目錄的標籤：

• <audio>, controls屬性有初始值時
• <img>, usemap屬性有初始值時
• <input>, type類型不在隱藏狀態中時
• <menu>,type類型不在工具欄狀態中時
• <object>, usemap屬性有初始值時
• <video>, controls屬性有初始值時

可觸內容

內容既不空也不隱藏;它是呈現的內容，是實質性的。其模型是流程內容或措辭內容的元素應該至少有一個可觸摸的節點。

表單相關內容

表單相關內容包含具備表單全部者的標籤，由form屬性暴露出去。一個表單父節點能夠是<form>元素，也能夠是其id在表單屬性中被指定了的元素。

<button>
<fieldset>
<input>
<keygen>
<label>
<meter>
<object>
<output>
<progress>
<select>
<textarea>

這個目錄因爲較爲複雜，所以還有幾個子目錄：

可枚舉的

在 form.elements 和 fieldset.elements IDL 集合中列舉出的元素. 包括 <button>，<fieldset>，<input>，<keygen>，<object>，<output>，<select> 和 <textarea>

可標記的

與<label>標記相關的標籤，包括<button>，<input>，<keygen>，<meter>，<output>，<progress>，<select> 和 <textarea>。

可提交的

可用來在表單提交時，組成表單數據的元素。包括<button>,<input>,<keygen>,<object>,<select>和<textarea>

可重置的

表單重置時會影響到的標籤。包括：<input>，<keygen>，<output>，<select> 和 <textarea>.

次要內容目錄

還有一些次要的內容目錄能夠簡單瞭解下。

腳本支持標籤

腳本支持標籤不直接影響文檔渲染後輸出的結果。相反，它們經過直接包含或指定腳本代碼來支持腳本，或者經過指定什麼數據被腳本使用。
腳本支持標籤包括：

• <script>
• <template>

透明內容模型

若是一個標籤屬於特殊內容模型， 即便將透明內容更換爲子元素，其內容必須由合法的HTML5元素組成。
例如，del標籤 和 <ins> 是透明的：
<p>We hold these truths to be <del><em>sacred & undeniable</em></del> <ins>self-evident</ins>.</p>
若是這兩個元素被移除，這個程序段依然是合法的。
<p>We hold these truths to be <em>sacred & undeniable</em> self-evident.</p>

其餘內容模型

sectioning root

sectioning root category 的做用是把它的內容與常規的大綱隔離。

譯文完畢。

附：
若是你有耐心讀到這裏，恭喜你，你將會了解到vue的單文件組件對於本文中一些不被人所熟知的標籤的應用。
來看個vue官方的hello world單文件組件：

單文件組件主要包含3個標籤，<template>,<script>,<style>。

咱們從上述標籤中找出這3個標籤屬於的分類。

• <template>：流式標籤，腳本支持標籤。（flow content , Script-supporting elements。）
• <script>：元數據標籤，流式標籤，短語標籤，腳本支持標籤。（Metadata content , Flow content , Phrasing content , Script-supporting elements）
• <style>：元數據標籤，流式標籤（由於此時scoped有定義，也就是style標籤中的樣式只做用於當前當文件組件的做用域）。（Metadata content , Flow content(the scoped attribute is present)）

再來簡單分析下。

template，符合流式標籤和腳本支持的特色。主要包含包含內嵌內容和文本：例如雙向數據綁定模板；並且也包含腳本代碼且指定數據被腳本使用：例如事件處理函數的調用。

script，主要符合元數據和腳本支持的特色。元數據的緣由是這裏能夠導入依賴，也能實現組件間通訊，或者是vuex通訊；會有腳本支持的狀況，例如事件處理函數的調用。

style，主要是流式標籤，沒有元數據的成分。由於這裏加的scoped主要是爲了內嵌樣式內容。

翻譯此文以前，我還覺得template標籤和style的scoped是尤雨溪本身創造出來的，翻譯完才發現，原來是W3C組織定義的，被本身的天真和無知所戰勝，看來要好好審視下"精通html,css和javascript"這句話了。

努力成爲優秀的前端開發工程師！