整体结构
【页面头部】
1. `<!DOCTYPE html>`首行顶格开始。
2. 必须声明文档类型的编码charset，且与文件本身编码保持一致，指定字符编码的meta必须是head的第一个子元素。
推荐使用UTF-8编码。
- 网页显示字符集
<!--html5格式-->
`<meta charset="UTF-8">`
<!--简体中文-->
`<meta http-equiv="content-type" content="text/css;charset=gb2312">`
<!--繁体中文-->
`<meta http-equiv="content-type" content="text/css;charset=gbk">`
<!--英文-->
`<meta http-equiv="content-type" content="text/css;charset=utf-8">`
- 可选标签
```
公司的版权注释
<!--the site is designed by Bob at 2016.9.24-->
网页制作者信息
` <meta name="author" content="123456@qq.com">`
网站简介
`<meta name="description" content="xx学院创立于xxx年，学院开设了xxx课程,老师拥有x年的教学经历">`
设定网页的到期时间，一旦网页过期，必须到服务器上重新调阅
`<meta http-equiv="expires" content="Wed,26 Feb 2017 08:24:00 GMT">`
禁止浏览器从本地机缓存中调阅内容
`<meta http-equiv="pragma" content="no-cache">`
用来防止别人在框架中调用你的页面
`<meta http-equiv="Window-target" content="_top">`
自动跳转
`<meta http-equiv="refresh" content="5;url=http://www.baidu.com">`
网页搜索机器人向导，用来告诉机器人哪些页面需要搜索，哪些页 面不需要搜索
`<meta name="robots" content="none">`
收藏夹图标
`<link rel="Shortcut Icon" href="favicon.icon">`
```
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">`用于显示网页导航栏上的logo
2. 引入 CSS 和 JavaScript 时无须指明 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结构。
3. 结构(html)，表现(css)，行为(Js)三者分离,避免内联。
4. 每一个块级元素都要另起一行，每行都使用Tab缩进对齐（head和body作为子元素可以不缩进）。
5. 对于内容较为简单的表格，建议将tr写成单行。
6. 可以在大的模块之间用空行隔开，使模块更清晰。
• 语义化
浏览器会根据标签的语义给一个默认的样式，判断网页标签语义化是否良好的一个简单方法：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性
1. 尽可能少的使用无语义标签，例如span和div。
2. 在语义不明显，既可以使用p也可以使用div的地方，尽量使用p。
3. 在既可以使用div又可以使用section的地方，尽量使用section。
4. 不要使用纯样式标签，例如：b，u等……，而改用css设置。
代码格式
【命名】
1. class必须单词全字母小写，单词之间以 - 分割。
2. class必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
3. 同一页面，应该避免使用相同的name与id。因为IE7浏览器会混淆元素的id和name属性。
【标签】
1. 标签名必须使用小写字母。
2. 对于无需自闭合的标签，不需要自闭合。
3. 对HTML5中规定允许省略的闭合标签，不允许省略闭合标签。
4. html标签的使用应遵循标签语义，且要符合标签嵌套规则。
【注释】
采用类似标签闭合的写法，与html统一格式。注释文案两头空格，与css注释统一格式。
- 开始注释：`<!-- 注释文案 -->`(文案两头空格)
- 结束注释：`<!-- /注释文案 -->`(文案前加"/"符号，类似标签的闭合)
- 注意：允许只有开始注释。
【属性】
1. 属性和值全部小写。
2. 属性中必须用双引号包裹。
3. 布尔类型的属性，建议不添加属性值。
4. 自定义属性建议以xxx-为前缀，推荐使用data-。
5. 可以省略style标签和script标签的type属性。
【图片】
1. 进制img的src属性取值为空，否则会导致部分浏览器重新加载一次当前页面。
2. 为图片添加alt属性，提高图片加载失败时的用户体验。
3. 避免为img添加不必要的title属性，多余的title影响看图效果，并增加了页面尺寸。
4. 为图片添加width和height属性，避免页面抖动。
5. 有下载需求的图片采用img标签实现，无需下载的图片采用css背景图实现。
- 产品logo，用户头像，用户产生图片等潜在需求的图片，以img形式实现，能方便用户下载。
- 无需下载需求的图片，例如：icon，背景，代码使用的图片等，尽量使用css背景图实现。
【表单】
1. 有文本标题的空间使用label标签将其与其标题相关联。最好将控件置于label内，以减少不必要的id。
2. 使用button元素时，必须指明type属性值。因为button元素的默认type为submit，如果被置于form元素中，点击后将导致表单提交。
