html5 和 CSS3 有什么新特性? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
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 事件 ...");
- }
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 的距离 */
- }
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/html5/16871.html