HTML5+CSS3

HTML5的新增特性都有兼容性问题，IE9+以上版本的浏览器才支持；它定义了新的标签、新的表单和表单属性

【HTML5+CSS3新增特性】

• 语义化标签
• 本地存储
• 兼容特性
• 2D、3D
• 动画、过渡
• CSS3特性
• 性能与集成

HTML5新增

新增语义化标签

标签	说明
header	头部标签
nav	导航标签
article	内容标签
section	块级标签，定义文章某个区域
aside	侧边栏标签
footer	尾部标签

• 语义化标签主要是针对搜索引擎的
• 可在页面中多次使用
• 在IE9中，需转换为块级元素
• 在移动端无兼容性问题

新增多媒体标签

标签	说明
video	视频标签
audio	音频标签

视频标签

• 一般使用MP4格式

<video src="url"   controls="controls"></video>

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放(谷歌浏览器默认禁用自动播放，加上muted即可)
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	url	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	auto/none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

音频标签

• 一般使用MP3格式

<audio src="url"   controls="controls"></audio>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放，谷歌禁用，只能通过JS解决
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
src	url	要播放的音频的url

新增input标签类型

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“data”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type="number"	限制用户输入必须为数字类型
type="tel"	手机号码
type="search"	搜索框
type=“color”	生成一个颜色选择表单

新增表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项，默认已经打开。如autocomplete=“on” ,关闭autocomplete=“off”，需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提示

CSS3新增

新增选择器

新增属性选择器（权重10）

选择器	说明
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性，且属性值为val的E元素
E[att^=“val”]	选择具有att属性，且属性值以val开头的E元素
E[att$=“val”]	选择具有att属性，且属性值以val结尾的E元素
E[att*=“val”]	选择具有att属性，且属性值中含有val的E元素

新增结构伪类选择器（权重10）

选择器	说明
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

• n可以是？
  • 数字
  • 关键字：even、odd
  • 公式：n、2n+1、5n、n+5、-n+5 ---- (n从0自加到最后一个)
    区别：
• nth-child： 在看是第几个时，会先把所有的子标签都排序（不管是不是E），之后再看是否为E，不符合条件则不选
• nth-of-type： 在看是第几个时，会把所有的子标签E都排序再看是否符合条件n

新增伪元素选择器（权重1）

伪元素选择器可以通过CSS创建新标签，而不需要HTML标签，从而简化HTML结构。创建的元素属于行内元素，可以进行转换，在HTML标签树中找不到，因此称为伪元素。

• before和after内必须有content属性
• before在父元素的内容前面创建元素，after在父元素的内容后面创建元素，盒子的内容在中间

  选择器	说明
  ::before	在元素内部的前面插入内容
  ::after	在元素内部的后面插入内容

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒子模型，他有两个值，content-box、border-box，可改变盒子计算大小的方法

box-sizing值	盒子宽度计算
content-box	width + padding + border
border-box	width

其他特性

图片模糊

```css
div {filter:函数();} 	/*如blur(5px)*/
```

计算盒子宽度width:calu函数

```css
div {width:calc(100%-80px);} 
```

CSS3过渡

```css
div { transition: 要过渡的属性 花费时间 运动曲线 何时开始, 要过渡的属性 花费时间 运动曲线 何时开始}
```

• 属性：想要变化的CSS属性，宽度、高度、背景、内外边距等，也可以设置为all
• 花费时间： 单位为秒，必须写单位，如0.5s
• 运动曲线： 默认是ease，可以省略。linear、ease-in、ease-out、ease-in-out
• 何时开始： 单位是秒，必须写单位，可以设置延迟促发时间，默认为0s（可以省略）

未完。。。