通用规范
标签
自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body> )；
尽量减少标签数量；不允许出现复杂嵌套多层的HTML结构；
<!-- 不推荐 -->
<br />
<br/>
<span class="avatar"><img src=""></span>
<!-- 推荐 -->
<br>
<img class="avatar" src="">
Class 与 ID
id 以Camel（驼峰） 命名法命名；
class 应以功能或内容命名，命名形式以单词字母小写，多个单词组成时，采用中划线"-"分隔；
属性顺序
属性应该按照特定的顺序出现以保证易读性，暂定以下顺序：
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
布尔值属性
HTML5 规范中 disabled、checked、selected 等属性不用设置值。
关注点分离
将表现和行为分开，严格保持结构 （标记），表现 （样式），和行为 （脚本）分离, 并尽量让这三者之间的交互保持最低限度。
<!-- 不推荐 -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML TEST</h1>
<!-- 推荐 -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
语义化
没有 CSS 的 HTML 是一个语义系统而不是 UI 系统。
语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图。
通常情况下，每个标签都是有语义的，所谓语义就是你的衣服分为外套， 裤子，裙子，内裤等，各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧。
常见语义化标签：
| 标签 | 语义 |
|---|---|
| <p> | 段落 |
| <h1> <h2> <h3> ... | 标题 |
| <ul> | 无序列表 |
| <ol> | 有序列表 |
| <blockquote> | 大段引用 |
| <cite> | 一般引用 |
| <b> | 为样式加粗而加粗 |
| <storng> | 为强调内容而加粗 |
| <i> | 为样式倾斜而倾斜 |
| <em> | 为强调内容而倾斜 |
| code | 代码标识 |
| abbr | 缩写 |
示例：
将你构建的页面当作一本书，将标签的语义对应的其功能和含义；
书的名称：<h1>
书的每个章节标题: <h2>
章节内的文章标题: <h3>
小标题/副标题: <h4> <h5> <h6>
章节的段落: <p>
脚本加载
考虑到所兼容问题，推荐所有脚本都放到body元素中页面内容的后面。
<!--推荐-->
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
....
<script src="main.js"></script>
</body>
</html>
HEAD
文档类型
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。
<!DOCTYPE html>
字符编码
以无 BOM 的 utf-8 编码作为文件格式;
指定字符编码的 meta 必须是 head 的第一个直接子元素；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
......
</head>
<body>
......
</body>
</html>
移动端
<head>
<meta charset="utf-8">
<!--
viewport
viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
width: 浏览器宽度，输出设备中的页面可见区域宽度；
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
initial-scale: 初始缩放比例；
maximum-scale: 最大缩放比例；
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
SEO 优化
<head>
<meta charset="utf-8">
<!-- SEO keywords 关键字 description 描述 author 关于-->
<title>Style Guide</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
</head>
网友评论