@lwxyfer 2016-01-05T14:28:18.000000Z 字数 6445 阅读 1409

HTML5 & CSS3 特性

lwxyfer.com

https://github.com/remy/html5demos
这个是HTML5新特性的演示

http://www.w3school.com.cn/html5/html_5_webstorage.asp
开源书籍：http://diveintohtml5.info/
sessionStorage、localStorage、Web SQL DateBase、Indexed DB、Canvas绘图、FileReader、Drag&Drop…

今天就先总结一些新特性。

HTML5

下文仅对大方面的东西细说下。
http://www.webkfa.com/one4/w1730.html 这里详细讲了标签，接口的废除与新的产生。比如头部标签的简化：，这些。

一：语义化标签：

简单便捷，对SEO友好

<header>
<nav>
<article>
<section>
<footer>

二：对表单的支持

<form>
    Email:<input type="email" required /></br>
    Number:<input type="number" max="10" /></br>
    Date :<input type="date"></br>
    File:<input type="file" accept="image/png" /></br>
    <input type="submit">
</form>

三：Media 的支持

<video>
    <source src="movie.mp4">
    <source src="movie.ogv">
    <object data="movie.swf">
        <a href="movie.mp4">Download</a>
    </object>
</video>

四：Canvas

html结构

<canvas id="myCanvas" width="200" height="100"></canvas>

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

五：Drag & Drop

HTML5为元素新增了用于拖拽的属性draggable，这个属性决定了元素是否能被拖拽，如果draggable=”true”，则元素可被拖拽，否则只能选择元素的文本。

ondragstart 、ondragenter、ondragover、ondragover、ondrop 多个事件处理拖动过程

http://html5demos.com/dnd-upload 拖拽上传，以及AJAX的使用。还有是文件的读取。
http://www.ruanyifeng.com/blog/2012/08/file_upload.html

六：Application Cache

HTML5的离线存储使得这个问题迎刃而解。HTML5的web storage API 采用了离线缓存，会生成一个清单文件（manifest file），这个清单文件实质就是一系列的URL列表文件，这些URL分别指向页面当中的HTML,CSS,Javascrpit,图片等相关内容。

一个Mainfest file实例：

–  CACHE MANIFEST
   /demo/test/style.css
   /demo/test/jquery.min.js
   /demo/test/test.html

当使用离线应用时，应用会引入这一清单文件，浏览器读取这一文件，下载相应的文件，并将其缓存到本地。使得这些web应用能够脱离网络使用，而用户在离线时的更改也同样会映射到清单文件中，并在重新连线之后将更改返回应用，工作方式与我们现在所使用的网盘有着异曲同工之处。

七：Local storge

Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie则存在很多致命伤。

假如你需要存储的只是简单的数据则可以使用Web Storage。
Web Storage实际上由两部分组成：sessionStorage与localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

TODO：
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API
http://www.html5rocks.com/zh/features/storage
http://www.w3schools.com/html/html5_webstorage.asp

八：WebSockets webworker

http://www.html5rocks.com/zh/tutorials/websockets/basics/
https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
https://www.zhihu.com/question/20215561
https://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/

WebSocket是HTML5规格中的一个非常重要的新特性，这个新特性实现了数据的实时传送，可以允许用户在浏览器中实现双向通信，实现数据的及时推送，使得服务器与客户端、浏览器之间能够双向连接，自到明确关闭该连接才断开。在这之前，用户需要获取新的信息必须频繁的刷新页面才能达到要求。新的数据是要通过这种刷新的方式才能够显示在用户的浏览器上。而有了WebSocket这个技术后，我们可以实现及时通信，不需要刷新页面，数据会自动的由服务器发送到用户的浏览器上，用户可以及时的看见新的数据信息，这就大大扩展了网页自动获取新数据的功能。

CSS3：Cascading Stylesheet

它为我们带来了许多期待已久的新特性，例如圆角，阴影，gradients(渐变)，transitions(过渡) 或 animations(动画) ，当然还有新的布局如 multi-columns ， flexible box 或 grid layouts。这些也是将要着重讨论的东西。

CSS3 被划分为模块。
其中最重要的 CSS3 模块包括：

选择器
盒模型
背景和边框
文本效果
2D/3D 转换变形过渡
动画
布局：多列布局，弹性盒
用户界面

