一、HTML5 的新特性
1.新增语义化标签
HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题,基本是 **IE9+ 以上版本的浏览器**才支持,如果不考虑兼容性问题,可以大量使用这些新特性。
注意:只需要关注开发常用的新特性即可。
以前布局,我们基本用 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>
:定义文档某个区域<asider>
:侧边栏标签<footer>
:尾部标签
2.新增视频标签
1. 视频<video>支持格式--3种
![](https://i-blog.csdnimg.cn/blog_migrate/dd509fc030d68fa1d018a18c1c26cf19.png)
2.视频<video>语法 :
<video src="文件地址" controls="controls"></video>
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持 <video> 标签播放视频
</ video >
3. 视频<video>——常见属性
![](https://i-blog.csdnimg.cn/blog_migrate/d6417423a06606e9212ead443633cfc2.png)
3.新增音频标签
1. 音频<audio>支持格式--3种
![](https://i-blog.csdnimg.cn/blog_migrate/5a327329fcaa4cc2133219cf1aac5a65.png)
2. 音频<audio>语法
<audio src="文件地址" controls="controls"></audio>
< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的浏览器暂不支持 <audio> 标签。
</ audio>
3. 音频<audio> 常见属性
![](https://i-blog.csdnimg.cn/blog_migrate/11070ff8f12b1f7e2efad6ce67aa0167.png)
- 谷歌浏览器把音频和视频自动播放禁止了
4. 多媒体标签总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加 muted 属性来静音播放视频,音频不可以(可以通过JavaScript解决)
- 视频标签是重点,我们经常设置自动播放,不使用 controls 控件,循环和设置大小属性
4.新增input表单--常用的3个
- 重点记住: number tel search 这三个
5.新增表单属性--常用的2个
![](https://i-blog.csdnimg.cn/blog_migrate/352f8aca1635d761649e855073d133fc.png)
二、CSS3 的新特性
1.CSS3新增属性选择器
1.1CSS3新增属性选择器(上)
![](https://i-blog.csdnimg.cn/blog_migrate/54ae0d4a39a62d391cf612b840609d1b.png)
1.2.CSS3新增属性选择器(下) ![](https://i-blog.csdnimg.cn/blog_migrate/87a2a1bbeb08dd5e64c2566417167565.png)
2.CSS3新增结构伪类选择器---选择第n个元素
![](https://i-blog.csdnimg.cn/blog_migrate/5a67876e187d9ed820fc0a56c5fdc61f.png)
- n 可以是数字,关键字和公式
- n 如果是数字,就是选择第 n 个子元素, 里面数字从1开始…
- n 可以是关键字:even 偶数,odd 奇数
- n 可以是公式:常见的公式如下 ( 如果n是公式,则从0开始计算,但是第 0 个元素或者超出了元素的个数会被忽略 )
2.1.CSS3新增nth-child选择器(上)
2.2.CSS3新增nth-child选择器(下)
之前的参数是n,现在的参数是2n,也就是偶数了。还有5n了。
2.3.nth-child和nth-of-type的区别
![](https://i-blog.csdnimg.cn/blog_migrate/cbbb8075e5781e7fc3229d7d02a2f0c0.png)
2.4.小结 :
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩子
- 关于 nth-child(n) 我们要知道 n 是从 0 开始计算的,要记住常用的公式
- 如果是无序列表,我们肯定用 nth-child 更多
- 类选择器、属性选择器、伪类选择器,权重为 10。
3.伪元素选择器(重点)
1.CSS3新增伪元素选择器使用场景和由来
![](https://i-blog.csdnimg.cn/blog_migrate/1097fd414c564334180cd03a667613a1.png)
- before 和 after 创建一个元素,但是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- 语法: element::before {}
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为 1
2.CSS3新增伪元素选择器基本使用
3.伪元素选择器使用场景1:伪元素字体图标
阿里的先link,然后在元素中fon-family,最后在content中吧&#x转换为\就行了。
p::before {
position: absolute;
right: 20px;
top: 10px;
content: '\e91e';
font-size: 20px;
}
4.伪元素选择器使用场景2:仿土豆效果
鼠标放上去会看到黑色半透明的效果。
5.伪元素选择器使用场景3:伪元素清除浮动--4种方法
![](https://i-blog.csdnimg.cn/blog_migrate/f43e99fb69f251b9026b85c603aca999.png)
![](https://i-blog.csdnimg.cn/blog_migrate/baf3e2ecab4d67c475042f42a17874ae.png)
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
![](https://i-blog.csdnimg.cn/blog_migrate/2447eeb344f01dcde517ca0aad5d46d2.png)
.clearfix:before,.clearfix:after {
content:"";
display:table;
}.clearfix:after {
clear:both; }
二、CSS3 的新特性
1.CSS3盒子模型border--不会撑大盒子
CSS3中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为 content-box,border-box ,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
box-sizing:content-box
盒子大小为 width + padding + border (以前默认的)box-sizing: border-box
盒子大小为 width
如果盒子模型我们改为了 box-sizing: border-box ,那padding 和 border就不会撑大盒子了(前提 padding 和 border 不会超过 width 宽度)
2.CSS3 其他特性(了解)
1. 图片变模糊
filter: 函数(); 例如: filter: blur(5px); blur模糊处理 数值越大越模糊
2. 计算盒子宽度 width: calc 函数
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100% - 80px);
3.CSS3 过渡(重点)
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
![](https://i-blog.csdnimg.cn/blog_migrate/662dc5f7c6eb1feb8eaa631e6286debb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a0b11be243c09d9ba3e3c2aa99dcf211.png)
![](https://i-blog.csdnimg.cn/blog_migrate/312666509a3f1cc14ca1d66558621c57.png)
1.CSS3过渡练习---进度条案例