綜述：這個問題在面試的時候經常被問到，有必要做一個總結，理解的深刻充分一些

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