初識HTML

HTML 概念

一、HTML，全稱是超文本標記語言（HyperText Markup Language），在網頁中全部的文字圖片和組織架構均由 HTML 來編寫
二、HTML 並非一種編程語言，它是一種計算機語言，其不具有像 c/c++/java 等編程語言中的變量或函數等東西，它僅僅由標籤組成，如 <html></html> 三、因爲 HTML 並非編程語言，沒有編譯過程，所以可用任何可寫字的軟件來編寫好比 txt，不過目前常使用 vscode 軟件來編寫前端程序
四、HTML 就是文檔，萬維網的雛形是一個文檔共享系統，而如今的萬維網則是一個資源共享的網絡，包括圖片、多媒體等）。萬維網就是一個放大版的文檔共享系統， HTML 的本質實際上是文檔（document）javascript

常見標籤

<html></html>css

根標籤，其餘的東西都要放在這個標籤裏面編寫
能夠在根標籤裏來加屬性 lang 來告訴搜索引擎、爬蟲網站使用什麼語言，zh-cmn 是中文，en 是英文，通常兩者一塊兒寫
```
<html lang=」en, zh-cmn」>
複製代碼
```

<head></head> html

根標籤次一級的標籤
該標籤中的內容主要是給瀏覽器看的，好比 title 用來設置頁面的標題、meta、style 設置樣式、link 外鏈 CSS 樣式文件、設置移動端的頁面顯示大小、爲網頁被搜索時設置關鍵字等
meta 標籤由 name 和 content 兩個屬性定義，描述一個 HTML 網⻚文檔的屬性，如做者、日期和時間、網⻚描述、關鍵詞、⻚面刷新等，除了一些 http 標準規定了一些 name 做爲你們使用的共識，開發者也能夠自定義 name
- charset，用於描述 HTML 文檔的編碼形式，英文正常顯示但中文就會變成一堆亂碼，這是因爲瀏覽器不識別中文字符，可經過標籤來設置編碼格式
```
<meta charset = "utf-8">
複製代碼
```
- 常見編碼集主要有 gbk、gb23十二、unicode、utf-8
  - gb2312 是國標 2312 條，能夠識別簡中日韓等亞洲語言
  - gbk 是國標擴展，能夠識別繁體中文
  - unicode 是萬國碼，世界各國語言都包括在內，全稱是 unicode transformation format，這個編碼格式是公用的，能夠識別全部的語言 unicode 的升級版本是 utf-8
- http-equiv，顧名思義至關於 http 的文件頭做用，以下面的代碼就能夠設置 http 的緩存過時日期
```
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">
複製代碼
```
- viewport，移動前端最熟悉不過，Web 開發人員能夠控制視口的大小和比例
```
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
複製代碼
```
- apple-mobile-web-app-status-bar-style，開發過 PWA 應用的開發者應該很熟悉，爲了自定義評估工具欄的顏色
```
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
複製代碼
```

<body></body> 前端

根標籤次一級的標籤，與 head 平級
是整個頁面的主體部分，頁面展現出來的內容通常都放在 body 標籤下面

<div></div><span><span>html5

最多見的兩個結構化標籤

結構化標籤沒有特殊的效果，通常用來當作容器來盛放其餘的標籤（結構化標籤還有另一個做用就是用來爲裏面的子元素設置樣式，通常元素若某一條屬性沒有被開發者設置樣式的話，它會自動繼承父級元素的相應屬性的樣式java

