# HTML第一步-理解HTML
今天在这里整理前端体系中看似最简单，却又暗藏玄机的HTML
# HTML的前世今生
HTML 的全称是超文本标记语言（HyperText Markup Language），这并不是编程语言而是一种标记语言，通过各种标签来构成一个网页中的内容。
到目前位置，比较有影响力的 HTML 的版本有：
- 1991年：html
- 1999年：html4.01
- 2000年：xhtml1.0（开始趋于标准严格）
- 2001年：xhtml1.1
- 2005年：xhtml2.0
- 2008年：html草案
- 2014年：html5正式版本
- 2017年：html5.2（目前普遍使用的版本）
# 理解HTML文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
<link rel="stylesheet" href="">
</head>
<body>
<!-- body -->
<div>
<p>欢迎浏览我的博客</p>
</div>
<script></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 文档声明
一份 HTML 文档的第一行应当以文档声明开始： 文档声明的作用是告知浏览器应当以什么方式来解析这份文档，在不同的版本有不同的文档声明：
<!-- html 4.01 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- xhtml -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- html5 -->
<!DOCTYPE html>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
（我拒绝接受需要兼容远古浏览器，并使用 html4/xhtml）
注意： 文档声明并不强制区分大小写，但是上面的例子是推荐的写法
# html文档
文档声明之后就是 html 文档的主体部分，以 html 标签包裹，其中有 head 部分和 body 部分。
<html>
<head>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
2
3
4
5
6
head 部分是文档头部， body部分是文档主体。
# head文档头部
head 文档头部中包含了 文档元数据 其中包含了文档的一系列属性和信息。
<head>
<meta charset="UTF-8">
<!-- 在这里定义标题 -->
<title></title>
<link rel="stylesheet" href="">
<style></style>
</head>
1
2
3
4
5
6
7
2
3
4
5
6
7
其中，除了 title 和 icon （参考文章 -> 文档标题)
元数据的详细内容我们下一篇文章再进行总结
# body文档主体
这部分内容是用户真正可以在页面上看到的部分，包含页面上的文本、图片、媒体等等。
<body>
<!-- body -->
<div>
<p>欢迎浏览我的博客</p>
</div>
<script></script>
</body>
1
2
3
4
5
6
7
2
3
4
5
6
7
另外，我们会习惯性的将页面中的 js代码 放在 body的尾部，具体原因请参考前端优化部分～