前面的话
HTML是描述网页结构的超文本标记语言,HTML规范能够使HTML代码风格保持一致,使得HTML更容易理解和维护。本文将详细介绍HTML规范
整体结构
【页面头部】
1、文件应以“<!DOCTYPE ......>”首行顶格开始,推荐使用“<!DOCTYPE html>”
2、必须声明文档的编码charset,且与文件本身编码保持一致,指定字符编码的 meta
必须是 head
的第一个直接子元素。推荐使用UTF-8编码<meta charset="utf-8">
3、根据页面内容和需求填写适当的keywords和description
<meta name="description" content="不超过150个字符">
<meta name="keywords" content="">
4、页面title是不可缺少的一项,title
必须作为 head
的直接子元素,并紧随 charset
声明之后
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
【资源引入】
1、保证 favicon
可访问
<link rel="shortcut icon" href="path/to/favicon.ico">
2、引入 CSS
和 java script
时无须指明 type
属性
3、引入 CSS
时必须指明 rel="stylesheet"
<link rel="stylesheet" href="page.css">
4、使用link将css文件引入,并置于head中;使用script将js文件引入,并置于body底部
5、移动环境或只针对现代浏览器设计的 Web 应用,如果引用外部资源的 URL
协议部分与页面相同,建议省略协议前缀。这是因为使用 protocol-relative URL
引入 CSS,在 IE7/8
下,会发两次请求。是否使用 protocol-relative URL
应充分考虑页面针对的环境
<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>
【结构优化】
1、尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度
2、结构顺序和视觉顺序基本保持一致,按照从上至下、从左到右的视觉顺序书写HTML结构。有时为了便于搜索引擎抓取,也会将重要内容在HTML结构顺序上提前
3、结构、表现、行为三者分离,避免内联
4、每一个块级元素都另起一行,每一行都使用Tab缩进对齐(head和body的子元素不需要缩进)。删除冗余的行尾空格
5、对于内容较为简单的表格,建议将tr写成单行
6、可以在大的模块之间用空行隔开,使模块更清晰
代码格式
【缩进】
使用4个空格代替1个Tab(大多数编辑器中可设置)
<ul>
<li>first</li>
<li>second</li>
</ul>
【命名】
1、class 必须单词全字母小写,单词间以 - 分隔
2、class 必须代表相应模块或部件的内容或功能,不得以样式信息进行命名
<!-- good -->
<div class="sidebar"></div>
<!-- bad -->
<div class="left"></div>
3、同一页面,应避免使用相同的 name
与 id。
因为IE7-浏览器会混淆元素的 id 和 name 属性, document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心
【标签】
1、标签名必须使用小写字母
2、对于无需自闭合的标签,不需要自闭合
3、对 HTML5
中规定允许省略的闭合标签,不允许省略闭合标签
4、HTML
标签的使用应该遵循标签的语义,且要符合标签嵌套规则
<!-- good -->
<p>Hello StyleGuide!</p>
<!-- bad -->
<P>Hello StyleGuide!</P>
<!-- good -->
<input type="text" name="title">
<!-- bad -->
<input type="text" name="title" />
<!-- good -->
<ul>
<li>first</li>
<li>second</li>
</ul>
<!-- bad -->
<ul>
<li>first
<li>second
</ul>
【注释】
采用类似标签闭合的写法,与HTML统一格式;注释文案两头空格,与CSS注释统一格式
开始注释:<!-- 注释文案 -->(文案两头空格)
结束注释:<!-- /注释文案 -->(文案前加“/”符号,类似标签的闭合)
允许只有开始注释
<!-- 头部 -->
<div class="g-hd">
<!-- LOGO -->
<h1 class="m-logo"><a href="#">LOGO</a></h1>
<!-- /LOGO -->
<!-- 导航 -->
<ul class="m-nav&q