HTML5&css3扩展知识
1.扩展语义化标签
以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>
发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签
| 标签 | 描述 |
|---|---|
| header | 定义了文档的头部区域 |
| nav | 定义文档的导航部分。 |
| article | 定义页面独立的内容区域。 |
| section | 定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。 |
| aside | 定义页面的侧边栏内容。 |
| footer | 标签定义文档或者文档的一部分区域的尾部 |
2.视频标签-video
基本使用
当前 元素支持三种视频格式： 尽量使用 mp4格式
语法
<video src="media/mi.mp4"></video>
兼容写法
由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持 <video> 标签播放视频
</ video >
上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本
video常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | sutoplay | 自动播放 |
| width | 像素 | 宽度 |
| height | 像素 | 高度 |
| loop | loop | 循环播放 |
| src | url | 播放源 |
| muted | muted | 静音播放 |
3.音频-audio
基本使用
当前 元素支持三种视频格式： 尽量使用 mp3格式
基本语法
<audio src="media/music.mp3"></audio>
兼容写法
由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可
< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的浏览器暂不支持 <audio> 标签。
</ audio>
上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本
常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 音频在就绪后马上播放 |
| controls | controls | 显示控件， 比如播放按钮 |
| loop | loop | 每当音频结束时重新开始播放 |
| src | src | 要播放的音频的URL |
小结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
- 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性
4.阿里图标
使用场景
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NHaeoAKH-1637502028315)(C:\Users\EDZ\Desktop\HTML&CSS基础\day19\课件\image\Snipaste_2021-06-28_14-01-29.png)]
原理：将小图标定义成字体，通过引入字体来展示这些小图标，因为此时的小图标相当于是一文字，所以支持文字对应的所有样式
使用步骤
登录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PADz6dqE-1637502028322)(C:\Users\EDZ\Desktop\HTML&CSS基础\day19\课件\image\Snipaste_2021-06-28_14-10-53.png)]
选择需要的图标加入购物车
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-54946MmE-1637502028326)(C:\Users\EDZ\Desktop\HTML&CSS基础\day19\课件\image\Snipaste_2021-06-28_14-11-53.png)]
全部选择完后，点击右上角购物车。下载代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CKUFpJoL-1637502028328)(C:\Users\EDZ\Desktop\HTML&CSS基础\day19\课件\image\Snipaste_2021-06-28_14-13-54.png)]
打开下载的文件中的 demo页面，其中会详细的介绍三种引入方式、各方式的优缺点以及对应代码。选择合适的一种方式引入到自己代码中即可。
5.倒影
-webkit-box-reflect呈现元素的倒影。目前只有谷歌内核浏览器支持倒影，所以该属性必须加兼容前缀-webkit。
<!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>
img {
margin-top: 500px;
/* above 表示生成的倒影在元素的上方； */
/* below 表示生成的倒影在元素的下方； */
/* left 表示生成的倒影在元素的左侧； */
/* right 表示生成的倒影在元素的右侧。 */
/* -webkit-box-reflect: 方位 ，偏移 遮罩 */
-webkit-box-reflect: above 10px linear-gradient(360deg, transparent, rgba(255, 255, 255, .6));
}
</style>
</head>
<body>
<img src="http://static.zzhitong.com/lesson-files/html/img/14-1-images/4.png" alt="">
</body>
</html>
6.column多列布局
<!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>
.newspaper {
/* 列数 */
column-count: 4;
/* 每列宽度 */
/* 浏览器会根据内容多少来推算更为合理的 列数 和宽度 */
column-width: 300px;
/* 列间距 */
column-gap: 40px;
/* 列之间边框样式 */
column-rule: 4px outset #ff00ff;
}
</style>
</head>
<body>
<div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>
</body>
</html>
7.自定义滚动条
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YYKFy0jl-1637502028330)(C:\Users\EDZ\Desktop\HTML&CSS基础\day19\课件\image\Snipaste_2021-06-28_15-47-31.png)]
8.filter属性
<!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>
img {
/* 给图像设置高斯模糊 */
/* 属性值不接受百分比值 */
/* filter: blur(30px); */
/* 使其看起来更亮或更暗 如果值是0%，图像会全黑。值是100%， */
/* filter: brightness(158%); */
/* 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化 */
filter: opacity(20%);
}
</style>
</head>
<body>
<img src="./media/mi9.jpg" alt="" width="500" height="500">
</body>
</html>
/* 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化 */
filter: opacity(20%);
}
</style>
```