html5css3

1.html5新增语义化标签

2.新增多媒体标签

视频<video>格式：map4,webm,ogg

html 复制代码

<video controls="controls" autoplay="autoplay" muted="muted" loop="loop">
    <source src="xxx.mp4" type="video/mp4">
    <source src="xxx.ogg" type="video/ogg">
    你的浏览器不支持video标签。
</video>

|----------|------------------------|---------------------|
| 属性 | 值 | 描述 |
| autoplay | autoplay | 自动播放（谷歌浏览器添加muted） |
| controls | controls | 展示播放控件 |
| width | px | 宽度 |
| height | px | 高度 |
| loop | loop | 循环播放 |
| preload | auto预先加载视频 none不预先加载视频 | 是否预先加载（如果自动播放忽略该属性） |
| src | url | 视频url地址 |
| poster | imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |

音频<audio>格式：mp3,wav,ogg

html 复制代码

<audio controls="controls" autoplay="autoplay" loop="loop">
    <source src="xxx.mp3" type="audio/mp3">
    <source src="xxx.ogg" type="audio/ogg">
    你的浏览器不支持audio 标签。
</audio >

|----------|---------------------------------|--------------------|
| 属性 | 值 | 描述 |
| autoplay | autoplay | 自动播放（谷歌浏览器添加muted） |
| controls | controls | 展示播放控件 |
| muted | muted | 静音播放 |
| preload | auto预先加载视频 none不预先加载视频 metadata | 是否预先加载 |
| loop | loop | 循环播放 |
| src | url | 视频url地址 |

总结：音频和视频标签的使用方式基本一致

浏览器支持情况不同

谷歌浏览器把音频视频自动播放禁止了

视频标签添加muted属性静音播放，音频不可以要通过js

验证的时候必须添加form表单域，点击提交按钮可以验证表单

4.html5新增表单属性

|--------------|-----------|---------------------------|
| 属性 | 值 | 说明 |
| required | required | 必填 |
| polaceholder | 提示文本 | 表单提示信息 |
| autofocus | autofocus | 自动聚焦 |
| autocomplete | off/on | 加上name属性，显示之前输入过的值，一般写off |
| multiple | multiple | 可以多选文件上传 |

5.css3新增选择器

属性选择器、结构伪类选择器权重为10、伪元素选择器权重为1

属性选择器

|------------------|--------------------------|
| 选择符 | 简介 |
| div[att] | 选择具有att属性的div元素 |
| div[att=val] | 选择具有att属性且属性值等于val的div元素 |
| div[att^=val] | 选择具有att属性且以val开头的div元素 |
| div[att$=val] | 选择具有att属性且以val结尾的div元素 |
| div[att*=val] | 选择具有att属性且值包含val的div元素 |

结构伪类选择器nth-child,nth-of-type

一般用于选择父级里面的第几个孩子

|--------------------|--------------------------------------------|
| 选择符 | 简介 |
| div:first-child | 匹配父元素中的第一个div元素 |
| div:last-child | 匹配父元素中的最后一个div元素 |
| div:nth-child(n) | 匹配父元素中的第n个div元素， even，odd，2n,2n+1,n+5,-n+5 |
| div:first-of-type | 指定类型的第一个 |
| div:last-of-type | 指定类型的最后一个 |
| div:nth-of-type(n) | 指定类型的第n个 |

区别：nth-child会对父元素里面的所有元素的盒子都排列序号

nth-of-type对父元素里面指定子元素的盒子排列序号

伪元素选择器::before,::after

利用css创建新标签元素，不需要html标签，简化html结构

|----------|--------------|
| 选择符 | 简介 |
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |

注意：

before和after创建的元素，属于行内元素

新创建的这个元素在文档树中是找不到的，所以叫伪元素

语法：e::before{}

before和after必须有content属性

伪元素选择器和标签选择器一样，权重为1

使用场景：字体图标，黑色半透明遮罩层效果，清除浮动

html 复制代码

<style>
    @font-face{}
    div{
         position:relative;
    }
    div::after{
        content:'\e91e';
        font-family:'icomoon';
        position:absolute;
        top:10px;
        right:10px;
    }
</style>

html 复制代码

<style>
    div{
        position:relative;
    }
    div::before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.4) url(img/png) no-repeat center;
        display:none;
    }
    div:hover::before{
        display:block;
    }
</style>

html 复制代码

<style>
    .clearfix::after{
        clear:both;
        display:block;
        content:'';
    }
</style>

6.css3盒模型

box-sizing:border-box;不会撑大盒子

box-sizing:content-box;

7.css3filter滤镜

图片模糊处理filter:blur(5px);

8.计算盒子宽度calc函数

width:calc(100% - 80px)

9.新增属性过渡transition

transition:要过渡的属性时间运动曲线何时开始；

谁做过渡给谁加，如果想要写多个属性，逗号隔开

html 复制代码

<style>
    div{
        width:200px;
        height:30px;
        background-color:pink;
        /* transition: width .5s ease 0s,height.5s ease 0s; */
        transition: all .5s;
    }
    div:hover{
        width:400px;
        height:200px;
    }
</style>

1.html5新增语义化标签

2.新增多媒体标签

3.html5新增input 标签

4.html5新增表单属性

5.css3新增选择器

属性选择器

结构伪类选择器nth-child,nth-of-type

伪元素选择器::before,::after

6.css3盒模型

7.css3filter滤镜

8.计算盒子宽度calc函数

9.新增属性过渡transition