尽量确保文档和模板只包含 HTML
结构,样式都放到样式表里,行为都放到脚本里。
统一两个空格缩进(总之缩进统一即可),不要使用 Tab
或者 Tab
、空格混搭。
使用不带 BOM
的 UTF-8 编码。
<meta charset="utf-8">
;@charset
指定样式表的编码,它默认为UTF-8
(参考 @charset);<!-- Recommended -->
<img src="google.png" alt="Google">
<!-- Not recommended -->
<A HREF="/">Home</A>
/* Recommended */
color: #e5e5e5;
/* Not recommended */
color: #E5E5E5;
省略外链资源(图片及其它媒体资源)URL 中的 http
/ https
协议,使 URL 成为相对地址
<!-- Recommended -->
<script src="//www.w3cschool.cn/statics/js/autotrack.js"></script>
<!-- Not recommended -->
<script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>
/* Recommended */
.example {
background: url(//www.google.com/images/example);
}
/* Not recommended */
.example {
background: url(http://www.google.com/images/example);
}
通过配置编辑器,可以提供快捷键来输出一致认可的注释模式。
/****************************HTML************************/
img
input
br
hr
等 );</li>
或 </body>
);-
分隔;<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
严格嵌套约束
<a>
里不可以嵌套交互式元素<a>
、<button>
、<select>
等;<p>
里不可以嵌套块级元素<div>
、<h1>~<h6>
、<p>
、<ul>/<ol>/<li>
、<dl>/<dt>/<dd>
、<form>
等。没有 CSS
的 HTML
是一个语义系统而不是 UI 系统。
通常情况下,每个标签都是有语义的,所谓语义就是你的衣服分为外套, 裤子,裙子,内裤等,各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧。
此外语义化的 HTML
结构,有助于机器(搜索引擎)理解,另一方面多人协作时,能迅速了解开发者意图
为每个 HTML 页面的第一行添加标准模式(standard mode)的声明, 这样能够确保在每个浏览器中拥有一致的表现。
<!DOCTYPE html>
<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
: 一般指的是浏览器窗口内容区的大小,不包含工具条、选项卡等内容;width
: 浏览器宽度,输出设备中的页面可见区域宽度;device-width
: 设备分辨率宽度,输出设备的屏幕可见宽度;initial-scale
: 初始缩放比例;maximum-scale
: 最大缩放比例;<meta name="viewport" content="width=device-width, initial-scale=1.0">
此手册是在开发中积累下来的经验和参考其它规范/指南制定的,它只是起指导作用,除个别条目强制之外,大多数为非强制约束,开发者可根据自己的实际情况自行决定是否要遵守 该指南只是保证大方向一致性和最佳实践的阶段性总结,不是最后结论