《HTML5祕籍》學習總結--2016年7月24日

前段時間由於工做中看到同事使用了一個type爲date的<input>元素，直接就造成了一個日期選擇的表單控件，當時以爲很神奇，覺得是什麼插件，就問了同事是怎麼作出來的，同事告訴我這是HTML5的新控件類型。因而這件事讓我決定先好好學習下HTML5新標準相對於HTML4時代有什麼不一樣，其實剛開始學習前端的時候，在知乎社區就瞭解到了，這是前端界將來頗有發展潛力的新標準，正是HTML5讓WEBAPP變得更有實現的機會以及讓flash慢慢走衰……因爲自身水平的不足，我選擇的是看一本關於H5的書，由於書會介紹更多的前因後果和發展歷史，對於我這種新人來講更具備啓發性。我看的是Matthew MacDonald的《HTML5祕籍》。

---

這張圖是我目前學習和了解到的H5的一部分基礎知識點，裏面沒有學習到太多H5的兩個很重要的部分，一個是離線應用，一個是canvas繪圖，canvas繪圖上是淺嘗輒止，稍作了一些瞭解。這兩個部分沒有花時間，第一由於本身耐心不足，第二是由於工做中一段時間內可能都還用不到，沒有實際的需求，怕這兩個對我目前來講算複雜的部分學了之後擱置久了也會忘了，因此打算之後有需求的時候或者有必定積累之後再深刻學習。

接下來我就按照這張思惟導圖說說看完這本書之後記錄和總結。

書寫規範

1. 包含html,head,body標籤；
2. 標籤名所有爲小寫；
3. 爲屬性值加上引號；
4. 空元素的標籤不要閉合。

支持特性檢測和膩子腳本

H5新增了許多新特性，可是瀏覽器並非所有支持這些新特性，而且不一樣的瀏覽器以及不一樣的版本支持特性的程度都不相同，因此使用H5新特性前，須要作支持特性檢測，推薦使用Modernizr插件，這樣能夠在考慮到兼容性的狀況下使用H5的新特性。此外，還有各類各樣的膩子腳本(polyfill)，這些膩子腳本能夠提供考慮了兼容性的某個（某些）新特性的解決方案。

容器語義元素

<nav>是導航條的語義元素，通常將網站的導航條放在這個容器內。

<header>表示網頁的頭部，好比logo，導航，用戶信息之類的均可以放在裏面。

<footer>表示網頁的尾部，通常放一些版權申明和聯繫方式。

<figure>和<figcaption>元素是用於插圖的新語義標籤，<figcaption>和<img>放在<figure>內部，<figcaption>表示圖標題。

<detail>和<summary>：效果有點像摺疊面板，<detail>做爲摺疊內容的容器，<summary>做爲摺疊後的標題，放在<detail>元素的內部，<detail>內部還要放摺疊後展開可見的內容，具體效果如圖：

相似於上面的那些容器級語義元素，就不在此一一贅述了。

文本級語義元素

在這本書中，瞭解到的H5中的文本級語義元素只有<time>, <output>, <mark>這三個，其中<time>用來做爲時間的存放元素，<output>做爲輸出結果的存放元素，<mark>做爲標記（即高亮）文本的存放元素--有些瀏覽器可能會對<mark>元素內的文字應用特殊的樣式，可是有些瀏覽器是沒有的，因此須要的話，最好本身設定<mark>元素的樣式。

表單級語義元素

---<input>

<input>元素算是我在學習過程當中最頻繁遇到的表單控件元素之一了，在H5中，input元素有了一些新特性：

屬性上：

title：屬性加在表單控件上，用於給提示信息。

autofocus：屬性只能加在一個表單控件上，用於表單控件的自動得到焦點。

pattern：屬性加在表單控件上，用於正則驗證。

novalidate：還有一個關閉表單驗證功能的辦法，這個屬性直接加在<form>上，用於控制關閉表單驗證功能。

type：屬性是我看來的重點，這本書裏面介紹了許多個我以前沒有用過屬性，而且就像文章開頭說的，正是<input>的"date"這個type，才引發了我對H5的關注和學習的想法。在書中提到的type的值有：email, url, search, tel, number, range, date, time。相信根據字面意思大部分屬性值就很好理解了，其中range屬性會讓<input>變成一個滑動條，能夠手動滑動，當設置這種type屬性時，還須要給<input>設置min, max, step, value這些值才能正常工做。

---新表單控件

<datalist>, <option>：這兩個新元素用來顯示輸入建議，須要將目標<input>元素的list屬性值設置爲對應的<datalist>的id。兼容方面的解決辦法：H5祕籍 P110

<datalist id="choices">
  <span class="label">Pick up an option:</span>
  <select id="favoriteChoice">
    <option label="alpha" value="alpha">
    <option label="beta" value="beta">
    <option label="gama" value="gama">
  </select>
  <br>
  <span class="label">Or type it in:</span>
</datalist>
<input list="choices name="list">  //能夠識別datalist的就只會讀取裏面的option內容

<fieldset>,<legend>：這兩個元素用來展現表單的範圍和給表單標題。後者放在前者中。

<progress>：這個元素用於表現進度，擁有一個max屬性和一個value屬性。默認max爲1。

<meter>：這個元素和<progress>相似，不過偏向於表示數值，有min, max, low, high, value這五個屬性。

---表單事件

• onblur
• onchange
• oncontextMenu
• onfocus
• onformchange
• onforminput
• oninput
• oninvalid
• onselect
• onsubmit

其中值得一提的是oncontextMenu事件，它在上下文菜單被觸發時產生。其它事件都很好從字面上理解。

---表單CSS僞類

• :required
• :valid
• :inrange

