HTML（Hyper Text Markup Language 的缩写）中文译为“超文本标记语言”，主要是通过 HTML 标签对网页中的文本、图片、声音等内容进行描述。
一、HTML 骨架结构
每种语言都有自己所必须遵守的格式，HTML 也不例外，也有自己的语言语法骨架格式：
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
1、HTML 标签：作用所有 HTML 中标签的一个根节点
2、head 标签：
作用：用于存放：title,meta,base,style,script,link 等标签，
注意在 head 标签中我们必须要设置的标签是 title
3、title 标签：
作用：让页面拥有一个属于自己的标题。
4、body 标签：
作用：页面在的主体部分，用于存放所有的 HTML 标签：p,h,a,b,u,i,s,em,del,ins,strong,img 等标签
Tips：HTML 结构是单根树状父子结构。
二、HTML 基本语法特性
1、HTML 对换行不敏感，对 tab 不敏感
HTML 只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab 无关。
2、空白折叠现象
HTML 中所有的文字之间，如果有空格、换行、tab 都将被折叠为一个空格显示。
3、标签页严格封闭
标签不封闭是灾难的！！！
三、HTML 标签介绍
1、标签格式
<标签名>封装的数据</标签名>
2、标签名大小写不敏感。
3、标签拥有自己的属性。
① 基本属性：bgcolor="red" 可以修改简单的样式效果
② 事件属性: onclick="alert('hello!');" 可以直接设置事件响应后的代码
4、标签的分类
在 HTML 页面中，带有“< >”符号的元素被称为 HTML 标签，如上面提到的 <HTML>、<head>、<body>都是 HTML 标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为 HTML 标签或 HTML 元素。
(1)双标签
<标签名> 内容 </标签名>
该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
(2)单标签
<标签 />
单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。
四、HTML 标签关系与语法
1、标签关系
标签的相互关系就分为两种：
1）嵌套关系（父子关系）
<head> <title> </title> </head>
标签嵌套时一定要注意标签的顺序，不能混乱嵌套，下面的这种方式是错误的
<head> <title> </head> </title> ×
2）并列关系（兄弟关系）
<head></head>
<body></body>
两个标签并列显示也称为兄弟关系。
建议：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个 tab 键的身位。如果是并列关系，最好上下对齐。
2、标签语法
① 标签不能交叉嵌套
② 标签必须正确关闭
③ 属性必须有值，属性值必须加引号
④ 注释不能嵌套。
注意： HTML 代码不是很严谨，有时候标签不闭合，也不会报错，但是要避免这种情况。
五、文档类型
<!DOCTYPE html>
这句话就是告诉我们使用哪个 html 版本，我们使用的是 html 5 的版本。 html 有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。
这句话其实就是网页的声明头，术语叫做 DocType Defintion,文档类型定义，简称 DTD。
标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的 XHTML 文档指定 XHTML 版本和类型，只有这样浏览器才能按指定的文档类型进行解析。
注意： 一些老网站可能用的还是老版本的文档类型比如 XHTML 之类的，但是 HTML5 的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用 HTML5 的文档类型就好了。
六、HTML 历史及不同版本
1、历史发展进程如下图
2、HTML 不同的版本
现在学习的是 HTML4.01 这个版本，这个版本是 IE6 开始兼容的。HTML5 是 IE9 开开始兼容的。但是 IE6、7、8 这些浏览器还不能过早的淘汰。但是随着技术的发展，HTML5 技术越来越成熟，越来越受欢迎，也逐渐的适应移动端的需求了。
HTML4.01 里面有两大种规范，每大种规范里面又各有 3 种小规范。所以一共 6 种规范（见下面）：
HTML4.01 里面规定了普通、XHTML 两大种规范。
HTML 觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？所以，HTML 就觉得，把一些规范严格的标准，又制定了一个 XHTML1.0。在 XHTML 中的字母 X，表示“严格的”。
一共有 6 种 DTD，说白了，HTML 第一行语句一共有 6 种：
有两种大规范，每个大规范里面又有三种小规范：
- HTML4.01
- Strict 严格的，体现在一些标签不能使用，比如 u
- Transitional 普通的
- Frameset 带有框架的页面
- XHTML1.0：严格体现在小写标签、闭合、引号
- Strict 严格的，体现在一些标签不能使用，比如 u
- Transitional 普通的
- Frameset 带有框架的页面
注意：HTML5 中极大的简化了 DTD，也就是说 HTML5 中就没有 XHTML 了。
七、HTML 头部
<head> 元素包含了所有头部标签元素。在 <head> 元素中可以插入脚本（script),样式文件，及各种信息。
1、<title> 元素
此标签定义了不同文档的标题。在 HTML/XHTML 文档中是必须的。
显示在搜索引擎结果页面的标题。
2、<base> 元素
此标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接。
3、<link> 元素
此标签定义了文档与外部资源之间的关系。通常用于链接到样式表。
4、<style> 元素
此标签定义了 HTML 文档的样式文件引用地址，需要指定样式文件来渲染 HTML 文档。
5、<meta> 元素
此标签描述了一些基本的元数据。这些数据不会显示在页面上，但会被浏览器解析。
6、<script> 元素
此标签用于加载脚本文件，如 JavaScript 文件。
八、<meta> 标签
1、定义字符集
语法：
<meta charset="UTF-8">
这句话是用来指定 HTML 页面采用的编码方式。
utf-8 是目前最常用的字符集编码方式，常用的字符集编码方式还有 gbk 和 gb2312。
gb2312 简单中文 包括 6763 个汉字
BIG5 繁体中文 港澳台等用
GBK 包含全部中文字符 是 GB2312 的扩展，加入对繁体字的支持，兼容 GB2312
UTF-8 则包含全世界所有国家需要用到的字符，使用 UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。
更多的编码知识请阅读这篇文章：字符编码
2、定义关键字
语法：
<meta name="keywords" content="html,css,xml,javascript">
设置了关键字，有利于搜索引擎搜索，这个技术叫做 SEO，search engine optimization，搜索引擎优化。
关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率
3、定义描述内容
语法：
<meta name="description" content="free web tutorials on html and css">
4、定义网页作者
语法：
<meta name="author" content="Tony">
5、刷新当前页面
语法：
<meta http-equiv="refresh" content="30">
九、语义化的 HTML 标签
HTML 标签其实就是为了给文字，图片添加语义，给不同的内容添加不同的语义，让读者能够更好的理解 HTML 页面。
好处：
1、方便代码的阅读和维护
2、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
3、使用语义化标签会具有更好地搜索引擎优化
核心：合适的地方给一个最为合理的标签。
如何查看 HTML 的语义是否良好：当我们去掉 CSS 之后，网页结构依然组织有序，并且有良好的可读性。
遵循的原则：先确定语义的 HTML ，再选合适的 CSS。
