书籍信息
今天我们要读的书是《HTML5与CSS3基础教程》(第9版)，是一本Web前端开发入门级别的书籍。它的作者是(美)乔·卡萨博纳(Joe Casabona)，译者是望以文。
内容提要：本书系统地讲解了HTML5和CSS3基础知识以及实际运用技术，通过大量实例深入浅出地分析网页制作的方方面面。书中不仅介绍了文本、链接、媒体、表格、列表、表单等网页元素，而且介绍了如何为网页设计布局，添加动态效果等；另外，还涉及上线、测试、优化和无障碍性等内容。通过学习本书，初级水平的读者即可创建网站，而中高级水平的开发人员也可以快速了解HTML5新元素、CSS3的奇幻效果、响应式Web设计以及各种最佳实践。
第1章 什么是HTML和CSS
1.1 什么是HTML
HTML是 超文本标记语言（hypertext markup language）的简称。
HTML主要负责处理两件事情：
描述网页是什么样（结构）的，以及定义这些页面的语义。
什么是标记语言？
实际上，网站是由很多不同的部分构成的。
各种各样的数据（不止于文本，超文本）——文本、图像、音频视频以及可下载的媒体——都是网站的组成部分。这些文件——网站的每个组成部分——都存放在服务器上，供用户访问。
从服务器访问网站就像订外卖一样。你从喜欢的餐厅订餐（通过互联网发送请求），厨房工作人员（服务器）选择你订购的餐食，然后送货员（再次通过互联网）将食物（网站的文件）送到你家门口（你的计算机）。
所有这些数据都以人可以理解的方式呈现在浏览器之中。
由于人和计算机读取数据的方式并不相同，因此需要用某种方法来告诉计算机如何以结构化的方式呈现数据（即渲染），从而让人可以理解。
服务器发送给你的除了原始数据文件，还带有一个或多个用HTML编写的文件。延续上面外卖的类比，你可以将HTML文件想象成便当盒。它充当容器，从而井井有条地存放各种类型的数据，并以一定的排列方式呈现。
这就是标记的由来。HTML文件就是由一些特殊代码标记的文本文件，正是这些特殊的代码告诉浏览器如何在屏幕上显示从服务器接收的数据。HTML标记是嵌在文本里的一系列文本标签，用于告诉计算机（主要是指浏览器）网站的外观是怎样的（结构是怎样的，文本、图片等是如何摆放的）。
因此，语义非常重要，因为它为这些标签（也成为元素）赋予含义。例如，有一个<h1></h1>（表示一级标题）HTML元素，它告诉浏览器和搜索引擎其包含的文本是一个标题——不是一般的标题，而是最重要的标题。
虽然你可以将一堆纯文本放入文件中并在浏览器中打开它，但这些文本是没有结构和含义的。这样的文本将全部一起呈现，没有视觉层次，只是一团文字。
在一个简单的Word文档中，你可以看到几个不同大小的标题、几个有所分隔的段落以及一些格式为粗体或斜体的文本。
这种视觉上的层级结构能让读者快速地理解如何处理这些文本——哪些地方代表一个新的区块，文本的重点在哪里，等等。在Word中，你可以使用“样式”窗格执行此类操作；在网页里则是通过将HTML标签添加到HTML文件来实现的。
1.1.1 创建简单的HTML层级结构
（1）打开windows上的记事本，或者Mac上的TextEdit。
（2）输入以下代码：
<h1>Bigger Headings are more important（标题越大越重要）</h1> <h2>This is smaller（这个小一点）</h2> <h3>This is smaller still（这个更小）</h3> <p>This is body copy,and is most common.（这是正文，也是最常见的。）</p>
（3）保存为hierarchy.html（层次体系.html）
（4）双击该文件，在浏览器中打开。 效果如下：
1.1.2 当前的版本：HTML5
HTML的当前版本是HTML5。这一版本引入了很多新元素，并简化了很多标记（标签/元素）。
刚刚进入HTML的奇妙世界，直接使用HTML5便意味着拥有了大量出色的功能，并且这些功能得到了很好的支持。同时，要知道，HTML5是向后兼容的，它的大多数功能是对新旧浏览器都是有效的。
“向后兼容”——
backward compatibility (向后兼容) = downward compatibility (向下兼容) 也就是向过去兼容，即现在设计的软件要考虑旧版本的数据还能不能用。
向后兼容：Windows 10要能运行为Windows 3.1开发的程序
forward compatibility (向前兼容) = upward compatibility (向上兼容) 也就是向未来兼容，即现在设计的软件要考虑未来还能不能用。
向前兼容：Windows 3.1要能运行为Windows 10开发的程序
原文链接：https://blog.csdn.net/qq_41800366/article/details/107470514
好在浏览器对HTML的版本甚至标记中的错误都相当包容，因此不必担心由于代码错误导致页面完全错乱。
1.2 什么是CSS
如果说HTML提供了网页的结构，那么CSS便提供了样式。
从名字就可以看出，CSS是层叠样式表（cascading style sheet）的简称，
用于描述网页的外观——规定颜色、字体、间距等。
HTML使用标记，而CSS则使用规则集（ruleset）。规则集是像如下所示的代码：
h1 { color: black; font-size:30px; }
CSS禅意花园网站：
CSS Zen Garden: The Beauty of CSS Design
CSS Zen Garden是展示CSS工作原理的一个很棒的网站。可以访问该网站，观看到在保持HTML标记不变的情况下，仅通过更改CSS来改变页面的外观。
虽然浏览器自身通常提供了一些默认样式，
——在浏览器中可看到浏览器自身默认给h1元素设置的样式（ user agent stylesheet用户代理样式表）
但是我们可以很容易地使用自己的样式来覆盖它们，也就是使用被称作样式表（style sheet）的CSS文件。
当前版本：CSS3
CSS的当前版本是CSS3。随着浏览器和计算机变得越来越强大，CSS也在不断发展。
使用CSS3，可以拥有动画功能、更多视觉效果以及对布局功能（如列和网格）更好的支持。
动画
加载动画
布局（瀑布流）
同HTML相比，CSS3对浏览器支持情况的依赖程度更高。对于HTML，如果浏览器遇到不支持的标签，就会将其当作纯文本来处理，因此其呈现仍然是正常的。但是旧的浏览器可能不支持CSS3中较新的功能，这时页面的外观就会受到较大影响。
Can I use?网站:
Can I use... Support tables for HTML5, CSS3, etc
前端开发的时候时常需要检查浏览器的兼容性，(Can I Use)是一个针对前端开发人员定制的一个查询CS、JS在各流行浏览器中的特性和兼容性的网站，可以很好的保证网页的浏览器兼容性。有了这个工具可以快速地了解到代码在各个浏览器中的效果。
1.3 HTML和CSS是如何一起工作的
尽管HTML和CSS对网站来说功能定位不同，但它们在学习材料里面往往是合在一起讲解的。
这是因为它们是制作现代网站所必须的两种核心语言。尽管从技术角度看，仅有HTML就可以构成网页，但没有CSS的话，得到的只是一个非常平淡的网站，看起来就像Word文档一样。
没有CSS的京东网页
带有CSS的京东网页
激动人心的时代
由于HTML5与CSS3之间的协同作用，我们生活在一个非常激动人心的网站构建时代。
一些功能得到了原生支持，HTML的语义化程度和无障碍性也越来越高。
——扩展
1.概念:
HTML5语义化
是指，合理地使用语义化的标签来创建网页页面结构。【用正确的标签做正确的事】
2.HTML5新增语义化标签：
header nav article section aside footer……
<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
3.语义化的优点:
（1）（用户）在没有CSS样式的情况下，页面整体也会呈现很好的结构效果
（2）（开发人员）代码结构清晰，易于阅读（更有阅读性），利于团队开发和维护
（3）（设备）方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
（4）（搜索引擎）有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重。
这意味着更多残障人士（盲人）可以访问和使用网站，搜索引擎可以获得更多有用的信息，网站的加载速度变得更快。
1.4 小结
经常将HTML和CSS放在一起讨论的另一个原因是，它们都是由用户的浏览器处理的。其它Web技术、程序和应用则不是这样的——有的是由服务器处理的，有的是在开发人员的计算机处理完再导出的。HTML和CSS的定位则比较独特，因为用户可以直接通过浏览器访问其源代码。
第2章 在计算机上创建网站
在计算机上创建网站，需要三样东西：
- 文本编辑器；
- 文件夹结构；
- Web浏览器。
2.1 使用文本编辑器
文本编辑器指的是计算机上用来编写纯文本（即没有任何格式的文本）的应用程序。在Windows上，记事本可以扮演这个角色，而macOS则附带了TextEdit。
注意：TextEdit允许添加简单格式，所以如果使用TextEdit，务必以纯文本格式保存文件，并让文件名以.html为扩展名，而不要以默认的RTF（.rtf）保存文件。
创建一个新网页
在windows上打开记事本，或在macOS上打开TextEdit。输入以下代码：
<html> <head> </head> <body> </body> </html>
将文件保存为index.html
2.2 使用高级工具
有很多专门用于编写代码和标记的高级工具。它们通常具有以下特性：
- 语法高亮（synax highlighting），让代码更易于阅读；
- 自动补全（autocompletion），更爽快地编写代码；
- 实时编译（real-time compiling）；
- 错误检查（error checking）；
- 版本控制（version control）；
一些强大的文本编辑器便属于这样的高级工具，如仅适用于windows的Notepad++，以及跨平台的Atom和Visual Studio Code（简称VS Code）
集成开发环境（integrated development environment，IDE）也属于这样的高级工具，它们内置了整套工具。适用于Mac的Coda是其中比较流行的一款，此外还有一些跨平台的IDE，如PHPStorm。这些IDE通常用于PHP、Python等语言的编程。
推荐使用VS Code
VS Code是免费的，制作精良，运行稳定，而且用户界面可定制。对VS Code的界面进行定制，可以让阅读HTML和CSS变得更容易。它还可以对HTML标签和CSS语句进行高亮显示。
2.3 网站目录结构与文件扩展名
有了理想的代码编辑器以后，
下面讨论构建网站所需的实际文件以及存放它们的文件夹（也称目录，用于表示文件存储的结构）
最初的示例项目只会用到一两个文件，但随着网站变得越来越复杂，需要的文件（及文件类型）会越来越多。拥有良好的文件结构会让你的网站井井有条。这样做有助于开发人员轻松找到要找的内容。
2.3.1 命名约定
在计算机上创建目录结构之前，先说一下文件和目录的命名约定。
HTML文件和CSS文件的扩展名不同，前者使用.html，后者使用.css。
所有文件名都应使用小写字母，并使用连字符（-）代替空格。因此，“My Cool File”的文件名应为my-cool-life.html。
目录使用相同的命名约定：全部为小写字母；如果使用多个单词，使用连字符将其分开。
2.3.2 建立目录结构
（1）打开准备存放网站代码文件的文件夹。
（2）右键单击文件夹窗口，然后选择“新建文件夹”。这将成为网站目录结构中最顶层的文件夹，即网站的根文件夹。
（3）将该文件夹命名为website（网站）。当然也可以命名成其他任何你想要的名称。
（4）双击这个新建的文件夹将其打开。
（5）创建一个名为images的新文件夹。
（6）找到在上一个任务中创建的index.html文件，并将其移动到刚创建的网站文件夹里。
2.3.3 访问网页文件
要打开HTML文件，可以在计算机上双击该文件的图标，然后它就会在浏览器中打开。将网站上线，让互联网上的其他人可以访问网站是另外一回事，后面讨论。现在应该知道：
要在网上访问一个文件，需要知道它的路径，也就是它在文件系统层级结构中的位置。文件路径使用的格式形如/directory/file-name。通常，当我们使用浏览器访问网站的时候，我们并未指定要访问的文件的名称。我们访问的可能是域名（如peachpit.com）或该域名下特定的子文件夹（如peachpit.com/store/）.域名是网站的“地址”，你可以将其类比为房屋的邮寄地址。
就像家庭地址一样，要获得网上的特定文件，就必须知道访问该文件的路径。路径是由文件的统一资源定位符（uniform resource locator ,URL）提供的。网页的URL包含域名和网页文件的路径,如下图：网页的URL反映了它在网站目录结构中的位置
如果你不知道要访问的页面的确切URL，但是知道其网站的域名，要怎么办呢？
在这种情况下，大多数Web服务器将选择一个默认文件进行显示。
该默认文件通常为index.html，位于我们正在访问的网站的根目录下。因此，你网站主页的文件名就应该是index.html，位于我们正在访问的网站的根目录下。因此，你网站主页的文件名就应该是index.html。
2.3.4 模拟Web服务器
早期养成良好的文件组织习惯还有一个理由，就是Web服务器（即文件最终存放的地方）是以特定方式组织的，网站的文件位于一个公用文件夹中，该文件夹通常被命名为public_html、public、html或root。
如果你想更好地理解Web服务器的工作方式（非掌握），可以下载一种应用程序，在你的计算机上创建一个小型服务器。Windows用户可以选择WAMP（Windows + Apache + MySQL + PHP）软件包，macOS用户可以选择MAMP（Mac + Apache + MySQL + PHP）软件包。
2.4 使用CodePen进行快速测试
还有一种快速测试代码的方法，无需设置Web服务器，但需要你可以连上互联网。
CodePen就是一种提供此类服务的流行应用。通过CodePen，你可以在同一个窗口里编写和测试代码。
在页面上方的面板分别输入HTML和CSS代码，页面下方就会实时显示结果。因此，如果你想快速查看所编写内容的效果，而不是编写完代码后再打开或刷新浏览器，那么CodePen确实是个不错的选。这种方法对于快速制作原型很有用。
2.5 小结
有了文本编辑器、本地网站目录，也掌握了快速进行代码测试的方法之后，便可以开始编写HTML了。
第3章 HTML语法
前面说到，HTML是定义每个网页的语言。不过，这到底是什么意思呢？在讲到HTML的时候，会用到哪些术语呢？
HTML是一组文本标签（tag）。这些标签将插入到构建网页的HTML文件的内容之中，它们定义了浏览器中显示的内容的类型。
3.1 HTML标签是怎样工作的
先来看看最常见的一种HTML标签<p>（如下图）。<p>是标准HTML标签。它以左尖括号（<）开头，接着是字母p（标签名称），再以右尖括号（>）结尾。上述这些一起构成了一个HTML标签。
注意，HTML标签通常是成对出现的（开始标签和结束标签），从而可以框住该标签要定义的内容。
开始标签
结束标签
第一个div标签和第二个div标签唯一的区别是，在包围第二个div标签的左尖括号后面多了一个正斜杠（/）。这表示这是一个结束标签，
整条语句构成了一个HTML元素：开始标签、内容和结束标签。（HTML元素和HTML标签的区别）
尖括号之间的p告诉浏览器这个内容是什么。在这个例子中，“p”代表“paragraph”（段落），这样浏览器便知道要将标签里面的内容显示为一个文本块。
上述代码可以读作：“先是一个段落开始标签，然后是文本，然后是一个段落结束标签。”对于不同的标签，浏览器显示文本内容的方式也会不一样。
tips：很多人使用“小于号”和“大于号”分别指代标签的左尖括号和右尖括号（尽管从技术上说它们并不是等价的）。所以，左尖括号和右尖括号可以简单地统称作不等符号（inequality symbol）
3.1.1 修改HTML标签并在浏览器中查看结果
（1）打开文本编辑器，输入<p>This is text</p>
（2）将文件另存为tag.html
（3）双击该文件，在浏览器中将其打开。
（4）返回编辑器，将<p>替换为<h1>。
（5）用</h1>替换</p>
（6）保存文件。
（7）在浏览器刷新页面，可以看到文本的大小和样式有新变化。（这段文本现在显示为一个一级标题的样子）
3.1.2 属性
在HTML标签中还存在另一种关键的文本——属性（attibute）。属性是为标签所应用的文本提供额外信息的。我们再来看一个段落标签，不过这次带有一个属性：
<p lang="en">This is a paragraph</p>
属性应该位于开始标签的字符后面。属性分为两个：名称（此处为lang）和值（此处为en）。这个属性告诉浏览器；“这个段落的语言是英文。”
关于属性，还有两个要点：
- 一个元素可以有任意数量的属性；
- 某些元素（如图像标签<img>、链接标签<a>）一定要带有一些规定的属性。
3.2 添加注释
通过添加注释的方法来为HTML代码添加一些有关代码本身的信息，被视为一种最佳实践。通过这种方法，你可以为代码的各个部分做标记，也可以解释一段代码的用途。这些注释对于日后修改代码会非常有用，尤其是他人修改你的代码的时候。
浏览器显示网页的时候，注释是不会显示的。这对于开发非常有帮助，因为你可以“注释掉”一段代码以查看暂时屏蔽它在浏览器里的效果，而无须真正将其从代码文件中删除。
在HTML中添加注释（在CSS和Javascript中添加注释与其并不相同）
（1）在HTML文件中，找到要开始注释的位置，然后输入<!--。
（2）执行下列操作之一：
- 如果要添加注释，就输入注释内容，最后以-->结束；
- 如果要“注释掉”一段代码，就将光标放到这段代码结尾，再输入-->。
tips：尽管浏览器呈现页面的时候不会显示注释代码，但这些注释内容也不会被彻底隐藏！任何用户都可以查看页面的源代码，然后看到全部注释。因此，请勿在注释文本里面写任何令人尴尬或令人反感的内容。
3.3 创建HTML页面的结构
——也称HTML基本骨架
了解了HTML标签的工作原理之后，还需要了解整个页面的结构，可以将标准HTML页面的基本组件提取到一份样板文件之中。这份样板文件就可以用作每一个新HTML文档的基本模板。
可以在vscode输入" ! "，按下回车自动生成：
以下组件应该存在于每一个HTML页面之中。
- 必须出现在第一行的DOCTYPE声明（必须告诉浏览器我们使用的HTML是什么版本）
- <html>开始标签。页面上其他所有标签都要放置在html开始标签和结束标签之间。
- head开始标签和结束标签。
- body开始标签和结束标签。
- 始终位于文档结尾处的</html>结束标签。在此标签之后，不应该再出现任何内容。
tips：较早的HTML版本要求“DOCTYPE”这几个字母都需要大写，但是HTML5对此并不区分大小写。
<html>、<head>、和<body>标签
在DOCTYPE以外，有三个不同的标签定义了网页的整体结构。
- <html>标签标记的是整个文档的开始和结束。除DOCTYPE外，其他所有标签都应该位于这组标签之间。
- <head>元素里面的内容都是都是关于此页面的信息。在大多数情况下，这些信息不会直接显示在浏览器窗口中。
- <body>元素里面包含的是页面上的所有内容。如果<body>和</body>标签之间有一些文本，那么这些文本就会显示在用户的浏览器中。
上面讲到的关于<head>和<body>以及显示内容的规则也有一些例外情形。<head>下的一个很好的例子是<title>元素。<title></title>标签位于<head>里面，但它们定义的是将在浏览器标签页中显示的文本。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我在浏览器标签页上</title> </head> <body> <img src="./images/pig.jpg" alt=""> </body> </html>
3.4 <meta>元素
<meta>标签与<title>标签类似，都属于文档的<head>标签。不过，与<title>标签不同的是，<meta>标签里的信息不会展示给用户。
<meta>标签用于为搜索引擎这样的程序提供一些信息。它最常见的两个属性是name和content，这两个属性构成了一个个键值对（name-value pair）.例如，要提供网页的描述，可以写作：
<meta name="description" content="A basic HTML boilerplate file.">
常见的name属性的值包括以下几种。
- author（作者）：指定文档作者的姓名。
- description（描述）：对应于在搜索引擎结果中显示的一小块用于描述网页的文本。
- color-scheme（颜色模式）：指定页面是否支持深色模式。
- viewport（视区）：提供有关文档初始大小的信息。这一项仅针对移动设备。
- robots（机器人）：指定文档是否应该包括在搜索引擎的搜索结果里面。
tips：<meta>标签不需要结束标签，也不需要在结尾处包含正斜杆（/）。
tips：<meta>标签的name/content组合是最常见的，但是还有一些属性，可用于更高级的定义和功能，参见MDN WEB Docs。
创建HTML基础模板（骨架）
（1）在文本编辑器里新建一个文件。
（2）输入<!DOCTYPE html>。
这是网页的DOCTYPE声明。使用HTML5，只需要html这几个字母，而在早期的HTML版本中，DOCTYPE声明的定义要冗长得多。
（3）输入<html>，开始文档。
（4）输入<head>。
（5）输入<title>HTML Boilerplate</title>。
（6）输入<meta name="author" content="your name">。
记得用你自己的名字替换上述代码中的"your name"。
（7）输入</head>。
（8）输入<body>。
（9）输入</body>。
（10）输入</html>，结束文档。
（11）将文件保存为boilerplate.html，存放在你的网站文件夹里。
3.5 什么是语义化标记
前面说到，标签会告诉浏览器它所包含的内容的类型。不过，为什么这一点很重要呢？
实际上，通过选用恰当的标签，不仅可以向用户描述我们的内容，还会向浏览器、搜索引擎以及其他任何基于计算机的处理系统描述我们的内容。这就让上述每个对象都能按照适合自己的方式来解读信息。这可能意味着以某种颜色显示某些内容，或者在特定的搜索结果中突出显示某些内容。
例如对网站的导航使用了适当的语义化标签，Google就会直接在搜索结果中将导航显示出来。
总之，语义化的标记意味着网页的无障碍性提高了。对于国际访客来说，它容易翻译；对于使用辅助技术（如屏幕阅读器）的用户来说，他们能更好地理解网页的内容。
3.6 小结
HTML标签是Web的基础。它们创建了网页内容的结构并指定内容的含义。这能让访问你的网页的所有人、所有设备更好地理解它。
第4章 基本的HTML元素
HTML元素种类繁多。从技术角度看，这些元素的格式都应该通过CSS进行定义。不过，某些HTML元素带有语义，这样的语义也就定义了文本应该如何在屏幕上显示。
——常见的块级元素
——常见的行内元素
下面介绍几种最基本的元素，以及如何将它们组合起来以创建格式正确、可读性强且有意义的网页。
4.1 HTML文本的格式化
如果你曾使用Microsoft Word 或 Google文档来编辑文本，就应该知道，只需按几个按钮，就可以完成格式设置，选择文本，然后从菜单中选择一种格式，就会对该文本应用这种格式。比如可以在标题和段落之间增加一些间距，可以为无序列表添加圆点，可以更改文本的颜色，等等。
不过，HTML并非如此。如果只是在HTML文档中写入文本，它不会拥有任何格式。所有文本内容都会显示在一起，换行将会被忽略，某些字符也不会正确显示。
尽管浏览器会使用默认样式表来格式化所有HTML元素，但我们仍然需要使用HTML标签来描述页面上的所有内容。如果没有HTML标签，浏览器就无法知道页面上文字的类型。
