H5可以说是现在最火爆的概念了，很多非CS的搬砖狗，对于这个概念很是模糊，那么博主今天就讲一下什么是H5。
首先我们解释一下web浏览器端的三个概念，浏览器其实就是一个解析器，他解析的是结构（dom）、表现（css）、行为（js）.在书写dom的时候，需要一种标准，这个
标准就是html，上一版是html4。从狭义上说，h5就是h4的一次更新。从广义上将，H5泛指现在的移动端产品设计的理念或者技术，该技术包括H5与css3，css3就是css2的一版更新。传统的项目主要运行在PC端，在移动端的产品就需要用H5与css3新增的内容来满足项目需求。PS：最讨厌别人问博主会不会写H5,因为H5的内容太广了，下面就详细讲解H5与css3中都
新增了哪些内容。
H5的新特性有哪些？
1.新增的语义化标签
header footer nav side article main figure ，这些都是新增的语义化标签，这些新标签在IE中不能很好的得到支持，所以就要处理一下兼容问题
header, section, footer, aside, nav, main, article, figure {
display: block;
}
而且在IE上，新元素是不能用css来渲染的，所以就要用shiv的兼容方法，具体代码如下。
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
2.新的视频音频元素
video与audio 这两个媒体元素统一了媒体的渲染方式。
3.canvas绘图
博主曾用此种方式实现了移动端触摸绘图的功能
4.加入了svg绘图
这是一种基于xml的绘图语言，而canvs是基于js的，两者区别如下。
canvas svg
依赖分辨率 不依赖分辨率
不支持事件处理器 支持事件处理器
弱的文本渲染能力 最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘 不适合游戏应用
5.加入了mathml的数学标记语言
6.支持拖放
7.支持地理定位
8.新的input类型，如data numbel email url range tel 等，这些新类型配合新的属性可以达到提交表单自动验证的功能，无需自己写js脚本
9.本地存储，localstorage与sessionstorage，两者与cookie的区别在于，本地存储，不用发送http协议，存储量达到5m。两者之间的区别在于，localstorage
是永久存储，sessionstorage的生命周期是在当前标签页中的单页有效。
10.支持websql，实现了浏览器端的数据库
11.webworker，js的异步处理
12.sse与websocket
sse用于服务端单向向浏览器推送，websokcet是双工通信。
CSS3的新特性有哪些？
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
首先我们解释一下web浏览器端的三个概念，浏览器其实就是一个解析器，他解析的是结构（dom）、表现（css）、行为（js）.在书写dom的时候，需要一种标准，这个
标准就是html，上一版是html4。从狭义上说，h5就是h4的一次更新。从广义上将，H5泛指现在的移动端产品设计的理念或者技术，该技术包括H5与css3，css3就是css2的一版更新。传统的项目主要运行在PC端，在移动端的产品就需要用H5与css3新增的内容来满足项目需求。PS：最讨厌别人问博主会不会写H5,因为H5的内容太广了，下面就详细讲解H5与css3中都
新增了哪些内容。
H5的新特性有哪些？
1.新增的语义化标签
header footer nav side article main figure ，这些都是新增的语义化标签，这些新标签在IE中不能很好的得到支持，所以就要处理一下兼容问题
header, section, footer, aside, nav, main, article, figure {
display: block;
}
而且在IE上，新元素是不能用css来渲染的，所以就要用shiv的兼容方法，具体代码如下。
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
2.新的视频音频元素
video与audio 这两个媒体元素统一了媒体的渲染方式。
3.canvas绘图
博主曾用此种方式实现了移动端触摸绘图的功能
4.加入了svg绘图
这是一种基于xml的绘图语言，而canvs是基于js的，两者区别如下。
canvas svg
依赖分辨率 不依赖分辨率
不支持事件处理器 支持事件处理器
弱的文本渲染能力 最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘 不适合游戏应用
5.加入了mathml的数学标记语言
6.支持拖放
7.支持地理定位
8.新的input类型，如data numbel email url range tel 等，这些新类型配合新的属性可以达到提交表单自动验证的功能，无需自己写js脚本
9.本地存储，localstorage与sessionstorage，两者与cookie的区别在于，本地存储，不用发送http协议，存储量达到5m。两者之间的区别在于，localstorage
是永久存储，sessionstorage的生命周期是在当前标签页中的单页有效。
10.支持websql，实现了浏览器端的数据库
11.webworker，js的异步处理
12.sse与websocket
sse用于服务端单向向浏览器推送，websokcet是双工通信。
CSS3的新特性有哪些？
目前移动端页面的设计理念就是响应式和自适应，自适应是按照百分比来布局，而响应式则需要用到CSS3的比较重要的特性--媒体查询。在css2中其实有查询这个概念
但是要在引入CSS文件时使用，媒体查询则可以在文件内部进行书写，大大的提高了灵活性。
1.border-shadow div阴影 text-shadow 文字阴影 border-radius 圆角
2.2d转换 transform：translate() rotate() scale() skew() matrix()
3.3d转换
4.过渡:
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover
{
width:300px;
}
5.animation动画，用jquery的animate也可以书写动画
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
6.媒体查询
4686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
