A. 前端開發命名必備單詞
一、導航類
導航：nav 主導航：mainbav 子導航：subnav 頂導航：topnav
邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 菜單：menu
子菜單：submenu 標題：title 摘要：summary
二、頁面結構
容器：container 頁頭：header 內容：content/container 頁面主體：main
頁尾：footer 導航：nav 側欄：sidebar 欄目：column
頁面外圍控制整體布局寬度：wrapper 左右中：left right center
三、功能
標志：logo 滾動：scroll 廣告：banner 標簽頁：tab
登錄：login 文章列表：list 登錄條：loginbar 提示信息：msg
注冊：regsiter 當前的：current 搜索：search 小技巧：tips
功能區：shop 圖標：icon 標題：title 注釋：note
加入：joinus 指南：guild 狀態：status 服務：service
按鈕：btn 熱點：hot 合作夥伴：partner 新聞：news
友情鏈接：friendlink 下載：download 版權：right 投票：vote
四、p英文釋譯
標題 title 字體 font 身體 body 大小 size
列表 list 文本 text 樣式 style 對齊 align
圖像 image 修飾 decoration 資源 source 線 line
寬度 width 穿過 through 高度 height 縮進 indent
行 line 斜體 italic 鏈接 link 加粗 bold
斜體 italic 加重 weight 加粗 bold 寬 width
輸入 input 高 height 下面的 under 背景 background
頂部 top 主體 main
五、css英文釋譯
重復 repeat 填充 padding 位置 position 正常 normal
顯示類型 display 父級 parent 顯示可見 visibility 子級 children
隱藏 hidden 頂部導航topnav顯示 visible 溢出 overflow
列表 list 樣式 style 邊框 border 導航 nav
廣告圖片 banner 行高line-height邊界 margin 頁眉 header
六、樣式文件命名
主要的master.css 模塊mole.css 基本共用base.css 布局，版面layout.css
主題themes.css 專欄columns.css 文字font.css 表單forms.css
補丁mend.css 列印print.css
七、顏色釋譯
綠 green 紅 red 藍 blue 黑 black
灰 gray 黃 yellowa 紫 purple 白 white
棕 brown 卡其色 khaki
六、命名參考
登錄條loginBar 標志：logo 側邊欄：sideBar 廣告：banner
導航：nav 子導航：navBar 菜單：menu 子菜單：subMenu
搜索：search 滾動：scroll 頁面主體：main 內容：content
標簽頁：tab 文章列表：list 提示信息：msg 小技巧：tips
欄目標題：title 加入：joins 指南：guild 服務：service
熱點：hot 新聞：news 按鈕：btn 投票：vote
狀態：status 合作夥伴：partner 外套：wrap 商標：label
頂導航：topnav 左導航：leftSideBar 右導航：rightSideBar菜單內容：menuContent
菜單容器：menuContainer注釋：note 邊導航圖標：sidebarIcon版權：right
友情鏈接：friendLink容器：container 頁腳：footer 當前：current
激活：active 購物車：shop 登錄：login 注冊：regsiter
下載：download 麵包屑：breadCrumb
B. 前端是什麼啊
web前端就是用代碼的形式，還原UI設計師設計的界面，並實現各種交互效果。web前端工程師是程序員裡面入行門檻較低的一個職業，就前端應用開發框架而言，已經形成了HTML5、CSS3、《Ecmascript 6》標准規范。
1.要學的內容主要有：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。
2.想要系統學習，你可以考察對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，建議實地考察對比一下。
祝你學有所成，望採納。
C. 網站前端開發常用的布局方式有哪些
實現網頁布局的方式方法比較多，布局方式可以大概分為這幾類。
布局種類：
1、table布局（網頁的興起，1995）
2、Flash布局（自由的黃金時代，1996）
3、div+css（CSS的誕生，1998）
4、柵格與響應式（移動端的興起，2007與2010）
當前WEB前端開發使用DIV+CSS的布局方式會比較多也比較常用吧，網頁布局看起來貌似簡單，但是它需要綜合使用很多HTML+CSS的知識，總的來說知識量是不小。如果想系統化的了解HTML+CSS方面的知識，建議你選擇一本比較不錯的HTML5相關書籍（主要看知識邏輯、知識的表達方式，比如《HTML5布局之路》）進行學習，讓自己的知識更扎實一些，不然學的零零散散的。
Tips：學習好HTML+CSS有利於後面學習JavaScript，畢竟需要它們兩者結合在一起才可以實現出可交互的前端頁面。
D. 網頁開發需要哪幾個步驟
創建網站一般有以下幾個步驟。
1.網站定位在網貞設計前.首先要給網站一個准確的定位，明確建站日的，從而確定站點的主題、風格、網站要提供的服務和網頁要表達的主要內容。主腸要有針對性，題材要專而精，網站內的所有網頁都要田繞某一主題展開。
2.網站規劃根據網站定位和相關主題來構造網站的層次結構，確定網站的欄目內容。規劃出組成網站的所有網頁和每一個網頁的具體內容，包括給每個網頁文件命名。如果你想要學好web前端最好加入一個好的學習環境，可以來這個Q群，首先是132，中間是667，最後是127，這樣大家學習的話就比較方便，還能夠共同交流和分享資料
3.組織素材根據網站內容有目的地收集文字、圖像、動畫、背景音樂等相關素材.進行整理、篩選、加工和製作。採集素材必須與標腸相符.在採集家材的過程中.應注重特色。同時注京把素材文件按類別進行分類.並放置在網站根目錄下的不同文件夾下。
4.網頁布局根據實際情況靈活運用表格、框架和層來設置網貞的布局。重要的一個原則是合理地運用空間.網頁內容疏密有致，井井有條，井注意保持網站的整體風格。開始製作時千萬不要許多頁面一起製作，可以先製作有代表性的一頁，將滅面的結構、圖片的位置、鏈接的方式設計周全，然後復制出許多相同的頁面.再將相應的內容進行填寫。
5.設計外觀在設計站點外觀時，注意要與站點的主題相匹配.如網頁背景、文字顏色.圖片內容要與主題相吻合.文字顏色與背景拼配要易於閱讀等，形式要為主題服務。同時，應注意網站中的所有網頁的外觀要協調統一包括文字字體、網頁色調、導航超鏈接等，可采川CSS樣式來對網站中的網頁的字體進行統一設置，這樣既可提高效率，又能確保風格統一。
6.網頁設計充分利用收集到的數據資料.合理地運用所見即所得的網貞製作軟體提供的技術，如Drcamweaver,完美地製作每一個具體的能表達網站中心思想的Web頁面。
7.網站測試在網頁製作完成後，要對網站進行測試，包括網頁是否能正常顯示，超鏈接是否能正常跳轉.圖片素材是否能正常顯示，聲音能否正常播放等。可以把本地站點的文件夾復制到另外一台機器上進行側試。
8.上傳發布當完成了網站的設計、調試、側試和網貞製作等T.作後.需要把設計好的站點上傳到伺服器來完成整個網站的發布。
E. ui切圖怎麼命名給前端
1、所有命名全部為小寫英文字母
原因是開發小哥哥的代碼裡面全是小寫的英文字母，如何切圖命名成中文的話，會導致開發小哥哥將命名全部更改，這樣會耽誤產品開發的進度。
2、所有命名不得出現大寫以及中文和空格或其他符號，單詞之間用_隔開
切圖格式：Png格式
通用切片命名格式：組件_類別_功能_狀態@2x.png
舉例：
[email protected]（中文對應的是：標簽欄_圖標_主頁_默認@2x.png）
1.工程師在實現我們效果圖的過程中，需要計算好每一個元素的位置，然後再調用我們切好的圖進行填充，那麼在團隊協作過程中首先應該保證切圖輸出能夠滿足工程師設計效果圖的高保真還原的需求；
2.切圖輸出應該盡可能的降低工程師的開發工作量，避免因切圖輸出而導致的不必要的工作量，養成良好的命名習慣，比如可以利用版本命名，亦或時間命名都可以更清晰地標明。
3.一個團隊之間應該統一標准，制定並遵循規范，這樣不管是後期版本的跟新迭代或者是設計師之間的交接，都會方便快捷很多。
F. 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前端工程師。
G. 前端html頁面id命名問題
常用id的命名
(1) 頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
(2) 導航
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
(3) 功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作夥伴：partner
友情鏈接：link
版權：right
H. 前端規范一（命名規范）
前端規范一（命名規范）
1、小駝峰命名法（lowerCamelCase） ：第一個單詞以小寫字母開始，第二個單詞的首字母大寫，例如：firstName、lastName。
2、大駝峰命名法（CamelCase） ：每一個單詞的首字母都採用大寫字母，例如：FirstName、LastName。
3、下劃線命名法（snake_case）：下劃線命名法也叫蛇形法，全由小寫字母和下劃線組成，在兩個單詞之間用下滑線連接。例如：first_name。
4、中劃線命名法（kebab-case）：中劃線命名法也叫串式命名法，各個單詞之間通過下劃線「-」連接。例如：first-name。
強制使用：中劃線命名法
命名規則：1、文件名不得含有空格
2、文件名建議只使用小寫字母，不使用大寫字母
3、文件名包含多個單詞時，單詞之間建議連詞線 ( - ) 分隔
4、有復數結構式，要使用復數
示例：login 、 error-page、 icons
強制使用：全部大寫字母
為了醒目，某些說明文件的文件名，可以使用大寫字母
示例：README
補充說明: README 標准
◎ 項目簡介。
◎ 注意事項。
◎ 線上的示例地址（測試、正式）。
◎ 支持運行的環境。
◎ 必要的依賴准備，以及如何搭建。
◎ 項目的安裝指南。
◎ 相關的文檔鏈接。
◎ 相關人員的聯系方式。
README.md 示例：
強制使用：小駝峰命名法
命名規則：前綴為動詞，見名知意
1、onXxx 監聽事件的回調
2、handleXxx 處理事件
3、getXxx 獲取某個值
4、setXxx 設置某個值
常見場景：
a、事件處理：
(1).事件主動監聽採用 onXxx ,被動處理使用handleXxx
示例：onXxxSubmit: '提交表單'
handleXxxSizeChange: '處理分頁頁數改變'
handleXxxPageChange: '處理分頁每頁大小改變'
onXxxKeydown: '按下鍵'
(2). 其他命名：元素+click、 元素+change、select+范圍
示例：selectAllXxx: '選擇所有'
xxxCellClick: '當某個單元格被點擊時會觸發該事件'
xxxSortChange: '當表格的排序條件發生變化的時候會觸發該事件'
b、增刪改查處理：
增: addXxx 添加子項
createXxx 創建大項
刪: deleteXxx 真刪除
removeXxx 偽刪除
改：updateXxx
查: getXxx 獲取原始數據需要修改
fetchXxx 原始數據
示例：getUserList: '獲取用戶列表', fetchToken: '取得Token', deleteUser: '刪除用戶', removeTag: '移除標簽', updateUserInfo: '更新用戶信息', addUser: '添加用戶', createAccount: '創建賬戶'
c、API介面函數：
get: getXxxApi
post: postXxxApi
patch: patchXxxApi
delect: delectXxxApi
域名：xxxUrl
一般屬性變數 強制使用：小駝峰命名法
1、布爾值
命名規則：前綴為判斷性動詞
hasXxx 判斷是否含有某個值。true：含有此值； false：不含有此值
isXxx 判斷是否為某個值。true：為某個值； false：不為某個值
示例：isShow: '是否顯示', isLoading: '是否處於載入中'， hasToken: '是否包含Token',
2、數組命名
命名規則：使用名詞+List組合
示例: userList: '用戶列表'
3、私有屬性變數
命名規則：前綴為下劃線(_)後面和變數命名一樣。
4、枚舉變數 \textcolor{red}{強制使用：大駝峰命名法}
枚舉的屬性使用全大寫字母，單詞間用下劃線隔開。
示例：let TargetState = { READING: 1, READED: 2, APPLIED: 3, READY: 4 };
5、常量： 強制使用：使用全大寫字母，單詞間用下劃線隔開
強制使用：大駝峰命名法
命名規則： 可參考vue官網風格指南
例如： 1、按照功能來命名
2、應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭，比如 Base、App 或 V。
3、組件名應該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結尾。
示例：components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
強制使用: 中劃線命名法
命名規則：
1.class、id 、標簽、屬性的命名應該盡量精短、明確，必須以字母開頭命名，且全部字母為小寫，單詞之間統一使用中劃線 「-」 連接
2.class必須代表相應模塊或部件的內容或功能，不得以樣式信息進行命名。
3.元素 id 必須保證頁面唯一。
4.禁止創建無樣式信息的 class
示例：
1、盡量不要縮寫、簡寫的單詞。除了 template => tmp、message => msg、image => img、property => prop 這些單詞已經被公認的縮寫
2、可讀性強的命名優先於簡短的命名
3、命名長度最好在 20 個字元以內，避免多長帶來的閱讀不便
4、命名要有具體的含義，避免使用一些泛指和無具體含義的詞
5、不要使用拼音，更不要使用中文
6、正則表達式用 Exp 結尾
7、ref：使用Ref結尾