span 標籤裏面多數狀況下盛放文字或小 icon 之類的
div 中間加一些文字，文字會在這個 div 標籤的邊界處自動換行，即這個 div 標籤圈定了一個範圍，裏面的文字或其餘標籤都默認在這個範圍裏面顯示
在 div 中書寫的是一串英文字符時，這串英文字符在 div 的邊界處並無換行而是一直顯示下去，這是爲何呢？
- 計算機會把每一個漢字認出來是一個單獨的單詞，每一個漢字都會默認地和其餘漢字分隔開，但英文字母卻不會默認地分隔開，由於計算機不知道多少個英文字母纔算是一個單詞，所以須要手動爲其添加分隔符（即經常使用的空格），在這一串字符中間加幾個空格，則被空格隔開的字符就會被當作是一個單詞從而與其餘的單詞分隔開
空格的做用是當作分隔符來使用，並非那種空白的一個格，怎麼在 HTML 中寫空白格呢？
- 這裏就要提到一個名詞叫作編碼集了，在書寫 HTML 時不少特殊的符號是沒法寫出來的，這時只能用編碼來讓瀏覽器識別所想的符號，編碼的格式是 &編碼;
- 空格的編碼就是  當寫多個 時在頁面中也就能夠看到多個空白格
- 用來當作標籤的尖括號 <> 也是沒法正常經過符號來顯示出來的，一樣須要用編碼集讓瀏覽器識別出來。< 小於號的編碼是<即 less than 的意思；> 大於號的編碼時>即 great than 的意思
- 回車也是屬於分隔符，在 HTML 中回車是沒有做用的，想要在網頁上讓文字顯示出回車換行的效果，須要一個標籤叫作
  標籤，這個標籤的做用就是換行。W3C 標準中提到
  標籤是空標籤，意味着它沒有結束標籤，所以這是錯誤的<br></br>；在 XHTML 中，把結束標籤放在開始標籤中，即<br />

p 標籤（獨佔一行，段落上下都會有必定的間隔距離）、標題標籤 h1-h六、strong 標籤（文字加粗放大且獨佔一行，h4 的默認大小是正常的文字大小，不過是加粗的）、 em標籤（文字變成斜體）、del標籤（文字中間畫一條橫線，通常在打折時使用）、address 標籤（內容變成斜體而且獨佔一行）c++

ol li web

有序列表，ol 是外面的列表框，li 是裏面的子項且每個 li 子項前都會帶有序號
ol 有個屬性叫作 type 屬性，這個屬性的做用是用來設置每一個子項前的顯示內容，默認狀況下按照數字來排序的
- type=」a」，序號是按照小寫字母來排序
- type 設置成 A，按照大寫字母來排序
- 設置成 i，按照 i 的個數來排序（羅馬數字）
- 設置成 I，按照大寫 I 的個數來排序
- 除此以外，設置成其餘的屬性均是錯誤的，而錯誤的狀況下 ol 會按照默認的數字來排序
ol 的第二個屬性 reversed，當給 ol 加上 reversed=」reversed」 時，子項就會變成倒序來排列，這個屬性直接寫 reversed 也是能夠的，不過寫完整纔是規範的寫法
ol 的第三個屬性叫作 start，該屬性的意思是讓子項從第幾個序號開始顯示，當寫 start=」2″ 時，前面的序號就會變成二、三、4 而不是默認的一、二、3，字母也是一樣的道理

ul li編程

無序列表，除了前面的序號都變成了點•以外，其餘的和有序列表基本同樣
ul 一樣有一個 type 屬性，這個屬性值設置的是每個子項前顯示的符號的形式，默認的值是disc圓點
在使用 ul、li 標籤時，通常會先設置 ul 的默認樣式list-style: none
無序列表通常用來當作導航欄之類的、裏面的結構樣式都同樣的部分，像淘寶等網頁的導航欄就是用 ul、li 來寫的

acanvas

