快速上手
本章能让您快速了解 HTML 并学会编写它。
HTML 简介
HTML 指的是超文本标记语言: HyperText Markup Language。它是一种用来结构化 Web 网页及其内容的标记语言。
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言 (markup language)。HTML 由一系列的元素(elements)组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。标记标签 (markup tag) 是 HTML 的基本语法。一对标签 (tags) 可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。
特点
- HTML 使用标记标签来描述网页。
- HTML 文档包含了 HTML 标签及文本内容。
- HTML 文档也叫做 Web 页面。
例子
对于一段文字
Shimon Zhan is handsome.
HTML 可以将这行文字封装成一个段落(paragraph)元素来使其在单独一行呈现:
<p>Shimon Zhan is handsome.</p>
深入理解
HTML 中，除了语义，其他什么都没有。
HTML 是一个纯文本文件，用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。
比如，面试的时候问您，h1 标签有什么作用?
给文本增加主标题的语义。✔️
给文字加粗、加黑、变大。❌
HTML 元素语法
一个元素是:
<标签名称 属性1="值1" 属性2="值2"...>内容</标签名称>
An element is:
<tagname attribution1="value1" attribution2="value2">content</tagname>
<p>Shimon Zhan is handsome.</p>
元素的主要部分有:
开始标签(Opening tag): 包含元素的名称(本例为 p)，被
<、>所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。结束标签(Closing tag): 与开始标签相似，只是其在元素名之前包含了一个
/。这表示着元素的结尾 —— 在本例中即段落在此结束。注意
忘记包含结束标签可能会产生一些奇怪的结果。
内容(Content): 元素的内容，本例中就是所输入的文本本身。
元素(Element): 开始标签、结束标签与内容相结合，便是一个完整的元素。
标签
<tagname ...> 是开始标签，</tagname> 是结束标签。
案例中起始标签为 <p> 内容为 Shimon Zhan is handsome. 闭合标签为 </p>。
开始标签常被称为 起始标签(Opening tag)，结束标签常称为 闭合标签(Closing tag)
自闭合标签
如果标签内部没有内容，可以直接使用一个特殊的写法完成自身的闭合，即为自闭合标签。
格式:
<tagname attribution1="value1" attribution2="value2" />
即:
<标签名称 属性1="值1" 属性2="值2"... />
例子:
<input type="text" />
<!-- 属性="值" -->
<div style="height:100px" />
<!--这里空的 div 用于占位置，“撑起”一块空间-->
空标签
由于历史原因，一些 HTML 标签在设计时就不包含内容(例如: 图片 <img>，折行 <br>，分割线 <hr>，输入框 <input> 等)，这些标签被称为空标签。
在空标签内部添加内容是没有任何作用的，同时，空标签在初始时没有结束标签，以自身结束。
常见的空标签有 br、hr、img，不过还是建议写作 <br />、<hr />、<img />。
标签的嵌套
除了并列放置标签以外，标签的内容也可以放置其他标签，这就构成了标签的嵌套。比如您想强调 Shimon Zhan 的帅:
<p>Shimon Zhan is <strong>very</strong> handsome.</p>
总结
- HTML 元素以 开始标签 起始
- HTML 元素以 结束标签 终止
- 元素的内容 是开始标签与结束标签之间的内容
- 某些 HTML 元素具有 空内容 (empty content)
- 空元素 在开始标签中进行关闭 (以开始标签的结束使用
/而结束) - 大多数 HTML 元素可拥有属性
HTML 属性
属性包含元素的额外信息，这些信息不会出现在实际的内容中。
一个属性必须包含如下内容:
- 在属性与元素名称 (或上一个属性，如果有超过一个属性的话) 之间的空格符。
- 属性名称，后面跟着一个等于号。
- 一个属性值，由一对引号
" "引起来。
比如 <img src="/logo.svg" />，attribute 为 src，value 是 /logo.svg
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如: name='John "ShotGun" Nelson'
提示
尽管不包含 ASCII 空格(以及 " ' ` = < > )的简单属性值可以不使用引号，但是建议将所有属性值用双引号(除必须使用单引号的情况)括起来，这样的代码一致性更佳，更易于阅读。
适用于大多数 HTML 元素的属性
| 属性 | 描述 |
|---|---|
| class | 为 HTML 元素定义一个或多个类名 (classname) |
| id | 定义元素的唯一 id |
| style | 规定元素的行内样式 (inline style) |
| title | 描述了元素的额外信息 |
布尔属性
有时您会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如 disabled 属性，他们可以标记表单输入使之变为不可用(变灰色)，此时用户不能向他们输入任何数据。
<input type="text" disabled="disabled" />
方便起见，我们完全可以将其写成以下形式:
<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled />
后缀名
HTML 文档的后缀名是 .html。
HTML 结构
一个符合最新标准的 HTML 文件，应该满足如下结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body></body>
</html>
其中:
<!DOCTYPE html> 是在 HTML5 标准下要求的，必须放在每个 HTML 文件的首行。对文档类型的声明。
DOCTYPE可小写，此处无特殊要求。
每个网页应该在 HTML 里包含一个唯一的 <html> 标签。在 <html> 标签中，应该按照顺序包含 <head> 和 <body> 标签。
<head> 标签中，应该包含 <title> 标签注明文档的标题。
提示
<head> 元素是一个容器，它包含了所有您想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括您想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等。
<meta charset="UTF-8" /> 元素设置文档使用 utf-8 字符集编码。
UTF-8
utf-8 字符集包含了人类大部分的文字。基本上它能识别您输入的所有文本内容。使用它可以避免很多其他问题。
W3C 也将 UTF-8 标记为推荐的字符编码，所以建议在任何 HTML 文件中都添加此标签。
更多详情，请见 介绍 → head 标签。
:::
<body> 标签包含了您访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。
HTML 空白
您可能已经注意到了在代码中包含了很多的空格——这是没有必要的。
<p>狗 狗
很 呆 萌。</p>
<p>狗 狗 很 呆 萌。</p>
无论您在 HTML 元素的内容中使用多少空格(包括空白字符，包括换行)，当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。
那么为什么我们会在 HTML 元素的嵌套中使用那么多的空白呢? 答案就是为了可读性 —— 如果您的代码被很好地进行格式化，那么就很容易理解您的代码是怎么回事，反之就只有聚做一团的混乱。在 HTML 代码中，通常让每一个嵌套的元素以两个空格缩进。
特殊字符
在 HTML 中，字符 <, >,",' 和 & 是特殊字符. 它们是 HTML 语法自身的一部分, 那么您如何将这些字符包含进您的文本中呢, 比如说如果您真的想要在文本中使用符号 & 或者 < 号, 而不想让它们被浏览器视为代码并被解释?
我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号 & 开始, 以分号 (;) 结束。
| 原义字符 | 等价字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |