html和css命名-望文生義

来源:http://www.cnblogs.com/xiao-he-shang/archive/2017/07/09/7140805.html
-Advertisement-
Play Games

HTML+CSS命名規則 在一個內容較多的HTML頁面中,需要設計許多不同的框架,再為這些不同的框架及內容進行分類,給予相應的名稱,從而使得網頁結構更加清晰,也為工作提供了方便。許多新手朋友在設計一個HTML文件時,可能只會依據自己的想法隨便給一些簡單的名稱,但若是一味的亂起名稱,不僅會讓團隊的伙伴 ...


HTML+CSS命名規則

   在一個內容較多的HTML頁面中,需要設計許多不同的框架,再為這些不同的框架及內容進行分類,給予相應的名稱,從而使得網頁結構更加清晰,也為工作提供了方便。許多新手朋友在設計一個HTML文件時,可能只會依據自己的想法隨便給一些簡單的名稱,但若是一味的亂起名稱,不僅會讓團隊的伙伴看不明白,還會導致標簽名稱混亂,這樣會使得代碼維護十分困難,是非常不利於管理的。所以我們在設計整個網站,還是一個單獨的HTML頁面,都應該要有良好的命名規則。在本文中,主要講解CSS命名規則,這也包括了對HTML標簽命名

   文件名稱必須由英文字母開頭,通常命名的規則是根據內容的分類和框架的類型翻譯成英文單詞來命名,例如:div id="nav"(表示為這個div是個導航條),所有單詞應當用小寫字母,名稱中可以使用數字,或下劃線,例如:div="main_piclist"(表示主要內容下的圖片列表)、div="nav_bg.jpg"(表示導航條的背景圖),還可以使用中劃線進行名稱之間的連接,例如:div="main-left"(表示左側內容的佈局)所有命名要儘量避免使用中文字元,要以最少的字母達到最容易理解的含義,除非一看即懂,否則儘量不縮寫。

HTML標簽的命名/CSS標準化命名大全

頁面結構命名

  1. page:代表整個頁面,用於最外層。
  2. wrap:外套,將所有元素包在一起的一個外圍包,用於最外層
  3. wrapper:頁面外圍控制整體佈局寬度,用於最外層
  4. container:一個整體容器,用於最外層
  5. head、header:頁頭區域,用於頭部
  6. nav:導航條
  7. content:內容,網站中最重要的內容區域,用於網頁中部主體
  8. main:網站中的主要區域(表示最重要的一塊位置),用於中部主體內容
  9. column:欄目
  10. sidebar:側欄
  11. foot、footer:頁尾、頁腳。網站一些附加信息放置區域,(或命名為copyright)用於底部

導航命名

  1. nav、navbar、navigation、nav-wrapper:導航條或導航包,代表橫嚮導航
  2. topnav:頂部導航
  3. mainbav:主導航
  4. subnav:子導航
  5. sidebar:邊導航
  6. leftsidebar 或 sidebar_a :左導航
  7. rightsidebar 或 sidebar_b:右導航
  8. title:標題
  9. summary:摘要/li>
  10. menu:菜單。區域包含一般的鏈接和菜單
  11. submenu:子菜單
  12. drop:下拉
  13. dorpmenu:下拉菜單
  14. links:鏈接菜單

功能命名

  1. logo:標記網站logo標誌
  2. banner:標語、廣告條、頂部廣告條
  3. login:登陸,(例如登錄表單:form-login)
  4. loginbar:登錄條
  5. regsiter:註冊
  6. tool、toolbar:工具條
  7. search:搜索
  8. searchbar:搜索條
  9. searchlnput:搜索輸入框
  10. shop:功能區,表示現在的
  11. icon:小圖標
  12. label:商標
  13. homepage:首頁
  14. subpage:二級頁面子頁面
  15. hot:熱門熱點
  16. list:文章列表,(例如新聞列表:list-news)
  17. scroll:滾動
  18. tab:標簽
  19. sitemap:網站地圖
  20. msg 或 message:提示信息
  21. current:當前的
  22. joinus:加入
  23. status:狀態
  24. btn:按鈕,(例如搜索按鈕可寫成:btn-search)
  25. tips:小技巧
  26. note:註釋
  27. guild:指南
  28. arr、arrow:標記箭頭
  29. service:服務
  30. breadcrumb:(即頁面所處位置導航提示)
  31. download:下載
  32. vote:投票
  33. siteinfo:網站信息
  34. partner:合作伙伴
  35. link、friendlink:友情鏈接
  36. copyright:版權信息
  37. siteinfoCredits:信譽
  38. siteinfoLegal:法律信息

