原文鏈接：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories
-
主要內容目錄
- 元數據
- 流
- 章節(jié)
- 標題
- 短語
- 內嵌
- 交互
- 可觸
- 表單
-
次要內容目錄
- 腳本支持元素
- 透明內容模型
- 其他內容模型
每個HTML標簽都是一定數量的內容目錄中的一員箭阶，內容目錄是一個具有相同特性的標簽組鹦肿。標簽組的劃分是不嚴格的瞎暑，因為實際上組內的標簽之間是沒有任何聯(lián)系的弱左，但是對于定義和描述他們必須遵守的行為和規(guī)則來說是十分有幫助的弯洗，尤其是當你深入到他們的錯綜復雜的細節(jié)中時谤辜。有些元素岳掐，不屬于任何這些內容目錄伪嫁。
有三種內容目錄：
- 主要內容目錄，描述了許多標簽遵循的普通內容規(guī)則西壮。
- 表單內容目錄遗增，描述了表單相關標簽的內容規(guī)則。
- 特殊內容目錄茸时，描述了一些稀有標簽的內容規(guī)則贡定，有時只在特定的上下文中生效。
主要內容目錄
元數據內容
元數據類型標簽會修改當前演示文檔或是剩余文檔的行為可都，例如建立到其他文檔的鏈接，或者是實現與其他文檔的通信蚓耽。
屬于這個目錄的標簽包括：<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> 和文本節(jié)點.
有一些標簽也屬于此類，但前提是需要滿足一些條件
- <area>步悠，是<map>標簽的子標簽時签杈。
- <link>, itemprop屬性有初始值時。
- <meta>, itemprop屬性有初始值時鼎兽。
- <style>, scoped屬性有初始值時答姥。
章節(jié)內容
屬于章節(jié)內容模型的標簽能夠在清晰地在大綱中劃分一部分區(qū)域出來，例如<header><footer>和標題內容標簽谚咬。
屬于章節(jié)內容的標簽有<article>, <aside>, <nav> 和<section>.
標題內容
標題內容定義了章節(jié)的標題鹦付，由一個顯式的章節(jié)內容標簽標記或者隱式的由標題內容標簽自己定義。
屬于標題內容的標簽有<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>和非空純文本郎嫁。
有一些需要滿足特定條件才屬于此目錄的標簽：
- <a>, 僅包含內容短語時
- <area>, 是<map>標簽的子孫元素時
- <del>, 僅包含內容短語時
- <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類型不在隱藏狀態(tài)中時
- <menu>,type類型不在工具欄狀態(tài)中時
- <object>, usemap屬性有初始值時
- <video>, controls屬性有初始值時
可觸內容
內容既不空也不隱藏;它是呈現的內容，是實質性的辑鲤。其模型是流程內容或措辭內容的元素應該至少有一個可觸摸的節(jié)點盔腔。
表單相關內容
表單相關內容包含具有表單所有者的標簽，由form屬性暴露出去月褥。一個表單父節(jié)點可以是<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 的作用是把它的內容與常規(guī)的大綱隔離贱田。
譯文完畢。
附：
如果你有耐心讀到這里嘴脾，恭喜你男摧，你將會了解到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是尤雨溪自己創(chuàng)造出來的炸茧，翻譯完才發(fā)現瑞妇，原來是W3C組織定義的，被自己的天真和無知所打敗梭冠，看來要好好審視下"精通html,css和javascript"這句話了辕狰。
努力成為優(yōu)秀的前端開發(fā)工程師！
期待和大家交流控漠，共同進步蔓倍，歡迎大家加入我創(chuàng)建的與前端開發(fā)密切相關的技術討論小組：
- SegmentFault技術圈:ES新規(guī)范語法糖
- SegmentFault專欄：趁你還年輕，做個優(yōu)秀的前端工程師
- 知乎專欄：趁你還年輕盐捷，做個優(yōu)秀的前端工程師
- Github博客: 趁你還年輕233的個人博客
- 前端開發(fā)QQ群：660634678
微信公眾號： 人獸鬼 / excellent_developers
努力成為優(yōu)秀前端工程師偶翅！
