HTML规范

最新推荐文章于 2025-07-15 22:23:14 发布

Airfald

最新推荐文章于 2025-07-15 22:23:14 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/Airfald/article/details/60574328

CSS 专栏收录该内容

21 篇文章

订阅专栏

HTML规范

写代码该开始学的时候，只要把功能实现就可以了，当达到一定的程度的时候，就要对代码有一定的要求，比如：对代码优化，对代码的书写规范化，就好像多个人协作写一个产品要让别人看起来就好像是一个人写的一样！还记得有个老师说过写代码不一定要多厉害，其实你别人的差距就在于别人的代码写的符合规范化！代码写的规范化可以避免一些不必要的bug以及代码让人看起来更好！就算有bug也可以在短时间内将bug找出来！

在这儿我根据查询找到了几个优秀的文档，在文档之中已经总结的很规范了，在这儿就已经不再赘述了，其实有些规范从一开始就已经遵循了，只有一部分不注意的有些出入，在这里我只总结自己不规范的地方！

参考文档：http://codeguide.bootcss.com/

https://github.com/Airfald/styleguide/blob/master/html.md

https://zhuanlan.zhihu.com/p/24661371

http://www.jianshu.com/p/3b9a1069c4cd

----------------------------------------------------------------------------------------------------------------------------------------------------------

一、文档类型声明：

meta标签：

meta标签提供的是有关页面的元信息（meta-information），在meta标签里，我们看到charset=”utf – 8”,对吧，这是字符编码，因为不同国家的语言不同，其转义的方式不同，所以为了不会出现乱码的情况，我们必须加上一个字符编码，而“utf – 8”又被称为“万国码”。

meta标签的属性有两种：

1）name与content属性

name属性用于描述网页，它以名称/值来表现的，而name具体的内容则由content属性来表示。其中，name一般使用较多是：

①：keywords（关键字）、description（简短的描述），便于爬虫查找与分类。

keywords

2）②：http-equiv与content属性

目前较多是使用它们的是进行页面的刷新与跳转页面。

title标签：

title顾名思义，就是用来表示这个网页是用来干什么的。title标签内的内容会在浏览器的标题栏中进行显示，平时我们收藏一些网页的书签名称就是title的内容。同时它可以方便搜索引擎索引页面，所以一定要加上，同时最好是和网站本身有关联性，不能是独立的。

注意！！！！

`③：title` 必须作为 `head` 的直接子元素，并紧随 `charset` 声明之后。

：meta标签一定是在title标签的前面。原因是：网页的读取顺序是从上到下，我们要先进行字符编码的设置，不然title里的内容就有可能会出现乱码了。

DOCTYPE

③：[强制] 使用 `HTML5` 的 `doctype` 来启用标准模式，建议使用大写的 `DOCTYPE`。

示例：

<!DOCTYPE html>

④：[建议] 启用 IE Edge 模式。

示例：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

[建议]⑤：在 `html` 标签上设置正确的 lang 属性。

解释：

有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。

示例：

<html lang="zh-CN">

----------------------------------------------------------------------------------------------------------------------------------------------------------

代码风格⑥：

用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
不要省略可选的结束标签（closing tag）（例如，</li>或 </body>）。

实用为王

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

属性顺序⑦：

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*

class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。

声明顺序⑧：

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

Positioning
Box model
Typographic
Visual

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

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

.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;
}

class 命名⑨：

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
class 名称应当尽可能短，并且意义明确。
使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
基于最近的父 class 或基本（base） class 作为新 class 的前缀。
使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

选择器十：

对于通用元素使用 class ，这样利于渲染性能的优化。
对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

布尔（boolean）型属性十一：

布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。

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

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

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

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

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

引入 CSS 和 JavaScript 文件十二：

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript分别是它们的默认值。

引入 `CSS` 时必须指明 `rel="stylesheet"`。

命名

[强制] `class` 必须单词全字母小写，单词间以 `-` 分隔。

[强制] `class` 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。

示例：

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>

[强制] 元素 `id` 必须保证页面唯一。

对于无需自闭合的标签，不允许自闭合。

解释：

常见无需自闭合标签有input、br、img、hr等。

示例：

<!-- good -->
<input type="text" name="title">

<!-- bad -->
<input type="text" name="title" />

[建议] 在 `head` 中引入页面需要的所有 `CSS` 资源。

解释：

在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。

