重学 HTML —— 块内容

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」

上一节介绍了一些页面级别的区块，接下来看一下更小的组成单位。html 元素分块元素和行内元素，它的本质是 css 的 dispslay 属性不同，这一节就来看一下 html 中常见的内容块元素。

与上一节的页面块类似，这些内容块的效果同样也可以只使用 div 来实现，实际开发中用到的并不会很多，接下来先来了解一下：

• div：这个不用过多介绍了，最常用的 html 标签，在不使用 css 时没有任何效果。

• p：从语义上表示一个段落，自带边距样式效果。

• ul、ol、li：无序列表和有序列表，li 为列表内容。

• pre：预定义格式文本，在其中的空格都会被原样渲染出来，可以用其渲染代码块等内容。

• hr：文本分割效果，从浏览器表现上来看是一条线。

• dl、dt、dd：键值对类型的列表。

• blockquote：引用内容。

• figure、figcaption：figure 是一段独立内容，figcaption 是为 figure 添加的描述，举个例子：

  <figure>
      <img src="<https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg>"
           alt="Elephant at sunset">
      <figcaption>An elephant at sunset</figcaption>
  </figure>
  

上面介绍这些都是块内容，可以看出这些标签更多的也是为了展现一个语义，其本身附带的样式等效果往往并不重要。关于语义化对于 SEO 和 a11y 的意义之前已经说过很多次了这里就不赘述。这里来看另一个问题：默认样式。

前端开发者对于 css 的 reset 应该不陌生，在创建一个新的页面时候，我们会选择首先将默认样式重置，这是因为这些标签在不同的终端展示的样式不尽相同，通常不符合 UI 的要求。前面也提到了这些标签更重要的意义是表意而不是展示样式效果，重置使得我们能更专注于自己的样式实现。正是因为更多时候我们只需要一个单纯的没有任何附加条件的空标签，所以 div 才会被大规模的广泛应用。

有关块内容的介绍就这么多，行内元素相关的介绍放在下一篇。