[譯]HTML進(jìn)階之Content categories

原文鏈接：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories

  1. 主要內(nèi)容目錄
    • 元數(shù)據(jù)
    • 流
    • 章節(jié)
    • 標(biāo)題
    • 短語(yǔ)
    • 內(nèi)嵌
    • 交互
    • 可觸
    • 表單
  2. 次要內(nèi)容目錄
    • 腳本支持元素
  3. 透明內(nèi)容模型
  4. 其他內(nèi)容模型

每個(gè)HTML標(biāo)簽都是一定數(shù)量的內(nèi)容目錄中的一員，內(nèi)容目錄是一個(gè)具有相同特性的標(biāo)簽組。標(biāo)簽組的劃分是不嚴(yán)格的，因?yàn)閷?shí)際上組內(nèi)的標(biāo)簽之間是沒(méi)有任何聯(lián)系的，但是對(duì)于定義和描述他們必須遵守的行為和規(guī)則來(lái)說(shuō)是十分有幫助的，尤其是當(dāng)你深入到他們的錯(cuò)綜復(fù)雜的細(xì)節(jié)中時(shí)。有些元素，不屬于任何這些內(nèi)容目錄。

有三種內(nèi)容目錄：

  • 主要內(nèi)容目錄，描述了許多標(biāo)簽遵循的普通內(nèi)容規(guī)則。
  • 表單內(nèi)容目錄，描述了表單相關(guān)標(biāo)簽的內(nèi)容規(guī)則。
  • 特殊內(nèi)容目錄，描述了一些稀有標(biāo)簽的內(nèi)容規(guī)則，有時(shí)只在特定的上下文中生效。

主要內(nèi)容目錄

元數(shù)據(jù)內(nèi)容

元數(shù)據(jù)類(lèi)型標(biāo)簽會(huì)修改當(dāng)前演示文檔或是剩余文檔的行為，例如建立到其他文檔的鏈接，或者是實(shí)現(xiàn)與其他文檔的通信。

屬于這個(gè)目錄的標(biāo)簽包括：<base>, <command>, <link>, <meta>, <noscript>, <script>, <style> and <title>

流式內(nèi)容

流式內(nèi)容標(biāo)簽典型特征是包含文本或者是內(nèi)嵌內(nèi)容。屬于此類(lèi)的標(biāo)簽包括：<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é)點(diǎn).
有一些標(biāo)簽也屬于此類(lèi)，但前提是需要滿(mǎn)足一些條件

  • <area>，是<map>標(biāo)簽的子標(biāo)簽時(shí)。
  • <link>, itemprop屬性有初始值時(shí)。
  • <meta>, itemprop屬性有初始值時(shí)。
  • <style>, scoped屬性有初始值時(shí)。

章節(jié)內(nèi)容

屬于章節(jié)內(nèi)容模型的標(biāo)簽?zāi)軌蛟?strong>清晰地在大綱中劃分一部分區(qū)域出來(lái)，例如<header><footer>和標(biāo)題內(nèi)容標(biāo)簽。
屬于章節(jié)內(nèi)容的標(biāo)簽有<article>, <aside>, <nav> 和<section>.

標(biāo)題內(nèi)容

標(biāo)題內(nèi)容定義了章節(jié)的標(biāo)題，由一個(gè)顯式的章節(jié)內(nèi)容標(biāo)簽標(biāo)記或者隱式的由標(biāo)題內(nèi)容標(biāo)簽自己定義。
屬于標(biāo)題內(nèi)容的標(biāo)簽有<h1>,<h2>,<h3>,<h4>,<h5>,<h6>以及<hgroup>。

短語(yǔ)內(nèi)容

短語(yǔ)內(nèi)容定義了他包含的文本和包含的標(biāo)簽,多個(gè)短語(yǔ)內(nèi)容組成段落。
短語(yǔ)內(nèi)容標(biāo)簽包括：<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>和非空純文本。

有一些需要滿(mǎn)足特定條件才屬于此目錄的標(biāo)簽：

  • <a>, 僅包含內(nèi)容短語(yǔ)時(shí)
  • <area>, 是<map>標(biāo)簽的子孫元素時(shí)
  • <del>, 僅包含內(nèi)容短語(yǔ)時(shí)
  • <ins>, 僅包含內(nèi)容短語(yǔ)時(shí)
  • <link>, itemprop屬性有初始值時(shí)
  • <map>, 僅包含內(nèi)容短語(yǔ)時(shí)
  • <meta>, itemprop屬性有初始值時(shí)

內(nèi)嵌內(nèi)容

