[書籍精讀]《響應式Web設計 HTML5和CSS3實戰(第二版)》精讀筆記分享

寫在前面

• 書籍介紹：本書主要講解瞭如何運用HTML5和CSS3來進行響應式Web設計，使頁面的設計與開髮根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)來進行相應的響應和調整。
• 我的簡評：響應式Web設計，個人從業經驗上覺得應該是一個很龐大的話題，也是一個實用性很強的方面。作者在本書中講的響應式的內容並不多，後面很多講的都是HTML5與CSS3方面的內容，適合剛入門的前端朋友吧。
• ！！文末有pdf書籍、筆記思維導圖、隨書代碼打包下載地址哦！閱讀「書籍精讀系列」所有筆記，請移步：推薦收藏-JavaScript書籍精讀筆記系列導航

第一章 響應式Web設計基礎

• 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕，可以讓網站的佈局和功能隨用戶的使用環境（屏幕大小、輸入方式、設備/瀏覽器能力）而變化

1.2.什麼是響應式Web設計

• 響應式設計，名字是Ethan Marcotte在2010年發明的
• 綜合運用三種已有技術（彈性網格佈局、彈性圖片/媒體、媒體查詢）實現了一個解決方案，就叫“響應式Web設計”
• 所謂響應式設計，就是網頁內容會隨著訪問它的視口及設備的不同而呈現不同的樣式

1.3.瀏覽器支持

• 在寫作這一版的2015年年中，IE6、IE7、IE8基本消失了，就連IE9的市場份額也降到了2.45%（IE10只占1.94%，IE11上升到了11.68%）
• 應該勸告自己的客戶或老闆，告訴他們為什麼給那些“殘疾”瀏覽器寫代碼是錯誤的，而把時間和資源主要放在支持現代瀏覽器和現代平臺上才是最明智的
• 不少新工具，可以把以往需要手工做的事自動化（CSS預處理器（Sass、Less、Stylus、PostCSS）可以幫我們組織代碼、變數、顏色操作和數學運算；像PostCSS這樣的工具可以幫我們完成添加瀏覽器首碼這樣繁瑣的任務；一些清理和驗證工具可以幫我們檢查HTML、CSS和Javascript代碼是否符合標準，自動提示輸入錯誤和語法錯誤）

1.4.第一個響應式例子

• 瀏覽器中用於呈現網頁的區域叫視口（viewport）。視口通常並不等於屏幕大小，特別是可以縮放瀏覽器視窗的情況下
• 媒體查詢可以讓我們在某些條件下（如寬度和高度為多少的情況下）為網頁應用樣式
• 人們在剛開始使用媒體查詢的時候，經常會針對當時流行的設備設置斷點
• 響應式設計，那應該與顯示它的設備無關才對，而不是只是在某些屏幕中才最合適
• 首先是基本的樣式，它適用於任何設備。在這個樣式基礎上，在為不同視口、不同能力的設備，漸進增加不同的視覺效果和功能

1.5.示例的不足之處

• 怎麼使用標記來構建頁面，才能保證所有元素都具有語義
• 示例中使用了彈性圖片，可是如果用戶使用手機查看頁面，那麼他會下載一個很大的圖片（至少2000像素以上），而在屏幕上又只能縮成幾分之一顯示
• 使用SVG（Scalable Vector Graphics，可伸縮矢量圖）可以簡單地適用各種解析度。SVG圖形看起來非常清晰，無論使用什麼屏幕

第二章 媒體查詢

寫在前面

• CSS3規範分成很多模塊，媒體查詢（3級）只是其中一個模塊
• 除了古老的IE（8及以下版本），幾乎所有瀏覽器都支持它

2.1.為什麼響應式Web設計一需要媒體查詢

• CSS3媒體查詢可以讓我們針對特定的設備能力或條件為網頁應用特定的CSS樣式
• 官方定義：媒體查詢包含媒體類型和零個或多個檢測媒體查詢的表達式。width、height和color都是可用於媒體查詢的特性。使用媒體查詢，可以不必修改內容本身，而讓網頁適配不同的設備
• 真正的編程語言都有相應的語法構造處理一個或多個條件分支

2.3.組合媒體查詢

