HTML項目代碼編寫規(guī)范_html/css_WEB-ITnose
Jun 24, 2016 am 11:45 AM
如果本文檔中有任何錯誤的、不符合行規(guī)的，敬請斧正。
引言
不管有多少人共同參與同一項目，一定要確保每一行代碼都像是同一個人編寫的。
若您對本文檔中任何內容有不明白的，或者感覺不合行規(guī)的，請您按以下格式向我郵件說明，同時也歡迎任何人參與討論，共同完善本文檔。本文檔中很多也是根據(jù)我自己現(xiàn)在的公司需求來定的。
郵件不是QQ，請盡可能清晰的組織你的語言，將問題描述得更清楚，同時，不要使用過多的樣式化，合乎文檔排版標準，謝謝。
項目文件結構
前端項目文件結構
前端項目統(tǒng)一按以下目錄結構管理項目文件：
/path/to/PROJECT_NAME/ scss/ base.scss main.scss _module_name.scss scripts/ build.js gulp.js build/ vendor/ THIRD_PARTY_LIBRARY_NAME/ VERSION/ MINIFIED_FILE_NAME/ assets/ css/ base.min.css base.min.map main.min.css main.min.map img/ logo.png logo@2x.png logo@3x.png js/ main.min.js main.min.map index.html layout.html PAGE_NAME.html template/ vendor/ THIRD_PARTY_LIBRARY_NAME/ VERSION/ MINIFIED_FILE_NAME/ assets/ css/ base.css main.css img/ logo.png js/ main.js index.html layout.html PAGE_NAME.html
在上面的目錄結構中，大寫的名稱為可變的，即根據(jù)具體需求隨時更換，它們的語義分別為：
-
PROJECT_NAME
當前項目的英文名稱（若叮當錢包官方無法給出標準翻譯，或者拼音即是其名稱，則使用拼音全稱，或者使用其官方定義的短名稱），由純小寫字母 a-z 或者數(shù)字 0-9 以及中劃線 - 組成的字符串
-
template
模板目錄，用于開發(fā)使用
-
build
構建目錄
-
vendor
所有第三方的文件均存放在 vendor 目錄中，在 vendor 中，任何第三方庫、樣式、腳本等均需要遵守以下規(guī)則存放：任何一個第三方庫均需要存放在其名稱下，在開發(fā)過程中，使用 bower 安裝。
HTML標準說明
文檔類型
任何一個HTML頁面，均必須使用下面這個文檔類型聲明：
<!DOCTYPE html>
在叮當錢包的任何項目的 HTML 界面中，不允許出現(xiàn)該聲明之外的任何聲明。
合法性驗證
合法的使用HTML，并利用w3c的工具（W3C HTML validator）進行檢查。
語義性
根據(jù)目的合理使用HTML標簽，例如 header、footer、nav、section 等標簽，跟 div 十分類似，但是在語義上卻有天壤之別，比如下面這樣：
<article class="entry"> <header> <h1>讀《雙城記》</h1> </header> <section class="content"> <p><strong>《雙城記》</strong>（英語：<em>A Tale of Two Cities</em>）是英國作家查爾斯·狄更斯所著的一部以法?大革命為背景所寫成的長篇歷史小說，情?感人肺腑，是世界文??典名著之一，故事中?巴黎、?敦??大城市??起?，圍繞著曼奈特醫(yī)生一家和以德法奇夫婦為首的圣安東尼區(qū)展開故事。小說里描寫了貴族如何敗壞、如何殘害百姓，人民心中積壓對貴族的刻骨仇恨，導致了不可避免的法國大革命。本書的主要思想是為了愛而自我犧牲，?名中的「?城」指的是<strong>巴黎??敦</strong>。</p> <h2>人物介?</h2> <ul> <li>曼奈特?生（Dr. Alexandre Manette），一位老政治犯。</li> <li>露西·曼奈特（Lucie Manette），曼奈特?生的女?。</li> <li>查?斯·丹尼（Charles Darney），厄弗?蒙地侯爵的?子，?上露西·曼奈特。</li> <li>雪尼?卡?（Sydney Carton），一位?世嫉俗的律?，?上露西·曼奈特。</li> <li>德法奇（Ernest Defarge），曼奈特?生?日的?人。</li> <li>德法奇夫人（Madame Defarge/Teresa Defarge），一位?定的女革命者。</li> <li>?翰·拔沙（John Barsad），一位??。他的真?名字是索??（Solomon Pross） ，是波希小姐（Miss Pross）的哥哥。</li> <li>波希小姐（Miss Pross），露西的保姆。</li> <li>??·?利（Roger Cly），另一位??，?翰·拔沙的夥伴</li> </ul> </section></article><!-- /.entry -->
協(xié)議頭
建議在指向圖片、樣式表、JavaScript腳本或者其它媒體文件的URL地址中省略 http: 與 https: 協(xié)議部分，除非已知相應文件不能同時兼容這兩個協(xié)議，比如：
我們不推薦下面這種方式：
<script src="http://www.doraemoney.com/vendor/jquery/2.1.3/jquery.min.js"></script><link rel="stylesheet" href="http://assets/css/style.css"/><style> .example { background: #fff url(http://www.doraemoney.com/assets/img/example-background.png) no-repeat center; }</style> 你應該像下面這樣寫：
<script src="//www.doraemoney.com/vendor/jquery/2.1.3/jquery.min.js"></script><link rel="stylesheet" href="//assets/css/style.css"/><style> .example { background: #fff url(//www.doraemoney.com/assets/img/example-background.png) no-repeat center; }</style> 另外的示例，比如通過 
標簽引入圖片，我們同樣不推薦這樣寫：
<img class="logo lazy" src="/static/imghw/default1.png" data-src="http://www.doraemoney.com/assets/img/logo.png" alt="叮當錢包"/>
而應該這樣寫：
<img class="logo lazy" src="/static/imghw/default1.png" data-src="//www.doraemoney.com/assets/img/logo.png" alt="叮當錢包"/>
代碼縮進
不允許在任何 HTML、CSS 以及 JavaScript 代碼中使用 Tab 進行縮進，且所有的縮進只允許使用兩個空格 __ ，如下面這樣是正確的：
<a class="brand"> <img src="/static/imghw/default1.png" data-src="//www.doraemoney.com/assets/img/logo.png" class="lazy" alt="叮當錢包" /></a>
而下面這樣均為錯誤的：
<a class="brand"> <img src="/static/imghw/default1.png" data-src="//www.doraemoney.com/assets/img/logo.png" class="lazy" alt="叮當錢包" /></a>
大小寫
所有的代碼都應該是小寫的，包括元素名稱、屬性、屬性值（除非 text 或者 CDATA 的內容）、選擇器、CSS屬性以及屬性值，如下面這樣均是錯誤的：
<A HREF="http://www.doraemoney.com" TITLE="叮當錢包官方網站首頁" CLASS="Brand"/>叮當錢包</A>
正確的寫法應該是：
<a href="http://www.doraemoney.com" title="叮當錢包官方網站首頁" class="brand">叮當錢包</a>
對于資源文件的命名，我們同樣要求全部使用純小寫字母，同時，多個單詞間使用中橫線分割（-），同時，不允許在命名中出現(xiàn)空格，英文字母必須放在第一個位置， - 不允許出現(xiàn)在名稱格式后綴小數(shù)點 . 的前面，如下面這樣就是正確的命名方法：
logo.pngexample-background.pngassets/css/base.css
而下面這些均是錯誤的：
logo-.png-logo.png0logo.pngexample background.pngExample-Background.pngExampleBackground.pngAssets/Css/Base.css
尾隨空格
尾隨空格是絕對不允許的，容易讓 diff 更加復雜，比如下面這樣是不允許的：
<h2>什么是叮當錢包？ </h2><p>叮當錢包的命名靈感來源于哆啦A夢的四次元口袋，叮當希望自己也可以像這個神奇口袋一樣，在小伙伴需要幫助時，伸出溫暖援（圓）手，給予大家“無所不能”的幫助。</p>
下面這樣才是正確的：
<h2>什么是叮當錢包？</h2><p>叮當錢包的命名靈感來源于哆啦A夢的四次元口袋，叮當希望自己也可以像這個神奇口袋一樣，在小伙伴需要幫助時，伸出溫暖援（圓）手，給予大家“無所不能”的幫助。</p>
注意仔細觀察，在 h2 標簽中 ？ 號后面有無空格。
編碼格式
所有的文件，包括 .html、.css、.js、scss、less 等，必須全部使用 utf-8 編碼格式，如下面這樣的是正確的：
<head> <meta charset="utf-8" /></head>
代碼注釋
任何編寫代碼的人都必須根據(jù)需要撰寫代碼注釋，對于團隊開發(fā)來說，這是非常重要的，比如下方是HTML的注釋規(guī)范：
<!-- 這是單行注釋 --><div class="foo"></bar><!-- 這是多行注釋的標題 這是多行注釋中的一行-->
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
使用HTML按鈕元素實現(xiàn)可點擊按鈕
Jul 07, 2025 am 02:31 AM
要使用HTML的button元素實現(xiàn)可點擊按鈕，首先需掌握其基本用法與常見註意事項。 1.使用標籤創(chuàng)建按鈕，並通過type屬性定義行為（如button、submit、reset），默認為submit；2.通過JavaScript添加交互功能，可內聯(lián)寫法或通過ID綁定事件監(jiān)聽器以提升維護性；3.利用CSS自定義樣式，包括背景色、邊框、圓角及hover/active狀態(tài)效果，增強用戶體驗；4.注意常見問題：確保未啟用disabled屬性、正確綁定JS事件、避免佈局遮擋，並藉助開發(fā)者工具排查異常。掌握這
在HTML頭部元素中配置文檔元數(shù)據(jù)
Jul 09, 2025 am 02:30 AM
HTMLhead中的元數(shù)據(jù)對SEO、社交分享和瀏覽器行為至關重要。 1.設置頁面標題與描述，使用和並保持簡潔唯一；2.添加OpenGraph與Twitter卡片信息以優(yōu)化社交分享效果，注意圖片尺寸並使用調試工具測試；3.定義字符集與視口設置確保多語言支持與移動端適配；4.可選標籤如作者版權、robots控制及canonical防止重複內容也應合理配置。
2025年初學者的最佳HTML教程
Jul 08, 2025 am 12:25 AM
TolearnHTMLin2025,chooseatutorialthatbalanceshands-onpracticewithmodernstandardsandintegratesCSSandJavaScriptbasics.1.Prioritizehands-onlearningwithstep-by-stepprojectslikebuildingapersonalprofileorbloglayout.2.EnsureitcoversmodernHTMLelementssuchas,
HTML用於電子郵件模板教程
Jul 10, 2025 pm 02:01 PM
如何製作兼容性好的HTML郵件模板？首先要用表格（table）搭建結構，避免使用div flex或grid佈局；其次所有樣式必須內聯(lián)化，不可依賴外部CSS；接著圖片要加alt說明並使用公網URL，按鈕應使用帶背景色的table或td模擬；最後務必在多個客戶端測試並調整細節(jié)。
如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關聯(lián)？
Jul 07, 2025 am 02:30 AM
使用HTML的和可以直觀且語義清晰地為圖片或媒體添加說明文字。 1.用於包裹獨立的媒體內容，如圖片、視頻或代碼塊；2.則作為其說明文字，置於內部，可位於媒體上方或下方；3.它們不僅提升頁面結構清晰度，還增強可訪問性和SEO效果；4.使用時應注意避免濫用，適用於需強調並附帶說明的內容，而非普通裝飾圖；5.不可忽視的alt屬性，它與figcaption的作用不同；6.figcaption位置靈活，可根據(jù)需要放在figure內頂部或底部。正確使用這兩個標籤，有助於構建語義清晰、易於理解的網頁內容。
如何在沒有服務器的情況下處理HTML中的表單提交？
Jul 09, 2025 am 01:14 AM
沒有後端服務器時，仍可通過前端技術或第三方服務處理HTML表單提交。具體方法包括：1.使用JavaScript攔截表單提交以實現(xiàn)輸入驗證和用戶反饋，但數(shù)據(jù)不會持久化；2.借助如Formspree等第三方無服務器表單服務收集數(shù)據(jù)並提供郵件通知和重定向功能；3.利用localStorage進行客戶端臨時數(shù)據(jù)存儲，適合保存用戶偏好或管理單頁應用狀態(tài)，但不適合敏感信息的長期保存。
HTML中最常用的全局屬性是什麼？
Jul 10, 2025 am 10:58 AM
class、id、style、data-、title是HTML中最常用的全局屬性。 class用於指定一個或多個類名以方便樣式設置和JavaScript操作；id為元素提供唯一標識符，適用於錨點跳轉和JavaScript控制；style允許添加內聯(lián)樣式，適合臨時調試但不推薦大量使用；data-屬性用於存儲自定義數(shù)據(jù)，便於前後端交互；title用於添加鼠標懸停提示，但其樣式和行為受限於瀏覽器。合理選擇這些屬性可提升開發(fā)效率和用戶體驗。
在HTML中實現(xiàn)圖像的本機懶負荷
Jul 12, 2025 am 12:48 AM
原生懶加載是一種瀏覽器內置功能，通過在標籤中添加loading="lazy"屬性實現(xiàn)延遲加載圖片。 1.它無需JavaScript或第三方庫，直接在HTML中使用；2.適合用於頁面下方非首屏顯示的圖片、圖片畫廊滾動加載項和大型圖片資源；3.不適合首屏圖片或display:none的圖片；4.使用時應設置合適的佔位空間以避免佈局抖動；5.應結合srcset和sizes屬性優(yōu)化響應式圖片加載；6.需要考慮兼容性問題，部分舊瀏覽器不支持，可通過特性檢測並結合JavaScript方案作
