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