零.前言：
本文章对于HTML的基础知识处理的十分细节，适合从头学习的初学者，亦或是想要提升基础的前端工程师。
1.什么是HTML？
HTML是："超文本标签语言"（Hyper Text Markup Language）
HTML不是一种编程语言，而是一种"标记语言"
HTML使用标记标签（元素）来描述网页。
2.什么是XHTML？
XHTML是HTML更严谨和更纯净的版本。
3.什么是HTML5？
HTML5是HTML的下一代版本。
4.HTML标签
HTML标签（元素）是由"尖括号"所包围起来的关键词，比如<html>。
HTML标签分为："单标签"跟"双标签"。
双标签 有："开始标签"（开放标签）和"结束标签"（闭合标签）。
结束标签 需要在"最前方 加一个**/**"。
例如：**<br>、<hr>、<input>**都是单标签。
**<p></p>、<html></html>**都是双标签。
5.元素、属性
在双标签中间的内容 叫做："元素"，而在开始标签当中的内容 叫做："属性"。
例如：
<p>我是一个笨蛋</p>其中，"我是一个笨蛋"就是一个元素。
而元素可以是标签，这时也叫作元素
例如：
<html><p>我真的不是笨蛋</p></html>
其中**<html>** 中有一个元素，是："<p> 我真的不是笨蛋**</p>**"
而**<p>**中有一个元素，是："我真的不是笨蛋"
而属性，只能在开始标签当中，不能在结束标签当中！
例如：<input type="text">
type="text"就是一个属性。
而属性以："键:值"对的形式出现，多个属性之间用空格隔开。
一.<DOCTYPE>
1.作用：
定义文档信息，用来向浏览器传递这是一个HTML5文件。
（ps：在当今的主流浏览器中，即使不声明<DOCTYPE html>，浏览器仍然可以正确识别 ，不过这并不是一个好习惯！）
2.声明方式：
<!DOCTYPE html>
3.更古老的版本
在XTML 4.0.1版本中，声明需要引用DTD（文档类型定义）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4.注意
值得注意的是，不同的HTML版本声明方式不一样，且所包含的HTML元素也不一样！！
二.<html>
1.定义
<html> 标签表示HTML文档的根（根元素），用来表示文档中HTML的开始。
<html> 标签是所有其他HTML元素的容器，除了**<DOCTYPE>**。
2.作用
<html> 和**</html>** 标签限定了文档的开始点和结束点，在它们之间是文档的"头部"(<head> )和"身体"(<body>)。
3.注意
应该在<html>中始终包含(lang属性)，用来声明网页的语言。
例如：
<html lang="en"> </html>
三.<head>
1.定义
<head> 标签是"元数据 "(关于数据的数据)的容器，元数据 是有关HTML的数据，元数据不会被显示。
2.作用
可在**<head>** 标签中定义多个元素，用来："定义文档标题 "、"字符集 "、"样式 "、"脚本"和其他元数据。
3.可放置的元素
<title>(必须有)、<style>、<base>、<link>、<meta>、<script>、<noscript>
对于以上 标签 ，我们将在后续的章节中挨个讨论。
四.<title>
1.定义：
定义了：浏览器工具栏中的标题、添加到收藏页中的标题 、在搜索引擎结果中显示标题。
对于下面这个网页：
如果扒开这个页面的html文档，那么它的**<title>** 一定是"写文章-CSDN创作中心"，这是一个工具栏标题。
正如我们所料：
2.作用
显示网页名字
3.注意
一个HTML文档 只能**有一个<title>**元素。
五.<body>
1.定义
<body> 用来盛放html文档的数据(内容) ，而**<head>** 用来盛放html文档的元数据（数据的数据）。
2.作用
<body> 包含了HTML的所有内容："段落 "、"图像 "、"超链接 "、""表格 、"列表"等等。
3.注意
一个html 文档只能有一个**<body>**标签。
六.<h1> to <h6>
1.定义
从**<h1>** 到**<h6>** 分别代表了六个下级标题，例如**<h1>** 是一级标题，**<h3>**是三级标题。
2.作用
提供标题式布局。
3.注意
尽量不用放置多个<h1> 主标题，或者跳过**<h1>** 标题直接使用**<h2>**标题，应该从高到低逐级使用。
4.效果
例如下面代码：
html
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>结果：
七.<p>
1.定义：
段落标签，用来指定一段段落。
2.作用：
显示一段文字，例如：
html
<p>
在源代码中，
这一段
包含很多行，
但浏览器
忽略它。
</p>结果：
在代码中的换行，在html文档 呈现结果的时候并不展示出来，如果需要让html 结果也呈现换行效果，可以尝试使用每一行一个**<p>** 标签，或者在**<p>** 标签内**镶嵌<br>**换行标签。
3.注意：
使用**<p>** 的时候，html默认会在**<p>前方隐式** 的添加一个"<br>换行符 "，这个**<br>** 在代码中不会显示 ，但会在html 页面中作为效果展示出来。
在**<p>** 中如果有多个连续的空格，那么在html 文档呈现效果中，将只有一个空格被显示出来。即："多个连续空格默认为一个空格"。
html
<p>我真的不是 一个大笨蛋，不，你是一个 大笨蛋</p>效果：
八.<br>
1.定义
用来向html文档中插入换行符，类似于编程语言中的"\n"。
2.作用
换行符
3.效果
Go
<p>
离离原上草，<br>
一岁一枯荣。<br>
野火烧不尽，<br>
春风吹又生。<br>
远芳侵古道，<br>
晴翠接荒城。<br>
又送王孙去，<br>
萋萋满别情。<br>
</p>
<p><em>- 唐 白居易</em></p>结果：
九.<hr>
1.定义
用来分割主题 或者内容
2.作用
绘制一个水平分隔符
3.效果
html
<p>
离离原上草，<br>
一岁一枯荣。<br>
野火烧不尽，<br>
春风吹又生。<br>
远芳侵古道，<br>
晴翠接荒城。<br>
又送王孙去，<br>
萋萋满别情。<br>
</p>
<hr>
<p>- 唐 白居易</p>结果：
可以清晰的看到，出现了一道水平分隔符。
十.<!--.....-->
1.定义
在源代码中插入注释，注释不会在浏览器中显示。
2.作用
插入注释
3.注意
使用注释可以"隐藏"JavaScript文段。
不过要在结尾加入："//"，以防JavaScript执行"-->"。
html
<script type="text/javascript">
<!--
function displayMsg() {
alert("Hello World!")
}
//-->
</script>4.效果
html
<p>我是一个大笨蛋</p>
<!--真的吗？？-->结果：
可以看到："真的吗？？"文段并没有在浏览器中展示出来。
十一.空白的HTML
我们来看一个没有做过任何添加和修改的HTML代码，也就是最初始的状态：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>从上至下，分别为：<DOCTYPE>标签、<html>标签、<head>标签、<body>标签。
在实际开发中，我们一定要严格按照这个模板来实现，不能修改对应的位置！！