整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
以下是一個標準的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>頂部內容區(qū)域，比如：菜單頭</header>
<div class="content">主內容區(qū)域</div>
<footer>頂部頁尾區(qū)域，比如：備案號</footer>
</div>
<!-- js文件 在此處引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
避免多個框架混合使用，在同一個工程里面要保持主框架的一致性，多框架同時使用會造成代碼混亂，后期會變得越來越難維護。
1、全局樣式禁止使用!important
2、避免使用導入式引入css樣式文件；
css復制代碼<style type="text/css">
@import url(./demo.css);
</style>
歷史頁面會有一些功能下線，在去除頁面初始化的js語句的同時，也要將依賴的js文件刪除，避免資源加載浪費
開啟Gzip壓縮功能， 可以使網站的css、js 、xml、html 文件在傳輸時進行壓縮，提高訪問速度
在開發(fā)過程中，發(fā)現(xiàn)無用字段占傳輸比例30%以上時，請進行返回數(shù)據(jù)的刪減，加快數(shù)據(jù)請求速度
上傳圖片之前一定要做圖片的無損壓縮，節(jié)省網絡流量,推薦網站tinypng
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">
<!-- 內聯(lián)樣式 -->
<style type="text/css">
.warp {
margin: 0;
padding: 0;
}
</style> -->
<!-- 頁面標題不能為空 -->
<title>頁面標題</title>
</head>
<body>
<!-- 頁面主體 -->
<div class="warp">
<header>頂部內容區(qū)域，比如：菜單頭</header>
<div class="content">主內容區(qū)域</div>
<footer>頂部頁尾區(qū)域，比如：備案號</footer>
</div>
<!-- JavaScript 文件在此處引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</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>
更多標簽使用規(guī)則介紹請查看尾部附錄
定義屬性賦值時，使用雙引號，禁止單雙引號混用
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 名稱界定符 ，不要駝峰命名法和下劃線；
避免選擇器嵌套層級過多，盡量少于 3 級；
使用命名空間防止命名沖突，利于維護；
css復制代碼/* 不推薦: 無意義 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
/* 推薦: 明確詳細 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}
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/>標簽守則
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="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>
2倍圖： 圖片展示區(qū)域大小 : 圖片實際尺寸 = 1 ：2
無論使用幾倍圖，圖片大小都需遵守上條限制
如遇圖片倍圖問題，可咨詢 @UI童鞋
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')
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會對各個測試項的結果打分，并給出優(yōu)化建議，這些打分標準和優(yōu)化建議可以視為Google的網頁最佳實踐。
Chrome拓展程序 谷歌商店安裝lighthouse后，在右上角或者菜單里點擊圖中圖標，Options可以配置測試項目，點擊Generate report即可測試。
命令行
js復制代碼<!-- 安裝 lighthouse 組件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 啟動測試 （測試過程中會自動打開 Chrome 完成后會在當前目錄生成一個靜態(tài)HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 幫助-->
lighthouse --help
檢測結果
標簽 | 語義 | 嵌套常見錯誤 | 常用屬性 |
<a></a> | 超鏈接/錨 | a不可嵌套a | href,name,title,rel,target |
<div></div> | 塊級容器 | ||
<p></p> | 段落 | 不能嵌套塊級元素 | |
<span></span> | 內聯(lián)容器（行內元素） | 不可嵌套塊級容器 | |
<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內 |
點贊收藏支持、手留余香、與有榮焉，動動你發(fā)財?shù)男∈謫眩兄x各位大佬能留下您的足跡。
作者：StriveToY
鏈接：https://juejin.cn/post/7262378982255394873
金定律
永遠遵循同一套編碼規(guī)范 -- 可以是這里列出的，也可以是你自己總結的。如果你發(fā)現(xiàn)本規(guī)范中有任何錯誤，敬請指正。通過 open an issue on GitHub 為本規(guī)范添加內容或貢獻力量。
不管有多少人共同參與同一項目，一定要確保每一行代碼都像是同一個人編寫的。
語法
用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。
嵌套元素應當縮進一次（即兩個空格）。
對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。
不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規(guī)范中明確說明這是可選的。
不要省略可選的結束標簽（closing tag）（例如，</li> 或 </body>）。
HTML5 doctype
為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現(xiàn)。
語言屬性
根據(jù) HTML5 規(guī)范：
強烈建議為 html 根元素指定 lang 屬性，從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發(fā)音，有助于翻譯工具確定其翻譯時所應遵守的規(guī)則等等。
更多關于 lang 屬性的知識可以從 此規(guī)范 中了解。
這里列出了語言代碼表。
IE 兼容模式
IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。
閱讀這篇 stack overflow 上的文章可以獲得更多有用的信息。
字符編碼
通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。
引入 CSS 和 JavaScript 文件
根據(jù) HTML5 規(guī)范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。
HTML5 spec links
Using link
Using style
Using script
實用為王
盡量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度。
屬性順序
HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。
class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
class 用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。
布爾（boolean）型屬性
布爾型屬性可以在聲明時不賦值。XHTML 規(guī)范要求為其賦值，但是 HTML5 規(guī)范不需要。
更多信息請參考 WhatWG section on boolean attributes：
元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。
如果一定要為其賦值的話，請參考 WhatWG 規(guī)范：
如果屬性存在，其值必須是空字符串或 [...] 屬性的規(guī)范名稱，并且不要在首尾添加空白符。
簡單來說，就是不用賦值。
減少標簽的數(shù)量
編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現(xiàn)。請看下面的案例：
JavaScript 生成的標簽
通過 JavaScript 生成的標簽讓內容變得不易查找、編輯，并且降低性能。能避免時盡量避免。
CSS
語法
用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。
為選擇器分組時，將單獨的選擇器單獨放在一行。
為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。
聲明塊的右花括號應當單獨成行。
每條聲明語句的 : 后應該插入一個空格。
為了獲得更準確的錯誤報告，每條聲明都應該獨占一行。
所有聲明語句都應當以分號結尾。最后一條聲明語句后面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。
對于以逗號分隔的屬性值，每個逗號后面都應該插入一個空格（例如，box-shadow）。
不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號后面插入空格。這樣利于從多個屬性值（既加逗號也加空格）中區(qū)分多個顏色值（只加逗號，不加空格）。
對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六進制值應該全部小寫，例如，#fff。在掃描文檔時，小寫字符易于分辨，因為他們的形式更易于區(qū)分。
盡量使用簡寫形式的十六進制值，例如，用 #fff 代替 #ffffff。
為選擇器中的屬性添加雙引號，例如，input[type="text"]。只有在某些情況下是可選的，但是，為了代碼的一致性，建議都加上雙引號。
避免為 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。
聲明順序
相關的屬性聲明應當歸為一組，并按照下面的順序排列：
Positioning
Box model
Typographic
Visual
由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型排在第二位，因為它決定了組件的尺寸和位置。
其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在后面。
不要使用 @import
與 <link> 標簽相比，@import 指令要慢很多，不光增加了額外的請求次數(shù)，還會導致不可預料的問題。替代辦法有以下幾種：
使用多個 <link> 元素
通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件
通過 Rails、Jekyll 或其他系統(tǒng)中提供過 CSS 文件合并功能
媒體查詢（Media query）的位置
將媒體查詢放在盡可能相關規(guī)則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。下面給出一個典型的實例。
帶前綴的屬性
當使用特定廠商的帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便于多行編輯。
在 Textmate 中，使用 Text → Edit Each Line in Selection (??A)。在 Sublime Text 2 中，使用 Selection → Add Previous Line (??↑) 和 Selection → Add Next Line (??↓)。
單行規(guī)則聲明
對于只包含一條聲明的樣式，為了易讀性和便于快速編輯，建議將語句放在同一行。對于帶有多條聲明的樣式，還是應當將聲明分為多行。
這樣做的關鍵因素是為了錯誤檢測 -- 例如，CSS 校驗器指出在 183 行有語法錯誤。如果是單行單條聲明，你就不會忽略這個錯誤；如果是單行多條聲明的話，你就要仔細分析避免漏掉錯誤了。
簡寫形式的屬性聲明
在需要顯示地設置所有值的情況下，應當盡量限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的情況如下：
padding
margin
font
background
border
border-radius
大部分情況下，我們不需要為簡寫形式的屬性聲明指定所有值。例如，HTML 的 heading 元素只需要設置上、下邊距（margin）的值，因此，在必要的時候，只需覆蓋這兩個值就可以。過度使用簡寫形式的屬性聲明會導致代碼混亂，并且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。
在 MDN（Mozilla Developer Network）上一篇非常好的關于shorthand properties 的文章，對于不太熟悉簡寫屬性聲明及其行為的用戶很有用。
Less 和 Sass 中的嵌套
避免不必要的嵌套。這是因為雖然你可以使用嵌套，但是并不意味著應該使用嵌套。只有在必須將樣式限制在父元素內（也就是后代選擇器），并且存在多個需要嵌套的元素時才使用嵌套。
Less 和 Sass 中的操作符
為了提高可讀性，在圓括號中的數(shù)學計算表達式的數(shù)值、變量和操作符之間均添加一個空格。
注釋
代碼是由人編寫并維護的。請確保你的代碼能夠自描述、注釋良好并且易于他人理解。好的代碼注釋能夠傳達上下文關系和代碼目的。不要簡單地重申組件或 class 名稱。
對于較長的注釋，務必書寫完整的句子；對于一般性注解，可以書寫簡潔的短語。
class 命名
class 名稱中只能出現(xiàn)小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應當用于相關 class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。
避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思。
class 名稱應當盡可能短，并且意義明確。
使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式（presentational）的名稱。
基于最近的父 class 或基本（base） class 作為新 class 的前綴。
使用 .js-* class 來標識行為（與樣式相對），并且不要將這些 class 包含到 CSS 文件中。
在為 Sass 和 Less 變量命名時也可以參考上面列出的各項規(guī)范。
選擇器
對于通用元素使用 class ，這樣利于渲染性能的優(yōu)化。
對于經常出現(xiàn)的組件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的性能會受到這些因素的影響。
選擇器要盡可能短，并且盡量限制組成選擇器的元素個數(shù)，建議不要超過 3 。
只有在必要的時候才將 class 限制在最近的父元素內（也就是后代選擇器）（例如，不使用帶前綴的 class 時 -- 前綴類似于命名空間）。
代碼組織
以組件為單位組織代碼段。
制定一致的注釋規(guī)范。
使用一致的空白符將代碼分隔成塊，這樣利于掃描較大的文檔。
如果使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動。
編輯器配置
將你的編輯器按照下面的配置進行設置，以避免常見的代碼不一致和差異：
用兩個空格代替制表符（soft-tab 即用空格代表 tab 符）。
保存文件時，刪除尾部的空白符。
設置文件編碼為 UTF-8。
在文件結尾添加一個空白行。
第一次關注這個標題編號的問題應該回溯到本科畢業(yè)論文的時候了，當時還單獨涉獵過這個主題，Word 有個很好的特性級聯(lián)標題，一次設置好之后，后續(xù)只要設置標題樣式就能按照設置的標題編號方式自動編號，我們要做的只是將對應的標題設置成對應基本的標題樣式就好了，這個方法讓我愛不釋手，多年來一直沿用。完全解決了中途插入一章，一節(jié)等等導致的章節(jié)編號都需要人肉調整的問題，當然還有圖片的編號命名什么的，都是類似的。
直到后面開始用markdown 由于各個編輯器的切換，一直沒有一個好用的替代方案，所以幾年前我寫了一個小工具用命令行來做這事rawbin-/markdown-clear，這個工具解決了在github寫博客的問題，同時在解決博客的問題的基礎上解決了在各個平臺發(fā)文的問題，因為編號是用腳本寫上去的，所以用markdown here在各個平臺發(fā)文也就順理成章的轉成html就行了，也解決了這個階段的問題。
前兩天把拖欠幾個月的全面認知的總結寫了，突然不想用這個腳本來編號了，產生一個想法：能不能不人肉編號，自動編上？然后就有了下面的內容。
以下操作案例都是在macOS中產出，其他平臺可能有些許差別，換湯不換藥。
在typora中寫markdown自動編號 打開typora【偏好設置】 找到【外觀】=>【主題】=>【打開主題文件夾】 將如下代碼加入到打開目錄的base.user.css 中#writer { counter-reset: h1 } h1 { counter-reset: h2 } h2 { counter-reset: h3 } h3 { counter-reset: h4 } h4 { counter-reset: h5 } h5 { counter-reset: h6 } #writer h1:before { counter-increment: h1; content: counter(h1) ". " } #writer h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " } #writer h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " } #writer h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " } #writer h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " } #writer h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " } 講道理 打開typora【偏好設置】 找到【通用】=>【高級 】=>【開啟調試模式】=>勾選 然后在非源碼模式下=>【右鍵】=>【檢查元素】，就可以看到為什么是#write了 這個后面還有用在github pages 寫markdown博客自動編號 我用的是jekyllbootstrap.com的模板，比較簡單 打開任意一篇rawbin-.github.io中的文章，然后【右鍵】=>【檢查】 可以拿到兩個內容 容器類為 .content ，嚴格點為#wrap .content 樣式文件在assets/themes/bootstrap3，可以修改其下的css/style.css 將如下內容改到源代碼的assets/themes/bootstrap3/css/style.css中.content { counter-reset: h1 } h1 { counter-reset: h2 } h2 { counter-reset: h3 } h3 { counter-reset: h4 } h4 { counter-reset: h5 } h5 { counter-reset: h6 } .content h1:before { counter-increment: h1; content: counter(h1) ". " } .content h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " } .content h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " } .content h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " } .content h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " } .content h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " } 在其他網頁編輯中自動編碼 比如各個博客平臺，各個自媒體平臺等，像我們常用的寫文檔的語雀都可以的。[最后發(fā)現(xiàn)只有那么幾個平臺可以，有的偽類被過濾替換掉了，有的是直接支持markdown無法富文本編輯，有的…]
這里面涉及到一款瀏覽器插件markdown here，可以在頁面富文本編輯器中將markdown 自動轉換為網頁，這也是我前面說到的這幾年在各個平臺發(fā)文的套路，寫好編號好標題markdown往編輯器里面一貼，然后一點 ，搞定。簡單嘗試 markdown here 有一個配置頁面，可以配置和調整css，并能預覽效果 簡單看了下是用js把類轉成了style屬性，并且不支持偽類修改源碼 到adam-p/markdown-here 看到，已經兩年沒動代碼了 不管三七二十三先 fork一把到rawbin-/markdown-here，然后把代碼拉下來 先把css文件建起來src/common/auto-number-title，找容器類可以在markdown here的選項頁面找到.markdown-here-wrapper.markdown-here-wrapper { counter-reset: h1 } .markdown-here-wrapper h1 { counter-reset: h2 } .markdown-here-wrapper h2 { counter-reset: h3 } .markdown-here-wrapper h3 { counter-reset: h4 } .markdown-here-wrapper h4 { counter-reset: h5 } .markdown-here-wrapper h5 { counter-reset: h6 } .markdown-here-wrapper h1:before { counter-increment: h1; content: counter(h1) ". " } .markdown-here-wrapper h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " } .markdown-here-wrapper h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " } .markdown-here-wrapper h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " } .markdown-here-wrapper h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " } .markdown-here-wrapper h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " } 然后修改一下注入配置，允許加載這個樣式文件，并引入這個樣式問題 剩下的有錯改錯就好了最終產出和應用 克隆rawbin-/markdown-here 打開Chrome 設置三個點=>【更多工具】=>【擴展程序】 打開【開發(fā)者模式】 選擇【加載已解壓的擴展程序】=>選擇克隆代碼下的src目錄即可安裝并加載插件 將插件固定在插件欄方便使用 auto-number-title.scss內容如下.markdown-here-wrapper { counter-reset: h1; h1 { counter-reset: h2; &:before { counter-increment: h1; content: counter(h1) ". "; } } h2 { counter-reset: h3; &:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " } } h3 { counter-reset: h4; &:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " } } h4 { counter-reset: h5; &:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " } } h5 { counter-reset: h6; &:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " } } h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " } } 再來簡單講一下道理 CSS 自動編號 不是一個新特性，或者說是一個老特性了，出現(xiàn)在CSS 2.1中，搜索site:w3.org css automatic numbering 可以找到，當然截止今天后來的版本(CSS 3, CSS 2.2)都有這個特性，從caniuse上可以看到，IE8及以上兼容，很棒吧 簡單說明 counter-reset 重置 counter-increment ++ counter() 取值 配合before和after來做 還有更多的玩法，參見 CSS The Defiiniitiive Guide 4th ，這里有翻譯gdut-yy/CSS-The-Definitive-Guide-4th-zhChrome插件或擴展開發(fā) 這個 我也沒實際搞過，原來看了看書 可參考的資料 官方文檔 sxei/chrome-plugin-demo 或者搜索Chrome插件 全攻略 《Chrome擴展及應用開發(fā)》，這個就是我原來看的那本老書還是有些問題沒解決 上面的操作方式必須要h1到h6依次排開，不然會很好看 如果標題本身就編號了的，就有點糟糕了 這倆問題在我github的博客里面都能看到，解決辦法可以是運行下``順便探索下CSS其他可變的內容 CSS變量或者說自定義屬性 這個IE不兼容，其他瀏覽器高版本兼容:root{ --var-test:xxx } .body{ --var-test:ooo; prop-test:var(--var-test) } attr() 這個caniuse也有些說不清楚，主體兼容也是從IE8開始的，需要自己總結 強大的地方是可以讀取屬性值，賦給另外的屬性，也就是可以來個屬性聯(lián)動看起來純CSS的解決方案就到此告一段落了 如果能有腳本參與，就自由了 attr() 配合偽類來做展示，是一個JS和CSS通信的一個比較好的方式
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
