H5和CSS3新增属性

新的标签 一些新的表单 和表单属性

这些新特性都有兼容性问题 基本都是 ie9 版本

1
以前布局我们都是用 div 做的 div 对于我们搜索引擎来说是么样语义的；

头部标签

导航标签

内容标签

定义文档某个区域

大号的div

侧边栏标签

尾部标签

1 这些语义化标准主要是针对搜素引擎的
2 这些标签页面中可以使用多次
3 在 ie9 中 ，需要把这些元素转化为块级元素
4 其实 我们移动端更喜欢使用这些标签
5 html5 还增加了很多其他的标签，我们后面在慢慢学

1.2 HTML5 新增的多媒体标签

1 音频：
2 视频 controls 播放控件。

不再使用 Flash
1 视频 尽量放 mp4

属性 值
autoplay autoplay 自动播放 谷歌浏览器把这个给警用了 解决 muted
controls controls 向用户显示播放控件
width px 宽
height px 高
loop loop 循环播放
preload auto 规定是否预加载视频 如果有了 autoplay 就忽略该属性
none
src url 视频的 URL 地址
poster imgurl 加载等待的画面图片
muted muted 静音播放

2 音频： 尽量 mp3 格式

autoplay autoplay 自动播放
controls controls 音频控件
loop loop 循环播放
src url 音频的 url 地址

input 类型

type=“email”
url
date 日期
time 时间
month 月
week 周
number 数字
tel 电话
search 搜索
color 颜色选择表单

重点记住三个 number tel search 这三个

新增的表单属性

required required 表单内容必须不为空。必填
placeholder 提示文本 表单的提示信息。
autofocus autofocus 自动聚焦属性
autocomplete off/on 第一次输入被提交过 下一次不需要。 默认就是打开的
multiple multiple 可多选文件提交

                                           css新增

也是有兼容性问题 ie9 支持 移动端好于我们的 pc 端

新增的选择器
1 属性选择器
根本元素特定的属性选择元素
1 不借助类或者 id 来选择
E[att]{} 选择元素
E[att=“val”]{} 选择属性的一个值。
E[att^=“val”] 开头
E[att$=“val”] 结尾
E[att*=“val”] 任意的意思
注意 类选择器 属性选择器 伪类选择器 权重都是 10

2 结构伪类选择器
主要根据我们的文档结构来选择元素，常用于根据父级选择器里面的子元素。

E:first-child 父元素第一个子元素
E:last-child 父元素最后一个子元素
E:nth-child(n) 父元素第 n 个子元素。
n 可以是数字，关键字和公式

n 如果是数字，就是选择第 n 个子元素，里面数字从 0 开始 依次增加。

n 可以是关键字 ：even 偶数，odd 奇数。

公式
2n 偶数
2n+1 奇数
5n
n+5 从第五个开始
-n+5 前 5 个

E:first-of-type 指定类型第一的第 n 个
E:last-of-type 指定类型最后一个的第 n 个
E:nth-of-type 指定类型 E 的第 n 个

注意：nth——child 对父元素里面的所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看看是否和 e 匹配。
nth-of-type 指定的。

3 伪元素选择器
可用 css 来创建一个标签元素，而不需要 html 标签，从而简化 HTML 结构

::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

注意 before 和 after 通过 css 创建一个元素

新创建的这个元素在文档中是找不到的，所以我们称为伪元素

语法 element::before{}; 属于行内元素

before 和 after 必须有我们 content 属性

before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

伪元素选择器和标签选择器一样，权重为 1；

伪元素清除浮动

             css3盒子模型

css3 可以通过 box-sizing 来指定我们盒子模型 有两个值，content-box，border-box，这样我们计算盒子
大小的方式就发生了改变。

默认 content-box 盒子上的宽=padding+boder+width4
box-sizing：border-box 盒子大小 width

这个属性可以使我们的盒子不会撑大我们的盒子了

css 的其他特性
1 图片变模糊

css3 滤镜 filter
filter：函数() 例如 filter:blur(5px) 数值越大越模糊

2 计算盒子宽度 width:calc 函数

width：calc（100%-80px）
括号里面可以使用 + -* /来计算

                  css过渡  重点

过渡动画 一个状态慢慢过渡另一个状态 动感十足

transition:要过渡的属性 花费时间 运动曲线 何时开始

1 属性 想要变化的 css 属性 宽度 和高度 背景颜色 内外边距 都可以 ,如果想要所有的属性都变化
过渡,写一个 all 就可以

2 花费时间 单位是秒 比如 0.5s

3 运动曲线 :默认是 ease
4 何时开始:单位是秒 可以设置延迟触发的时间 默认是 0s。
后俩可以省略

口诀 谁做过渡给谁加。