本文共 2189 字，大约阅读时间需要 7 分钟。

H5：

HTML5提供了新的元素来创建更好的页面结构：

1.添加视频Video和音频Radio标签

HTML5 规定了在网页上嵌入音频元素的标准，即使用 元素。

您的浏览器不支持 audio 元素。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

您的浏览器不支持Video标签。

2.添加canvas画布和svg渲染矢量图片

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

标签只是图形容器，您必须使用脚本来绘制图形。

简单实例如下:

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

3.添加input表单控件（datetime、datetime-local、week、date、month、time）、color、email、number、range、search、tel、url。

4.添加web存储功能， localStorage本地离线可长期存储数据，浏览器关闭后数据不丢失，sessionStorage数据在浏览器关闭后自动删除。

5.添加地理位置定位功能Geolocation

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

6.添加语义化更好的内容标签hrader、footer、nav、section、article、aside、detailes、summary、dialog。

7.添加拖拽释放Drag and drop

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

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

拖动什么 - ondragstart 和 setData()

放到何处 - ondragover

进行放置 - ondrop

8.添加web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

9.添加WebSocket

Css3:

1.添加边框属性：border-radius圆角、border-image圆角图片

2.添加阴影属性：box-shadow框阴影、text-shadow文本阴影

3.添加字体属性：@font-face字体、text-wrap自动换行、text-overflow检索当当前行超过指定容器的边界

4.添加选择器：E:last-child 匹配父元素的最后一个子元素、E:nth-child(n)匹配父元素的第n个子元素、E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

5.添加背景属性：background-size图片设置大小、background-origin设置定位区域、background-clip背景颜色的绘制区域、background-break控制背景怎样在这些不同的盒子中显示。

6.添加转换属性（translate、rotate、scale、skew、matrix、transform）、3D转换（rotateX、rotateY）

7:添加动画属性：Transition、Transform、Animation

要创建CSS3动画，你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

8.添加媒体查询：@media

从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

清单 1. 使用媒体类型

<linkrel="stylesheet"type="text/css"href="site.css"media=“screen”/>

<linkrel="stylesheet"type="text/css"href="print.css"media=“print”/> 清单 2. 媒体查询规则 @media all and(min-width:800px){…} @media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。 (min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。 清单 3. and 条件

@media(min-width:800px)and(max-width:1200px)and(orientation:portrait){…}

清单 4. or 关键词

@media(min-width:800px)or(orientation:portrait){…}

清单 5. 使用 not

@media(not min-width:800px){…}

9.添加多列布局

转载地址：http://qzylf.baihongyu.com/