一、HTML规范 - 整体结构
1、HTML基础设施
- 文件应以“<!DOCTYPE ……>”首行顶格开始,推荐使用“<!DOCTYPE html>”。
- 必须申明文档的编码charset,且与文件本身编码保持一致,推荐使用UTF-8编码。
- 根据页面内容和需求填写适当的keywords和description。
- 页面title是极为重要的不可缺少的一项。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>首页</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache"/>
<meta name="renderer" content="webkit">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</body>
</html>
2、结构顺序和视觉顺序基本保持一致
- 按照从上至下、从左到右的视觉顺序书写HTML结构。
- 有时候为了便于搜索引擎抓取,我们也会将重要内容在HTML结构顺序上提前。
- 用div代替table布局,可以使HTML更具灵活性,也方便利用CSS控制。
- table不建议用于布局,但表现具有明显表格形式的数据,table还是首选。
3、结构、表现、行为三者分离,避免内联
要求结构(HTML)、表现(CSS)、行为(JavaScript)分离,将结构与表现、行为分离,保证它们之间的最小耦合,这对前期开发和后期维护都至关重要。
- 使用link将css文件引入,并置于head中。
- 使用script将js文件引入,并置于body底部。
4、保持良好的简洁的树形结构
- 每一个块级元素都另起一行,每一行都使用Tab缩进对齐(head和body的子元素不需要缩进)。删除冗余的行尾的空格。
- 使用4个空格代替1个Tab(hbuild创建项目默认即此配置)。
- 对于内容较为简单的表格,建议将tr写成单行。
- 也可以在大的模块之间用空行隔开,使模块更清晰。
<body>
<!-- 侧栏内容区 -->
<div class="m-side">
<div class="side">
<div class="sidein">
<!-- 热门标签 -->
<div class="sideblk">
<div class="m-hd3"><h3 class="tit">热门标签</h3> </div>
...
</div>
<!-- 最热TOP5 -->
<div class="sideblk">
<div class="m-hd3"><h3 class="tit">最热TOP5</h3> <a href="#" class="s-fc02 f-fr">更多»</a></div>
...
</div>
</div>
</div>
</div>
<!-- /侧栏内容区 -->
</body>
5、另外,请做到以下几点
(1)结构上如果可以并列书写,就不要嵌套。
如果可以写成
那么就不要写成<div>
</div><div>
</div>
(2)如果结构已经可以满足视觉和语义的要求,那么就不要有额外的冗余的结构。
比如
(3)一个标签上引用的className不要过多,越少越好。
比如不要出现这种情况:
(4)对于一个语义化的内部标签,应尽量避免使用className。
比如在这样一个列表中,li标签中的itm应去除:
二、HTML规范 - 代码格式
1、说明文案的注释方法
采用类似标签闭合的写法,与HTML统一格式;注释文案两头空格,与CSS注释统一格式。
(1)开始注释:(文案两头空格)。
(2)结束注释:(文案前加“/”符号,类似标签的闭合)。
(3)允许只有开始注释!
<!-- 头部 -->
<div class="g-hd">
<!-- LOGO -->
<h1 class="m-logo"><a href="#">LOGO</a></h1>
<!-- /LOGO -->
<!-- 导航 -->
<ul class="m-nav">
<li><a href="#">NAV1</a></li>
<li><a href="#">NAV2</a></li>
<!-- 更多导航项 -->
</ul>
<!-- /导航 -->
</div>
<!-- /头部 -->
2、代码本身的注释方法
单行代码的注释也保持同行,两端空格;多行代码的注释起始和结尾都另起一行并左缩进对齐。
<!-- <h1 class="m-logo"><a href="#">LOGO</a></h1> -->
<!--
<ul class="m-nav">
<li><a href="#">NAV1</a></li>
<li><a href="#">NAV2</a></li>
</ul>
-->
3、HTML注释在IE6中的BUG
(1)如果两个浮动元素之间存在注释,那么可能导致布局错位或文字的BUG。
(2)所以,这种情况下,我们通常将注释去掉,或者索性采用模板语言(ftl、vm)的注释。
4、严格的嵌套
(1)尽可能以最严格的xhtml strict标准来嵌套,比如内联元素不能包含块级元素等等。
(2)正确闭合标签且必须闭合。
5、严格的属性
(1)属性和值全部小写,每个属性都必须有一个值,每个值必须加双引号。
(2)没有值的属性必须使用自己的名称做为值(checked、disabled、readonly、selected等等)。
(3)可以省略style标签和script标签的type属性。
6、常用的标签
|
各种表单控件 | |
type,name,value,checked,disabled,maxlength,readonly,accesskey | | | 标签为input元素定义标注 | | for | |
| 列表项 | 只能以ul或ol为父容器 | | | | 引用样式或icon | 不可嵌套任何元素 | type,rel,href | | | 文档信息 | 只用于head | content,http-equiv,name | || 内联容器 | | | |
| 强调文本 | | | | | 引用样式 | 不可嵌套任何元素 | type,media | |
| 下标 | | | |
| 上标 | | | |
|
表格主体 |
只用于table | |
| | 表格中的单元格 | 只用于tr | colspan,rowspan |
| | 多行文本输入控件 | | name,accesskey,disabled,readonly,rows,cols |
| | 表格表尾 | 只用于table | |
| | 表格中的标题单元格 | 只用于tr | colspan,rowspan |
|
| 表格表头 | 只用于table | |
|
三、HTML规范 - 内容语义
1、内容类型决定使用的语义标签
在网页中某种类型的内容必定需要某种特定的HTML标签来承载,也就是我们常常提到的根据你的内容语义化HTML结构。
2、加强“资源型”内容的可访问性和可用性
在资源型的内容上加入描述文案,比如给img添加alt属性,在audio内加入文案和链接等等。
3、加强“不可见”内容的可访问性
背景图上的文字应该同时写在html中,并使用css使其不可见,有利于搜索引擎抓取你的内容,也可以在css失效的情况下看到内容。
4、适当使用实体
以实体代替与HTML语法相同的字符,避免浏览解析错误。
常用HTML字符实体(建议使用实体): | |||
---|---|---|---|
字符 | 名称 | 实体名 | 实体数 |
“ | 双引号 | " | " |
& | &符 | & | & |
< | 左尖括号(小于号) | < | < |
> | 右尖括号(大于号) | > | > |
空格 | |||
中文全角空格 |
常用特殊字符实体(不建议使用实体): | |||
---|---|---|---|
字符 | 名称 | 实体名 | 实体数 |
¥ | 元 | ¥ | ¥ |
¦ | 断竖线 | ¦ | ¦ |
© | 版权 | © | © |
® | 注册商标R | ® | ® |
™ | 商标TM | ™ | ™ |
· | 间隔符 | · | · |
« | 左双尖括号 | « | « |
» | 右双尖括号 | » | » |
° | 度 | ° | ° |
× | 乘 | × | × |
÷ | 除 | ÷ | ÷ |
‰ | 千分比 | ‰ | ‰ |
5、避免盒模型错误
惑:因为doctype的不确定性,我们在写style的时候,应该考虑无论doctype是什么情况,都可以正常显示,doctype影响最大的就是盒模型的解析。
解:所以我们要将盒模型拆分开来写,比如我们将原本要定义在某个div上的height和padding分别写到这个div和他的父元素或子元素上。
<div style="height:100px;padding:20px 0;">内容</div>
<!-- 上面的写法应该改成以下写法 -->
<div style="padding:20px 0;"><div style="height:100px;">内容</div></div>