目录
个人名片：
😊作者简介：一名大一在校生，web前端开发专业
🤡 个人主页：几何小超
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡，学好前端
1.HTML5介绍
2.HTML5语义新特性
3.多媒体标签和新增表单标签
4.案例小结
1.HTML5介绍
什么是HTML5呢，就是从html原本上新增加了一些标签，能使我们前端开发工程师的写起来不需要一个一个去定义，而且在原先基础上增加了很多新特性来简化我们的代码，使别人来看我们的代码变得更加的整洁明亮，接下来就来认识认识我们HTML5的新标签
2.HTML5语义新特性
之前我们用html来写头部如果想要语义更明确得写成
<div class=“top”></div>
<!DOCTYPE html>
<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>
<style>
header
,nav,
section{
display: block;
height: 200px;
background-color: pink;
margin-top: 10px;
}
</style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>section</section>
</body>
</html>结果如图
那么其他标签大家可以去试试，我再次说明一下就可以了
现在是这些常用布局标签具体说明
3.新媒体标签 和新增表单标签
1.视频标签和音频标签
这个标签是HTML5在原先基础上引入进来的新标签，在HTML是没有音频和视频标签的，但是现在在HTML里面新增了这几个标签，都来认识一下吧
<audio> 标签定义声音，比如音乐或其他音频流。
属性 | 值 | 描述 |
autoplay | 如果出现该属性，则音频在就绪后马上播放。 | |
controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 | |
loop | 如果出现该属性，则每当音频结束时重新开始播放。 | |
preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 | |
url | 要播放的音频的 URL。 |
接下来我们就来试验一下各个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- <audio src="media/snow.mp3" controls="controls"></audio> -->
<audio controls="controls">
<source src="media/snow.mp3" type="audio/mpeg" />
<source src="media/snow.ogg" type="audio/ogg /">
</audio>
</body>
</html>先写一个audio，然后在写一个controls，这个显示控件的，就是更直观去显示这个播放按钮
source这个意思是来源的意思，意思就是说你的音频文件来源于哪里，这个我也只是看了下意思，
然后剩下我不用说了吧，直接引入就行了
2.视频标签
属性 | 值 | 描述 |
autoplay | 如果出现该属性，则视频在就绪后马上播放。 | |
controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 | |
pixels | 设置视频播放器的高度。 | |
loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 | |
preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 | |
url | 要播放的视频的 URL。 | |
pixels | 设置视频播放器的宽度。 |
3.新增表单标签
这里只是简单介绍了表单的标签，现在我们来一一去实现这些标签的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<ul>
<li>邮箱: <input type="email" /></li>
<li>网址: <input type="url" /></li>
<li>日期: <input type="date" /></li>
<li>日期: <input type="time" /></li>
<li>数量: <input type="number" /></li>
<li>手机号码: <input type="tel" /></li>
<li>搜索: <input type="search" /></li>
<li>颜色: <input type="color" /></li>
<li> <input type="submit" value="提交"></li>
</ul>
</form>
</body>
</html>4.案例小结
学以致用才能更好巩固知识，大家使用一个新特性可以来做一个表单，实现自己个人信息制表图
关键信息可以用xxx代替，嘻嘻，谢谢大家支持，我从头开始，因为之前东西有点杂乱无章了，现在开始专门发布前端知识点，谢谢大家支持
