整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

写给初学者的HTML和CSS编码规范

TML配置

  • 文件应以“”首行顶格开始，推荐使用“”。
  • 必须申明文档的编码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文件删除，避免资源加载浪费

文件必须使用gzip压缩

开启Gzip压缩功能， 可以使网站的css、js 、xml、html 文件在传输时进行压缩，提高访问速度

api接口中，无用字段占传输比例30%以上时，删除无用字段

在开发过程中，发现无用字段占传输比例30%以上时，请进行返回数据的删减，加快数据请求速度

关于图片压缩

上传图片之前一定要做图片的无损压缩，节省网络流量,推荐网站tinypng

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="//logo@200x200.jpg" 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即可测试。

命令行

js复制代码<!-- 安装 lighthouse 组件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 启动测试 （测试过程中会自动打开 Chrome 完成后会在当前目录生成一个静态HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 帮助-->
lighthouse --help

检测结果

【附录】常用的标签规范

标签

语义

嵌套常见错误

常用属性

<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

金定律

永远遵循同一套编码规范 -- 可以是这里列出的，也可以是你自己总结的。如果你发现本规范中有任何错误，敬请指正。通过 open an issue on GitHub 为本规范添加内容或贡献力量。

不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

语法

  • 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。

  • 嵌套元素应当缩进一次（即两个空格）。

  • 对于属性的定义，确保全部使用双引号，绝不要使用单引号。

  • 不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。

  • 不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。

HTML5 doctype

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

语言属性

根据 HTML5 规范：

强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。

更多关于 lang 属性的知识可以从 此规范 中了解。

这里列出了语言代码表。

IE 兼容模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

阅读这篇 stack overflow 上的文章可以获得更多有用的信息。

字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。

引入 CSS 和 JavaScript 文件

根据 HTML5 规范，在引入 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 规范要求为其赋值，但是 HTML5 规范不需要。

更多信息请参考 WhatWG section on boolean attributes：

元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。

如果一定要为其赋值的话，请参考 WhatWG 规范：

如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要在首尾添加空白符。

简单来说，就是不用赋值。

减少标签的数量

编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：

JavaScript 生成的标签

通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。

CSS

语法

  • 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。

  • 为选择器分组时，将单独的选择器单独放在一行。

  • 为了代码的易读性，在每个声明块的左花括号前添加一个空格。

  • 声明块的右花括号应当单独成行。

  • 每条声明语句的 : 后应该插入一个空格。

  • 为了获得更准确的错误报告，每条声明都应该独占一行。

  • 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

  • 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。

  • 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。

  • 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。

  • 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。

  • 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

  • 为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。

  • 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

  1. Positioning

  2. Box model

  3. Typographic

  4. Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

不要使用 @import

与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

  • 使用多个 <link> 元素

  • 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

  • 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。

带前缀的属性

当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。

在 Textmate 中，使用 Text → Edit Each Line in Selection (⌃⌘A)。在 Sublime Text 2 中，使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。

单行规则声明

对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。

这样做的关键因素是为了错误检测 -- 例如，CSS 校验器指出在 183 行有语法错误。如果是单行单条声明，你就不会忽略这个错误；如果是单行多条声明的话，你就要仔细分析避免漏掉错误了。

简写形式的属性声明

在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：

  • padding

  • margin

  • font

  • background

  • border

  • border-radius

大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。

在 MDN（Mozilla Developer Network）上一篇非常好的关于shorthand properties 的文章，对于不太熟悉简写属性声明及其行为的用户很有用。

Less 和 Sass 中的嵌套

避免不必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。

Less 和 Sass 中的操作符

为了提高可读性，在圆括号中的数学计算表达式的数值、变量和操作符之间均添加一个空格。

注释

代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。

对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。

class 命名

  • class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。

  • 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

  • class 名称应当尽可能短，并且意义明确。

  • 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。

  • 基于最近的父 class 或基本（base） class 作为新 class 的前缀。

  • 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

在为 Sass 和 Less 变量命名时也可以参考上面列出的各项规范。

选择器

  • 对于通用元素使用 class ，这样利于渲染性能的优化。

  • 对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。

  • 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。

  • 只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

代码组织

  • 以组件为单位组织代码段。

  • 制定一致的注释规范。

  • 使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。

  • 如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。

编辑器配置

将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：

  • 用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。

  • 保存文件时，删除尾部的空白符。

  • 设置文件编码为 UTF-8。

  • 在文件结尾添加一个空白行。

题的由来

第一次关注这个标题编号的问题应该回溯到本科毕业论文的时候了，当时还单独涉猎过这个主题，Word 有个很好的特性级联标题，一次设置好之后，后续只要设置标题样式就能按照设置的标题编号方式自动编号，我们要做的只是将对应的标题设置成对应基本的标题样式就好了，这个方法让我爱不释手，多年来一直沿用。完全解决了中途插入一章，一节等等导致的章节编号都需要人肉调整的问题，当然还有图片的编号命名什么的，都是类似的。
直到后面开始用markdown 由于各个编辑器的切换，一直没有一个好用的替代方案，所以几年前我写了一个小工具用命令行来做这事rawbin-/markdown-clear，这个工具解决了在github写博客的问题，同时在解决博客的问题的基础上解决了在各个平台发文的问题，因为编号是用脚本写上去的，所以用markdown here在各个平台发文也就顺理成章的转成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) ". " } 在其他网页编辑中自动编码 比如各个博客平台，各个自媒体平台等，像我们常用的写文档的语雀都可以的。[最后发现只有那么几个平台可以，有的伪类被过滤替换掉了，有的是直接支持markdown无法富文本编辑，有的…]
这里面涉及到一款浏览器插件markdown here，可以在页面富文本编辑器中将markdown 自动转换为网页，这也是我前面说到的这几年在各个平台发文的套路，写好编号好标题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 设置三个点=>【更多工具】=>【扩展程序】 打开【开发者模式】 选择【加载已解压的扩展程序】=>选择克隆代码下的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 自动编号 不是一个新特性，或者说是一个老特性了，出现在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插件或扩展开发 这个 我也没实际搞过，原来看了看书 可参考的资料 官方文档 sxei/chrome-plugin-demo 或者搜索Chrome插件 全攻略 《Chrome扩展及应用开发》，这个就是我原来看的那本老书还是有些问题没解决 上面的操作方式必须要h1到h6依次排开，不然会很好看 如果标题本身就编号了的，就有点糟糕了 这俩问题在我github的博客里面都能看到，解决办法可以是运行下``顺便探索下CSS其他可变的内容 CSS变量或者说自定义属性 这个IE不兼容，其他浏览器高版本兼容:root{ --var-test:xxx } .body{ --var-test:ooo; prop-test:var(--var-test) } attr() 这个caniuse也有些说不清楚，主体兼容也是从IE8开始的，需要自己总结 强大的地方是可以读取属性值，赋给另外的属性，也就是可以来个属性联动看起来纯CSS的解决方案就到此告一段落了 如果能有脚本参与，就自由了 attr() 配合伪类来做展示，是一个JS和CSS通信的一个比较好的方式


在线咨询
上一篇：山东省整治群众身边腐败和不正之风监督举报和反映问题方式
下一篇：10本计算机开源书籍精选

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 长沙 黔西县 泰兴市 武功县 红塔区 隆林各族自治县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服