前端学习回顾-07

HTML 的主要工作之一是 提供文本结构。

基础：标题和段落

大部分的文本结构由标题和段落组成。

定义段落（Paragraph）

在 HTML 中，每个段落由 <p> 元素定义，代码示例：

<p>我是一个段落。</p>

定义标题（Heading）

在 HTML 中标题由以下六个等级的元素定义，<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代码文档中不同级别的内容。<h1>表示主标题（the main heading），<h2>表示子标题（subheadings），<h3>表示三级子标题（sub-subheadings）等，代码示例：

<h1>我是文章标题</h1>

编辑文档结构层次

（1）每个文档中最好只使用一次<h1>元素，这是顶级标题，其他等级标题位于该层次结构中的下方。
（2）依照标题等级次序使用标题元素。不要使用<h3>元素表示子标题、使用<h2>元素表示三级子标题，这样会使文档结构很奇怪。
（3）在可用的六个标题级别中，非必要情况下，每页仅推荐三个级别标题（不推荐使用较深的标题层次结构）。如果可能，建议将内容分散在多个页面上。

HTML 为什么需要结构化

（1）用户在浏览网页时，为了高效率地查找有用的信息，往往会快速浏览以查找相关内容，经常只是阅读开头的标题。
（2）搜索引擎将网页标题的内容作为决定网页搜索排名的一项重要依据。
（3）严重视力障碍者通常借助*屏幕阅读器（screen reader）*来听取网页内容，该软件通过朗读标题来提供文档的概述，以帮助用户能快速找到他们需要的信息。
（4）使用 CSS 和 JavaScript 来丰富页面内容时，需要包含相关内容的元素，以便 CSS 和 JavaScript 可以有效地定位。

HTML 为什么需要语义

**语义（semantics）**在我们的身边无处不在，我们依靠以前的经验来告诉我们日常用品的功能是什么；当我们看到一个东西，我们就知道它的功能是什么。例如，我们知道红色交通灯表示”停止“，绿色交通灯表示”通行“。如果运用了错误的语义，事情会变得非常棘手
同样的道理，我们应该确保使用了正确的元素来给予内容正确的含义、功能以及外观。在上文中，<h1>元素就是一个语义元素，它使得被它包裹的文本具有”页面上的顶级标题“的角色（或意义）。
之后，本文将讨论 HTML 中的语义元素（semantic elements）和表象元素（presentational elements）。

列表 Lists

列表的使用范围很广，其分为无序列表（unordered list，ul）和有序列表(ordered list，ol)。

无序列表 Unordered List

无序列表用于标记列表项目顺序无关紧要的列表，每份无序的清单由 <ul></ul> 元素进行包裹，然后用 <li></li> （list item）元素清单的项目单独包裹起来，代码示例：

<ul>
  <li