HTML5初探

HTML5

第一章 HTML5中新的結構元素（header/hgroup/nav/footer/article/section/aside）

1.1 HTML5初始文件

頭部
1、doctype：
原始：<！DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
html5：
2、字符編碼meta部分
原始：<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
html5：<meta charset="utf-8"/>
3、js和css
html4：script 和 link元素需要使用type屬性
html5：可以不寫type
4、編碼風格：
html5：可以全部大寫、可以不用引號、可以忽略閉合斜槓、可以混合使用
建議：閉合所有標記，使用小寫字母，並使用引號將屬性括起來

1.2 這些新元素的來源：頁面的結構

20個：
footer、menu、title、small、text、content、header、nav、copyright、button、main、search、msonormal（供顯示使用）、date、smalltext、body、style1（供顯示使用）、top、white（供顯示使用）、link

1.3 主要元素介紹

1、header
可以包含在header元素中的內容：logo、網站名/標題、網站副標題、搜索欄、主導航欄
如：header中包含（標題和日期和作者）、不過HTML5建議將作者信息放在footer元素中。

---

2、hgroup
作用：用來對多個相關聯的標題進行分組

---

3、nav
只有“主要導航”才適合放置在nav元素中
屏幕閱讀器之類的輔助技術能夠搜索並立即使用這些導航組，而不需要等待它們全部加載完畢。？？？

---

4、article
獨立的內容塊

---

5、section
是一個總是需要標題的內容區域或頁面區域
用處：可以用它將多個部分的內容組合在一起，也可以根據需要，將內容的某一部分進一步劃分。不可用作通用封裝器來實現樣式上的需求。
注意：section元素中可以包含article元素，並且article元素也可以將其內容分割爲section。
article和section的選擇：
section元素的使用方式和div標記的使用方式很相似。不過與div不一樣的是，section具有語義含義，它是一組相關內容的組合。
如果你認爲這部分內容具有獨立的意義，那麼就應當使用article標記。
如果section標記僅僅是用來添加樣式，則最好使用div

---

6、aside——側邊欄
含義：表示跟周圍內容緊密關聯的一組內容，比如熱門文章列表、博文分類、最近評論。這種內容與主頁內容相關，但又與它相獨立存在。
注意：如果它放在article中，aside內容必須與article內容緊密關聯，比如詞彙表。如果放置在article或者section之外，則它的內容應該是與整個頁面相關的，如相關連接、網站所有者的微博列表或廣告。

---

7、footer
旨在：包含作者、網站所有者、版權數據、網站規章制度等信息。如果它位於article或section中，則包含文章發佈的日期、標記、分類和其他元數據
注：當然可以在footer中加入其他內容，比如導航、合作方的logo、許可協議，以及你經常會看到的“This site is powered by <cms name>文本。footer元素也可以包含指向相關文檔的連接。

1.4 使用HTML5大綱工具驗證結構（大綱測試）——chrome插件HTML5 outline

應用：如果內容安排合理，顯示的將是結構整齊、有邏輯的目錄。如果看到有“untititled section/article”這通常代表使用了錯誤的標記。

---

正確的大綱與下面類似
1、網站名
a、博客
i. 文章題目
ii. 文章題目
b、關於我
i. 我的名字
ii. 我喜歡的東西
iii. 我討厭的東西
c. 聯繫我

1.5 使用所有新標記建立新聞頁面

第二章 組合、文本級和重新定義的語義

組合元素或文本級元素：與頁面內容密切相關

2.1 figure figcaption:插入圖片和圖注

1、figure元素用於插入某張圖片並添加描述
當然，figure也用來插入一段代碼、圖表、音樂或者視頻

---

2、figcaption:爲圖片添加圖注
注：無論在哪種情況下都應爲圖片加上alt屬性以防萬一。
注：如果單純是爲了顯示某張圖片（或圖表等），那麼使用普通的img標記足以。不過，如果它包含了額外的有助於內容描述的信息，那麼就應該使用figure和figcaption。
注：figure中只能包含一個figcaption

2.2 time

兩個可選屬性：
datatime：終端用戶瀏覽的內容在time標記之間，而計算機可以識別datatime值“2011-04-01T16：00Z”。其中時間部分是可選的。
pubdata：布爾屬性，代表的是其最近的父article元素內容的發佈日期和時間。如沒找到任何父article元素，則指向整個文檔。
注：每個article元素只能擁有一個帶pubdata的time元素。

2.3 details（可伸縮控件）

在其中使用summary元素還可以創建內容的概述信息。
details有一個可選屬性：open，若其爲真，內容默認爲展開樣式；反之則爲收縮樣式。

