目录
1. 前言
2. 通用
2.1. DOCTYPE
2.2. 字符编码
2.3. 引入 CSS 和 JavaScript 文件
2.4. head
2.4.1 title
2.4.2 favicon
3. 代码风格
3.1. 缩进与换行
3.2. 命名
3.3. 标签
3.4. 属性
4. 图片
5. 表单
5.1. 控件标题
5.2. 按钮
1. 前言
本文档的目标是使HTML代码风格保持一致,容易被理解和被维护
2. 通用
2.1. DOCTYPE
示例:
<!DOCTYPE html>
示例:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
示例:
<html lang="zh-CN">
<!-- ... -->
</html>
2.2. 字符编码
示例:
<html>
<head>
<meta charset="UTF-8">
......
</head>
<body>
......
</body>
</html>
2.3. 引入 CSS 和 JavaScript 文件
示例:
<link rel="stylesheet" src="page.css">
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>
示例:
<body>
<!-- a lot of elements -->
<script src="init-behavior.js"></script>
</body>
2.4. head
2.4.1 title
示例:
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
2.4.2 favicon
示例:
<link rel="shortcut icon" href="path/to/favicon.ico">
3. 代码风格
3.1. 缩进与换行
示例:
<ul>
<li>first</li>
<li>second</li>
</ul>
3.2. 命名
示例:
<!-- good -->
<div class="sidebar"></div>
<!-- bad -->
<div class="left"></div>
3.3. 标签
示例:
<!-- good -->
<p>Hello StyleGuide!</p>
<!-- bad -->
<P>Hello StyleGuide!</P>
示例:
<!-- good -->
<input type="text" name="title">
<!-- bad -->
<input type="text" name="title" />
示例:
<!-- good -->
<ul>
<li>first</li>
<li>second</li>
</ul>
<!-- bad -->
<ul>
<li>first
<li>second
</ul>
示例:
<!-- good -->
<p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p>
<!-- bad -->
<div>Esprima serves as an important <span class="strong">building block</span> for some JavaScript language tools.</div>
示例:
<!-- good -->
<img class="avatar" src="image.png">
<!-- bad -->
<span class="avatar">
<img src="image.png">
</span>
3.4. 属性
示例:
<!-- good -->
<table cellspacing="0">...</table>
<!-- bad -->
<table cellSpacing="0">...</table>
示例:
<!-- good -->
<script src="esl.js"></script>
<!-- bad -->
<script src='esl.js'></script>
<script src=esl.js></script>
示例:
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
示例:
<ol data-ui-type="Select"></ol>
示例:
<a class="..." id="..." data-toggle="modal" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">
4. 图片
5. 表单
5.1. 控件标题
示例:
<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
<label for="username">用户名:</label> <input type="textbox" name="username" id="username">
5.2. 按钮
示例:
<button type="submit">提交</button>
<button type="button">取消</button>
参考资料:
百度规范: https://github.com/fex-team/styleguide/blob/master/html.md BootStrap规范: https://codeguide.bootcss.com/#html Best Practices for Speeding Up Your Web Site——Avoid Empty Image src: https://developer.yahoo.com/performance/rules.html?guccounter=1&guce_referrer=aHR0cHM6Ly9naXRodWIuY29tL2ZleC10ZWFtL3N0eWxlZ3VpZGUvYmxvYi9tYXN0ZXIvaHRtbC5tZA&guce_referrer_sig=AQAAAL4m2IAb3Y6hgGUu7H_YsODpWsfws32Mz9CvXwKBHH2DGmiCX5OFzMR0bLT9DPUHH7UHBp9I1A7iZdftUGZ2TRvz9gsCitFq2AF4t_pGqpl7PyeJYjdgP97vW2TisZeZjsWLgS0Pyl4SWx0gjgj0b0h2zOqPEKhqcfdNSB1KwkRW#emptysrc