其有個必須寫的屬性href（hyperText reference）超文本連接，裏面寫的是地址
a 的英文單詞是 anchor 錨點的意思，所以這個標籤的做用主要有如下幾點
- 定點跳轉指定的 id 的元素位置，這個用法須要在 href 中寫上 id 的值 <a href=」#clickme」></a>，這樣就會跳轉到那個 id 是 clickme 的元素位置
- 超連接，href 中寫一個本地或網上的連接，如 www.baidu.com ，這樣點擊時就會跳轉到這個網頁上去
- 協議限定符，href 中可書寫 JS 代碼，如 href=」javascript:while(1){alert(‘你中毒了’)}」，點擊這個 a 標籤後瀏覽器就會彈出對話框（一般在移動端都用 a 標籤來調用接口，如：href=」phoneto:12234512345″ 調用手機的撥號功能來撥打電話，像美團外賣之類的就是用的這個功能）
a 標籤默認的是藍色的字體且帶有下劃線，在頁面初始化時一般也習慣將 a 標籤的顏色和下劃線的默認屬性都去掉

將圖片做爲連接下載

<a href="../img/footer.png" download="../img/footer.png">下載圖片</a>
複製代碼

img

img 標籤是 image 圖片的意思，有個必備屬性叫 src –->source，該屬性值是圖片的地址，通常來講給 src 填寫兩種值
- 網上的連接
- 本地的連接
本地連接分爲兩種：相對地址 和 絕對地址。而絕對地址一般是不用的，由於當文件上傳到服務器上時，凡是用絕對地址寫的連接通通都會失效的

相對地址中 ../ 是返回當前文件的上一層目錄，./ 是當前文件所在的目錄
img 標籤還有兩個屬性
- alt：該屬性爲圖片設置佔位符，即當圖片因網速或連接錯誤等緣由加載不出來時就會顯示 alt 裏面設置的值
- title：圖片提示符，當鼠標移入圖片時在鼠標旁邊會出現一個黃色小方塊來顯示這個 title 屬性裏面設置的值
srcset / sizes
- 能夠設計響應式圖片，可使用這兩個新屬性來提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個資源
- srcset 定義了容許瀏覽器選擇的圖像集以及每一個圖像的大小
- sizes 定義了一組媒體條件（如屏幕寬度）而且指明當某些媒體條件爲真時，什麼樣的圖片尺寸是最佳選擇
- 有了這些屬性，瀏覽器會
  - 查看設備寬度
  - 檢查 sizes 列表中哪一個媒體條件是第一個爲真
  - 查看給予該媒體查詢的槽大小
  - 加載 srcset 列表中引用的最接近所選的槽大小的圖像
```
<img 
   src="clock-demo-thumb-200.png" 
   alt="Clock"
   srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
   sizes="(min-width: 600px) 200px, 50vw"
>
複製代碼
```

<picture>（追加）

能起到上面 srcset 類似做用
經過包含零或多個 <source> 元素和一個 <img> 元素來爲不一樣的顯示/設備場景提供圖像版本
瀏覽器會選擇最匹配的子 <source> 元素，若沒有匹配的就選擇 <img> 元素的 src 屬性中的 URL，而後所選圖像呈如今 <img> 元素佔據的空間中
picture 一樣能夠經過不一樣設備來匹配不一樣的圖像資源

<picture>
  <source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)" > <img src="/media/examples/painted-hand-298-332.jpg" /> </picture>
複製代碼

表單 form

這個元素可實現前端和後臺的數據交互，經過 form 表單向後臺發送數據，數據都是由兩部分組成的：數據名 + 數據內容
- 數據名就是須要在 input 標籤裏面寫一個 name 屬性來告訴瀏覽器這個數據的名字是什麼
- 數據內容就是給 input 標籤設置的 value 屬性的值
屬性
- action：填寫服務器地址，這個屬性的意思是把數據傳遞到那個服務器
- method：傳輸方法，經過什麼方式來傳輸數據，通常填寫的都是 POST/GET 這兩種中的一個，雖然有其餘的方式可是用的不多
表單擁有的子元素
- input 這個標籤是一個單標籤，不須要閉合，有個 type 屬性，該屬性值決定了 input 標籤的類型是什麼
  - type="text"，該 input 標籤就是一個輸入框，能夠在裏面輸入文字信息
  - type="password"，該 input 標籤就是一個密碼框，在裏面輸入的文字信息會以隱藏形式展示
  - type="submit"，該 input 標籤是個提交按鈕，點擊該提交按鈕會把整個表單數據發送到後臺服務器
  - type="radio"，單選框，當給一個 input 設置 radio 的 type 後，它就會變成一個圓點，可點擊選擇這個圓點。但寫不少單選框時它們彷佛均可被選中並無單選的做用，這是由於尚未爲這一組單選框設置名字，當給幾個 radio 都設置了同一個 name 時，它們就會變得只能選擇一個單選框了
  - type="checkbox"：複選框，當 input 的 type 值設置成這個以後，和 radio 同樣的道理，設置複選框的名字，能夠同時選擇不少的選項