內(nèi)嵌內(nèi)容標(biāo)簽導(dǎo)入其他內(nèi)容，或者插入內(nèi)容到其他標(biāo)簽語(yǔ)言和文檔命名空間中。屬于這個(gè)目錄的標(biāo)簽有：```<audio>,<canvas>,<embed>,<iframe>,<img>,<math>,<object>,<svg>,<video>.

交互內(nèi)容

交互內(nèi)容標(biāo)簽包含專(zhuān)門(mén)為了用戶(hù)交互而設(shè)計(jì)的標(biāo)簽。屬于這個(gè)目錄的標(biāo)簽有：<a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>.
有一些需要滿(mǎn)足特定條件才屬于此目錄的標(biāo)簽：

  • <audio>, controls屬性有初始值時(shí)
  • <img>, usemap屬性有初始值時(shí)
  • <input>, type類(lèi)型不在隱藏狀態(tài)中時(shí)
  • <menu>,type類(lèi)型不在工具欄狀態(tài)中時(shí)
  • <object>, usemap屬性有初始值時(shí)
  • <video>, controls屬性有初始值時(shí)

可觸內(nèi)容

內(nèi)容既不空也不隱藏;它是呈現(xiàn)的內(nèi)容，是實(shí)質(zhì)性的。其模型是流程內(nèi)容或措辭內(nèi)容的元素應(yīng)該至少有一個(gè)可觸摸的節(jié)點(diǎn)。

表單相關(guān)內(nèi)容

表單相關(guān)內(nèi)容包含具有表單所有者的標(biāo)簽，由form屬性暴露出去。一個(gè)表單父節(jié)點(diǎn)可以是<form>元素，也可以是其id在表單屬性中被指定了的元素。

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

這個(gè)目錄由于較為復(fù)雜，因此還有幾個(gè)子目錄：

可枚舉的

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

可標(biāo)記的

與<label>標(biāo)記相關(guān)的標(biāo)簽，包括<button>，<input>，<keygen>，<meter>，<output>，<progress>，<select> 和 <textarea>。

可提交的

可用來(lái)在表單提交時(shí)，組成表單數(shù)據(jù)的元素。包括<button>,<input>,<keygen>,<object>,<select>和<textarea>

可重置的

表單重置時(shí)會(huì)影響到的標(biāo)簽。包括：<input>，<keygen>，<output>，<select> 和 <textarea>.

次要內(nèi)容目錄

還有一些次要的內(nèi)容目錄可以簡(jiǎn)單了解下。

腳本支持標(biāo)簽

腳本支持標(biāo)簽不直接影響文檔渲染后輸出的結(jié)果。相反，它們通過(guò)直接包含或指定腳本代碼來(lái)支持腳本，或者通過(guò)指定什么數(shù)據(jù)被腳本使用。
腳本支持標(biāo)簽包括：

  • <script>
  • <template>

透明內(nèi)容模型

如果一個(gè)標(biāo)簽屬于特殊內(nèi)容模型， 即使將透明內(nèi)容更換為子元素，其內(nèi)容必須由合法的HTML5元素組成。
例如，<del> 和 <ins> 是透明的：
<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>
如果這兩個(gè)元素被移除，這個(gè)程序段依然是合法的。
<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>

其他內(nèi)容模型

sectioning root

sectioning root category 的作用是把它的內(nèi)容與常規(guī)的大綱隔離。

譯文完畢。

附：
如果你有耐心讀到這里，恭喜你，你將會(huì)了解到vue的單文件組件對(duì)于本文中一些不被人所熟知的標(biāo)簽的應(yīng)用。
來(lái)看個(gè)vue官方的hello world單文件組件：



單文件組件主要包含3個(gè)標(biāo)簽，<template>,<script>,<style>。

我們從上述標(biāo)簽中找出這3個(gè)標(biāo)簽屬于的分類(lèi)。

  • <template>：流式標(biāo)簽，腳本支持標(biāo)簽。（flow content , Script-supporting elements。）
  • <script>：元數(shù)據(jù)標(biāo)簽，流式標(biāo)簽，短語(yǔ)標(biāo)簽，腳本支持標(biāo)簽。（Metadata content , Flow content , Phrasing content , Script-supporting elements）
  • <style>：元數(shù)據(jù)標(biāo)簽，流式標(biāo)簽（因?yàn)榇藭r(shí)scoped有定義，也就是style標(biāo)簽中的樣式只作用于當(dāng)前當(dāng)文件組件的作用域）。（Metadata content , Flow content(the scoped attribute is present)）

再來(lái)簡(jiǎn)單分析下。

template，符合流式標(biāo)簽和腳本支持的特點(diǎn)。主要包含包含內(nèi)嵌內(nèi)容和文本：例如雙向數(shù)據(jù)綁定模板；而且也包含腳本代碼且指定數(shù)據(jù)被腳本使用：例如事件處理函數(shù)的調(diào)用。

script，主要符合元數(shù)據(jù)和腳本支持的特點(diǎn)。元數(shù)據(jù)的原因是這里可以導(dǎo)入依賴(lài)，也能實(shí)現(xiàn)組件間通信，或者是vuex通信；會(huì)有腳本支持的情況，例如事件處理函數(shù)的定義。

style，主要是流式標(biāo)簽，沒(méi)有元數(shù)據(jù)的成分。因?yàn)檫@里加的scoped主要是為了內(nèi)嵌樣式內(nèi)容。

翻譯此文之前，我還以為template標(biāo)簽和style的scoped是尤雨溪自己創(chuàng)造出來(lái)的，翻譯完才發(fā)現(xiàn)，原來(lái)是W3C組織定義的，被自己的天真和無(wú)知所打敗，看來(lái)要好好審視下"精通html,css和javascript"這句話(huà)了。

努力成為優(yōu)秀的前端開(kāi)發(fā)工程師！

期待和大家交流，共同進(jìn)步，歡迎大家加入我創(chuàng)建的與前端開(kāi)發(fā)密切相關(guān)的技術(shù)討論小組：

努力成為優(yōu)秀前端工程師！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容