附文档模板
TODO
- 使用 TODO 来标记待做事情，便于后期搜索.
- 在 TODO 后添加 (姓名或邮件) 来表示分类.
例如
<!-- TODO(yiminghe): remove duplicate tag -->
<p><span>2</span></p>
注释
建议对超过10行的页面模块进行注释, 以降低开发人员的嵌套成本和后期的维护成本. 例如：
<div id="sample">
...
</div> <!-- #sample END -->
<div class="sample">
...
</div> <!-- .sample END -->
- link link 用于引入 css 资源时, 可省去 media(默认为all) 和 type(默认为text/css) 属性;
- style type 默认为 text/css, 可以省去;
- script type 属性可以省去; 不赞成使用lang属性; 不要使用古老的<!– //–>这种hack脚本, 它用于阻止第一代浏览器(Netscape 1和Mosaic)将脚本显示成文字;
p 表示段落. 只能包含内联元素, 不能包含块级元素;
a a 存在 href 属性时表示链接, 无 href 属性但有 name 属性表示锚点;
- img 请勿将img元素作为定位布局的工具, 不要用他显示空白图片; 给img元素增加alt属性;例如
<!-- 不推荐 -->
<img src="spreadsheet.png">
<!-- 推荐 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
- object 可以用来插入Flash;
- dl 表示关联列表, dd是对dt的解释; dt和dd的对应关系比较随意：
一个dt对应多个dd、多个dt对应一个dd、多个dt对应多个dd, 都合法; 可用于名词/单词解释、日程列表、站点目录; * ul 表示无序列表; *ol 表示有序列表, 可用于排行榜等; li 表示列表项, 必须是ul/ol的子元素;
- 推荐使用 button 代替 input, 但必须声明 type;
文档模板
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample page</title>
<link rel="stylesheet" href="css_example_url" />
</head>
<body>
<div id="page">
<div id="header">
页头
</div>
<div id="content">
主体
</div>
<div id="footer">
页尾
</div>
</div>
<script src="js_example_url"></script>
<script>
// 你的代码
</script>
</body>
</html>
规范CSS
id 和 class 的命名长度应该适中，不要太简略也不要太详细；例如
/* 不推荐 */
#navigation {}
.atr {}
/* 推荐 */
#nav {}
.author {}
简写属性名字
为了提高可读性，尽可能的使用简写属性。例如
/* 不推荐 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;