基础 HTML 元素的认识
在上一期中，我们提到了对「标签」和「元素」的定义，以及梳理了它们之间的关系。首先我们是有测试题安排的，请看。
测试题1
一般意义上，HTML 属于
A. 编程语言
B. 标记语言
C. 记事语言
D. 人类语言
下列标签中，最可能没有任何意义的是
A. <widkhweidhiwfh>
B. <article>
C. <section>
D. <dialog>
XML 与 HTML 的关系是
A. $ XML \in HTML $
B. $ HTML \in XML $
C. $ XML \rightarrow HTML $
D. $ HTML \rightarrow XML $
在数据结构 <a><b><c></c></b></a> 中，下列说法正确的是
A. 这三个标签都不是元素。
B. <a> 是 </a> 的直系。
C. <a> 是 <c> 的直系。
D. <a> 是数据结构的根元素。
在第二期中，我们将介绍一些最基础的元素和它们的使用方式。首先，我们来了解一下一个最基本的 HTML 文件结构。
文件结构
HTML 文件的扩展名为 .html 或 .htm，现在常用 .html 且也较为正式。我们直接用纯文本文件改扩展名得到 HTML 文件即可。一个 HTML 文件的基本结构大概是：
<!DOCTYPE HTML>
<html>
<header>
...
</header>
<body>
...
</body>
<footer>
...
</footer>
</html>
我知道，你可能是懵逼的。因为这些元素你先前都没有见到过，我们一条一条来解释：
<!DOCTYPE html>
这个第一行就十分复杂。它不是元素。它声明了当前的文件类型，从而让浏览器决定该如何读取。幸运的是，在 HTML5 标准中，<!DOCTYPE> 的用法有且只有一种，即<!DOCTYPE>。其余在 HTML4、XHTML1 等旧式格式中，这个的用法很繁琐。
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
以上 DOCTYPE 声明来自 http://www.w3school.com.cn/tags/tag_doctype.asp
这些在过去简直就是噩梦，但是在 HTML 5 中，你甚至可以不需要写<!DOCTYPE HTML>，浏览器就能读懂你的代码；但是 HTML4 却不一样，如果你没有声明，那么你的文档浏览器一般是无法读懂的。
需要注意的是，<!DOCTYPE HTML> 只有写在文档的第一行才有用。如果不写在第一行，那么跟没写差不多。
第二行是 <html>，定义 HTML 文件的主体。在 <html> 里可以写文档的内容。
接下来我们就不用行数来分析了，而是用「第几个标签」来分析。下一个标签是 <header>，它的中文名称叫做「页眉」，用来编写一些对当前文件（网站）的介绍，以及对一些文件的引用（CSS、JS 等）。需要注意的是，不一定所有的 JS 文件引用都会写在页眉。
下个标签是 <body>，它的中文名称叫作「页体」，指的是网站的主体部分。基本上整个网站都是在 <body> 里。最后的 <footer> 用来编写页脚的内容，但常常它其实也可以属于 <body>。如果你喜欢，可以单独写一个 <footer> 来容纳你的页脚。
也就是说，整个 HTML 文件由「文件声明」、「内容声明」、「页眉」、「页体」、「页脚」构成。截至目前，我们认识了 4 个 HTML 元素：
<html> <header> <body> <footer>
需要注意的是，这些元素都不是必须的。如果你删去了这些元素，甚至整个文档只有纯文字，你的 HTML 文件照常能被识别。就算你不声明 <body>，你照样可以为自己的元素规定样式等，浏览器也照样能够识别。但是这样做的劣势是文件版本、用法模糊不清。没有人知道你这到底是 HTML5 还是 HTML4，还是什么稀奇古怪的用法。另外，元素的名称不一定需要小写，可以全部大写，包括它们的属性。但是这样，你的代码将会变得十分杂乱无章。
W3C 建议编写者能够按照标准格式和结构来编写 HTML，以便 HTML5 标准的普及。
我们不妨回顾一下我们上一期学到的内容。这些元素之间的关系照样可以用上一期的内容来表述。比如「<html> 是整个文件的根元素」、「<header>、<body>、<footer> 分别会充当父元素的角色」等。除此之外，我们还可以说「<header>、<body>、<footer> 是相互并列的。
基本元素
我们首先会想到，一个文档会有「标题」、「正文」等，那么在 HTML 中该如何规定呢？
HTML 赋予了 6 个基本的标题样式和 1 个正文文本元素。它们是
<h1> <h2> <h3> <h4> <h5> <h6> <p>
其中，<h1> ~ <h6> 分别是 1~6 级标题，1 级最大，6 级最小。开发者之间一般互相约定，1~3 级标题为基本样式标题，也就是说它们具有「最基本的标题功能」，即将大的内容划分开来。而 4~5 级标题则总是出现在小结里。6 级标题一般不会被用到，因为它在有的时候连正文的优先级都不达。
<p> 是正文元素，英文名为 Paragraph，即段落。<p> 一般被当作正常的正文元素来使用，用来划定一段的内容。我们来看如上元素的示例。
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
正文：我们都知道女装是一种神圣的存在，它打破了人类性别的限制，让人类能够释放自己的本性，投身于自己喜爱的服装里。女装无罪，有罪的是心灵！所以，救救女装吧！在女装事业日渐衰退的今天，让我们拿起自己的女装，穿上，大喊，女装万岁！！！
示例中的任何文字大小因网站而异
那么，我们现在知道了如何为一个文章确定标题、正文，接下来，我们看看到底该如何写吧！
<!DOCTYPE HTML>
<html>
<body>
<h1>Hello World!</h1>
<p>这是我的第一篇 HTML 文档，恭喜！</p>
</body>
</html>
显然，这是一个只有页体的 HTML。至于页眉和页脚到哪里去了，这个只会在我们涉及到更加复杂的工作时用到。
复制以上代码到你的 HTML 文件里，双击用浏览器打开（HTML 文件的默认打开方式就是浏览器），你将会看到你的成果。
超链接
在网络时代，不管多么遥远的距离，都可以被一个「超链接」连接起来，轻快而又便捷。HTML 中划定超链接的元素是 <a>，这将是我们接触到的第一个具有固有属性的元素。
如其它元素一样，<a> 照样是可以被嵌套的。它通常被嵌套在 <p> 内，形成类似于 <p><a></a></p> 这样的结构。首先我们知道，如果我们写入
<p>这里是正文，哦耶！</p>
那么显示出来的也将会是
这里是正文，哦耶！
那么 <a> 呢？我们不妨来看看
<a>这里是链接，哦吼！</a>
那么显示出来的结果是
这里是链接，哦吼！你会发现文字的样式改变了，变得具有下划线了。然而你点击它，却不会有任何反应。这是因为，你没有规定这个元素的指向属性。指向属性的全称是 Hypertext Reference（超文本链接），简称 href。如果我们要指定一个 <a> 的指向属性，我们可以按照先前介绍的方式，我们可以推出 <a> 的基本使用方式：
<a href="链接地址">链接文本</a>
比如，我们输入
<a href="baidu.com">百度</a>
那么会显示
百度但是不久你会发现，点击这个链接，跳转到的并不是百度（废话这么慢肯定是你站）。为什么呢？因为我们没有规定协议名称，因此 href 属性自动指向了相对路径，即当前目录下的一个名叫 baidu.com 的文件夹。
可能这个概念不是很好理解。我们举个例子。比如，你当前正在 example.com/example/1.html 里，那么你在 href 里输入了 baidu.com，这样跳转到的将会是 example.com/example/baidu.com，而并不是你想要的 baidu.com。
初学者非常容易犯这个错误，因此我们要小心。那么究竟如何跳转到 baidu.com 呢？其实只需要我们规定一下协议名称即可。协议目前有很多种，主流的，用来传递文本信息的有 http 和 https，其中 https 是 http 的加密安全版本。如果我们想要跳转到百度，我们必须这样写：
<a href="https://baidu.com">百度</a>
那么出现的将会是
百度点击一下，你看是不是到百度了？要问我为什么不带 www，需要知道的是，www 在很多时候并不是必须的，这取决于域名的「解析」部分。如果不带 www，那么就是最纯粹的根域名。如果带上了 www 而解析的部分没有设置对 www 的解析，那么就会导致访问出错。这不是 www 的「劣势」，而是应该了解的事实。
上面，我们所用到的协议是 https，其实如果直接用 http 也可以，只不过现在很少使用，因为它不安全，就算用 http，在大多数情况下也会被自动跳转到 https，首先是浏览器会优先选择 https，其次某些大型网站会刻意设置永久（301）重定向。
因为 http/https 都十分普遍，所以每一次我们写协议名称的时候不必要刻意去带着它们，而可以简写，即 //baidu.com。比如
<a href="//baidu.com">百度</a>
这样照样可以指向百度这个网站。但是这个对于是 http 还是 https 的规定不是确定的，但是主流的浏览器都会选择 https。
绝对路径和相对路径
在前文中我们提到了一个名词——「相对路径」。众所周知，「路径」是我们日常在计算机中访问文件所要接触到的一种对文件位置的描述。那么，在 href 属性中，也需要用到路径来指定目标的网页或者文件。
其实在一般的计算机上，也有绝对路径和相对路径的区别，只不过一般区分在命令行里而已。
首先我们了解一下绝对路径。绝对路径中的「绝对」，实际上是「完整」的意思。也就是说，它指定的一个文件的位置，是绝对的。比如 https://baidu.com 就是一个绝对路径，打开这个链接后，不会跑到任何其它的位置，唯独 baidu.com。
再拿我们日常使用的 Windows 系统来举例，C:\Windows\System32\cmd.exe 也是一个绝对路径，它指定了一个独有的 cmd.exe，且不可能再指向其它的文件。
绝对路径就是这么简单，一旦你规定了一个「完整」的路径地址，那么我们就说它是「绝对」的。
相对路径相比绝对路径来说，使用起来更加方便，但是不定性却更大。在开发中会产生困难。以下是相对路径的基本用法
| 相对路径用法 | 含义 | 举例 |
|---|
./ | 当前的目录 | 假设你位于 C:\Windows\，那么此时 ./ 代表的就是 C:\Windows\。 |
../ | 上级目录、父级目录 | 假设你位于 C:\Windows\System32\，那么此时 ../ 代表的就是 C:\Windows\。 |
/ | 根目录 | 假设你位于 C:\Windows\System32\drivers\etc\，那么此时 / 代表的就是 C:\。且无论在 C 盘的什么位置，这个符号都代表的是 C:\。 |
以上信息可能需要花一定的时间来理解，但是理解过后，相对路径基本上就这些了。
比如我们当前在 C:\Windows\，那么此时的相对路径 ./System32/ 所代表的绝对路径就是 C:\Windows\System32。
再举个例子，如果我们当前在 C:\Windows\System32\drivers\etc，那么 ../../../../ 所代表的绝对路径就是原路径的上上上上级目录，我们可以逐步推演。
第一个 ../ 代表的是 ...\etc（三个点是省略号）的上级目录，即 ...\drivers。第二个 ../ 代表的是 ...\drivers 的上级目录，即 ...\System32，以此类推。从 etc 一直返回 4 个上级，第一个上级返回到 drivers，第二个上级返回到 System32，第三个上级返回到 Windows，第四个上级返回到 C:\。
也就是说，此时 ../../../../ 相当于 /。如果是 ../../../，那么就代表绝对路径 C:\Windows。
我们可以总结一个规律。我们依次将路径标号：
C:\Windows\System32\drivers\etc\我们假定一个概念，叫作「总目录数值」
$$ n_{总目录}=n_{目录名总数}-1 $$
在上面，我们的目录名总数为 5，包含根目录。那么，总目录数值就是 5-1=4，每一个 ../ 减去一个总目录数值，比如 ../../../，那么就代表减去 3 个总目录数值，4-3=1，那么我们得到的目录就是序号为 1 的目录，即 Windows，拼合之前的目录，得到的绝对路径就是 C:\Windows。这是我自创的一个办法，实际使用中并不会用到，因为它太复杂了。
你只需要知道 ../ 代表的上级目录，../../ 代表的上上级目录，以此类推，逐步推演就可以了。
那么这些路径本质上还是确定的啊？「相对」在哪里呢？
假定你在 C:\Windows\ 下有一个 1.html 的文件，在这个文件里有如下代码
<a href="../">上级目录</a>
那么你点击以后，跳转到的是哪里？没错，跳转到的是 C:\，因为是上级目录。而如果把这个 1.html 里，代码原封不动，只动文件位置，把它转移到 C:\Windows\System32 下，那么此时点击上级目录，跳转到的又是哪里？没错，跳转到的是 C:\Windows\，这也是上级目录。
也就是说，相对路径基本上是绝对的，但是仅限于目录、文件都不发生改变的情况下。一旦改变，那么相同的相对路径就有可能指向不同的绝对路径。
我们可以给出定义，任何相对路径都可以转换为绝对路径，但是仅限于目录、文件都不发生改变的情况下。
你知道吗？
<header> 元素在早期被写成 <div class="head">，<div> 是我们稍后要了解的一个元素，它没有实际的意义，但是却十分重要而必不可少。class 也是我们日后要了解到的一个「普遍属性」，意即「任何元素都可以拥有的属性」。- 已经在根目录（没有上级目录了，最开始的那个目录，比如
C:\）了，那么还是跳转到 ../ 会发生什么？不会发生什么。你此时仍然在根目录。
课后习题
访问 google.com，以下写法正确的是
A. <a href="google.com">GOOGLE</a>
B. <a href="链接地址是 https://google.com">链接文本是 GOOGLE</a>
C. <A HREF="//GOOGLE.COM">GOOGLE</A>
D. <a href=//google.com>GOOGLE</a>
假设当前在 E:\wamp\Apache2\conf\extra\，那么 ../../../../../../../../../ 代表的是
A. /
B. E:\wamp\
C. ⑨ 个 ../
D. 我的电脑上没有这个目录，所以我不知道。
假设在 E:\wamp\ 下有一个 1.html，下列说法正确的是
A. 它的上级目录是 E:\wamp
B. 它的父级目录是 E:\wamp
C. 此时 ./ 代表 E:\wamp\1.html
D. 它的根目录是 E:\
