语法
- 用四个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。不允许使用 2 个空格 或 tab 字符。
- 嵌套元素应当缩进一次（即四个空格）。
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
- 对于属性的定义，确保全部使用双引号，绝不要使用单引
<!-- good -->
<div class="good"></div>
<!-- bad-->
<div class='bad'></div>
- 不要在自闭合（self-closing）元素的尾部添加斜线。
常见无需自闭合标签有 input、br、img、hr 等。
<!-- good -->
<input type="text" name="title">
<!-- bad-->
<input type="text" name="title" />
- 不要省略可选的结束标签（例如,</ div>或 </ body）。
<!-- good -->
<ul>
<li>first</li>
<li>second</li>
</ul>
<!-- bad-->
<ul>
<li>first
<li>second
</ul>
- 标签使用必须符合标签嵌套规则。
比如 div 不得置于 p 中，tbody 必须置于 table 中。li必须置于ul或者ol中，dt dd 必须置于dl 中
<!-- good -->
<p>Esprima <strong>building block</strong> for some JavaScript language tools.</p>
<!-- bad-->
<p><div class="text"></div></p>
- HTML 标签的使用应该遵循标签的语义
p - 段落
h1,h2,h3,h4,h5,h6 - 层级标题
strong- 强调
ins - 插入
del - 删除
abbr - 缩写
code - 代码标识
cite - 引述来源作品的标题
q - 引用
blockquote - 一段或长篇引用
ul - 无序列表
ol - 有序列表
dl,dt,dd - 定义列表
i,u,em - 小标签 图标或者单个文字控制
- img 标签上要加 alt 描述属性，a 标签上要加title属性
<a href="www.jerei.com" title="捷瑞数字官网">
- 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。
- 标签名必须使用小写字母
<!-- good -->
<div></div>
<!-- bad -->
<DIV></DIV>
- 布尔（boolean）型属性在声明时不赋值。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
- 属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
所有属性皆使用双引号而不是单引号
class
id, name
data-*
src, for, type, href, value
title, alt
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（确保ID唯一性），因此排在第二位。
<a class="..." id="..." data-toggle="modal" href="#">Example link</a>
<input class="form-control" type="text">
HTML5 doctype
- 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
- 强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。统一为 lang="zh-cn"
<!DOCTYPE html>
<html lang="zh-cn">
<head>
</head>
</html>
字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
<head>
<meta charset="UTF-8">
</head>
响应式网站的viewport
为保证响应式网站在移动端的正常预览
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
IE 兼容模式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
添加网页图标，关键词和网站描述，便于SEO搜索
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免 404，必须遵循以下两种方法之一：
1.在 Web Server 根目录放置 favicon.ico 文件。
2.使用 link 指定 favicon。
<meta content="" name="Keywords">
<meta content="" name="Description">
<link rel="icon" href="/resources/favicon.ico" >
引入 CSS 和 JavaScript 文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
所有 CSS 资源应当在head中引用，JavaScript 应当放在页面末尾，或采用异步加载。
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
实用为王
尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。尽量减少代码嵌套
JavaScript 生成的标签
通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
代码分离
严格地保证HTML、CSS、JS三者分离，并尽量使三者之间没有太多的交互和联系。
- 尽可能减少CSS和JS引用个数，尽量合并压缩。
- 不使用行内样式（<style>.no-good {}</style>）
- 不在元素上使用 style 属性（<div style="border-top: 5px solid black"></div>）
- 不使用行内脚本（<script>alert('no good')</script>）
div层级较多时推荐添加注释
<!-- main -->
<div class="main">
<!-- pageHeader -->
<div class="pageHeader">
<div class="logo">
</div>
</div>
<!-- /pageHeader -->
</div>
<!-- /main -->
表单
- 控件标题
有文本标题的控件必须使用 label 标签将其与其标题相关联。
1.将控件置于 label 内。
2.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">
- 按钮
button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。
<button type="submit">提交</button>
<button type="button">取消</button>
网友评论