HTML
全称是 超文本标记语言（HyperText Markup Language）
HyperText（超文本）：表示不仅仅是普通文本，还可以通过超链接把不同页面或内容连接起来。
Markup（标记）：通过一系列标签（Tag）来对文本内容进行结构化描述。
Language（语言）：这里指的是一种描述性语言，不是编程语言，而是用来定义网页内容和结构的标记语言。
CSS
全称是 Cascading Style Sheets（层叠样式表）。它是一种用于表现 HTML 或 XML 等文档样式的计算机语言，允许开发者控制网页的外观和布局，包括字体大小、颜色、背景图片等。
Cascading (层叠)
：指样式规则应用的优先级顺序，当有多个样式规则应用于同一个元素时，层叠的机制会决定哪一个样式会被最终采用。
Style (样式)
：指网页的视觉表现，如颜色、字体、大小、间距等。
Sheets (表)
：指一种将样式信息组织起来的文件或集合。
HTML 决定网页的结构和内容，CSS 决定网页的外观和样式。
渐进增强：一种建站最佳实践
渐进增强（progressive enhancement）的设计理念能
帮助你构建具有普适性的网站。这不是一门语言，
而是一种建站方法，它由Steve Champeon于
2003年提出（http://en.wikipedia.org/wiki/Progres
sive_enhancement）
https://en.wikipedia.org/wiki/Progressive_enhancement
每个网页主要包括以下三个部分：
文本内容（text content）：在页面上让访问者了解页面内容的纯文字，比
如关于业务、产品、家庭度假的内容，以及页面关注的其他任何内容。
对其他文件的引用（references to otherfiles）：我们使用这些引用来加载图像、
音频、视频文件，以及样式表（控制页面的显示效果）和JavaScript文件（为
页面添加行为）。这些引用还可以指向其他的HTML页面和资源。
标记（markup）：对文本内容进行描述并确保引用正确地工作。（HTML
一词中的字母M就代表标记。）
基本的HTML页面
每个网页都包含DOCTYPE、html、head和body 元素，它们是网页的基础。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Your page title</title>
</head>
<body>
</body>
</html>
网页的顶部和头部
开始标签（如<head>）用于标记元素的开始，结束标签（如</head>）用于标记元素的结束。有的元素没有结束标签，如meta
<body>开始标签以上的内容都是为浏览器和搜索引擎准备的。<!DOCTYPE html>部分（称为DOCTYPE）告诉浏览器这是一个HTML5页面。DOCTYPE应该始终位于页面的第一行。
接下来是html元素，它包着页面的其余部分，
即<html lang="en"> 和 </html> 结束标签（表示页面的结尾）之间的内容，
在这里可以为网页指定其他语言。
主体前面的代码中，有一部分是用户可见的，即<title>和 </title> 之间的文本。
这些文本会出现在浏览器标签页中，对于某些浏览器，这些文本还会出现在浏览器窗口的顶部，作为网页的标题
网页的body：你的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blue Flax (Linum lewisii)</title>
</head>
<body>
<article>
<h1>The Ephemeral Blue Flax</h1>
<img src="blueflax.jpg" width="300" height="175" alt="Blue Flax" />
<p>I am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.
➝org/wiki/Linum_lewisii" rel="external" title="Learn more about Blue Flax">Blue Flax</a>
➝that somehow took hold in my garden. They are awash in color every morning, yet not a single
➝flower remains by the afternoon. They are the very definition of ephemeral.</p>
</article>
</body>
</html>
标签的构成：元素、属性、值及其他
我们来仔细看看标签的组成：元素（element）、属性（attribute）
和值（value）。
元素有一个或多个属性，属性用来进一步描述元素。
大多数元素既包含文本，也包含其他元素（就像基本页面中的p元素）。如前面提
到的，这些元素由开始标签、内容和结束标签组成。开始标签是放在一对尖括号中的元
素的名称及可能包含的属性，结束标签是放在一对尖括号中的斜杠加元素的名称
空元素（empty element或void element），
既不包含文本也不包含其他元素。它们看起来像是开始标签和结束标签的结合，由左尖括号开头，
然后是元素的名称和可能包含的属性，然后是一个可选的空格和一个可选的斜杠，最后是必有的右尖括号
<img src="blueflax.jpg" width="300" height="175" alt="Blue Flax" />
空元素（如这里显示的img元素）并不包含任何文本内容（alt属性中的文字是元素的一部分，
并非显示在网页中的内容）。空元素只有一个标签，同时作为元素的开始标签和结束标签使用。结尾处的
空格和斜杠在HTML5中是可选的。不过，元素最后面的>是必需的。按照惯例，元素的名称都用小写字母。
属性和值
属性包含了元素的额外信息
在HTML5中，属性值两边的引号是可选的，但习惯上大家还是会写上，
因此建议始终这样做。跟元素的名称一样，
尽量使用小写字母编写属性的名称。
for是label的一个属性，for属性的值是email<label for="email">Email Address</label>
label元素（关联文本标签与表单字段），它有一个简单的属性–值对。属性总是位于
元素的开始标签内，属性的值通常放在一对括号中
有的元素（比如a和img）可以有多个属性，每个属性都有各自的值。属性的顺序
并不重要。不同的属性–值对之间都用空格隔开有的属性可以接受任何值，有的则有限制。
最常见的还是那些仅接受预定义值（也称为枚举值）的属性。
也就是说，必须从一个标准列表中选一个值。一定要用小写字母编写枚举值。
screen是：定义值，style.css：非预定义值<link rel="stylesheet" media="screen" href="style.css" />
有的属性只接受特定的值。例如，只能将link元素里的media属性设为all、screen、print等值中的一个，
不能像href属性和title属性那样可以输入任意值
有许多属性的值需要设置为数字，特别是那些描述大小和长度的属性。数字值无需
包含单位，只需输入数字本身。图像和视频的宽度和高度是有单位的，默认为像素。
有的属性（如href和src）用于引用其他文件，它们只能包含URL（统一资源定位
符，是万维网上文件的唯一地址）形式的值。最后，还有一种特殊的属性称为布尔属
性（Boolean attribute）。这种属性的值是可选的，因为只要这种属性出现就表示其值为真。这种属性的值是可选的，因为只要这种属性出现就表示其值为真，如果一定要包含一个值，就写上属性名本身（这样做的效果是一样的）。布尔属性也是预先定义好的，无法自创。
<input type="email" name="emailaddr" required />
这段代码提供了一个让用户输入电子邮件地址的输入框。布尔属性required代
表用户必须填写该输入框。布尔属性不需要属性值，如果一定要加上属性值，则写作required=”required”
父元素和子元素
如果一个元素包含另一个元素，它就是被包含元素的父元素，
被包含元素称为子元素。子元素中包含的任何元素都是外层的父元素的后代。
这种类似家谱的结构是HTML代码的关键特性，
它有助于在元素上添加样式和应用JavaScript 行为
值得注意的是，当元素中包含其他元素时，每个元素都必须嵌套正确，也就是
子元素必须完全地包含在父元素中。使用结束标签时，前面必须有跟它成对的开始标
签。换句话说，先开始元素1，再开始元素2，就要先结束元素2，再结束元素1
<p>... continually <em>amazed</em> ...</p>
元素必须正确地嵌套。如果先开始p，再开始em，就必须先结束em，再结束p
网页的文本内容
浏览器呈现HTML时，会把文本中的多个空格或制表符压缩成单个空格，把
回车符和换行符转换成单个空格，或者将它们一起忽略。
直接在head开始标签后面指明文档的字符编码。charset(字符集)属性用来设置编码类型（通常为
UTF-8）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blue Flax (Linum lewisii)</title>
</head>
<body>
...
</body>
</html>
链接、图像和其他非文本内容
过去，HTML没有内置的方法播放视频和音频文件。
结果，各个厂商都开发出了相应的软件，用户可以下载并安装这些软件，从而弥
补缺失的功能。这样的软件称为插件（plugin）。
在这些插件中，使用最为广泛的当数Flash。
多年以来，Flash驱动了无数万维网上的视频。
不过，这个插件也有一些问题，其
中最为突出的就是它会耗费较多的计算资源。
HTML5已经为缓解这一问题迈出了一大步。
HTML5提供了audio和video元素，这样，无需使用插件就可以播放音频和视频。
不过，现代浏览器也提供了内置的媒体播放器，
你仍然可以使用Flash播放器作为旧浏览器的备用工具。
文件名和文件夹名
文件名单词之间使用短横线分隔
buckminster-fuller.html
记住，文件名全部使用小写字母，用短横线分隔单词，用.html作为扩展名。混合使用大小写字
母会增加访问者输入正确地址以及找到页面的难度
文件夹的名称也应全部用小写字母。
关键是保持一致。如果使用小写字母，访问者和创建者就不必在大写字母和小写字母之间转换浪费时间了
http://www.yoursite.com/notable-architects/20th-century/buckminster-fuller.html
URL
URL（Uniform Resource Locator，统一资源定位符号）是地址的别名。
它包含关于文件存储位置和浏览器应如何处理它的信息。互联网上的每个文件都有唯一的URL。
URL的第一个部分称为模式（scheme）。
模式告诉浏览器如何处理需要打开的文件。
最常见的模式是HTTP（Hypertext Transfer Protocol，超文本传输协议）。
HTTP是用于访问网页的。HTTPS是从HTTP衍生来的，
用于电子商务网站等安全网页。它的格式同HTTP一样，只是用https替代了http。
"http://www.site.com/tofu/index.html"
URL的第二个部分是文件所在的主机的名称，紧接着是路径，路径包含到达这个文
件的文件夹以及文件自身的名称（这些都是可选的）。
如果A中的路径是tofu/soft/index.html，
就表示index.html 位于 soft 目录，而soft 目录则位于tofu目录，就像你在自己的电脑上组织文件和文件夹那样。
有时，URL路径不以文件名结尾，
而以一个目录结尾（可以包含一个结尾的斜杠，也可以不包含），如”http://www.site.com/tofu/"。
在这种情况下，URL指的是路径中最后一个目录中的默认文件，通常为index.html。
（通常情况下，所有Web服务器的配置都将index.html作为默认文件名，因此你不必修改任何服务器配置。）
其他常见的模式有用于下载文件的ftp（File Transfer Protocol，文件传输协议），
用于发送电子邮件的mailto。
“ftp://ftp.site.com/pub/proposal.pdf“
当用户点击这个URL时，浏览器会开始按FTP模式传输文件proposal.pdf（有时需要先输
入用户名和密码）
用于电子邮件地址的URL包括mailto模式，紧接着是一个冒号（没有斜杠），然后是电子
邮箱地址本身
“mailto:somename@somedomain.com“
模式后面通常紧跟一个冒号和两个斜杠。mailto 是个例外，它后面只有一个冒号。
在上述模式中，最常用到的是http（也包括https），其次是mailto，再次是ftp。
绝对url
URL可以是绝对的，也可以是相对的。绝对URL（absolute URL）包含了指向目录或
文件的完整信息，包括模式、主机名和路径。绝对URL就像是完整的通信地址，
包括国家、州、城市、邮政编码、街道和姓名。无论邮件来自哪里，邮局都能找到收件人。
引用别人Web服务器上的文件时，应该总是使用绝对URL。当你通过电子邮件跟你
的朋友分享新闻或YouTube视频的URL时，如果只给他们URL的一部分，他们就无法看
到相应的内容。这也就是为什么我们的基本页面。这也就是为什么我们的基本
页面中指向维基百科页面的href 值是完整的URL而不是简单的Linum_lewisii。
<p>I am continually <em>amazed</em> at
➝the beautiful, delicate <a href="http://
➝en.wikipedia.org/wiki/Linum_lewisii"
➝rel="external" title="Learn more about the
➝Blue Flax">Blue Flax</a> that somehow took
➝hold in my garden . . .</p>
相对 URL
当我告诉你我邻居家的位置时，我一般不会说完整地址，而是说：“她家在右边第三
个门。”这就是相对地址，它指出的位置是以信息提供者的位置为参照的。如果在别的
城市按照同样的信息找我的邻居，你永远也找不到。
同样，相对URL以包含URL本身的文
件的位置为参照点，描述目标文件的位置。
引用同一目录下的文件
如果目标文件与当前页面（也就是包含
URL的页面）在同一个目录中，那么这个文件的相对URL就只有文件名和扩展名
例如，链接的HTML可能是<a href="history.html">Take me to history. html!</a>
相对URL指向同一目录下的文件。URL中只需要文件名和扩展名，不必
在前面加上http://www.site.com/about/（这两个文
件所在的主机名和目录）
引用子目录下的文件
如果目标文件在当前目录的子目录中，那么这个文件的相对URL就是子目录名，接
着是一个斜杠，然后是文件名和扩展名。
例如，<a href="info/data.html">Data supports my hypothesis</a>。
要引用当前文件夹的子文件夹中的文件，在这个例子中是data.html（参见图1.7.10），应在文件名之前加上子文件夹名称和一个斜杠
引用上层目录的文件
如果要引用文件层次结构中更上层目录中的文件，那么应该使用两个句点和一个
斜杠，例如，
<a href="../products.html">our products</a>。
每个【../】都表示“到当前文件的上一层”，
因此，【../../】会向上走两级，【../../../】会向上走三级。
“../img/image.png”
可以看到，这个文件位于与网站根目录下的当前文件夹（about）同属一层
的文件夹（img）中。在这种情况下，使用两个句点和一个斜杠上升一级，然后指出子目录（img），
再跟一个斜杠，最后是文件名（实践中，可以为image.png 选择一个更具描述性的文件名，这里的
名称仅作为示例）
根相对URL
不过，如果文件位于Web服务器上，应该避免使用像../../img/family/vacation.jpg
这样显得较为笨拙的文件路径，不应先跳到网站的根目录再顺着向下找到目标文件。
可以在最开始使用一个斜杠，这样本例中的根相对URL就是/img/family/
vacation.jpg（假定 img 文件夹位于网站的根文件夹，这也是惯常的用法）。
需要强调的是，这种做法只能用于Web服务器，例如在网站托管服务供应商的Web服务器上，
或者在本地计算机运行的Web服务器上。
/img/family/vacation.jpg
相同的根相对URL可用于所有的页面，不管页面在网站目录结构中的具体位置。例如，
在这个例子中，主页和六层目录中某个页面对vacation.jpg 的定位是同样简单的（这并不代表我
建议使用这么深的层级结构）
如果不是在服务器本地开发网站，通常应使用相对URL（当然，除非是指向其他服
务器上的文件）。这样确保了将页面从本地系统传到服务器变得容易。只要每个文件的
相对位置保持不变，就不必修改任何路径，链接依然有效
绝对 URL和相对URL的比较
绝对 URL (Absolute URL)
定义：包含完整路径的 URL，可以独立使用，不依赖于当前文档的位置。
格式：协议 + 域名 + 路径 + 文件名
例如：
https://www.example.com/images/logo.png
优点：
可以在任何地方使用，不受当前页面路径影响。
不会因为目录层级变化而失效。
适合在外部资源引用（如 CDN、API 接口、跨站链接）。
缺点：
地址冗长，不便于维护。
如果域名变更，需要全局替换。
相对 URL (Relative URL)
定义：基于当前页面位置的 URL，只写相对路径。
格式：根据当前文件位置来写，如：
./images/logo.png （当前目录）
../images/logo.png （上级目录）
/assets/style.css （站点根目录）
优点：
简洁、易于维护，适合站点内部资源。
如果网站迁移到不同域名，不需要修改内部路径。
缺点：
依赖当前页面的目录结构，位置变化时可能导致链接失效。
不适合跨站点引用。
| 特性 | 绝对 URL | 相对 URL |
|---|---|---|
| 是否完整路径 | ✅ 包含协议、域名、路径 | ❌ 依赖当前文档路径 |
| 跨站点可用性 | ✅ 可跨站引用 | ❌ 仅限站内 |
| 维护难度 | ❌ 域名变更需全局替换 | ✅ 内部迁移方便 |
| 链接稳定性 | ✅ 不受目录变化影响 | ❌ 易因目录调整而失效 |
| 常见应用场景 | 外部资源、API、CDN、SEO | 网站内部资源（图片、样式、JS） |
HTML：有含义的标记
这里强调的是，HTML描述的是网页内容的含义，即语义（semantics）。
在Web社区中，语义化HTML（semantic HTML）指的是那些使用最恰当的HTML元素进行标记的内容，
在标记的过程中并不关心内容显示。我想你应该同意这种做法，这比胡乱选择元素要有意义得多
为什么语义很重要
这里列出了使用语义化HTML最重要的几个原因。我们没有给出全部原因，我们已
经在前面提到一些内容了。
提升可访问性和互操作性（内容对于借助辅助技术的残障访问者是可访问的，
同时对于台式机、手机、平板电脑及其他设备上的浏览器都是可访问的）。
提升搜索引擎优化（SEO）的效果。使维护代码和添加样式变得容易。
（通常）使代码更少，页面加载更快。
无障碍访问
万维网的发明者 Tim BernersLee 曾说过一句著名的话：
“万维网的力量在于其普适性。让包括残障人士在内的每个人都能访问万维网，是极为重要的一点。”
浏览器对网页的默认显示效果
既然控制页面样式的是CSS而非HTML，为什么在浏览器中查看我们的基本页面时，
某些文字的字号会比其他文字的字号大呢，为什么有的文字是粗体或斜体呢？
原因就是每个Web浏览器都有一个内置CSS文件（一张样式表），
它决定了每个HTML元素的默认样式。你自己创建的CSS可以覆盖这些样式。
对于不同的浏览器，默认样式会稍有差异，但总体上相当一致。
重要的是，HTML所定义的内容的底层结构和含义是一致的
要点回顾
一个网页主要由三种成分构成：文本内容、对其他文件的引用和标记。
HTML标记由元素、属性和值构成。通常全部使用小写字母编写HTML
（DOCTYPE 是一个例外），用引号包住属性值。
为文件和文件夹命名时全部采用小写字母，词与词之间用短横线分隔，而
不要用空格或者下划线。始终用下面的DOCTYPE声明开始
HTML文档，让浏览器知道这是一个HTML5页面。
<!DOCTYPE html>页面内容都在body元素中。主要为浏
览器和搜索引擎准备的指令位于body元素之前，在head元素中。
用语义化HTML标记内容，不关心它在浏览器中显示的样式。
语义化HTML提升了网站的可访问性，让网站更有效率，并使网站维护和添加样式变得更容易。
CSS 控制HTML内容的表现。每个浏览器自带的样式表规定HTML
的默认表现样式。开发人员可以使用自己写的CSS覆盖这些规则