html5d01
1、新增语义化标签
header、nav、aside、section、footer......
2、音频标签
<audio src="mi.mp4" controls="controls" autoplay="autoplay" loop="loop"></audio>
src：音频地址
controls：显示控件
autoplay：自动播放
loop：循环播放
3、视频标签
<video src="media/video.mp4" loop="loop" poster="media/pig.jpg" controls="controls" muted="muted"></video>
< video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >
src：视频地址
controls：显示控件
autoplay：自动播放
loop：循环播放
poster：加载等待的静态图片
muted：静音播放
width：设置播放器宽度
height：设置播放器高度
4、新增input表单标签
1）限制输入内容时的格式
2）提交表单时，会校验内容并提示
type="email"
限制用户输入必须为Email类型
type="date"
限制用户输入必须为日期类型
type="time"
限制用户输入必须为时间类型
type="number"
限制用户输入必须为数字类型
type="tel"限制用户输入必须为
手机号码
type="search"限制用户输入必须为
搜索框
5、新增表单属性
placeholder：提示信息
autofocus：自动获得焦点，一般页面中放1个
autocomplete：自动完成
，记录用户输入过的数据，一般会关闭
multiple:可以多选文件提交
css3
1、属性选择器
根据属性名
根据属性值
1. E[att] 选择具有att属性的E元素。
2. E[att="val"] 选择具有att属性且属性值等于val的E元素。
3. E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
4. E[att$="val"] 选择具有att属性且属性值为包含val的字符串的E元素
5. E[att*="val"] 选择具有att属性属性值为包含val的字符串的E元素。
类选择器、属性选择器、伪类选择器权重都为10.
2、结构伪类选择器
<style>
ul li:first-child{
background-color: red;
}
</style>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
匹配父元素的第一个子元素
:first-child
匹配父元素的最后一个子元素
:last-child
:nth-child(n)
n可以是数字、单词、公式（从0开始）
如：匹配到父元素的第2个子元素：ul li:nth-child(2){}
匹配到父元素的序号为奇数的子元素
ul li:nth-child(odd){} odd是关键字奇数的意思
匹配到父元素的序号为偶数的子元素
ul li:nth-child(even){} even
公式：2n偶数 2n+1奇数 5n 5 10 15... n+5从第五个开始包括第五个 -n+5前五个包括第五个
不考虑元素的类型
指定父元素
"of-type" 选择指定类型的元素。
:first-of-type
:last-of-type
:nth-of-type()
3、伪元素选择器
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
content不能省略，可以设置为空，创建的元素属于行内元素
伪元素选择器和标签选择器权重都为1
4、2D转换
1）移动 transform:translate(x,y)
x,y可以是具体的像素值，还可以是百分比（是自身宽度或高度的百分比）
div{
transform: translate(50px,50px);
}
可以单独设置x,y
transform:translateX() translateY()
translate类似定位，不会影响到其他元素的位置，对行内标签没有效果。 |
|
收藏
淘帖
踩
