目录
5、为文字和盒子添加阴影：text-shadow、box-shadow
9、CSS3 @keyframes 规则，可以自己创建一些动画等
1. CSS3新特性
1、CSS3的选择器
- E:last-child 匹配父元素的最后一个子元素E。
- E:nth-child(n)匹配父元素的第n个子元素E。
- E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
2、边框圆角
border-radius: 8px;
3、多列布局 （multi-column layout）
column-count、column-width、column-gap、column-rule
兼容性不好，还不够成熟
/*CSS*/
.mul-col{
column-count: 3; /*列数*/
column-gap: 10px; /*列之间的间隙*/
column-rule: 2px solid green; /*列之间的间隔线*/
}
/*HTML*/
<div class="mul-col">
<div style="background: grey;">
<h3>新手上路</h3>
</div>
<div style="background: palevioletred;">
<h3>付款方式</h3>
</div>
<div style="background: cornflowerblue;">
<h3>淘宝特色</h3>
</div>
</div>
4、@Font-face 特性
Font-face 可以用来引入任意字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }5、为文字和盒子添加阴影：text-shadow、box-shadow
语法：text-shadow / box-shadow: h-shadow v-shadow blur color;
- h-shadow表示水平阴影的位置，允许负值，该值必需。
- v-shadow表示垂直阴影的位置，允许负值，该值必需。
- blur表示阴影的距离，color表示阴影的颜色，这两个值是可选的。
/*CSS*/
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
box-shadow: 5px 2px 6px rgba(64, 64, 64, 0.6);
}
//HTML
<div class="class1">
<h3>新手上路</h3>
</div>
6、CSS3 的渐变效果
基本语法：
background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值));
- 参数type（类型）为 linear（线性渐变）
- x1 y1, x2 y2是 颜色渐变体的两个点的坐标，从(x1,y1)到(x2,y2)
.class1{
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
}
<div class="class1"></div>7、旋转,缩放,定位,倾斜
transform:
- 旋转 rotate(90deg) ：沿Z轴方向顺时针旋转90度
- 伸缩 scale(0.85,0.90) ：水平方向变成原来的0.85倍，垂直方向变为原来的0.9倍
- 平移 translate(45px,30px) ：向右移动45像素，向下移动30像素的距离
- 倾斜 skew(30deg,10deg)：沿X轴倾斜30度，沿Y轴倾斜10度
8、在CSS3中唯一引入的伪元素是 ::selection
9、CSS3 @keyframes 规则，可以自己创建一些动画等
例：鼠标放到div上，触发动画animations，维持2s（从0%变化到100%的状态）
<div class="main"></div>
.main:hover{
animation: animations 2s ease 0s;
}
@keyframes animations {
0%{
left: 10px;
opacity: 1;
}
50%,70%{
left: 50%;
opacity: .7;
margin-left:-150px;
}
100%{
left: 100%;
opacity: 0;
margin-left:-300px;
}
}
10、多背景（添加多个背景）
background-image: url("images/overcast.png"),
url("images/rainbow.png"),
url("images/overcast.png");2. HTML5的新特性
1、 语义化标签
HTML5增加了新的内容标签，这些标签带有一定的语义，使搜索引擎爬取你的网站信息更高效。
HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。常见的语义化标签：
<header></header> 头部
<nav></nav> 导航栏
<section></section> 区块（有语义化的div）
<main></main> 主要区域
<article></article> 主要内容
<aside></aside> 侧边栏
<footer></footer> 底部2、 本地存储
HTML5 提供了两种在本地存储数据的新方法：
localStorage - 没有时间限制的数据存储。一直存在本地的
sessionStorage - 针对一个 session 的数据存储。伴随着session，窗口一旦关闭就没了
3、媒体标签
（1） audio 音频
<audio src='' controls autoplay loop='true'></audio>属性：
- controls 控制面板
- autoplay 自动播放
- loop=‘true’ 循环播放
（2）video 视频
<video src='' poster='imgs/aa.jpg' controls></video>属性：
- poster 指定视频还没有完全下载完毕 、或 用户还没有点击播放前 显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
- controls 控制面板
- width
- height
（3）source
浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。
<video>
<source src='aa.flv' type='video/flv'></source>
<source src='aa.mp4' type='video/mp4'></source>
</video>4、 增强型表单
1）新的表单类型
- email ：能够验证当前输入的邮箱地址是否合法
- url ： 验证URL
- number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
- search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
- range ： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
- color ： 提供了一个颜色拾取器
- time ： 时分秒
- data ： 日期选择年月日
- datatime ： 时间和日期(目前只有Safari支持)
- datatime-local ：日期时间控件
- week ：周控件
- month：月控件
例：<input type="range"/>2）新的表单属性：
- placeholder ：提示信息
- autofocus ：自动获取焦点
- autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：
表单必须提交过
必须有name属性。
- required：要求输入框不能为空，必须有值才能够提交。
- pattern： 输入框内容必须符合的正则表达式。例如手机号patte="^(+86)?\d{10}$"
- multiple：是否允许多个输入。可以选择多个文件或者多个邮箱
- min：允许输入的数字最小值
- max：允许输入的数字最大值
- minlength：允许输入的字符串最小长度
- maxlength：允许输入的字符串最大长度
- form：指定输入元素所从属的表单id，可以实现输入框放在表单外部并能被提交的效果验证属性(了解即可)
例： <input type="text" placeholder="嘻嘻~" form="formID"/>
3）新的表单元素：
- <datalist>：数据列表，为input提供输入建议列表。
- <progress>：进度条，展示连接/下载进度。
- <meter>：刻度尺/度量衡，描述数据所处的阶段，红色(危险)=>黄色(警告)=>绿色(优秀)。
- <output>：输出内容，语义上表示此处的数据是经过计算而输出得到的。
例：<progress></progress>
4）新的表单事件：
- oninput 每当input里的输入框内容发生变化都会触发此事件。
- oninvalid 当验证不通过时触发此事件。
5、 拖放
抓取对象以后拖到另一个位置。设置元素可拖放：
<img draggable="true" />6、 canvas绘图（位图 ）
canvas 元素使用 JS 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<canvas id="c2" width="400" height="300"></canvas> //创建画布元素
var ctx = c2.getContext('2d'); //使用H5 Canvas API进行绘图
ctx.fillStyle = '#FFF' //填充颜色/渐变色对象7、 SVG绘图（矢量图）
SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准
例：常用的SVG图形 圆形
<circle r="100" cx="400" cy="300" fill="#f0f" fill-opacity="0.4"
stroke="#00f" stroke-width="6" stroke-opacity=".4"></circle>Canvas与SVG的不同：
(1) Canvas是位图；SVG是矢量图
(2) Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)
(3) Canvas内容不能使用CSS；SVG内容可以使用CSS；
(4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定
8、 地理定位
Geolocation（地理定位）用于定位用户的位置
通过浏览器获取当前用户的所在地理坐标，以实现“LBS服务”（Location Based Service 基于本地的服务），如实时导航、周边推荐。
情形1：用户使用手机浏览器——可以根据内置GPS芯片读取数据
情形2：用户使用PC浏览器——可以根据电脑的IP地址进行反向查询(需要很大的IP分配库)
9、 WebWorker
- WebWorker的本质：就是一个执行指定任务的独立线程，且该线程可以与UI主线程进行消息数据传递。
- Worker任务不允许直接操作DOM树，也不允许使用任何的BOM对象
- 需要的数据只能由UI主线程来传递，处理的结果也必须交由UI主线程来显示。
1）引入WebWorker 的原因
背景：Chrome浏览器中发起资源请求的有6个线程；但是只有1个线程负责渲染页面——称为UI主线程——浏览器中所有的代码只能由一个线程来执行。
问题：若浏览器加载了一个很耗时的JS文件(可能影响DOM树结构)，浏览器必须等待该文件执行完成才会继续执行后续的代码(HTML/CSS/JS等)——如果一个JS文件要执行10s(可能有很深的循环/递归等科学计算/解密)，会发生什么？——执行耗时JS任务过程中，会暂停页面中一切内容的渲染以及事件的处理。
解决方案：H5新特性——Web Worker
10、 WebSocket
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
