html5的新特性
- 添加了用於媒介回放的
<video>，<audio>元素 - 添加了語義標簽譬如
header、footer、nav等等元素 - 添加了用於繪畫的 canvas 元素和svg繪圖
- 擴充了input的輸入類型，如下
| 輸入類型 | 描述 |
|---|---|
| color | 主要用於選取顏色 |
| date | 從一個日期選擇器選擇一個日期 |
| datetime | 選擇一個日期（UTC 時間） |
| datetime-local | 選擇一個日期和時間 (無時區) |
| 包含 e-mail 地址的輸入域 | |
| month | 選擇一個月份 |
| number | 數值的輸入域 |
| range | 一定范圍內數字值的輸入域 |
| search | 用於搜索域 |
| tel | 定義輸入電話號碼字段 |
| time | 選擇一個時間 |
| url | URL 地址的輸入域 |
| week | 選擇周和年 |
- 添加了地理位置定位功能Geolocation（地理定位）
window.navigator.geolocation {
getCurrentPosition: fn 用於獲取當前的位置數據
watchPosition: fn 監視用戶位置的改變
clearWatch: fn 清除定位監視
}
下面是獲取用戶定位信息示例
navigator.geolocation.getCurrentPosition(
function(pos){
console.log('用戶定位數據獲取成功')
//console.log(arguments);
console.log('定位時間：',pos.timestamp)
console.log('經度：',pos.coords.longitude)
console.log('緯度：',pos.coords.latitude)
console.log('海拔：',pos.coords.altitude)
console.log('速度：',pos.coords.speed)
}, //定位成功的回調
function(err){
console.log('用戶定位數據獲取失敗')
//console.log(arguments);
} //定位失敗的回調
)
- 添加了web存儲功能，
localStorage和sessionStorage - 使用 HTML5，通過創建
cache manifest文件，可以輕松地創建 web 應用的離線版本
manifest 文件可分為三個部分：
CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面
- web worker
web worker是運行在后台的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在后台運行（相當於實現多線程並發）。
- 服務端事件推送，所有主流瀏覽器均支持服務器發送事件，除了 Internet Explorer
EventSource 對象用於接收服務器發送事件通知：
var source=newEventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data +"<br>";
};
為了讓上面的例子可以運行，您還需要能夠發送數據更新的服務器（比如 PHP 和 ASP）。
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>
CSS3的新特性
- 媒體查詢
從 CSS 版本 2 開始，就可以通過媒體類型在 CSS 中獲得媒體支持。如果您曾經使用過打印樣式表，那么您可能已經使用過媒體類型。清單 1 展示了一個示例。
清單 1. 使用媒體類型
<linkrel="stylesheet"type="text/css"href="site.css"media="screen"/>
<linkrel="stylesheet"type="text/css"href="print.css"media="print"/>
清單 2. 媒體查詢規則
@media all and(min-width:800px){...}
@media all 是媒體類型，也就是說，將此 CSS 應用於所有媒體類型。
(min-width:800px) 是包含媒體查詢的表達式，如果瀏覽器的最小寬度為 800 像素，則會告訴瀏覽器只運用下列 CSS。
清單 3. and 條件
@media(min-width:800px)and(max-width:1200px)and(orientation:portrait){...}
清單 4. or 關鍵詞
@media(min-width:800px)or(orientation:portrait){...}
清單 5. 使用 not
@media(not min-width:800px){...}
- 選擇器
- transform，transition，translate,scale,skelw，rotate等相關動畫效果
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡寫屬性，用於在一個屬性中設置四個過渡屬性。 | 3 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 |
| transition-timing-function | 規定過渡效果的時間曲線。默認是 "ease"。 | 3 |
| transition-delay | 規定過渡效果何時開始。默認是 0。 | 3 |
div
{
transition-property: width;
transition-duration:1s;
transition-timing-function: linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
- box-shadow,text-shadow等特效
- 添加了border-radius，border-image等屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| border-image | 設置所有邊框圖像的速記屬性。 | 3 |
| border-radius | 一個用於設置所有四個邊框- *-半徑屬性的速記屬性 | 3 |
| box-shadow | 附加一個或多個下拉框的陰影 | 3 |
-
CSS3 @font-face 規則,可以引入任意的字體了
-
CSS3 @keyframes 規則，可以自己創建一些動畫等
-
2D、3D轉換
-
CSS3 創建多列（column-count規定文本可以以幾列的方式布局）
-
CSS3 用戶界面（resize，box-sizing，outline-offset）