引言
HTML（超文本标记语言）是一种用于创建网页的标准标记语言，而HTML5是HTML最新的修订版本。
一、HTML5基本结构
<!DOCTYPE html>是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏，来告知浏览器当前文档使用的是HTML5标准。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
主体内容
</body>
</html>
二、HTML5的一些常用标签
2.1 标题标签
双标签，1至6级，文字加粗，文字变大程度1~6级逐级递减，独占一行。
注：在SEO中，为了能够帮助搜索引擎快速理解页面结构，一般h1在一个页面中最好只使用一次（没有强制规定），h2-h6虽然没有使用限制，但是需要按顺序使用以保持逻辑的连贯性；HTML5新引入了<section>区块之后，在每一个独立的<section>里面，都可以各自使用一个<h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>
2.2 段落标签
双标签，段落中间存在缝隙，独占一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<p>这是段落一</p>
<p>这是段落二</p>
</body>
</html>
2.3 换行标签
单标签，在当前使用位置强制换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<p>这是一个HTML知识点总结</p>
<p>这是一个<br>HTML知识点总结</p>
</body>
</html>
2.4 水平线标签
单标签，单行显示一条水平线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
这是一个HTML知识点总结
<hr>
这是一个HTML知识点总结
</body>
</html
2.5 文本格式化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<!-- 文字加粗 -->
<b>文字加粗</b>
<strong>文字加粗</strong>
<!-- 文字下划线 -->
<u>文字下划线</u>
<ins>文字下划线</ins>
<!-- 文字倾斜 -->
<i>文字倾斜</i>
<em>文字倾斜</em>
<!-- 文字删除线 -->
<s>文字删除线</s>
<del>文字删除线</del>
</body>
</html>
2.6 图片标签
单标签img的一些属性：
1、src：目标图片的路径
注：绝对路径与相对路径
绝对路径 -> c:/xxx 或者 网络图片直接复制的路径
相对路径 -> 同级文件夹 ./
上级文件夹 ../
2、alt： 替换文本
图片加载失败时，显示alt文本内容；图片加载成功时，不显示alt文本内容。
3、tittle： 提示文本
鼠标悬停时显示的文本
注：tittle不仅可以用在img标签中，还可以用在其他标签中。
4、width和height：设置当前图片的高度和宽度
" "内写数字即可，不用写单位
注：两个属性只写一个时，另一个属性会等比例放大 两个属性同时写，图片可能会变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<!-- <img src="" alt="" tittle="" width="" height="" > -->
<img src="./images/1.jpg" alt="">
</body>
2.7 链接标签
双标签<a></a>的一些属性：
1、href：目标网页的路径 （a标签点击后跳转的指定页面）
外部链接：外部网页
内部链接：文件夹内部文件
注：herf="#"表示空链接 回到页面顶部 或不确定跳转页面用#进行链接占位
2、target：目标网页的打开形式
_self: 默认值，在当前窗口跳转（覆盖原网页）
_blank: 在新窗口跳转 （保留原网页）
双标签<a></a>的一些显示特点：
1、a标签默认文字存在下划线
2、a标签未点击时 字体显示蓝色
3、a标签点击后，字体显示紫色（清除浏览器历史记录字体颜色可恢复成蓝色）
注：可在css中使用t ext-decoration:none 去除a标签的默认下划线，使用 color:inherit 让字体颜色继承父元素的颜色或手动指定颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<a href="">这是一个链接</a>
</body>
</html>
2.8 列表标签
2.8.1 无序列表
1、无序列表：没有顺序之分的列表
2、显示特点：列表每一项前默认有圆点标识和缩进效果，属性type可改变标识样式
type属性值：desc实心圆（默认）
square方形
circle空心圆
注：可在css中使用 list-style:none 清除列表的默认样式
3、标签：
ul： 表示无序列表的整体，只能包含li标签
li： 表示无序列表的每一项，包含每一行的内容，可以包含任意内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
</body>
</html>
2.8.2 有序列表
1、有序列表：有顺序之分的列表
2、显示特点：列表每一项前默认有序号标识，属性type可改变序号标识
type属性值：I i A a 1（默认）
3、标签：
ol： 表示有序列表的整体，只能包含li标签
li： 表示有序列表的每一项，包含每一行的内容，可以包含任意内容
4、其他属性：
start=“ ” : 从……开始正序
reversed ：倒序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<ol start="5" reversed>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ol>
</body>
</html>
2.8.3 定义列表
dl：定义列表，dl中只能包含dt和dd
dt：定义列表的标题，可以包含任何内容
dd：定义列表的描述/详情，可以包含任何内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>HTML知识点总结</dd>
<dd>HTML知识点总结</dd>
<dd>HTML知识点总结</dd>
<dt>HTML</dt>
<dd>HTML知识点总结</dd>
<dd>HTML知识点总结</dd>
<dd>HTML知识点总结</dd>
</dl>
</body>
</html>
2.9 表格标签
1、嵌套规则：table嵌套tr，tr嵌套td/tr
2、标签说明： table：标签
tr：行
th：表头单元格
td内容单元格
thead：表格头部部分，表格头部内容
tbody：表格主题，包含表格主要内容
tfoot：表格底部，汇总信息，一般为最后一行
3、边框：表格默认没有边框，用 border属性添加边框
4、合并规则
<td rowspan=" "></td>
rowspan：行合并，在需要合并的最上面的行添加 rowspan=" "，" "内写需要合并的行数，并删除其他行中对应的
<td colspan=" "></td>
colspan：列合并，在需要合并的最左面的列添加 colspan=" "，" "内写需要合并的列数，并删除当前行中其他的<td>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<!-- 表格外框 -->
<table border="1">
<!-- 标头 -->
<caption>课程表</caption>
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" align="center">a1</td>
<!-- <td>a1</td> -->
<td>a1</td>
</tr>
<tr>
<td>b1</td>
<td>b1</td>
<td rowspan="2" align="center">b1</td>
</tr>
<tr>
<td>c1</td>
<td>c1</td>
<!-- <td>c1</td> -->
</tr>
</tbody>
</table>
</body>
</html>
2.10 表单标签
2.10.1 input
1、type的属性值
text：文本框，用于输入单行文本
password：密码框
radio：单选框 <input type="radio" name=" " checked>
name：控件分组，name值相等的为一组 每次只能选择一个（实现单选）
checked：每次刷新默认选中
checkbox：多选框（复选框）
checked默认选中
disabled不可选
file：上传文件 <input type="file" multiple>
file：默认每次只能上传一个文件
multiple：可以实现文件多选功能
accept：设置接收文件的类型
color:调色板，value设置指定颜色
submit：提交按钮
reset：重置按钮
date：日期，value设置指定日期
time：时间，value设置指定时间
search：搜索
range:进度条，value设置进度条最大数值
number：数值，value设置显示数值，max设置可选择最大数值，min设置可选择最小数值
tel：手机号，maxlength设置手机号输入最大长度
2、placeholder属性：文本框的占位文本 提示信息 文本框和密码框都可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<input type="text" placeholder="请输入你的名字">
<br>
<input type="password">
<br>
<input type="submit">
<br>
<input typr="reset">
<br>
<input type="radio" name="a">男
<input type="radio" name="a">女
<br>
<input type="checkbox">篮球
<input type="checkbox" checked>网球
<input type="checkbox">羽毛球
<input type="checkbox" disabled>足球
<br>
<input type="color" value="#ff0000">
<br>
<input type="date" value="2024-02-21">
<br>
<input type="time" value="12:00">
<br>
<input type="search">
<br>
<input type="range" value="100">
<br>
<input type="number" value="3" max="10" min="1">
<br>
<input type="tel" maxlength="11">
<br>
<input type="file" accept="image/jpg,image/png">
<br>
</body>
</html>
2.10.2 label
扩大点击范围 文本框、密码框、上传文件、单选、多选、下拉、文本域均可用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<!-- 正常写法：<input type="redio" id = "man">男 -->
<!-- 写法一 label只包裹内容 不包裹控件 设置label的for属性值等于表单控件的id属性值相同-->
<input type="redio" id="man"><label for="man">男</label>
<!-- 写法二 label包裹内容和控件 不需要属性-->
<label><input type="redio">男<label>
</body>
</html>
2.10.3 文本域
文本域不用css设置样式尺寸时可以在右下角拖拽变换尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<textarea>提示文字</textarea>
<html>
2.11 多媒体标签
1、标签：audio：音频标签
video：视频标签
注：audio和video的所有属性方法是通用的
2、属性：
src:视频路径;
controls:显示控件；属性值 ：controls
loop：是否循环播放；属性名：loop; 属性值：loop;
dom.currentTime：视频当前播放的时间，音频/视频播放的当前时间(以秒计);
playbackRate：设置或返回音频/视频播放的速度
注：设置播放的速度,1--16最大16倍速;0-1慢速
dom.duration：返回当前音频/视频的长度（以秒计）
ended：返回音频/视频的播放是否已结束(结束返回true 没结束返回false);
muted：设置或返回音频/视频是否静音 布尔值
paused：返回音频/视频是否暂停 布尔值
volume：设置或返回音频/视频的音量
3、方法：
load()：重新加载音频/视频元素
play()：开始播放音频/视频
pause()：暂停当前播放的音频/视频
4、事件：
canplaythrough ：音频/视频缓冲完成 （当资源加载完毕触发该事件）
timeupdate ： 正在播放的事件（播放进度改变的时候触发）
ended：目前的播放列表已结束触发
三、HTML5的一些新特性
3.1 语义化标签
HTML5中提供了语义化标签来创建更好的页面结构
Q:增加了语义化标签有什么优点：
A: 1、方便搜索引擎查找内容，提高SEO（Search Engine Optimization 搜索引擎优化）效果
2、便携开发，提高开发效率，增加点啊可读性
<!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>
<div>
<!-- 定义页面头部内容 -->
<header></header>
<!-- 定义导航内容 -->
<nav></nav>
<!-- 定义侧边框 -->
<aside></aside>
<!-- 定义文章内容 -->
<article></article>
<!-- 定义文章中的一块内容 -->
<section></section>
<!-- 定义页尾内容 -->
<footer></footer>
</div>
</body>
</html>
3.2 原生多媒体标签
HTML5提供了audio和video的原生音视频标签，不需要依赖其他的插件即可实现音视频播放。
3.3 表单增强
HTML5新增了许多表单的输入类型，比如color、email、range、number、date、time，其中email自带邮箱格式校验（输入需要存在@），也新增了许多表单的属性和方法，大大提升用户体验和开发效率。
3.4 Web Storage
WebStorage是HTML5新增的一个会话存储对象，提供了在浏览器中存储数据的功能，可以分为localStorage（本地存储）和sessionStorage（会话存储）。
Q：WebStorage和cookie有什么区别？
A： cookie在服务端存储数据，大小为4KB，会随着请求发到服务器，过期时间必须手动设置，否则浏览器关闭则消失，存储格式必须是字符串，不能直接存对象；而WebStorage是在客户端存储数据，不随请求发服务器，而且存储空间有5MB，比cookie更大，且WebStorage有自带的一些方法，不需要像cookie一样去复杂的封装。
Q：localStorage和sessionStorage有什么区别？
A： sessionStorage和localStorage的数据都保存在客户端，但sessionStorage下的数据仅在当前页面打开期间存在，关闭页面或者浏览器数据就消失了，即使不同的标签页，数据也不会共享；而localStorage下的数据尽管关闭页面或者浏览器，数据仍旧存在，除非手动删除或者清除缓存。
Q：localStorage有哪些方法？
A： 1、setItem(key,value): 用于向localStorage以键值对的方式存储数据，其中value会自动被转为字符串类型；
2、getItem(key)：用于从localStorage获取数据，若没有返回null；
3、removeItem(key)：用于从localStorage中删除指定数据；
4、clear()：清除localStorage中的所有数据；
5、key(index)：用于从localStorage获取当前索引下的value。
HTML5还有许多新特性，但是先写到这里啦~
