H5&&C3

2018-01-10

HTML5

HTML5的设计目的是为了在移动设备上支持多媒体

我们常说的H5其实是一个范称，它是由HTML+CSS3+Javascript等技术组合而成的开发平台

标签	注释
header	定义文档的头部区域
nav	定义导航链接的部分
section	定义文档中的节（区段）
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
footer	定义section或document的页脚
meter	定义范围内的度量（IE不支持）
nav	定义导航栏链接

表单

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证

类型	说明
email	在提交表单时，会自动验证 email 域的值是否合法有效
url	定义输入URL字段,在提交表单时，会自动验证 url 域的值
tel	定义输入电话号码字段
number	定义一个数值输入域(限定): max- 规定允许的最大值 min - 规定允许的最小值 step - 规定合法的数字间隔（如果 step=”3”，则合法的数是 -3,0,3,6 等） value - 规定默认值
search	定义一个搜索字段 (类似站点搜索或者Google搜索)
month	定义月与年
range	定义一个不需要非常精确的数值（类似于滑块控制）: max- 规定允许的最大值 min - 规定允许的最小值 step - 规定合法的数字间隔（如果 step=”3”，则合法的数是 -3,0,3,6 等） value - 规定默认值
color	从拾色器中选择一个颜色
time	定义可输入时间控制器
date	定义一个时间控制器
week	定义周和年
month	定义月与年

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

多媒体

音频播放组件

1	<audio src="要播放的音频文件"></audio>

视频播放组件

1	<video src="要播放的视频文件"></video>

DOM元素获取

document.getElementsByClassName(‘class’); 通过类名获取元素，以类数组形式存在。
document.querySelector(‘selector’); 通过CSS选择器获取元素，符合匹配条件的第1个元素。
document.querySelectorAll(‘selector’); 通过CSS选择器获取元素，以类数组形式存在。

CSS3

属性选择器

其特点是通过属性选择元素：

E[ attr ] 表示存在attr属性即可；
E[ attr = val ] 表示属性值完全等于val；
E[ attr = val ] 表示属性值里包含val字符并且在*任意位置
E[ attr^ = val ] 表示属性值里包含val字符并且在开始的位置
E[ attr$ = val ] 表示属性值里包含val字符并且在结束的位置

伪类选择器

除了以前的:link、:active、:visited、:hover,css3又增加了其它的伪类选择器：

通过某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类

E:first-child 第一个子元素
E:last-child 最后一个子元素
E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素
E:nth-last-child(n) 同 E:nth-child(n)相似，只是倒着计算

颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度

HSLA可以参考此MDN

文本

text-shadow: 文本阴影可分别设置偏移量、模糊度、颜色（可设透明度) 例如：

1
2
3

.one {
   text-shadow: 1px 1px 0 red; \\模糊度值为：0-1
}

边框圆角

border-radius

1
2
3

.two {
  border-radius: 50%	\\相当于四个角都设了同样的值
}

边框阴影

box-shadow

box-shadow: 10px 5px 5px red; 
/* 
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度是不能为负值；
4、inset可以设置内阴影；
*/

背景

background-size 设置背景图片的尺寸

background-size:cover 会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏

background-size:contain 会自动调整缩放比例，保证图片始终完整显示在背景区域

动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

具体推荐阅读基于bootstrap的animation.css