标签
尽量遵循HTML标准和语义，但不要以失去实用性为代价
- 自闭合标签，无需闭合（
img, input, br, hr）； - 可选闭合标签，需要闭合（
</li>, </body>）； - 尽量减少标签的数量；
class与id的使用
- class应以功能或者内容命名，不以表现形式命名；
- class与id单词
字母小写，多个单词组合时，采用中划线-分割； - 使用唯一的id作为JavaScript hook；
- 避免创建无样式信息的class；
<!-- 错误示范 -->
<div class="j-hook left contentWraaper"></div>
<!-- 正确示范 -->
<div id="j-hook" class="content-wrapper"></div>
属性的顺序
属性应当按照一定的顺序出现，来保证易读性。顺序如下：
- id
- class
- name
- data-xxx
- src, for, type, ref
- title, alt
- aria-xxx, role
- 单双引号
属性的定义，统一使用双引号。示范如下
<!-- 正确示范 -->
<div id="detail" class="red content-wrapper"></div>
- 嵌套规则
语义嵌套：浏览器会做容错处理，生成的文档树可能互相不太一样；
严格嵌套约束：在所有的浏览器都都不被允许；
-
语义嵌套约束
<li>用于<ul>或者<ol>下<dt><dd>用于<dl>下<thead><tbody><tbody><tr><td>放在<table>下
-
严格嵌套约束
- 行内元素下只能包含文本和行内元素
-
<a>标签里不可以嵌套交互元素，如<a>,<button>,<select>等
-
布尔值属性
在HTML中，disabled, selected, checked等属性不用设置值
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
- 语义化
- 通常情况下，每个标签都是有语义的，所谓语义就是有各自的功能和含义；
- 语义化的HTML结构，有助于机器（搜索引擎）理解；
- 多人协作时，能够快速理解别的开发者的用途；
-
脚本引用写在 body 结束标签之前；
-
尽量保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，JS脚本之中。
-
尽量不使用行内样式；
-
在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格要另起一行。
-
任何时候都要尽量使用最少的标签并保持最小的复杂度，尽量避免多余的父元素。
-
尽量避免通过 JavaScript 生成的标签，它让内容变得不易查找、编辑，并且降低性能。
-
重要图片一定要加上alt属性; 给重要的元素和截断的元素加上title;
-
标签和含义
标签 含义 <p>段落 <h1>--<h6>标题 <ul>无序列表 <ol>有序列表 <blockquote>大段引用 <cite>一般小引用 <b>为样式加粗 <strong>为了强调而加粗 <i>为样式倾斜 <em>为强调内容而倾斜 <code>代码标识 <abbr>缩写 -
文档类型
HTML的第一行要加一个标准模式的声明，这样确保了浏览器有一致的表现形式
<!DOCTYPE html>
- 语言
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 简体中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">
- 字符编码
- 应以无BOM的utf-8编码作为文件格式
-
<meta charset="utf-8">必须作为<head>的第一个直接子元素
- IE模式兼容
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- SEO优化
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- SEO -->
<title>Style Guide</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
</head>
- viewport
- viewport：指浏览器窗口内容区的大小，不包括工具条，选项卡等；
- width：浏览器宽度，输出设备中可见区域宽度；
- device-width：设备分辨率宽度，输出设备的屏幕可见宽度；
- initial-scale：初始缩放比例；
- maximum-scale：最大缩放比例；
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- favicon
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico。为了保证 favicon 可访问，避免 404，必须遵循以下两种方法之一：
- 在 Web Server 根目录放置 favicon.ico 文件；
- 使用 link 指定 favicon；
<link rel="shortcut icon" href="path/to/favicon.ico">
- 综上，head部分应当这样写：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Style Guide</title>
<meta name="description" content="不超过150个字符">
<meta name="keywords" content="">
<meta name="author" content="name, email@gmail.com">
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS 图标 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<link rel="shortcut icon" href="path/to/favicon.ico">
</head>
!!! 以上规则仅供参考
网友评论