参考

完全参考手册：https://media-mediatemple.netdna-ssl.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf
基本参看手册http://www.w3school.com.cn/cssref/index.asp=
MDN 详细变化： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS3
国外技术讲：http://www.smashingmagazine.com/2009/07/css-3-cheat-sheet-pdf/
IBM:https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
IE兼容：http://www.ibm.com/developerworks/cn/web/1105_qinjian_css3_3/
CSS性能提高：http://www.ibm.com/developerworks/cn/web/1109_zhouxiang_optcss/
总结的还是可以的：http://blog.bingo929.com/div-css-web-design-to-next-level-with-css3.html
有点深度的了着重看：http://www.ibm.com/developerworks/cn/web/1009_chengfu_dojocss/

选择器：selector

选择器：http://www.w3school.com.cn/cssref/css_selectors.asp

@Font-face 特性

@font-face { 
 font-family: BorderWeb; 
 src:url(BORDERW0.eot); 
 } 
 @font-face { 
 font-family: Runic; 
 src:url(RUNICMT0.eot); 
 } 
 .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
 .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

Word-wrap & Text-overflow

文字渲染（Text-decoration）

Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度

div { 
 -webkit-text-fill-color: black; 
 -webkit-text-stroke-color: red; 
 -webkit-text-stroke-width: 2.75px; 
 }

布局模块

multi-columns 常说的多栏布局
flexible box 弹性盒
grid layouts

就这三个布局模块来说。flex应该是发展最好的。使用很简单，兼容性较高。当然IE10以下那可不是浏览器。

边框和颜色（color, border）

颜色的透明度 RGBA

color: rgba(255, 0, 0, 0.75); 
background: rgba(0, 0, 255, 0.75);

HSL 的透明度
圆角
border-image也是一特性来讲嘛。

渐变效果（Gradient）

线性渐变

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E)); //简单线变:左到右的渐变
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
        color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E)); //复杂线变:水平渐变，33% 处为绿色，66% 处为橙色：

径向渐变

 backgroud: 
 -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

阴影（Shadow）和反射（Reflect）

阴影效果，阴影效果既可用于普通元素，也可用于文字

 .class1{ 
 text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
 } 
 .class2{ 
 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 
 }

反射

.classReflect{ 
 -webkit-box-reflect: below 10px 
 -webkit-gradient(linear, left top, left bottom, from(transparent), 
      to(rgba(255, 255, 255, 0.51))); 
 }

背景

CSS3 多出了几种关于背景（background）的属性，我们这里会简单介绍一下：
首先：“Background Clip”，该属确定背景画区，有以下几种可能的属性：
* background-clip: border-box; 背景从 border 开始显示 ;
* background-clip: padding-box; 背景从 padding 开始显示 ;
* background-clip: content-box; 背景显 content 区域开始显示 ;
* background-clip: no-clip; 默认属性，等同于 border-box;
通常情况，我们的背景都是覆盖整个元素的，现在 CSS3 让您可以设置是否一定要这样做。这里您可以设定背景颜色或图片的覆盖范围。
其次：“Background Origin”，用于确定背景的位置，它通常与 background-position 联合使用，您可以从 border、padding、content 来计算 background-position（就像 background-clip）。
* background-origin: border-box; 从 border. 开始计算 background-position;
* background-origin: padding-box; 从 padding. 开始计算 background-position;
* background-origin: content-box; 从 content. 开始计算 background-position;
还有，“Background Size”，常用来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身。有以下可能的属性：
* background-size: contain; 缩小图片以适合元素（维持像素长宽比）
* background-size: cover; 扩展元素以填补元素（维持像素长宽比）
* background-size: 100px 100px; 缩小图片至指定的大小 .
* background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包含元素的尺寸 .
最后，“Background Break”属性，CSS3 中，元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。
* background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
* background-break: bounding-box; 把盒之间的距离计算在内；
* background-break: each-box; 为每个盒子单独重绘背景。

盒子模型

就目前而言，当然指：display：flex 而box已经是老式写法了。我的文章已经详细讲过了，现在就不多讲了。

这里也讲下：box-sizing： border-box | content-box

Transition, Transform 和 Animation

以前文章我也写过，这里也不再细说。

媒体特性与Responsive布局

这个不能忘了，还是很重要的。