HTML 5 完美風暴
出版商: 藍海文化
出版日期： 2012-05-28
台幣定價: $1,000
語言: 繁體中文
ISBN: 9866432602
EAN: 9789866432606
2-6
一份網頁文件的head元素中，只能有一個title標題，由document.title所定義，你不能在一份網頁文件中配置一個以上的title。
2-9
target屬性則必須是_blank、_self、_parent或是_top這幾個常數字串，指定連結網頁開啟的相對位置。一份網頁文件只能存在一個base元素，而href與target這兩個屬性必須至少擇一設定，或是同時設定。
base元素會影響網頁文件的URL設定，因此必須在所有與URL相關設定的元素之前配置，唯一的例外是根元素html的mainfest屬性，不會受base影響。。
Bear: base可看成唯一型的 <a> ？
2-11
link元素屬性中，href這個值必須要指定。
2-14
針對透過src屬性導入網頁的外部資源，如果設定了async屬性，表示以非同步的方式執行外部資源，外部資源的執行程序將與目前網頁分開處理，而defer則表示延遲執行，在網頁全部載入解析完成之後才會執行。
2-17
charset屬性提供外部script檔案的字元編碼設定，用來指定外部腳本檔案所使用的字元編碼格式，這個屬性必須搭配src才能進行設定，如果直接於script元素中撰寫程式碼而非透過src連結外部檔案，則不需要指定這個屬性。
2-22
最後是refresh，如果http-equiv屬性設定為此關鍵字，表示網頁本身會自動更新。
其中指定編碼格式為UTF-8，這也是預設的編碼格式，使用非UTF-8格式的編碼可能將導致表單傳送時資料格式的問題。
2-24
要特別注意的是在HTML5，你不可以將true/false直接指定給屬性，相反的，若屬性是false，直接忽略屬性即可；如果是true，則直接指定屬性名稱即可。
2-26
除非完全沒有設定屬性，否則一律是true。
2-28
在這些表格元素中，<tbody>可以直接被忽略。
2-29
當你直接省略標籤時，瀏覽器還是會自動幫我們完成標準的配置。
2-30
Bear: 加上空白是有特殊的用意嗎？看來好像是沒有
3-6
IE和FireFox顯示都不正確
3-19
所有HTML元素，都會有一個class屬性，表示這個元素所屬的CSS類別，透過DOM物件支援的getElementByClassName()，可以取得指定class名稱的元素。
3-28
自訂資料屬性必須以data-為字首，然後緊接著連接符號-後方，加上自訂的屬性名稱，例如data-title，用來表示一個儲存title資料的自訂資料屬性，而title則被作為存取屬性對應名稱，一個元素可以接受數個不同的自訂屬性。
3-28
接下來進一步引用dataset回傳物件，指定自訂的屬性名稱，例如上述提及的title，即可取得屬性值。
3-28
data-english-title
這是合法的資料屬性名稱，透過JavaScript存取時，必須忽略第二個連接符號字元，然後將其轉換成為駝峰格式字型englishTitle。
4-4
如果你在input元素裡面設定了dirname這個屬性，它會在回傳伺服器時同時一併將dir屬性值回傳伺服器。
4-5
如果你在其中設定了dir這個屬性，則傳送出去時的dirname屬性值會是設定的dir屬性。
4-6
size表示視覺可見的長度，而 maxlength 則表示可以輸入的長度。
4-8
pattern屬性接受一個規則運算式(regular expression)的格式規範。
4-21
接下來這個畫面中的input元素設定了multiple，因此必須以逗號分隔輸入電子郵件帳號，如果不符合完整格式則會導致驗證失敗。
4-23
在日期與時間中間插入了一個大寫字元T，這個字元用來分隔日期與時間資料，而時間的最後除了秒的小數點之外，還連接了一個Z，它用來表示世界標準時間，也就是UTC。
Bear:時間格式方面，參考HTML5: up and Running(P.50)比較清楚。
5-7
而當你想要精確取得使用者輸入資料，設定oninput屬性是最好的選擇。
5-8
Firefox 與 Chrome 對滾輪事件的支援有些許差異，前者必須設定的事件名稱是 DOMMouseScroll，而Chrome則是mousewheel。
5-15
拖曳與置放→Drag And Drop(DND)
最簡單的功能並不需要完成全部事件的實作，有三個主要的事件必須處理，分別是dragstart、 dragover 與 drop。
6-17
section元素的用途
1.針對需要大綱編排輸出的層級設定。
2.網頁中的分組區塊定義。
3.長篇網頁文章中的分章定義。
4.以上定義的區塊中必須配置對應大綱的標題時。
6-18
Bear:這兩個的分法還是有看沒有懂
6-20
article元素的用途
1.新聞報導內文區塊。
2.部落格貼文區塊。
3.回應討論意見貼文區塊。
4.網頁側欄小工具區塊。
5.類似以上可以單獨切割出來的獨立區塊，同時必須配置一個對應的標題。
6-23
Bear:這樣做有何重要的意義嗎？在何種情況下使用最適合？
6-23
nav元素的用途
1.網站導覽區塊。
2.網頁內容瀏覽節點。
6-26
aside元素的用途
1.與網頁內容沒有深度關聯的區塊。
2.網站側欄區塊。
3.網頁內文意見區塊
4.網頁註腳。
5.頁尾詞彙區塊。
6.引言區塊。
7.忠告或提示區塊。
6-28
Bear: 為了凸顯圖檔才使用figure，否則用img就夠了。
6-33
figure元素的用途
1.具獨立內容的圖像呈現。
2.具獨立意義的圖表輸出，例如數位儀表板。
3.程式碼列舉。
6-34
讀者必須特別注意這項特性，由於每一個區塊只能允許一個h元素的定義作為其標題，除了第一個h元素，瀏覽器會針對第二個h類型元素開始，逐一建立其專屬的隱含區塊，這些區塊因此成為第一個h標題所屬區塊的子區塊。
6-35
為每個區塊建立其專屬的h元素標題，避免讓瀏覽器隱含建立，是建立良好網頁結構相當重要的原則。
6-38
為了避免上述的情形，比較好的作法，是在每一個區塊一開始的標題，均以第一級的h1作設定。
6-41
大綱的輸出是HTML5導入的四個區塊元素最關鍵的特質，包含 section、article、aside以及nav，當你在網頁配置這四個標籤，每一個標籤都會有一個對應的大綱條目，既使你沒有在其中配置h級的標題元素。
另外有一組區塊根目錄元素(sectioning roots)，這一組元素本身亦會輸出自已的大綱條目，不過這些大綱並不會成為上述四個區塊元素輸出大綱的一部份，這一組元素包含 blockquote、body、details、fieldset、figure以及td。
Bear: 那不然它自已的大綱要如何取得？有何作用？
6-45
要注意的是這一整個區塊以div定義而非section，因為這個區塊必須連結樣式設定。
7-43
最後一個div元素，其背景為silver，寬度是549px，如果要配置五欄需要550px，寬度還少1px，因此還是維持四欄，而多出來的109px則被平均分散配置，因此相較於第二個div中的欄位寬。
檢視各樣式類別的設定中，你會發現還其中還設定了column-gap這個屬性值為0，因為當版面超過一個欄位，欄位與欄位之間預設將保留一定距離(建議值為1 em)，這會影響容納欄位空間所需的寬度，為了精準呈現width與column-width的關係，因此將其設定為0，後文針對column-gap會有進一步說明。
column-width屬性值若是沒有設定，則被認定為auto，這個值也可以明確的指定。
Bear: 這裡要配合書上的例子看才容易體會作者的意思。
7-44
比較需要注意的是同時設定column-width與column-count的狀況，在這種情況下，則以column-count屬性值為可能的欄位最大值。
7-45
其中的column-count 屬性值為4，因此呈現的內容最多只能以四欄呈現，如果空間不足以呈現四欄，也就是不足800px的寬度，則以小於四欄的版面呈現。
Bear: 這裡要配合書上的例子看才容易體會作者的意思。
7-50
要達到此效果除了resize屬性的設定之外，另外必須搭配 overflow屬性，這個屬性不可以是預設值 visible。
Bear: 這裡要配合書上的例子看才容易體會作者的意思。
8-5
HTML5導入新的方法 querySelector()支援透過選擇器選取元素的操作。
8-6
讀者在這個範例看到其中分別調用了 getElementById()與 querySelector()兩種方法來取得指定 id 的元素，這兩者效果相同，然而前者只能透過 id 來存取元素，後者只要指定合法的選擇器，就能夠存取任意元素，即使元素沒有設定 id 屬性。
8-8
如果要將所有符合選擇字串的元素全部回傳，可以調用querySelectorAll()這個方法，它會根據指定的選擇器字串，找出所有符合的元素，然後將其合併至一個陣列當中回傳。
10-73
Bear: setTimeout()方法比setInterval()方法好用
11-5
以Chrome 為例，按下 Shift+Ctrl+I，開啟開發工具視窗。
11-6
在Firefox 中，可以在網址列輸入 about:cache 。
11-12
普遍的作法是在快取清單中指定版本號碼，以區隔快取資源檔案的版本，一旦任何清單中的檔案發生改變，只要修改版本號碼，就可以讓清單檔案的內容發生改版，如此一來，伺服器便會自動重新載入檔案，達到更新的目的。
17-23 ~ 17-24
對於網頁需要持續向遠端HTTP伺服器提出資料要求時，運用推播技術會是比較好的選擇。
最主要的原因是每一次資料推送至網頁之後，當下一次推送作業開始之前，一旦瀏覽器偵測到網路進入沒有任何活動的閒置狀態，與伺服器的連線便會自動切斷，並且切換至暫停模式以節省電力。
當網路連線切斷之後，瀏覽器與遠端伺服器之間的連線由所謂的推播服務(push proxy)替代並且進行維護。
由於不會一直保持連線，對於需要持續針對HTTP伺服器提出要求的網頁而言，這種模式可以節省耗用的資源，同時也有助於降低手持式裝置的電力消耗。
