HTML编码风格
文档描述
强制 首行固定使用
<!DOCTYPE html>文档声明标识为html5。强制 保证
favicon可访问。在未指定
favicon时，大多数浏览器会请求Web Server根目录下的favicon.ico。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：- 在
Web Server根目录放置favicon.ico文件。 - 使用
link指定favicon。
示例：
<link rel="shortcut icon" href="path/to/favicon.ico">- 在
强制 页面必须包含
title标签强制 在
head标签直接子元素固定使用<meta charset="UTF-8" />指定编码html<html> <head> <meta charset="UTF-8" /> <title>首页</title> ...... </head> <body> ...... </body> </html>强制 引入
CSS时必须指明rel="stylesheet"html<link rel="stylesheet" href="page.css" />强制 在
head中引入页面需要的所有CSS资源优先引入
CSS可以让浏览器等待样式加载完毕再渲染页面，而在dom树之后引入CSS会导致浏览器先渲染dom树，使页面“裸奔”，加载CSS后会重新渲染，消耗性能建议 引入
CSS和JavaScript时无须指明type属性。text/css和text/javascript是type的默认值。建议
JavaScript会阻塞页面渲染，应当放在页面末尾，或采用异步加载。建议 启用
IE Edge模式让浏览器使用ie最新版本html<meta http-equiv="X-UA-Compatible" content="IE=Edge" />建议 在
html标签上设置正确的lang属性有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。
html<html lang="zh-CN"></html>
标签和属性
强制 所有标签和属性使用小写
html<!-- good --> <table cellspacing="0"> ... </table> <!-- bad --> <TABLE cellSpacing="0"> ... </TABLE>强制 标签属性必须使用双引号包裹
html<!-- good --> <script src="esl.js"></script> <!-- bad --> <script src=esl.js></script> <script src='esl.js'></script>强制 元素 id 必须保证页面唯一
强制 正确嵌套组合元素，如
ul中应只放置li，不要放置h2这种标签。建议
inline元素不可包含block元素建议
class代表相应模块或部件的内容或功能，不以样式信息进行命名html<!-- good --> <div class="sidebar"></div> <!-- bad --> <div class="left"></div>建议 为不好辨别的标签结构或模块结构增加注释
建议 使用语义化标签，常用标签：
section- 分割模块nav- 导航header- 头部footer- 尾部p- 段落h1,h2,h3,h4,h5,h6- 层级标题strong,em- 强调ins- 插入del- 删除abbr- 缩写code- 代码标识cite- 引述来源作品的标题q- 引用blockquote- 一段或长篇引用ul- 无序列表ol- 有序列表dl,dt,dd- 定义列表
建议 为含有多个子元素或具有深层结构的标签进行换行和相对父级缩进，过长的代码不容易阅读与维护，每行不得超过
120个字符。建议 使用样式或者一个标签可以实现的布局不要嵌套太多标签，尽量简洁
<!-- good -->
<img class="avatar" src="image.png" />
<!-- bad -->
<span class="avatar">
<img src="image.png" />
</span>建议 布尔类型的属性，可以不添加属性值
html<input type="text" disabled /> <input type="checkbox" value="1" checked />建议 自定义属性使用
data-为前缀html<ol data-ui-type="Select"></ol>
图片
强制 禁止
img的src取值为空。延迟加载的图片也要增加默认的src。 浏览器在渲染过程中会把src属性中的空内容进行加载，直至加载失败，影响DOMContentLoaded与Loaded事件之间的资源准备过程，拉长了首屏渲染所用的时间建议 有下载需求的图片采用
img标签实现，无下载需求的图片采用CSS背景图实现。- 产品
logo、用户头像、用户产生的图片等有潜在下载需求的图片，以img形式实现，能方便用户下载。 - 无下载需求的图片，比如：
icon、背景、代码使用的图片等，尽可能采用CSS背景图实现。
- 产品
建议 为具有含义的
img标签添加alt属性
表单
建议 有文本标题的控件必须使用
label标签将其与其标题相关联。有两种方式：
- 将控件置于
label内。 label的for属性指向控件的id。
推荐使用第一种，减少不必要的
id。如果DOM结构不允许直接嵌套，则应使用第二种。html<label> <input type="checkbox" name="confirm" value="on" /> 我已确认上述条款 </label> <label for="username">用户名：</label> <input type="textbox" name="username" id="username" />- 将控件置于
强制 使用
button元素时必须指明type属性值button元素的默认type为submit，如果被置于form元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出type属性。html<button type="submit">提交</button> <button type="button">取消</button>建议 在针对移动设备开发的页面时，根据内容类型指定输入框的
type属性。html<input type="date" />
多媒体
建议 当在现代浏览器中使用
audio以及video标签来播放音频、视频时，应当注意格式。音频应尽可能覆盖到如下格式：
MP3WAVOgg
视频应尽可能覆盖到如下格式：
MP4WebMOgg
建议 在支持
HTML5的浏览器中优先使用audio和video标签来定义音视频元素。建议 使用退化到插件的方式来对多浏览器进行支持。
html<audio controls> <source src="audio.mp3" type="audio/mpeg" /> <source src="audio.ogg" type="audio/ogg" /> <object width="100" height="50" data="audio.mp3"> <embed width="100" height="50" src="audio.swf" /> </object> </audio> <video width="100" height="50" controls> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <object width="100" height="50" data="video.mp4"> <embed width="100" height="50" src="video.swf" /> </object> </video>建议 只在必要的时候开启音视频的自动播放
建议 在
object标签内部提供指示浏览器不支持该标签的说明。html<object width="100" height="50" data="something.swf"> DO NOT SUPPORT THIS TAG </object>