『壹』 前端HTML代碼重復怎麼辦
對於重復用到的<div class="header">和<div class=footer>,可以單獨提取出來做單獨的頁面。
header和footer分別的頭部盒子和底部盒子；前者一般包括nav，logo，登錄入口等，底部文件一般是鏈接，聲明等。
在html頁面中直接引入就行了，這樣不僅避免了代碼重復，更是在往後，需求變更後，方便維護，而不需要再每個都有header和footer的地方，一個個的修改。
『貳』 經過webpack和babel打包過的前端代碼可以還原最初的html+css+js嗎
不能。
HTML可能經過文本壓縮及字元轉換。
CSS可能做過自動追加前綴，壓縮，或者根本就是用預編譯器寫出來的。
Javascript可能經過壓縮，優化。
另外，如果打包配置中未設置pathinfo為true的話，將不會包含源文件路徑。
就算多增加一個空格也和原始的不同了吧？
不過，當webpack打包時，可以配置生成.map文件，使用此文件可以還原原文件。
你需要問原作者索要。
『叄』 web前端怎麼寫好代碼
web前端開發需要掌握的技術:
1、
學習html,這個是最簡單的,也是最基礎的。要熟練掌握div、form table、ul
li、p、span、font這些標簽,這些都是最常用的,特別是div和table,div用於布局、table也可以用於布局,但是不靈活,基本
table是用來和數據打交道。
2、學習css,這里說的css不包括css3,一般我們看到web前端開發工程師的要求裡面,有一個會使
用css+html或者css+div來進行界面布局,所以css是用於輔助html來布局和展示的,我們稱之為「css樣式」,為什麼會說
css+div呢?因為我上面說了div就是html主要用於布局的東西,所以div就是核心掌握的東西!那麼css肯定必須要配合div來使用才好。
css要熟練掌握float、position、width、height,以及對於的最大最小、會使用百分百、overflow、margin、
padding等等,這些都是跟布局 有關系的樣式,一點要掌握。
3、學習js。
可能前兩個大家覺得還過的去,看到js就蛋疼了,其實吧,js入門很簡單的,不需要會很多東西的,只要會根據某個id、或者name拿到網頁dom或者樣
式、或者值,然後會給某個id或者name的元素標簽賦值、或者追加數據、追html,這個是跟數據有關系的操作,然後數據邏輯判斷,效果方面的,無非就
是跳轉、彈框、隱藏什麼的,把這些全部結合其他就是實際用途了,代碼一點都不難,會了這些基礎js,其他的直接網路就好了。然後看多了,用多了,就什麼都
不是問題了。
4、學習jquery。jquery是相當於把js封裝了一套的一個js插件,目的就是操作起來更方便,代碼寫的更少,jquery入門也很簡單,那些是入門需要學的和js一樣,只是換成了jq的代碼。其他的一樣網路就夠了。
5、
最好會點後台語言,比如java、php,為什麼呢?因為我們前台界面的數據都是從後台來的,如果會點後台代碼,就知道怎麼跟後台交互數據是最好的,
這樣節約時間,也可以讓前端代碼更規范。不然可能因為你的寫法和後端給來的數據不能結合上,那麼前端代碼又得重新寫,那就更蛋疼了。
6、學
習css3+html5,為什麼這個放最後呢?哈哈,因為我自己也不太會,畢竟術業有專攻嘛,雖然這個很流行,但是我是搞後端的,在工作中用不到
它,只有在自己網站需要改樣式,或者朋友網站樣式出問題的時候,我才會去臨時去研究下。但是如果你們是准備專門搞前端,那麼最好還是學一下的。
上
面6點,基本是一個搞web前端開發工程師需要掌握的技術,然後我也盡量的把自己的一點點經驗告訴了大家,但是大家不要以為上面6點就只有我說的那麼容
易,不,他們之所以被人使用,之所以這么火,就是因為強大!我說的這么簡單僅僅是打消你們覺得很難的原因,萬事開頭難,我講的都是入門的方法和技巧以及需
要知道的東西。另外告訴大家一個秘密,不要以為代碼很難敲,現在什麼語言都有自動提示代碼的功能,只需要輸入一個字元,兩個字元,後面的代碼都會彈出來讓
你選擇!還怕啥呢?所以你也不要怕你英語不好了。
『肆』 前端什麼樣的代碼開發工具好用
為了讓入行新人能夠更快的掌握Web前端開發，千鋒武漢小編推薦五個優秀的前端開發工具，供小夥伴們參考。
框架類：Bootstrap
全世界最流行的響應式前端框架。基於HTML、CSS、JAVASCRIPT的，它在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格。並兼容大部分jQuery插件。簡潔靈活，使得Web開發更加快捷。國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap源碼進行性能優化而來。
代碼編輯器：Codepen、VScode
CodePen是一個在線的HTML、CSS和JavaScript代碼編輯器，能夠編寫代碼並即時預覽效果。可以用於在線展示的作品，也可以看到其他人在網頁中實現的各種令人驚奇的效果。
VScode免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括弧匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。軟體跨平台支持 Win、Mac 以及 Linux。
性能測試：Google PageSpeed Insights
PageSpeed是谷歌的網頁測試工具，通相信有接觸前端開發的大神們都聽說過Google官方的PageSpeed Tools，這個網頁載入速度檢測工具有在線版本也有一個 Chrome擴展，叫PageSpeed Insights。PageSpeed Insights的Chrome擴展是由谷歌官方開發的一款可以分析頁面載入的各個方面，包括資源、網路、DOM以及時間線等等信息的插件，過檢測評分給你優化建議。
調試類：AtomAptana Studio
它是非常強悍的JavaScript編輯器和調試器，可以支持多種AJAX和JavaScript工具箱，包括JavaScript編輯和調試。具有智能代碼完成、瀏覽器兼容性提示、代碼錯誤提示、文檔結構樹等功能。
HTML5：HTML5測試得分能夠提示您正常使用的瀏覽器對於HTML5標准和相關規范的支持情況的指標。
前端開發工具數量很多，這里只是推薦了千鋒武漢HTML5前端小編覺得比較好的5個前端開發工具。如果你有更好的意見，歡迎給我們留言分享。
『伍』 Web前端開發與iOS終端開發的異同
語言
前端和終端作為面向用戶端的程序，有個共同特點：需要依賴用戶機器的運行環境，所以開發語言基本上是沒有選擇的，不像後台想用什麼就用什麼，iOS只能用Objective-C，前端只能javascript，當然iOS還可以用RubyMotion，前端還能用GWT/CoffieScript，但不是主流，用的人很少，真正用了也會多出很多麻煩。
這兩者有個有意思的對比：變數/方法命名的風格正好相反。蘋果一直鼓吹用戶體驗，寫代碼也不例外，程序命名都是用英文全稱並且要多詳細有多詳細，力求看變數和方法名就能知道是幹嘛的，例如application:didFinishLaunchingWithOptions:。而js因為每次都要從網路下載，要力求減少代碼體積，所以變數方法名是盡量用縮寫，實際上有代碼壓縮工具，無論變數名寫多長最終上線的效果是一樣的，但大家也都習慣了用短的命名，例如上述objc的application:didFinishLaunchingWithOptions:方法在js里習慣的命名是:$()。
objc與js都是動態語言，使用起來還蠻像，但objc是編譯型，速度快，很多錯誤也能在編譯過程中被發現，js是解釋型，性能依賴於解釋引擎，即使在強勁的v8引擎下性能也趕不上編譯型語言，語言太動態，變數完全沒有類型，寫起來爽，debug起來稍微費點勁。一直感覺js輕巧靈活放盪不羈充滿各種奇技淫巧，objc中規中矩沒c++ java那麼嚴肅也沒有js那麼靈活。
線程
前端開發幾乎不需要線程這個概念，瀏覽器實現上頁面HTML和CSS解析渲染可能與js不在同一個線程，但所有js代碼只執行在一條線程上，不會並發執行，也就不需要考慮各種並發編程的問題。在新的JS特性中可以創建worker任務，這樣的任務是可以另起一條線程並行執行的，但由於並不是所有瀏覽器都支持，不同線程傳遞數據各個標準定的還不一樣，使用場景也少，似乎沒有大規模用起來。對於資料庫操作/發送網路請求這樣的任務是在不同於js代碼執行線程的，不過這些都由瀏覽器管理，前端無需關心也無法影響這些線程，只需接收事件回調，不需要處理任何並發問題。
終端開發需要大量使用多線程，iOS有一條主線程，UI渲染都在這個線程，其他耗時長的邏輯或者資料庫IO/網路請求都需要自己另開線程執行，否則會佔用主線程的時間，導致界面無法響應用戶交互事件，或者渲染慢導致滾動卡頓。程序邏輯分布在多個線程里跑，需要處理好各種代碼並發執行可能帶來的數據不一致/時序錯亂之類的問題，並發也導致有些bug難以排查，一不留神就掉坑，需要適當用一些隊列/鎖保證程序的執行順序。iOS提供了一套多線程管理的方法GCD，已經把線程和隊列封裝得非常簡單易用功能強大，比其他端或後台是好很多了，但還是會花大量功夫在處理多線程問題上。
存儲
終端開發需要大量的數據存儲邏輯，手機APP不像瀏覽器，用戶打開瀏覽器必定是連著網，但打開一個APP時很可能是離線，也很可能處於網路狀況極差的移動GPRS，所以必須把之前請求回來的數據保存好。保存數據後又需要與服務端最新的數據同步，如果全量同步數據量太大，耗流量速度也慢，於是需要增量同步，需要與服務端一起制定實現增量數據返回的方案，需要處理好客戶端與服務端數據一致性的問題。當數據存儲量大結構復雜時，還需要利用好有限的內存做cache，優化各類存儲查詢性能。
前端在桌面端很少需要存儲，除非是Single Page App，不存儲自然就不需要數據更新的一系列工作，數據都是從後台取出拼接後直接顯示到頁面上，即使像微博有可以在頁面內不斷載入更多數據，數據也只存在於內存，不會持久化存儲，因為桌面端網速穩定，不計流量，所有數據可以直接從後端拿取，客戶端沒必要再做一套存儲。移動端那些做得很像原生APP的Web應用就跟終端開發一樣了，數據同樣保存到SQLite，存儲邏輯以及要處理的問題都差不多。
框架
在第三方框架上Web前端和iOS開發完全相反，Web原生弱小又十分開放，讓大量第三方框架和類庫可以施展拳腳，而iOS原生強大又十分封閉，導致第三方框架沒有多少生存空間。
瀏覽器一開始只為內容型的網頁而設計，js也只是這個網頁上能加點小特效的腳本語言，在Web應用時代跟不上發展，需要很多第三方庫和框架輔助，再加上前端開發是完全開放的領域，導致庫和框架百花齊放多如牛毛，在初期多數庫的作用集中在封裝dom操作，大家不斷重復造dom操作基礎庫的輪子，在一段時間百家爭鳴後獨尊jQuery，在有使用庫的網站中90%以上使用jq，幾乎成了個標准基礎庫。後期大家已經不再重復造這個基礎庫的輪子了，多了一些代碼組織和前端架構的框架，例如一些幫助項目模塊化的框架require.js，MVC框架backbone/angular.js等。
iOS開發蘋果已提供了完整的開發框架cocoa，而這框架在每一代系統中都在升級優化和添磚加瓦，開發模式也已經定型，第三方框架沒有多少生存空間，大量流行的開源項目是一些通用組件和庫，像網路請求庫AFNetworking，資料庫操作庫FMDB。而一些大的框架像beeFramework/ReactiveCocoa較難流行起來。
兼容
前端開發需要兼容大——量的瀏覽器，桌面的chrome，safari，ie6-ie10，firefox，以及各種套殼獵豹360等瀏覽器，移動端iOS/Android各自的瀏覽器，以及無限的不同的屏幕尺寸。看起來挺可怕，實際上也沒那麼難搞，只是拿出來嚇唬下人。桌面端chrome/safari以及各種套殼的極速模式用的都是Webkit，差異很小，firefox也大體遵從標准實現，與Webkit差別不大，舊的ie6/7就需要特別照顧，不過很多網站都不支持ie6了，移動端更是一家親，全是Webkit，除了新特性上的支持程度不一，其他差異不大。對於不同的屏幕尺寸，高端點的會用響應式布局，針對不同屏幕尺寸自適應到不同布局，一般點的桌面端定死寬度，移動端拉伸自適應寬度就搞定。
終端開發也需要兼容各種不同的系統版本和手機尺寸，Android不用說，iOS也有3.5/4/4.7/5.5/9.7英寸這些尺寸，不過兼容起來跟Web一樣挺容易，就是自適應寬度，iOS的UIKit把這些都處理好了，還有autolayout，sizeClass等高級特性可用，在尺寸上並不用花太多功夫。系統版本上iOS7為分水嶺，iOS7前後版本UI上差異比較大，需要做一些功夫兼容，不過iOS用戶更新換代很快，預計再過一兩年iOS7以下用戶就可以忽略了。
性能
終端和前端都是面向用戶的，性能優化目的都是盡快呈現內容，以及讓程序在用戶操作下流暢運行。終端主要關注的是存儲/渲染性能。當一個APP存儲數據量大，數據關系復雜時，數據查詢很容易成為性能瓶頸，需要不斷優化數據存取的效率，規劃數據IO線程，設計內存cache，利用好終端設備有限的內存，渲染上避免重復渲染，盡可能復用視圖，尋找最高效的渲染方案。
前端關注頁面載入速度，由於Web頁面的結構/樣式/程序/資源圖片都是實時請求的，要讓頁面更快呈現內容，就要優化這些請求，讓這些資源以最快速度載入下來，包括合並圖片/合並代碼減少請求數，壓縮代碼，並行請求，根據版本號緩存代碼請求，gzip壓縮，模塊/圖片懶載入等。此外跟終端一樣也關注渲染性能，遵從一些規則避免頁面reflow，避免使用CSS陰影這樣耗性能的特效，用CSS3動畫代替js等。
編譯
終端開發需要編譯的過程，把程序編譯成機器語言，再與各種庫鏈接後生成平台對應的可執行文件，最後由操作系統調度執行。在iOS終端開發中編譯和鏈接的規則蘋果已經在xcode這個開發工具上封裝好，一般開發可以不用關心，但有深層需求時還是需要跟編譯打很多交道，例如用編譯前端Clang自定義靜態代碼檢測規則，寫編譯腳本做自動化編譯和持續集成，打包生成靜態庫，根據鏈接後的可執行文件的組成優化APP體積等。
前端開發的程序則不需要編譯過程，只需要把代碼扔給瀏覽器，瀏覽器邊解析代碼邊執行。雖然js/css代碼寫完無需做任何事情瀏覽器就可以解析執行，但為了上面說的性能優化，前端代碼上線前會對所有代碼和資源文件進行處理，這些處理包括：壓縮合並js/css，合並css sprite圖，處理模塊依賴，處理代碼資源版本號，處理資源定位等。這個過程很像傳統程序的編譯，把給人看的代碼優化處理成給機器看的，並解決一些依賴關系，可以算是前端的編譯過程。像grunt.js/fis這些工具可以幫助完成這個編譯過程，通常前端編譯跟上線部署結合在一起，作為上線系統的一部分。
安全
前端和終端的安全性問題上雖然不需要像後端考慮得那麼多，但還是有些需要注意。在請求的安全上，終端和前端都一樣，用戶向後端發送的請求都需要經過層層路由，不知道在哪裡就被截獲篡改或回放了，於是需要做一些措施防禦這些情況，最常見的就是身份驗證，多是採用會過期的token形式代替用戶名密碼，防止被抓包後黑客可以永遠登陸這個賬號。數據安全要求高的會用加密傳輸，或者使用https，另外還需要看情況處理一些DNS劫持，運營商廣告植入等問題。
其他安全問題終端很少考慮，在未越獄的iOS機器上系統已經幫忙保證了整個APP運行環境的安全，而在越獄的機器下惡意程序擁有root許可權可以做任何事情，APP也難以防範。前端方面瀏覽器的特性使前端開發有幾個安全隱患，一是Web頁面上任意位置都可以動態插入js代碼，瀏覽器會無區別地執行這些代碼，二是身份驗證信息都統一保存在cookie里，三是頁面上可以隨意通過iframe嵌入其他網站的頁面。造成XSS、CSRF、cookie劫持這些攻擊手段，所以前端寫代碼時都需要考慮還這些安全問題，做好相應的防範，最簡單和重要的防範就是對所有用戶輸入輸出的內容做完整的過濾，避免頁面內被嵌入惡意代碼。
交互/開發
最後說下對這兩個領域在交互和開發上的個人感觸。以前在做Web前端時，感覺Web讓人機交互倒退了十年，交互都是硬邦邦的點擊—啪一下出來結果，滾動是一格格地刷新，很多人當時在鼓吹html5可以做出多麼炫的效果時，實際上FLASH在十年前就可以做出來了，還比最現代的瀏覽器更流暢。iPhone流行後，人機交互終於恢復了應有的水平，體驗上比Web流暢太多，指尖交互/流暢的動畫/便捷的滑動手勢/無限制的實現，主流終於恢復或超越了十年前Flash的水平。
但人機交互提升了，開發方式卻大倒退，Web的開發方式非常先進，用戶用到的都是最新版本，發現bug可以馬上上線秒修復，特別適用於互聯網環境下的快速迭代，而終端APP不行，撇開iPhone的審核不說，Android也無法做到保證用戶用的是最新的程序，用的都是傳統的客戶端更新的方式，bug的修復版無法及時給到用戶，無法一天上線幾十次，需要維護很多舊版本，開發方式倒退回Web時代以前。這都是因為移動網路不穩定以及流量有限造成的，移動端無法像桌面端瀏覽器那樣完全依賴網路，所以在移動網路穩定流量免費之前，開發方式都不會有多大變化。
另外並不看好HTML5，網路上說它可以取代APP說了三四年，到現在也沒什麼戰績，我看不到它的優勢，原生APP可以獲得更多的系統資源，更流暢的人機交互體驗，HTML5在這方面永遠比不上，而它在移動端網路和流量的限制下也無法發揮Web的開發優勢，所以它不會成為主流，只適合做一些輕量的小東西。
『陸』 現在比較好用的前端開發工具有哪些啊
1. node.js + npm， 這個是前端工具的一個平台，沒有他們就沒有以下的工具，建立開發環境，下載開發工具，運行開發工具的利器
2. bower, 庫依賴管理器，類似於npm，但針對瀏覽器JavaScript的依賴管理，減少尋找庫，下載庫和升級庫的煩惱
3.grunt，流程自動化管理工具，將你非編程的開發步驟減到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5無盡地獄，發布和開發各種無壓力。以下大部分開發工具，都有grunt的相對應的插件，也就是說他們都能利用grunt進行自動化運行
5. 本人用less比較多，因為基本無縫兼容歷史遺留系統中的css，（而Sass語法比較特殊，還沒有專門用過，應該開發新系統的css比較好），一套css預編譯語言，可以把less語法轉成css語法，lessc是less語言編譯器，配合grunt less，編寫大型css文檔毫無壓力。
6.Phantomjs，沒有界面的瀏覽器，用js腳本控制其操作網頁。測試，抓圖，網頁流程自動化利器。配合casperjs的語法簡化功能真強庫後，控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功能，在利用live-reload即時刷新功能，可以讓你開發css的時候，快速對n多個頁面進行觀察，看其前後變化。不過缺點也比較明顯，就是速度慢。但比起手動對比來看，還是非常快的。值得css開發時擁有
8. phantomCSS，這個和grunt photobox類似，都用於css開發的，差別是photobox是全局觀察差別，而這個是單元組件觀察差別，它方便你就抓頁面中某一塊元素然後進行前後比較，更加註重細節上的差異，這個比較合適組件開發時候使用。
9. jshint，幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題。在部署你JS前，用jshint檢查一下是沒錯的 。
10.UglifyJS，壓縮JavaScript代碼，使你的JS代碼可以更加快速的載入。有grunt的插件
11. browserify允許你在瀏覽器裡面使用CMD標准模塊，但本人認為它的另外一個優勢是合並代碼，開發時候可以把代碼模塊化，分成很多很多小文件，然後有調理的放到相對應文件夾下，然後最後合成單一文件。本人曾經利用browserify開發greasemonkey代碼，大大簡化了greasemonkey的開發難度和增強了greasemonkey代碼的質量。browserify有grunt插件，這樣又減少的開發步驟。
12. Karma， google開發的一個單元測試運行器，這個自己本身不是一個單元測試框架，而是配合測試單元框架的一個工具。由於前端瀏覽器眾多，就算你有live-reload這樣自動化工具，但是還是要手動打開各種瀏覽器，手動把你的單元測試在各個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然後把單元測試在各個瀏覽器中自動運行一遍，讓這個步驟也能自動化了。
13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin實際上背後使用的是clean-css工具，這個工具就是用來壓縮精簡css的，讓css文件大小更小。
『柒』 現在做前端開發的寫html大多都用什麼軟體哇
靜態web:HTML + CSS 組合。(用戶發送請求--->伺服器接受並找到頁面--->返回)
動態web:HTML + CSS + Javascript + PHP + 資料庫組合。(請求內--->伺服器查找數據--->返回)
發展容歷程:CGI(公共網關介面):早期技術、過於消耗系統資源、目前很少使用
ASP:微軟的動態伺服器技術(少)
JSP:java伺服器技術(安全性高)
PHP:超文本預處理器(使用廣泛)
『捌』 移動端的和網頁的前端代碼一樣都是html和css嗎
移動端分為兩種東西，一種是手機APP，另一種則是移動端的網頁
如果是移動端的網頁，使用的前端代碼就是和PC端一樣的html與CSS以及JavaScript這幾大技術實現的，當然移動端的網頁和PC端的網頁，在布局等功能上面實現起來並不相同，具體知識可以參照書籍《HTML5布局之路》上的講解。
如果是移動端的APP，則使用的代碼和前端代碼完全不同，iOS使用的是Object C語言，而安卓上的APP使用的是JAVA語言。
『玖』 怎麼將一個前端源碼能夠生成一個在手機上打開的鏈接
可以安裝本地伺服器，然後下載一個內網穿透軟體，這樣就會有一個鏈接可以通過網路訪問