其中:inrange僞類須要控件有min和max屬性才能夠進行判斷。

音頻和視頻元素

---audio

control屬性：告訴瀏覽器要包含播放控件。

preload屬性：控制音頻的預加載。

autoplay屬性：控制音頻的自動播放。

loop屬性：控制音頻的循環播放。

---video

audio的所有屬性：control, preload, autoplay, loop.

width：控制視頻播放控件的寬度。

height：控制視頻播放控件的高度。

poster：用於替換視頻的圖片，在如下三種狀況會使用到：1.視頻第一幀未加載完畢；2.把preload屬性設爲none；3.沒有找到指定的視頻文件。

---source

source主要用於配合audio、video使用能夠解決瀏覽器只支持有限的媒體格式的問題，使用的時候用source一個個地添加媒體文件。

src：媒體源文件。

type：提供源文件的MIME信息。

---JS控制音視頻方法

[audio]

屬性：currentTime提供當前音頻播放到的時間。

方法：play()控制開始/繼續播放。pause()控制播放暫停。

[video]

屬性：currentTime提供當前視頻播放到的時間。playbackRate控制播放速率，默認爲1正常播放，負值時爲倒着播放。duration提供當前播放視頻的總時長。

方法：play()控制開始/繼續播放。pause()控制播放暫停。

---好用的音視頻插件

VideoJS和jPlayer.

Canvas繪圖

---context

canvas元素對應着一個對象，這個元素有.getContext()方法，這個方法能夠生成一個能夠畫圖的Context對象，具體流程：

var canvasElement=document.getElementById("id");
var context=canvasElment.getContext("2d");  //目前還只有二維上下文，沒有三維上下文

具體的使用方法暫時尚未學習，須要的時候再進行深刻學習。

---canvas高級繪圖

context.drawImage()：在畫布上的特定位置畫指定的圖片。

複雜圖繪製的要點：記錄繪製的全部內容和過程，才能在未來靈活地修改它們。

CSS3

---WEB字體格式

• @font-face方式註冊字體

  @font-face{
    font-family: 'selfDefineName';
    src: url('url-address');
    src: local('local-font'),
    url: ('xxxx') format('yyy');
  }

• 使用<link>添加谷歌在線字體

---多欄文本

多欄文本能夠在一個塊內把文本分紅多個豎欄顯示。經過把屬性加在須要分欄的塊級元素上來實現。主要有這些屬性：

• column-count
• column-width -- 用於規定每欄的寬度
• column-gap
• column-rule -- 規定列之間的寬度、樣式和顏色規則

---媒體查詢

媒體查詢是H5中的一個我認爲的重點，主要用於響應式佈局和瀏覽器兼容性的調整。能夠針對不一樣的設備和瀏覽器採用不一樣的樣式。
@media(){}：這是一種直接寫在樣式表中的方法，經過括號內的控制量來肯定對應的樣式，括號內的控制量有max-width、max-device-width、orientation，還有設備類型(print等)；
媒體查詢控制樣式表的引入：在link中添加media屬性，屬性值爲控制內容；
CSS hack和其它針對特定瀏覽器的方法：

• IE9如下的版本，能夠這樣引入針對IE9如下版本的樣式表：
• IE10 IE11IE10/11不支持條件性註釋的3個解決方法
• 火狐和chromeIE Chrome Firefox CSS Hack

---透明度

• rgba(r,g,b,a)方法賦值顏色
• 使用opacity屬性（推薦）

---背景盒子

背景圖片：background-image，background-position，background-repeat。這些值能夠同時傳遞多個參數，每一個值都傳遞多個參數就能夠同時控制傳入的多個背景圖。

陰影盒子：box-shadow

---過渡效果

利用transition這個CSS屬性，使用方法：[-prefix-]transition: propertyName1 usetime1[,propertyName2 usetime2];

---變換效果

transform有這些方法：scale()，scaleX()，skew()，rotate()，使用方法：[-prefix-]transform: method1(para) method2(para);

數據存儲

---存儲方式

localStorage：本地存儲，不清除的話能夠一直保留。

sessionStorage：會話存儲，關閉頁面的話會清除。

---本地存儲的操做

• .removeItem("key")
• .clear()
• .key(i)

---JSON數據的存儲方式

因爲本地存儲只能存放字符串類型的數據，因此對於JSON數據，要先進行字符串化：

1. JSON.stringify()
   2.JSON.parse()
   這樣就能夠完成JSON數據的存取。

---響應存儲變化事件

onStorage，這個事件添加事件響應函數的時候，能夠用以下的事件對象的屬性來取得一些數據。event.key, event.oldValue, event.newValue, event.URL。

---File API

取得文件共有兩種方式：1.type爲file的input；2.隱藏input，須要時用JS調用input的click事件，觸發input的onchange事件。

• 文件屬性：文件屬性有三個信息，文件名、字節大小、MIME類型。
• 文件對象FileReader：

事件：

FileReader.onload, FileReader.onProgress, FileReader.onError, FileReader.onLoadEnd.

方法：

FileReader.readAsText(), FileReader.readAsBaniryString(), FileReader.readAsDataURL(), readAsArrayBuffer(), FileReader.abort()。使用這些方法時，文件存在e.target.result中。

WEB服務器與通訊

• 服務器發送事件：讓WEB服務器與瀏覽器頁面保持鏈接。
• WEB Socket：讓瀏覽器和服務器快速即時地發送數據，有如下幾個事件onopen, onmessage, onerror, onclose。

任務放在後臺處理

使用new Worker("JS文件")創造一個worker對象。

• 事件：worker.onmessage這個事件在客戶端和服務端都存在。
• 方法:worker.postMessage()這個方法在客戶端和服務端都存在。