HTML5和CSS3的新特性(浓缩好记版) - 好文

综述：这个问题在面试的时候经常被问到，有必要做一个总结，理解的深刻充分一些

1.html5的新特性？(记住有九大模块内容)

*
添加了video，radio标签

*
添加了canvas画布和svg,渲染矢量图片

*
添加了一些列语义化标签header,footer,main,section,aside,nav等

*
input的type值新添加了很多属性（email，url，number，range，Date pickers (date, month, week,
time, datetime, datetime-local)，search，color）

*
添加了地理位置定位功能 Geolocation API

*
添加了web存储功能，localStorage和sessionStorage

*
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本

*
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时
web worker 在后台运行。

*
服务端事件推送（EventSource 对象用于接收服务器发送事件通知），所有主流浏览器均支持服务器发送事件，除了 Internet Explorer
if(typeof(EventSource)!=="undefined"){ var source=new
EventSource("/example/html5/demo_sse.php"); source.onmessage=function(event){
console.log(event.data); }; }else{ console.log("抱歉，您的浏览器不支持 server-sent 事件
..."); }
2.CSS3中新添加的特性？（css3也有九大属性，要多去实践应用）

*
媒体查询（可以查询设备的物理像素然后进行自适应操作）

*
transform，transition，translate,scale,skelw，rotate等相关动画效果

*
box-shadow,text-shadow等特效

*
CSS3 @font-face 规则,设计师可以引入任意的字体了

*
CSS3 @keyframes 规则，可以自己创建一些动画等

*
2D、3D转换

*
添加了border-radius，border-image等属性

*
CSS3 创建多列（column-count规定文本可以以几列的方式布局）

*
CSS3 用户界面（resize，box-sizing，outline-offset）
div{ resize:both; /*规定元素的尺寸可以由用户进行手动的调整*/ overflow:auto; } div{
box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; } div{
margin:20px; width:150px; padding:10px; height:70px; border:2px solid black;
outline:2px solid red; /*在元素的外围添加一层轮廓，轮廓是不占位置的*/ outline-offset:12px;
/*轮廓距离border的距离*/ }

热门工具换一换