[建议] `JavaScript` 应当放在页面末尾，或采用异步加载。

移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 `URL` 协议部分与页面相同，建议省略协议前缀。

解释：十三：

使用 protocol-relative URL 引入 CSS，在 IE7/8 下，会发两次请求。是否使用 protocol-relative URL 应充分考虑页面针对的环境。

示例：

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>

图片十四：

[强制] 禁止 `img` 的 `src` 取值为空。延迟加载的图片也要增加默认的 `src`。

为重要图片添加 `alt` 属性。

解释：

可以提高图片加载失败时的用户体验。

[建议] 添加 `width` 和 `height` 属性，以避免页面抖动。

[建议] 有下载需求的图片采用 `img` 标签实现，无下载需求的图片采用 `CSS` 背景图实现。

解释：

产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载。
无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现。

表单十五：

6.1 控件标题

[强制] 有文本标题的控件必须使用 `label` 标签将其与其标题相关联。

解释：

有两种方式：

将控件置于 label 内。
label 的 for 属性指向控件的 id。

推荐使用第一种，减少不必要的 id。如果 DOM 结构不允许直接嵌套，则应使用第二种。

示例：

<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>

<label for="username">用户名：</label> <input type="textbox" name="username" id="username">

6.2 按钮

[强制] 使用 `button` 元素时必须指明 `type` 属性值。

解释：

button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。

示例：

<button type="submit">提交</button>
<button type="button">取消</button>

[建议] 尽量不要使用按钮类元素的 `name` 属性。

解释：

由于浏览器兼容性问题，使用按钮的 name 属性会带来许多难以发现的问题。

十六：

任务项

用 TODO 来标记待办事项，而不是用一些其他的标记，像 @@。

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

根据规范每天反省，使代码写的更加的规范！

-----------------------------------------------------------------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;。
单行规则声明

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

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

简写形式的属性声明

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

padding
margin
font
background
border
border-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;
}

选择器

对于通用元素使用 class ，这样利于渲染性能的优化。
对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

空格

[强制] `选择器` 与 `{` 之间必须包含空格。

示例：

.selector {
}

`属性名` 与之后的 `:` 之间不允许包含空格， `:` 与 `属性值` 之间必须包含空格。

示例：

margin: 0;

`列表型属性值` 书写在单行时，`,` 后必须跟一个空格。

示例：

font-family: Arial, sans-serif;

对于超长的样式，在样式值的 `空格` 处或 `,` 后换行，建议按逻辑分组。

示例：

/* 不同属性值按逻辑分组 */
background:
    transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
    no-repeat 0 0;

/* 可重复多次的属性，每次重复一行 */
background-image:
    url(aVeryVeryVeryLongUrlIsPlacedHere)
    url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/* 类似函数的属性值可以根据函数调用的缩进进行 */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162))
);

选择器

[强制] 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

示例：

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

[强制] `>`、`+`、`~` 选择器的两边各保留一个空格。

示例：

/* good */
main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

/* bad */
main>nav {
    padding: 10px;
}

label+input {
    margin-left: 5px;
}

input:checked~button {
    background-color: #69C;
}

如无必要，不得为 `id`、`class` 选择器添加类型选择器进行限定。

解释：

在性能和维护性上，都有一定的影响。

示例：

/* good */
#error,
.danger-message {
    font-color: #c00;
}

/* bad */
dialog#error,
p.danger-message {
    font-color: #c00;
}

选择器的嵌套层级应不大于 3 级，

url()

[强制] `url()` 函数中的路径不加引号。

示例：

body {
    background: url(bg.png);
}

[建议] `url()` 函数中的绝对路径可省去协议名。

示例：

