本文已参与「新人创作礼」活动，一起开启掘金创作之路。
🔥 本文由 程序喵正在路上原创，在稀土掘金首发！
💖 系列专栏：HTML+CSS
🌠 首发时间：2022年9月9日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾
🌟 一以贯之的努力 不得懈怠的人生
HTML5和CSS3
1. 狭义
狭义的 HTML5 和 CSS3 指的是 HTML5 结构标签本身和 CSS3 相关样式
2. 广义
广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript，这个集合有时候称为 HTML5 和朋友，通常缩写为 HTML5。虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势
HTML5的新特性
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等
这些新特性都有兼容性问题，基本是 IE9+ 以上的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性
1. 语义化标签
以前布局，我们基本都用 div 来做，div 对于搜索引擎来说是没有语义的
HTML5 新增了语义化标签：
<header>：头部标签<nav>：导航标签<article>：内容标签<section>：定义文档某个区域，可看成一个大的 div<aside>：侧边栏标签<footer>：尾部标签
<!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>语义化标签</title>
<style>
header,
nav {
width: 800px;
height: 120px;
background-color: cyan;
border-radius: 15px;
margin: 15px auto;
padding: 5px;
}
section {
width: 500px;
height: 300px;
border-radius: 15px;
background-color: skyblue;
padding: 5px;
}
</style>
</head>
<body>
<header>头部标签</header>
<nav>导航栏标签</nav>
<section>某个区域</section>
</body>
</html>
注意：
- 这种语义化标准主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在 IE9 中，需要把这些元素转换为块级元素
- 其实，我们移动端更喜欢使用这些标签
2. 多媒体标签
新增的多媒体标签主要包含两个：
- 音频：
<audio> - 视频：
<video>
使用它们可以很方便地在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件
视频标签 <video>
HTML5 在不适用插件的情况下，也可以原生地支持视频格式文件的播放，当然，支持的格式也是有限的
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES，从 Firefox 21 版本开始，Linux 系统从 Firefox 30 开始 | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES，从 Opera 25 版本开始 | YES | YES |
建议使用 MP4 格式的视频
语法：
<video src="文件地址" controls="controls"></video>
考虑到兼容性，可以这样写
<video controls="controls" width="300">
<source src="movie.ogg" type="video/ogg" >
<source src="movie.mp4" type="video/mp4" >
您的浏览器暂不支持 <video> 标签播放视频
</video>
常见属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加 muted 来解决自动播放问题） |
| controls | controls | 向用户显示播放控件 |
| width | pixels（像素） | 设置播放器宽度 |
| height | pixels（像素） | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto（预先加载视频），none（不先加载视频） | 规定是否预加载视频（如果有了 autoplay，就忽略该属性） |
| src | url | 视频 url 地址 |
| poster | Imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
<!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>video标签</title>
<style>
video {
width: 100%;
}
</style>
</head>
<body>
<video src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi12sltli3b/video1-2.mp4" autoplay="autoplay"
muted="muted" controls="controls" loop="loop"></video>
</body>
</html>
音频标签 <audio>
HTML5 在不适用插件的情况下，也可以原生地支持音频格式文件的播放，当然，支持的格式也是有限的
当前 <audio> 元素支持三种音频格式：
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
建议使用 MP3 格式的音频
语法：
<audio src="文件地址" controls="controls"></audio >
考虑到兼容性，可以这样写
<audio controls="controls" width="300">
<source src="music.mp3" type="audio/mpeg" >
<source src="music.ogg" type="audio/ogg" >
您的浏览器暂不支持 <audio > 标签播放音频
</audio >
常见属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 音频就绪自动播放 |
| controls | controls | 向用户显示播放控件 |
| loop | loop | 播放完是否继续播放该音频，循环播放 |
| src | url | 音频 url 地址 |
<!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>音频标签audio</title>
</head>
<body>
<h3>Shadow of the sun</h3>
<audio
src="https://webfs.ali.kugou.com/202208151945/861843bcad9089cb46825a6ff2a40868/G242/M09/1B/01/0pQEAF-NTZKAP-HiACOcMEe9M0M964.mp3"
autoplay="autoplay" controls="controls">
</audio>
</body>
</html>
温馨提示：谷歌浏览器把自动播放禁止了，目前还无法解决，等到学习 js 才能解决
多媒体标签总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把视频和音频自动播放禁止了
- 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过 js 解决）
- 视频标签是重点，我们经常设置自动播放，不使用 controls 控件、循环和设置大小属性
3. 新增的input类型
| 属性值 | 说明 |
|---|---|
| type="email" | 限制用户输入必须为 Email 类型 |
| type="url" | 限制用户输入必须为 URL 类型 |
| type="date" | 限制用户输入必须为日期类型 |
| type="time" | 限制用户输入必须为时间类型 |
| type="month" | 限制用户输入必须为月类型 |
| type="week" | 限制用户输入必须为周类型 |
| type="number" | 限制用户输入必须为数字类型 |
| type="tel" | 手机号码 |
| type="search" | 搜索框 |
| type="color" | 生成一个颜色选择表单 |
<!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>新增input表单</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>
效果图：
重点记住：number、tel、search 这三个
4. 新增的表单属性
| 属性 | 值 | 描述 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off / on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 autocomplete="on"，关闭 autocomplete="off" 需要放在表单内，同时加上 name 属性，同时成功提交 |
| multiple | multiple | 可以多选文件提交 |
可以通过以下设置方式修改 placeholder 里面的字体颜色：
input::placeholder {
color: cyan;
}
<!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>新增表单属性</title>
<style>
input::placeholder {
color: cyan;
}
</style>
</head>
<body>
<form action="">
<input type="search" name="" id="" required="required" placeholder="请输入搜索内容" autofocus="autofocus"
autocomplete="off">
<input type="file" name="" id="" multiple="multiple">
<input type="submit" value="提交">
</form>
</body>
</html>
