第 7 章 内容组织元素

合理使用内容组织元素,能帮助浏览器等设备更好地理解网页的内容。

7.1 内容组织相关元素

7.1.1 p

p元素用来表示段落,列表元素olul不能包含于p元素中。

7.1.2 address

address 元素用来表示联系方式。

<footer>
 <address>
  要了解更多信息,请联系<a href="mailto:js@example.com">作者</a>.
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

7.1.3 hr

hr元素表示段落级别的语义中断,例如,一个故事中的场景切换,或者文章中的主题切换。

7.1.4 pre

Pre元素表示预定义格式的文本块,常用来标记诗歌、代码等等内容。

7.1.5 blockquote

Blockquote元素表示从别处引用的内容。

7.1.6 ol

Ol 元素表示一组有序列表,所谓有序列表,就是列表项目的顺序是有意义的,如菜谱中的工序。列表项目使用li元素标记。

7.1.7 ul

Ul 元素表示一组无序列表,所谓无序,就是列表的顺序可以随意改变,列表项目使用 li 元素标记。

7.1.8 li

Li元素表示列表中的项目。

7.1.9 dl

dl元素表示一组包含“名称-值”的自定义列表,其中名称使用dt标记,值可以是一个或者多个dd元素。

<dl>
 <dt> 作者 </dt>
 <dd> Adam </dd>
 <dd> Cui </dd>
 <dt> 编辑 </dt>
 <dd> Fang </dd>
</dl>

7.1.10 dt

Dt 元素用来表示自定义列表 dl 中的名称、术语。

7.1.11 dd

Dd 元素用来表示自定义列表dl中名称dt的解释、定义或者值。

7.1.12 figure

Figure 元素用来表示对插图、图表、照片、代码块等内容的引用。

<figure>
 <img src="bubbles-work.jpeg">
 <figcaption>图片标题</figcaption>
</figure>

7.1.13 figcaption

Figcaption元素用来表示figure元素中的标题。

7.1.14 main

Main元素表示文档或者应用的最重要或者核心部分。main元素可与header、footer一起标记网页的内容。

在文档中,<main> 元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容,比如侧边栏、导航栏链接、版权信息、网站 Logo,搜索框(除非搜索框为文档的主要功能),都不应当被包含在其内。

main元素不要放在article、 aside、 footer、 header、或者 nav元素中。

<!DOCTYPE html>
  <html>
  <head>
    <title>………………</title>
  </head>
  <body>

  <header>
  <nav>
  <ul>
  <li>……</li>
  </ul>
  </nav>
  </header>

  <main>
  …………
  </main>

  <footer>…………</footer>

  </body>
  </html>

7.1.15 div

Div元素本身并没有特殊含义,它是 HTML 中用来标记内容结构的最常用元素,用来将相关的元素组织在一起,形成逻辑上的整体。