• 可以將多個媒體查詢串在一起
• @import與媒體查詢（CSS中的@import會增加HTTP請求（進而影響載入速度），因此請慎用）
• 在CSS中使用媒體查詢（更常見的是在CSS文件內部直接使用媒體查詢；在針對所有設備的媒體查詢中，可以使用簡寫語法，即省略關鍵字all（以及緊隨其後的and））
• 媒體查詢可以測試哪些特性（CSS媒體查詢4級草案中廢棄了一些特性，特別是device-height、device-width和device-aspect-ratio）

2.4.通過媒體查詢修改設計

• 任何CSS都可以放在媒體查詢中（使用媒體查詢可以從整體上修改一個網站的佈局和外觀（通常針對不同的視口大小））
• 針對高解析度設備的媒體查詢

2.5.組織和編寫媒體查詢的註意事項

• 使用媒體查詢鏈接不同的CSS文件
• 從瀏覽器的角度看，CSS屬於“阻塞渲染”的資源。換句話說，瀏覽器需要下載並解析鏈接的CSS文件，然後再渲染頁面
• 在這些瀏覽器看來，不符合媒體查詢指定條件（比如屏幕比媒體查詢的小）的CSS文件可以延緩執行（deferred），到頁面初始載入後再處理，以便讓用戶感覺頁面載入速度更快
• 阻塞渲染：僅是指該資源是否會暫停瀏覽器的首次頁面渲染。無論CSS是否阻塞渲染，CSS資源都會被下載，只是說非阻塞性資源的優先順序比較低而已
• 分隔媒體查詢的利弊（編寫多個媒體查詢分別對應不同的樣式雖然有好處，多一個文件就要多一次HTTP請求，在某些條件下，HTTP請求多了會明顯影響頁面載入速度；gzip是一種壓縮和解壓縮的文件格式。主流一點的伺服器都支持gzip壓縮CSS，從而讓伺服器發送給設備的文件明顯“瘦身”（到了設備之後，再解壓成原來的格式））
• 把媒體查詢寫在常規樣式表中

2.7.關於視口的meta標簽

• 為了利用媒體查詢，應該讓小屏幕以其原生大小來顯示網頁，而不是先在980像素寬的視窗中渲染好，讓用戶去放大或縮小
• user-scalable=no是禁止用戶縮放的

2.8.媒體查詢4級

• 可編程的媒體特性（最常見的場景為啟用JavaScript的用戶編寫特有的CSS規則；CSS媒體查詢4級致力於在CSS中提供更標準的實現方式）
• 交互媒體特性：指針媒體特性用於查詢滑鼠之類的指針設備是否存在，以及存在時其精確的位置
• 懸停媒體特性：懸停媒體特性就是用來測試用戶是否可以通過某種機制實現在屏幕元素上懸停的
• 環境媒體特性：要能根據用戶的環境來改變設計多好。比如，根據環境光線的亮度

2.9.小結

• 僅有媒體查詢只能實現可適配的Web設計，即從一種佈局到另一種佈局的切換

第三章 彈性佈局與響應式圖片

• 百分比佈局使得網頁寬度能夠隨著查看它們的屏幕視窗大小變化，因此得名彈性佈局

3.1.將固定像素大小轉換為彈性比例大小

• 響應式設計之父Ethan Marcotte在他2009年的文章“Fluid Grids”中給出：結果=目標/上下文
• 理想情況下，應該從小屏幕設計向桌面設計轉換
• 對於小屏幕，核心思想就是把內容顯示在一根長條里
• 綜合運用了兩個響應式Web設計的核心技術：將固定大小轉換為比例大小，以及使用媒體查詢相對於視口大小應用CSS規則
• 為什麼需要Flexbox：檢討下即有佈局技術，比如行內塊、浮動以及表格的缺點
• 行內塊與空白：使用行內塊（inline-block）來佈局的最大問題，就是它會在HTML元素間渲染空白；空白對於我來說95%的時間里它都是多餘的；另外要說明一下，在行內塊中垂直居中內容也不容易
• 浮動：儘管浮動佈局跨平臺一致性很好，但還是有兩個讓人難以釋懷的缺點；第一個，如果給浮動元素的寬度設定百分比，那麼最終計算值在不同平臺上結果不一樣（有的瀏覽器向上取整，有的瀏覽器向下取整）；第二個，通常都要清楚浮動，才能避免父盒子/元素摺疊
• 表格與表元：別把display：table和display：table-cell與對應的HTML元素搞混

