1. 程式人生 > >HTML5和CSS3的新特性

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