CSS3 和 HTML5 新特性一覽

CSS3新特性

CSS3 選擇器

CSS3 邊框（Borders）

div{ 
    border:2px solid; 
    border-radius:25px; 
    box-shadow: 10px 10px 5px #888888; 
    border-image:url(border.png) 30 30 round; 
}複製程式碼

CSS3 背景

CSS3中包含幾個新的背景屬性，提供更大背景元素控制。

div{ 
    background:url(img_flwr.gif); 
    background-repeat:no-repeat; 
    background-size:100% 100%; 
    background-origin:content-box;
} 
多背景 
body{ 
    background-image:url(img_flwr.gif),url(img_tree.gif); 
}複製程式碼

CSS3 漸變

CSS3 定義了兩種型別的漸變（gradients）：

1. 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向

   background: linear-gradient(direction, color-stop1, color-stop2, ...);複製程式碼

2. 徑向漸變（Radial Gradients）- 由它們的中心定義

   background: radial-gradient(center, shape size, start-color, ..., last-color);複製程式碼

CSS3 文字效果

CSS3 字型

以前CSS3的版本，網頁設計師不得不使用使用者計算機上已經安裝的字型。使用CSS3，網頁設計師可以使用他/她喜歡的任何字型。當你發現您要使用的字型檔案時，只需簡單的將字型檔案包含在網站中，它會自動下載給需要的使用者。您所選擇的字型在新的CSS3版本有關於@font-face規則描述。您"自己的"的字型是在 CSS3 @font-face 規則中定義的。

<style>
    @font-face{
        font-family: myFirstFont;
        src: url(sansation_light.woff);
    }
    div{
        font-family:myFirstFont;
    }
</style>複製程式碼

CSS3 轉換和變形

2D新轉換屬性

以下列出了所有的轉換屬性:

2D 轉換方法

3D轉換屬性

下表列出了所有的轉換屬性：

3D 轉換方法

CSS3 過渡

過渡屬性

下表列出了所有的過渡屬性:

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;
}複製程式碼

CSS3 動畫

要建立CSS3動畫，你需要了解@keyframes規則。@keyframes規則是建立動畫。 @keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。

例項

當動畫為 25% 及 50% 時改變背景色，然後當動畫 100% 完成時再次改變：

@keyframes myfirst{
    0% {
        background: red;
    }
    25% {
        background: yellow;
    }
    50% {
        background: blue;
    }
    100% {
        background: green;
    }
}複製程式碼

div{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari and Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}複製程式碼

CSS3 多列

下表列出了所有 CSS3 的多列屬性：

CSS3 盒模型

在 CSS3 中, 增加了一些新的使用者介面特性來調整元素尺寸，框尺寸和外邊框，主要包括以下使用者介面屬性：

• resize：none | both | horizontal | vertical | inherit
• box-sizing: content-box | border-box | inherit
• outline:outline-color outline-style outline-width outine-offset

resize屬性指定一個元素是否應該由使用者去調整大小。

box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。

outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。

CSS3伸縮佈局盒模型(彈性盒)

CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。

引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

下表列出了在彈性盒子中常用到的屬性:

CSS3 多媒體查詢

從 CSS 版本 2 開始，就可以通過媒體型別在 CSS 中獲得媒體支援。如果您曾經使用過列印樣式表，那麼您可能已經使用過媒體型別。清單 1 展示了一個示例。

清單 1. 使用媒體型別

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />複製程式碼

@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) { ... }複製程式碼

@media (min-width:800px) or (orientation:portrait) { ... }複製程式碼

@media (not min-width:800px) { ... }複製程式碼

HTML5 的新特性：

為了更好地處理今天的網際網路應用，HTML5新增了很多新元素及功能，比如: 圖形的繪製，多媒體內容，更好的頁面結構，更好的形式 處理，和幾個api拖放元素，定位，包括網頁 應用程式快取，儲存，網路工作者，等