2.4 address 元素提供通信信息：address元素定義爲“分節元素”，與nav或article類似。

錯誤：它並非顯示通用郵寄地址（通常在某個“聯繫我們”頁面中）的通用方式。

---

定義：顯示與它最近的article或body元素的通信信息。
含義：它表示你應該使用address元素來顯示當前article作者或整個頁面的通信信息。意味着，在一個頁面中可以多次使用address元素。
內容：address元素的內容可以是電子郵件地址、網址、電話號碼、郵寄地址或其他任何通信信息。
注意：由於address元素用於通信信息，所以通常會在footer中使用到address

2.5 mark:元素高亮文本

2.6 s元素顯示不準確或不相關的內容

以前，s元素特意用來顯示帶刪除線的文字。在HTML5中，s元素的一重新定義，它現在用來顯示不再正確或不相關的內容。
如果文檔內容被編輯或刪除，請不要使用S元素，而應使用del元素。

2.7 現存元素的變化

2.7.1 cite元素(斜體)

在HTML4中，cite元素允許內容開發人員顯示引用內容的作者或發言人；
HTML5中，cite用來顯示某個作品（書籍、詩歌）的標題。HTML5 規範推薦使用b元素顯示作者名

2.7.2 ol元素

附加三種屬性
1、start
2、reversed：布爾
3、type：“1”，”a”，“A”，“i”，“I”

2.7.3 dl元素：一個描述或者關聯列表（第二行變小並縮進）

2.7.4 small元素：代表小打印體，如版權信息、條款或許可/法律信息

因爲small是內嵌元素，如果有需要，你可以將它嵌入其他元素中。比如嵌入strong，它可以爲該小打印體賦予重要性。

2.7.5 b和strong元素（表現樣式無異）

b用它來爲不帶特殊重要性的內容添加樣式
strong元素用來標識重要的內容

2.7.6 i和em（表現爲斜體）

i ：示例——一個夢境、一個科技術語、一個想法或船名等
em：表示了能改變句子意思的強調。

2.7.7 abbr元素：既可以標識縮寫詞，也可以表示首字母縮略詞。（嘗試過程中沒有鼠標移上效果）

2.7.8 hr 元素

現在，在段落末尾使用它，比如在書籍中，可用其指示場景的變換。通常，此元素會顯示爲節與節之間的一條橫線或某種特殊圖案

2.8 爲多個元素添加相同的超鏈接

以前：爲需要點擊的元素，每個都加a
現在：將這些元素用a包裹
注意：雖然可以直接將article元素放在a元素中，但是目前將造成一些瀏覽器的兼容問題。因此，不建議這樣使用。

2.9 利用Microdata 添加語義信息

Microdata規範爲開發者帶來了給某些內容添加標籤的功能。
讀者可以將Microdata視爲某種自定義的元素。你可以使用它爲商業、人、產品、事件等添加標籤。

---

包含5個屬性：
itemid
itemprop：代表這個Microdata項的一個屬性，它描述了元素中的內容。
itemref
itemscope:當爲某個元素添加itemscope時，該元素便成爲了Microdata項。
itemtype
注：雖然Microdata規範正脫穎而出，而當前實際上更加流行採用Microformats

2.10 WAI-ARIA ( ARIA ):是一個旨在提高Web應用和Web頁面可訪問性的草稿規範。

ARIA允許使開發者與內容開發能夠被輔助技術識別和使用的富Internet應用和內容。

ARIA的Landmark Roles（地標角色）部分：
是頁面中用作導航地標的區域。50多種角色
role=”article”
role=”banner”
role=”complementary”
role=”contentinfo”
role=”form”
role=”heading”
role=”main”
role=”navigation”
role=”search”

---

使用方法：
<form role="search"></form>:表示該表單用於搜索。
例如：<header role="banner"> 、<nav role="navigation">、<article role="main">、<aside role="complementary"></aside>、<footer role="contentinfo">

---

終有一天輔助技術能夠輕鬆地導航到頁面的各個區域，不過目前很少屏幕閱讀器支持HTML5，更不用說ARIA於是怒了

2.11 帶有評論的文章頁面

第三章 應對瀏覽器的 HTML5 支持

3.1 IE 支持問題

3.1.1 利用 JavaScript解決HTML5兼容問題

• 用JavaScript以編程方式在DOM中創建它們，然後添加相應的樣式

<script>
document.createElement('article');
document.createElement('section');
//and so on
</script>

