目录
目录
一、HTML5的优势
HTML5作为HTML的最新版本，是HTML的传递和延续。经历HTML4.0、XHTML再到HTML5从某种意义上讲，这是HTML超文本标签语言的更新与规范过程。
HTML5的优势主要体现在兼容、合理、易用三个方面。
1、兼容
HTML5并不是对之前HTML语言颠覆性的革新，它的核心理念就是要保持与过去技术的完美衔接，因此HTML5有很好的兼容性。
- HTML5定义了一些可以省略结束标签的元素。
- HTML5中又恢复了对大写标签的支持。
- HTML5制定了一个通用的标准。
2、合理
HTML5中增加和删除的标签都是对现有的网页和用户习惯进行分析、概括而推出的。
3、易用
作为当下流行的标签语言，HTML5严格遵循 “简单至上”的原则。
- 简化的字符集声明。
- 简化的DOCTYPE。
- 以浏览器原生能力（浏览器自身特性功能）替代复杂的JavaScript代码。
二、HTML的基本结构
1、网页的基本结构：
<html>
<head></head>
<body></body>
</html>
(1)文件的扩展名必须是.html或.htm
（2）
<!DOCTYPE html> -->表示当前的网页支持html5标准
<html lang="en"> -->语言为英文
<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>Document</title> -->网页标题
</head>
<body>
</body>
</html>
2、标签分类
所有用'<>'括起来的元素都称为标签(标记)
A、双标签：是指由开始和结束两个标签符组成的标签。<标签名>内容</标签名>
B、单标签：是指用一个标签符号即可完整地描述某个功能的标签。< 标签名 />
*标签的属性是放在起始标签中
例如："<html lang='en'>"中'lang'表示的html标签的属性
三、HTML的常用标签
1、文本标签：
A、标题标签：<hn>文本</hn> , n的取值在1~6之间，数字越大字体越小,可以自动换行
B、段落标签：<p>内容</p>,会自动换行
C、显示文本：<span>内容</span>,不会自动换行
D、水平线: <hr 属性="属性值" />
水平线隔开，使得文档结构清晰，层次分明。
| 属性名 |
含义 |
属性值 |
| align |
设置水平线的对齐方式 |
可选择left、right、center三种值，默认为center，居中对齐显示。 |
| size |
设置水平线的粗细 |
以像素为单位，默认为2像素。 |
| color |
设置水平线的颜色 |
可用颜色名称、十六进制#RGB、rgb(r,g,b)。 |
| width |
设置水平线的宽度 |
可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%。 |
E、居中标签：<center></center>
2、文本样式标签：
<font 属性="属性值">文本内容</font>
eg： <font face='字体' color='文字颜色' size='字号'></font>
文本样式标签属性：
| 属性名 |
含义 |
| face |
设置文字的字体，例如微软雅黑、黑体、宋体等 |
| size |
设置文字的大小，可以取1到7之间的整数值 |
| color |
设置文字的颜色 |
3、文本格式标签：
| 标记 |
显示效果 |
| <b></b>和<strong></strong> |
文字以粗体方式显示（XHTML推荐使用strong） |
| <i></i>和<em></em> |
文字以斜体方式显示（XHTML推荐使用em） |
| <s></s>和<del></del> |
文字以加删除线方式显示（XHTML推荐使用del） |
| <u></u>和<ins></ins> |
文字以加下划线方式显示（XHTML不赞成使用u） |
4、语义标签：只表示某种特定的含义
A、mark：高亮显示某些字符
B、cite：创建一个引用，用于对文档引用参考文献的说明，使用了该标签，被标注的文档内容将以斜体的样式展示在页面中。
5、换行标签：<br />
6、特殊字符：
| 特殊字符 |
描述 |
字符的代码 |
| 空格 |
空格符 |
|
| < |
小于号 |
< |
| > |
大于号 |
> |
| & |
和号 |
& |
| ￥ |
人民币 |
¥ |
| © |
版权 |
© |
| ® |
注册商标 |
® |
| ° |
摄氏度 |
° |
| ± |
正负号 |
± |
| × |
乘号 |
× |
| ÷ |
除号 |
÷ |
| ² |
平方2（上标2） |
² |
| ³ |
立方3（上标3） |
³ |
7、图像标签
7.1、常见的图像格式
GIF：支持动画、采用无损压缩、支持透明处理。通常用来做Logo、色彩相对单一的图像
PNG：体积小、支持透明、不支持动画、颜色过渡平滑
JPG(JPEG)：支持的颜色多(超过256种)、体积大、采用有损压缩技术
7.2、图像标签：<img />
| 属性 |
属性值 |
描述 |
| src |
URL |
图像的路径 |
| alt |
文本 |
图像不能显示时的替换文本 |
| title |
文本 |
鼠标悬停时显示的内容 |
| width |
像素（XHTML不支持%页面百分比） |
设置图像的宽度 |
| height |
像素（XHTML不支持%页面百分比） |
设置图像的高度 |
| border |
数字 |
设置图像边框的宽度 |
| vspace |
像素 |
设置图像顶部和底部的空白（垂直边距） |
| hspace |
像素 |
设置图像左侧和右侧的空白（水平边距） |
| align |
left |
将图像对齐到左边 |
| right |
将图像对齐到右边 |
|
| top |
将图像的顶端和文本的第一行文字对齐，其他文字居图像下方 |
|
| middle |
将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方 |
7.3、路径：文件的存储位置
A、绝对路径：从盘符开始的路径或完整的网络路径
比如：E:\deyun前端\9月新班\2021-9-25\code\images\7.png
http://localhost:8080/code/images/7.png
B、相对路径：从当前文件夹开始的路径，通过层级关系来描述文件的位置在使用相对路径时，我们使用一个点（.）来表示当前目录，
使用两个点（..）来表示当前目录的父目录。
./ ：代表当前文件夹(目录)
(对于相同目录下的文件，直接写文件名即可)
../：代表当前文件夹的上一级文件夹(目录)