这些新特性都有兼容性问题 基本都是 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。 后俩可以省略
口诀 谁做过渡给谁加。
