知识小结
1. h5新增语义化标签:
<header> <nav><article><section><footer>
2. 新增多媒体标签:
音频:<audio> (音频常用于游戏页面、宣传页面,加背景音乐,某些浏览器不支持自动播放格式)
语法格式:<audio src=”文件地址” controls=”controls” autoplay=”autoplay” loop=”loop”></audio>
<audio controls=”controls”>
<source src=”sonw.mp3” type=”audio/mpeg”>
<source src=”sonw.ogg” type=”audio/ogg”>
</audio>
视频<video>
语法格式:<video src=”文件地址” muted=”muted” poster=”poster” controls=”controls” autoplay=”autoplay” loop=”loop”></video>
(谷歌浏览器不能自动播放视频,添加muted可以)
<video controls=”controls” width=”200”>
<source src=”sonw.mp4” type=”video/mp4”>
<source src=”sonw.ogg” type=”video/ogg”>
</vedio>
3. 新增Input表单
<input type=”email”>
<input type=”number”>
<input type=”tell”>
<input type=”search”>
<input type=”url”>
<input type=”date”>
新增表单属性:
Required=”required”内容必填
Placeholder=”提示文本” 占位符
Autofocus=”autofocus”自动获得焦点
Autocomplete=”on/off”自动记录输入的内容(需要同时在表单添加name属性)
Multiple=”multiple” 可以选择多个文件
4. Css3选择器
属性选择器:
E[att]选择有att属性的E元素
E[att=”val”]
E[att^=”val”]选择以val开头的标签
E[att$=”val”]选择以val结束的标签
E[att*=”val”]选择有val内容的标签
结构伪类选择器:
(不考虑类型,指定父元素)
E:first-child匹配父元素中的第一个子元素
E:nth-child() n可以是数字,关键词(odd/even),公式(2n,2n+1,5n,n+5,-n+5)(从0开始)
(指定同一类型的子集)
E:first-of-type匹配指定类型E的第一个元素
E:nth-of-type()
伪元素选择器:(属于行内元素,设置大小时需转化成块级元素,权重为1)
E::before
E::after {
content:””;(content不能省略,可以设置为空)
5.2D转换
转换(transform)可以实现元素的位移、旋转、倾斜、缩放(对块级标签有效果,行内标签没有效果)
Transform: translate(x,y);(x,y可以是具体的像素值,还可以是百分比(是自身宽度或高度的百分比))
Transform: translateX(); Transform: translateY();(可以只移动X或Y轴)
Transform: rotate;
Transform: skew;
Transform: scale;
|
|