HTML详解
一、序言
HTML，即超文本标记语言（HyperText Markup Language）。它非常简单易懂，初学者十分容易上手！现在，就让我们来一起学习 HTML 吧！
二、编译器
HTML 的编译器还是挺多的。你可以在网上搜索各种编译器，乃至在线编译器。这里作者推荐 VS Code（Visual Studio Code）。
VS Code 官网：Link。点击 Download 即可下载，初始界面为英文，可自行搜索汉化教程。
三、模版
终于可以开始写 HTML 了！写 HTML 就像 C++ 一样，需要一个模版。下面是 C++ 模版。
#include <bits/stdc++.h>
using namespace std;
int main() {
return 0;
}
下面是 HTML 模版。当然是可拓展的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html 模版</title>
</head>
<body>
<!-- 中间写你的代码 -->
</body>
</html>
在 HTML 中，每个 <xxx> 标签都一定会有一个 </xxx> 标签与之对应。
试着观察上述模版。首先是一个
<!DOCTYPE html>
这有点像 C++ 的头文件，它是 HTML5 标准网页声明，全称为 Document Type HyperText Mark-up Language。
接着是
<html>
<!-- ... -->
</html>
这个元素用来告诉浏览器：这是一个 HTML 文档！
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
就是一个文档的头部，相应地， 就是一个文档的主体。
在头部里，我们可以看到
<meta charset="utf-8">
如果没有这一行，在加载中文网页的时候就会出现乱码。这里有个好玩的 乱码恢复器，输入 锘挎槬鐪犱笉瑙夋檽锛屽澶勯椈鍟奸笩。 进去，可以看到这个乱码是由 春眠不觉晓，处处闻啼鸟 由 UTF-8 转成 GBK 所出现的。
例3.1
试着将 锘垮姞娌癸紝HTML闈炲父绠€鍗曪紒 转化成正常文字。
分析：
直接转换即可。对比可知正常文字是 加油，HTML非常简单！ 。
UTF-8 我们很熟悉（上面代码就有呢），而 GBK 是另一种编码。比如 360 浏览器的默认编码就是 GBK，这时我们就要设置成：
<meta charset="gbk">
而
<title>html 模版</title>
则可以让网页上方出现 html 模版 这样的字，具体效果如下。
四、标题
一个网页没有标题怎么行呢！在 HTML 中，我们使用 <h1> - <h6> 标签来创建标题。
你现在看到的四、标题就是这样创建的：
<h2>四、标题</h2>
可以看看 <h1> - <h6> 的实际效果。代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
渲染效果如下。
因为有些浏览器会将一级标题渲染得很大，有些人会用 <h2> 来代替 <h1>，但这非常不利于爬虫们搞懂你的网页结构。所以还是建议用 <h1>。
五、段落
自然地，有了标题就得有段落。在 HTML 中，我们可以使用 <p> 来创建一个段落。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>HTML</h1>
<p>HTML 很简单，真的！</p>
</body>
</html>
渲染效果如下：
六、换行与水平线
我们继续学习，会发现有时候文章的结构会比较乱，这时候我们就可以使用水平线：<hr>。
要想在文章中插入一个水平线，代码如下：
<hr>
可能读者会觉得奇怪，为什么这个标签没有与之对应的 </hr> 呢？
世界上99%的现象都不是可解释的。——鲁迅
其实也是可以使用 </hr> 的，甚至在 XHTML 标准中，必须要写 </hr>。
换行我们则可以用 <br> ，食用方法同水平线。
例6.1
做一个这样的网页：
分析：
首先，前四个 XSWL 的字母显然使用标题来完成。接着用段落创建一个 xswl!，来个水平线。然后又是一个 xswl again!，再使用两次换行，最后建立一个段落 aggain! 即可完成。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>X</h1>
<h2>S</h2>
<h3>W</h3>
<h4>L</h4>
<p>xswl!</p>
<hr>
<p>xswl again!</p>
<br>
<p>aggain!</p>
</body>
</html>
注意，换行时我们其实换行了两次。因为两个段落之间默认换行，这时再使用 <br> 就有两次换行了。也可以写成如下形式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>X</h1>
<h2>S</h2>
<h3>W</h3>
<h4>L</h4>
<p>xswl!</p>
<hr>
<p>xswl again!<br><br>aggain!</p>
<!-- 观察不一样的地方 -->
</body>
</html>
由此可见，<br> 是可以直接写在段落里的。同理 <hr> 也可以。所以更简洁的代码如下：
<!DOCTYPE html>
<html>
<body>
<h1>X</h1><h2>S</h2><h3>W</h3><h4>L</h4>
<!-- 上面的直接创建段落 -->
<p>xswl!<hr>xswl again!<br><br>aggain!</p>
<!-- <hr> <br> 都可以直接写在段落里 -->
</body>
</html>
这里没有用到中文，所以省略了 <meta charset="utf-8"> 等。