（一） 語義標籤

　語義化標籤使得頁面的內容結構化，見名知義

（二）增強型表單

　HTML5 擁有多個新的表單 Input 輸入型別。這些新特性提供了更好的輸入控制和驗證。

　　　HTML5 也新增以下表單元素

HTML5 新增的表單屬性

• placehoder 屬性，簡短的提示在使用者輸入值前會顯示在輸入域上。即我們常見的輸入框預設提示，在使用者輸入後消失。
  
• required 屬性，是一個 boolean 屬性。要求填寫的輸入域不能為空
  
• pattern 屬性，描述了一個正規表示式用於驗證<input> 元素的值。
  
• min 和 max 屬性，設定元素最小值與最大值。
  
• step 屬性，為輸入域規定合法的數字間隔。
  
• height 和 width 屬性，用於 image 型別的 <input> 標籤的影像高度和寬度。
  
• autofocus 屬性，是一個 boolean 屬性。規定在頁面載入時，域自動地獲得焦點。
  
• multiple 屬性 ，是一個 boolean 屬性。規定<input> 元素中可選擇多個值。　　　

（三）視訊和音訊

• HTML5 提供了播放音訊檔案的標準，即使用 <audio> 元素

  1 2 3 4 5

  <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的瀏覽器不支援 audio 元素。 </audio>

　control 屬性供新增播放、暫停和音量控制元件。

　在<audio> 與 </audio> 之間你需要插入瀏覽器不支援的<audio>元素的提示文字 。

　<audio> 元素允許使用多個 <source> 元素. <source> 元素可以連結不同的音訊檔案，瀏覽器將使用第一個支援的音訊檔案

　目前, <audio>元素支援三種音訊格式檔案: MP3, Wav, 和 Ogg

• HTML5 規定了一種通過 video 元素來包含視訊的標準方法。

  1 2 3 4 5

  <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的瀏覽器不支援Video標籤。 </video>

  control 提供了 播放、暫停和音量控制元件來控制視訊。也可以使用dom操作來控制視訊的播放暫停，如 play() 和 pause() 方法。

  同時 video 元素也提供了 width 和 height 屬性控制視訊的尺寸.如果設定的高度和寬度，所需的視訊空間會在頁面載入時保留。如果沒有設定這些屬性，瀏覽器不知道大小的視訊，瀏覽器就不能再載入時保留特定的空間，頁面就會根據原始視訊的大小而改變。

  與 標籤之間插入的內容是提供給不支援 video 元素的瀏覽器顯示的。

  video 元素支援多個source 元素. 元素可以連結不同的視訊檔案。瀏覽器將使用第一個可識別的格式（ MP4, WebM, 和 Ogg）

（四）Canvas繪圖

　標籤只是圖形容器，必須使用指令碼來繪製圖形。

Canvas - 圖形

1. 建立一個畫布，一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪製。預設情況下 元素沒有邊框和內容。

   1	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

   　　標籤通常需要指定一個id屬性 (指令碼中經常引用), width 和 height 屬性定義的畫布的大小，使用 style 屬性來新增邊框。你可以在HTML頁面中使用多個 <canvas> 元素

2. 使用Javascript來繪製影像，canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成

   1 2 3 4 5 6

   <script> 　　var c=document.getElementById("myCanvas"); 　　var ctx=c.getContext("2d"); 　　ctx.fillStyle="#FF0000"; 　　ctx.fillRect(0,0,150,75); </script>

   　　getContext("2d") 物件是內建的 HTML5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影像的方法。

   　　設定 fillStyle 屬性可以是CSS顏色，漸變，或圖案。fillStyle預設設定是#000000（黑色）。fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。　

Canvas - 路徑

在Canvas上畫線，我們將使用以下兩種方法：

moveTo(x,y) 定義線條開始座標

lineTo(x,y) 定義線條結束座標

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();複製程式碼

定義開始座標(0,0), 和結束座標 (200,100). 然後使用 stroke() 方法來繪製線條

