一個html頁，其文字包含三個方面的資訊，邏輯，內容，樣式。其中邏輯部分決定頁面和使用者互動的行為，樣式部分決定使用者介面的視覺表現，內容部分是結構化的文字資訊。對於一個以內容為主的頁面（區別於富互動應用/webapp）來說，在表現內容的html中，插入表現邏輯的js，顯然不是最合理的做法，因為html的語義是進行文字內容和結構定義，這個層面的定義是和邏輯與視覺都無關的。完全可以以更小的耦合進行分解。

   HTML/CSS/JAVASCRIPT的分離。
網頁的佈局方式：標準流(文件流/普通流)排版方式；浮動流排版方式；定位流排版方式；

佈局：靜態佈局；彈性佈局；自適應佈局；流式佈局；響應式佈局。

WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通訊(full-duplex)。

前端經典總結（一）- https://blog.csdn.net/wangyongjie2017/article/details/75733277

前端，web標準- http://www.divcss5.com/w3c/

移動端佈局自適應的方法：flexible毫無疑問在移動端自適應上還是很方便的.

> 記事本編寫Html的同鞋一定要注意
採用CSS定位屬性實現Html中DIV層疊與懸浮- https://www.jb51.net/css/167026.html
 <meta charste="utf-8"> 只是告訴瀏覽器要用utf-8來解釋，而文件的編碼，是在你儲存時的選擇決定的。如果儲存ANSI
然後用utf-8解釋，肯定是亂碼。記事本的話，預設儲存的檔案格式是ANSI。所以在儲存的時候要修改為uif-8。

> CSS/H5適配手機螢幕

請求頭<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

iPhone X 適配手Q H5 頁面通用解決方案- http://geek.csdn.net/news/detail/245119
開發適配手機螢幕的網頁注意問題--http://blog.csdn.net/t000818/article/details/17007289
CSS3自適配手機螢幕[轉]- http://www.cnblogs.com/tfanalysis/p/3713488.html
web page適配手機螢幕，web頁面改適應手機-http://www.2cto.com/kf/201312/267283.html
開發的Webapp如何能夠自適應手機螢幕的大小？-https://segmentfault.com/q/1010000003939855?_ea=431495
手機web自適應網頁設計（html/css控制）-- http://mobile.51cto.com/ahot-409516.htm
解惑好文：移動端H5頁面高清多屏適配方案-http://mdsa.51cto.com/art/201507/484215.htm
解惑好文：移動端H5頁面高清多屏適配方案（2）-http://www.cnblogs.com/chenlf/p/5607453.html
【移動適配】移動Web怎麼做螢幕適配（一）-- http://www.cnblogs.com/giveiris/p/5233585.html

1.使用Flexible實現手淘H5頁面的終端適配（https://github.com/amfe/article/issues/17）
2.移動端高清、多屏適配方案（http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041）
3.A tale of two viewports（http://www.quirksmode.org/mobile/viewports.html）

> h5 UI佈局，UI效果
web前端開發之幾種佈局方式之響應式佈局- http://blog.csdn.net/gertyy/article/details/52764527
頁面佈局 - Layout- http://www.jianshu.com/p/903392e6ad50#
移動h5自適應佈局- http://www.cnblogs.com/samwu/p/4285748.html
html5和css3專案案例- www.qietu.com
HTML5知識庫：http://lib.csdn.net/base/html5  http://geek.csdn.net/news/detail/91536

html5下拉重新整理和上拉載入更多- http://download.csdn.net/download/xiaoyu411502/8869533
H5列表- http://blog.csdn.net/fungleo/article/details/50905612

html5獲取新聞列表檢視詳細內容- http://blog.csdn.net/qq_15950325/article/details/51512635

H5網頁圖片的動畫效果- http://www.cnblogs.com/jone-chen/p/5333437.html
H5動態新增資料- http://www.cnblogs.com/laonniudajiangtang/p/5842857.html
mui H5 js動態新增不同型別的資料- http://www.cnblogs.com/lemon863376328/p/5120691.html
H5單頁面手勢滑屏切換原理- http://www.cnblogs.com/onepixel/p/5300445.html
https://github.com/git-onepixel/guesture
9款驚豔的HTML5/CSS3動畫應用賞析- http://geek.csdn.net/news/detail/238820
讓你大開眼界的9款HTML5動畫特效- http://geek.csdn.net/news/detail/237245
 

7款精巧實用的HTML5/CSS3應用- http://geek.csdn.net/news/detail/237968

H5專案常見問題及注意事項- http://blog.csdn.net/u012377333/article/details/52326158
H5研究三：圖文混排的實現- http://blog.csdn.net/xoxo_x/article/details/74020242

> H5離線快取
-- H5 快取機制淺析 移動端 Web 載入效能優化- http://www.cocoachina.com/webapp/20151217/14718.html
  - H5 應用程式快取為應用帶來三個優勢：
離線瀏覽 使用者可在應用離線時使用它們
速度 已快取資源載入得更快
減少伺服器負載 瀏覽器將只從伺服器下載更新過或更改過的資源。

  - H5 一共有6種快取機制，有些是之前已有，有些是 H5 才新加入的:
