天天看點
傳回

寫給初學者的HTML和CSS編碼規範

作者：愛摸魚的程式員

HTML配置

  • 檔案應以“”首行頂格開始，推薦使用“”。
  • 必須申明文檔的編碼charset，并且使用UTF-8編碼。
  • 移動端必須使用 viewport 适配
  • 頁面title是極為重要的不可缺少的一項。
以下是一個标準的html結構 
html複制代碼<!DOCTYPE html>
<html>
  <head>
    <!-- 必須聲明 utf-8 編碼格式 -->
    <meta charset="utf-8">
    <!-- 頁面标題不能為空 -->
    <title>京東商城:商家背景</title>
    <!-- 移動端必須使用 viewport 适配需要, PC 看場景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
     
    <!-- 樣式檔案 以外鍊形式在此處引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
  </head>
  <body>
    <!-- 頁面主體 -->
    <div class="warp">
      <header>頂部内容區域，比如：菜單頭</header>
      <div class="content">主内容區域</div>
      <footer>頂部頁尾區域，比如：備案号</footer>
    </div>
     
    <!-- js檔案 在此處引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

主架構(jQuery,vue,react,angular等) 避免混合使用

避免多個架構混合使用，在同一個工程裡面要保持主架構的一緻性，多架構同時使用會造成代碼混亂，後期會變得越來越難維護。

Css開發規範

1、全局樣式禁止使用!important

2、避免使用導入式引入css樣式檔案；

css複制代碼<style type="text/css">
  @import url(./demo.css);
</style>

未使用的js/css禁止引用

曆史頁面會有一些功能下線，在去除頁面初始化的js語句的同時，也要将依賴的js檔案删除，避免資源加載浪費

寫給初學者的HTML和CSS編碼規範

檔案必須使用gzip壓縮

開啟Gzip壓縮功能， 可以使網站的css、js 、xml、html 檔案在傳輸時進行壓縮，提高通路速度

api接口中，無用字段占傳輸比例30%以上時，删除無用字段

在開發過程中，發現無用字段占傳輸比例30%以上時，請進行傳回資料的删減，加快資料請求速度

關于圖檔壓縮

上傳圖檔之前一定要做圖檔的無損壓縮，節省網絡流量,推薦網站tinypng

寫給初學者的HTML和CSS編碼規範

HTML的标準結構 