Canvas - 文字

使用 canvas 繪製文字，重要的屬性和方法如下：

　　font - 定義字型

　　fillText(text,x,y) - 在 canvas 上繪製實心的文字

　　strokeText(text,x,y) - 在 canvas 上繪製空心的文字

 使用 fillText():
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);複製程式碼

使用 "Arial" 字型在畫布上繪製一個高 30px 的文字（實心）

Canvas - 漸變

漸變可以填充在矩形, 圓形, 線條, 文字等等, 各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來設定Canvas漸變：

createLinearGradient(x,y,x1,y1) - 建立線條漸變

createRadialGradient(x,y,r,x1,y1,r1) - 建立一個徑向/圓漸變

當我們使用漸變物件，必須使用兩種或兩種以上的停止顏色。

addColorStop()方法指定顏色停止，引數使用座標來描述，可以是0至1.

使用漸變，設定fillStyle或strokeStyle的值為漸變，然後繪製形狀，如矩形，文字，或一條線。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradientctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);複製程式碼

　　建立了一個線性漸變，使用漸變填充矩形

Canvas - 影像

把一幅影像放置到畫布上, 使用 drawImage(image,x,y) 方法
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10); 複製程式碼

把一幅影像放置到了畫布上

（五）SVG繪圖

SVG是指可伸縮的向量圖形

SVG 與 Canvas兩者間的區別

SVG 是一種使用 XML 描述 2D 圖形的語言。

Canvas 通過 JavaScript 來繪製 2D 圖形。

SVG 基於 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。

在 SVG 中，每個被繪製的圖形均被視為物件。如果 SVG 物件的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

Canvas 是逐畫素進行渲染的。在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的物件。

（六）地理定位

HTML5 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);
}        
//定位失敗的回撥複製程式碼

（七）拖放API

　拖放是一種常見的特性，即抓取物件以後拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。

　　拖放的過程分為源物件和目標物件。源物件是指你即將拖動元素，而目標物件則是指拖動之後要放置的目標位置。

拖放的源物件(可能發生移動的)可以觸發的事件——3個：

dragstart：拖動開始

drag：拖動中

dragend：拖動結束

整個拖動過程的組成： dragstart*1 + drag*n + dragend*1

拖放的目標物件(不會發生移動)可以觸發的事件——4個：

dragenter：拖動著進入

dragover：拖動著懸停

dragleave：拖動著離開

drop：釋放

整個拖動過程的組成1： dragenter*1 + dragover*n + dragleave*1

整個拖動過程的組成2： dragenter*1 + dragover*n + drop*1

dataTransfer：用於資料傳遞的“拖拉機”物件；

在拖動源物件事件中使用e.dataTransfer屬性儲存資料：

e.dataTransfer.setData( k, v )

在拖動目標物件事件中使用e.dataTransfer屬性讀取資料：

var value = e.dataTransfer.getData( k )

（八） WebWorker

　當在 HTML 頁面中執行指令碼時，頁面的狀態是不可響應的，直到指令碼已完成。

　　web worker 是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能。您可以繼續做任何願意做的事情：點選、選取內容等等，而此時 web worker 在後臺執行。

　　首先檢測瀏覽器是否支援 Web Worker

if(typeof(Worker)!=="undefined"){
    // 是的! Web worker 支援!
    // 一些程式碼.....
}else{
    // //抱歉! Web Worker 不支援
}複製程式碼

　　下面的程式碼檢測是否存在 worker，如果不存在，- 它會建立一個新的 web worker 物件，然後執行 "demo_workers.js" 中的程式碼

if(typeof(w)=="undefined"){w=new Worker("demo_workers.js");}複製程式碼

　　然後我們就可以從 web worker 傳送和接收訊息了。向 web worker 新增一個 "onmessage" 事件監聽器：

w.onmessage=function(event){document.getElementById("result").innerHTML=event.data;};複製程式碼

