html5css3-EW帮帮网

1.html5新增语义化标签

2.新增多媒体标签

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

<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

<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

3.html5新增input 标签

属性值	说明
type="email"	邮箱类型
type="url"	url类型
type="date"	日期类型
type="time"	时间类型
type="month"	月类型
type="week"	周类型
type="number"	数字类型
type="tel"	手机号码
type="search"	搜索框
type="color"	颜色选择表单
type="submit" value="提交"	提交

验证的时候必须添加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

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

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

<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>

<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:要过渡的属性时间运动曲线何时开始；

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

<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>

html5css3