HTML编码规范

版规则

缩进

使用2个空格缩进

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

.example {
  color: blue;
}

大小写

只允许使用小写。

所有的代码都用小写字母：适用于元素名，属性，属性值（除了文本和CDATA），选择器，特性，特性值（除了字符串）。

<!-- 不推荐 -->
<A HREF="/">Home</A>

<!-- 推荐 -->
<img src="google.png"
alt="Google">

行为空格

建议删除行尾白空格。

<!-- 不推荐 -->
<p>What?  </p>

<!-- 推荐 -->
<p>Yes please.</p>

常规Meta规则

编码

如果没有特殊需求，一般采用utf-8编码。如果是cms站点，则遵守该站点的编码规则。

<!-- 网页编码 -->
<meta charset="utf-8">

注释

尽可能的去解释你写的代码。说明该代码包括什么、目的是什么、能做什么、为什么使用它等。

注释是否需要详尽，取决于项目的复杂程度。

一般单行注释：

<!-- col -->

模块间注释：

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循环注释：

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms输出注释：

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab选项卡内容注释：

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常规HTML设计规则

文档类型

使用html5文档声明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文档类型中的首选：

<!DOCTYPE html>

HTML 的正确性

编写有效、正确的HTML代码，否则很难达到性能上的提升。

可以使用一些工具验证你的代码，如 W3C HTML validator

HTML 的语义性

根据HTML各个元素的用途而去使用它们。

<!-- 不推荐 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

<!-- 推荐 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分标签说明：

div 主要用于布局，分割页面的结构;
ul/ol 主要用于无序/有序列表;
dl/dt/dd 当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签;
span 没有特殊的意义，可以用作排版的辅助，然后在css中定义span;
h1-h6 标题, 根据重要性依次递减;
h1 最重要的标题;
label 使表单更有亲和力而且能辅助表单排版;

不推荐使用的标签：

font 文字的外观，大小和颜色;
u 文本下划线;
center 居中对齐;
s 删除线;
strike 删除线;
noframes 无视框时的内容;
iframe 定义嵌入视图;
isindex 不建议使用（可搜寻，使用input代替）;
dir 目录式列举;
menu 菜单列表;
basefont 定义基本字体;
applet 定义java程序;
frame 定义个别视框;
frameset 视框格式总定义;

多媒体元素降级处理

给多媒体元素，比如canvas、videos、 images增加alt属性，提高可用性（特别是常用的img标签，尽可量得加上alt属性，提供图片的描述信息）。

<!-- 不推荐 -->
<img src="world.jpg">

<!-- 推荐 -->
<img src="world.jpg"
alt="our world images">

type属性

在样式表和脚本的标签中忽略type属性。

HTML5默认type为text/css和text/javascript类型，所以没必要指定。即便是老浏览器也是支持的。

<!-- 不推荐 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推荐 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代码格式规则

每个块元素、列表元素或表格元素都独占一行，每个子元素都相对于父元素进行缩进。按设计稿划分模块，尽量使页面模块化，模块与模块之前要有清晰的注释。

如上面页面框架，推荐写法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML与SEO

页面良好层次

保证整个页面在未加载样式表时仍有较好的层次清晰的页面结构。

<!-- 不推荐 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>

<!-- 推荐 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

权重标签使用

H标签使用

h1 权重高，体现当前网页中相对比较重要的信息，但不宜过多，建议一个页面只放一个;
h2 可以做副标题;
h3 可以做新闻列表;
h4-h6 可做相关新闻的列表标签属性完整;

strong、b使用

将需要加粗的文字使用b标签来显示。

将需要强调的文字（主要指包含关键词的信息）使用strong标签来强调主要内容。

注：b是粗体标签，属于实体标签，它所包围的字符将被设为bold（粗体）；strong 是加重语气标签，属于逻辑标签，它的作用是加强字符语气。

标签属性使用

在很多情况下，a都要使用title来说明该链接的相关说明或目的意义。

例如：当使用overflow隐藏掉a中的溢出文字时，该a中的title是必不可少的，它可以告诉用户被隐藏掉的文字内容是什么；又或者当一个图片型链接出现时，该a中的title同样是必不可少的，它可以告诉用户这个图片链接是做什么用的。

注：仅在img里添加alt标签在火狐提示文字是出不来的，alt是图片加载失败或未加载完全时显示出来的提示文字，要想鼠标移上去显示提示信息应该用title，严谨的写法是img里加入alt和title这两个标签。