　　當 web worker 傳遞訊息時，會執行事件監聽器中的程式碼。event.data 中存有來自 event.data 的資料。當我們建立 web worker 物件後，它會繼續監聽訊息（即使在外部指令碼完成之後）直到其被終止為止。

如需終止 web worker，並釋放瀏覽器/計算機資源，使用 terminate() 方法。

　完整的 Web Worker 例項程式碼

<!DOCTYPE html>
<html>
<body>
    <p>Count numbers: <output id="result"></output></p>
    <button onclick="startWorker()">Start Worker</button> 
    <button onclick="stopWorker()">Stop Worker</button>
    <br><br>
<script>
    var w;
    function startWorker () {
        if (typeof(Worker) !== "undefined") {
            if (typeof(w) == "undefined") {
                w = new Worker("demo_workers.js");
            }
            w.onmessage = function (event) {
                document.getElementById("result").innerHTML = event.data;
            };
        } else {
            document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
        }
    }
    function stopWorker() { 
        w.terminate();
    }
</script>
</body>
</html>複製程式碼

　　建立的計數指令碼，該指令碼儲存於 "demo_workers.js" 檔案中

var i=0;
function timedCount() {
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount(); 複製程式碼

（九） WebStorage

　使用HTML5可以在本地儲存使用者的瀏覽資料。早些時候,本地儲存使用的是cookies。但是Web 儲存需要更加的安全與快速. 這些資料不會被儲存在伺服器上，但是這些資料只用於使用者請求網站資料上.它也可以儲存大量的資料，而不影響網站的效能。資料以 鍵/值 對存在, web網頁的資料只允許該網頁訪問使用。

客戶端儲存資料的兩個物件為：

• localStorage - 沒有時間限制的資料儲存
  
• sessionStorage - 針對一個 session 的資料儲存, 當使用者關閉瀏覽器視窗後，資料會被刪除。
  

　　在使用 web 儲存前,應檢查瀏覽器是否支援 localStorage 和sessionStorage

if(typeof(Storage)!=="undefined") {
   // 是的! 支援 localStorage  sessionStorage 物件!
   // 一些程式碼.....
} else {
   // 抱歉! 不支援 web 儲存。
}複製程式碼

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

• 儲存資料：localStorage.setItem(key,value);
• 讀取資料：localStorage.getItem(key);
• 刪除單個資料：localStorage.removeItem(key);
• 刪除所有資料：localStorage.clear();
• 得到某個索引的key：localStorage.key(index);

（十）WebSocket

　WebSocket是HTML5開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。在WebSocket API中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。瀏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連線的請求，連線建立以後，客戶端和伺服器端就可以通過 TCP 連線直接交換資料。當你獲取 Web Socket 連線後，你可以通過 send() 方法來向伺服器傳送資料，並通過 onmessage 事件來接收伺服器返回的資料。

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8">
   <title>W3Cschool教程(w3cschool.cn)</title>
    <script type="text/javascript">
        function WebSocketTest() {
            if ("WebSocket" in window) {
                alert("您的瀏覽器支援 WebSocket!");
                // 開啟一個 web socket
                var ws = new WebSocket("ws://localhost:9998/echo");
                ws.onopen = function() {
                    // Web Socket 已連線上，使用 send() 方法傳送資料
                    ws.send("傳送資料");
                    alert("資料傳送中...");
                };
                ws.onmessage = function (evt) { 
                    var received_msg = evt.data;
                    alert("資料已接收...");
                };
                ws.onclose = function(){ 
                    // 關閉 websocket
                    alert("連線已關閉..."); 
                };
            } else {
                // 瀏覽器不支援 WebSocket
                alert("您的瀏覽器不支援 WebSocket!");
            }
        }
    </script>
</head>
<body>
    <div id="sse">
        <a href="javascript:WebSocketTest()">執行 WebSocket</a>
    </div>     
</body>
</html>複製程式碼