• 用法：該腳本中有條件判斷代碼，使自身只能在IE中運行。
  

  不過我們可以編寫條件註釋使其只能在IE8或更舊的版本中運行。腳本必須包含在head標記中，並且處於樣式表調用前。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<!--[if it IE 9]>
<script src = ".../html5.js"></script>
<![endif]-->
</head>

3.1.2 使CSS兼容

• 大多數現代瀏覽器都知道如何在默認情況下處理無樣式的元素，而IE則不行。爲了使IE兼容，我們需要將新元素設置爲display：block

3.2 模板

• 模板：包含許多安排有序的文件或文件夾，可以大大提高構建新項目的速度。
• 模板的真正意義並不在於快速上手、着手於完成項目，而是讓我們理解模板的內容，並且在其上添加額外內容或者刪除你不需要、不同意的部分。
  

  目前理解應用不深，有時間可以去研究一下庫中的html5 boilerplate模板

3.3 HTML 5 特性檢查

• 直接檢查元素或者API

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>Geolocation Check</title>
<script>
if(navigator.geolacation){
alert('Geolocation is supported.');
}else{
alert("Geolocation is not supported.");
}
</script>
</head>
<body>
</body>
</html>

利用JavaScript API來檢測對某個API的支持情況是很常用的方法。相對來說，檢查某個HTML5標記元素的方法則更加複雜。最常用的檢查HTML5標記元素的方式是建立該標記，然後嘗試從此元素中獲取默認屬性或方法。

<script>
if(document.createElement('canvas').getContext){
alert('Canvas is supported.');
}else{
alert('Canvas is not supported.');
}
</script>

3.4 使用 jquery 替代 calendar 標記

• 支持input[type='date']的瀏覽器

<form>
<label for='date'>What date do you leave?</label>
<input required type='date' id='date' name='date'/>
<input type='submit' value='submit'/>
</form>

• 考慮不支持的情況

<script>
$(function(){
    function inputSupport(){
        var input = document.createElement("input");
        input.setAttribute("type","date");
        var val = (input.type !== "text");
        delete input;
        return val;
    }
    if(!inputSupport() || ($.browser.webkit)){
        $('input[type=date]').datepicker({
        dateFormat:'yy-mm-dd'
    })
    }
})
</script>

3.5 利用Modernizr檢查特性

原文鏈接：http://caibaojian.com/modernizr-js.html

我同意原文作者的觀點：”覺得這種做法明顯增加了CSS代碼量，而且可能會造成當用戶的頁面沒有啓用js的情況下，裏面的CSS3效果無法使用，另外就是今後維護比較困難，如果改變了某個樣式，那樣子CSS的代碼類也要改變。個人不推薦使用這種方法來寫兼容代碼。”
那麼問題來了：怎麼寫兼容代碼

• 以前：通過瀏覽器嗅探技術來針對不同的瀏覽器寫不同的代碼（使用javascript裏的navigator.userAgent屬性來判斷用戶使用的是什麼品牌哪個版本的瀏覽器。）

• 現在：使用特徵檢測（feature detection）

  這意味着我們不必通過問瀏覽器“你是誰？”來做出不靠譜的推測。取而代之，我們問瀏覽器“你能做這個或那個嗎”。這麼來檢測瀏覽器的能力是很簡便的，但一個個的花時間去手工測試依然令人厭煩。此時Modernizr可以幫助我們。

• 是什麼：Modernizr是一個開源的JS庫，它使得設計師可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發，同時又不會犧牲其他不支持這些新技術的瀏覽器的控制。
  Modernizr是基於漸進增強理論來開發的，所以它支持並鼓勵開發者一層一層的創建他們的網站。一切從一個應用了Javascript的空閒地基開始，一個接一個的添加增強的應用層。
  -應用：
  1、從該網站 http://modernizr.cn/download/ 選擇你想要應用的HTML5和CSS3 特性，生成特定的文件（也可以用別人常用的，庫中）；
  2、把它加入<head>中；
  3、接下來，向<html>元素添加“no-js”的類。

  當Modernizr運行的時候，它會把這個“no-js”的類變爲“js”來使你知道它已經運行。？？？Modernizr並不僅僅只做這一件事情，它還會爲所有它檢測過的特性添加class類，如果瀏覽器不支持某個特性，它就爲該特性對應的類名加上“no-”的前綴。）
  Modernizr同時還會創建一個JS對象，被命名爲Modernizr，其內容是爲每一個檢測完的特性給出的布爾值結果組成的列表。如果瀏覽器支持新的canvas元素，那麼Modernizr.canvas的值就是true；如果瀏覽器不支持這個新元素，那它對應的值就是false。這個JS對象針對某些功能還會包含更爲詳細的信息，如Modernizr.video.h264會告訴你瀏覽器是否支持這個特殊的編解碼器。Modernizr.inputtypes.search會告訴你當前瀏覽器是否支持新的search input類型，等等。

