首页 > 编程知识 正文

html5和css3知识点整理,常用css3属性

时间:2023-05-03 06:32:52 阅读:262750 作者:447

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

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的距离*/}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。