可参考的HTML5规范

  • HTML5规范
  • 1. 代码风格
  • 1.1 缩进与换行

[建议]使用4个空格作为一个缩进层级。

[建议]模板代码的缩进优先保证 HTML 代码的缩进规则。

1.2 命名规则

[强制]class:必须单词全字母小写,单词间以-分隔,且必须代表相应的模块或部件的内容或功能,不得以html内置样式进行命名,命名应该具有明确的语义。

[强制]id:必须保持在页面中的唯一性,命名应该具有明确的语义。

1.3 标签

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

[强制]标签的闭合要符合html5的规定。

[强制]标签的使用必须符合标签的嵌套规则,例:div不得置于p中,tbody必须置于table中。

[建议]标签的使用必须遵循标签的语义,例:

p - 段落

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

strong,em - 强调

ins - 插入

del - 删除

abbr - 缩写

code - 代码标识

cite - 引述来源作品的标题

q - 引用

blockquote - 一段或长篇引用

ul - 无序列表

ol - 有序列表

dl,dt,dd - 定义列表

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

1.4 属性

[强制]属性必须使用小写字母,其属性值必须用双引号包围。

[建议]布尔类型的建议不添加属性值。自定义属性建议以 xxx- 为前缀,推荐使用data-

2. 页面头部

2.1 DOCTYPE

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

2.2 语言编码

[建议]有助于提高页面的可访问性,必须设置正确的lang属性,例:<html lang="zh-CN">

[强制]页面必须指定字符编码的meta,且必须是 head 的第一个直接子元素,例:<metacharset="UTF-8">。

2.3 CSS和JavaScript引入

[强制]引入css时必须指明rel="stylesheet",在引入css和javascript时必须指明type属性。

[建议]Javascript代码必须放在页面末尾或采用异步加载。

2.4 Head内容

[强制]Title标签必须设置为head的直接子元素,并紧随charset声明之后。

[强制]Favicon保证可访问,例:<linkrel="shortcut icon" href="path /favicon.ico">

[强制]Viewport属性必须指定。

3. 图片

[强制]禁止 img 的 src 取值为空,延迟加载的图片也要增加默认的 src属性值。

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

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

4. 表单

4.1 控件标题

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

<label><input type="checkbox"name="confirm" value="on"> 我已确认上述条款</label>或<labelfor="user">用户:</label><inputtype="text" name="user" id="user">

4.2 按钮

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

4.3 可访问性

[建议]当使用 JavaScript 进行表单提交时,应使原生提交功能正常工作。

[建议] 根据内容类型指定输入框的 type 属性,例:<input type="date">

5. 多媒体

[建议]使用 audio 以及 video 标签来播放音频、视频时,应当注意格式:

音频格式:MP3、WAV、Ogg

视频格式:MP4、WebM、Ogg

6. 注释

[强制]针对页面或模块的CSS、javascript代码必须进行详细的注释

时间: 2024-10-20 21:09:27

可参考的HTML5规范的相关文章

HTML5规范中的MessageEvent以及SSE

1.MessageEvent接口 在HTML5规范中定义的新的通信方式,无论是WebSocket还是SSE,包括实现视频.音频通信的WebRTC,都是基于HTML5规范中定义的一个接口:MessageEvent.这是一个基于消息的事件.首先我们可以看一下在JavaScript中,传统的事件类型有哪些. 传统的DOM事件的基类主要包括: (1)UIEvents:一般化的UI事件,其中鼠标事件和键盘事件都继承自UI事件: (2)MouseEvents:一般化的鼠标事件,比如click事件.mouse

HTML 参考手册- (HTML5 标准)

HTML 参考手册- (HTML5 标准) 功能排序 New : HTML5 新标签 标签 描述 基础   <!DOCTYPE>  定义文档类型. <html> 定义一个 HTML 文档 <title> 为文档定义一个标题 <body> 定义文档的主体 <h1> to <h6> 定义 HTML 标题 <p> 定义一个段落 <br> 定义简单的折行. <hr> 定义水平线. <!--...--&

