Html
Html
Html
DOCTYPE 声明
推荐使用 HTML5 的文档声明
1
<!DOCTYPE html>
页面语言 lang
推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值
1
<html lang="zh-CN">
网页编码 charset
推荐使用 “UTF-8” 编码
1
<meta charset="UTF-8">
标签及闭合
- 尽量标签语义化
- 标签必须合法且闭合、嵌套正确，标签名需小写
- 不要在自闭合（self-closing）元素、空元素的尾部添加斜线 — HTML5 规范 中明确说明斜线是可忽略的。
- 所有具有开始标签和结束标签的元素都要写上起止标签，不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。
推荐：
1
2
3
4
5
6
<div>
<h1>我是h1标题</h1>
<p>我是一段文字，我有始有终，浏览器能正确解析</p>
</div>
<br>
不推荐：
1
2
3
4
5
6
<div>
<h1>我是h1标题</h1>
<p>我是一段文字，我有始无终，浏览器亦能正确解析
</div>
<br/>
书写风格
代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐：
1
<div class="demo"></div>
不推荐：
1
2
3
<div class="DEMO"></div>
<DIV CLASS="DEMO"></DIV>
HTML文本、CDATA、JavaScript、meta标签某些属性等内容可大小写混合
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 优先使用 IE 最新版本和 Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- HTML文本内容 -->
<h1>I AM WHAT I AM </h1>
<!-- JavaScript 内容 -->
<script type="text/javascript">
var demoName = 'demoName';
...
</script>
<!-- CDATA 内容 -->
<script type="text/javascript"><![CDATA[
...
]]></script>
**此标记用于xml文档中，这个标记所包含的内容将表示为纯文本**，会被解析器忽略。
类型属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含
推荐：
1
2
<link rel="stylesheet" href="" >
<script src=""></script>
不推荐：
1
2
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
元素属性
- 属性名使用小写字母
- 属性值使用双引号包围
- 元素属性值可以写上的都写上
推荐：
1
2
3
<input type="text">
<input type="radio" name="name" checked="checked" >
不推荐：
1
2
3
4
<input type=text>
<input type='text'>
<input type="radio" name="name" checked >
特殊字符引用
文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。
在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
推荐：
1
<a href="#">more>></a>
不推荐：
1
代码缩进
推荐使用四个空格进行代码缩进
1
2
3
<div class="jdc">
</div>
代码嵌套
元素嵌套规范，每个块状元素独立一行，内联元素可选
推荐：
1
2
3
4
5
<div>
<h1></h1>
<p></p>
</div>
<p><span></span><span></span></p>
不推荐：
1
2
3
4
5
6
7
<div>
<h1></h1><p></p>
</div>
<p>
<span></span>
<span></span>
</p>
段落元素与标题元素只能嵌套内联元素
推荐：
1
2
<h1><span></span></h1>
<p><span></span><span></span></p>
不推荐：
1
2
<h1><div></div></h1>
<p><div></div><div></div></p>
注释规范
单行注释
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
推荐：
1
2
<!-- 注释内容 -->
<div>...</div>
模块注释
注释内容前后各一个空格字符， 表示模块开始， 表示模块结束，模块与模块之间相隔一行
推荐：
1
2
3
4
5
6
7
8
9
10
11
<!-- S Comment Text A -->
<div class="mod_a">
...
</div>
<!-- E Comment Text A -->
<!-- S Comment Text B -->
<div class="mod_b">
...
</div>
<!-- E Comment Text B -->
嵌套模块注释
当模块注释内再出现模块注释的时候，为了突出主要模块，改用
1
<!-- /Comment Text -->
注释写在模块结尾标签底部，单独一行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- S Comment Text A -->
<div class="mod_a">
<div class="mod_b">
...
</div>
<!-- /mod_b -->
<div class="mod_c">
...
</div>
<!-- /mod_c -->
</div>
<!-- E Comment Text A -->
常用HTML字符实体
| 字符 | 名称 | 实体名 | 实体数 | | — | — | — | — | | “ | 双引号 | " | " | | & | &符 | & | & | | < | 左尖括号（小于号） | < | < | | > | 右尖括号（大于号） | > | > | | | 空格 | | | | | 中文全角空格 | | |
| 字符 | 名称 | 实体名 | 实体数 |
|---|---|---|---|
| ¥ | 元 | ¥ | ¥ |
| ¦ | 断竖线 | ¦ | ¦ |
| © | 版权 | © | © |
| ® | 注册商标R | ® | ® |
| ™ | 商标TM | ™ | ™ |
| · | 间隔符 | · | · |
| « | 左双尖括号 | « | « |
| » | 右双尖括号 | » | » |
| ° | 度 | ° | ° |
| × | 乘 | × | × |
| ÷ | 除 | ÷ | ÷ |
| ‰ | 千分比 | ‰ | ‰ |
常用的标签
| 标签 | 语义 | 嵌套常见错误 | 常用属性（加粗的为不可缺少的或建议的） | | — | — | — | — | | | 超链接/锚 | a不可嵌套a | href,name,title,rel,target | |
| 换行 | | | | | 按钮 | 不可嵌套表单元素 | type,disabled | | <dd></dd> | 定义列表中的定义 | 只能以dl为父容器，对应一个dt | | | | 文本删除 | | | | <div></div> | 块级容器 | | | | <dl></dl> | 定义列表 | 只能嵌套dt和dd | | | <dt></dt> | 定义列表中的定义术语 | 只能以dl为父容器，对应多个dd | | | | 强调文本 | | | | <form></form> | 表单 | | action,target,method,name | | <h1></h1> | 标题 | 从h1到h6，不可嵌套块级元素 | | | <iframe></iframe> | 内嵌一个网页 | | frameborder,width,height,src,scrolling,name | |