3.2.Flexbox概述

• Flexbox三級跳：Flexbox的超能力，可以概括如下（方便地垂直居中內容；改變元素的視覺次序；在盒子里自動插入空白以及對齊元素，自動對齊元素間的空白；減少不少壓力）
• 瀏覽器對Flexbox的支持：IE9及以下版本不支持Flexbox

3.3.使用Flexbox

• Flex有4個關鍵特性：方向、對齊、次序和彈性
• Flexbox與有與inline-block和inline-table對應的inline-flex變體
• Flexbox的對齊：關於Flexbox的對齊，最重要的是理解坐標軸，有兩個軸，“主軸”和“交叉軸”；有時候，可能只需要把某一個元素按不同方式對齊。這個元素可以使用align-self屬性決定自己的對齊方式；space-between會在子元素之間添加相同寬度的空白，而space-around則在它們兩邊各添加相同寬度的空白
• flex：除了width，還可以通過flex屬性來定義寬度，或者叫“伸縮性（flexiness）”
• 簡單的粘附頁腳：原理是flex屬性會讓內容在空間允許的情況下伸展。頁面主體是伸縮容器，最小高度是100%，所以主內容會儘可能占據所有有效空間
• 改變原始次序：order屬性可以在Flexbox中簡單、明確地修改元素的次序。此處的-1表示要位於其他所有元素之前；flex-flow：row wrap。這個屬性可以讓伸縮項折行，但有些老瀏覽器對這個屬性的支持不好
• Flexbox小結：使用Flexbox可以實現無數種可能的佈局，而且得益於其“伸縮性”，這種佈局機制非常適合響應式設計

3.4.響應式圖片

• 響應式圖片的固有問題：只有瀏覽器在打開和渲染內容時才會知道使用它的設備的具體情況（屏幕大小、設備能力等）；只有開發者知道自己手裡有幾種大小的圖片；Embedded Content規範描述瞭如何進行簡單的圖片解析度切換（讓擁有高解析度屏幕的用戶看到高解析度的圖片），以及支持“文藝範”，即可以根據視口空間大小顯示完全不同的圖片（類似媒體查詢）
• 通過srcset切換解析度：對於支持srcset屬性的瀏覽器，通過逗號分隔的圖片描述，讓瀏覽器自己決定選擇哪一個。圖片描述首先是圖片名，然後是一個解析度說明
• srcset及sizes聯合切換：sizes屬性僅僅是對瀏覽器給出提示。因此並不保證瀏覽器言聽計從；如果不想讓瀏覽器決定，可以使用picture元素。使用這個元素可以讓瀏覽器交付那你讓它交付的圖片
• picture元素：最後一種情況就是你希望為不同的視口提供不同的圖片

第四章 HTML5與響應式Web設計

4.1.HTML5與響應式Web設計

• 所有現代的瀏覽器都理解HTML5中新的語義元素（新的結構化元素、視頻和音頻標簽），甚至老版本的IE（IE9以下版本）都可以通過引入一小段“膩子腳本”正確渲染這些新元素
• 膩子腳本這個叫法的發明者是Remy Sharp，是想用膩子腳本可以填補牆上的坑窪不平來比喻老版本瀏覽器的功能缺失。因此，JavaScript中的膩子腳本可以讓老舊瀏覽器支持新特性

4.2.開始寫HTML5網頁

• doctype是我們告訴瀏覽器文檔類型的手段。如果沒有這一行，瀏覽器將不知道如何處理後面的內容
• HTML5的doctype短小易懂，只有
• doctype聲明之後是開發的html標簽，也是文檔的根標簽
• 根據W3C的規範，lang屬性指定元素內容以及包含文本的元素屬性使用的主語言
• HTML5不要求這麼精確。沒有結束的反斜杠，屬性值也沒加引號，而且沒有type聲明。寬容的HTML5並不在乎這些，後一種寫法跟前一種寫法一樣，完全沒有問題
• 這種鬆散的語法並不局限於鏈接資源，而是可以在文檔任何地方出現
• 沒有結束標簽的反斜杠，沒有引號，大小寫混用，都沒問題

