❶ web前端開發h5有沒有好的書籍推薦在線等
HTML、CSS、HTML5、CSS3 ——> 《HTML5布局之路》
JS AJAX ——>Head Firt系列（入門比較好）
❷ 前端開發工程師必讀書籍有哪些值得推薦
1、HTML/HTML5基礎：
1.0、語義化H5標簽
1.1、H5引進了一些新的標簽，特別注意article、header、footer、aside、nav等，注意HTML的標題結構
1.2、理解瀏覽器解析HTML的過程，理解DOM的樹形結構，及相應API
1.3、理解HTML標簽在各個瀏覽器上的默認樣式（代理樣式），理解CSS中的重置樣式表的概念
1.4、理解Canvas、SVG、video等功能性標簽
1.5、理解form、iframe標簽，理解文件提交過程
推薦書籍：
A、《HTML5秘籍》
2、高健壯性CSS
2.1、學習基礎知識，包括大部分常用屬性、選擇器的用法，要對大多數標簽有個基礎概念,在日常使用的基礎上，嘗試學習瀏覽器兼容性問題，要知道兼容性的主要問題及解決方法
2.2、深入理解盒子模型，區分塊級元素、行內元素，有幾個比較重要的屬性：display、float、position，一定要弄清楚區分盒子、行內盒子的概念另外可以考慮學一些預編譯語言：sass、less，都很簡單
2.3、學習常用框架，可以使用bootstrap構建項目
2.4、學習框架的代碼組織方式包括：12格柵系統、組件化、組件的風格化等
2.5、學習CSS 3的新功能，特別是動畫效果、選擇器
2.6、認真學習一些CSS對象化思想，學習編寫簡潔性、高復用性、高健壯性的CSS
2.7、有空的話，可以看看所謂的扁平化設計，還有簡潔性
2.8、理解CSSOM、render、reflow、CSS性能、CSS阻塞概念
學習方法：
1、多看別人的代碼，一些設計的不錯的網站就是很好的學習素材，比如拉勾網
2、一定要學會使用grunt、gulp壓縮CSS
3、display + position + float 可以組合出很復雜的效果，多想想盒子模型
4、嘗試在不用float，且position不為absolute的情況下實現等高、等寬等布局
推薦書籍：
1、《圖靈程序設計叢書:HTML5與CSS3設計模式》
2、《Web開發技術叢書:深入理解Bootstrap》
3、《高流量網站CSS開發技術》
4、《CSS設計徹底研究》 這個一定要
5、《Web開發技術叢書:深入理解Bootstrap》
6、可以找一些專門講SASS的書，但是我沒找到
7、《CSS權威指南(第3版)》
3、深入學習JS
3.1、重新學習JS語法，注意：表達式（特別是函數訪問表達式）、語句、類型（包括類型判斷)注意，這個時候主要傾向於「原生」JS哦，不要使用框架
3.2、深入理解JS的「一級函數」、對象、類的概念,學會使用函數來構造類、閉包，學會用面向對象的方式組織代碼
3.3、深入理解JS的作用域、作用域鏈、this對象（在各種調用形式中，this的指向）理解函數的各種調用方法（call、apply、bind等）
3.4、理解對象、數組的概念
理解對象的「[]」調用，理解對象是一種「特殊數組」
理解for語句的用法
深入理解JS中原始值、包裝對象的概念（重要）
3.5、學習一些常用框架的使用方法，包括：JQUERY、underscore、EXTJS，加分點有：backbone、angularjs、ejs、jade
通過比較多個框架的使用方法，想清楚「JS語言極其靈活」這一事實
總結常見用法，提高學習速度
學習模塊化開發（使用require.js、sea.js等）
3.6、適當看一些著名框架的源碼，比如jQuery（不建議看angularjs，太復雜了）
重要的是學習框架中代碼的組織形式，即設計模式
3.7、了解JS解釋、運行過程，理解JS的單線程概念
深入理解JS事件、非同步、阻塞概念
3.8、理解瀏覽器組成部件，理解V8的概念
學習V8的解釋-運行過程
在V8基礎上，學會如何提高JS性能
學會使用chrome的profile進行內存泄露分析
學習方法：
1、提高對自己的要求，要有代碼潔癖
2、適當的時候看看優秀框架的源碼，特別是框架的架構模式、設計模式
3、多學學設計模式
4、學習原生JS、DOM、BOM、Ajax
推薦書籍：
1、《O』Reilly精品圖書系列:JavaScript權威指南(第6版)》 必看
2、《JavaScript設計模式》
3、《WebKit技術內幕》
4、《JavaScript框架高級編程:應用Prototype YUI Ext JS Dojo MooTools》
5、《用AngularJS開發下一代Web應用》
6、跨終端
6.1、理解混合APP的概念
6.2、理解網頁在各類終端上的表現
6.3、理解網頁與原生app的區同，重在約束
6.4、理解單頁網站，特別要規避頁面的內存泄露問題
6.5、入門nodejs，對其有個基礎概念，知道它能做什麼，缺點是什麼
推薦書籍：
1、《單頁Web應用:JavaScript從前端到後端 》
2、《Web 2.0界面設計模式》
3、《響應式Web設計:HTML5和CSS3實戰》
5、工具
學會使用grunt進行JS、CSS、HTML 壓縮，特別是模塊化js開發時候的壓縮
會用PS進行切圖、保存icon
入手sublime、webstorm
學會使用chrome調試面板，特別是：console、network、profile、element
進階：
4、性能
1.1、理解資源載入的過程
包括：TCP握手連接、HTTP請求報文、HTTP回復報文
1.2、理解資源載入的性能約束，包括：TCP連接限制、TCP慢啟動
1.3、理解CSS文件、JS文件壓縮，理解不同文件放在頁面不同位置後對性能的影響
1.4、理解CDN加速
1.5、學會使用HTTP頭控制資源緩存，理解cache-control、expire、max-age、ETag對緩存的影響
1.6、深入理解瀏覽器的render過程
推薦書籍：
1、《Web性能權威指南》
2、雅虎網站頁面性能優化的34條黃金守則
5、HTTP及TCP協議族
2.1、學習http協議，理解http請求-響應模式
2.2、理解http是應用層協議，它是構建在TCP/IP協議上的
2.3、理解http報文（請求-響應報文）
2.4、理解http代理、緩存、網關等概念，指定如何控制緩存
2.5、理解http協議內容，包括：狀態碼、http頭、長連接（http1.1）
2.6、學習http伺服器的工作模型，對靜態文件、CGI、DHTML的處理流程有個大致概念
推薦書籍：
1、《HTTP權威指南》
2、《TCP/IP詳解》
3、《圖解TCP/IP(第5版)》
更多前端書籍推薦：
《JavaScript半知半解》 《Web開發實戰》
推銷自己的前端技術書籍-博客-雲棲社區-阿里雲
今天主要自我推銷兩本前端技術書籍！
《JavaScript半知半解》
《Web開發實戰》
一、《JavaScript半知半解》
為什麼寫這本書？
因為之前作者在博客上洋洋灑灑地將之前學習JavaScript的筆記整理了出來，一共17篇，感覺查找和翻閱還是不方便，所以產生了編輯成電子書的念頭，一來方便作者個人查找，二來方便後續內容的補充，三來也方便喜歡JavaScript的夥伴們閱讀。
書籍閱讀地址：《JavaScript半知半解》
大綱
二、《Web開發實戰》
書籍閱讀地址：《Web開發實戰》
為什麼寫這本書？
網上的插件雖多，但大多數並沒有深究到原理，故而產生了寫一本前端實例的書籍。主要是為了想深入學習的夥伴們，書上的內容也許不是最優秀的，但會一步步講解，會告訴你每一步的原理，讓你學習後也可以自己造輪子！
大綱
《Web開發實戰》集合了大量的前端開發案例，目前主要選擇日常開發中會用到的加入本書，分為四部分：CSS實戰篇、JavaScript實戰篇、Canvas實戰篇和移動實戰篇。
❸ 移動端H5頁面的設計稿尺寸（上）
由於HTML5和微信內置瀏覽器的火爆，移動端H5網頁越發流行。在設計製作移動端網頁的時候，你是否疑惑，這種網站設計稿應該做成的多少屏寬，是否應該跟手機的解析度一致，還是應該按照iPhone的解析度來設計（注意H5網頁區別於APP，APP的設計稿直接按照手機解析度來設計）？那麼對於現在2K屏幕的手機，應該如何製作設計稿和前端稿呢？
作為本次文章系列的「上」部，將解決一些基本概念：像素（pixel）、ppi、解析度、物理像素（physical pixel）、CSS像素、設備獨立像素（deviceindependent pixel）等等。
為圖像顯示的基本單位，表示「圖像元素」之意。 每個這樣的信息元素不是一個點或者一個方塊，而是一個抽象的采樣。 仔細處理的話，一幅圖像中的像素可以在任何尺度上看起來都不像分離的點或者方塊；但是在很多情況下，它們採用點或者方塊顯示。
這一段是出自維基網路的解釋。其實很多會Photoshop的人都有一個誤區： 認為像素是一個寬高相等的小方塊，並且的像素都是「那麼大」，但是不知道這個寬高的具體數字。
像素是一個抽象概念，它是一個相對單位。
像素描述的是圖像在某一點的顏色值。一般來說，一個像素只能描述一種顏色值。
先可以跳過這個話題，介紹ppi概念，像素沒有大小就好理解了。
PPI的復雜之處在於如果他所屬的上下文環境不同，意義也會完全不一樣。 當我們在談論顯示設備的PPI時，它代指的屏幕的像素密度；當我們在談論和圖片相關時，我們談論的是列印時的解析度或者列印機的列印精度。這里我們主要描述的前一種情況。
PPI全稱為Pixel Per Inch，譯為每英寸像素取值，更確切的說法應該是像素密度，也就是衡量單位物理面積內擁有像素值的情況。
舉例1：
中的七張圖，假設圖片尺寸都為1x1寸，那麼 PPI 分別為 1、2、5、10、20、50、100 。 在同一物理尺寸內 ，隨著像素數的增大，圖像細節越多， PPI 增大，圖像越清晰，像素所佔空間相對越小。
因此，從討論像素大小的角度來說，圖①中各個方框像素的寬度（單位為英寸）分別為：1、1/2、1/5、1/10、1/20、1/50、1/100。像素在每個不同ppi下大小都不同，因此討論像素的大小也就變得無意義了。像素是沒有大小的。像素是一個抽象概念，它是一個相對單位。
像素描述的是圖像在某一點的顏色值。一般來說，一個像素只能描述一種顏色值。
舉例②：
在photoshop中分別建立兩個文檔：①800x600px，72ppi，②800x600px，300ppi。那麼這兩個文檔在PS或者生成圖片時，顯示的視覺效果是完全一樣的，因為寬高的像素點數是完全一樣的，在設備上渲染出來的效果圖是一致的。當你把文檔②中的任意圖層復制到文檔①中，從視覺上發現圖層不會變大或者縮小。只有把這兩個文檔作為圖片1:1列印出來時，才會發現72ppi的圖片要大於300ppi的圖片（注意ppi的含義），前者寬（高）大約是後者的4.16（300/72）倍。
任何圖片作為數據信息被保存在存儲盤中時，只有寬高像素數是有意義的，ppi對於圖片來說時沒有任何意義的，也並不能描述這個圖片有多少英寸的寬度或者高度，而只有在被列印出來後才有他的意義。
解析度泛指顯示系統對細節的分辨能力。能顯示圖像都能叫顯示系統，比如顯示器，投影儀，照片。
解析度常用的單位有：dpi（點每英寸）、lpi（線每英寸）和ppi（像素每英寸）。從單位來看，解析度是一個比值，與物理單位的比值。
日常所說的「這張圖片的尺寸（或解析度）是100x100像素」，一般都是在描述數字圖片，這樣的描述只是說明了圖片文件包含多少個像素。比如圖1中的七張圖，我們習慣於說，第1張圖的解析度是1x1像素，第5張圖的解析度是20x20像素，其實只是說明了圖片的像素數而已。
這是一種顯示技術，可以將把更多的像素點壓縮至一塊屏幕里，從而達到更高的解析度並提高屏幕顯示的細膩程度，這種解析度在正常觀看距離下足以使人肉眼無法分辨其中的單獨像素。
最先使用retina屏幕是iphone 4，屏幕解析度為960 * 640（326ppi）。
對比如下兩幅圖，可以清晰地看出是否 Retina 屏的顯示差異：
圖2 iPhone 3GS
圖3 iPhone 4
兩代iPhone 的物理尺寸（屏幕寬高有多少英寸）是一樣的，從上圖可以看出，iphone 4的顯示效果要明顯好於iphone 3GS，雖然 iPhone 4 解析度提高了，但它不同於普通的電腦顯示器那樣為了顯示更多的內容，而是提升顯示相同內容時的畫面精細程度。這種提升方式是靠提升單位面積屏幕的像素數量，即像素密度來提升解析度，這樣做的主要目的是為了提高屏幕顯示畫面的精細程度。以第三代 MacBook Pro with Retina Display為例， 工作時顯卡渲染出的2880x1880個像素每四個一組，輸出原來屏幕的一個像素顯示的大小區域內的圖像。這樣一來，用戶所看到的圖標與文字的大小與原來的1440x900解析度顯示屏相同，但精細度是原來的4倍。
注意：在桌面顯示器中，我們調整了顯示解析度，比如從 800 * 600 調整到 1024 * 768 時，屏幕的文字圖標會變小，顯示的內容更多了。但 Retina 顯示方式不會產生這樣的問題，或者說， Retina 顯示技術解決的是顯示畫面精細程度的問題，而不是解決顯示內容容量的問題。
為什麼是「每四個一組」？而且要讓這四個一組來顯示「原來屏幕的一個像素」？這大概就是 Retina 顯示技術的一種表現吧。而這「每四個一組」的「大像素」，可以被稱作「設備獨立像素」， device independent pixel ，或者 density-independentpixel ， 它可以是系統中的一個點，這個點代表一個可以由程序使用的虛擬像素，然後由相關系統轉換為物理像素。
「設備獨立像素」也有人稱為「CSS像素」，一種形象的說法，更傾向於表明與 CSS 中尺寸的對應。
設備獨立像素與物理像素的對應關系，可以這樣看：
圖4
類似的每四個一組的對應關系，也許正是 Retina 顯示技術所做的。
作為Web開發者，我們接觸的更多的是用於控制元素樣式的樣式單位像素。這里的像素我們稱之為CSS像素。
CSS像素有什麼特別的地方？我們可以借用quirksmode中的這個例子：
假設我們用PC瀏覽器打開一個頁面，瀏覽器此時的寬度為800px，頁面上同時有一個400px寬的塊級元素容器。很明顯此時塊狀容器應該占頁面的一半。
但如果我們把頁面放大（通過「Ctrl鍵」加上「+號鍵」），放大為200%，也就是原來的兩倍。此時塊狀容器則橫向占滿了整個瀏覽器。
吊詭的是此時我們既沒有調整瀏覽器窗口大小，也沒有改變塊狀元素的css寬度，但是它看上去卻變大了一倍——這是因為我們把CSS像素放大為了原來的兩倍。
CSS像素與屏幕像素1：1同樣大小時：
圖5
CSS像素(黑色邊框)開始被拉伸，此時1個CSS像素大於1個屏幕像素
圖6
也就是說默認情況下一個CSS像素應該是等於一個物理像素的寬度的，但是瀏覽器的放大操作讓一個CSS像素等於了兩個設備像素寬度。在後面你會看到更復雜的情況，在高PPI的設備上，CSS像素甚至在默認狀態下就相當於多個物理像素的尺寸。
從上面的例子可以看出，CSS像素從來都只是一個相對值。
設備像素比=設備物理像素/設備獨立像素
設備像素比在 js 中可以通過 devicePixelRatio 的參數取得（需要頁面的 viewport 設置為 content=」width=device-width」 此處為前端布局知識，較為專業，筆者也只是意會，無法說清楚，請自行網路）
iPhone 4 的設備像素比為2，線長（橫向、縱向、對角線）上的物理像素數與設備獨立像素數的對應關系即為2。
根據這個對應關系，一般可以通過屏幕的物理解析度和設備像素比確定設備獨立像素數。
那麼在我們做移動端網站時，將viewport設置了content=」width=device-width」，設備獨立像素也就等於CSS像素。
經常在做移動端網站時，我們會聽到一些人說原型稿屏寬做成320px，設計稿做2倍640px，網上也有很多文章說這樣說，H5網頁的設計稿做成2倍普通屏解析度就行了。
這是一個歷史遺留問題，這里提到的屏寬，更確切的說，是將viewport設置為width=device-width時的寬度，習慣稱這個寬度為屏寬，也就是設備獨立像素的寬度。筆者從其他文章中找到了一些答案。（原型圖屏寬是320px是為了滿足原型軟體在1：1比例顯示上適當，二是為了保證早期iphone320px屏寬的顯示需求）
「其實這個屬性值很有意思，字面意應該是 viewport 寬度等於設備寬度，但在實際中不同的瀏覽器都給出了個定值：320px；這個值還是源於 Apple ，因為早期 iPhone 的解析度為 320px*480px ，大量為 iPhone 量身定製的網站都設置了 viewport:width=device-width ，並且按照寬度 320px 來設計製作，所以其他瀏覽器加入 viewport 支持時為了兼容性也將 device-width 定義為了 320px 。」
那麼到了後來的iPhone4的屏幕是960x640px，幾乎所有人都知道Retina顯示屏，所有方向上的像素都成了原來的2倍。而設備獨立像素的屏寬還是保持著320px。其它智能手機早期的解析度基本上也使用了大致相同的屏幕尺寸與解析度，因此才有了 320px 這個不約而同的約定。
當然，如果把 viewport 的 width 屬性設置為一個定值，比如 320、 480、 700 等等，那 viewport 的寬度即為設定的寬度。此時，設備獨立像素寬度，也即所設定的寬度，而物理像素與設備獨立像素的比值，則不再是最初始的設備像素比值了（比如 iPhone 4 中的2）。
現在的智能手機屏幕尺吋多樣，解析度有很多種，相應地，設備像素比也不一致，有1、1.5、2、2.25、3等等，而在一般情況下（指 viewport 設置為 width=device-width 時）的設備獨立像素寬度，也不再只是 320px 了，還有 360px 、 400px等等。 這是從 http://screensiz.es/phone 統計的大部分手機獨立像素數據。
若設備像素比是N，就表示該手機屏幕上的N個物理像素來顯示一個CSS像素。
本文對已移動端網站涉及到的一些概念進行了較為基礎的解釋，在下一篇中，會介紹H5網頁在做設計稿以及前端布局時的最為省力的方法。
❹ web前端頁面布局,一般情況用哪些標簽最好,可以盡可能地達到各瀏覽器對標簽元素的識別
用DIV寫是最好的。瀏覽器無論是信息的爬蟲和頁面的重構都會很好。瀏覽器兼容的問題主要是你CSS寫的嚴謹不嚴謹。你CSS寫的不夠全有的瀏覽器自然會有這些問題。而且有的屬性可能不兼容每個瀏覽器。標簽最好的就是DIV了。
❺ 微信小程序web-view ， 嵌入H5頁面
需求：
1、將已開發好的H5頁面，嵌入先有的小程序。
2、並且要實現H5支付功能
解決方式 ：web-view
1、 登陸 小程序管理後台
a . 如果是公眾號 。則進行雙向綁定
完成這一步 ，那麼基本上就差不多成功了一大半
2、在小程序裡面嵌入h5
web-view
文檔裡面有的東西，就不贅述le~
a.在小程序裡面定義一個你想要的H5入口
b. 新建一個頁面，用來放H5的鏈接
ok~現在已經完成h5的嵌入
3、h5實現支付功能 - 喚醒微信支付
目前只有這種實現方式。等待微信更新 支持小程序的web-view可以喚醒微信支付
總結：
個人見解： 微信內置瀏覽器， 打開微信公眾號H5頁面，也可以喚醒微信支付。微信小程序裡面web-view相當於小程序的內置瀏覽器，暫時不支持喚醒微信支付。雖然小程序是在微信裡面，但是web-view又和微信內置瀏覽器不同~ 感覺微信想把小程序獨立出來~
❻ H5的web界面和普通界面之間，有什麼設計上的區別
H5的頁面屬於是具有響應式的交互功能，（比如滑鼠放在圖片上會顯示文字解釋或者圖片翻頁。）普通界面是簡單的圖文頁。
❼ web前端只要會H5和css,加上js就可以了嗎
剛剛入門web前端的同學，大多對前端學習路線有誤解，認為前端=HTML+CSS+Javacript。但實際情況要比這要復雜多，下面就來真正了解一下Web前端學些什麼內容吧！
1.入門篇：html基礎、css基礎、js基礎、純js操作dom和jquery。
2中級篇：深入css3、深入js、掌握主流mvc框架、升級後台語言nodejs、總結做項目。
3.進階篇：掌握面向對象編程、函數式編程、MVC / MVVM / MVC。還需要把握好安全性、平台兼容等等。
所以說，Web前端的學習路程是路漫漫其修遠矣，大家要靠不停地學習來充實自己的知識技能，才能在前端方向成為技術大牛！
❽ h5和web前端的區別
一、指代不同
1、h5：是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。
2、web前端：是創建Web頁面或app等前端界面呈現給用戶的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互。
二、發展不同
1、h5：結合了 HTML4.01 的相關標准並革新，符合現代網路發展要求，在 2008 年正式發布。
2、web前端：從網頁製作演變而來，在互聯網的演化進程中，網頁製作是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大。
三、技術構成不同
1、h5：由不同的技術構成，其在互聯網中得到了非常廣泛的應用，提供更多增強網路應用的標准機。
2、web前端：掌握HTML是網頁的核心，是一種製作萬維網頁面的標准語言，是萬維網瀏覽器使用的一種語言，它消除了不同計算機之間信息交流的障礙。