html複制代碼<!DOCTYPE html>
<html>
  <head>
    <!-- 必須聲明 utf-8 編碼格式 -->
    <meta charset="utf-8">
    <!-- keywords 關鍵詞 和 Description 頁面描述 便于搜尋引擎檢索，不強制使用 -->
    <meta name="Keywords" Content=”關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4″>
    <meta name="Description" Content=”頁面描述″>
    <!-- 移動端必須使用 viewport 适配需要, PC 看場景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <!-- 推薦手動引入指定路徑 favicon  -->
    <link rel="shortcut icon" href="path/to/favicon.ico">
    <!-- 樣式檔案必須以外鍊形式在此處引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
    <!-- 内聯樣式 -->
    <style type="text/css">
      .warp {
        margin: 0;
        padding: 0;
      }
    </style> -->
    <!-- 頁面标題不能為空 -->
    <title>頁面标題</title>
  </head>
  <body>
  <!-- 頁面主體 -->
    <div class="warp">
    <header>頂部内容區域，比如：菜單頭</header>
    <div class="content">主内容區域</div>
    <footer>頂部頁尾區域，比如：備案号</footer>
    </div>
 
    <!-- JavaScript 檔案在此處引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>
  • 不同子產品區域可使用簡要備注辨別子產品内容
  • HTML 标簽語義化使結構清晰，比如：
  • CSS 外鍊引入必須放在 中
  • JS 外鍊引入必須放在中
  • 省略圖像、媒體檔案、樣式表和腳本等嵌入式資源 URL 協定頭部聲明 ( http:// , https:// )，用//代替。
  • favicon 在未指定 favicon 時，大多數浏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可通路，避免404，必須遵循以下兩種方法之一：1。在 Web Server 根目錄放置 favicon.ico 檔案，2。使用 link 指定 favicon

HTML标簽使用守則

标簽小寫

原生 HTML 标簽元素小寫使用，自定義元件使用小駝峰命名（自定義标簽避免和原生标簽同名）

html複制代碼<!-- 錯誤 ❌ -->
<DIV></DIV>
<SPAN></SPAN>  
 
<!-- 正确 ✅ -->
<div></div>  
<p></p> 
 
<!-- 自定義元件 -->
<shareDialog><shareDialog/>

套用規則

禁止在行内元素中嵌套塊級元素❗️

html複制代碼<!-- 錯誤的嵌套 ❌ -->
<span><div></div></span>  
<i><p></p></i>     
 
<!-- 正确的嵌套 ✅ -->
<div><span></span></div>  
<p><i></i></p>

更多标簽使用規則介紹請檢視尾部附錄

屬性定義

定義屬性指派時，使用雙引号，禁止單雙引号混用

html複制代碼<!-- 錯誤的定義 ❌ -->
<input id="formTitle" type='text' placeholder="請輸入标題">   
 
<!-- 正确的定義 ✅ -->
<input id="formTitle" type="text" placeholder="請輸入标題" data="formTitle">

正确閉合

除自閉合标簽外，所有标簽都需正确的編寫閉合标簽

常用自閉合标簽： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />

ID、Class 命名使用規範

ID 和 Class 取通用且有意義的名字；

使用連字元 - 作為 ID、Class 名稱界定符 ，不要駝峰命名法和下劃線；

避免選擇器嵌套層級過多，盡量少于 3 級；

使用命名空間防止命名沖突，利于維護；

css複制代碼/* 不推薦: 無意義 不易了解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
 
/* 推薦: 明确詳細 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}
  • 避免選擇器和 Class、ID 疊加使用
  • 聲明順序，相關屬性應為一組，建議遵循： 定位布局屬性 -> 盒模型屬性 -> 文本屬性 -> 視覺屬性 -> 其他屬性
  • 對于 JS 操作相關選擇器 前面需加上 特殊應用辨別字首 
css複制代碼/* 标準的聲明順序 */
.declaration-order {
  /* 布局屬性 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
 
  /* 盒模型屬性 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;
 
  /* 文本屬性 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;
 
  /* 視覺屬性 */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;
 
  /* 其他屬性 */
  cursor: pointer;
}

圖檔相關使用規範

<img/>标簽守則

  • src 屬性不能為空，需添加預設值（托底圖檔路徑）
  • 為重要圖檔添加 alt 屬性，當無法顯示圖像時，浏覽器将顯示替代文本，便于 SEO 及使用者閱讀
  • 為圖檔标簽 增加 width 和 height 屬性，避免圖檔加載從無到有，導緻頁面抖動
  • 大量圖檔流資源，使用懶加載技術按需加載 
html複制代碼<!-- 禁止 src 取值為空 -->
<img src="" />
 
<!-- 推薦 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />

圖檔資源守則

大小

尺寸 小于 50 × 50 的請使用 字型圖示（iconfont）或者 将多個圖示合成一張大圖使用（雪碧圖） 尺寸大于 50 × 50 的圖檔，引入前先使用 線上壓縮 對其進行壓縮 ，圖檔大小盡量控制在 300kb 以内

倍率

PC端、移動端 推薦使用 2倍圖 (@2x），避免裝置分辨率過高，圖檔顯示失真模糊 如有相容 iPad 場景等特殊場景，可使用 3倍圖（@3x）

html複制代碼<img src="//[email protected]" alt="xx" style="width:100px;height:100px;"/>

2倍圖： 圖檔展示區域大小 : 圖檔實際尺寸 = 1 ：2

無論使用幾倍圖，圖檔大小都需遵守上條限制

如遇圖檔倍圖問題，可咨詢 @UI童鞋

性能守則

  • 避免不必要的 DOM 操作浏覽器周遊 DOM 元素的代價是昂貴的。最簡單優化 DOM 樹查詢的方案是，當一個元素出現多次時，将它儲存在一個變量中，來避免多次查詢 DOM 樹。 
js複制代碼/* 推薦用變量儲存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
  lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
   
/* 推薦用變量儲存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
  lis = ul.getElementsByTagName('li')
  • 異步加載第三方内容 當你無法保證嵌入第三方内容 比如 埋點、調研等資源正常工作的時候，你需要考慮用異步加載這些代碼，避免阻塞整個頁面加載。
  • 減少标簽的數量 編寫 HTML 代碼時，盡量避免多餘的标簽嵌套，避免 DOM樹的備援
  • 控制靜态資源數量

1個頁面中建議CSS檔案不要超過3個（1個元件庫樣式檔案、1個項目公共樣式、1個頁面樣式）； JS檔案不要超過5個（1個架構檔案、1個元件庫檔案、1個項目公共庫檔案、1個頁面腳本檔案、1個埋點檔案）。

編碼建議

縮進使用 2個空格 樣式建議引入 CSS reset 重置各浏覽器自帶樣式差異 github.com/necolas/nor… JS 中字元串定義 使用 '' 單引号

其他建議

保持一定的代碼潔癖，尤其在大型項目中

  • 代碼邏輯應當直截了當，清晰易讀，保持與業務邏輯與代碼一一對應關系，減少邏輯錯誤的可能性，降低二次開發成本；
  • 删除過期無用代碼，減少代碼過大，造成不必要的維護成本
  • 代碼盡量複用，擁有元件化思想
  • 代碼命名合理化，即使不寫注釋情況下，也可以讓其他開發人員一眼明白意思
  • 性能調至最優，降低耦合度，避免别人做不合理的優化時而造成的混亂
  • 整潔的子產品邊界，明确的劃分子產品之間的邏輯邊界，盡量保證職責單一，避免功能交叉混雜
  • 讓代碼沒有改進的餘地，在開發時把各種情況都想到了，如果有人企圖改進它，總是會回到原點

性能檢測工具 - Lighthouse簡介 Lighthouse是一個Google開源的自動化工具，主要用于改進網絡應用的品質。Lighthouse會對各個測試項的結果打分，并給出優化建議，這些打分标準和優化建議可以視為Google的網頁最佳實踐。

Chrome拓展程式 谷歌商店安裝lighthouse後，在右上角或者菜單裡點選圖中圖示，Options可以配置測試項目，點選Generate report即可測試。

寫給初學者的HTML和CSS編碼規範

指令行

js複制代碼<!-- 安裝 lighthouse 元件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 啟動測試 （測試過程中會自動打開 Chrome 完成後會在目前目錄生成一個靜态HTML檔案） -->
lighthouse https://www.baidu.com/ --view
<!-- 幫助-->
lighthouse --help

檢測結果

寫給初學者的HTML和CSS編碼規範

【附錄】常用的标簽規範

标簽 語義 嵌套常見錯誤 常用屬性
<a></a> 超連結/錨 a不可嵌套a href,name,title,rel,target
<div></div> 塊級容器
<p></p> 段落 不能嵌套塊級元素
<span></span> 内聯容器（行内元素） 不可嵌套塊級容器
<form></form> 表單 action,target,method,name
<input /> 輸入框 不可嵌套元素 type,name,value,checked,disabled,maxlength,readonly,accesskey
<textarea></textarea> 多行文本輸入控件 name,accesskey,disabled,readonly,rows,cols
<img /> 圖像 不可嵌套元素 alt,src,width,height
<label></label> 标簽（常用input元素定義标注） 不可嵌套塊級容器 for
<table></table> 表格 隻可嵌套表格子元素 width,align,background,cellpadding,cellspacing,summary,border
<tbody></tbody> 表格主體 隻能嵌套在table内
<thead></thead> 表頭 隻能嵌套在table内
<tr></tr> 表格行 嵌套于table或thead、tbody、tfoot
<td></td> 表格中的單元格 隻用于tr colspan,rowspan
<th></th> 表格中的标題單元格 隻用于tr colspan,rowspan
<tfoot></tfoot> 表格表尾 隻用于table
<button></button> 按鈕 不可嵌套表單、表格等塊級元素 type,disabled
<select></select> 清單框或下拉框 隻能嵌套option或optgroup name,disabled,multiple
<option></option> select中的一個選項 隻能嵌套在select内 value,selected,disabled
<ol></ol> 有序清單 隻能嵌套li
<ul></ul> 無序清單 隻能嵌套li
<li></li> 無序清單項 隻能嵌套在 ul 或 ol 内
<iframe></iframe> 内嵌一個網頁 frameborder,width,height,src,scrolling,name
<br /> 換行
<link /> 引用樣式或icon 不可嵌套任何元素 type,rel,href
<meta /> 文檔資訊 隻用于head内 content,http-equiv,name
<script></script> 引用腳本 不可嵌套任何元素 type,src
<style></style> 引用樣式 不可嵌套任何元素 type,media
<title></title> 文檔标題 隻用于head内
點贊收藏支援、手留餘香、與有榮焉，動動你發财的小手喲，感謝各位大佬能留下您的足迹。

作者：StriveToY

連結：https://juejin.cn/post/7262378982255394873

CSS編碼規範 編碼規範
上一篇: C/C++程式設計别踩白塊兒源碼分享~源碼擷取看首頁呀！#程式設計#代碼#程式設計語言#c語言
下一篇: C/C++國粹《中國象棋》源碼分享～十橫九縱列九宮，糧草未動兵馬行，楚漢隻在單手間，笑看士卒入帳庭。#c語言#程式設計語言#

繼續閱讀