一、HTML5的优势
1.兼容
HTML5并不是对之前HTML语言颠覆性的革新，它的核心理念就是要保持与过去技术的完美衔接，因此HTML5有很好的兼容性。
2.合理
HTML5中增加和删除的标签都是对现有的网页和用户习惯进行分析、概括而推出的。
3.易用
作为当下流行的标签语言，HTML5严格遵循 “简单至上”的原则。
简化的字符集声明。
简化的DOCTYPE。
以浏览器原生能力（浏览器自身特性功能）替代复杂的JavaScript代码。
二、HTML5结构
1.HTML5文档基本格式
<!DOCTYPE html>//文档类型声明
<html>//根标签
<head>//头部标签
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>//主体标签
</body>
</html>| <!DOCTYPE>标签 | <html>标签 | <head>标签 | <body>标签 |
|---|---|---|---|
| <!DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。 | DOCTYPE> 标签之后，也称为根标签，用于告知浏览器其自身是一个 HTML 文档。 | 定义HTML文档的头部信息，也称为头部标签，紧跟在<html>标签之后，主要用来封装其他位于文档头部的标签。 | 定义HTML文档所要显示的内容，也称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内。 |
文件的扩展名必须是.html或.htm
三、标签概述
在HTML页面中，带有"<>"的元素被称为标签
1.标签的分类
双标签：由开始和结束两个标签组成的标签
一般用法为 <标签名>内容</标签名>
单标签：指一个标签符号即可完整地描述某个功能的标签
一般用法为<标签名/>
2.文档头部相关标签
<title>:<title>标签用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标签之内。
<meta/>:<meta />标签用于定义页面的元信息，可重复出现在<head>头部标签中。
一个HTML文档只能含有一对<title></title>标签，<title></title>之间的内容将显示在浏览器窗口的标题栏中。
3.HTML的常用标签
1.文本标签
| 标题标签 | <hn>文本</hn> | n的取值在1~6之间，数字越大字体越小,可以自动换行 |
| 段落标签 | <p>内容</p> | 会自动换行 |
| 显示文本 | <span>内容</span> | 不会自动换行 |
| 水平线 | <hr color='' width='' size=''/> | color选择颜色；width选择宽度 ；size选择粗细 |
| 居中标签 | <center></center> |
2.文本样式标签
<font face='字体' color='文字颜色' size='字号'></font>
3.文本格式标签
| 文字加粗 | <b></b> 或 <strong></strong> |
| 斜体 | <i></i> 或 <em></em> |
| 删除线 | <s></s> 或 <del></del> |
| 下划线 | <u></u> 或 <ins></ins> |
4.语义标签：只表示某种特定的含义
<mark><mark>：高亮显示
<cite><cite>：引用，通常用于指定内容的出处
5.换行标签
<br />
6.特殊字符标签
| 空格 |  ； |
| 上标 | <sup></sup> |
| 下标 | <sub></sub> |
| 版权符号 | © |
| 注册商标 | ® |
| 摄氏度 | ° |
| 正负号 | ± |
| 除号 | ÷ |
7.图像标签
常见的图像格式：
GIF：支持动画、采用无损压缩、支持透明处理。通常用来做Logo、色彩相对单一的图像
PNG：体积小、支持透明、不支持动画、颜色过渡平滑
JPG(JPEG)：支持的颜色多(超过256种)、体积大、采用有损压缩技术
图像标签：
<img src='图像的URL' alt='图片加载异常时的提示信息' width='宽度' height='高度' border='边框' title='鼠标悬停在图像上的提示信息 'vspace='垂直边距' hspace='水平边距' align='对齐方式'/>
8.路径：文件的存储位置
绝对路径：从盘符开始的路径或完整的网络路径
E:\A\B\C\D\images\1.png
http://localhost:8080/code/images/7.png
相对路径：从当前文件夹开始的路径，通过层级关系来描述文件的位置
./ ：代表当前文件夹(目录)
../：代表当前文件夹的上一级文件夹(目录)