- 参考资料：《现代前端技术解析》
一、前端 HTML 规范
1.1 文档类型定义
<!-- 不推荐 - HTML 4.01 的 DTD 定义 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11//DTD/xhtml11.dtd">
<!-- 推荐.md HTML5 的标准文档类型 -->
<!DOCTYPE html>
1.2 head 内容
head中必须定义title、keyword、description，保证基本的SEO页面关键字和内容描述。- 移动端页面
head要添加viewport控制页面不缩放，有利于提高页面渲染性能。- 建议在页面
<head>上加上基本的社交RICH化信息，保证网页地址分享到主流社交平台后显示页面的缩略图、标题和描述等。
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta itemprop="name" content="页面标题">
<meta name="description" itemprop="description" content="页面描述内容">
<meta itemprop="image" content="http://www.domain.com/assets/logo.png">
1.3 省略 type 属性
- 在引用
CSS或JavaScript时，可以省略type属性不写
- 因为
HTML5在引入CSS时默认type值为text/css，在引入JavaScript时默认type值为text/javascript
1.4 使用双引号包裹属性值
- 所有标签属性值必须要用双引号包裹，不允许有的用双引号，有的用单引号
- 这样有利于区分标签的属性名和属性值
<!-- 不推荐 -->
<div class='wrap'></div>
<!-- 推荐.md -->
<div class="wrap"></div>
1.5 属性值省略
- 非必需的属性值可以省略。
- 如：输入框的
readonly、disabled和required等属性值是非必需的，可以省略不写
<!-- 不推荐 -->
<input type="text" readonly="readonly">
<input type="text" disabled="disabled">
<!-- 推荐.md -->
<input type="text" readonly>
<input type="text" disabled>
1.6 嵌套
- 所有元素必须正确嵌套，尽量使用语义化标签
- 不允许交叉
- 不允许在
inline元素中包含block元素
<!-- 不推荐 -->
<span>
<div>块级元素</div>
</span>
<ul>
<h2>h2</h2>
<li>list-item</li>
</ul>
<!-- 推荐.md -->
<div>
<p>p元素</p>
<ul>
<li>list-item</li>
</ul>
</div>
1.7 标签闭合
- 非自闭合标签必须添加关闭标识，自闭合标签无须关闭。
- 在
W3C的不同规范中，标签的闭合检查也是不一样的。
XHTML较为严格，必须在自闭合标签中添加"/""HTML4.01不推荐在自闭合标签中添加"/""HTML5添不添加"/""都符合规范
1.8 使用img的alt属性
- 为
<img>元素加上alt属性，alt属性的内容可以简要描述图片的内容，有利于页面搜索引擎优化，而且对于盲人用户和图像加载失效时的提示也很实用（即：支持无障碍阅读和提示），所以要尽量避免alt的属性值为空
1.9 使用label的for属性
- 为表单内部元素
<label加上for属性或者将对应控件放在<label>标签内部；- 这样点击
<label>标签的时候，同时会关联到对应的input或textarea上选中，可以增加输入的响应区域。
<!-- 不推荐 -->
<label>蓝色</label><input type="radio" name="color">
<!-- 推荐.md -->
<label for="blue">蓝色</label><input type="radio" id="blue" name="color">
<!-- 或推荐 -->
<label><input type="radio" name="color">蓝色</label>
1.10 按模块添加注释
- 在每个大的模块的开始和结束的地方添加起始注释标记，便于开发者识别、维护。
<!-- 新闻列表模块 -->
<div id="news" class="g-news"></div>
<!-- 新闻列表模块结束 -->
1.11 标签元素格式
- 块级元素一般另起一行写，行内元素可根据情况换行
- 尽量保证行内元素代码长度不超过一行，否则要换行
- 子元素需相对父元素进行缩进
<!-- 不推荐 -->
<div><h1>name</h1><p>aaa<em>bbbb</em>ccc<span>dddd</span>eeee</p></div>
<!-- 推荐.md -->
<div>
<h1>name</h1>
<p>aaa<em>bbbb</em>ccc<span>dddd</span>eeee</p>
</div>
1.12 语义化标签
- 在合适的地方使用语义合适的标签。
<section class="m-news g-mod">
<header class="m-news-hd">
头部区域
</header>
<div class="m-news-bd">
模块正文
</div>
<footer class="m-news-ft">
底部区域
</footer>
</section>