精简代码

代码保持精简，最优化，这样搜索引擎才更喜欢。

TML 符号实体

HTML 符号是不呈现在标准的键盘上，比如数学运算符、箭头符号、技术符号和形状。

如需向 HTML 页面添加这些符号，您可以使用 HTML 实体名称。

如果不存在实体名称，您可以使用实体编号。

如果字符没有实体名称，您可以使用十进制（或十六进制）引用。

实例

结果如下：

我将显示 €

HTML 支持的数学符号

如果您使用的是一个 HTML 实体名称或一个十六进制编号，字符总是能正确显示。

这是与您页面使用的字符集相互独立的！

字符	编号	实体	描述
∀	∀	∀	所有（for all）
∂	∂	∂	部分（part）
∃	∃	∃	存在（exists）
∅	∅	∅	空（empty）
∇	∇	∇	倒三角（nabla）
∈	∈	∈	属于（isin）
∉	∉	∉	不属于（notin）
∋	∋	&ni;	包含的成员（ni）
∏	∏	∏	连乘（prod）
∑	∑	∑	总和（sum）

完整的数学（Math）参考手册

HTML 支持的希腊字母

字符	编号	实体	描述
Α	Α	Α	Alpha（中文注音：阿耳法）
Β	Β	Β	Beta（中文注音：贝塔）
Γ	Γ	Γ	Gamma（中文注音：伽马）
Δ	Δ	Δ	Delta（中文注音：德耳塔）
Ε	Ε	Ε	Epsilon（中文注音：艾普西隆）
Ζ	Ζ	Ζ	Zeta（中文注音：截塔）

完整的希腊（Greek）参考手册

HTML 支持的其他实体

字符	编号	实体	描述
©	©	©	版权所有（REGISTERED SIGN）
®	®	®	注册商标（REGISTERED SIGN）
€	€	€	欧元符号（EURO SIGN）
™	™	™	商标（trademark）
←	←	←	向左箭头（LEFTWARDS ARROW）
↑	↑	↑	向上箭头（UPWARDS ARROW）
→	→	→	向右箭头（RIGHTWARDS ARROW）
↓	↓	↓	向下箭头（DOWNWARDS ARROW）
♠	♠	&spades;	黑桃（BLACK SPADE SUIT）
♣	♣	&clubs;	黑梅花（BLACK CLUB SUIT）
♥	♥	&hearts;	黑心（BLACK HEART SUIT）
♦	♦	&diams;	黑方块（BLACK DIAMOND SUIT）

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

法

缩进使用soft tab（4个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可选的）；
不要忽略可选的关闭标签，例:

<!DOCTYPE html>
 <html>
 	<head>
 		<title>Page title</title>
 	</head>
 	<body> <img src="images/company_logo.png" alt="Company">
 		<h1 class="hello-world">Hello, world!</h1>
 	</body>
 </html>

HTML5 doctype在页面开头使用这个简单地doctype来启用标准模式，使其在每个浏览器中尽可能一致的展现；虽然doctype不区分大小写，但是按照惯例，doctype大写（关于html属性，大写还是小写）。<!DOCTYPE html> <html> ... </html> lang属性根据HTML5规范：应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。
更多关于 lang 属性的说明在这里；在sitepoint上可以查到语言列表；
但sitepoint只是给出了语言的大类，例如中文只给出了zh，但是没有区分香港，台湾，大陆。而微软给出了一份更加详细的语言列表.aspx)，其中细分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符编码通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 标签可以指定页面应该用什么版本的IE来渲染；<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。HTML5 规范链接使用link
使用style
使用script <link rel="stylesheet" href="code_guide.css">  <style> ... </style>  <script src="code_guide.js"></script>  <script> ... </script> 属性顺序属性应该按照特定的顺序出现以保证易读性；

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class是为高可复用组件设计的，所以应处在第一位；
id更加具体且应该尽量少使用，所以将它放在第二位。

<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">

boolean属性

boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；
更多内容可以参考 WhatWG section on boolean attributes：
boolean属性的存在表示取值为true，不存在则表示取值为false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

JS生成标签

在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点；很多时候，需要通过迭代和重构来使HTML变得更少。

<!-- Not well -->
<span class="avatar">
    <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

实用高于完美

尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

在线咨询

上一篇：零基础学习HTML换行符段落标题水平线文本格式化字体链接锚点
下一篇：新手必看，完整的网站建设制作流程

您的项目需求

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

整合营销服务商