今日学习内容：
H5C3
html5
新特性：
增加了一些新的标签、表单和表单属性等。一般只支持ie9以上浏览器
优点：
语义更明确
便于浏览器进行解析
缺点：
大部分的标签只有chrome和safari支持
HTML5新增的input类型
限制用户输入内容为Email类型
type=“email”
限制到输入为url地址
tupe=url
日期选择
date
时间选择
time
月份选择
month
周数选择
week
限制必须是数字
number
将文字全部情况 搜索
search
调色盘
color
新增的表单属性
input type=text placeholder=“输入用户名”
当这个和value一起使用时 value会起作用，所以要注意
input typle=file multiple=“multiple”
可以进行多个文件选择
input type=text required=“required”
检验当前表单元素是必填项
input type=text autofocus=autofocus
自动聚焦到文本输入框
input type=text placeholder=“输入用户名” autocomplete=“on” name=
为on时，会记录输入过的内容，改为off则不记录，必须加上name
input：：属性
可修改属性值
HTML5新增的多媒体标签
<video>
可以在不使用插件的情况下，可以使用原生的标签来支持视频格式文件的播放
支持的格式：MP4（主要） webm ogg
相关属性：
autoplay
属性值：
autoplay
视频就绪自动播放（需要和muted属性连用，自动播放时必须是默认静音的）
control
属性值control
给video标签增加视频播放控件
height
属性值：像素
loop
属性值：loop
视频播放完后是否要循环播放，属性值为循环播放
preload
属性值：
auto（预加载）
none（不加载）
规定是否预加载视频（若有autoplay，就忽略该属性）
src
属性值：url
视频的url地址
muted
属性值
muted
静音播放
poster
属性值
imgurl
加载等待的画面图片
<aduio>
control 同上
loop 同上
src同上
CSS3
css3的怪异盒模型
css3可以通过box-sizing来指定盒子模型
content-box：盒子大小是width+height+padding+border（默认）
border-box：大小就是指定width和height
注意：
使用box-sizing：border-box的时候，padding和border不要超过盒子的宽度
css3新增选择器
属性选择器
注意：类、属性、伪类选择器，权重都是0，0，1，0
input[value]{
}
选择具有value属性的标签
input[type=text]
选择type值是text的标签
结构伪类选择器
主要是根据文档结构来选择元素，常用于父级来进行子级选择
div p：###
选择符
nth-child
nth-of-type
区别：第一个排序后，先找第n个孩子再看元素
第二个排序后，先匹配元素 再找第n个孩子
伪元素选择器
可以帮助我们利用css创建新的标签元素，而不需要html标签，从而简化htm结构
注意：
1.before和after都可以创建一个元素，这个元素属于行内元素
2.新创建的元素在html结构里是不显示的，所以称之为伪元素
3.before和after都必须要有content属性
4.before是在父元素的内容之前创建，after是在之后创建
5.伪元素和元素选择器一样，权重都是1
css3过渡
transition：
属性值
1.想要变化的CSS属性
宽高、内外边距都可以，如果想要所有都变化，就写一个all
2.花费时间
单位是秒，比如0.5s
3.运动曲线
默认值：ease（可以省略）
linear：匀速
ease-in 加速
ease-out 减速
ease-in-out 先加后减
4.何时开始
单位是秒，可以设置延迟触发时间，默认为0s（可以省略）
遇到的困难：
before和after使用不熟练
解决办法：
多写了几个案例，对属性伪类选择器有了更深的了解
|
