文章内容的规范化结构

结构类

内部不能直接包含文本或内联元素，有固定的子级结构。

1. <hgroup></hgroup> <!-- 主/副标题组：HGROUP /h1, h3 -->
2. <header role="abstract"></header> <!-- 提要：ABSTRACT /h4, p... -->
3. <nav role="toc"></nav> <!-- 目录：TOC /h4, ol:cascade/li/a（可多级） -->
4. <nav role="reference"></nav> <!-- 文献参考：REFERENCE /h4, ol -->
5. <aside role="seealso"></aside> <!-- 另参见：SEEALSO /h4, ul -->
6. <header></header> <!-- 导言：HEADER /h4, p... -->
7. <footer></footer> <!-- 结语/小结/页脚：FOOTER /h4, p... -->
8. <article></article> <!-- 文章区：ARTICLE /header, s1, footer, hr -->
9. <section role="s1"></section> <!-- 章：S1 /h2, header, s2, footer -->
10. <section role="s2"></section> <!-- 节：S2 /h2, header, s3, footer -->
11. <section role="s3"></section> <!-- 区：S3 /h2, header, s4, footer -->
12. <section role="s4"></section> <!-- 段：S4 /h2, header, s5, footer -->
13. <section role="s5"></section> <!-- 末：S5 /h2, header, [content], footer -->
14. <section></section> <!-- 深片区：SECTION /h2, header, [content], footer -->
15. <ul></ul> <!-- 无序列表：UL /li... -->
16. <ol></ol> <!-- 有序列表：OL /li... -->
17. <ol role="codelist"></ol> <!-- 代码表：CODELIST /li/code/b, i, #text -->
18. <ul role="ulx"></ul> <!-- 无序级联表：ULX /li/h5, ol|ul/... -->
19. <ol role="olx"></ol> <!-- 有序级联表：OLX /li/h5, ul|ol/... -->
20. <ol role="cascade"></ol> <!-- 级联编号表：CASCADE /li/h5, ol/... -->
21. <dl></dl> <!-- 描述列表：DL /dt, dd... -->
22. <table></table> <!-- 表格：TABLE /caption, thead, tbody, tfoot/tr/td... -->
23. <figure></figure> <!-- 插图：FIGURE /figcaption, p, ol, ul, img... -->
24. <blockquote></blockquote> <!-- 引用块：BLOCKQUOTE /h4, p... -->
25. <aside></aside> <!-- 批注块：ASIDE /h4, p... -->
26. <details></details> <!-- 详细内容：DETAILS /sumary, p... -->
27. <pre role="codeblock"></pre> <!-- 代码块：CODEBLOCK /code... -->
28. <fieldset></fieldset> <!-- 控件分组：FIELDSET /legend, ... -->

文本类

可直接包含文本内容和内联单元，没有固定的DOM结构可单独占据一行的块级元素。

29. <p></p> <!-- 段落：P 通用内容容器 -->
30. <address></address> <!-- 地址信息：ADDRESS -->
31. <pre></pre> <!-- 预排版：PRE 非代码块 -->
32. <aside role="note"></aside> <!-- 注解：NOTE -->

单体类

不包含任何内容，是一个独立存在的单元。

33. <hr /> <!-- 分隔：HR -->
34. <div role="blank"></div> <!-- 白板：BLANK 用于交互展示 -->

原生内联单元

HTML 标准原生支持的包含内容语义的内联元素。

定制单元

标准的HTML内联单元虽然品类丰富，但依然稍有欠缺。这里定制了几个可能会常用的新单元类型。

内联控件

最后一种内联单元是表单控件，它们不是用来表达实体内容的文字或音/视频数据流，而是HTML里特有的。

在普通的文章页面里，表单控件几乎没有意义，因为它们是用来向服务器提供数据的交互元素。但有时，一篇文章里或许需要可视化地表述这些功能性元素，或者作为文档交互的目标，因此也被纳入为可插入。

