標籤：ade 快速 十六 ott tip 排序 site 問題 column
HTML和CSS編碼規範內容一、HTML規範二、CSS規範三、注意事項：四、常用的命名規則五、CSS樣式表檔案命名六、檔案命名規則一、HTML規範：1.代碼規範頁面的第一行添加標準模式聲明 <!DOCTYPE html>代碼縮排：tab鍵設定四個空格（通常在軟體右下角設定相應空格大小）html中除了開頭的DOC和 ‘UTF-8‘或者head裡特殊情況可以大寫外，其他都為小寫，css類都為小寫建議為 html 根項目指定 lang 屬性，從而為文檔設定正確的語言 lang="zh-CN"不同doctype在不同瀏覽器下會觸發不同的渲染模式 <meta http-equiv="X-UA-Compatible" content="IE=Edge"><!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"></head>....</html>不要使用@import 與 <link> 標籤相比，@import 指令要慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。替代辦法有以下幾種：使用多個 <link> 元素通過 Sass 或 Less 類似的 CSS 前置處理器將多個 CSS 檔案編譯為一個檔案通過 Rails、Jekyll 或其他系統中提供過 CSS 檔案合并功能<!-- Use link elements --><link rel="stylesheet" href="core.css"> <!-- Avoid @imports --><style>@import url("more.css");</style> 引入 CSS 和 JavaScript 檔案根據HTML5規範, 通常在引入CSS和JS時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的預設值
<!-- External CSS --><link rel="stylesheet" href="code-guide.css"> <!-- In-document CSS --><style>/* ... */</style> <!-- JavaScript --><script src="code-guide.js"></script>2.注釋<!--注釋內容--!>注意：--後不要留空格，若留空格，其他注釋全加空格（方便後續程式開發）換句話說，注釋要全域統一
eg:<!-- Better --!><!--S 注釋內容--!>為書寫規範，最好每一個需要注釋都需要開頭和結尾，減少後續麻煩和錯誤。不要換行。CSS、JS注釋亦然。 <!--E 注釋內容--!><!-- No so great --!><!--S 注釋內容--!>為書寫規範，最好每一個需要注釋都需要開頭和結尾，減少後續麻煩和錯誤。不要換行。CSS、JS注釋亦然。 <!--E 注釋內容--!>3.命名規範class用 “-” ；ID用 “_” ；name:data-自訂名；根據內容書寫語義化編碼：可用以項目名簡寫開頭-語義化名稱
eg: class="tb-head"; id="tb_head"; data-head="tb-head";4.屬性排序（方便背景程式員整理代碼)1、根據屬性定義排序 : class,id,name排序 （建議用此方法）(class用於標識高度可複用組件，因此排首位，id用於標識具體組件，慎用，因此排第二位)class [強制]class用中劃線 ‘ - ‘ 區分id, name [強制]ID用底線 ‘ _ ‘ 區分data-*src, for, type, hreftitle, altaria-*, roleeg:<a class="..." id="..." data-modal="toggle" href="#">Example link</a> <input class="form-control" type="text"> <img src="..." alt="..."> 2、特殊屬性可根據元素跟隨排序，後根據（1）方法排序eg:<a href="#" class="..." id="..."</a>Example link</a> <input type="text" class="...">3、根據字母開頭順序排序eg:
<a class="bfl-head" data-head="bfl-head" href="javascript:;" id="bfl_head"></a>根據自己理解排序。5.減少標籤量
<!-- Not so great --><span class="avatar"><img src="..."></span> <!-- Better --><img class="avatar" src="...">6.布爾型屬性布爾型屬性可以在聲明時不賦值。XHTML 規範要求為其賦值，但是 HTML5 規範不需要。換句話說，不用賦值。
<input type="text" disabled> <input type="checkbox" value="1" checked> <select><option value="1" selected>1</option></select>二、css規範1、文法1.1、縮排[強制]使用 4 個空格做為一個縮排層級，不允許使用 2 個空格 或 tab 字元。1.2、空格[強制]為了代碼易讀性，每個聲明塊的左花括弧前添加一個空格[強制]每條聲明語句的" : "後應該插一個空格[強制]屬性多值每個逗號後應該插入空格 eg:box-shadow,border-image[強制]不要在rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號後面插入空格對於屬性值或顏色參數，省略小於 1 的小數前面的 0 （例如，.5 代替 0.5；-.5px 代,替 -0.5px）1.3、選取器[強制]為選取器分組時，將單獨的選取器單獨存放在一行 eg:tr,td{}[強制] >、+、~ 選取器的兩邊各保留一個空格。[強制]為選取器中的屬性添加雙引號 不允許單引號例如，input[type="text"]。只有在某些情況下是可選的，但是，為了代碼的一致性，建議都加上雙引號。[強制] 如無必要，不得為 id、class 選取器添加類型選取器進行限定。[建議] 選取器的嵌套層級應不大於 3 級，位置靠後的限定條件應儘可能精確。eg:
/* good */#error,.danger-message {font-color: #c00;}#username input {}.comment .avatar {} /* bad */dialog#error,p.danger-message {font-color: #c00;}.page .header .login #username input {}.comment div * {}1.4、行[強制]每行不得超過 120 個字元，除非單行不可分割。[強制]聲明塊右花括弧應當成行[建議] 對於超長的樣式，在樣式值的 空格 處或 , 後換行，建議按邏輯分組。eg:background:url(....) 此處應有換行 no-repeat;1.5、屬性[強制] 屬性定義必須另起一行。[強制] 屬性定義後必須以分號結尾。即每條聲明應單獨成行，以分號結尾[建議] 在可以使用縮寫的情況下，盡量使用屬性縮寫。eg:font: 12px/1.5 arial, sans-serif;1.6、首碼[強制] 帶私人首碼的屬性由長到短排列，按冒號位置對齊。[建議] 可以給選取器添加一個表示狀態的首碼，讓語義更明了，比如是添加了“.is-”首碼。1.7、簡寫十六進位值應該全部小寫,儘可能簡寫 eg:#fff.避免為 0 值指定單位例如，用 margin: 0; 代替 margin: 0px;
/* Bad CSS */main>nav {padding: 10px;}.selector, .selector-secondary, .selector[type=text] { padding:15px;margin:0px 0px 15px;background-color:rgba(0, 0, 0, 0.5);box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF}.selector, .selector-secondary, .selector[type=text] {padding:15px;margin:0px 0px 15px;} /* Good CSS */main > nav {padding: 10px;}.selector,.selector-secondary,.selector[type="text"] {padding: 15px;margin-bottom: 15px;background-color: rgba(0,0,0,.5);background:transparent url(aVeryVeryVeryLongUrlIsPlacedHere)no-repeat 0 0;box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;}2.注釋/* 注釋內容 */注意：*後不要留空格，若留空格，其他注釋全加空格（方便後續程式開發）換句話說，注釋要全域統一
eg: /* S 注釋內容 */為書寫規範，最好每一個需要注釋都需要開頭和結尾，減少後續麻煩和錯誤。不要翻行。CSS、JS注釋亦然。/* E 注釋內容 */3.命名規範1.應用 英文縮寫命名法，杜絕用中文拼音或者中文拼音縮寫（這是因為英文具有簡易性，必要時可上網搜尋國際縮寫英文）2. 只能出現小寫字元或者中劃線（破折號符），不用底線，駝峰命名法。eg: .btn 或者 .btn-danger3.避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思4.class 名稱應當儘可能短，並且意義明確。使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。基於最近的父 class 或基本（base） class 作為新 class 的首碼。使用 .js-* class 來標識行為（與樣式相對），並且不要將這些 class 包含到 CSS 檔案中。在為 Sass 和 Less 變數命名是也可以參考上面列出的各項規範。/* Bad example */.t { ... }.red { ... }.header { ... } /* Good example */.tweet { ... }.important { ... }.tweet-header { ... } 4.選取器對於通用元素使用 class ，這樣利於渲染效能的最佳化。對於經常出現的組件，避免使用屬性選取器（例如，[class="..."]）。瀏覽器的效能會受到這些因素的影響。選取器要儘可能短，並且盡量限制組成選取器的元素個數，建議不要超過 3 。只有在必要的時候才將 class 限制在最近的父元素內（也就是後代選取器）（例如，不使用帶首碼的 class 時 -- 首碼類似於命名空間）。/* Bad example */span { ... }.page-container #stream .stream-item .tweet .tweet-header .username { ... }.avatar { ... } /* Good example */.avatar { ... }.tweet-header .username { ... } //不要超過3個.tweet .avatar { ... }5.聲明順序5.1. 相關的屬性聲明應當歸為一組，並按照下面的順序排列：* Positioning* Box model* Typographic* Visual由於定位（positioning）可以從正常的文檔流中移除元素，並且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型排在第二位，因為它決定了組件的尺寸和位置。其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在後面。 eg:.declaration-order {/* Positioning */position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 100; /* Box-model */ display: block;float: right;width: 100px;height: 100px; /* Typography */font: normal 13px "Helvetica Neue", sans-serif;line-height: 1.5;color: #333;text-align: center; /* Visual */background-color: #f5f5f5;border: 1px solid #e5e5e5;border-radius: 3px; /* Misc */opacity: 1;}5.2.設定盒子模型 - 是否脫離標準（子絶父相）- 其他屬性注意相容性寫法（純屬個人習慣）盒子模型1.設定是否需要浮動元素 或者 轉塊(float,display)2.設定盒子邊框、背景顏色、字型顏色（border,background，font,color）3.設定寬高大小（width,height）4.文字垂直置中（line-hight,text-align,vertical-align等等）5.設定margin、padding值標準流（子絶父相）position ：relative、absolute、static、fixedleft/top/right/bottomz-index其他屬性opcaity、cursor等css3新屬性transition、transform、animation等每個範圍可由首字母開頭為排序：eg:盒子模型中的第2條中，可由background,border,color等首字母為先排序; 但有些例外，如position肯定排先，後定義left等方向位屬性ps:需要用到媒體查詢，將媒體查詢放在儘可能相關規則的附近eg:.declaration-order {display: block;float: right;background-color: #f5f5f5;border: 1px solid #e5e5e5;border-radius: 3px;color: #333;font: normal 13px "Helvetica Neue", sans-serif; width: 100px;height: 100px;text-align: center;line-height: 100px; margin: 0 auto;padding: 10px 0; position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 100;opacity: 1; transtion: all .5s ease 0s;animation: name initial 2s;}@keyframes name{0%{}100{}///from{}to{}}@media screen and (min-width) and (max-width){and左右之間要留空格}5.3.按照首字母排列順序編寫 注意事項：1. 盡量不使用 !important 聲明。[建議] 當需要強制指定樣式且不允許任何情境覆蓋時，通過標籤內聯和 !important 定義樣式。2.媒體查詢（Media query）的位置將媒體查詢放在儘可能相關規則的附近。不要將他們打包放在一個單一樣式檔案中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。3.帶首碼的屬性當使用特定廠商的帶有首碼的屬性時，通過縮排的方式，讓每個屬性的值在垂直方向對齊，這樣便於多行編輯。在 Textmate 中，使用 Text → Edit Each Line in Selection (??A)。在 Sublime Text 2 中，使用 Selection → Add Previous Line (??↑) 和 Selection → Add Next Line (??↓)。Prefixed properties */ lector { webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15);4.單行規則聲明對於只包含一條聲明的樣式，為了易讀性和便於快速編輯，建議將語句放在同一行 (能仔細分析，檢測錯誤)5.簡寫形式的屬性聲明在需要顯示地設定所有值的情況下，應當盡量限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的情況如下：paddingmarginfontbackgroundborderborder-radius/* Bad example */.element {margin: 0 0 10px;background: red;background: url("image.jpg");border-radius: 3px 3px 0 0;} /* Good example */.element {margin-bottom: 10px;background-color: red;background-image: url("image.jpg");border-top-left-radius: 3px;border-top-right-radius: 3px;}6.Less 和 Sass 中的嵌套避免非必要的嵌套。這是因為雖然你可以使用嵌套，但是並不意味著應該使用嵌套。只有在必須將樣式限制在父元素內（也就是後代選取器），並且存在多個需要嵌套的元素時才使用嵌套。// Without nesting.table > thead > tr > th { … }.table > thead > tr > td { … } // With nesting.table > thead > tr {> th { … }> td { … }}瞭解更多請點擊，本文更多參照此文章常用的命名規則class的命名用中劃線 ‘ - ‘頭：header內容：content/container尾：footer導航：nav側欄：sidebar欄目：column頁面外圍控制整體佈局寬度：wrapper左右中：left right center登入條：loginbar標誌：logo廣告：banner頁面主體：main熱點：hot新聞：news下載：download子導航：subnav菜單：menu子功能表：submenu搜尋：search友情連結：friendlink頁尾：footer著作權：copyright滾動：scroll內容：content標籤：tags文章列表：list提示資訊：msg小技巧：tips欄目標題：title加入：joinus指南：guide服務：service註冊：regsiter狀態：status投票：vote夥伴：partnerId的命名:用底線 ‘ _ ‘1)頁面結構容器: container 頁頭：header 內容：content/container 頁面主體：main 頁尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper 左右中：left right center(2)導航導航：nav 主導航：mainnav 子導航：subnav 頂導航：topnav 邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 菜單：menu 子功能表：submenu 標題: title 摘要: summary(3)功能標誌：logo 廣告：banner 登陸：login 登入條：loginbar 註冊：register 搜尋：search 功能區：shop 標題：title 加入：joinus 狀態：status 按鈕：btn 滾動：scroll 標籤頁：tab 文章列表：list 提示資訊：msg 當前的: current 小技巧：tips 表徵圖: icon 注釋：note 指南：guild 服務：service 熱點：hot 新聞：news 下載：download 投票：vote 夥伴：partner 友情連結：link 著作權：copyrightCSS樣式表檔案命名主要的 master.css模組 module.css基本共用 base.css布局、版面 layout.css主題 themes.css專欄 columns.css文字 font.css表單 forms.css補丁 mend.css列印 print.css檔案命名規則項目命名 全部採用小寫方式，以底線分隔 例：my_project_name 目錄命名參照項目命名規則；有複數結構時，要採用複數命名法。例：scripts, styles, images, data_models JS檔案命名參照項目命名規則。例：account_model.js CSS, SCSS檔案命名參照項目命名規則。例：retina_sprites.scss HTML檔案命名參照項目命名規則。例：error_report.html 鳴謝：小碼農雯轉載至：https://www.cnblogs.com/lwwen/archive/2016/08/29/5818043.html
HTML編寫規範
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
