HTML代码书写规范指南
- 高洛峰原创
- 2017-02-24 10:12:311052浏览
通用约定
标签
自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
可选的闭合标签（closing tag），需闭合 ( 例如：bed06894275b65c1ab86501b08a632eb 或 36cc49f0c466276486e50c850b7e4956)；
尽量减少标签数量；
<img src="images/google.png" alt="Google"> <input type="text" name="title"> <ul> <li>Style</li> <li>Guide</li> </ul> <!-- Not recommended --> <span class="avatar"> <img src="..."> </span> <!-- Recommended --> <img class="avatar" src="...">
Class 与 ID
class 应以功能或内容命名，不以表现形式命名；
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
使用唯一的 id 作为 Javascript hook，同时避免创建无样式信息的 class；
<!-- Not recommended --> <p class="j-hook left contentWrapper"></p> <!-- Recommended --> <p id="j-hook" class="sidebar content-wrapper"></p>
属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性。
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
<a id="..." class="..." data-modal="toggle" href="###"></a> <input class="form-control" type="text"> <img src="..." alt="...">
引号
属性的定义，统一使用双引号。
<!-- Not recommended --> <span id='j-hook' class=text>Google</span> <!-- Recommended --> <span id="j-hook" class="text">Google</span>
b嵌套
a 不允许嵌套 p 这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如 a 不允许嵌套 a。
严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。
语义嵌套约束
25edfb22a4f469ecb59f1190150159c6 用于 ff6d136ddc5fdfeffaf53ff6ee95f185 或 c34106e0b4e09414b63b2ea253ff83d6 下；
67bc4f89d416b0b8236eaa5f43dee742，73de882deff7a050a357292d0a1fca94 用于 5c69336ffbc20d23018e48b396cdd57a 下；
ae20bdd317918ca68efdc799512a9b39，92cee25da80fac49f6fb6eec5fd2c22a，06669983c3badb677f993a8c29d18845，a34de1251f0d9fe1e645927f19a896e8，b6c5a531a458a2e790c1fd6421739d1c 用于f5d188ed2c074f8b944552db028f98a1下；
严格嵌套约束
inline-Level 元素，仅可以包含文本或其它 inline-Level 元素；
3499910bf9dac5ae3c52d5ede7383485 里不可以嵌套交互式元素 3499910bf9dac5ae3c52d5ede7383485、bb9345e55eb71822850ff156dfde57c8、221f08282418e2996498697df914ce4e等；
e388a4556c0f65e1904146cc1a846bee里不可以嵌套块级元素e388a4556c0f65e1904146cc1a846bee、4a249f0d628e2318394fd9b75b4636b1~4e9ee319e0fa4abc21ff286eeb145ecc、e388a4556c0f65e1904146cc1a846bee、ff6d136ddc5fdfeffaf53ff6ee95f185/c34106e0b4e09414b63b2ea253ff83d6/25edfb22a4f469ecb59f1190150159c6、5c69336ffbc20d23018e48b396cdd57a/73de882deff7a050a357292d0a1fca94/67bc4f89d416b0b8236eaa5f43dee742、ff9c23ada1bcecdd1a0fb5d5a0f18437等。
布尔值属性
HTML5 规范中 disabled、checked、selected 等属性不用设置值。
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>
语义化
没有 CSS 的 HTML 是一个语义系统而不是 UI 系统。
通常情况下，每个标签都是有语义的，所谓语义就是你的衣服分为外套， 裤子，裙子，内裤等，各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧。-- 一丝
此外语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图。
常见标签语义
| 标签 | 语义 |
| e388a4556c0f65e1904146cc1a846bee | 段落 |
| 4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355... | 标题 |
| ff6d136ddc5fdfeffaf53ff6ee95f185 | 无序列表 |
| c34106e0b4e09414b63b2ea253ff83d6 | 有序列表 |
| b8a712a75cab9a5aded02f74998372b4 | 大段引用 |
| f3a85e1241a187c5ac462d886e9a968b | 一般引用 |
| a4b561c25d9afb9ac8dc4d70affff419 | 为样式加粗而加粗 |
| beafbc2b8a3a352ee5f41c5a0c884975 | 为强调内容而加粗 |
| 5a8028ccc7a7e27417bff9f05adf5932 | 为样式倾斜而倾斜 |
| 907fae80ddef53131f3292ee4f81644b | 为强调内容而倾斜 |
| code | 代码标识 |
| abbr | 缩写 |
示例
将你构建的页面当作一本书，将标签的语义对应的其功能和含义；
书的名称：4a249f0d628e2318394fd9b75b4636b1
书的每个章节标题: c1a436a314ed609750bd7c7d319db4da
章节内的文章标题: 684271ed9684bde649abda8831d4d355
小标题 / 副标题: 3f7b3decd2dcafb07b84d2d3985d9f40 39318b6f72ed39310530dfd69d0078e1 4e9ee319e0fa4abc21ff286eeb145ecc
章节的段落: e388a4556c0f65e1904146cc1a846bee
HEAD
文档类型
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。
<!DOCTYPE html> 语言属性 <!-- 中文 --> <html lang="zh-Hans"> <!-- 简体中文 --> <html lang="zh-cmn-Hans"> <!-- 繁体中文 --> <html lang="zh-cmn-Hant"> <!-- English --> <html lang="en">
字符编码
以无 BOM 的 utf-8 编码作为文件格式；
指定字符编码的 meta 必须是 head 的第一个直接子元素
<html>
<head>
<meta charset="utf-8">
......
</head>
<body>
......
</body>
</html>
IE 兼容模式
优先使用最新版本的 IE 和 Chrome 内核。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
SEO 优化
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Style Guide
viewport
viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
width: 浏览器宽度，输出设备中的页面可见区域宽度；
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
initial-scale: 初始缩放比例；
maximum-scale: 最大缩放比例；
为移动端设备优化，设置可见区域的宽度和初始缩放比例。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
iOS 图标
apple-touch-icon 图片自动处理成圆角和高光等效果；
apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图；
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> <!-- iPad，72x72 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72"> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114"> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">
favicon
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico。为了保证 favicon 可访问，避免 404，必须遵循以下两种方法之一：
在 Web Server 根目录放置 favicon.ico 文件；
使用 link 指定 favicon；
<link rel="shortcut icon" href="path/to/favicon.ico">
HEAD 模板
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Style Guide
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="path/to/favicon.ico">
HTML 注释
模块注释
<!-- 文章列表列表模块 --> <p class="article-list"> ... </p> 区块注释 <!-- @name: Drop Down Menu @description: Style of top bar drop down menu. @author: Ashu(Aaaaaashu@gmail.com) -->
更多HTML代码书写规范指南相关文章请关注PHP中文网！