基本原则
结构、样式、行为分离
尽量确保文档和模板只包含HTML结构,样式都放到样式表里,行为都放到脚本里。
缩进
统一两个空格缩进(总之就是缩进统一即可),不要使用Tab或者Tab、空格混搭。
文件编码
使用不带BOM的UTF-8编码。
- 在HTML中指定编码
<meta charset="utf-8">
- 无需使用@charset指定样式表的编码,它默认为UTF-8
一律使用小写字母
<!-- Recommended -->
![](google.png)
<!-- Not Recommended -->
<A HREF="/">HOME</A>
/* Recommended */
color: #e5e5e5;
/* Not Recommended */
color: #E5E5E5;
省略外链资源URL协议部分
省略外链资源(图片及其它媒体资源)URL中的http/https协议,使URL成为相对地址,避免Mixed Content问题,减小文件字节数。
其它协议(ftp等)的URL不省略。
<!-- Recommended -->
<script src="//www.w3cschool.cn/statics/js/autotrack.js"></script>
<!-- Not recommended -->
<script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>
/* Recommended */
.example {
background: url(//www.google.com/images/example);
}
/* Not recommended */
.example {
background: url(http://www.google.com/images/example);
}
统一注释
HTML注释
- 模块注释
<!-- 文章列表列表模块 -->
<div class="article-list">
...
</div>
- 区块注释
<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->
CSS注释
组件块和子组件块以及声明块之间使用一空行分隔,子组件块之间三空行分隔。
/* ==========================================================================
组件块
============================================================================ */
/* 子组件块
============================================================================ */
.selector {
padding: 15px;
margin-bottom: 15px;
}
/* 子组件块
============================================================================ */
.selector-secondary {
display: block; /* 注释*/
}
.selector-three {
display: span;
}
Javascript注释
- 单行注释
必须独占一行。//
后跟一个空格,缩进与下一行被注释说明的代码一致。 - 多行注释
避免使用/*...*/
这样的多行注释。有多行注释内容时,使用多个单行注释。 - 函数/方法注释
- 函数/方法注释必须包含函数说明,有参数和返回值时必须使用注释标识;
- 参数和返回值注释必须包含类型信息和说明;
- 当函数是内部函数,外部不可访问时,可以使用 @inner 标识;
/**
* 函数描述
*
* @param {string} p1 参数1的说明
* @param {string} p2 参数2的说明,比较长
* 那就换行了.
* @param {number=} p3 参数3的说明(可选)
* @return {Object} 返回值描述
*/functionfoo(p1, p2, p3){
var p3 = p3 || 10;
return {
p1: p1,
p2: p2,
p3: p3
};
}
文件注释
文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。如下:
/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author user@meizu.com (Firstname Lastname)
* Copyright 2015 Meizu Inc. All Rights Reserved.
*/
代码验证
- 使用
W3C HTML Validator
来验证你的HTML代码的有效性; - 使用
W3C CSS Validator
来验证你的CSS代码有效性;
代码验证不是最终目的,真的目的在于让开发者在经过多次的这种验证过程后,能够深刻理解到怎样的语法或写法是非标准和不推荐的,即使在某些场景下被迫要使用非标准写法,也可以做到心中有数。
通用约定
标签
-
自闭合(self-closing)标签,无需闭合(例如:
img
input
br
hr
等); -
可选的闭合标签(closing tag),需闭合(例如:
</li>
或</body>
); - 尽量减少标签数量;
![](//img.w3cschool.cn/attachments/image/cimg/google.png)
<input type="text" name="title">
<ul>
<li>Style</li>
<li>Guide</li>
</ul>
<!-- Not recommended -->
<span class="avatar">
![](...)
</span>
<!-- Recommended -->
![](...)
Class与ID
- class应以功能或内容命名,不以表现形式命名;
- class与id单词字母小写,多个单词组成时,采用中划线
-
分隔; - 使用唯一的id作为Javascript hook,同时避免创建无样式信息的class;
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
属性顺序
HTML属性应该按照特定的顺序出现以保证易读性。
- id
- class
- name
- data-xx
- src, for, type, href
- title, alt
- aria-xxx, role
<a id="..." class="..." data-modal="toggle" href="###"></a>
<input class="form-control" type="text">
![](...)
引号
属性的定义,统一使用双引号。
<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>
<!-- Recommended -->
<span id="j-hook" class="text">Google</span>
嵌套
a不允许嵌套div 这种约束属于语义嵌套约束,与之区别的约束还有严格嵌套约束,比如a不允许嵌套a。
严格嵌套约束在所有的浏览器下都不被允许;而语义嵌套约束,浏览器大多会容错处理,生成的文档树可能相互不太一样。
语义嵌套约束
-
<li>
用于<ul>
或<ol>
下; -
<dd>
,<dt>
用于<dl>
之下; -
<thead>
,<tbody>
,<tfoot>
,<tr>
,<td>
用于<table>
下;
严格嵌套约束
- inline-Level元素,仅可以包含文本或其他inline-Level元素;
-
<a>
里不可以嵌套交互式元素<a>
、<button>
、<select>
等; -
<p>
里不可以嵌套块级元素<div>
、<h1>~<h6>
、<p>
、<ul>/<ol>/<li>
、<dl>/<dt>/<dd>
、<form>
等。
布尔值属性
HTML5规范中disabled
、 checked
、 selected
等属性不用设置值。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
语义化
没有css
的HTML
是一个语义系统而不是UI系统。
通常情况下,每个标签都是有语义的,所谓语义就是你的衣服分为外套、裤子、裙子、内裤等,各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧。
此外,语义化的HTML
结构,有助于机器(搜索引擎)理解,另一方面多人协作时,能迅速了解开发者的意图。
常见标签语义
标签 | 语义 |
---|---|
<p> |
段落 |
<h1> <h2> <h3> ··· |
标题 |
<ul> |
无序列表 |
<ol> |
有序列表 |
<blockquote> |
大段引用 |
<cite> |
一般引用 |
<b> |
为样式加粗而加粗 |
<strong> |
为强调内容而加粗 |
<i> |
为样式倾斜而倾斜 |
<em> |
为强调内容而倾斜 |
code |
代码标识 |
abbr |
缩写 |
示例
将你构建的页面当作一本书,将标签的语义对应的其功能和含义;
- 书的名称:
<h1>
- 书的每个章节标题:
<h2>
- 章节内的文章标题:
<h3>
- 小标题/副标题:
<h4> <h5> <h6>
- 章节的段落:
<p>
HEAD
文档类型
为每个HTML页面的第一行添加标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的表现。
<!DOCTYPE html>
语言属性
为什么使用lang="zh-cmn=Hans"而不是我们通常写的lang="zh-CN"呢?请参考:https://www.zhihu.com/question/20797118
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 简体中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁体中文 -->
<html lang="zh-cmn-Hnat">
<!-- Enlish -->
<html lang="en">
字符编码
- 以无BOM的utf-8编码作为文件格式;
- 指定字符编码的meta必须是head的第一个直接子元素;
<html>
<head>
<meta charset-"utf-8">
···
</head>
<body>
···
</body>
</html>
IE兼容模式
优先使用最新版本的IE和Chrome内核
<meta http-equiv="X-UA-Cimpatible" content="IE=edge,chrome=1">