[译]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"这句话了。

努力成为优秀的前端开发工程师！