3.6 Polyfiling

• 是什麼：爲各種瀏覽器提供統一特性支持的代碼或庫稱作polyfill或polyfiller
• 怎麼用：
  1、Modernizr提供了載入腳本的方法：Modernizr.load——給予對某個特定特性的檢測，然後根據結果動態載入一個polyfill

Modernizr.load({
test: Modernizr.canvas,
yep: 'myCanvas.js',
nope: 'myCanvasPolyfiller.js'
})

• 衆多爲不同瀏覽器組件開發polyfill：
  http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

3.7 HTML5驗證網站

• 下面的網站列表能夠告訴開發者各種瀏覽器對不同特性的支持情況。
  1、http://findmebyIP.com:提供各種信息
  2、http://caniuse.com:提供一個信息表格，並可以按需進行篩選
  3、http://html5test.com:測試一系列HTML5特性，根據支持情況爲瀏覽器打分
  4、http://html5readiness.com：可視化地顯示各種瀏覽器的狀況

第四章 CSS3 新佈局和樣式技巧

4.1 使用CSS3媒介查詢（Media Query）建立響應式設計

發展歷程：

• 通過JavaScript來檢測目標設備是否爲手機設備，然後提供不同的樣式或將用戶重定向到特定的手機站點。
• 通過JavaScript來檢測瀏覽器窗口大小是否改變，進而改變樣式來適應佈局。
• 早期的媒體查詢功能：設置目標爲屏幕還是打印機

<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="print.css" media="print"/>

• CSS媒體查詢（一）

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="smartphone.css"/>
<link rel="stylesheet" media="screen and (min-width:480px)" href="screen.css"/>

問題：該方法意味着head標記中會產生很多的HTTP請求。

• CSS文件中包含媒體查詢（注意and語法組合不同的查詢）

合理使用：

• 在桌面電腦和筆記本電腦上使用媒介查詢毫無疑問是很有用的，但是手機屏幕變換層出不窮。而且手機瀏覽器越來越強大幾乎可以解決大多問題。
• 網站檢測是否爲手持設備，重定向到手機版面（這類網站：內容豐富，含有大量的數據、圖片、視頻、廣告、flash等）
• 你是僅需要額外的樣式表還是完全獨立的手機版面，這全部取決於你提供的內容。如果只是想改變佈局並且添加某些樣式，只需使用CSS3媒介查詢。

手機

強制命令瀏覽器將可是寬度作爲設備寬度

<meta name="viewport" content="width=device-width; initial-scale=1.0;"">

補充

語法
媒體查詢包含媒體類型和媒體屬性
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
在不使用 not 或 only 操作符的情況下，媒體類型是可選的，默認爲 all 。
- 邏輯操作符
（1）and 操作符用來把多個 媒體屬性 組合起來，合併到同一條媒體查詢中。只有當每個屬性都爲真時，這條查詢的結果才爲真。
（2）not 操作符用來對一條媒體查詢的結果進行取反。
（3）only 操作符表示僅在媒體查詢匹配成功的情況下應用指定樣式。可以通過它讓選中的樣式在老式瀏覽器中不被應用。（在逗號媒體查詢列表中 not 僅會否定它應用到的媒體查詢上而不影響其它的媒體查詢。 not 關鍵字僅能應用於整個查詢，而不能單獨應用於一個獨立的查詢。）
（4）若使用了 not 或 only 操作符，必須明確指定一個媒體類型。
（5）你也可以將多個媒體查詢以逗號分隔放在一起；只要其中任何一個爲真，整個媒體語句就返回真。相當於 or 操作符。
- 媒體屬性：

4.2 使用@font-face 進行自定義字體

• 最簡單的形式（已經實踐.ttf 在chrome 、IE9+、safari有效）

<style>
font-face{
font-family:Anagram;
src:url('anagram.ttf');
}
h1{
font-family:Anagram, Tahoma, Verdana, sans-serif;
font-size: 9em;
}
</style>

• 文件格式和跨瀏覽器問題
  不同格式字體的瀏覽器支持：http://blog.163.com/zx_1258/blog/static/133233799201301424414229/
  由於不同瀏覽器或者設備對不同格式的字體支持不同，所以我們需要爲相同的字體提供多種不同格式。
  解決：執行轉換字體或者使用諸如Font Squirrel的工具完成（網站打不開了）。