4.3.寬容的HTML5

• 個人喜歡使用XHTML風格的語法寫HTML5.換句話說，標簽必須關閉，屬性值必須加引號，而且大小寫也必須一致。認為清晰勝過簡潔
• 無論HTML5對語法要求多寬鬆，都有必要檢驗自己的標記是否有效。有效的標記更容易理解
• HTML5的一大好處就是可以把多個元素放到一個<a>標簽
• 唯一的限制是不能把另一個<a>標簽或button之類的交互性元素放到同一個<a>標簽里，另外也不能把表單放到<a>標簽里

4.4.HTML5的新語義元素

• 大多數網站的結構都很相似，包含頁頭、頁腳、側邊欄、導航條等等
• 單純從代碼來看，任何用戶代理（瀏覽器、屏幕閱讀器、搜索引擎爬蟲等等）都不能確定每個div元素中包含的是什麼內容
• 很長時間以來，HTML5都沒有元素用於表示頁面的主內容區
• 現在我們可以使用main標簽來聲明主內容區
• 每個頁面的主內容區只能有一個（兩個主內容就沒有主內容了），而且不能作為article、aside、header、footer、nav等其他HTML5語義元素的後代
• section元素用於定義文檔或應用中一個通用的區塊。關鍵時是要知道這個元素不是為了應用樣式而存在的
• <nav>元素用於包裝指向其他頁面或同一頁面中不同部分的主導航鏈接
• <article>跟<section>元素一樣容易引起誤解。<article>用於包含一個獨立的內容塊
• 明顯可以放到article元素中的內容有博客正文和新聞報道。對於嵌套<article>而言，內部的<article>應該與外部<article>相關
• <aside>元素用於包含與其旁邊內容不相關的內容
• <figure>相關的規範原文：可用於包含註解、圖示、照片、代碼等等
• 用戶單擊一段摘要，就會打開相應的補充內容面板。HTML5為此提供了details和summary元素
• 實踐中，可以將<header>元素用在站點頁頭作為“報頭”，或者在<article>元素中用作某個區塊的引介區。可以在一個頁面中出現多次
• <footer>元素應該用於在相應區塊中包含與區塊相關的內容，可以包含指向其他文檔的鏈接，或者版權聲明。同樣可以在頁面中出現多次
• <address>元素明顯用於標記聯繫人信息，為最接近的<article>或<body>所用
• 原來規範是不推薦使用h1到h6來標記標題和副標題的
• HTML5規範是這麼說：h1到h6元素不能用於標記副標題、字幕、廣告語，除非想把它們用作新區塊或子區塊的標題

4.5.HTML5文本級元素

• HTML5還修訂了一些以前作為行內元素使用的標簽。修訂之後，HTML5規範稱它們為“文本級語義標簽”
• 過去，人們常用<b>元素來加粗文本。而現在，可以把它用作一個添加CSS樣式的標記。
• 正如HTML5規範所說：<b>元素表示只為引人註意而標記的文本，不傳達更多的重要性信息，也不用於表達其他的願望或情緒
• 現在的<b>元素並無特殊含義，是文本級的，那就不能用它來包圍一大段其他標記，那種應該用div
• 一般用<em>就只是為了給文本添加樣式。HTML5說：em元素表示內容中需要強調的部分
• 一段文本，用於表示另一種願望或情緒，或者以突出不同文本形式的方式表達偏離正文的意思。總之，它不僅僅用於把文本標為斜體

4.6.作廢的HTML特性

• HTML5宣佈作廢的特性可分兩類：相容和不相容。
• 相容特性還可以用，但在驗證器中會收到警告。現實當中應該儘量不用它們，但用它們也不會出現什麼問題
• 不相容特性可能在某些瀏覽器中仍然可以正確渲染，但確實非常不鼓勵你用，如果你非要用，可能會有問題

4.8.WCAG和WAI-ARIA

