HTML’s New Template Tag
WhatWG HTML 模板规范

WhatWG HTML 模板规范定义了一个新的 <template> 元素，用于描述一个标准的以 DOM 为基础的方案来实现客户端模板。该模板允许你定义一段可以被转为 HTML 的标记，在页面加载时不生效，但可以在后续进行动态实例化。

本文主要摘抄自第一个参考文档

HTML5 Drag and Drop
全面理解Drag & Drop API

元素的拖放（Drag and Drop）在Web页面上也是一个常见的特性，即抓取一个对象拖动并将其放到另一个位置；HTML5将其标准化：任何页面元素都可以被拖动。

HTML5拖放的浏览器支持情况如下：

Dive into HTML5
HTML5 Geolocation
Geolocation背后的基本原理

HTML定位API用于获取用户的地理位置（经纬度），但由于涉及隐私，除非用户同意，否则我们无法得到用户的位置。

从Chrome50开始，定位API只能用于HTTPS的站点，也就是说如果我们的站点不是HTTPS（如HTTP站点），那么获取用户位置的功能无法使用。

Dive into HTML5

在HTML5之前，Web应用一般只能使用Cookie将数据存储在用户计算机，每次请求都携带被存储的数据，这使得Cookie的性能并不好；而且Cookie的使用有限制，比如最多只能存储4K的数据，于是HTML5引入了两种在客户端存储数据（本地存储）的方法：localStorage 和 sessionStorage。

• localStorage ：没有时间限制的数据存储
• sessionStorage ：针对一个 session 的数据存储（浏览器关闭后数据会丢失）

相对于Cookie，本地存储更安全并可以存储比较大的数据（至少5M），而且数据永远不会传递到服务器，这样便不会影响网站性能。不同的网站数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5定义的 <canvas> 元素可以使用 javascript 在网页上绘制图像，canvas（可以称作“画布”）是网页上的一个矩形区域，我们就是在这个区域内进行绘制；在这个矩形区域内，我们可以控制其每个像素，而且 <canvas> 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

<canvas> 元素的浏览器兼容情况：

• CSS Counters
• CSS计数器详解

CSS计数器

CSS计数器可以用来给HTML元素自动生成编号，它其实是由CSS维护的一种“变量”，可以通过跟踪该变量使用了多少次来实现变量值的自动递增。

CSS计数器属于CSS2的范畴，其浏览器兼容性不必担心。

• CSS3 User Interface
• CSS3 Box Sizing

CSS3增加了几个用户界面相关的特性，下面表格中列举了这几个属性及浏览器兼容情况：

appearance在测试时表现很怪，w3schools上该属性页面标题改为 REMOVED FROM CSS3，不知何因

• CSS3 Multiple Columns
• CSS Multi-column Layout Module
• CSS多列布局

在Web页面中，表格很早就被用来描述多列布局了，那现在在CSS3中引入的多列布局有什么不同呢？其实CSS3中的多列布局最大的好处是具有弹性，如列数可以根据视口大小的变化而改变。从HTML文档中移除table标签既有利于源码的阅读和维护，又可以使页面在不同设置上都有良好的视觉体验。

而且，CSS3多列布局其实相当简单，不信？看下面：

• CSS3 Flexible Box
• CSS Flexible Box Layout Module Level 1
• Flex 布局教程：语法篇

Flexible Box（也叫Flexbox）是CSS3新增的一种可伸缩的灵活的Web页面布局方式，使用它可以使Web页面在不同设备及不同屏幕上显示地更加友好。

首先看一下Flexbox浏览器兼容情况：

• CSS Images
• CSS filter Reference

本文主要说的是使用CSS控制图片的样式，由于不是专业前端从业人员，我也不知道哪些是CSS3新增的内容，能确定的都会相应部分说明；另外，本文以 CSS Images 官方教程为大纲。

本文主要内容是CSS3中新增的 filter 属性，具体参见 图片滤镜 部分。