font-face{
font-family:'AnagramRegular';
src:url('type/Anagram-webfont.eot');
src:url('type/Anagram-webfont.eot?iefix') format('embedded-opentype'),
    url('type/Anagram-webfont.woff') format('woff'),
    url('type/Anagram-webfont.ttf') format('truetype'),
    url('type/Anagram-webfont.svg#webfontCiw7vqzS') format('svg');
}

• 字體服務
  免費字體：Font Squirrel/Google Font Directory（可以下載各種字體）

4.3 使用CSS漸變和複合背景創建按鈕

http://www.w3cplus.com/content/css3-gradient

漸變可以應用於任何使用背景圖片的地方。這意味着在CSS樣式中，漸變相當於背景圖片，在理論上可在任何使用url() 值的地方採用，比如最常見的background-image、list-style-type以及前面介紹的CSS3的圖像邊框屬性border-image。但直到目前爲止，僅在背景圖片中得到最完美的支持。

• 簡單CSS線性漸變

div{
height:200px;
width:200px;
background:url(gradient.gif);
background:-moz-linear-gradient(top,white, black);//firefox
background:-webkit-linear-gradient(top,white, black);
background:-linear-gradient(top,white,black);//一般
background:-o-linear-gradient(top,white,black);//opera
background:-ms-linear-gradient(top,white,black);//IE10+
}

在background屬性中複合的背景樣式需要使用逗號分割

• IE下的漸變

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

• 用途：
  最簡單的就是製作背景，我們還可以應用其製作一些漂亮的按鈕，還可以用他來製作patterns，我在這裏列出幾種製作patterns的示例代碼吧：
• 示例，tab
  http://people.opera.com/pepelsbey/experiments/apple-menu/

4.4 使用變換和過渡以美化網站

4.5 利用CSS創建動畫

（有關於CSS3製作動畫的幾個屬性：變形(transform)、轉換(transition)和動畫(animation)）

http://www.w3cplus.com/content/css3-transform
- 變形：用matrix表示的偏移、旋轉
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

1、偏移
transform: matrix(1, 0, 0, 1, 30, 30);
就等同於transform: translate(30px, 30px);
2、縮放
matrix(s, 0, 0, s, 0, 0);
3、旋轉(按照角度，順時針旋轉)
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
CS-SC：初三-上牀
4、拉伸
matrix(1,tan(θy),tan(θx),1,0,0)
5、鏡像對稱效果
matrix((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0)

注意的是使用多個屬性值時，其之間不能用逗號（“，”）分隔，必須使用空格分隔

---

過渡和動畫的區別
前者過渡效果是在兩個狀態之間發生的變化（如鼠標懸停或鼠標點擊），而後者是基於時間軸進行的動畫。

• 轉換（過渡）：
  定義：css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。

語法:

  transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> ||<'transition-delay'>]

執行變換的屬性：transition-property,
http://www.css88.com/book/css/properties/transition/transition-property.htm
變換延續的時間：transition-duration,
在延續時間段，變換的速率變化transition-timing-function,
變換延遲時間transition-delay。
- 動畫：動畫與過渡不同的是，它並不需要鼠標懸停或者鼠標點擊等事件觸發。

“Keyframes”——關鍵幀
前面我們在使用transition製作一個簡單的transition效果時，我們包括了初始屬性和最終屬性，一個開始執行動作時間和一個延續動作時間以及動作的變換速率，其實這些值都是一箇中間值，如果我們要控制的更細一些，比如說我要第一個時間段執行什麼動作，第二個時間段執行什麼動作（換到flash中說，就是第一幀我要執行什麼動作，第二幀我要執行什麼動作），這樣我們用Transition就很難實現了，此時我們也需要這樣的一個“關鍵幀”來控制。

---

CSS3的animation類似於transition屬性，他們都是隨着時間改變元素的屬性值。他們主要區別是transition需要觸發一個事件(hover事件或click事件等)纔會隨時間改變其css屬性；而animation在不需要觸發任何事件的情況下也可以顯式的隨着時間變化來改變元素css的屬性值，從而達到一種動畫的效果。

第五章 HTML5 Web 表單

5.1 驗證

HTML5 提供的內置表單驗證（form validation）：如required

5.2 HTML 4 輸入類型

可以用無序列表（ul）和列表元素（li）來佈局該表單

5.3 建立聯繫人表單：

input的type
email：告知瀏覽器，該輸入域的內容格式應爲郵箱地址格式。（不同瀏覽器驗證的格式不一致）
tel：可以接受字符和數字（匹配模式讓其僅僅可以輸入數字）
url：當前瀏覽器中任何包含冒號（：）的url都可以驗證通過。