• WCAG的宗旨是：提供一份能滿足個人、組織和政府間國際交流需求的Web內容無障礙的標準
• WCAG指南，提供了很多（大部分是常識性的）有關讓網頁無障礙訪問的建議。每個建議對應一個一致性級別：A、AA或AAA
• 強烈建議每一位讀者花一兩個小時看看這份清單
• WAI-ARIA的目標是總體上解決網頁動態內容的無障礙問題。他提供了用於描述自定義部件（Web應用中德動態部分）的角色、狀態和屬性方法，從而可以讓使用輔助閱讀設備的用戶識別並利用這些部件
• 可以使用的ARIA role屬性值：region（預設。不要設置）、alert、alertdialog、application、contentinfo、dialog、document、log、main、marquee、presentation、search或status
• 方便輔助技術的最簡單方式就是儘可能使用正確的元素
• ARIA並非只能用於標記“地標”

4.9.在HTML5中嵌入媒體

• 對很多人來說，是蘋果拒絕在iOS設備中支持Flash才讓HTML5進入它們的視野。Flash的市場份額曾經非常之高（有人甚至認為它阻礙了市場發展），主要用於在網頁中播放視頻
• 雖然HTML5在富媒體方面確實有長足進步，但蘋果的公開支持卻給了它很大的推動，使其媒體工具獲得了社區的廣泛關註
• IE8及更低版本的IE不支持HTML5視頻和音頻
• 在HTML5中添加視頻和音頻很簡單。唯一麻煩的是列出可替代的媒體資源（因為不同的瀏覽器支持的媒體格式不同）
• preload用於控制媒體的預載入，預載入對於緩存視頻延遲很有用
• audio與video幾乎一樣，它們的主要區別，當然是音頻沒有視頻需要的播放區域

4.10.響應式HTML5視頻與內嵌框架

• 現在，HTML5視頻的唯一問題就是它不是相應式的

4.11.關於“離線優先”

• 創建響應式網頁及Web應用的理想方式是“離線優先（offline-first）”。就是始終要保證網站和應用始終可以打開，即使不上網也能載入到內容
• 可以使用離線Web應用和LocalStorage（或它們的組合）實現離線優先的體驗。現在有了一個不錯的方案，那就是Service Workers

第五章 CSS3新特性

5.3.便捷的CSS技巧

• 使用CSS多列佈局可以通過幾種方式讓文本分成多列顯示
• 一行代碼就可以輕鬆實現響應式多列

5.4.斷字

• 所謂水平滾動面板，在水平空間允許的情況下，可以看到所有商品。而在空間受限時（比如手機上），面板就可以左右滾動
• 如果使用偽元素，記住為了保證::before和::after顯示，它們必須包含一個content值，就算空白也行
• 老版本安卓設備不支持水平滾動

5.5.在CSS中創建分支

• 特性查詢：CSS原生的分支語法就是特性查詢，屬於CSS Conditional Rules Module Level 3
• 組合條件：可惜的是，並非所有瀏覽器都支持@supports
• Modernizr：使用Modernizr這個JavaScript工具。目前，它是在CSS中實現分支的最可靠方式；所謂漸進增強，就是從最簡單的可用代碼開始，從最基本的功能開始，從支持能力最低的設備開始，逐步增強到支持能力更強的設備；Modernizr是一個放在網頁中用於檢測瀏覽器特性的JavaScript庫；當瀏覽器載入頁面後，就會運行Modernizr內置的所有測試。如果瀏覽器通過測試，Modernizr會在html標簽上添加一個類；Modernizr能測試大多數特性，但不是全部特性

5.6.新CSS3選擇符

• data-*屬性是HTML5引入的一個用於保存數據的屬性
• 在HTML5之前，以數值開頭的ID和類是無效的。HTML5放開了這個限制。說到ID，不能忘了ID不能包含空格，而且必須在網頁中唯一

5.7.CSS3結構化偽類

• 理解nth，n作為數值表達式對於普通人特別是數學不好的人來說就沒那麼好理解了
• nth-child選擇符選擇的是同級DOM中子元素，與類無關，而:nth-of-type和:nth-last-of-type就要區分類型了
• JavaScript和jQuery都是從0開始計數的，但CSS3則從1開始計數
• 使用:empty選擇符時要註意。空格跟空是兩碼事，還有，註釋不算內容，也算空的
• CSS3要求把偽元素與偽類區分開，但要註意，IE8及更低版本的IE不支持兩個冒號的語法
• ::first-line是指瀏覽器渲染結果的第一行，而不是標記中文本的第一行

