上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

其他元素

nav

以下元素是语义化的，其目的是便于识别内容。它对内容或布局没有影响。除非以某种方式使用 CSS 对其进行样式设置（例如，直接应用样式，或者对其父元素应用某种布局模型，如弹性盒子），否则它对内容或布局没有影响。

HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。下面的示例，是 nav 元素嵌套了有序列表：

aside

HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。

上面的段落使用 aside 元素嵌套了一个 p 元素。为了确认可以选择，为其添加 CSS：

...

</aside>

article

HTML <article> 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

使用该元素排版一篇短文：

article 元素

排版是“二维的建筑”。

如果文本及其字体是建筑的材料，那么排版就是建筑的图纸。

bird

排版是一个大话题，它既是一门艺术，也是一种随着数字技术的出现而显著发展的工程技术。显然，我无法在一篇文章中涵盖这个话题，甚至一本书也做不到。

在众多排版概念中，排版引擎是核心之一。简单来说，排版引擎是一种软件，它决定了字形、图形、表格等如何布局，以便进行打印或屏幕显示。

——《排版引擎纵谈：程序员的视角》

代码：

...

<p style="text-align: right;">——《排版引擎纵谈：程序员的视角》</p>

</article>

section

HTML <section> 元素表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。

section 元素

排版是“二维的建筑”。

如果文本及其字体是建筑的材料，那么排版就是建筑的图纸。

<section> 是一个通用的分节元素，只有在没有更具体的元素来代表它的时候才可以使用。

——MDN DOC

代码：

...

<p style="text-align: right;">——《排版引擎纵谈：程序员的视角》</p>

</section>

figure-figcaption

HTML <figure> 元素代表一段独立的内容，可能包含 <figcaption> 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元（为 figure 元素添加 id，点击“引用”可跳转到图片位置）。

通常，<figure> 的内容为图像、插图、图表、代码片段等，在文档的主内容流中引用，但可以移动到文档的另一部分或附录而不影响主内容流。（类似 LaTeX 中的浮动体概念。——作者注）

代码：

</figure>

cite

HTML 引用（Citation）标签 (<cite>) 表示一个作品的引用，且必须包含作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。

——《排版引擎纵谈：程序员的视角》

代码：

<cite><a href="https://blog.ppresume.com/posts/zh-cn/on-typesetting-engines">排版引擎纵谈：程序员的视角</a></cite>

dl/dt/dd/dfn/abbr(术语元素)

HTML <dl> 元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。

HTML <dt> 元素（或 HTML 术语定义元素）用于在一个定义列表中声明一个术语。该元素仅能作为 <dl> 的子元素出现。通常在该元素后面会跟着 <dd> 元素，然而，多个连续出现的 <dt> 元素都将由出现在它们后面的第一个 <dd> 元素定义。

HTML <dd> 元素（HTML 描述元素）用来指明一个描述列表 (<dl>) 元素中一个术语的描述。

HTML 定义元素 (<dfn>) 表示术语的一个定义。

The Internet is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.

代码：

<p>

<dfn id="def-internet">The Internet</dfn> is a global system of interconnected

networks that use the Internet Protocol Suite (TCP/IP) to serve billions of

users worldwide.

</p>

在同一文档的后面：

WWW: The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on the Internet.

代码：

<dl>

<dd>The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on <a href="#def-internet">the Internet</a>.</dd>

</dl>

<abbr> HTML 元素表示一个缩写词或首字母缩略词。

You can use CSS (Cascading Style Sheets) to style your HTML (HyperText Markup Language). Using style sheets, you can keep your CSS presentation layer and HTML content layer separate. This is called "separation of concerns."

代码：

<p>You can use <abbr style="color: brown;">CSS</abbr> (Cascading Style Sheets) to style your <abbr style="color: brown;">HTML</abbr> (HyperText Markup Language). Using style sheets, you can keep your <abbr style="color: brown;">CSS</abbr> presentation layer and <abbr style="color: brown;">HTML</abbr> content layer separate. This is called "separation of concerns."</p>

kbd

HTML 键盘输入元素 (<kbd>) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。

Save the document by pressing Ctrl + S

可以为 kbd 元素增设 CSS：

<p>Save the document by pressing <kbd style="border: 1px solid #000;padding: 0 2px;">Ctrl</kbd> + <kbd style="border: 1px solid #000;padding: 0 2px;">S</kbd></p>

table/thead/tbody/tfoot/tr/th/td

HTML <table> 元素表示表格数据——即在一个由包含数据的行和列组成的二维表格中呈现的信息。

**一个完整的表格示例**
标题头部	标题头部
Browser	Layout Engine
Firefox	Gecko
Edge	EdgeHTML
Safari	Webkit
Chrome	Blink
Opera	Blink
表格的底部。注释内容。

标题加粗，头部背景黄色（行1），表格主体背景橙色（行2-7），表格脚注部分背景红色（行8）。