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。

后俩可以省略

口诀 谁做过渡给谁加。