『壹』 Web前端開發規范之HTML規范
今天小編要跟大家分享的文章是關於Web前端開發規范之HTML規范。Web前端作為開發團隊中不可或缺的一部分，需要按照相關規定進行合理編寫(一部分不良習慣可能給自己和他人造成不必要的麻煩)。不同公司不同團隊具有不同的規范和文檔。下面是根據不同企業和團隊的要求進行全面詳細的整理結果。來和小編一起看一看HTML規范的原則吧！
HTML規范
1、文檔類型聲明及編碼：統一為html5聲明類型。書寫時利用IDE實現層次分明的縮進(默認縮進4空格)。
2、非特殊情況下CSS文件放在body部分標簽後。非特殊情況下大部分JS文件放在標簽尾部(如果需要界面未載入前執行的代碼可以放在head標簽後)避免行內JS和CSS代碼。
3、所有編碼需要遵循html(XML)標准，標簽&屬性&屬性命名必須由小寫字母及下劃線數字組成，且所有標簽必須閉合，包括br()，hr()等。屬性值用雙引號。
4、引入JS庫文件，文件名須包含庫名稱及版本號及是否為壓縮版，比如jquery-1.4.1.min.js。引入插件，文件名格式為庫名稱+插件名稱，比如jQuery.bootstrap.js。
5、書寫頁面過程中，請考慮向後擴展性。class&id參見css書寫規范.
6、需要為html元素添加自定義屬性的時候，首先要考慮下有沒有默認的已有的合適標簽去設置，如果沒有，可以使用須以"data-"為前綴來添加自定義屬性，避免使用"data："等其他命名方式。
7、語義化html，如標題根據重要性用h*(同一頁面只能有一個h1)，段落標記用p，列表用ul，內聯元素中不可嵌套塊級元素。
8、盡可能減少div多層級嵌套。
9、書寫鏈接地址時，必須避免重定向，例如：href="http：//#/"，即須在URL地址後面加上「/」;
10、在頁面中盡量避免使用style屬性，即style=""。
11、必須為含有描述性表單元素(input，textarea)添加label，如姓名：須寫成：姓名：
12、能以背景形式呈現的圖片，盡量寫入css樣式中。
13、重要圖片必須加上alt屬性。給重要的元素和截斷的元素加上title。
14、給區塊代碼及重要功能(比如循環)加上注釋，方便後台添加功能。
15、特殊符號使用：盡可能使用代碼替代：比如<(<)&>(>)&空格()&_(_)等等。
以上就是小編今天為大家分享的關於Web前端開發規范之HTML規范的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
『貳』 Web前端開發規范之css規范
今天小編要跟大家分享的文章是關於Web前端開發規范之css規范。Web前端作為開發團隊中不可或缺的一部分，需要按照相關規定進行合理編寫(一部分不良習慣可能給自己和他人造成不必要的麻煩)。不同公司不同團隊具有不同的規范和文檔。下面是根據不同企業和團隊的要求進行全面詳細的整理結果。來和小編一起看一看css規范的原則吧！
css規范
1、編碼規范為utf-8。
2、協作開發及分工：i會根據各個模塊，同時根據頁面相似程序，事先寫**體框架文件，分配給前端人員實現內部結構&表現&行為。共用css文件base.css由i書寫，協作開發過程中，每個頁面請務必都要引入，此文件包含reset及頭部底部樣式，此文件不可隨意修改。
3、class與id的使用：id是唯一的並是父級的，class是可以重復的並是子級的，所以id僅使用在大的模塊上，class可用在重復使用率高及子級中。id原則上都是由我分發框架文件時命名的，為JS預留鉤子的除外。
4、為JS預留鉤子的命名，請以js_起始，比如：js_hide，js_show。
5、class與id命名：大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名.其他樣式名稱由小寫英文&數字&來組合命名，如i_comment，fontred，width200。避免使用中文拼音，盡量使用簡易的單片語合。總之，命名要語義化，簡明化
6、規避class與id命名(此條重要，若有不明白請及時與i溝通)：a)通過從屬寫法規避，示例見d。b)取父級元素id/class命名部分命名，示例見d。c)重復使用率高的命名，請以自己代號加下劃線起始，比如i_clear。d)a，b兩條，適用於在2中已建好框架的頁面，如，要在2中已建好框架的頁面代碼中加入新的div元素，按a命名法則：...，樣式寫法：#mainnav.firstnav{.......}按b命名法則：...，樣式寫法：.main_firstnav{.......}
7、css屬性書寫順序，建議遵循：布局定位屬性-->自身屬性-->文本屬性-->其他屬性.此條可根據自身習慣書寫，但盡量保證同類屬性寫在一起.屬性列舉：布局定位屬性主要包括：display&list-style&position(相應的top，right，bottom，left)&float&clear&visibility&overflow;
自身屬性主要包括：width&height&margin&padding&border&background。
文本屬性主要包括：color&font&text-decoration&text-align&vertical-align&white-space&
其他&content。
8、書寫代碼前，提高樣式重復使用率。
以上就是小編今天為大家分享的關於Web前端開發規范之css規范的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
『叄』 Web前端開發人員應該掌握的編碼原則有哪些
今天小編要跟大家分享的文章是關於Web前端開發人員應該掌握的編碼原則有哪些?HTML已經走過了20幾年的發展歷程，它幾乎見證了整個互聯網的發展。但是，即便到現在，有很多基礎的概念和原則依然需要開發者高度注意。下面，向大家介紹這些應該遵循的開發原則，讓我們一起來看一看吧~
1、善用DIV來布局
當開發一個Web頁面時，要考慮第一件事就是區分頁面重點。將這些內容用DIV標簽包含起來，頁面的代碼會呈現出整潔、縮進良好的風格。
『肆』 怎樣提高前端工程師開發效率，都在這里
前端工程師其實是一個工作很雜的職位，除了要負責切圖、寫html/css/js外，還要解決一系列的瀏覽器兼容性、網頁性能優化等問題，所以提高前端工程師的開發效率是勢在必行的，也是前端工程化的體現。
對於開發效率，我個人理解是
開發效率 = 新增代碼的效率 + 修改代碼的效率 + 維護代碼的效率
那麼如何提高前端開發效率便可以按照前端工程化的理念來進行劃分。下面我就介紹下7個提高前端開發效率的方法。
1.切圖
切圖是一個前端最基礎的技能，一般我們使用Photoshop或者FireWorks基本都能搞定設計師交付給我們的設計圖，但是要提高切圖效率的話就得使用一些訣竅了，比如利用PS里的動作來實現「一鍵切圖」功能，這里除了切圖外還介紹了其他的實用方法和工具。
2.編碼
對於編寫代碼部分我們首先要找到一款合適自己的IDE工具，建議不要使用Notepad++或者Dreamweaver，這些工具已經不符合前端潮流了，無法讓自己優雅地敲代碼。這里我主要推薦Sublime Text、Atom或者Webstrom，因為它們除了人性化的界面和支持大多數語法的高亮外，還可以安裝各種各樣的插件來拓展你的IDE工具，下面我主要介紹幾款Sublime Text提高開發效率的插件：
其中Element是用於快速編寫html/CSS的，比如輸入 ul>li 後按下tab鍵便可以生成一個ul標簽裡麵包含一個li標簽
JSFormat用於格式化JS；CSScomb用於對樣式屬性進行一鍵排序；HTML-CSS-JS Prettify可以一鍵規范我們的HTML/CSS/JS，甚至JSON格式；SublimeTmpl可以快速新建HTML/CSS/JS文件; ColorPicker用於調用本地調色板功能。這些工具都非常實用，一定程度上可以提高我們的編碼效率。
3.自動化
說到提高開發效率，這里不得不提一些前端的自動化工具，畢竟前端自動化是目前及未來的趨勢，能夠很大程度上縮減前端不必要的工作量，使我們能夠專注前端本身。
這里我們可以使用NPM來管理我們的項目包文件；利用webpack來打包壓縮我們的代碼；利用Node.js來實現構建本地伺服器；利用Karma、Jasmine來測試我們的前端代碼。
用好前端自動化工具可以幫助我們處理很多瑣碎的事情，比如一鍵壓縮代碼、圖片，一鍵合並JS，檢測文件更新等。
4.模塊化
隨著web2.0時代的到來，Ajax技術得到廣泛應用，前端代碼日益膨脹，而前端模塊化能夠方便我們對項目代碼的維護，進行按需載入，從長遠角度來看對我們提高項目的開發效率同樣大有益處。
在ES6出來之前應該說前端代碼本身不具備實現模塊的功能，我們必須要使用一些模塊化載入器來實現，比如RequireJS、SeaJs等。而隨著ES6的普及，目前像RequireJS、SeaJs這樣的工具已經沒有存在的必要了。所以在基於ES6的開發環境下我建議使用ES6的模塊化功能來實現我們的前端模塊化。
5.組件化
前端組件化的概念也是由來已久，我們可以通過將我們的代碼劃分成不同組件來實現功能公用，一個同樣的功能我們可能不用再次編寫相同的代碼，同時也可以提高前端代碼的可維護性和清晰度。以下是目前流行的前端框架Vue的單文件組件的概念圖：
我們可以將公用的組件抽離，將大組件拆分成小組件的形式實現前端組件化，組件與組件之間可以存在父子關系，也可以存在兄弟關系。在Vue的單文件組件中，一個組件包含了其HTML、CSS、JS的代碼片段。
6.前後端分離
前後端分離的項目對提升前端開發效率非常有幫助，因為前端不再需要後台配置路由、搭建伺服器環境、編寫模板等，這樣一來前端的生產力就會得到很大程度的解放，但是前後端分離的項目有利也有弊，如下圖所示：
最終我們需要根據項目需求衡量利弊來決定是否使用前後端分離的模式。
7.規范與模式
團隊協作離不開編碼規范和開發模式的幫助。遵循編碼規範文檔可以幫助我們在團隊開發時提高合作開發的效率。一個團隊遵循一套編碼規范可以使每個人的代碼寫出一個人的風格，這樣團隊間相互審查、測試、完善功能時會非常高效。下方是一些開源的前端編碼規範文檔：
網頁鏈接
首頁-TGuide
網頁鏈接
網頁鏈接
除了編碼規范我們在開發時經常會沿襲了一些已經存在的模式來解決問題，比如當用JS編寫彈框時我們往往會用到單例模式，用CSS編寫動畫時直接套用動畫的常用屬性等，我們不再需要從頭開始思考某一個功能的實現，這就是模式帶來的意義。
結語
當然除了以上7點，對於前端來說需要提高開發效率的地方還有很多，可謂任重而道遠。只有將前端無序、繁雜的操作組織起來，利用工具簡化、規范前端流程，才能實現項目構建、開發、維護的一體化。希望本文能夠給初識前端的同學帶來啟發並付諸實踐。
『伍』 什麼是web前端開發標准
對於前端，官方的定義是網站前台部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。用自己的話來說，前端是網頁給訪問網站的人看的內容和頁面，那前端開發顧名思義就是這些內容和頁面中代碼的實現。
現在的前端開發使得現代網頁更加美觀，交互效果顯著，功能更加強大。所以現在的前端開發，運用到的知識面更加廣泛，難度也更大。前端開發目前市場需求還是很大的，而且相對來講比較容易，很適合學習。需要學習的內容也不少，我有全套web前端視頻課資料可以發給你自學。
學習內容包括：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。
想要系統學習，你可以考察對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，能夠在校期間取得大專或本科學歷，中博軟體學院、南京課工場、南京北大青鳥等開設相關專業的學校都是不錯的，建議實地考察對比一下。
祝你學有所成，望採納。
『陸』 簡述符合web標準的HTML代碼編寫規范
1、統一編碼UTF8
2、每一個模塊進行注釋，省的改(或者別人改)的時候找不著，也是個良好的習慣。
3、盡量通過外部文件引入css，減小html文檔體積，有利於seo。
4、div盡量在三層以內，還是從seo方面考慮。
5、命名規范，比如「nav」「header」「footer」等，不要用一些亂七八糟的命名人家看不懂「sdfgdgf」之類的。
6、meta信息最好寫完整、h1、h2標簽、url絕對地址等等關於seo的問題要注意。
7、css、js、html分離全部外部文件引入，不要都寫在html文件裡面例如：css寫在元素裡面的style 或者js寫在body下面這些，以後工作可能不止你一個web前端別人改你的代碼很麻煩的，不要造成別人的麻煩，良好的編碼習慣以後維護起來也比較方便。
問題比較寬泛，需要不斷積累才能完善代碼規范問題~
『柒』 Web前端開發規范之js規范
今天小編要跟大家分享的文章是關於Web前端開發規范之js規范。Web前端作為開發團隊中不可或缺的一部分，需要按照相關規定進行合理編寫(一部分不良習慣可能給自己和他人造成不必要的麻煩)。不同公司不同團隊具有不同的規范和文檔。下面是根據不同企業和團隊的要求進行全面詳細的整理結果。來和小編一起看一看js規范的原則吧！
js規范
1、文件編碼統一為utf-8，書寫過程過，每行代碼結束必須有分號。原則上所有功能均根據XXX項目需求原生開發，以避免網上down下來的代碼造成的代碼污染(沉冗代碼||與現有代碼沖突||...)。
2、庫引入：原則上僅引入jQuery庫，若需引入第三方庫，須與團隊其他人員討論決定。
3、變數命名：駝峰式命名.原生JS變數要求是純英文字母，首字母須小寫，如myVue。jQuery變數要求首字元為'_'，其他與原生JS規則相同，如：_myVue。另，要求變數集中聲明，避免全局變數.
4、類命名：首字母大寫，駝峰式命名.如MyVue。
5、函數命名：首字母小寫駝峰式命名.如myVue()。
6、命名語義化，盡可能利用英文單詞或其縮寫。
7、盡量避免使用存在兼容性及消耗資源的方法或屬性，比如eval_r()&innerText。
8、後期優化中，JS非注釋類中文字元須轉換成unicode編碼使用，以避免編碼錯誤時亂碼顯示。
9、代碼結構明了，加適量注釋.提高函數重用率。
10、注重與html分離，減小reflow，注重瀏覽器性能.
以上就是小編今天為大家分享的關於Web前端開發規范之js規范的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
『捌』 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前端開發規范之文件命名規范
今天小編要跟大家分享的文章是關於Web前端開發規范之文件命名規范。Web前端作為開發團隊中不可或缺的一部分，需要按照相關規定進行合理編寫(一部分不良習慣可能給自己和他人造成不必要的麻煩)。不同公司不同團隊具有不同的規范和文檔。下面是根據不同企業和團隊的要求進行全面詳細的整理結果。來和小編一起看一看文件命名規范的原則吧！
基本原則
符合Web標准(UTF-8，HTML5)，語義化html(HTML5新增要求，減少div和span等無特定語義的標簽使用)，結構表現行為分離(HTML-CSS-JS代碼分離，不同行為代碼高內聚低耦合)，兼容性優良(早期版本瀏覽器兼容，移動端和PC端設備兼容).頁面性能方面(減少請求次數，例如使用精靈圖和sass語法)，代碼要求簡潔明了有序，盡可能的減小伺服器負載，保證最快的解析速度(減小repaint和reflow).
文件命名規范
1、html，css，js，lib，images文件均存放至項目的目錄中。如果使用相關前端框架，根據框架的文件格式進行合理布局。
2、所有文件夾及文件使用英文命名(避免使用中文路徑)。
3、html文件：入口文件使用index.html。如果有對應的設計組設計原稿，需要將對應的設計稿和html文件命名一致並合理存放。
4、css文件命名：後綴.css。通用initial.css，初始化base.css，首頁index.css，其他頁面按照對應的html命名。
5、Js文件命名：英文命名，後綴.js.通用common.js，初始化base.js。其他頁面按照對應的html命名。
以上就是小編今天為大家分享的關於Web前端開發規范之文件命名規范的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
『拾』 web前端開發是什麼
web前端是指網站的前端開發，相對於後端而言，主要是給用戶呈現網站等界面。
web前端屬於IT行業中熱門的崗位，相比較於其他的IT技術來說，是比較簡單的。前端主要負責實現網站或者APP頁面，涉及的代碼量比後端開發小，但薪資和發展都不差，課程是目前前沿的前端技能叫web全棧工程師。
web全棧工程師5.0課程包括：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。
想要系統學習，你可以考察對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，能夠在校期間取得大專或本科學歷，中博軟體學院、南京課工場、南京北大青鳥等開設相關專業的學校都是不錯的，建議實地考察對比一下。
祝你學有所成，望採納。