h5的新特性？
33558 www.Sina.com/articlesectionasideheaderfooternav等
2.Canvas画布
3 .音频视频
4 .拖动
5 .本地存储本地存储会话存储
localStorage是长期保存的数据，关闭浏览器不会丢失数据
sessionStorage会在关闭浏览器时自动删除数据
6.web插座长度连接
7 .地理位置html 5地理位置API用于获取用户的地理位置。
1.新增一些语义化标签 input、number、datalist、keygen、output、progress
9.svg矢量图
10. webWorker实现js多进程。
在HTML页面上运行脚本时，在脚本完成之前无法响应页面状态。 web worker是在后台运行的JavaScript，独立于其他脚本，不影响页面性能。 点击、选择内容等，可以继续做任何想做的事情。 此时，web worker在后台运行。 (相当于实现多线程同时执行)
8.增强型表单
要添加语义化元素：
头儿
nav
h5新特性部分详细article
安全
aside
福斯特
3358 www.Sina.com/http://www.Sina.com/http://www.Sina.com/3358 www.Sina.com.Sina.com/http://ww.Sina.com
HTML5规定了使用audio元素在网页中嵌入音频元素的标准。
HTML5HTML5规定了使用视频元素包含视频的标准方法。
Audio(
HTML5 canvas元素用于绘制图形，通常通过脚本(通常为JavaScript )完成。
canvas标记是一个图形容器，必须使用脚本来呈现图形。
！ -- -- canvas绘图界面--- divcanvaswidth=' 500 ' height=' 500 '/canvas/divscriptvarcanvas=document.query selet canvas绘图上下文【环境】2d环境.//绘图段context.move to (0，0 )； //笔触起点context.lineto (500，500 )； //在线段的终点输入多个. context.lineto (450，250 )； context.lineto (250，450 )； context.lineto (500，500 )； context.lineWidth=10； //设置路径宽度context.stroke style=' rgba (255，0，0.1 ) )； //路径颜色样式context.stroke ()； //画拉手
面的路径绘制到canvas </script>
HTML5 拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
设置元素为可拖放，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true" >
css3的 新特性？
1.选择器
2.透明度
1、盒子透明度表示法：opacity:0.1; filter:alpha(opacity=10)（兼容IE）
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
3. 多栏布局
4. 多背景图
5.Word Wrap
6. 文字阴影
7 css3渐变 gradients
8.边框(边框半径) border
9.animation动画
10 transition过渡动画 （需要触发）
11.盒阴影 box-shadow:水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
12. 盒模型
13. 媒体查询 @media screen
14.flex布局
css3 新特性部分详情
一、css3的新选择器
E:nth-child(n) 选择器匹配其父元素的第n个子元素，不论元素类型，n可以使数字，关键字，或公式
E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素
E:frist-child 相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应
E:frist-of-type 相对于父级做参考，“特定类型”（E）的第一个子元素
E:empty 选择没有子元素的每个E元素
E:target 选择当前活动的E元素
::selection 选择被用户选取的元素部分
属性选择器
二、文本
text-shadow:2px 2px 8px #000;参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色
text-overflow：规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)
text-wrap：规定文本换行的规则
word-break 规定非中日韩文本的换行规则
word-wrap：对长的不可分割的单词进行分割并换行到下一行
white-space：规定如何处理元素中的空白 white-space:nowrap 规定段落中的文本不进行换行
三、边框
border-raduis 边框的圆角
1、设置某一个角的圆角：border-radius:左上角 右上角 右下角 左下角;
比如设置左上角的圆角：border-top-left-radius:30px 60px;
同时设置四个角：border-radius:30px 20px 10px 50px;
设置四个角相同（常用）：border-radius:20%;border-radius:50%;(是正圆)
border-image 边框图片
.border-image { border-image-source:url(images/border.png-600); boder-image-slice:27; border-image-width:10px; border-iamge-repeat:round; (round平铺) 平铺效果不作用于四角，只适应与四边 }
四、渐变
linear-gradient
background-image:linear-gradient(90deg,yellow 20%,green 80%)redial-gradient
background-iamge:radial-gradient(120px at center center,yellow,green)五、多列布局
column-count
column-width
column-gap
column-rul
六、过渡
transition:过渡属性 时间 运动方式 动画延迟
1、transition-delay:5s ;过渡延迟5s进行
2、transition-property 设置过渡的属性，比如：width height background-color（是在宽度上做动画还是在高度上亦或是背景上）
3、transition-duration 设置过渡的时间，比如：1s 500ms
4、transition-time-function ：ease； 设置过渡的运动方式
七、动画
要创建CSS3动画，你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式
/* animation: myfirst 1.2s linear infinite; 写在css样式 */ @keyframes myfirst { 0% { background: red; } 25% { background: yellow; } 50% { background: blue; } 100% { background: green; } }transform ：translate（x,y) rotate(deg) scale(x,y)
translate
scale
rotate
skew（倾斜）
八、css3多列
属性描述column-count指定元素应该被分割的列数。column-fill指定如何填充列column-gap指定列与列之间的间隙column-rule所有 column-rule-* 属性的简写column-rule-color指定两列间边框的颜色column-rule-style指定两列间边框的样式column-rule-width指定两列间边框的厚度column-span指定元素要跨越多少列column-width指定列的宽度columns设置 column-width 和 column-count 的简写九、CSS3 多媒体查询
@media all and(min-width:800px){...}@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。 <!-- min-width 当视窗大于等于1200px时候9.css才生效 --> <!-- 给link标签添加媒体查询 --> <link rel="stylesheet" rel="external nofollow" href="./9.css" media="(min-width:1200px)"/> <!-- max-width:1200px 当视窗小于等于 1200px --> <link rel="stylesheet" rel="external nofollow" href="./9.1.css" media="(max-width:1200px)"/> <!-- style标签上面的媒体查询 --> <style media="screen and (min-width:1200px)"> .box{ color:white; font:bold 30px "微软雅黑"; } </style>and 条件@media(min-width:800px)and(max-width:1200px)and(orientation:portrait){...}or 关键词 @media(min-width:800px)or(orientation:portrait){...}not 关键词 @media(not min-width:800px){...}十、css3盒模型
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。
主要包括以下用户界面属性：resize：none | both | horizontal | vertical | inheritbox-sizing: content-box | border-box | inheritoutline:outline-color outline-style outline-width outine-offset
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
resize属性指定一个元素是否应该由用户去调整大小。
十一、box-shadow
box-shadow属性可以设置一个或多个下拉阴影的框。
div{width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 30px #888888; // x轴 y轴 模糊程度 颜色}