Html5新特性
1.新的Doctype尽管使用，即使浏览器不懂这句话也会按照标准模式去渲染
2. Figure元素用和来语义化地表示带标题的图片
This is an image of something interesting.
3. 重新定义的已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明
4. 去掉link和script标签里面的type属性5. 加/不加 括号HTML5没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签
6. 让你的内容可编辑，只需要加一个contenteditable属性7. Email Inputs如果我们给Input的type设置为email，浏览器就会验证这个输入是否是email类型，当然不能只依赖前端的校验，后端也得有相应的校验
8. Placeholders这个input属性的意义就是不必通过javascript来做placeholder的效果了
9. Local Storage
使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在
10. 语义化的header和footer11. 更多的HTML5表单特性12. IE和HTML5默认的，HTML5新元素被以inline的方式渲染，不过可以通过下面这种方式让
其以block方式渲染
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是IE会忽略这些样式，可以像下面这样fix:
document.createElement(”article”);
document.createElement(”footer”);
document.createElement(”header”);
document.createElement(”hgroup”);
document.createElement(”nav”);
document.createElement(”menu”);
13. hgroup一般在header里面用来将一组标题组合在一起，如
Recall Fan Page
Only for people who want the memory of a lifetime.
14. Required属性required属性定义了一个input是否是必须的，你可以像下面这样声明
或者
15. Autofocus属性
正如它的词义，就是聚焦到输入框里面
16. Audio支持HTML5提供了标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理，如
17. Video支持
和Audio很像，标签提供了对于video的支持，由于HTML5文档并没有给video指定一个特定的编码，所以浏 览器去决定要支持哪些编码，导致了很多不一致。Safari和IE支持H.264编码的格式，Firefox和Opera支持Theora和Vorbis 编码的格式，当使用HTML5 video的时候，你必须都提供：
Your browser is old. Download this video instead.
18. 预加载视频preload属性就像它的字面意思那么简单，你需要决定是否需要在页面加载的时候去预加载视频
19. 显示视频控制
20. 正则表达式由于pattern属性，我们可以在你的markup里面直接使用正则表达式了
Create a Username:
10″ pattern=”[A-Za-z]{4,10}” autofocus required>
Go
21. 检测属性支持
除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持，如：
if (!’pattern’ in document.createElement(’input’) ) {
// do client/server side validation
}
22. Mark元素把元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：
Search Results
They were interrupted, just after Quato said, ”Open your Mind”.
23. 什么时候用
24. 想立即使用HTML5?不要等2022了，现在就可以使用了，just do it.
25. 哪些不是HTML51)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data属性
CSS中使用：
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
Don’t Touch Me
27. Output元素元素用来显示计算结果，也有一个和label一样的for属性
28. 用Range Input来创建滑块HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值
input[type=range]:before { content: attr(min); padding-right: 5px;
}
input[type=range]:after { content: attr(max); padding-left: 5px;}
本地存储方法
1.判断
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
2.设置
存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：
localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值
这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：
var storage = window.localStorage;
function showStorage(){
for(var i=0;i
//key(i)获得相应的键，再用getItem()方法获得对应的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "
");
}
}
CSS3新特性
边框：(Borders)
border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果
border-image:控制边框图象
border-corner-image:控制边框边角的图象
border-radius:能产生类似圆角矩形的效果
背景(Backgrounds)
background-origin:决定了背景在盒模型中的初始位置，提供了3个值，border, padding和content
border:控制背景起始于左上角的边框
padding:控制背景起始于左上角的留白
content:控制背景起始于左上角的内容
background-clip:决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding
border:会覆盖住背景
padding:不会覆盖背景
background-size:可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定
multiple backgrounds:多重背景图象，可以把不同背景图象只放到一个块元素里。
文字效果：(Text effects)
text-shadow:文字投影，可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。
text -overflow:当文字溢出时，用"..."提示。包括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。
颜色：(Color)
HSL colors:除了支持RGB眼色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如hsl(0,100%, 50%)
HSLA colors:加了个不透明度(Apacity)，用0到1之间的数来表示，比如hsla(0,100%,50%,0.2)
opacity:直接控制不透明度，用0到1之间的数来表示
RGBA colors:和HSLA colors类似，加了个不透明度
用户界面(User-interface)
resize:可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局
选择器：(Selectors)
Attribute selectors:在属性中可以加入通配符，包括^,$,*
[att^=val]:表示开始字符是val的att属性
[att$=val]:表示结束字符是val的att属性
[att*=val]:表示包含至少有一个val的att属性
其它模块：(Other modules)
media queries:感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。
multi-column layout:多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值
column-width:指定每列宽度
column-count:指定列数
column-gap:指定每列之间的间距
column-rule-color:控制列间的颜色
column-rule-style:控制列间的样式
column-rule-width:控制列间的宽度
column-space-distribution:平均分配列间距
�Q�����
