h5的新特性？
1.新增一些语义化标签 <article> <section> <aside><header> <footer><nav>等
2.Canvas画布
3.audio音频 video视频
4.drag 拖拽
5.本地存储 localstorage sessionStorage
localStorage是长期储存数据,关闭浏览器后数据不会丢失
sessionStorage是关闭浏览器后数据自动删除
6.webSocket 长连接
7.地理定位 HTML5 Geolocation API 用于获得用户的地理位置。
8.增强型表单 input, number, datalist,keygen,output,progress
9.svg矢量绘图
10. webWorker 实现js多进程。
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。（相当于实现多线程并发）
h5新特性部分详细
新增语义化元素：
<header>
<nav>
<article>
<section>
<aside>
<footer>
HTML5 Audio(音频)、Video(视频)
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
HTML5 Canvas
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
<!--
canvas 绘图接口.
-->
<div>
<canvas width="500" height="500"></canvas>
</div>
<script>
var canvas=document.querySelector("canvas");//获取cnavas元素对象
var context=canvas.getContext("2d");//获取canvas绘图上下文【环境】2d环境.
//绘制线段
context.moveTo(0,0);//设置笔触起点
context.lineTo(500,500);//线段终点 可以有多个.
context.lineTo(450,250);
context.lineTo(250,450);
context.lineTo(500,500);
context.lineWidth=10;//设置路径的宽度
context.strokeStyle="rgba(255,0,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" href="./9.css" media="(min-width:1200px)"/> <!-- max-width:1200px 当视窗小于等于 1200px --> <link rel="stylesheet" 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轴 模糊程度 颜色
}