开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情
HTML提供了文本内容元素来组织在<body>里的块或章节的内容。这一部分的元素包括我们最常用的<div>、<p>和各种列表等等。这一章节我们就来学习他们。
内容划分元素 -- <div>
<div>应该是我们最常见最常用的一个元素了。它是一个通用型的流内容容器，定义HTML文档中的一个分隔区块或者一个区域部分，对其内容进行分组以应用样式。
<div>是一个“纯粹的”容器，不具有语义。应当仅在没有其它合适的语义元素（如<section>等）可用时使用。
段落元素 -- <p>
<p>元素定义一个段落。通常在视觉媒体中表示为通过空行和/或首行缩进与相邻块分隔的文本块，也可以是包含相关内容的任何结构的分组（比如图像和表单）。
在<p>标签中，如果包含了其他块级元素（包括<p>），那么<p>标签会提前闭合：
<p>1
<div>2</div>
</p>
<!-- 渲染结果如下 -->
<p>1 </p>
<div>2</div>
<p></p>
可访问性
在使用多个<p>元素时，想要增加段落之间的空间，不要在其中使用空的<p>元素，这对于使用屏幕阅读技术的人来说，屏幕阅读器会宣布段落的存在，但是因为该段落没有内容，屏幕阅读器不会宣布其中的任何内容，会让人感到困惑。
预格式化文本元素 -- <pre>
<pre>元素表示预定义格式化的文本。在<pre>标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。简单地说就是文本中不管有多少空格和换行符，都会原样显示（大部分元素会将内容中的多个空格和换行符压缩为一个）。
注意事项
-
<pre>是一个块级元素，但是在使用时尽量不要包含块级元素（包括<pre>），另外，如果有需要使用特殊符号，尤其是定义一个HTML源代码（如 【<】、【>】等）的时候，请使用符号实体来代替特殊字符：<pre>这是一个<pre>pre</pre>标签</pre> <!-- 结果如下 --> <pre> "这是一个" <pre>pre</pre> "标签" </pre> <pre>这是一个<pre>pre</pre>标签</pre> <!-- 结果如下 --> <pre>这是一个<pre>pre</pre>标签</pre> -
不推荐在
<pre>元素中使用制表符 tab ，因为在不同的浏览器中，tab 的表现形式各不相同。在用<pre>标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
可访问性问题
弱视力人群在使用屏幕阅读器进行浏览时，屏幕阅读器按顺序读出<pre>的文本字符可能会令人感到困惑。在使用预格式化文本创建的任何图像或图表提供备用描述非常重要。这里可以参考MDN提供的示例。
主题中断（水平线）元素 -- <hr>
<hr>元素表示段落级别的主题中断。默认显示为一条通屏的水平线。
早期的HTML版本中，<hr>没什么语义，就只是表示一条水平线。当然现在<hr>也是呈现出一条水平线，但目前被定义为语义上的，而不是表现层面上。因此在使用时要注意使用场景。如果只是需要一条水平线，可以用CSS样式来修饰（比如：给元素的某个边加边框，伪元素等）。
目前<hr>除了全局属性外，其他属性已经被弃用了，虽然能用，但不推荐，想对<hr>添加好看的样式，请通过CSS绘制。
使用示例
注意：在HTML中
<hr>没有结束标记，如果有结束标记，浏览器会自动修正。但是在XHTML中，必须要有结束标记。
可附标题内容元素 -- <figure>与图形标题元素 -- <figcaption>
<figure>元素代表一段自包含内容。通常用于注释图像、图表、照片、代码等等。在<figure>当中可以使用<figcaption>元素指定标题。
<figcaption>元素表示其父元素<figure>的其它内容的标题。通常它是其父<figure>的第一个或最后一个元素。
<figure>元素的内容应该与文档主内容相关，同时元素的位置相对于主内容是独立的。即使被删除或者移动，也不会对文档流产生影响。<figcaption>元素是可选的，如果没有该元素，这个父节点的内容只是会没有说明/标题。
通过在其中插入<figcaption>（作为第一个或最后一个子元素）来与<figure>元素相关联。
使用示例：
块级引用元素 -- <blockquote>
<blockquote>元素表示从另一个源引用的部分。通常在渲染时，这部分的内容左右两侧会有一定的缩进（如需要覆盖原本的缩进请使用CSS的 margin-left/right）。
<blockquote>是块级引用元素，是一个单独的引用块，如果需要内联一个较短的引用块，请使用<q>。
在<blockquote>身上，有一个cite属性，在HTML中，有一个<cite>元素，通常在<blockquote>身上使用cite属性提供引用来源的URL（必须从另一个源引用），使用<cite>元素提供来源的文本表示，以文本的形式告知读者引文的出处（cite属性在普通的Web浏览器中没有视觉效果，主要是通过屏幕阅读器使用）。
列表项元素 -- <li>
<li>元素用于表示列表中的项。必须包含在无序列表(<ul>)、有序列表(<ol>)或者菜单(<menu>)当中。
<li>在不同的列表或菜单当中，显示的效果不一样，在菜单和无序列表中，列表项通常使用项目符号（•）显示。在有序列表中，它们通常以升序计数器显示在左侧，例如数字或字母。可以使用CSS中的list-style-type属性指定显示符号的类型（li身上的type属性已被弃用，不推荐使用）。
无序列表元素 -- <ul>
<ul>表示一个无序列表，其中的项（<li>）通常显示为项。并且项与项之间的顺序无意义。
<ul>与<ol>都可不受限制的进行自身嵌套或者交互嵌套（比如在一个<ul>当中可以嵌套一个或多个<ul>和<ol>。<ol>亦是如此）。
<ul>身上有一个compact属性，当它的值为true时，将呈现紧凑型列表，但是该属性已被弃用，如果需要呈现出与compact相同的效果，可以使用CSS，将line-height的值设置为80%。
有序列表元素 -- <ol>
<ol>表示一个有序列表。其中的项的显示效果通常为升序数字列表，且项与项之间的顺序是有意义的（例如做菜的步骤等）。
在<li>元素身上有一个value属性，用于指定当前的<li>在有序列表中的序号。该属性只能是数字（可为负），在此之后的<li>会根据该<li>的value值开始计数。value属性只在有序列表当中使用才有效，在无序列表和菜单当中使用是无意义且无效的。
属性
| 属性名 | 值 | 简介 |
|---|---|---|
| reversed | boolean | 指定列表的项按相反顺序排列。项目将从高到低编号。 |
| start | number | 指定列表项开始计数的整数 |
| type | 1（默认）、a、A、i、I | 指定显示符号的类型 |
start属性始终是一个阿拉伯数字，无论type的值是字母或是罗马数字。- 除非列表项的序号或显示符号的类型很重要，否则请使用CSS中的
list-style-type代替type。
菜单元素 -- <menu>
<menu>元素表示一组用户可执行或激活的命令。在HTML规范中<menu>被描述为<ul>的语义替代项，但被浏览器视为与<ul>没什么不同，在其中的项依然使用<li>。
在一些浏览器中，还可以使用<menuitem>元素作为<menu>的项，表示生成一个弹出式菜单。但是该元素在HTML5.2版本中已被弃用，不再推荐使用。目前在中文版的MDN中，<menu>页给出的示例依然是使用了<menuitem>（详细请参考）。
<menu>和<ul>元素都表示项的无序列表。主要区别在于<ul>主要包含用于显示的项目，而<menu>用于交互，通常用于文本菜单，工具条和命令列表选项。。
使用示例
<menu>
<li>
<button>复制</button>
</li>
<li>
<button>剪切</button>
</li>
<li>
<button>粘贴</button>
</li>
</menu>
描述列表元素 -- <dl>、描述术语元素 -- <dt>和说明详细信息元素 -- <dd>
<dl>元素表示一个说明列表。
<dt>元素指定描述或定义列表中的术语，必须在<dl>元素当中使用，通常其后跟着<dd>元素。多个连续出现的<dt>元素都将由出现在它们后面的第一个<dd>元素定义。
<dd>表示一个描述元素。它的作用是在<dl>中描述、定义或者说明就跟着自己的前一个<dt>元素。<dd>只能作为<dl>的子元素出现，并且在其前面必须跟着一个<dt>元素。
注意：在页面上创建缩进时，请使用CSS的
margin属性，不要使用<dl>或<ul>，这不是<dl>该做的事。
使用示例
<dl>
<dt>橘子</dt>
<dd>学名：Musa nana Lour。是芭蕉科、芭蕉属植物。</dd>
<dt>苹果</dt>
<dd>蔷薇科苹果属植物。</dd>
<dt>葡萄</dt>
<dd>学名：Vitis vinifera L。为葡萄科葡萄属木质藤本植物。</dd>
</dl>
