目录
一、HTML5
IE9以上
1.常用的新增的语义化标签
(1)<header>:头部标签
(2)<nav>:导航标签
(3)<article>:内容标签
(4)<section>:定义文档的某个区域
(5)<aside>:侧边栏标签
(6)<footer>:尾部标签
在IE9中,要把这些转换为块级元素。
2.多媒体标签
2.1.视频 <video>
支持mp4,WebM,Ogg四种格式的文件。尽量用MP4,有些浏览器不支持WebM和Ogg。
语法:
<video src="文件地址" controls="controls"></video>
常见属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 视频自动播放 |
loop | loop | 视频循环播放 |
muted | muted | 视频静音播放 |
2.2.音频 <audio>
支持三种格式MP3,Wav,Ogg。尽量用MP3格式。
语法同视频,音频不可以通过muted设置静音播放。
3.新增input类型
可以设置type属性,限制用户输入的类型。
有email, url, date, time, month, week, number, tel, search, color
4.新增的表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 有该属性则内容不能为空 |
placehoder | 提示文本 | 表单的提示信息 |
autofocus | autofocus | 自动聚焦 |
autocomplete | off/on | 浏览器基于用户之前输入过的值显示出填写的选项,默认打开 |
multiple | multiple | 可以多选文件提交 |
可以通过一下方式修改placeholder内字体颜色
input::placeholder{
color: red;
}
二、CSS新特性
1.新增选择器
1.1.属性选择器
权重为10
语法:
(1)可以根据元素特定的属性选择元素,这样就可以不用借助类或者id选择器。
E[att]:代表是E,且具有att属性的
(2)可以选择属性=某些值的某些元素(重点)
E[att="val"]
(3)可以选择属性值开头的某些元素
E[att^="val"]
(4)可以选择以属性值结尾的某些元素
E[att$="val"]
(5)可以选择含有属性值的元素、
E[att* =""val]
1.2.结构伪类
根据文档结构来选择元素,常用于根据父级选择器里面的子元素。
(1)E:first-child:匹配父元素中的第一个子元素E。
E:nth-child(n):选择父元素中的一个或多个。n可以是数字,关键字(even,odd),公式(括号内必须是n,从0开始计算,每次加1)
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15 |
n+5 | 从第五个开始 |
-n+5 | 前5个 |
(2)E:nth-of-type(n):指定类型E的第一个
1.3.伪元素选择器
after和before必须具有content属性。均属于行内元素。权重为1。after在父元素内容后面插入值,before在父元素前面插入值。
语法:
element::before{}
(1)伪元素字体图标
可以直接写入content中。
(2)遮罩层
(3)清除浮动
1.4.盒子模型
(1)box-sizing:content-box:盒子大小为width+padding+border(默认)
(2)box-sizing:border-box:盒子大小为width
1.5、图片模糊处理
语法:
filter: 函数();
例如:filter: blur(Spx); 模糊处理,值越大越模糊。
1.6.cal函数
cal函数可以在声明CSS进行数值运算。
如:width:calc(100%-80px); 括号里可以用四则运算。
1.7.CSS过度(重点)
从一个状态渐渐过渡到另一个状态。经常和:hover一起使用。
语法:
transition:要过度的属性 花费时间 运动曲线 何时开始
过度属性:宽度高度、内外边距,背景颜色都可以,多个属性可以用逗号隔开,如果所有属性都要变化过度,写all。
花费时间:单位是秒(必须写单位)。
运动曲线:默认是ease可以省略。
何时开始:单位是秒,可以设置延迟触发时间,默认是0。