- input 的 readonly 與 disabled 屬性
  - disabled 指當 input 元素加載時禁用此元素，input 內容不會隨着表單提交
  - readonly 規定輸入字段爲只讀，input 內容會隨着表單提交
  - 不管設置 readonly 仍是 disabled，經過 js 腳本都能更改 input 的 value
- checked="checked"，在哪一個 input 標籤裏面設置了這個屬性，哪一個選項就是默認被選擇的狀態
- select 下拉列表的標籤
  - 下拉列表的 name 屬性是寫在 select 標籤上的，裏面 option 中間填寫的內容就是默認的數據值
  - 若給每一個 option 都加一個 value 屬性，那 option 中間的文字則不做爲傳遞的數據的值，以 value 的值做爲傳遞的數據的值
  - 同時下拉列表的默認選中的是第一個選項，若要改變默認選項的話，要添加的屬性是 selected="selected"
```
<select>
  <option>山東</option>
  <option>黑龍江</option>
  <option>北京</option>
</select>
複製代碼
```

iframe

HTML內聯框架元素，表示嵌套的 browsing context（瀏覽器上下文），它可以將另外一個 HTML 頁面嵌入到當前頁面中
注意：頁面上的每一個 <iframe> 都須要增長內存和其它計算資源，這是由於每一個瀏覽上下文都擁有完整的文檔環境，雖然理論上來講你可以在代碼中寫出來無限多的 iframe，可是最好仍是先看看這麼作會不會致使某些性能問題
缺點
- iframe 會阻塞主頁面的 Onload 事件
- 搜索引擎的檢索程序沒法解讀這種頁面，不利於 SEO
- iframe 和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載
  
  使用 iframe 以前須要考慮這兩個缺點，若須要使用 iframe，最好是經過 javascript 動態給 iframe 添加 src 屬性值，這樣能夠繞開以上兩個問題
- 產生多個頁面，不易管理
- 頁面樣式調試麻煩，出現多個滾動條
- 瀏覽器的後退按鈕失效
- 多會增長服務器的 HTTP 請求
- 小型的移動設備沒法徹底顯示框架
- 不易打印
iframe

label

label 標籤的做用主要是用來綁定的，它裏面有一個 for 屬性
經過 for 屬性，寫上要綁定的標籤 id，就可把該 label 標籤綁定到相對應的標籤上
若在 js 代碼中要表示 label 標籤的 for 屬性，不能直接寫for，要寫 htmlFor
以下，點擊 username 這個 label 標籤也可觸發 input 的聚焦事件，就好像這兩個是一個東西同樣，能夠提升用戶體驗
```
<label for="demo">username</lable>
<input type="text" id="demo" />
複製代碼
```

script

詳見 script 標籤 defer 與 async

標籤的分類

行級/內聯/行內元素 display: inline，這一類元素的特色是
- 不沾滿整行，元素所佔空間徹底由內容所控制
- 不能夠改變寬高
- 標籤表明有：a em br select span strong
塊級元素 display: block，這一類元素的特色是
- 佔滿整行，不管內容多仍是少
- 能夠改變寬高
- 標籤表明有：address div form h1-h6 p ul ol li table
其實還有第三種標籤，這類標籤既不屬於行級元素也不屬於塊級元素，它們既不獨佔一行，又能夠隨意改變寬高，好比 <img> <input> 標籤

