②其他元素

nav(导航)

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

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

nav元素只包含文本,不含子元素:

aside(边栏)

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

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

<aside style="border-left: 4px solid #808080;margin-left: 3em;">

    ...

  </aside>

不含子元素:

article(文章)

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

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

article 元素

排版是“二维的建筑”。

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

bird

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

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

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

代码:

<article style="color: #528256;margin: 1em 0em 1em 2em;">

    <h1 style="text-align: center;font-size: 1.2em;">序言</h1>

   ...

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

  </article>

不含子元素:

排版是一个大话题,它既是一门艺术,也是一种随着数字技术的出现而显著发展的工程技术。

section(小节)

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

section 元素

排版是“二维的建筑”。

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

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

——MDN DOC

代码:

<section style="color: #6194cb;margin: 1em 2em;">

  <h1 style="text-align: center;font-size: 1.2em;">序言</h1>

  ...

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

</section>

不含子元素:

排版是“二维的建筑”。

figure/figcaption(浮动体及标题)

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

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

代码:

  <figure>

    <img alt="output" src="../Images/output.jpg"/>

    <figcaption>作家雷米</figcaption>

  </figure>

output
作家雷米

cite(引用)

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

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

代码:

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

dl/dt/dd/dfn/abbr(术语及缩写)

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

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

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

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

The Internetis 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>

  <dt><dfn> <abbr title="World-Wide Web">WWW</abbr> </dfn></dt>

  <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 useCSS(Cascading Style Sheets) to style yourHTML(HyperText Markup Language). Using style sheets, you can keep yourCSSpresentation layer andHTMLcontent 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 pressingCtrl+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/caption/colgroup/col(表格)

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

标题元素,表格的第一个子元素
表格的头部 标题单元格 标题单元格
粉色背景 红色背景 绿色背景
普通单元格 Gecko Gecko
Edge EdgeHTML EdgeHTML
Safari Webkit Webkit
Chrome Blink Blink
Opera Blink Blink
表格的底部。 注释内容。 注释内容。

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

mark(标记)

mark元素用来标记文本,默认高亮显示(“高亮显示”四个字用mark元素包裹)。

address(联系信息)

address元素用来标记联系人信息。

E-mail:16200@qq.com
电话:+86 139 0000 1234
地址:山东省东平府清河县狮子街酒楼

bdi(自动书写方向隔离)

当出现混排语言,且不清楚该语言的书写方向,可以用bdi元素隔离开。由浏览器自动处理。

这句话中的英文——epubcheck command,用bdi元素隔离开。

bdo(手动书写方向隔离)

当出现混排语言,清楚该语言的书写方向,可以用bdo元素隔离开。并指定一个书写方向。

这句话中的“天地玄黄”会强制从右往左显示。

ins(插入)

文档编辑中,有删除亦有修改,ins元素即表示修改。一般和del元素一起出现,默认添加下划线。

这句话中的“黄玄地天天地玄黄”属于文档编辑,保留了历史记录。

samp(输出)

计算机程序输出内容用samp元素表示:[53793546.qreb.epub], 验证没有问题

time(时间戳)

time元素表示一个标准的时间:,八十一叟吳騫志於西簃。

“嘉慶癸酉立春日”用time元素表示,并且添加了datetime属性,即

<p>time元素表示一个标准的时间:<time datetime="1813-02-04">嘉慶癸酉立春日</time>,八十一叟吳騫志於西簃。</p>

main(主体)

main元素用于划分网页结构,下一段文字使用了该元素:

对于印刷作品的电子版本,标题层级参考印刷品。

header/footer(头部、尾部)

header和footer元素用于划分网页结构:

天头部分——header。
中间的内容用div元素。
地脚部分——footer。

var(变量)

var元素表示一个变量值,例如勾股定理中:abc

menu元素表示菜单,最常见的就是右键菜单:

  • 另存为
  • details/summary(摘要与详情)

    details元素可将详细信息收起或展开,通常和summary元素(摘要)一起使用。

    第一部默认需要点击展开按钮,才可以看到详细内容。

    fieldset/legend(表单)

    默认会用一个线框表现内容:

    知识链接基于AIGC在内容创作与编辑方面的……新闻播报等领域。