瀏覽器快取機制
Dom Storgage（Web Storage）儲存機制
Web SQL Database 儲存機制
Application Cache（AppCache）機制
Indexed Database （IndexedDB）
File System API

-- 瀏覽器快取機制是指通過 HTTP 協議頭裡的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等欄位來控制檔案快取的機制。
  另外有兩種特殊的情況：
  手動重新整理頁面（F5)，瀏覽器會直接認為快取已經過期（可能快取還沒有過期），在請求中加上欄位：Cache-Control:max-age=0，發包向伺服器查詢是否有檔案是否有更新。
  強制重新整理頁面（Ctrl+F5)，瀏覽器會直接忽略本地的快取（有快取也會認為本地沒有快取），在請求中加上欄位：Cache-Control:no-cache（或 Pragma:no-cache），發包向服務重新拉取檔案。

  完美的快取機制應該是這樣的：
快取檔案沒更新，儘可能使用快取，不用和伺服器互動；
快取檔案有更新時，第一時間能使用到新的檔案；
快取的檔案要保持完整性，不使用被修改過的快取檔案；
快取的容量大小要能設定或控制，快取檔案不能因為儲存空間限制或過期被清除。
以X5為例，第1、2條不能同時滿足，第3、4條都不能滿足。

在實際應用中，為了解決 Cache-Control 快取時長不好設定的問題，以及為了”消滅304“，Web前端採用的方式是：
  在要快取的資原始檔名中加上版本號或檔案 MD5值字串，如 common.d5d02a02.js，common.v1.js，同時設定 Cache-Control:max-age=31536000，也就是一年。在一年時間內，資原始檔如果本地有快取，就會使用快取；也就不會有304的回包。

  如果資原始檔有修改，則更新檔案內容，同時修改資原始檔名，如 common.v2.js，html頁面也會引用新的資原始檔名。

-- H5快取及H5如何寫檔案，然後跨原生App也能讀取？？
HTML5之本地檔案系統API - File System API- http://blog.csdn.net/salonzhou/article/details/28275713
使用HTML5 FileSystem API設計離線檔案儲存- http://www.cnblogs.com/mnight/archive/2013/04/24/3040641.html  http://www.cnblogs.com/wzh2010/archive/2012/05/23/2514809.html

> H5事件衝突
touch事件的來源:
  PC網頁上的大部分操作都是用滑鼠的，即響應的是滑鼠事件，包括mousedown、mouseup、mousemove和click事件。一次點選行為，可被拆解成：mousedown -> click -> mouseup三步。
  手機上沒有滑鼠，所以就用觸控事件去實現類似的功能。touch事件包含touchstart、touchmove、touchend，注意手機上並沒有tap事件。手指觸發觸控事件的過程為：touchstart -> touchmove -> touchend。
  手機上沒有滑鼠，但不代表手機不能響應mouse事件（其實是藉助touch去觸發mouse事件）。有人在PC和手機上對事件做了對比實驗，以說明手機對touch事件相應速度快於mouse事件。
  移動端h5頁面touch事件與點選穿透問題:而由於click事件的滯後性（300ms），在這300ms內上層元素隱藏或消失了，下層同樣位置的DOM元素觸發了click事件（如果是input框則會觸發focus事件），看起來就像點選的target“穿透”到下層去了。

  移動H5開發中經常用到滑動效果（頁面上移、下移、向左滑動、向右滑動等），瀏覽器並沒有內建swipe事件，可以通過touch事件（touchstart、touchmove和touchend）模擬swipe效果。jquery mobile和zeptojs提供了swipe事件。jquery mobile只有swipeLeft和swipeRight，zeptojs提供了完整的tap和swipe事件。

> H5模板
H5 meta viewport 你真的瞭解嗎？- http://yunkus.com/meta-viewport-usage/
只有20行Javascript程式碼！手把手教你寫一個頁面模板引擎- http://blog.jobbole.com/56689/
一些網站後臺模板原始碼分析- http://blog.csdn.net/bcbobo21cn/article/details/51271750
50餘款手機 h5頁面模版原始碼- http://download.csdn.net/detail/u011677560/9430850
HTML5頁面強力推薦 幾十套H5手機頁面模板原始碼- http://download.csdn.net/detail/jiangchunhui2009/9573205
移動端H5開發 Turn.js實現很棒的翻書效果 Turn.js的官方網址: http://www.turnjs.com/
HTML5 有哪些讓你驚豔的 demo？- https://www.zhihu.com/question/24398907
基於html5+css3實現的精美聊天介面demo- http://download.csdn.net/detail/lupangdelu/8936779#comment
網頁模板- http://www.ymjihe.com/html
一款簡潔的html5個人部落格模板- http://www.duanliang920.com/muban/blog/264.html
個人部落格模板原始碼- http://www.yangqq.com/download/div/