src 和 href 的區別

src 是指向外部資源的位置，指向的內容會嵌入到文檔中當前標籤所在的位置，在請求 src 資源時會將其指向的資源下載並應用到文檔內，如 js 腳本，img 圖片和 frame 等元素。當瀏覽器解析到該元素時會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，因此通常 js 腳本會放在底部而不是頭部
href 是指向網絡資源所在位置(的超連接)，用來創建和當前元素或文檔之間的鏈接，當瀏覽器識別到它指向的文件時就會並行下載資源，不會中止對當前文檔的處理

HTML 語義化

HTML5 的核心思想就是語義，因此無論是什麼標籤就看錶達的意思而不是看展示效果
語義化是指根據內容結構化（內容語義化）來選擇合適的標籤（代碼語義化），讓⻚面具備良好的結構與含義，好比 <p> 標籤就表明段落， <article> 表明正文內容等
語義化的優勢
- 加強了可讀性，方便團隊開發和維護，與 CSS3 的關係更和諧
- 有利於 SEO，改進搜索引擎的優化
- 在沒有 CSS 的狀況下，頁面也能呈現出很好的內容結構、代碼結構
- 通常來講可讓 HTML 文件更小
- 很好的支持屏幕閱讀軟件，（盲人）會根據結構來讀頁面
這對於簡書、知乎這種富文本類的應用很重要，語義化對於其網站的內容傳播有很大的幫助，可是對於功能性的 web 軟件重要性大打折扣，如一個按鈕、Skeleton 這種組件根本沒有對應的語義，也不須要什麼 SEO
讓 IE8 支持 HTML5
- HTML5 是 HTML 最新的修訂版本，於2014年10月由萬維網聯盟（W3C）完成標準制定，而 IE8 面世時間爲2009年3月19日，時間相差如此之大，因此 IE8 做爲較古老的瀏覽器不支持 HTML 5 引入的語義化標籤，如 header、nav、menu、section、article 等
- 雖然默認不支持，但可經過 JS 使用 document.createElement 來「欺騙」 IE 的 CSS 引擎，讓它知道某個標籤的存在，既然元素默認都不支持，就更沒有相關默認的樣式了，因此還要加上一些重置樣式
```
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
複製代碼
```
- 藉助 html5shiv.js 讓 IE8 支持更多的 HTML5 特性不僅是 IE八、IE6-九、Safari 4.x（以及 Iphone3.x）、FireFox3.x 等對 HTML5 的支持都不完善，所以有個庫 html5shiv.js 來統一處理（shiv 其實是個拼寫錯誤，應該爲 shim，在機械工程的專業釋義中爲墊片，好比給那些老舊的瀏覽器加個墊片，讓它們基本能用）
```

複製代碼
```

HTML、XHTML、XML

HTML(超文本標記語言)，在 html4.0 以前 HTML 先有實現再有標準，致使 HTML 很是混亂和鬆散
XML(可擴展標記語言)，主要用於存儲數據和結構且可擴展，JSON 也是類似的做用，可是更加輕量和高效，因此 XML 如今市場愈來愈小了
XHTML(可擴展超文本標記語言)，基於上面二者而來，W3C 爲了解決 HTML 混亂問題而生，並基於此誕生了 HTML5，開頭加入就是標準模式，不加就是兼容混亂的 HTML

XHTML 元素必須合理嵌套、元素必需要有一個相應的結束標記、全部標籤的元素和屬性的名字都必須使用小寫、必須有根元素、全部的屬性必須用引號""括起來、把全部 < 和 & 特殊符號用編碼表示、給全部屬性賦一個值、不要在註釋內容中使「--」、圖片必須有說明文字等