HTML5+规范:barcode(条码扫描)

Barcode模块管理条码扫描,提供常见的条码(二维码及一维码)的扫描识别功能,可调用设备的摄像头对条码图片扫描进行数据输入.通过plus.barcode可获取条码码管理对象. 1.常量 (1).QR: 条码类型常量,QR二维码,数值为0,1994年由日本Denso-Wave公司发明,QR来自英文Quick Response的缩写,即快速反应的意思,源自发明者希望QR码可让其内容快速被解码. 目前使用最广泛的二维码. (2).EAN13: 条码类型常量,EAN一维条形码码标准版,数值为1,国际物

HTML5规范-相关资料链接(大多都是英文文档)

网站做的更规范,尽量选择正确的HTML5结构元素.地址:http://html5doctor.com/happy-1st-birthday-us/#flowchat 了解算法和分块      知道文档刚要看上去是什么样子,不仅可以帮助你确定使用哪个标题层级,而且还可以帮助确定使用哪个结构性元素.比如section应该有一个自身标题.查文档纲要,可以显示出你是否忘记了包含一个标题,他可能提醒你重新考虑这个元素是否最适合于你的内容.此外,准备的反映内容层级的文档纲要,有助于辅助设备的用户在你的站点上

Mozilla对HTML5规范支持列表

翻译自Mozilla Developer Network 在2009年10月28日,HTML 5规范草稿在网络超文本应用技术工作组(WHATWG)中基本出于最后定稿阶段,这意味着HTML 5标准基本定型了.这里列出来一些已经在Mozilla的Gecko中支持的HTML 5特性. HTML5简介 HTML5简介 这篇文章介绍了如何在您的网页设计和应用中使用HTML5. HTML5元素 使用Audio和Video元素(Firefox 3.5) Firefox 3.5中添加了对HTML5中Audio和

HTML5规范

HTML5和Canvas 2D规范的制定已经完成,尽管还不能算是W3C标准,但是这些规范已经功能完整,企业和开发人员有了一个稳定的执行和规划目标. W3C首席执行官Jeff Jaffe表示:“从今天起,企业用户可以清楚地知道,他们能够在未来依赖HTML5.”HTML5是开放Web标准的基石,它是一个完整的编程环境,适 用于跨平台应用程序.视频和动画.图形.风格.排版和其它数字内容发布工具.广泛的网络功能等等. 为了减少浏览器碎片.实现于所有HTML工具的应用,W3C从今天开始着手W3C标准化的互

HTML5+规范:Geolocation(管理设备位置信息)

Geolocation模块管理设备位置信息,用于获取地理位置信息,如经度.纬度等.通过plus.geolocation可获取设备位置管理对象.虽然W3C已经提供标准API获取位置信息,但在某些平台存在差异或未实现,为了保持各平台的统一性,定义此规范接口获取位置信息. 1.方法 1.1.getCurrentPosition: 获取当前设备位置信息 void plus.geolocation.getCurrentPosition( successCB, errorCB, option ); 说明:位

HTML5+规范:Geolocation(管理设备位置信息) 定位

Geolocation模块管理设备位置信息,用于获取地理位置信息,如经度.纬度等.通过plus.geolocation可获取设备位置管理对象.虽然W3C已经提供标准API获取位置信息,但在某些平台存在差异或未实现,为了保持各平台的统一性,定义此规范接口获取位置信息. 1.方法 1.1.getCurrentPosition: 获取当前设备位置信息 void plus.geolocation.getCurrentPosition( successCB, errorCB, option ); 说明:位

HTML5规范的本地存储

在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database . 用来检查判断浏览器是否支持 Web Storage if(window.localStorage){ //浏览器支持localStorage } if(window.sessionStorage){ //浏览器支持sessionStorage } localStorage 主要作用是将数据保存在客户端中,也就是用户的计算机上. 是基于域的,在该域的任何网页都可以访问,在不同设备上存储的是不同