-- h5離線快取和本地儲存
HTML5操作本地檔案- http://hwaphon.site/?p=396
H5 快取機制淺析 移動端 Web 載入效能優化- http://www.cocoachina.com/webapp/20151217/14718.html
HTML 5 Web 儲存 與 應用快取- http://blog.csdn.net/bamboolsu/article/details/49885955
利用H5本地儲存localStorage、sessionStorage- http://www.cnblogs.com/firstForEver/p/5301830.html
Web移動端使用localStorage快取Js和css檔案- http://blog.csdn.net/a497785609/article/details/48321405

-- H5的6種快取機制：
1.瀏覽器快取機制
2.Dom Storgage（Web Storage）儲存機制
3.Web SQL Database 儲存機制
4.Application Cache（AppCache）機制
5.Indexed Database （IndexedDB）
6.File System API

-- 另外有兩種特殊的情況：
 1.手動重新整理頁面（F5)，瀏覽器會直接認為快取已經過期（可能快取還沒有過期），在請求中加上欄位：Cache-Control:max-age=0，發包向伺服器查詢是否有檔案是否有更新。
 2.強制重新整理頁面（Ctrl+F5)，瀏覽器會直接忽略本地的快取（有快取也會認為本地沒有快取），在請求中加上欄位：Cache-Control:no-cache（或 Pragma:no-cache），發包向服務重新拉取檔案。

瀏覽器的快取機制還不是非常完美的快取機制。完美的快取機制應該是這樣的：
 1.快取檔案沒更新，儘可能使用快取，不用和伺服器互動；
 2.快取檔案有更新時，第一時間能使用到新的檔案；
 3.快取的檔案要保持完整性，不使用被修改過的快取檔案；
 4.快取的容量大小要能設定或控制，快取檔案不能因為儲存空間限制或過期被清除。

  DOM Storage 分為 sessionStorage 和 localStorage。localStorage 物件和 sessionStorage 物件使用方法基本相同，它們的區別在於作用的範圍不同。sessionStorage 用來儲存與頁面相關的資料，它在頁面關閉後無法使用。而 localStorage 則持久存在，在頁面關閉後也可以使用。
  AppCache 的原理有兩個關鍵點：manifest 屬性和 manifest 檔案。

-- WebView load js
Android WebView載入本地html並實現Java與JS互動- http://www.cnblogs.com/Joanna-Yan/p/4826990.html
webview javascript 注入方法- http://www.cnblogs.com/rayray/p/3680500.html

> H5,H5 SVG繪製線條與三角形？
1500套HTML5模版分享- http://blog.csdn.net/banketree/article/details/52766933
HTML5 UTF-8 中文亂碼的解決方法- http://www.jb51.net/html5/117758.html
html5（ H5學習之旅）- http://blog.csdn.net/u010321471/article/category/5818661
html引入css檔案和js檔案方式- http://blog.csdn.net/wozaifeiyang0/article/details/6888371
 最近測試html5頁面，發現預設都允許使用者縮放頁面，或者在螢幕雙擊放大或縮小。即相當於這樣設定 
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" /> 
如果要禁止此情形，修改相應引數即可。 
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

在html中include一個檔案內容的幾種方法- http://blog.csdn.net/vebasan/article/details/5207893
jquery滑鼠放上去顯示懸浮層即彈出定位的div層- http://www.jb51.net/article/49386.htm
滑鼠懸停控制下拉框的顯示和隱藏- http://blog.csdn.net/phantom521/article/details/41120985
  a標籤的屬性，選擇未訪問、已訪問、懸浮和活動連結，並設定它們的樣式：
a:link    {color:blue;}
a:visited {color:blue;}
a:hover   {color:red;}
a:active  {color:yellow;}
-- H5頁面的引用路徑配置：
絕對路徑： /專案名/fun_css/dropload.css
相對路徑： ../fun_css/dropload.css

HTML中使用cookie儲存登入賬戶- http://blog.csdn.net/su20145104009/article/details/52735292
html 頁面之間跳轉和傳值- http://blog.csdn.net/caofeilong20941/article/details/9030521
關於多個html標籤單擊事件的實現細節- http://blog.csdn.net/zbw18297786698/article/details/51303723
JS控制HTML元素的顯示和隱藏- http://www.cnblogs.com/unpolishedgem/p/3247098.html

> WebView中設定引數
// 修改UserAgent使得web端正確判斷
String ua = webview.getSettings().getUserAgentString();
webview.getSettings().setUserAgentString(ua+"; HFWSH /"+appversion);
// 修改ua使得web端正確判斷
String ua = webView.getSettings().getUserAgentString();
webView.getSettings().setUserAgentString(ua.replace("Android", "HFWSH_USER Android"));
WebSettings webSettings = webView.getSettings();
webSettings.setAppCacheEnabled(true);
webSettings.setBlockNetworkImage(false);
webSettings.setAllowFileAccess(true); // 設定允許訪問檔案資料
webSettings.setLoadsImagesAutomatically(true);
webSettings.setDefaultTextEncodingName("utf-8"); // 設定編碼
webSettings.setDatabaseEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setJavaScriptEnabled(true); // 支援js互調
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); // 允許js彈出視窗
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDomStorageEnabled(true);
//設定域名
webView.getSettings().setUserAgentString("domain");