5.8.CSS自定義屬性和變數

• CSS自定義屬性可以存儲信息，這些信息可以在樣式表的其他地方使用，也可以通過JavaScript操作
• :root偽類始終引用文檔結構中最外層的親元素
• 自定義屬性以兩個短劃線開頭，接著是自定義屬性的名字。然後，引用自定義屬性的時候可以用var()
• 一方面可以通過這種方式存儲任意多個自定義屬性。另一方面，不管什麼時候修改一個自定義屬性的值，所有引用它的規則，無論有多少，都會自動更新，而無需分別去修改每一條規則

5.9.CSS calc

• 瀏覽器對calc()函數的支持也很好，除了Andriod 4.3及以下版本的Chrome

5.10.CSS Level4選擇符

• 相對視口的單位雖然有用，但有些瀏覽器的實現卻很奇怪

5.11.Web排版

• 多年來，Web字體的選擇一直被局限在幾款“安全”字體上
• CSS提供了@font-face規則，用於引用線上字體顯示文本
• 一般會把解壓得到的字體文件放到與css文件夾同級的fonts文件夾中
• 有時需要關註一下自定義字體的大小

5.12.CSS3的新顏色格式及透明

• CSS3新增了兩種聲明顏色的格式：RGB和HSL，這兩種顏色模式還支持alpha通道
• 在定義了一種HSL顏色後，很容易派生出多個相近的顏色，只要修改飽和度和亮度的百分比就行了
• HSL或RGB與十六進位值得區別在於，它們支持透明通道，可以讓原來被元素擋住的東西透過來
• 元素設置opacity影響整個元素，而RGBA和HSLA則隻影響元素特定的方面，比如背景

第六章 CSS3高級技術

• CSS3的高級屬性十分適合響應式設計，很多情況下，我們可以用它來替代圖片

6.1.CSS3的文字陰影特效：text-shadow: 1px 1px 1px #ccc;

• 縮寫值的規則是先右後下。第一個值是陰影的右側偏移量，第二個值是陰影的下方偏移量，第三個值是模糊距離（陰影從有到無的漸變距離），最後一個則是色值
• 在CSS中，對於以0開頭的數值，可以將0省去

6.2.盒陰影

• box-shadow，和文字陰影遵循相同的語法

6.3.背景漸變

• 在響應式設計中，你會發現按照比例設置漸變效果大小比按照固定像素設置更為有用

6.4.重覆漸變

• 在linear-gradient或者radial-gradient前添加repeagting首碼

6.6.多張背景圖片

• 不支持多重背景的瀏覽器（如IE8及之前的版本）會忽略這條聲明
• 建議不要使用縮寫，並且先聲明多重背景圖片，然後聲明背景大小，最後聲明背景位置

6.9.CSS性能的警告

• 慎重使用濾鏡效果
• CSS3的背景漸變功能使我們減少了對背景圖片的依賴

第七章 SVG與響應式Web設計

• SVG是一種不會過時的、能夠輕鬆解決多屏幕解析度問題的技術

7.1.SVG的歷史

• SVG的第一個版本是在2001年推出的
• 1.1規範中對SVG的介紹：SVG是XML[XML1.0]中用於描述二維圖形的語言。SVG支持三種圖形對象：矢量圖形形狀（例如由直線和曲線組成的路徑）、圖像和文本
• 矢量圖是使用相對點來保存數據的，所以可以縮放到任意大小而不會損失清晰度

7.2.用文檔表示的圖像

• SVG是使用標記式語言進行描述的
• SVG使用XML（eXtensible Markup Language，可擴展標記語言）來描述，XML是一種和HTML十分相似的語言
• SVG的根元素：SVG的根元素有width、height和viewbox屬性；視框（viewbox）則定義了SVG中所有形狀都需要遵循的坐標系
• 命名空間：SVG會有一個由生成它的圖形編輯程式定義的命名空間；只是在生成SVG的程式中使用，為了減少SVG的大小，通常會把它們去掉
• 標題和描述標簽：title和desc標簽提高了SVG文檔的可讀性；可以用來在圖像不可見的情況下描述圖像的內容
• defs標簽：用於儲存所有可以復用的元素定義的地方，如梯度、符號、路徑等
• 元素g：能把其他元素捆綁在一起
• SVG形狀元素：擁有一系列可用的現成形狀（path、rect、circle、ellipse、line、polyline、polygon）
• SVG路徑：SVG路徑和其他形狀有所區別，因為他們是由任意數量的連接點組成的（允許你自由創造你想要的形狀）