body {
    background: url(//baidu.com/img/bg.png) no-repeat 0 0;
}

颜色

[强制] RGB颜色值必须使用十六进制记号形式 `#rrggbb`。不允许使用 `rgb()`。

解释：

带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。

示例：

/* good */
.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

/* bad */
.success {
    box-shadow: 0 0 2px rgba(0,128,0,.3);
    border-color: rgb(0, 128, 0);
}

[强制] 颜色值可以缩写时，必须使用缩写形式。

示例：

/* good */
.success {
    background-color: #aca;
}

/* bad */
.success {
    background-color: #aaccaa;
}

[强制] 颜色值不允许使用命名色值。

示例：

/* good */
.success {
    color: #90ee90;
}

/* bad */
.success {
    color: lightgreen;
}

HTML规范

HTML规范

一、文档类型声明：

③：title 必须作为 head 的直接子元素，并紧随 charset 声明之后。

DOCTYPE

③：[强制] 使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。

④：[建议] 启用 IE Edge 模式。

[建议]⑤： 在 html 标签上设置正确的 lang 属性。

代码风格⑥：

实用为王

属性顺序⑦：

声明顺序⑧：

class 命名⑨：

选择器 十：

布尔（boolean）型属性 十一：

引入 CSS 和 JavaScript 文件 十二：

引入 CSS 时必须指明 rel="stylesheet"。

命名

[强制] class 必须单词全字母小写，单词间以 - 分隔。

[强制] class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。

[强制] 元素 id 必须保证页面唯一。

对于无需自闭合的标签，不允许自闭合。

[建议] 在 head 中引入页面需要的所有 CSS 资源。

[建议] JavaScript 应当放在页面末尾，或采用异步加载。

移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。

图片 十四：

[强制] 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。

为重要图片添加 alt 属性。

[建议] 添加 width 和 height 属性，以避免页面抖动。

[建议] 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。

表单 十五：

6.1 控件标题

[强制] 有文本标题的控件必须使用 label 标签将其与其标题相关联。

6.2 按钮

[强制] 使用 button 元素时必须指明 type 属性值。

[建议] 尽量不要使用按钮类元素的 name 属性。

语法

单行规则声明

简写形式的属性声明

选择器

空格

[强制] 选择器 与 { 之间必须包含空格。

属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

列表型属性值 书写在单行时，, 后必须跟一个空格。

对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。

选择器

[强制] 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

[强制] >、+、~ 选择器的两边各保留一个空格。

如无必要，不得为 id、class 选择器添加类型选择器进行限定。

选择器的嵌套层级应不大于 3 级，

url()

[强制] url() 函数中的路径不加引号。

[建议] url() 函数中的绝对路径可省去协议名。

颜色

[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。

[强制] 颜色值可以缩写时，必须使用缩写形式。

[强制] 颜色值不允许使用命名色值。

`③：title` 必须作为 `head` 的直接子元素，并紧随 `charset` 声明之后。

③：[强制] 使用 `HTML5` 的 `doctype` 来启用标准模式，建议使用大写的 `DOCTYPE`。

[建议]⑤：在 `html` 标签上设置正确的 lang 属性。

选择器十：

布尔（boolean）型属性十一：

引入 CSS 和 JavaScript 文件十二：

引入 `CSS` 时必须指明 `rel="stylesheet"`。

[强制] `class` 必须单词全字母小写，单词间以 `-` 分隔。

[强制] `class` 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。

[强制] 元素 `id` 必须保证页面唯一。

[建议] 在 `head` 中引入页面需要的所有 `CSS` 资源。

[建议] `JavaScript` 应当放在页面末尾，或采用异步加载。

移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 `URL` 协议部分与页面相同，建议省略协议前缀。

图片十四：

[强制] 禁止 `img` 的 `src` 取值为空。延迟加载的图片也要增加默认的 `src`。

为重要图片添加 `alt` 属性。

[建议] 添加 `width` 和 `height` 属性，以避免页面抖动。

[建议] 有下载需求的图片采用 `img` 标签实现，无下载需求的图片采用 `CSS` 背景图实现。

表单十五：

[强制] 有文本标题的控件必须使用 `label` 标签将其与其标题相关联。

[强制] 使用 `button` 元素时必须指明 `type` 属性值。

[建议] 尽量不要使用按钮类元素的 `name` 属性。

[强制] `选择器` 与 `{` 之间必须包含空格。

`属性名` 与之后的 `:` 之间不允许包含空格， `:` 与 `属性值` 之间必须包含空格。

`列表型属性值` 书写在单行时，`,` 后必须跟一个空格。

对于超长的样式，在样式值的 `空格` 处或 `,` 后换行，建议按逻辑分组。

[强制] `>`、`+`、`~` 选择器的两边各保留一个空格。

如无必要，不得为 `id`、`class` 选择器添加类型选择器进行限定。

[强制] `url()` 函数中的路径不加引号。

[建议] `url()` 函数中的绝对路径可省去协议名。

[强制] RGB颜色值必须使用十六进制记号形式 `#rrggbb`。不允许使用 `rgb()`。