Doctype

DOCTYPE 是 HTML5 標準網⻚聲明，必須聲明在 HTML 文檔的第一行，用來告知瀏覽器的解析器用什麼文檔標準解析這個文檔，不一樣的渲染模式會影響到瀏覽器對於 CSS 代碼甚至 JavaScript 腳本的解析
文檔解析模式有
- 標準模式（CSS1Compat）：瀏覽器使用 W3C 的標準解析渲染⻚面，排版和JS運做模式都是以該瀏覽器支持的最高標準運行
- 怪異模式（BackCompat）：使用瀏覽器本身的方式來解析執行代碼，由於不一樣瀏覽器解析執行的方式不同（若沒有聲明 DOCTYPE，默認就是這個模式）
- IE8還有一種介乎於上述二者之間的近乎標準的模式，此模式下會實施一種表單元格尺寸的怪異行爲(與 IE7 以前的單元格佈局方式一致)，除此以外符合標準定義，基本淘汰了
瀏覽器解析時到底使用標準模式仍是怪異模式，與網頁中的 DTD 聲明直接相關， DTD 聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略 DTD 聲明或在 DOCTYPE 前加入 XML 聲明，將使網頁進入怪異模式

DOCTYPE 三種標準模式寫法

當仍是 HTML 時通常用第三種，但如今通常直接用第一種寫法（第一種是HTML5 規範的標準寫法）

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
複製代碼

HTML5 爲何只須要寫 <!DOCTYPE html> ？
- HTML5 不基於SGML，所以不須要對 DTD 進行引用，可是須要 doctype 來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）
- 而HTML 4.01 基於 SGML，因此須要對 DTD 進行引用才能告知瀏覽器文檔所使用的文檔類型
SGML，標準通用標記語言（Standard Generalized Markup Language），是現時經常使用的超文本格式的最高層次標準，是能夠定義標記語言的元語言，甚至能夠定義沒必要採用< >的常規方式。但因爲它的複雜及很是強大的適應性於是難以普及。HTML 和 XML 一樣派生於它：XML 能夠被認爲是它的一個子集，而 HTML 是它的一個應用 --- 維基百科

HTML 5

爲 HTML5 創建的一些規則

新特性應該基於 HTML、CSS、DOM 以及 JavaScript
減小對外部插件的需求，好比 Flash
更優秀的錯誤處理（優化錯誤處理的功能點）
更多取代腳本的標記
HTML5 應該獨立於設備
開發進程應對公衆透明

HTML5 新特性

用於繪畫的 canvas 元素 svg
用於媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持: localStorage、sessionStorage
新的特殊內容元素，好比 article、footer、header、nav、section 等
新的表單控件，好比 calendar、date、time、email、url、search
input type= text button file radio checkbox
新的技術 webworker、websocket、Geolocation

HTML5 新增標籤

Header
Footer
Article -> div
Section -> p
Nav
Aside
Svg
Canvas
Audio
Video
自定義標籤: 行級元素

HTML5 新增屬性

Contenteditable：用戶可否修改頁面上的內容
Draggable：支持拖放
Hidden：隱藏
Contextmenu：爲元素設定快捷菜單
data-*：自定義屬性
- HTML 的數據屬性，用於將數據儲存於標準的 HTML 元素中做爲額外信息，能夠經過 js 訪問並操做它來達到操做數據的目的，這些屬性集可經過對象的 dataset 屬性獲取，不支持該屬性的瀏覽器可經過 getAttribute 方法獲取
- 注：data- 以後的以連字符分割的多個單詞組成的屬性，獲取時使用駝峯風格，全部主流瀏覽器都支持 data-* 屬性

如何區分 HTML 和 HTML5？　　

DOCTYPE 聲明、新增的結構元素、功能元素等

HTML5 的離線存儲

