CSS3和H5的新特性

H5的新特性

1.   用於繪畫 canvas 元素。

2.   用於媒介回放的 video 和 audio 元素。

3.   本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；
  sessionStorage 的數據在瀏覽器關閉后自動刪除。

4.   語意化更好的內容元素，比如 article、footer、header、nav、section

5.   表單控件，calendar、date、time、email、url、search。

 

1)

<canvas> 標簽定義圖形，比如圖表和其他圖像。

<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。

如何通過 canvas 元素來顯示一個紅色的矩形：

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

 

2)

<video> 標簽定義視頻，比如電影片段或其他視頻流。

一段簡單的 HTML5 視頻：

<video src="movie.ogg" controls="controls">
您的瀏覽器不支持 video 標簽。
</video>

屬性

屬性	值	描述
autoplay	autoplay	如果出現該屬性，則視頻在就緒后馬上播放。
controls	controls	如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
height	pixels	設置視頻播放器的高度。
loop	loop	如果出現該屬性，則當媒介文件完成播放后再次開始播放。
preload	preload	如果出現該屬性，則視頻在頁面加載時進行加載，並預備播放。 如果使用 "autoplay"，則忽略該屬性。
src	url	要播放的視頻的 URL。
width	pixels	設置視頻播放器的寬度。

 

 

<audio> 標簽定義聲音，比如音樂或其他音頻流

一段簡單的 HTML 5 音頻：

<audio src="someaudio.wav">
您的瀏覽器不支持 audio 標簽。
</audio>

屬性

new : HTML5 中的新屬性。

屬性	值	描述
autoplay	autoplay	如果出現該屬性，則音頻在就緒后馬上播放。
controls	controls	如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
loop	loop	如果出現該屬性，則每當音頻結束時重新開始播放。
muted	muted	規定視頻輸出應該被靜音。
preload	preload	如果出現該屬性，則音頻在頁面加載時進行加載，並預備播放。 如果使用 "autoplay"，則忽略該屬性。
src	url	要播放的音頻的 URL。

 

 

HTML 本地存儲對象

HTML 本地存儲提供了兩個在客戶端存儲數據的對象：

• window.localStorage - 存儲沒有截止日期的數據
• window.sessionStorage - 針對一個 session 來存儲數據（當關閉瀏覽器標簽頁時數據會丟失）

在使用本地存儲時，請檢測 localStorage 和 sessionStorage 的瀏覽器支持：

if (typeof(Storage) !== "undefined") {
    // 針對 localStorage/sessionStorage 的代碼
} else {
    // 抱歉！不支持 Web Storage .. } 

localStorage 對象

localStorage 對象存儲的是沒有截止日期的數據。當瀏覽器被關閉時數據不會被刪除，在下一天、周或年中，都是可用的。

實例

// 存儲
localStorage.setItem("lastname", "Gates");
// 取回 document.getElementById("result").innerHTML = localStorage.getItem("lastname");

實例解釋：

• 創建 localStorage 名稱/值對，其中：name="lastname"，value="Gates"
• 取回 "lastname" 的值，並把它插到 id="result" 的元素中

上例也可這樣寫：

// 存儲
localStorage.lastname = "Gates";
// 取回 document.getElementById("result").innerHTML = localStorage.lastname; 

刪除 "lastname" localStorage 項目的語法如下：

localStorage.removeItem("lastname");

注釋：名稱/值對始終存儲為字符串。如果需要請記得把它們轉換為其他格式！

下面的例子對用戶點擊按鈕的次數進行計數。在代碼中，值字符串被轉換為數值，依次對計數進行遞增：

實例

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "您已經點擊這個按鈕 " +
localStorage.clickcount + " 次。";

 

sessionStorage 對象

sessionStorage 對象等同 localStorage 對象，不同之處在於只對一個 session 存儲數據。如果用戶關閉具體的瀏覽器標簽頁，數據也會被刪除。

下例在當前 session 中對用戶點擊按鈕進行計數：

實例

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中，您已經點擊這個按鈕 " +
sessionStorage.clickcount + " 次。";

語義元素：有利於搜索引擎優化和快速查找

 

HTML5 添加了很多語義元素如下所示：

標簽	描述
<article>	定義頁面獨立的內容區域。
<aside>	定義頁面的側邊欄內容。
<bdi>	允許您設置一段文本，使其脫離其父元素的文本方向設置。
<command>	定義命令按鈕，比如單選按鈕、復選框或按鈕
<details>	用於描述文檔或文檔某個部分的細節
<dialog>	定義對話框，比如提示框
<summary>	標簽包含 details 元素的標題
<figure>	規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figcaption>	定義 <figure> 元素的標題
<footer>	定義 section 或 document 的頁腳。
<header>	定義了文檔的頭部區域
<mark>	定義帶有記號的文本。
<meter>	定義度量衡。僅用於已知最大和最小值的度量。
<nav>	定義導航鏈接的部分。
<progress>	定義任何類型的任務的進度。
<ruby>	定義 ruby 注釋（中文注音或字符）。
<rt>	定義字符（中文注音或字符）的解釋或發音。
<rp>	在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。
<section>	定義文檔中的節（section、區段）。
<time>	定義日期或時間。
<wbr>	規定在文本中的何處適合添加換行符。

 

 

表單控件

 

新的輸入型控件

•email:  電子郵箱文本框，跟普通的沒什么區別

–當輸入不是郵箱的時候，驗證通不過

–移動端的鍵盤會有變化

•tel   :   電話號碼

•url   :   網頁的URL

•search:  搜索引擎

–chrome下輸入文字后，會多出一個關閉的X

•range:  特定范圍內的數值選擇器

–min、max、step( 步數 )

–例子 :  用JS來顯示當前數值

新的輸入型控件_2

•number:  只能包含數字的輸入框

•color:  顏色選擇器

•datetime  :  顯示完整日期

•datetime-local  :  顯示完整日期，不含時區

•time:  顯示時間，不含時區

•date:    顯示日期

•week:  顯示周

•month:  顯示月

新的表單特性和函數

•placeholder  :  輸入框提示信息

–例子 :  微博的密碼框提示

•autocomplete  :  是否保存用戶輸入值

–默認為on，關閉提示選擇off

•autofocus:  指定表單獲取輸入焦點

•list和datalist  :  為輸入框構造一個選擇列表

–list值為datalist標簽的id

•required:  此項必填，不能為空

•Pattern : 正則驗證  pattern="\d{1,5}“

•Formaction在submit里定義提交地址

上面的表單，想要自定義提示信息的話，需要借助一個對象。參考教程：
1. 微設計創意工作坊
2.LOFTER樂乎
3.csdn

新的選擇器

•querySelector

•querySelectorAll

•getElementsByClassName

獲取class列表屬性

•classList

–length :  class的長度

–add()  :  添加class方法

–remove()  :  刪除class方法

–toggle() :  切換class方法 

CSS3新特性

 

 

 

CSS3 模塊

 

CSS3被拆分為"模塊"。舊規范已拆分成小塊，還增加了新的。

一些最重要CSS3模塊如下：

• 選擇器

• CSS3新增偽類舉例
  p:first-of-type 選擇屬於其父元素的首個<p> 元素的每個<p>元素。
  p:last-of-type 選擇屬於其父元素的最后 <p>元素的每個<p>元素。
  p:only-of-type 選擇屬於其父元素唯一的<p>元素的每個<p>元素。
  p:only-child 選擇屬於其父元素的唯一子元素的每個<p>元素。
  p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個<p>元素

• 盒模型
• 背景和邊框
• 文字特效
• 2D/3D轉換
• 動畫
• 多列布局
• 用戶界面