5.4 input type=”search”

• 沒有任何特殊功能，僅僅用於幫助瀏覽器理解它是搜索輸入域。

• webkit瀏覽器還額外提供了results屬性：輸入域左邊有放大鏡圖標，如果存在先前搜索的字段，點擊該圖標會顯示歷史搜索條目（測試沒發現啊）

• Safari自定義了搜索輸入的樣式，可以使用-webkit-appearance:none；來重置

5.5 建立日曆和時間控件

目前支持度不高，還是用jquery的插件吧
- input type=”datetime”
- input type=”datetime-local”
- inpup type=”date”
- input type=”time”
- input type=”month”
- input type=”week”
兩個新屬性min和max可以控制和限制控件的日期或時間的選擇

5.6 創建數字選擇器

input type=”number”
step屬性可以更精確的控制數字。

5.7 創建滑塊（無需javascript）——如何控制音量？？？

range（IE、火狐、安卓不支持）
我們可以爲range控件設置高度和寬度，若高度大於寬度，控件將會豎着放置。否則，默認水平放置

5.8 創建顏色選擇器

支持度很差，需要插件
input type=”color”

5.9 使用output元素顯示結果

<output onforminput="value=range.value"></output>
IE和安卓不支持

5.10 使用佔位文字（placeholder）

默認的灰色佔位文字與默認背景顏色並沒有足夠的對比度，因此可能會帶來可訪問性方面的問題。webkit和mozilla爲我們提供瞭如下css來覆蓋文本顏色
input::-webkit-input-placeholder:{color:red;};
input:-moz-placeholder{color:red;}


5.11 使用list和datalist完成自動補全功能

firefox和opera支持
我們可以從數據庫或ajax請求來生成datalist

<input list = "sportlist" type="text" id="sport" name="sport">
<datalist id="sportlist">
<option label="Baseball" value= "Baseball"/>
<option label="Football" value= "Football"/>
<option label="" value= "Baseball"/>
<option label="Baseball" value= "Baseball"/>
</datalist>

5.12 使用progress元素跟蹤任務完成程度

兩個可選屬性：
value:表示任務完成程度百分比
max：某項任務需要達到的完成度。

5.13 使用meter元素進行計量

六個可選屬性：
min:允許的最小值
max:允許的最大值
value:實際的當前值
low:低值範圍
high:高值範圍
optimum:最優值，必須位於min和max之間

5.14 頁面載入時跳轉到某個form元素

autofocus：建議在如通訊錄頁面或搜索網站類似的form元素爲主的頁面上使用它

5.15 允許多個條目

multiple屬性允許用戶在某個特定域輸入多個值：如上傳多個文件、發送附件等

5.16 利用required屬性進行基本驗證

• 可以使用aira-required=“true”，這將提高表單元素的可用性
  關於無障礙閱讀wai-aria
  http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/

5.17 編寫自定義驗證規則

pattern屬性 + 正則表達式

<input required pattern="(http|https)://([\w-]+\.)+[/[\w- ./?%&=]*)?" type="text" id="url" name="url"/>

5.18 限制用戶輸入

• step:可用在number、range、time輸入類型上。
• min，max：meter、number、range、date、time
• formnovalidate，novalidate：使用這兩個屬性關閉瀏覽器驗證。這兩個屬性在希望保存表單當前狀態而不是提交表單時非常有用。例如，在網站包含一個很大的表單或者是用戶在提交前還需填寫其他表單而因此無需關心當前的數據驗證時，可以使用這類屬性。
  （爲表單元素設置novalidate，爲單個表單元素設置formnovalidate）爲什麼？？？
  <form novalidate>

5.19 自定義表單樣式（未實踐）

input:invalid:required{
}
input:focus:invalid{
}
input:valid{
}

5.20 錯誤消息

雖然我們無法修改樣式，但我們可以使用javascript中的setCustomValidity（）函數修改錯誤消息文字：

function check(){
var emailInput = document.getElementById('email');
emailInput.setCustomValidity("This is not valid. Please fix it.");
}

綜合應用以創建註冊表單（實踐）

第六章 Canvas 繪圖

canvas提供的是基於像素的繪製方式，而非矢量、層系統，所以它能夠帶來的功能是十分基礎。

6.1 Canvas 介紹

canvas的實現包含了兩個基礎的部分：canvas元素和操作canvas的javascript功能。

注意：在IE8和之前的版本中，你需要一些第三方庫，如explorercanvas（http://code.google.com/p/explorercanvas）。如果只需要在IE8中使用，你可以添加如下的條件語句：

