　　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。

巴特西

HTML 初始