IE9+ 浏览器才支持
1.新增语义化标签
<header> 头部标签 <nav> 导航标签 <article> 内容标签 <section> 定义文档某个区域 <aside> 侧边栏标签 <footer> 尾部标签
2.HTML5新增的多媒体标签
<audio>音频 <audio src="文件地址" > </audio> <video>视频 <video src="文件地址" controls="controls"> </video>
可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件
<input>新增很多 但是必须在表单域里面 <from> <input></from>
<input required="required"> 表示此项为必填项
<input placeholder=“提示文本”> 提示文本 可以通过 input::placeholder{color:pink;}修改placeholder的颜色
<input autofocus=“autofocus”> 自动获取焦点
<input name="123" autocomplete=“on”打开“off”关闭> 历史记录 必须要加上name属性
<input type="file" multiple="multiple"> 可以多选文件提交
3.CSS3的新特性
移动端支持优于pc端
1.属性选择器[中括号进性选择]
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[ATT^="VAL"] 选择具有att属性且属性值以VAL开头的E元素
E[ATT$="VAL"] 选择具有att属性且属性值以VAL结尾的E元素
E[ATT$="VAL"] 选择具有att属性且属性值含有VAL的E元素 注意:类选择器、属性选择器、伪类选择器、权重都为10
2.结构伪类选择器:权重为10
E:first-child 父元素中的第一个子元素E(会把所有子元素都排序)
E:last-child
E:nth-child(n) n可以为数字,公式,关键字 隔行变色 n改为 even(偶数) odd(奇数)
E:nth-of-type(n) (只排序类型为E的元素)
1.nth-child 对父元素里所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
2.nth-of-type 对父元素里面指定子元素进性排序选择。先去匹配E,然后再根据E找第n个孩子
3.伪元素选择器:权重为1
element::before 在元素内部前面插入内容 before和after{里必须有content:''}
element::after 在元素内部的后面插入内容
4.盒子模型 boder-box
box-sizing:content-box 盒子大小为 width+padding+border
box-sizing:border-box 盒子大小为width放为最初设定
5.CSS3滤镜
filter:blur(npx); blur模糊处理,数值越大越模糊
计算cald width:calc(100% - 80px); 加减乘除/运算符左右必须有空格
6.CSS3过渡
transition:要过渡的属性(要变化的css属性) 花费时间(单位为s) 运动曲线(默认为ease) 何时开始; 放在要变化的属性里,通常和hover连用;如果要写多个属性,利用逗号进性分割