前端html頁面中的命名規范


項目中文件名字

1:符合應用場景
2:一律使用小寫英文字母,統一要求;英文,禁止中文拼音。
3:命名原則:使團隊成員可以看懂自己代碼;自己也方便查找並修改

xxx.html文件的命名

1:主頁面 index.html
2: 子頁面:首頁:homme.html 我的 mine.html 關於我們:aboutus.html 信息反饋 feedback
產品 product 購物 shop 計數器 count
3: 一級頁面: 登錄:login.html login.css login.js
注冊: resign.html
用戶管理:userManage.html

圖片的命名規則

1:圖片文件的后綴 xxx.png xx.jpg xxxx.gif xxx.bmp

圖片的名稱分為頭尾兩例如:廣告、標志、菜單、按鈕部分,用下划線隔開,頭部分表示此圖片的大類

大類例如:廣告、標志、菜單、按鈕

放在頁面頂部的【廣告】 【banner】
企業商標 【標志】性的圖片 【logo】
在頁面上某一個位置連續出現,性質相同的鏈接欄目的圖片我們取名: 【menu】
裝飾用的照片我們取名: 【pic】
【不帶鏈接】表示【標題的圖片】我們取名: 【title】
范 例 : banner_ sohu.gif
banner_sina.gif
menu_aboutus.gif
menutitle_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_iphone.jpg
pic_TV.jpg

文件夾存放規范

  • www 或者 web 存放前端代碼文件
    • css 存放 xxx.css 文件
    • src 存放 xxx。js文件
    • views 或者 pages 存放 xxx.html 或者 xxx.vue 文件
    • assetes 存放所有【資源文件】
      • images 存放圖片文件
      • library 存放【第三方庫】文件
      • media 存放媒體文件
    • build 存放經過【自動化構建工】或者【自動化打包工具】處理后的文件
  • serve 存放服務端代碼文件
    • api 存放【接口文件】
    • modules 存放 【數據庫操作】文件


css 書寫規范 性能優化方案

1:禁止class 與id 重名
2:書寫順序:布局定位屬性–>自身屬性–>文本屬性–>其他屬性

.box{
    /* 布局定位類 */
    float:left;
    /* 自身屬性 */
    width:100px;
    height:100px;
    /* 文本類 */
    text-align:left;
    /* 其他屬性 */
    background:red;
}

  

CSS優化

1: 全局考慮樣式;提你高代碼重復使用
2:多使用兼容性好的樣式 css2
3: 減少使用功能position absolute fixed 屬性;
4: 重要圖片 加【alt】 重要標簽加【title屬性】
5:合理使用選擇器;盡量少使用偽類選擇器 nth:type-of-child()
6: 不到萬不得已;不要用 !important 權重最高
8:盡量使用復合屬性 magin border

 

css 命名規范

頁面結構

1 容器: container/wrap
2  整體寬度:wrapper
3  頁頭:header
4  內容:content
5  側欄:sidebar
6  欄目:column
7  中間內容:center