在用戶沒有與因特網鏈接時能夠正常訪問站點或應用，在用戶與因特網鏈接時更新用戶機器上的緩存文件
原理：HTML5 的離線存儲是基於一個新建的 .appcache 文件的緩存機制(不是存儲技術)，經過該文件上的解析清單離線存儲資源，這些資源就會像 cookie 同樣被存儲了下來，以後當網絡在處於離線狀態下時瀏覽器會經過被離線存儲的數據進行頁面展現

如何使用

HTML 頭部加入一個 manifest 的屬性

<html manifest="example.appcache"> 
  ...
</html>
複製代碼

在 example.manifest 文件的編寫離線存儲的資源

CACHE MANIFEST
# v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ offline.html
複製代碼

在離線狀態時操做 window.applicationCache 進行需求實現

瀏覽器對 HTML5 的離線存儲資源進行管理和加載
- 在線的狀況下，瀏覽器發現 HTML 頭部有 manifest 屬性就會請求 manifest 文件
- 如果第一次訪問 APP 那麼瀏覽器就會根據 manifest 文件的內容下載相應的資源且進行離線存儲
- 已經訪問過 APP 且資源已經離線存儲了，則瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，若文件沒有發生改變則不作任何操做，若文件改變了則會從新下載文件中的資源並進行離線存儲
- 離線的狀況下，覽器就直接使用離線存儲的資源

使用應用緩存

HTML5 的優勢與缺點

優勢
- 網絡標準統一，HTML5 自己是由 W3C 推薦出來的
- 多設備、跨平臺
- 即時更新
- 提升可用性和改進用戶的友好體驗
- 有幾個新的標籤，這將有助於開發人員定義重要的內容
- 能夠給站點帶來更多的多媒體元素(視頻和音頻) ......
缺點
- 安全：像以前 Firefox4 的 websocket 和透明代理的實現存在嚴重的安全問題，同時 webstorage、websocket 這樣的功能很容易被黑客利用來盜取用戶的信息和資料
- 完善性：許多特性各瀏覽器的支持程度不同
- 技術門檻：HTML5 簡化開發者工做的同時表明了有許多新的屬性和 API 須要開發者學習，像 webworker、websocket、webstorage 等新特性，後臺甚至瀏覽器原理的知識
- 性能：某些平臺上的引擎問題致使 HTML5 性能低下
- 瀏覽器兼容性：最大缺點，IE9 如下瀏覽器幾乎全軍覆沒

優雅降級、漸進加強

優雅降級：Web 站點在全部新式瀏覽器中都能正常工做，若用戶使用的是老式瀏覽器則代碼會檢查以確認它們是否能正常工做。因爲 IE 獨特的盒模型佈局問題，針對不一樣版本的 IE 的 hack 實踐過優雅降級，爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效
漸進加強：從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面增長無害於基礎瀏覽器的額外樣式和功能。當瀏覽器支持時它們會自動地呈現出來併發揮做用

對 WEB 標準及 W3C 的理解與認識

標籤閉合
標籤小寫
不亂嵌套
提升搜索機器人搜索機率、
使用外鏈 css 和 js 腳本
結構、行爲、表現分離
文件下載與頁面速度更快
內容能被更多的用戶所訪問
內容能被普遍的設備所訪問
更少的代碼和組件
容易維護、改版方便，不須要變更頁面內容
提供打印版本而不須要複製內容
提升網站易用性 ......

【學習筆記】HTML 基礎

初識HTML

HTML 概念

常見標籤

標籤的分類

src 和 href 的區別

HTML 語義化

HTML、XHTML、XML

Doctype

HTML 5

爲 HTML5 創建的一些規則

HTML5 新特性

HTML5 新增標籤

HTML5 新增屬性

如何區分 HTML 和 HTML5？

HTML5 的離線存儲

HTML5 的優勢與缺點

優雅降級、漸進加強

對 WEB 標準及 W3C 的理解與認識

如何區分 HTML 和 HTML5？　　