MDN之Web指南【內容分類】

原文鏈接:https://blog.csdn.net/WuLex

每一個HTML元素都必須遵循定義了它可以包含哪一類內容的規則。 這些規則被歸類爲幾個常見的元素內容模型(content model)。每個HTML元素都屬於0個、1 個或多個內容模型,每個模型都有一些規則使得元素中的內容必須遵循一個HTML規範文檔( HTML-conformant document)。

以下是三種類型的內容分類:

  • 主內容類,描述了很多元素共享的內容規範;
  • 表單相關的內容類,描述了表單相關元素共有的內容規範;
  • 特殊內容類,描述了僅僅在某些特殊元素上才需要遵守的內容規範,通常這些元素都有特殊的上下文關係。

Content_categories_venn.png

主內容類(Main content categories

元數據內容(Metadata content

此類元素 修改文檔其餘部分的陳述或者行爲,建立與其他文檔的鏈接,或者傳達其他外帶信息。

屬於這一類的元素有:<base>, <command>, <link>, <meta>, <noscript>, <script>, <style> and <title>.

流式元素(Flow content

此類元素通常包含 文本或植入的內容。此類元素有: <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> and Text.

屬於此類的少數其他元素(僅限於某種特殊情形,這些元素纔會屬於此類):

  • <area>, 僅限於它作爲<map>的子節點的情形
  • <link>, 僅限於itemprop屬性存在的情形
  • <meta>, 僅限於itemprop屬性存在的情形
  • <style>, 僅限於 scoped屬性存在的情形

章節元素(Sectioning content

隸屬於分節內容模型的元素 在當前的大綱中創建一個分節,此分節將定義<header>元素、<footer> 元素和標題元素(heading content)的範圍。

屬於此類的元素有: <article>, <aside>, <nav> and <section>.

注意:不要將本內容模型與sectioning root category 混淆,sectioning root category 的作用是把它的內容與常規的大綱隔離。

標題元素(Heading content

標題內容 定義了分節的標題,而這個分節可能由一個明確的分節內容元素直接標記,也可能由標題本身隱式地定義。

屬於此分類的元素有: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> and <hgroup>.

注意:儘管<header>可能包含一些標題內容,但<header>並不是標題內容本身。

短語元素(Phrasing content

短語元素(Phrasing content) 規定文本和它包含的標記。 一些Phrasing content就構成了段落.

屬於此類的元素有: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <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> 和 plain text (僅當所包含的內容不完全爲空字符的時候).

一些其他的元素也屬於這個分類,但是隻有當如下特殊情況時纔會實現:

  • <a>, 當它僅包含 phrasing content
  • <area>, 當它爲<map> 元素的子元素時
  • <del>, 當它僅包含 phrasing content
  • <ins>, 當它僅包含 phrasing content
  • <link>, 如果itemprop屬性存在的情形
  • <map>, 當它僅包含 phrasing content
  • <meta>,如果itemprop屬性存在的情形

嵌入元素(Embedded content

Embedded content輸入另一個資源或者將來自另一種標記語言或命名空間的內容插入到文檔中。

屬於此類的元素有:<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>.

交互元素(Interactive content)

交互式內容包含爲用戶交互而特別設計的元素。

屬於此類的元素有:<a>,<button>,<details>,<embed>,<iframe>,<keygen>,<label>,<select><textarea>

僅在特殊情形下才會屬於此類的元素有:

  • <audio>, 若controls屬性存在
  • <img>, 若usemap屬性存在
  • <input>, 若type屬性不處於隱藏(hidden)狀態
  • <menu>, 若type屬性處於工具欄(toolbar)狀態
  • <object>, 若usemap屬性存在
  • <video>, 若controls屬性存在

表單相關內容(Form-associated content

表單相關的內容 包含 擁有表單父節點(exposed by a form attribute)的元素,一個表單父節點可以是<form>元素,也可以是其id在表單屬性中被指定了的元素。(Form-associated content comprises elements that have a form owner, exposed by a form attribute. A form owner is either the containing <form> element or the element whose id is specified in the form attribute.)

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

此類包含了幾個子類:

可列舉的元素(listed
form.elementsfieldset.elements IDL collections中列舉出的元素. 包括 <button>,<fieldset>,<input>,<keygen>,<object>,<output>,<select><textarea>

可標籤的元素(labelable

可提交的元素(submittable
包括當表單提交時可以用來組成表單數據的元素。 包括 <button>,<input>,<keygen>,<object>,<select><textarea>.

可重置的元素(resettable
當表單重置時會被重置的元素。包括 ,,, 和 .

二級分類

這裏還有一些你需要注意的二級分類元素。

支持腳本元素

支持腳本的元素不會直接渲染輸出在頁面文檔中。當然,他們被用來存放腳本代碼,腳本代碼所要用到的數據。

這些支持腳本的元素有:

<script>
<template>

透明內容模型(Transparent content model)

如果一個元素擁有 transparent content mode, 即使將透明內容更換爲子元素,其內容必須由合法的HTML5元素組成。

例如,<del><ins> 是透明的:

<p>We hold these truths to be 
<del>
<em>sacred &amp; undeniable</em>
</del> 
<ins>self-evident</ins>.
</p>

如果這兩個元素被移除,這個程序段依然是合法的。

<p>We hold these truths to be 
<em>sacred &amp; undeniable</em> self-evident.
</p>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章