CSS樣式命名

  1. 對齊樣式命名:left(左邊內容)、center(中間內容)、right(右邊內容)等;
  2. 顏色英文命名:red(紅色)、green(綠色)、yellow(黃色),又或者border_red(紅色邊框)等;
  3. 顏色代碼命名:f00(紅色)、ff0(黃色)、f90(橙色)等;
  4. 文字大小命名:font12px(字體12像素)、font16px(字體16像素)等;
  5. 頁麵線條命名:line_x (橫線)、line_y (縱線)或 line_red(紅線)、line_black(黑線)
  6. 圖片圖標命名:pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
  7. 頁面廣告命名:ad_01、ad_02
  8. 背景框架命名:nav_bg(代表導航條的背景圖片位置)、tool_bg(代表工具欄的背景圖片位置)

CSS樣式表命名

  1. index.css:單獨為首頁建立樣式
  2. head.css:頭部樣式,多個頁面頭部設計風格相同時使用。
  3. base.css:共用樣式。
  4. style.css:獨立頁面所使用的樣式文件。
  5. global.css:頁面樣式基礎,全局公用樣式,頁面中必須包含。
  6. layout.css:佈局、版面樣式,公用類型較多時使用,一般用在首頁級頁面和產品類頁面中
  7. module.css:模塊,用於產品類頁,也可與其它樣式配合使用。
  8. master.css:主要的樣式表
  9. columns.css:專欄樣式
  10. themes.css:主體樣式
  11. forms.css:表單樣式
  12. mend.css:補丁,基於以上樣式進行的私有化修補。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.正則表達式 js 中判斷某個元素是否存在於某個 js 數組中,相當於 PHP 語言中的 in_array 函數。 Array.prototype.in_array=function(e){ var r=new RegExp(','+e+','); return (r.test(','+this. ...
  • 1.xhtml和html有什麼區別 HTML是一種基本的WEB網頁設計語言,XHTML是一個基於XML的置標語言 最主要的不同: XHTML 元素必須被正確地嵌套。 XHTML 元素必須被關閉。 標簽名必須用小寫字母。 XHTML 文檔必須擁有根元素 2、簡述一下src與href的區別: href ...
  • 如果你是一個人在自學前端開發,或者是對前端開發有比較濃厚的興趣正想踏入前端領域,只要你在前端自學路上遇到了自己無法解決的技術難題,那麼儘管將你的疑惑交給我的小伙伴兒們吧,我們都是一群在前端自學路上摸爬滾打的有志青年,希望你可以來和我們共同交流。同時也希望你能獻出自己的一份力,幫助我的小伙伴兒們解決他 ...
  • 上一篇的gulp配置很簡單,主要就是為了demo的查看和調試,這一篇則會相對詳細一些,包括壓縮合併打時間戳等。 在互聯網環境比較好的城市,需要多人協作的,大一點的項目應該都用上了模塊化(這裡主要指commonjs和ES6模塊系統,不是再早的require.js和sea.js)。代碼也會更註重如何分離 ...
  • 摘要: 前端框架 Bootstrap 的模態對話框,可以使用 remote 選項指定一個 URL,這樣對話框在第一次彈出的時候就會自動從這個地址載入數據到 .modal-body 中,但是它只會載入一次,不過通過在事件中調用 removeData() 方法可以解決這個問題。 1. Bootstrap ...
  • 1、對於string,number等基礎類型,==和 是有區別的 1)不同類型間比較,==之比較“轉化成同一類型後的值”看“值”是否相等, 如果類型不同,其結果就是不等 2)同類型比較,直接進行“值”比較,兩者結果一樣 2、對於Array,Object等高級類型,==和 是沒有區別的 進行“指針地址 ...
  • 上次分享完該系列文章後有朋友也建議說1.x版本除了維護也沒有必要學習,可以學習2.0開始學習,我也知道1.x無論是從性能還是架構上都沒有2.x好,但是我想因為現在也有一些朋友還在用1.x版本,因為1.x升級到2.x難度很大,甚至可以說重構,就向我們公司現在還在用1.x版本,所以我還是決定把這系列寫完 ...
  • React在Github上已經有接近70000的 star 數了,是目前最熱門的前端框架。而我學習React也有一段時間了,現在就開始用 React+Redux 進行實戰! React 實踐項目 (一)本次實踐代碼 部署好的網址 上回說到用React寫了一個帶Header的首頁,我們這次實踐就使用R ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...