7.3.使用流行的圖像編輯工具和服務創建SVG

• 最好的選擇是Adobe公司的Illustrator（PC/Mac）
• 使用的是Mac的話，推薦Bohemian Coding的Sketch（只有Mac版）

7.4.在Web頁面中插入SVG

• 在SVG圖片上，可以做很多（基於瀏覽器的）你在普通格式圖片（JPEG、GIF、PNG）上做不到的事
• 使用img標簽：最直接的插入SVG圖像的方式就是你將圖像插入到HTML文檔中的方式
• 使用object標簽（object標簽式W3C推薦的用於裝載非HTML內容的容器；data和type屬性其實只有一個必須要的。data屬性是你鏈接SVG資源的方式。type屬性描述了內容的MIME類型；通過object標簽插入到頁面的SVG可以被JavaScript訪問，這是採用這種插入方式的一個重要理由。另一個好處是，object可以在瀏覽器不支持引入的數據類型的情況下做出簡單的反饋）
• 把SVG作為背景圖像插入：SVG可以在CSS中用作一個背景圖像，和其他圖片格式（PNG、JPG、GIF）一樣；在CSS中，瀏覽器總會忽略它所不能理解的那些屬性/值對；如果你對SVG的需求主要是靜態背景圖片或者是圖標之類，強烈建議通過背景圖像的方式插入SVG文件
• 關於data URI的簡短介紹：相對於CSS而言，這是用來引入外部資源的，如圖像。也可以利用data URI引入圖片；data URI有不同的編碼方式，並且有大量可用的工具來為你的資源創建data URI
• 生成圖像精靈：個人推薦的用於生成圖像精靈或者data URI的工具是Iconizr

7.5.內聯SVG

• 利用符號復用圖形對象：use元素可以復用所有的SVG內容：梯度、形狀、符號等
• 根據上下文改變內聯SVG顏色：通過對父元素的繼承創造雙色圖標。需要在SVG符號中，把你想設置為單一顏色的路徑的fill屬性設定為currentColor，然後使用CSS中的color屬性設定這個元素額顏色；唯一的壞處是，如果你想在頁面上使用這些圖標，就必須引入同一個SVG代碼
• 復用外部圖形對象資源：可以使用use元素鏈接到外部的SVG文件，並且抓取你想要使用的部分；有個壞消息，IE瀏覽器不支持對外符號資源的引用。對於IE9-IE11，我們有膩子腳本（polyfill）

7.6.不同插入方式下可以使用的功能

• 在最新版本的Firefox、 Chrome和Safari中都是一致的。 然而， IE有的時候會不一樣。

7.7.SVG的怪癖

• 無論用什麼方式插入，SVG都會使用設備最高的解析度來渲染
• 可以在SVG內部放置它本身的樣式
• 無論是內聯還是外部引入的CSS，你都可以做“正常”的CSS行為：改變元素的外觀、添加動畫、變換元素等等
• 僅僅用CSS的animation就可以製作很多SVG動畫。當你需要添加交互功能、支持IE瀏覽器或者同步一系列事件的時候，最好使用JavaScript實現動畫效果

7.8.使用JavaScript添加SVG動畫

• 推薦使用GreenSock動畫平臺、Velocity.js或者Snap.svg

7.9.優化SVG

• 最簡單的方法是使用自動化工具來優化SVG文件

7.10.把SVG作為濾鏡

• CSS的濾鏡效果，在IE10和IE11上尚未被支持。慶幸的是， 我們可以依靠SVG在IE10和IE11上創建濾鏡

第八章 CSS3過渡、變形和動畫

寫在前面

• CSS3的三個主要代理--過渡（transition）、變形（transform）和動畫（animation）
• 當你知道動畫的起始狀態和終止狀態，並且需要一個簡單的變形方法時，使用CSS過渡
• 當你需要在視覺上改變某個元素但又不想影響頁面佈局的時候，使用CSS變形
• 當你想在一個元素上執行一系列關鍵楨動畫時，使用CSS動畫

