HTML5与CSS3基础教程学习笔记【第三章 基本HTML结构】
第三章 基本HTML结构
- 前言
- 3.1开始编写网页
- 3.2创建页面标题
- 3.3创建分级标题
- 3.4普通页面构成
- 3.5创建页眉
- 3.6标记导航
- 3.7标记页面的主要区域
- 3.8创建文章
- 3.9定义区块
- 3.10指定附注栏
- 3.11创建页脚
- 3.12创建通用容器
- 3.13为元素指定类别或 ID 名称
- 3.14为元素添加 title 属性
- 3.15添加注释
前言
本章讨论的是构建文档基础和结构所需的HTML元素，即网页内容主要的语义化容器。创建清晰、一致的结构不仅可以为页面建立良好的语义化基础，也可以大大降低在文档中应用层叠样式表（CSS）的难度。
3.1开始编写网页
每个 HTML 文档都应该包含以下基本成分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
这是每个 HTML 页面的基础。缩进并不重要，但结构很重要。在这个例子中，默认语言（由lang 属性指定）被设为代表英语的 en。字符编码被设为 UTF-8。
- DOCTYPE
- html 元素（包含 lang 属性，该属性不是必需的，但推荐加上）
- head 元素
- 说明字符编码的 meta 元素
- title 元素
- body 元素
这份 HTML 等同于一张空白的纸，因为body 里面没有任何内容。
在添加任何内容或其他信息之前，需要先建立起页面的基础。
1. 编写 HTML5 页面开头的步骤
(1) 输入 ，声明页面为HTML5 文档。（关于 HTML 早期版本的相关信息，参见本节末尾的“改进后的 HTML5 DOCTYPE”。）
(2) 输入 ，
开始文档的实际 HTML 部分。其中，language-code 是页面内容默认语言的代码。例如， 表示西班牙，表示法语。还可以写得更详细些，如 表示美国英语，而 则表示英国英语。
(3) 输入 ，开始网页文档的头部。
(4) 输入 （或 ）， 将文档的字符编码声明为 UTF-8。空格和斜杠是可选的，因此 跟其他表达式形式都是有效的。（UTF-8 以外的其他字符编码也是有效的，不过 UTF-8 的适用面最广，很少有需要用其他编码的情况。）
(5) 输入
(6) 输入 ，结束页面文档的头部。
(7) 输入 ，开始页面的主体。这里是放置页面内容的地方。
(8) 为页面内容预留一些空行。
(9) 输入 ，结束主体。
(10) 输入 ，结束页面。
步骤似乎有点多，不过，由于所有的页面都是这样开始编写的，可以使用一个单独的 HTML 页面作为创建每个页面的模板，以节省输入的时间。实际上，很多代码编辑器都可以为新页面指定初始的代码，这样就更简单了。
2.网页的两个部分：head 和 body
HTML页面分为两个部分：head 和 body。DOCTYPE 出现在每个页面的开头，就像一本书的序言。在文档 head 部分，通常要指明页面标题，提供为搜索引擎准备的关于页面本身的信息，加载样式表，以及加载 JavaScript 文件（不过，出于性能考虑，多数时候在页面底部 标签结束前加载 JavaScript 是更好的选择）。
除了 title，其他 head 里的内容对页面访问者来说都是不可见的。body 元素包住页面的内容，包括文本、图像、表单、音频、视频以及其他交互式内容，也就是访问者看见的东西。
示 要 确 保 将 你 的 代 码 编 辑 器 配 置 为以 UTF-8 保 存 文 件， 与 代 码 中 通 过 语句指定的编码相同。（如果指定了另一种编码，就按那种编码保存文件。）如果页面没有设置为 UTF-8，有的字母（如带重音符的 i、带波形符（～）的 n）就会变成一些奇怪的字符。
3.2创建页面标题
3.1 节 HTML 基础代码中 仅为占位符，现在开始讨论 title 元素。
每个 HTML 页面都必须有一个 title 元素。每个页面的标题都应该是简短的、描述性的，而且是唯一的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Antoni Gaudí - Introduction
➝ </title>
</head>
<body>
</body>
</html>
title 元素必须位于 head 部分，将它放置在指定字符编码的 meta 元素后面。
创建页面标题的步骤
(1) 将光标放在文档 head 中的
(2) 输入网页的标题。
title 元素是必需的。title 中不能包含任何格式、HTML、图像或指向其他页面的链接。
3.3创建分级标题
HTML 提供了六级标题用于创建页面信息的层级关系。使用 h1、h2、h3、h4、h5 或h6 元素对各级标题进行标记，其中 h1 是最高级别的标题，h2 是 h1 的子标题，h3 是 h2 的子标题，以此类推。为简洁起见，本书使用h1 ～ h6 表示这些元素，不再逐一列出。为了理解 h1 ～ h6 标题，可以将它们比作学期论文、销售报告、新闻报道、产品手册等非 HTML 文档里的标题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Antoni Gaudí - Introduction
➝ </title>
</head>
<body>
<h1>Barcelona's Architect</h1>
<h2 lang="es">La Sagrada Família</h2>
<h2>Park Guell</h2>
</body>
</html>
1. 分级标题的重要性
对任何页面来说，分级标题都可以说是最重要的 HTML 元素。由于标题通常传达的是页面的主题，因此，对搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重，尤其是等级最高的 h1。
...
<body>
<h1>Product User Guide</h1>
<h2>Setting it up</h2>
<h2>Basic Features</h2>
<h3>Video Playback</h3>
<h4>Basic Controls</h4>
<h4>Jumping to Markers</h4>
<h3>Recording Video</h3>
<h4>Manual Recording</h4>
<h4>Scheduling a Recording</h4>
<h2>Advanced Features</h2>
<h3>Sharing Video</h3>
<h3>Compressing Video</h3>
</body>
</html>
在这个例子中，产品指南有三个主要的部分，每个部分都有不同层级的子标题。标题之间的空格和缩进只是为了让层级关系更清楚一些，它们不会影响最终的显示效果。在实践中我通常不会添加这样的空格和缩进。
2. 使用标题对网页进行组织的步骤
(1) 在 HTML 的 body 部分，输入
(2) 输入标题的内容。
(3) 输入 ，其中
在默认情况下，浏览器会从 h1 到 h6逐级减小标题的字号，不过别忘了要依据内容所处的层次关系选择标题级数，而不是根据你希望文字应该显示的大小。可
以按照你希望的样子为标题添加样式，包括字体、字号、颜色等。
3.4普通页面构成
页面有四个主要组件：带导航的页头、显示在主体内容区域的文章、显示次要信息的附注栏以及页脚。
一个普通的布局，顶部是主导航，左侧是主要内容，右侧是附注栏，底部是页脚。要让页面成为这个样子，需要添加 CSS。
3.5创建页眉
如果页面中有一块包含一组介绍性或导航性内容的区域，应该用 header 元素对其进行标记。一个页面可以有任意数量的 header 元素，它们的含义可以根据其上下文而有所不同。例如，处于页面顶端或接近这个位置的header 可能代表整个页面的页眉（有时称为页头）。通常，页眉包括网站标志、主导航和其他全站链接，甚至搜索框。这无疑是 header 元素最常见的使用形式，不过不要误认为是唯一的形式。
...
<body>
<header role="banner">
<nav>
<ul>
<li><a href="#gaudi">Barcelona's
➝ Architect</a></li>
<li lang="es"><a href="#sagrada-
➝ familia">La Sagrada Família</a>
➝ </li>
<li><a href="#park-guell">Park
➝ Guell</a></li>
</ul>
</nav>
</header>
</body>
</html>
这个 header 代表整个页面的页眉。它包含一组代表整个页面主导航的链接（在 nav 元素中）。可选的role="banner"并不适用于所有的页眉。它显式地指出该页眉为页面级的页眉，因此可以提高可访问性。
header 也很适合对页面深处的一组介绍性或导航性内容进行标记。例如，一个区块的目录，header 通常包含其自身的标题（h1 ～h6），但这并不是强制性的。
创建页眉的步骤
(1)将光标放置在需要创建页眉的元素里。
(2) 输入
(3) 输入页眉的内容，包括各种类型的内容，它们分别由各自的 HTML 元素进行标记。例如，header 可以包含 h1 ～ h6 标题、标识、导航、搜索框，等等。
(4) 输入 。
header 不一定要像示例那样包含一个nav 元素，不过在大多数情况下，如果 header 包含导航性链接，就可以用 nav。
3.6标记导航
HTML 的早期版本没有元素明确表示主导航链接的区域，而 HTML5 则有这样一个元素，即 nav。nav 中的链接可以指向页面中的内容，也可以指向其他页面或资源，或者两者兼而有之。无论是哪种情况，应该仅对文档中重要的链接群使用 nav。
...
<body>
<header role="banner">
<nav role="navigation">
<ul>
<li><a href="#gaudi">Barcelona's
➝ Architect</a></li>
<li lang="es"><a href="#sagrada-
➝ familia">La Sagrada Família</a>
➝ </li>
<li><a href="#park-guell">Park
➝ Guell</a></li>
</ul>
</nav>
</header>
</body>
</html>
main元素包围着代表页面主题的内容。最好在 main 开始标签中加上 role=“main”，main 元素是 HTML5 新添加的元素。记住，在一个页面里仅使用一次。不能将 main 放置在 article、aside、footer、header 或 nav 元素中。
3.7标记页面的主要区域
大多数网页都有一些不同的区块，如页眉、页脚、包含额外信息的附注栏、指向其他网站的链接，等等。不过，一个页面只有一个部分代表其主要内容。可以将这样的内容包在 main 元素中，该元素在一个页面仅使用一次。
...
<body>
<header role="banner">
<nav role="navigation">
... [包含多个链接的ul] ...
</nav>
</header>
<main role="main">
<article>
<h1 id="gaudi">Barcelona's Architect
➝ </h1>
<p>Antoni Gaudí's incredible
➝ buildings bring millions ...</p>
... [页面主要区域的其他内容] ...
</article>
</main>
<aside role="complementary">
<h1>Architectural Wonders of Barcelona
➝ </h1>
... [附注栏的其他内容] ...
</aside>
<footer role="contentinfo">
... [版权] ...
</footer>
</body>
</html>
main元素包围着代表页面主题的内容。最好在 main 开始标签中加上 role=“main”，main 元素是 HTML5 新添加的元素。记住，在一个页面里仅使用一次。不能将 main 放置在 article、aside、footer、header 或 nav 元素中。
3.8创建文章
HTML5 的另一个新元素便是 article，下面展示该元素的示例。
<body>
<header role="banner">
<nav role="navigation">
... [包含多个链接的ul] ...
</nav>
</header>
<main role="main">
<article>
<h1 id="gaudi">Barcelona's Architect
➝ </h1>
<p>Antoni Gaudí's incredible buildings
➝ bring millions of tourists to
➝ Barcelona each year.</p>
<p>Gaudí's non-conformity, already
➝ visible in his teenage years,
➝ coupled with his quiet but firm
➝ devotion to the church, made a
➝ unique foundation for his thoughts
➝ and ideas. His search for simplicity ➝...is quite apparent in his work,
➝ from the <a href="#park-guell">Park
➝ Guell</a> and its incredible
➝ sculptures and mosaics, to...</p>
<h2 id="sagrada-familia" lang="es">
➝ La Sagrada Família</h2>
<p><img src="img/towers.jpg"
➝ width="75" height="100" alt="Sagrada
➝ Família Towers" /> The
➝ complicatedly named and curiously
➝ unfinished masterpiece...</p>
<h2 id="park-guell">Park Guell</h2>
... [图像和段落] ...
</article>
</main>
</body>
</html>
HTML5 对该元素的定义如下：
article 元素表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，就像聚合内容中的各部分。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交的评论、一个交互式的小部件或小工具，或者任何其他独立的内容项。其他 article 的例子包括电影或音乐评论、案例研究、产品描述，等等。你或许惊讶于它还可以是交互式的小部件或小工具，不过这些确实是独立的、可再分配的内容项。
创建文章的步骤
(1) 输入 。
(2) 输入文章的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
(3) 输入 。
3.9定义区块
另一个 HTML5 的新元素是 section。HTML5 对该元素的部分定义如下：
section 元素代表文档或应用的一个一般的区块。在这里，section是具有相似主题的一组内容，通常包含一个标题。section 的例子包含章节、标签式对话框中的各种标签页、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。
尽管我们将 section 定义成“通用的”区块，但不要将它与div元素混淆。从语义上讲，section 标记的是页面中的特定区域，而 div 则不传达任何语义。
...
<body>
...
<main role="main">
<h1>Latest World News</h1>
<section>
<h2>Breaking News</h2>
<ul>... [标题列表] ...</ul>
</section>
<section>
<h2>Business</h2>
<ul>... [标题列表] ...</ul>
</section>
<section>
<h2>Arts</h2>
<ul>... [标题列表] ...</ul>
</section>
</main>
...
</body>
</html>
几乎任何新闻网站都会对新闻进行分类。每个类别都可以标记为一个 section
...
<h1>Graduation Program</h1>
<section>
<h2>Ceremony</h2>
<ol>
<li>Opening Procession</li>
<li>Speech by Valedictorian</li>
<li>Speech by Class President</li>
...
</ol>
</section>
<section>
<h2>Graduates (alphabetical)</h2>
<ol>
<li>Molly Carpenter</li>
...
</ol>
</section>
...
这个例子是在 HTML5 规范中一个例子的基础上修改而成的，其中，section 元素用于标记一次毕业活动安排中的不同部分。
跟本章很多其他的元素一样，section 并不影响页面的显示。这里用数字编号展示各个条目是因为使用了有序列表（ol）。
定义区块的步骤
(1) 输入 。
(2) 输入区块的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
(3) 输入 。
3.10指定附注栏
有时候，页面中有一部分内容与主体内容相关性没有那么强，但可以独立存在，如何在语义上表示出来呢？
在 HTML5 之前一直无法显式地做到这一点。在 HTML5 中，我们有了 aside 元素。使用 aside 的例子还包括重要引述、侧栏、指向相关文章的一组链接（通常针对新闻网站）、广告、nav 元素组（如博客的友情链接），Twitter 源、相关产品列表（通常针对电子商务网站），等等。
尽管我们很容易将 aside 元素看做侧栏，但该元素其实可以用在页面的很多地方，具体依上下文而定。如果 aside 嵌套在页面主要内容内（而不是作为侧栏位于主要内容之外），则其中的内容应与其所在的内容密切相关，而不是仅与页面整体内容相关。“其他 aside的例子”中的例 1 就是这样的。
指定附注栏的步骤
(1) 输入 。
(2) 输入附注栏的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
(3) 输入 。 提 示 在 HTML 中，应该将附注栏内容放在 main 的内容之后。出于 SEO和可访问性的目的，最好将重要的内容放在前面。可以通过 CSS 改变它们在浏览器中的显示顺序。提 示 对于与内容有关的图像（如图表、图形或带有说明文字的插图），使用 figure。而非 aside。 提 示 HTML5 不允许将 aside 嵌套在 address元素内。
3.11创建页脚
当你想到页脚的时候，你大概想的是页面底部的页脚（通常包括版权声明，可能还包括指向隐私政策页面的链接以及其他类似的内容）。HTML5 的 footer 元素可以用在这样的地方，但它同 header 一样，还可以用在其他的地方。
footer元素代表嵌套它的最近的article、aside、blockquote、body、details、
fieldset、figure、nav、section 或 td 元 素的页脚。只有当它最近的祖先是 body 时，它才是整个页面的页脚。如果一个 footer 包着它所在区块（如一个 article）的所有内容，它代表的是像附录、索引、版权页、许可协议这样的内容。
创建页脚的步骤
(1) 将光标放在希望创建页脚的元素里。
(2) 输入 。
(3) 输入页脚的内容。
(4) 输入 。
...
<body>
<header role="banner">
<nav role="navigation">
... [包含链接的无序列表] ...
</nav>
</header>
<main role="main">
<article>
<h1 id="gaudi">Barcelona's Architect
➝ </h1>
... [文章的其他部分] ...
<h2 id="sagrada-familia" lang="es">
➝ La Sagrada Família</h2>
... [图像和段落] ...
<h2 id="park-guell">Park Guell</h2>
... [其他图像和段落] ...
</article>
</main>
<aside role="complementary">
<h1>Architectural Wonders of Barcelona
➝ </h1>
... [附注栏的其他部分] ...
</aside>
<footer>
<p><small>© Copyright All About
➝ Gaudí</small></p>
</footer>
</body>
</html>
这个 footer 代表整个页面的页脚，因为它最近的祖先是 body 元素。现在，页面有了header、nav、main、article、aside 和 footer 元素。并非每个页面都需要以上所有元素，但它们确实代表了 HTML 中的主要页面构成要素。
3.12创建通用容器
有时需要在一段内容外围包一个容器，从而可以为其应用 CSS 样式或 JavaScript 效果。如果没有这个容器，页面就会不一样。在评估内容的时候，考虑使用article、section、aside、nav 等元素，却发现它们从语义上讲都不合适。这时，你真正需要的是一个通用容器，一个完全没有任何语义含义的容器。这个容器就是 div（来自 division 一词）元素。有了 div，就可以为其添加样式或 JavaScript 效果了。
...
<body>
<div>
<header role="banner">
<nav role="navigation">
... [包含多个链接的无序列表] ...
</nav>
</header>
<main role="main">
<article>
<h1 id="gaudi">Barcelona's
➝ Architect</h1>
... [文章的其余内容] ...
<h2 id="sagrada-familia" lang="es">
➝ La Sagrada Família</h2>
... [图像和段落] ...
<h2 id="park-guell">Park Guell</h2>
... [另一个图像和段落] ...
</article>
</main>
<aside role="complementary">
<h1>Architectural Wonders of
➝ Barcelona</h1>
... [aside的其余内容] ...
</aside>
<footer role="contentinfo">
<p><small>© Copyright All About
➝ Gaudí</small></p>
</footer>
</div>
</body>
</html>
现在有一个 div 包着所有的内容。页面的语义没有发生改变，但现在我们有了一个可以用CSS 添加样式的通用容器。
创建通用容器的步骤
(1) 输入
(2) 创建容器的内容，内容可以包含任意数量的元素。
(3) 在容器的结尾处输入
div 对使用 JavaScript 实现一些特定的交互行为或效果也是有帮助的。例如，在
页面中展示一张照片或一个对话框，同时让背景页面覆盖一个半透明的层（这个层通常是一个 div）。
3.13为元素指定类别或 ID 名称
尽管并非必需，但是可以给 HTML 元素分配唯一的标识符（ID），或指定其属于某个（或某几个）类别，也可以同时指定标识符和类别。接着，就可以对具有给定 id 或 class 名称的元素添加样式了（但一般不推荐出于添加样式的目的使用id）；或者创建指向具有特定 id 的元素的链接；还可以使用 JavaScript 获取 id 和 class 属性，从而对元素添加特定的行为。
1. 为元素添加唯一的 ID
在元素的开始标签中输入 id=“name”，其中name 是唯一标识该元素的名称
name 几乎可以是任何字符，只要不以数字开头且不包含空格。
2. 为元素指定类别的方法
在元素的开始标签中输入class=“name”，其中 name 是类别的名称。如果要指定多个类别，用空格将不同的类别名称分开即可，如 class=“name anothername”。（可以指定两个以上的类别名称。）
3.14为元素添加 title 属性
可以使用 title 属性（不要与 title 元素混淆）为网站上任何部分加上提示标签。不过，它们并不只是提示标签，加上它们之后屏幕阅读器可以为用户朗读 title 文本，因此使用 title 可以提升无障碍访问功能。
<ul title="Table of Contents">
<li><a href="#gaudi" title="Learn about
➝ Antoni Gaudí">Barcelona's Architect
➝ </a></li>
<li><a href="#sagrada-familia" lang="es">
➝ La Sagrada Família</a></li>
<li><a href="#park-guell">Park Guell</a>
➝ </li>
</ul>
...
</body>
</html>
可以为任何元素添加 title，不过用的最多的是链接。在网页中为元素添加标签
在要添加 title 的 HTML 元素中，输入title=“label”，其中 label 是访问者将鼠标
移到这个元素上时希望出现在提示框里的文本，或者希望由屏幕阅读器朗读的文本。
3.15添加注释
可以在 HTML 文档中添加注释，标明区块开始和结束的位置，提醒自己（或未来的代码编辑者）某段代码的意图，或者阻止内容显示等。这些注释只会在用文本编辑器或浏览器的“查看源代码”选项打开文档时显示出来。访问者在浏览器中是看不到它们的。
...
<!-- ==== 开始主体内容 ==== -->
<main role="main">
<article class="architect">
<h1 id="gaudi">Barcelona's Architect
➝ </h1>
<!-- 这一段不会显示出来，因为它被注释
➝ 掉了
<p>Antoni Gaudí's incredible
➝ buildings bring millions of
➝ tourists to Barcelona each year.
➝ </p>
-->
<p>Gaudí's non-conformity, already
➝ visible in his teenage years...</p>
...
</article>
</main>
<!-- 结束主体内容 -->
<!-- ==== 开始附注栏 ==== -->
... [附注栏内容] ...
<!-- 结束附注栏 -->
...
这段示例代码包括五个注释。其中有四个一起标记了两个区块的开始和结束置。另一个“注释掉”了第一段，这样它就不会显示在页面中（如果希望永久性地移除该段，最好将它从 HTML中删除）。
HTML 页面中添加注释的步骤
(1) 在 HTML 文档中希望插入注释的位置，输入 结束注释文本。