HTML5页面编码规范.docx

2.3标签

[强制]标签名必须使用小写字母。

示例：

--good-->

HelloStyleGuide!

--bad-->

HelloStyleGuide!

[强制]对于无需自闭合的标签，不允许自闭合。

解释：

常见无需自闭合标签有input、br、img、hr等。

示例：

--good-->

--bad-->

[强制]对HTML5中规定允许省略的闭合标签，不允许省略闭合标签。

解释：

对代码体积要求非常严苛的场景，可以例外。

比如：

第三方页面使用的投放系统。

示例：

--good-->

• first
• second

--bad-->

• first

• second

[强制]标签使用必须符合标签嵌套规则。

解释：

比如div不得置于p中，tbody必须置于table中。

详细的标签嵌套规则参见HTMLDTD中的Elements定义部分。

[建议]HTML标签的使用应该遵循标签的语义。

解释：

下面是常见标签语义

∙p-段落

∙h1,h2,h3,h4,h5,h6-层级标题

∙strong,em-强调

∙ins-插入

∙del-删除

∙abbr-缩写

∙code-代码标识

∙cite-引述来源作品的标题

∙q-引用

∙blockquote-一段或长篇引用

∙ul-无序列表

∙ol-有序列表

∙dl,dt,dd-定义列表

示例：

--good-->

EsprimaservesasanimportantbuildingblockforsomeJavaScriptlanguagetools.

--bad-->

[建议]在CSS可以实现相同需求的情况下不得使用表格进行布局。

解释：

在兼容性允许的情况下应尽量保持语义正确性。

对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。

[建议]标签的使用应尽量简洁，减少不必要的标签。

示例：

--good-->

--bad-->

2.4属性

[强制]属性名必须使用小写字母。

示例：

--good-->

...

--bad-->

...

[强制]属性值必须用双引号包围。

解释：

不允许使用单引号，不允许不使用引号。

示例：

--good-->

--bad-->

[建议]布尔类型的属性，建议不添加属性值。

示例：

[建议]自定义属性建议以xxx-为前缀，推荐使用data-。

解释：

使用前缀有助于区分自定义属性和标准定义的属性。

示例：

3通用

3.1DOCTYPE

[强制]使用HTML5的doctype来启用标准模式，建议使用大写的DOCTYPE。

示例：

DOCTYPEhtml>

[建议]启用IEEdge模式。

示例：

[建议]在html标签上设置正确的lang属性。

解释：

有助于提高页面的可访问性，如：

让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。

由于历史原因，有时候不得不继续使用zh-CN。

比如中文维基百科，沿用了传统的zh-CN/zh-HK/zh-SG/zh-TW（按照标准应该使用zh-cmn-Hans-CN、zh-cmn-Hant-HK、zh-cmn-Hans-SG、zh-cmn-Hant-TW）。

这时候，合理的软件行为，是将zh-CN等转化为zh-cmn-Hans（即转化为最常见的误用所对应的实际标准写法）。

SelectorsLevel4已经加入了对BCP47高级匹配算法的支持，即支持:

lang（*-Hans）的写法。

语言的标签表示法的国际标准是RFC4646

示例：

简体中文

繁体中文

3.2编码

[强制]页面必须使用精简形式，明确指定字符编码。

指定字符编码的meta必须是head的第一个直接子元素。

解释：

见HTML5Charset能用吗一文。

示例：

......

......

[建议]HTML文件使用无BOM的UTF-8编码。

解释：

UTF-8编码具有更广泛的适应性。

BOM在使用程序或工具处理文件时可能造成不必要的干扰。

3.3CSS和JavaScript引入

[强制]引入CSS时必须指明rel="stylesheet"。

示例：

[建议]引入CSS和JavaScript时无须指明type属性。

解释：

text/css和text/javascript是type的默认值。

[建议]展现定义放置于外部CSS中，行为定义放置于外部JavaScript中。

解释：

结构-样式-行为的代码分离，对于提高代码的可阅读性和维护性都有好处。

[建议]在head中引入页面需要的所有CSS资源。

解释：

在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。

[建议]JavaScript应当放在页面末尾，或采用异步加载。

解释：

将script放在页面中间将阻断页面的渲染。

出于性能方面的考虑，如非必要，请遵守此条建议。

示例：

--alotofelements-->

[建议]移动环境或只针对现代浏览器设计的Web应用，如果引用外部资源的URL协议部分与页面相同，建议省略协议前缀。

解释：

使用protocol-relativeURL引入CSS，在IE7/8下，会发两次请求。

是否使用protocol-relativeURL应充分考虑页面针对的环境。

示例：

4head

4.1title

[强制]页面必须包含title标签声明标题。

[强制]title必须作为head的直接子元素，并紧随charset声明之后。

解释：

title中如果包含ascii之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。

示例：

4.2favicon

[强制]保证favicon可访问。

解释：

在未指定favicon时，大多数浏览器会请求WebServer根目录下的favicon.ico。

为了保证favicon可访问，避免404，必须遵循以下两种方法之一：

1.在WebServer根目录放置favicon.ico文件。

2.使用link指定favicon。

示例：

4.3viewport

[建议]若页面欲对移动设备友好，需指定页面的viewport。

解释：

viewportmetatag可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。

比如，在页面宽度小于980px时，若需iOS设备友好，应当设置viewport的width值来适应你的页面宽度。

同时因为不同移动设备分辨率不同，在设置时，应当使用device-width和device-height变量。

另外，为了使viewport正常工作，在页面容样式布局设计上也要做相应调整，如避免绝对定位等。

关于viewport的更多介绍，可以参见SafariWebContentGuide的介绍

5图片

[强制]禁止img的src取值为空。

延迟加载的图片也要增加默认的src。

解释：

src取值为空，会导致部分浏览器重新加载一次当前页面，参考：

https:

//developer../performance/rules.html#emptysrc

[建议]避免为img添加不必要的title属性。

解释：

多余的title影响看图体验，并且增加了页面尺寸。

[建议]为重要图片添加alt属性。

解释：

可以提高图片加载失败时的用户体验。

[建议]添加width和height属性，以避免页面抖动。

[建议]有下载需求的图片采用img标签实现，无下载需求的图片采用CSS背景图实现。

解释：

1.产品logo、用户头像、用户产生的图片等有潜在下载需求的图片，以img形式实现，能方便用户下载。

2.无下载需求的图片，比如：

icon、背景、代码使用的图片等，尽可能采用css背景图实现。

6表单

6.1控件标题

[强制]有文本标题的控件必须使用label标签将其与其标题相关联。

解释：

有两种方式：

1.将控件置于label。

2.label的for属性指向控件的id。

推荐使用第一种，减少不必要的id。

如果DOM结构不允许直接嵌套，则应使用第二种。

示例：

我已确认上述条款

用户名：

6.2按钮

[强制]使用button元素时必须指明type属性值。

解释：

button元素的默认type为submit，如果被置于form元素中，点击后将导致表单提交。

为显示区分其作用方便理解，必须给出type属性。

示例：

提交

取消

[建议]尽量不要使用按钮类元素的name属性。

解释：

由于浏览器兼容性问题，使用按钮的name属性会带来许多难以发现的问题。

具体情况可参考此文。

6.3可访问性（A11Y）

[建议]负责主要功能的按钮在DOM中的顺序应靠前。

解释：

负责主要功能的按钮应相对靠前，以提高可访问性。

如果在CSS中指定了float:

right则可能导致视觉上主按钮在前，而DOM中主按钮靠后的情况。

示例：

--good-->

提交

取消