8.1.什麼是CSS3過渡以及如何使用它

• CSS3的過渡，顧名思義，允許我們在不同的狀態之間切換
• 註意，在CSS中過渡屬性應用到元素的初始狀態而不是結束狀態上
• 過渡可以用四個屬性聲明：transition-property（要過渡的CSS屬性的名字如background-color）、transition-duration（定義過渡效果持續的時長）、transition-timing-function（定義過渡期間的速度變化）、transition-delay（用戶定義過渡開始前的延遲時間）
• 過渡的支持度非常高，但是和以往一樣，記得使用像Autoprefixer之類的工具來添加相應的瀏覽器私有首碼
• ease、linear、ease-in、ease-out、ease-in-out和cubic-bezier，其實他們就是預置好的貝塞爾曲線，本質上是緩動函數
• 感知速度對用戶來說非常重要，所以我們必須讓網站和應用儘可能快

8.2.CSS的2D變形

• 過渡是從一種狀態平滑轉換到另一種狀態，而變形則定義了元素將會變成什麼樣子
• CSS3的2D變形模塊允許我們使用下列變形：scale用來縮放元素（放大和縮小）、translate在屏幕上移動元素（上下左右）、rotate按照一定角度旋轉元素（單位為度）、skew（沿X軸和Y軸對元素進行斜切）、matrix允許你以像素精度控制變形效果
• 要記住，變形時在文檔流外發生的。一個變形的元素不會影響它附近未變形的元素的位置
• 在CSS中，預設的變形原點（瀏覽器中作為變形中心的點）是在正中心：元素X軸的50%和Y軸的50%處。使用transform-origin我們可以修改變形原點

8.3.CSS3的3D變形

• 除了使用perspective外，我還發現了transform3d這個有用的屬性。在這個簡單的屬性里，你可以在X軸（左/右）、 Y軸（上/下）、 Z軸（前/後）上移動元素。
• translate3d中逗號分隔的三個參數分別是X軸上的偏移、 Y軸上的偏移、 Z軸上的偏移
• transform3d的最大用處在於將面板移入移出屏幕。一個基本的、漸進增強的離屏導航模式

8.4.CSS3動畫效果

• 相較於3D變形，CSS3動畫的支持度更高
• CSS3動畫由兩部分組成：首先是關鍵楨聲明，然後是在動畫屬性中使用該關鍵楨聲明
• 基本任何動畫都可以用關鍵楨實現，因此這個可能性是無限的
• 採用CSS3新特性和技巧的最終目的，是想使用CSS來替代JavaScript製作一些優雅精美的增強效果，讓響應式設計更加簡潔和豐富

第九章 表單

9.2.理解HTML5表單中的元素：

• placeholder、required、autofocus、autocomplete等

9.3.HTML5的新輸入類型：

• email、number、url、tel、search、pattern、color等；
• HTML5新增了很多輸入類型，其中一個作用就是可以在不引入JavaScript代碼的情況下限制用戶輸入的數據。在那些不支持新特性的瀏覽器中，它們會預設降級顯示為一個標準的文本輸入框

9.4.如何給不支持新特性的瀏覽器打補丁

• HTML5表單實際使用還有兩個非常麻煩的問題：一是支持表單新特性的瀏覽器在具體實現上有所不同；二是對完全不支持新特性的瀏覽器如何處理

第十章 實現響應式Web設計

• 擁抱漸進增強：逐步增強的基本想法是，從選擇支持的瀏覽器中選取它們共有的子集方法來開始編寫你的前端代碼（HTML、CSS、JavaScript）。然後，逐步優化你的代碼以適應那些比較強大的瀏覽器和設備
• 確定需要支持的瀏覽器：傾向於在支持的各個瀏覽器上功能一致而非外觀一致
• 分層的用戶體驗：基本體驗是站點的最小可行版本，而增強體驗則是包括所有功能並且最為美觀的版本

寫在後面

• pdf書籍、筆記思維導圖、隨書代碼打包下載地址：https://pan.baidu.com/s/1rZGRe0gzyEKiV9y5qmsgbg(提取碼：fo49)
• 紙質書京東購買地址：https://u.jd.com/0T3tQp（推薦購買紙質書來學習）