HTML5与CSS3基础教程学习笔记【第三章基本HTML结构】

Luminous烁

已于 2022-07-05 15:18:20 修改

阅读量628

点赞数

分类专栏： html5 文章标签： css html html5

于 2022-07-05 15:08:08 首次发布

本文链接：https://blog.csdn.net/kzpx_1106/article/details/125617897

版权

html5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

第三章基本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) 输入 <!DOCTYPE html>，声明页面为HTML5 文档。（关于 HTML 早期版本的相关信息，参见本节末尾的“改进后的 HTML5 DOCTYPE”。）
(2) 输入 <html lang="language-code">，
开始文档的实际 HTML 部分。其中，language-code 是页面内容默认语言的代码。例如，<html lang="es"> 表示西班牙，<html lang="fr">表示法语。还可以写得更详细些，如 <html lang="en-US"> 表示美国英语，而 <html lang="en-GB"> 则表示英国英语。
(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>，结束页面。
步骤似乎有点多，不过，由于所有的页面都是这样开始编写的，可以使用一个单独的 HTML 页面作为创建每个页面的模板，以节省输入的时间。实际上，很多代码编辑器都可以为新页面指定初始的代码，这样就更简单了。
2.网页的两个部分：head 和 body
HTML页面分为两个部分：head 和 body。DOCTYPE 出现在每个页面的开头，就像一本书的序言。在文档 head 部分，通常要指明页面标题，提供为搜索引擎准备的关于页面本身的信息，加载样式表，以及加载 JavaScript 文件（不过，出于性能考虑，多数时候在页面底部 </body>标签结束前加载 JavaScript 是更好的选择）。
除了 title，其他 head 里的内容对页面访问者来说都是不可见的。body 元素包住页面的内容，包括文本、图像、表单、音频、视频以及其他交互式内容，也就是访问者看见的东西。
示要确保将你的代码编辑器配置为以 UTF-8 保存文件，与代码中通过 <meta charset="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 中的 <title> 和</title> 之间。
(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 部分，输入 <hn>，其中 n 是 1 ～ 6 的数字，此数字取决于要创建的标题的级别。h1 是最重要的标题，而 h6则是最不重要的标题。
(2) 输入标题的内容。
(3) 输入 </hn>，其中 <n> 是与第 (1) 步中相同的数字。
在默认情况下，浏览器会从 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) 输入 <header>。
(3) 输入页眉的内容，包括各种类型的内容，它们分别由各自的 HTML 元素进行标记。例如，header 可以包含 h1 ～ h6 标题、标识、导航、搜索框，等等。
(4) 输入 </header>。
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>

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) 输入 <article>。
(2) 输入文章的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
(3) 输入 </article>。

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) 输入 <section>。
(2) 输入区块的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
(3) 输入 </section>。

3.10指定附注栏

有时候，页面中有一部分内容与主体内容相关性没有那么强，但可以独立存在，如何在语义上表示出来呢？
在 HTML5 之前一直无法显式地做到这一点。在 HTML5 中，我们有了 aside 元素。使用 aside 的例子还包括重要引述、侧栏、指向相关文章的一组链接（通常针对新闻网站）、广告、nav 元素组（如博客的友情链接），Twitter 源、相关产品列表（通常针对电子商务网站），等等。
尽管我们很容易将 aside 元素看做侧栏，但该元素其实可以用在页面的很多地方，具体依上下文而定。如果 aside 嵌套在页面主要内容内（而不是作为侧栏位于主要内容之外），则其中的内容应与其所在的内容密切相关，而不是仅与页面整体内容相关。“其他 aside的例子”中的例 1 就是这样的。
指定附注栏的步骤
(1) 输入 <aside>。
(2) 输入附注栏的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
(3) 输入 </aside>。提示在 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) 输入 <footer>。
(3) 输入页脚的内容。
(4) 输入 </footer>。

...
<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>&copy; 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>&copy; Copyright All About 
➝ Gaudí</small></p>
 </footer>
</div>
</body>
</html>

现在有一个 div 包着所有的内容。页面的语义没有发生改变，但现在我们有了一个可以用CSS 添加样式的通用容器。
创建通用容器的步骤
(1) 输入 <div>。
(2) 创建容器的内容，内容可以包含任意数量的元素。
(3) 在容器的结尾处输入 </div>。
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 文档中希望插入注释的位置，输入  结束注释文本。