1.2.1 HTML教程
[toc]
简述
HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。
例如下面一行内容：
1 | 我的猫咪脾气爆:) |
可以将这行文字封装成一个段落（Paragraph）<p>元素来使其在单独一行呈现：
1 | <p>我的猫咪脾气爆:)</p> |
注：
1 | HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签 <title> 写作<title>、<TITLE>、<Title>、<TiTlE>，等等都可以正常工作。不过，从一致性、可读性等各方面来说，最好仅使用小写字母。 |
剖析一个 HTML 元素
让我们进一步探讨我们的段落元素：
这个元素的主要部分有：
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
嵌套元素
你也可以把元素放到其它元素之中——这被称作嵌套。如果我们想要表明我们的小猫脾气很暴躁，可以将“爆”嵌套在<strong> 中，意味着这个单词被着重强调:
1 | <p>我的猫咪脾气<strong>爆</strong>:)</p> |
你需要确保元素被正确的嵌套：在上面的例子中我们先打开<p>元素，然后才打开<strong>元素，因此必须先将<strong>元素关闭，然后再去关闭<p>元素。下面的例子是错误的：
1 | <p>我的猫咪脾气<strong>爆:)</p></strong> |
所有的元素都需要正确的打开和关闭，这样才能按你所想的方式展现。如果像上述的例子一样进行了错误的嵌套，那么浏览器会去猜测你想要表达的意思，但很有可能会得出错误的结果。所以永远不要这么做！
块级元素和内联元素
在HTML中有两种你需要知道的重要元素类别，块级元素和内联元素。
- 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
- 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>。
看一看下面的例子：
1 2 3 | <em>第一</em><em>第二</em><em>第三</em><p>第四</p><p>第五</p><p>第六</p> |
<em> 是一个内联元素，所以就像你在下方可以看到的，第一行代码中的三个元素都没有间隙的展示在了同一行。而<p>是一个块级元素，所以第二行代码中的每个元素分别都另起了新的一行展现，并且每个段落间都有一些间隔（这是因为默认的浏览器有着默认的展示<p>元素的CSS styling）。
**注: **
1 | HTML5重新定义了元素的类别：见 元素内容分类(译文)。尽管这些新的定义更精确，但却比上述的 “块级元素” 和 “内联元素” 更难理解，因此在之后的讨论中仍使用旧的定义。 |
1 | 在这篇文章中提到的“块”和“内联”，不应该与 the types of CSS boxes 中的同名术语相混淆. 尽管他们默认是相关的，但改变CSS显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是HTML5摒弃这些术语的原因之一。 |
空元素
不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素<img>是用来在元素<img>所在位置插入一张指定的图片。
例子如下：
1 | <img src="https://www.kanxue.com/upload/attach/202011/202011251741_R4P4D2UEEH9UYQV.jpg"> |
显示如下：
**注: **
1 | 空元素（Empty elements） 有时也被叫作 void elements. |
属性
元素也可以拥有属性，如下：
属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个class属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。
一个属性必须包含如下内容：
- 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
- 属性名称，后面跟着一个等于号。
- 一个属性值，由一对引号“ ”引起来。
布尔属性
有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如disabled 属性，他们可以标记表单输入使之变为不可用(变灰色)，此时用户不能向他们输入任何数据。
1 | <input type="text" disabled="disabled"> |
方便起见，我们完全可以将其写成以下形式(我们还提供了一个非禁止输入的表单元素供您参考，以作为对比)：
1 2 3 4 5 | <!-- 使用disabled属性来防止终端用户输入文本到输入框中 --><input type="text" disabled><!-- 下面这个输入框没有disabled属性，所以用户可以向其中输入 --><input type="text"> |
上面两段HTML代码产生的效果如下：
省略包围属性值的引号
当你浏览那些粗糙的web网站，你将会看见各种各样奇怪的标记风格，其中就有不给属性值添加引号。在某些情况下它是被允许的，但是其他情况下会破坏你的标记。例如，我们可以写一个只拥有一个href属性的链接，如下：
1 | <a href=https://www.mozilla.org/>收藏页面</a> |
然而，当我们再添加一个title属性时就会出错，如下：
1 | <a href=https://www.mozilla.org/ title=The Mozilla homepage>收藏页面</a> |
此时浏览器会误解你的标记，它会把title属性理解为三个属性——title的属性值为"The“，另外还有两个布尔属性“Mozilla”和“homepage”。看下面的例子，它明显不是我们所期望的，并且在这个编码里面它会报错或者出现异常行为。试一试把鼠标移动到链接上，看会显示什么title属性值!
建议始终添加引号——这样可以避免很多问题，并且使代码更易读。
单引号或者双引号？
在目前为止，本章内容所有的属性都是由双引号来包裹。也许在一些HTML中，你以前也见过单引号。这只是风格的问题，你可以从中选择一个你喜欢的。以下两种情况都可以：
1 2 3 | <a href="http://www.example.com">示例站点链接</a><a href='http://www.example.com'>示例站点链接</a> |
但你应该注意单引号和双引号不能在一个属性值里面混用。下面的语法是错误的：
1 | <a href="http://www.example.com'>示例站点链接</a> |
在一个HTML中已使用一种引号，你可以在此引号中嵌套另外一种引号：
1 2 | <a href="http://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a> |
如果你想将引号当作文本显示在html中，你就必须使用实体引用。
剖析HTML文档
学习了一些HTML元素的基础知识，这些元素单独一个是没有意义的。现在我们来学习这些特定元素是怎么被结合起来，从而形成一个完整的HTML页面的：
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>我的测试站点</title> </head> <body> <p>这是我的页面</p> </body></html> |
分析如下:
<!DOCTYPE html>
: 声明文档类型. 很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，规定了HTML页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
然而这种写法已经过时了，这些内容已成为历史。只需要知道 <!DOCTYPE html> 是最短有效的文档声明。
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。
<head></head>: <head>元素. 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于<head>元素的内容。
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。 包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。
HTML中的空白
在上面的例子中，你可能已经注意到了在代码中包含了很多的空格——这是没有必要的；下面的两个代码片段是等价的：
无论你在HTML元素的内容中使用多少空格(包括空白字符，包括换行)，当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。
那么为什么我们会在HTML元素的嵌套中使用那么多的空白呢? 答案就是为了可读性 —— 如果你的代码被很好地进行格式化，那么就很容易理解你的代码是怎么回事，反之就只有聚做一团的混乱.。在我们的HTML代码中，我们让每一个嵌套的元素以两个空格缩进。 你使用什么风格来格式化你的代码取决于你 (比如所对于每层缩进使用多少个空格)，但是你应该坚持使用某种风格。
实体引用： 在HTML中包含特殊字符
在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢, 比如说如果你真的想要在文本中使用符号&或者小于号, 而不想让它们被浏览器视为代码并被解释?
我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束.
在下面的例子中你可以看到两个段落，它们在谈论web技术:
在下面的实时输出中，你会看到第一段是错误的，因为浏览器会认为第二个<p>是开始一个新的段落！ 第二段是正确的，因为我们用字符引用来代替了角括号（'<'和'>'符号）.
HTML注释
如同大部分的编程语言一样，在HTML中有一种可用的机制来在代码中书写注释 —— 注释是被浏览器忽略的，而且是对用户不可见的，它们的目的是允许你描述你的代码是如何工作的和不同部分的代码做了什么等等。 如果你在半年后重新返回你的代码库，而且不能记起你所做的事情 —— 或者当你处理别人的代码的时候， 那么注释是很有用的.
为了将一段HTML中的内容置为注释，你需要将其用特殊的记号<!--和-->包括起来， 比如：
正如你下面所见的那样，第一段出现在了实时输出中，但是第二段却没有。
参考资料
- 《开始学习 HTML - 学习 Web 开发 | MDN》
⋮