導航

  1 導航:nav
  2 主導航:mainNav /gloabNav   main_nav/gloab_nav  main-nav/gloab-nav
  3 子導航:subNav  sub_nav sub-nav 
  4 頂部導航 topNav top_nav  top-nav
  5 邊部導航 sideBar side_nav side-nav
  6 左邊導航:leftSideBar left_side_nav left-side-nav
  7 右邊導航:rightSideBar 
  8 邊導航圖片 sideBarIcon
  9 菜單 menu
 10 子菜單 subMenu   sub_menu  sub-menu
 11 
 12 標志:logo 
 13 登陸:login
 14 登錄條:loginbar
 15 注冊:regsiter
 16 產品:products
 17 產品價格:products_prices
 18 產品評論:products_review 
 19 編輯評論:editor_review
 20 最新產品:news_release
 21 最新產品:news_release
 22 廣告/標語:banner
 23 摘要:summary
 24 生產商:publisher
 25 縮略圖:screenshot
 26 常見問題:faqs
 27 關鍵詞:keyword
 28 博客:blog
 29 論壇:forum
 30 搜索:search 
 31 搜索輸入框:search_input
 32 搜索輸出:search_output 
 33 搜索結果:search_results
 34 加入我們:joinus 
 35 狀態:status
 36 按鈕:btn 
 37 滾動:scroll
 38 標簽頁:tab 
 39 文章列表:list
 40 提示信息:msg/message 
 41 當前的: current
 42 小技巧:tips 
 43 皮膚:skin
 44 充值:pay 
 45 活動:activities
 46 推廣:promotion 
 47 公告:announcement
 48 排行:ranking 
 49 公司簡介:company_profile
 50 公司設備:equipment 
 51 公司榮譽:glories
 52 企業文化:culture 
 53 企業規模:scale
 54 營銷網絡:sales_network 
 55 組織機構:organization
 56 技術力量:technology 
 57 分支機構:branches
 58 企業資質:enterprise_qualification 
 59 公司實力:strength_strength
 60 經營理念:operation_principle 
 61 經理致辭:manager_oration
 62 發展歷程:development_history 
 63 工程案例:engineering_projects
 64 分類瀏覽:browse_by_category 
 65 應用領域:application_fields
 66 人力資源:human_resource_hr 
 67 領導致辭: leader_oration
 68 客戶留言:customer_message 
 69 客戶服務:customer_service
 70 您的要求:your_requirements 
 71 銷售信息:sales_information
 72 招商:enterprise_establishing 
 73 教育培訓:education_training
 74 在線交流:online_communication 
 75 質量認證:quality_certification
 76 合作加盟:joinIn_cooperation 
 77 產品描述:products_description
 78 業務范圍:business_scope 
 79 產品銷售:sales_sales
 80 聯系我們:contact_us 
 81 信息發布:information
 82 
 83 返回首頁:homepage 
 84 產品定購:order
 85 電子商務:e_business
 86  版權所有:copy _right
 87 友情連結:hot_link 
 88 行業新聞:trade_news
 89 行業動態:trends 
 90 郵編:postal_code_zipcode
 91 新聞動態:news_trends 
 92 公司名稱:company_name
 93 銷售熱線:sales_hotline 
 94 聯系人:contact_person
 95 建設中:in_construction 
 96 證書:certificate
 97 地址:add 
 98 電話:tel
 99 傳真:fax 
100 產品名稱:product_name
101 產品說明:description 
102 價格:price
103 品牌:brand 
104 規格:specification
105 尺寸:size 
106 生產廠家:manufacuturer
107 型號:model
108 產品標號:item_no
109 技術指標:technique_data 
110 產品描述:description
111 產地:production_place 
112 用途:application
113 論壇:forum 
114 在線訂購:on_line_order
115 招標:bidInviting 
116 綜述:general
117 業績:achievements 
118 大事:great_event
119 動態:trends 
120 服務:service
121 投資:investment 
122 行業:industry
123 規划:programming 
124 環境:environment
125 發送:delivery 
126 提交:submit
127 重寫:reset 
128 社區:community
129 業務:business 
130 在線調查:online_inquiry
131 下載中心:download 
132 意見反饋:feedback
133 常見問題:faq 
134 中心概況:general_profile
135 游樂園:amusement_park 
136 專題報道:special_report
137 圖標: icon 
138 注釋:note
139 指南:guild 
140 服務:service
141 熱點:hot 
142 新聞:news
143 下載:download 
144 投票:vote
145 商標:label/branding 
146 當前位置:breadcrumb/loc
147 購物車:shop 
148 標簽:tag
149 信譽:siteinfo_credits 
150 網站信息:siteinfo
151 法律聲明:siteinfo_legal 
152 合作伙伴:partner
153 友情鏈接:friendlink 
154 版權:copyright


————————————————
版權聲明:本文為CSDN博主「wgaoxian」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/wgaoxian/article/details/102708937


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM