H5C3的新特性

H5新特性

1. 拖拽释放(Drap and drop) API ondrop

• 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
  在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

2. 自定义属性data-id

3. 语义化标签(header,nav,footer ,aside, article, section)

• 语义化标签有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。
• 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
  方便其他设备的解析
• 便于团队开发和维护

4. 音频 ,视频(audio, video) 自动播放，在属性中添加autoplay

5. web存储

• sessionstorage:关闭浏览器清空数据，储存大小约5M。
• localstorage：永久生效，存储大小20M，多窗口下都可以使用
• 都只能储存字符串

6. 地理(Geolocation) API

7. 表单控件 calendar , date , time , email , url , search , tel , file , number

CSS3新特性

1.选择器：属性选择器E[attr]，伪类选择器E:nth-child(n)，空伪类E:empty ，排除伪类E:not(selector)

2.颜色：新增了RGBA、HSLA模式

3.文本：为文本设置阴影增强文本的表现能力，通过 text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。

4.盒模型：box-sizing: border-box;

5.边框：圆角border-radius，阴影box-shadow

6.背景：

• 通过 background-size 设置背景图片的尺寸。
• 通过 background-origin 可以设置背景图片定位(background-position)的参照原点。
• 通过background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小。

7.渐变：线性渐变 linear-gradient，径向渐变radial-gradient

8.字体图标 font-face

9.弹性布局flex

10.2D转换：
translate 设置元素的位置（x/y坐标）
scale 设置元素的缩放比例（x/y两个方向）
rotate 设置元素旋转（正值为顺时针，负值为逆时针）
transform-origin 设置转换元素的原点

11.3D转换：
透视（perspective）值为1000px~1200px
将2D元素转换为3D立体（给父元素设置）transform-style: perserve-3d;
设置元素背面是否可见 backface-visibility: hidden;

12.动画：
定义关键帧 @keyframes
通过百分编写帧
在各帧中分别定义各属性
通过animation将动画应用于相应元素

13. 文字阴影(text-shadow)

14. 媒体查询 多栏布局 @media screen and (width:800px) {…}

15. 边框图片border-image