HTML5新增特性+CSS3新增特性_<div class="header" style="position:relative;"> <!-优快云博客

        音频：audio

        (音频格式：mp3，Wav、Ogg)

属性：controls、autoplay、muted、loop、poster、src

视频：video

      （视频格式：mp4，WebM，Ogg）

属性：controls、autoplay、muted、loop、width、height、poster、src

为了照顾兼容性，最好使用mp4(video)/mp3(audio)格式，因为它兼容绝大多数浏览器。使用source标签，让其兼容多个格式的音频或视频。如：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

该案例中，当浏览器支持ogg格式时，执行ogg格式文件，不支持ogg的话，往下执行mp3格式文件，都不支持，则返回文本“您的浏览器不支持 audio 元素。”

详细内容请查看：

https://www.runoob.com/html/html5-audio.html

https://www.runoob.com/html/html5-video.html

3、新增的input表单

type='email'

type='url'

type='date'

type='time'

type='month'

type='week'

type='number'

type='tel'

type='search'

type='color'

...

4、新增的表单属性

CSS3新增特性

1、新增的选择器

（1）、属性选择器

E[att]、E[att='val']、E[att^='val']、E[att$='val']、E[att*='val']

（2）、结构伪类选择器

E:first-child 匹配父元素中第一个子元素E

E:las-child 匹配父元素中最后一个子元素E

E:nth-child(n) 匹配父元素中的第n个子元素E

E:first-of-type 指定类型E的第一个

E:last-of-type 指定类型E的最后一个

E:nth-of-type(n) 指定类型E的第n个

对于选择器中的n，有以下三种取值。

nth-child和nth-of-type的区别：

nth-child：对父元素里面的所有孩子排序选择，先找到第n个孩子，然后再看是否和E匹配

nth-of-type：对父元素里面指定子元素进行排序选择，先匹配E，然后在根据E找到第n个孩子

（3）、伪元素选择器

选择器	说明
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以成为伪元素
语法：element::before{}
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面创建元素
伪元素选择器和标签选择器一样，权重为1

使用场景：

用来制作遮罩层
用来制作轮播图的左右按钮
伪元素清除浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 233px;
            height: 155px;
        }

        div img {
            width: 100%;
            height: 100%;
        }

        div::before {
            content: '';
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0;
        }

        div:hover::before {
            opacity: 0.4;
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/pic.png" alt="">
    </div>
</body>

</html>

2、盒子模型border-box

用法：box-sizing：border-box

效果，padding和border不会撑大盒子。

    <style>
        div:nth-child(1) {
            width: 100px;
            height: 100px;
            background-color: peru;
        }

        div:nth-child(2) {
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            padding: 20px;
            border: 20px solid lightskyblue;
            background-color: pink;
        }

        div:nth-child(3) {
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 20px solid rgb(53, 102, 114);
            background-color: pink;
        }
    </style>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

3、css3其他特性

（1）、图片变模糊

css3滤镜filter：

filter css属性将模糊或者颜色偏移等图形效果应用于元素

filter：函数(); 例如，filter:blur(5px); blur是模糊处理，数值越大越模糊

filter里面有很多函数，可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

（2）、计算盒子宽度width:calc函数

width:calc(100%-80px);

括号里面可以进行+-*/

例子：让子盒子的宽度永远比父盒子小30像素

width: calc(100% - 30px);

（3）、过渡

transition：要过渡的属性花费的时间运动曲线开始时间；

注意：第3和第4个属性可以省略。

案例：当鼠标经过div时，width变为400px，变化过程花费1s，变化曲线是ease，在鼠标停放div上2s开始变化。

        div:hover {
            width: 400px;
            transition: width 1s ease 2s;
        }

如果想要多个属性变化，用逗号隔开，或者使用all

        div:hover {
            width: 400px;
            height: 200px;
            transition: width 1s, height 1s;
            /* 或者下面这种写法也可以 */
            /* transition: all 1s */
        }

此外，css3还增加了动画 2D 3D等新特性