<!--[if lte IE8]><script src="excanvas.js"><![endif]-->

6.1.1 初始工作

• 至少需要id、width、height
• </canvas>提供了回滾容器，通過回滾容器，當瀏覽器無法支持canvas時回滾信息將會顯示。
• javascript中進行繪製：通過id獲取繪製環境——使用該元素的getContext（）方法獲取其二維繪製環境的引用。

var canvas = document.getElementById('mycanvas').getContext('2d');

• 通過getContent方法確認瀏覽器是否支持canvas繪圖。

6.1.2 X和Y座標

6.2 在canvas上繪製網格

• 創建HTML頁面；
• 爲canvas對應的id添加樣式
• 使用window.addEventlistener爲頁面載入完成時添加回調函數showGrid，聲明canvas和context（繪製環境）變量
• 實現showGrid函數，在canvas上繪製線段、點和文字

默認情況下，文字是左上對齊的（fillText）
因爲canvas是基於對像素操作的，所以在該二維世界中的繪製順序將會影響最終顯示出來的效果。例如，如果你在一個純色背景上繪製標記之前先繪製了標記文字，那麼文字會被後面繪製的標記所掩蓋。那麼，這種情況下就應該先繪製標記，然後在上面繪製文字。

Canvas工具

• Rectangle:在指定位置繪製指定長寬的長方形；
• Line：創建從點A到點B的一條線段。
• Path：使用一條或多條線段甚至曲線創建的一條路徑；
• Arc：建立制定角度的弧形，包括建立圓形；
• Curve：建立兩種類型的曲線：貝塞爾曲線、二次曲線

6.3 繪製簡單的圖形和線段

6.3.1 長方形或正方形並設置樣式

1、canvas.fillRect(0,0,100,100)：在（0，0）處繪製一個邊長爲100的正方形
2、clearRect（pos-x,pos-y,width,height）:清空指定的正方形區域像素。
3、strokeRect（pos-x,pos-y,width,height）：可以與lineWidth結合起來繪製長方形邊線。

一些效果
- Fill:控制填充參數；
- Stroke：控制繪製圖形邊線時使用的畫筆；
- Gradient：允許用戶使用線性或放射狀漸變填充；
- Transparency：定義canvas上所有圖形的透明度或指定圖形填充時的透明度。
- Shadow：提供可應用於單個圖形的簡便陰影效果；
- Composition：遮罩或裁剪canvas的某個區域，並可以控制canvas上建立圖形的整體順序；

作用於圖形上的一些常用效果方法
- strokeSyle：設置圖形邊線的顏色或樣式；
- fillStyle：設置圖形內部填充的顏色或樣式；
- shadowOffsetX/shadowOffetY:設置陰影偏移距離；
- shadowBlur：設置陰影的模糊度；
- shadowColor：設置陰影顏色；
- createLinearGradient:創建圖形線性填充；
- createRadialGradient：創建圖形放射狀填充。

因爲fillRect方法的作用是告訴canvas繪製環境渲染出圖形，所以在這之前我們就必須設置好樣式。實際上，圖形在canvas上是以一個個單獨像素點顯示的，所以我們沒辦法在會之後修改該圖形。不過，你可以通過重新繪製達到修改的目的。

6.3.2 爲圖形添加漸變填充

createLinearGradient（startX,startY,endX,endY）：線性漸變
createRadialGradient（startX,startY,startRadius,endX,endY,endRadius）：放射狀漸變
addColorStop：

6.3.3 繪製線段或路徑

• moveTo（x,y）
• lineTo（x,y）
• stroke（）

---

• beginPath（）
• closePath（）

---

• lineCap：butt、round、square
• lineJoin：bevel、miter、round
  解決線段銜接

6.4 使用路徑繪製多邊形

• 基本的繪圖結構
• 爲頁面添加變數和半徑的輸入域，以及觸發繪製用的按鈕；
• 添加init函數、全局變量和load回調函數，設置對canvas和繪製環境的全局引用；
• 添加drawPolygon函數，完成實際繪製正多邊形的代碼。

6.5 繪製弧形和圓形

arc（x,y,radius,startAngle,endAngle,antiClockwise（Boolean））；
繪製曲線
quadraticCurveTo（cx,cy，endX,endY）:只有一個控制點
bezierCurveTo（c1X,c1Y,c2X,c2Y,endX,endY）：有兩個控制點

6.6 添加文字

• fillText（text,x,y）：將文字渲染爲填充後的文字圖形
• strokeText（text,x,y）：只會渲染文字的邊框