提要

<header role="abstract">
    <h4>提要<h4>
    <p></p> ...
</header>

目录

<nav role="toc">
    <h4></h4>
    <ol role="cascade">
        <li><h5><a href="#..."><!-- [#text] --></a></h5></li>
    </ol>
</nav>

章节

系统提供 5 个默认层级的片区，它们由 role 特性标注，被称为 章节 片区（与普通的 <section> 相区别）。

<section role="s1">     <!-- s1 ~ s5 -->
    <h2></h2>           <!-- 标题 -->
    <header></header>   <!-- 导言：可选 -->
    {content} ...       <!-- 内容件 -->
    <footer></footer>   <!-- 结语：可选 -->
</section>

文献参考

用有序列表来表达，体现引用出现在原文中的先后位置。

<nav role="reference">
    <h4>文献参考</h4>
    <ol>
        <li></li>...
    </ol>
</nav>

另参见

构造为一个无序列表，体现出不区分先后或主次顺序的并列关系。

<aside role="seealso">
    <h4>另参见</h4>
    <ul>
        <li></li>...
    </ul>
</aside>

无序级联表

以无序列表 <ul> 为根容器，内含多级子列表（可为任意 <ol> 或 <ul>）。

<ul role="ulx">
    <li></li>
    <li>
        <h5></h5> <!-- 级联小标题 -->
        <ol>      <!-- 也可为<ul> -->
            <li></li>
        </ol>
    </li>
</ul>

有序级联表

以有序列表 <ol> 为根容器，内含多级子列表（可为任意 <ul> 或 <ol>）。

<ol role="olx">
    <li></li>
    <li>
        <h5></h5> <!-- 级联小标题 -->
        <ul>      <!-- 也可为<ol> -->
            <li></li>
        </ul>
    </li>
</ol>

级联编号表

仅由有序列（<ol>）表构成，除了最终的层级，列表项（<li>）中仅有两个子元素：小标题（<h5>）和子列表（<ol>）。

<ol role="cascade">
    <li></li>
    <li> <!-- 由CSS表达序号逻辑 -->
        <h5></h5>
        <ol>
            <li></li>
        </ol>
    </li>
</ol>

代码表

包含data-lang特性用于指定代码的语言，可以有两级定义：

1. 根级。书写在 <ol> 元素上，对应整个代码表的默认值。
2. 行级。书写在 <code> 元素上，对应当前行代码的语言，可选。

元素的 start 属性在引用代码片段时很有用。例：源码（代码表）。

<ol role="codelist" data-lang="xx" start="n">
    <li><code> <!-- 根封装 -->
        ...<b>... <i>... <!-- 代码内容，<b>着色封装，<i>注释封装 -->
    </code></li>
    <li><code data-lang="xx"> <!-- 嵌入语言覆盖 -->
        ...
    </code></li>
</ol>

代码块

与代码表一样，包含data-lang特性指定代码所属语言。注意语言是设置在<code>元素而不是<pre>容器上。

<pre role="codeblock"> <!-- 容许简单换行 -->
<code data-lang="xx"> ...<b>... <i>...
    <!-- 制表符会被转换为空格 -->
</code>
<!-- 可含多个<code>块，注意<code>无缩进 -->
<code>...
</code></pre> <!-- 末尾紧随<code>之后 -->

注解

用于对正文中的某段文本进行额外的注解，或在某段落之后进行简单的附加说明（比批注块简洁）。在UI上可能构造为一种弹出展示。

<aside role="note">
    <!-- 文本或内联单元 -->
</aside>

白板

这是一种特别的内容单元，主要用于交互展示。

<div role="blank">
    <!-- 动态表达区 -->
</div>

标题

文章应当有一个标题，在本设计中称之为 主标题。在某些情况下，文章还会有 副标题。

如果文章存在副标题，标题的部分应当存放在一个 <hgroup> 容器中。主标题应当只有一个，而副标题可以有多个。

<h1>单独一个主标题时</h1>

<hgroup> <!-- 组标题 -->
    <h1>主标题</h1>
    <h3>副标题。可能是一段简述，或一列纲目（多个副标题）</h3>
    ...
    <h3>副标题（纲目n）</h3>
</hgroup>

文章

这是文章内容的主容器，除了文章的主标题（页面标题 <h1>）、提要、目录等少数几个结构外，其它所有内容块都被包含在里面。

<article>
    <header></header> <!-- 导言：可选 -->
    {content} ...     <!-- 主体内容 -->
    <footer></footer> <!-- 结语：可选 -->
</article>

导言

在一个章节内的最前端（但在章节标题之后）。导言之后通常是正文内容（内容件）或一个子章节。

在文章的顶层（<article>）也可以有一个导言，它作为 <article> 内的首个子元素存在（文章的标题被提取出来放到了 <article> 的外面——整个内容的最前端）。

<header>
    <h4></h4> <!-- 可选 -->
    <p></p> ...
</header>

结语

在章节片区内的末尾，通常称为 小结。在文章根元素（<article>）内也可以包含，通常是一个总结（或 结语）。如果出现在文章根容器之上的顶层，可能会是一个 声明。

<footer>
    <h4></h4> <!-- 可选 -->
    <p></p> ...
</footer>

片区

如果系统默认的5层次章节（s1 ~ s5）不足以表达文章的层次结构，则在 s5 之下可以嵌入任意层数的普通片区。它们由未标注 role 特性的普通 <section> 元素表达，结构与 s5 相同。

<section>
    <h2></h2>           <!-- 标题 -->
    <header></header>   <!-- 导言：可选 -->
    {content} ...       <!-- 内容件 -->
    <footer></footer>   <!-- 结语：可选 -->
</section>

无序列表

<ul>
    <li></li> ...
</ul>

有序列表

<ol>
    <li></li> ...
</ol>

描述列表

<dl>
    <dt></dt>
    <dd></dd> ...
</dl>

表格

表格的 border 特性描述了边框的大小，它的值应当是一个数字。但这里对它进行了扩展。

<table border="1"> <!-- border="0|1|i|r|h|v" -->
    <caption></caption>
    <thead> <!-- 可选 -->
        <tr><td></td></tr>
    </thead>
    <tbody>
        <tr><td></td></tr>
    </tbody>
    <tfoot> <!-- 可选 -->
        <tr><td></td></tr>
    </tfoot>
</table>

插图

作为独立于内容主体流的一块数据，它可以包含的内容类型较多，仅次于片区单元且可直接包含图片类型。但通常，它主要用于插入一块图表及其说明（如文章中的一副插画）。

<figure>
    <figcaption></figcaption>
    <span role="graph">
        <i role="explain">[图片讲解，可选]</i>
        <img />
    </span>
    ... <!-- p, ol, ul, img, svg, blockquote, table, pre, codeblock, codelist -->
</figure>

引用块

<blockquote>
    <h4></h4> <!-- 可选 -->
    <p></p> ...
</blockquote>

批注块

<aside>
    <h4></h4> <!-- 可选 -->
    <p></p> ...
</aside>

详细内容

<details>
    <summary></summary>
    <p></p> ...
</details>

段落

最简单的内容行元素，也是大多数小区块里内容的默认封装单元。

<p>
    <!-- 文本或内联单元 -->
</p>

地址信息

内容的源码性质与段落类似，但表达了内容的逻辑含义。

<address>
    <!-- 文本或内联单元 -->
</address>

预排版

与包含特定语言标注的代码表/代码块不同，这是一种需要保留原始版式的通用结构。

<pre>
    <!--文本或内联单元
        首个换行会被浏览器友好清理，末尾换行会被原样保留。 -->
</pre>

分隔

分隔作为行块对待，样式由外部CSS定义。

<hr />
<hr role="dotted" />  <!-- 虚线 -->
<hr role="solid" />   <!-- 实线 -->
<hr role="double" />  <!-- 双划线 -->
<hr role="dashed" />  <!-- 点划线 -->
<hr role="groove" />  <!-- 内槽线 -->
<hr role="ridge" />   <!-- 外槽线 -->
<hr role="inset" />   <!-- 内嵌线 -->
<hr role="outset" />  <!-- 外嵌线 -->

注音

<ruby>
    漢<rp>(</rp><rt>ㄏㄢˋ</rt><rp>)</rp>
</ruby>

控件分组

在文章中插入表单控件有时是必要的，比如对于HTML元素的形象描述，或者在页面文章中实现交互（互动文档）。

<fieldset>
    <legend>分组标题</legend>
    ... <!-- 其它控件 -->
</fieldset>

源码（代码块）

<pre role="codeblock">
<code data-lang="go"><i>// prints its command-line arguments.</i>
<b role="kw">package</b> main
<b role="kw">import</b> (
    <s>"fmt"</s>
    <s>"os"</s>
)
<b role="kw">func</b> main() {
    <b role="kw">var</b> s, sep <b role="dt">string</b>
    <b role="kw">for</b> i <b role="op">:=</b> 1; i <b role="op"><</b> <b role="fn">len</b>(os.Args); i<b role="op">++</b> {
        s <b role="op">+=</b> sep <b role="op">+</b> os.Args[i]
        sep <b role="op">=</b> <s>" "</s>
    }
    fmt.Println(s)
}</code></pre>

效果

// prints its command-line arguments.
package main
import (
    "fmt"
    "os"
)
func main() {
    var s, sep string
    for i := 1; i < len(os.Args); i++ {
        s += sep + os.Args[i]
        sep = " "
    }
    fmt.Println(s)
}

源码（代码表）

<ol role="codelist" data-lang="go" start="3">
    <li><code><b role="kw">import</b> <s>"fmt"</s></code></li>
    <li><code><b role="kw">func</b> main() {</code></li>
    <li><code>    fmt.Println(<s>"Hello, 世界"</s>) <i>// 这是一条长行，测试折行的效果。如果编号列的背景色与代码部分不一样的话，CSS可能不宜设计为水平滚动。代码是否为折行，可以通过编号看出来。</i></code></li>
    <li><code>}</code></li>
    <li><code><b role="kw">type</b> MapSort <b role="kw">struct</b> {</code></li>
    <li><code>    m <b role="kw">map</b>[<b role="dt">string</b>]<b role="dt">int</b></code></li>
    <li><code>    s []<b role="dt">string</b></code></li>
    <li><code>}</code></li>
</ol>

效果

3. import "fmt"
4. func main() {
5. fmt.Println("Hello, 世界") // 这是一条长行，测试折行的效果。如果编号列的背景色与代码部分不一样的话，CSS可能不宜设计为水平滚动。代码是否为折行，可以通过编号看出来。
6. }
7. type MapSort struct {
8. m map[string]int
9. s []string
10. }

实例

这是贵州梵净山顶的一段突峰，位于金顶对面之大坡侧翼，著名景点蘑菇石旁边。突兀支立，雄奇险峻，悬屹于万丈深渊，经风沐雨……

实例

Firefox

Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation.

Chrome

Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox.

IE

Internet Explorer is a discontinued series of graphical web browsers developed by Microsoft and included in the Microsoft Windows line of operating systems, starting in 1995.

Opera

Opera is a multi-platform web browser developed by its namesake company Opera. Opera is a Chromium-based browser. It distinguishes itself from other browsers through its user interface and other features.

Edge

Microsoft Edge is a cross-platform web browser created and developed by Microsoft. It was first released for Windows 10 and Xbox One in 2015.

Safari

Safari is a graphical web browser developed by Apple. It is primarily based on open-source software, and mainly WebKit.