基本HTML结构

1. 编写 HTML5 页面开头的步骤：
   (1) 输入 ，声明页面为HTML5 文档。（关于 HTML 早期版本的相关信息，参见本节末尾的“改进后的 HTML5 DOCTYPE”。）
   (2) 输入 < html lang=“language-code”>，开始文档的实际 HTML 部分。其中，language-code 是页面内容默认语言的代码。例如，< html lang=“es”> 表示西班牙，< html lang=“fr”>表示法语。还可以写得更详细些，如 < html
   lang=“en-US”> 表示美国英语，而 则表示英国英语。
   (3) 输入 < head>，开始网页文档的头部。
   (4) 输入 < meta charset=“utf-8”/>（或 < meta charset=“UTF-8”/>）， 将 文 档 的 字 符 编 码声明为 UTF-8。空格和斜杠是可选的，因此< meta charset=“utf-8”> 跟其他表达式形式都是有效的。（UTF-8 以外的其他字符编码也是有效的，不过 UTF-8 的适用面最广，很少有需要用其他编码的情况。）
   (5) 输入 < title>< /title>。这里将包含页面的标题。
   (6) 输入 < /head>，结束页面文档的头部。
   (7) 输入 < body>，开始页面的主体。这里是放置页面内容的地方。
   (8) 为页面内容预留一些空行。
   (9) 输入 < /body>，结束主体。
   (10) 输入 < /html>，结束页面。

网页的两个部分：head 和 body。
在文档 head 部分，通常要指明页面标题，提供为搜索引擎准备的关于页面本身的信息，加载样式表，以及加载 JavaScript 文件（不过，出于性能考虑，多数时候在页面底部 < /body>标签结束前加载 JavaScript 是更好的选择）。随着进一步阅读本书，你会看到一些关于这些内容的例子。除了 title，其他 head 里的内容对页面访问者来说都是不可见的。body 元素包住页面的内容，包括文本、图像、表单、音频、视频以及其他交互式内容，也就是访问者看见的东西。

每个 HTML 页面都必须有一个 title 元素。每个页面的标题都应该是简短的、描述性的，而且是唯一的。

创建页面标题的步骤：
(1) 将光标放在文档 head 中的 < title> 和< /title> 之间。
(2) 输入网页的标题。

HTML 提供了六级标题用于创建页面信息的层级关系。使用 h1、h2、h3、h4、h5 或h6 元素对各级标题进行标记，其中 h1 是最高级别的标题，h2 是 h1 的子标题，h3 是 h2 的子标题，以此类推。

如果页面中有一块包含一组介绍性或导航性内容的区域，应该用 header 元素对其进行标记。
一个页面可以有任意数量的 header 元素，它们的含义可以根据其上下文而有所不同。例如，处于页面顶端或接近这个位置的header 可能代表整个页面的页眉（有时称为页头）。通常，页眉包括网站标志、主导航和其他全站链接，甚至搜索框。这无疑是 header 元素最常见的使用形式，不过不要误认为是唯一的形式。
创建页眉的步骤：
(1) 将光标放置在需要创建页眉的元素里。
(2) 输入 < header>。
(3) 输入页眉的内容，包括各种类型的内容，它们分别由各自的 HTML 元素进行标记。例如，header 可以包含 h1 ～ h6 标题、标识、导航、搜索框，等等。
(4) 输入 < /header>。

HTML 的早期版本没有元素明确表示主导航链接的区域，而 HTML5 则有这样一个元素，即 nav。nav 中的链接可以指向页面中的内容，也可以指向其他页面或资源，或者两者兼而有之。无论是哪种情况，应该仅对文档中重要的链接群使用 nav。
将一组链接指定为重要导航
(1) 输入 < nav>。
(2) 输入一组链接并将其标记为 ul（无序列表）结构，除非链接的顺序比较重要（例如面包屑导航）。如果链接顺序重要，就将其标记为 ol（有序列表）结构。
(3) 输入 < /nav>。

大多数网页都有一些不同的区块，如页眉、页脚、包含额外信息的附注栏、指向其他网站的链接，等等。不过，一个页面只有一个部分代表其主要内容。可以将这样的内容包在 main 元素中，该元素在一个页面仅使用一次。

创建文章的步骤
(1) 输入 < article>。
(2) 输入文章的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
(3) 输入 < /article>。

section 元素代表文档或应用的一个一般的区块。在这里，section是具有相似主题的一组内容，通常包含一个标题。
section 的例子包含章节、标签式对话框中的各种标签页、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。
尽管我们将 section 定义成“通用的”区块，但不要将它与div元素混淆。从语义上讲，section 标记的是页面中的特定区域，而 div 则不传达任何语义。

定义区块的步骤：
(1) 输入 < section>。
(2) 输入区块的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
(3) 输入 < /section>。

使用 aside 的例子还包括重要引述、侧栏、指向相关文章的一组链接（通常针对新闻网站）、广告、nav 元素组（如博客的友情链接），Twitter 源、相关产品列表（通常针对电子商务网站），等等。尽管我们很容易将 aside 元素看做侧栏，但该元素其实可以用在页面的很多地方，具体依上下文而定。如果 aside 嵌套在页面主要内容内（而不是作为侧栏位于主要内容之外），
则其中的内容应与其所在的内容密切相关，而不是仅与页面整体内容相关。

指定附注栏的步骤：
(1) 输入 < aside>。
(2) 输入附注栏的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
(3) 输入 < /aside>。

创建页脚的步骤：
(1) 将光标放在希望创建页脚的元素里。
(2) 输入 < footer>。
(3) 输入页脚的内容。
(4) 输入 < /footer>。

有时需要在一段内容外围包一个容器，从而可以为其应用 CSS 样式或 JavaScript 效果。如果没有这个容器，页面就会不一样。在评估内容的候，考虑使用article、section、aside、nav 等元素，却发现它们从语义上讲都不合适。这时，你真正需要的是一个通用容器，一个完全没有任何语义含义的容器。这个容器就是 div（来自 division 一词）元素。有了 div，就可以为其添加样式或 JavaScript 效果了。

地标角色可以帮助用户识别页面区域，从而让屏幕阅读器用户可以直接跳到这些区域。通常，对这些区域指定 role 属性就可以了。

尽管并非必需，但是可以给 HTML 元素分配唯一的标识符（ID），或指定其属于某个（或某几个）类别，也可以同时指定标识符和类别。

1. 为元素添加唯一的 ID
   在元素的开始标签中输入 id=“name”，其中name 是唯一标识该元素的名称。name 几乎可以是任何字符，只要不以数字开头且不包含空格。
2. 为元素指定类别的方法
   在元素的开始标签中输入class=“name”，其中 name 是类别的名称。如果要指定多个类别，用空格将不同的类别名称分开即可，如 class=“name anothername”。（可以指定两个以上的类别名称。）

可以使用 title 属性（不要与 title 元素混淆）为网站上任何部分加上提示标签。不过，它们并不只是提示标签，加上它们之后屏幕阅读器可以为用户朗读 title 文本，因此使用 title 可以提升无障碍访问功能。

在 HTML 页面中添加注释的步骤
(1) 在 HTML 文档中希望插入注释的位置，输入 < !–。
(2) 输入注释。
(3) 输入 --> 结束注释文本。