6.7 繪製圖片

drawImage（image,dx,dy）
drawImage（image,dx,dy,dw,dh）
drawImage（image,sx,sy,sw,sh,dx,dy,dw,dh）前四個是針對原圖的裁剪、後者爲裁剪的圖片的位置

6.8 裁剪圖片

drawImage（image,sx,sy,sw,sh,dx,dy,dw,dh）前四個是針對原圖的裁剪、後者爲裁剪的圖片的位置
用圖片進行填充
createPattern方法爲某個圖形的背景使用圖片進行填充。
- 首先，設置好圖片，並使用此圖片創建pattern變量。
- 然後，使用座標和大小值繪製圖形；
- 接着，使用pattern變量對圖形進行填充；

6.9 子圖動畫——使用簡單的三幀圖片製作回收標籤的動畫

• 創建頁面，以及相應的canvas的style、body標記和控制動畫開始、停止的按鈕
• 添加全局變量定義、init函數和window.addEventHandler事件處理函數
• 添加用於繪製裁剪後圖片的animateSprite函數
• 添加關聯到開始、停止動畫按鈕的startAnimation和stopAnimation函數
  

  canvas可以模擬層的功能。定義多個相互層疊的canvas元素，元素的z-index樣式屬性用來控制頁面上層的位置關係。我們可以利用這種方法來製作遊戲。（遊戲上包含一個背景canvas，然後在背景上放置一個小的人物動畫canvas。）如果想實現這種多canvas頁面，務必注意爲每個canvas而保存多個引用所帶來的性能問題。？？？

---

**Canvas 變換**（繪製、特效、變換） - rotate（angle） - scale（x，y） - transform - 另外：translate（x，y） - 旋轉是以座標原點爲軸心進行的。有兩種方法可以使座標原點恢復到原來的位置： （1）第一種是再次直接使用translate方法，反向移動座標原點； （2）另一種也是更好的一種方法，是使用save和restore方法 **常用擴展庫** netron 、 canvas toolkit 、 EaseIJS 、jCanvasScript 、gury

6.10 爲圖片添加動畫——齒輪（有一點模糊）

6.11 柱形圖表動畫

• 創建頁面和canvas所屬的style、body、canvas的id爲graph；
• 添加charData JSON對象、initGraph函數和window.addEventListener事件處理函數和相關全局變量；
• 添加initSettings函數，設置圖表的柱條數、標題等所有屬性。
• 添加drawAxis函數繪製x、y軸，軸標記和標題。
• 添加growBars函數，以完成柱條的動畫效果；
• 添加drawBar函數，以完成在canvas上的實際繪製工作

第七章 HTML5 嵌入視頻

在很久很久以前，我們嵌入視頻，使用的是flash插件或者使用object元素播放quicktime文件

7.1 使用video元素插入視頻

<video src="mymovie.mp4"></video>
<video src="mymovie.mp4"/>

7.1.1 瀏覽器和設備支持

IE9+

7.1.2 HTML5和視頻編碼（這幾部分可能存在過時的問題）

對於HTML5，只有三種主要編碼和視頻格式供選擇（H.264、Ogg Theora 、WebM）
- H.264 ：Android、chrome、iE9+、ios、safari
- Ogg Theora：chrome、firefox 、opera
- WebM：Chrome、firefox、IE9插件、opera

7.1.3 爲何我們需要了解編碼（關注移動視頻）

• H.264（MPEG-4）：存在授權方面的問題
• WebM：目測前景較好
  https://tools.google.com/dlpage/webmmf/（webm for IE）

視頻轉換格式的軟件：firefogg、MicroVideoConverter

7.2 在所有瀏覽器中使用視頻

1、使用多個source元素：解決瀏覽器和編碼問題。（ipad瀏覽器存在bug，只會載入第一個視頻文件，所以將.mp4置於第一位）
    不足：無法解決不支持video的IE6、IE7、IE8
2、爲過時瀏覽器添加回滾內容：
（1）添加文字：<p>一些文字</p>
（2）提供視頻直接下載（好主意）：

<a href="video.mp4">Download our movie in MP4 format</a>
<a href="video.webm">Download our movie in MP4 format</a>
<a href="video.ogv">Download our movie in MP4 format</a>

（3）將flash內容作爲回滾內容：一是將視頻上傳到視頻託管網站上（如，youtube——通常提供內嵌代碼），二是自行託管文件並使用自己的flash播放器（如JW Player）（<script type="text/javascript" src="swfobject.js"></script>）。

???HTML5視頻開發中的MIME類型問題