编写灵活、稳定、高质量的HTML代码的规范
一、唯一定律
无论有多少人共同参与同一项目,一定要确保每一行代码都像是唯一个人编写的。
二、HTML
2.1 语法
(1)用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。
(2)嵌套元素应当缩进一次(即两个空格)。
(3)对于属性的定义,确保全部使用双引号,绝不要使用单引号。
(4)不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
(5)不要省略可选的结束标签(closing tag)(例如,</li> 或 </body>)。
2.2 Example
三、HTML5 doctype
为每个 HTML 页面的第一行添加标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的展现。
四、语言属性
根据 HTML5 规范:
强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。
五、IE 兼容模式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。
六、字符编码
通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是,可以避免在 HTML 中使用字符实体标记(character entity),从而全部与文档编码一致(一般采用 UTF-8 编码)。
七、引入 CSS 和 JavaScript 文件
根据 HTML5 规范,在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性,因为 text/css 和 text/javascript 分别是它们的默认值。
八、实用为王
尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
九、属性顺序
9.1 从大到小
HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。
(1)class
(2)id, name
(3)data-*
(4)src, for, type, href, value
(5)title, alt
(6)role, aria-*
9.2 Example
9.3 说明
class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。
十、布尔(boolean)型属性
10.1 注意
(1)布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值,但是 HTML5 规范不需要。
(2)元素的布尔型属性如果有值,就是 true,如果没有值,就是 false。
(3)如果属性存在,其值必须是空字符串或 [...] 属性的规范名称,并且不要在首尾添加空白符。
简单来说,就是不用赋值。
10.2 Example
十一、减少标签的数量
编写 HTML 代码时,尽量避免多余的父元素。很多时候,这需要迭代和重构来实现。
十二、减少 JavaScript 生成的标签
通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免。
编写灵活、稳定、高质量的HTML代码的规范的更多相关文章
- 如何编写规范,灵活,稳定,高质量的HTML和css代码
黄金定律 永远遵循同一套编码规范,不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. 语法: 1.用两个空格来代替制表符(tab);2.嵌套元素应当缩进一次(两个空格); 3.对 ...
- 编写灵活、稳定、高质量的 css代码的规范
语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个声明块的左花括号前添加一个空格. 声 ...
- 编写灵活、稳定、高质量的 HTML 代码的规范
不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格 ...
- HTML Inspector – 帮助你编写高质量的 HTML 代码
HTML Inspector 是一款代码质量检测工具,帮助你编写更优秀的 HTML 代码.HTML Inspector 使用 JavaScript 编写,运行在浏览器中,是最好的 HTML 代码检测工 ...
- iOS应用开发最佳实践系列一:编写高质量的Objective-C代码
本文由海水的味道编译整理,转载请注明译者和出处,请勿用于商业用途! 点标记语法 属性和幂等方法(多次调用和一次调用返回的结果相同)使用点标记语法访问,其他的情况使用方括号标记语法. 良好的 ...
- 编程精粹--编写高质量C语言代码(3):自己设计并使用断言(二)
接着上一遍文章<<编程精粹--编写高质量C语言代码(2):自己设计并使用断言(一)>>,继续学习怎样自己设计并使用断言,来更加easy,更加不费力地自己主动寻找出程序中的错误. ...
- 高质量的javascript代码 -- 深入理解Javascript
一. 编写高质量的javascript代码基本要点a) 可维护的代码(Writing Maintainable Code)i. 可读(注释)ii. 一致(看上去是同一个人写的)iii. 已记录b) 最 ...
- 老司机告诉你高质量的Java代码是怎么练成的?
一提起程序员,首先想到的一定是"码农",对,我们是高产量的优质"码农",我们拥有超跃常人的逻辑思维以及不走寻常路的分析.判别能力,当然,我们也有良好的编码规范, ...
- 如何编写高质量的C#代码(一)
从"整洁代码"谈起 一千个读者,就有一千个哈姆雷特,代码质量也同样如此. 想必每一个对于代码有追求的开发者,对于"高质量"这个词,或多或少都有自己的一丝理解.当 ...
随机推荐
- WHY吃糖果 QDUOJ 二分嵌套
WHY吃糖果 QDUOJ 二分嵌套 原题链接 解题思路参考链接 题意 给出一个\(n*n\)的矩阵,每个格子的权值为\(i*i+j*j+i*j+100000*(i-j)\),求该矩阵中第m小的权值为多 ...
- HNUSTOJ-1636 心电图
1636: 心电图 时间限制: 1 Sec 内存限制: 128 MB提交: 583 解决: 231[提交][状态][讨论版] 题目描述 众所周知,ACM/ICPC实验室聚集了一堆学霸Orz 有学霸 ...
- 通过实例简介python使用ctypes模块调用C语言动态库
看介绍python语言时,说它是胶水语言,可以调用其他语言.通过使用ctypes模块就可以调用C语言的动态库.下面先放上官方文档和几个比较好的博文. 1.官方文档:http://python.net/ ...
- time和datetime的区别
time在 Python 文档里,time是归类在Generic Operating System Services中,换句话说, 它提供的功能是更加接近于操作系统层面的.通读文档可知,time 模块 ...
- BZOJ 2560: 串珠子 (状压DP+枚举子集补集+容斥)
(Noip提高组及以下),有意者请联系Lydsy2012@163.com,仅限教师及家长用户. 2560: 串珠子 Time Limit: 10 Sec Memory Limit: 128 MB Su ...
- [ZJOI2007]最大半连通子图(Tarjan,拓扑序DP)
[ZJOI2007]最大半连通子图 题目描述 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:?u,v∈V,满足u→v或v→u,即对于图中任意两点u,v,存在一条u到v ...
- hdlg WM_INITDIALOG
https://www.cnblogs.com/gakusei/articles/1585212.html // “关于”框的消息处理程序. LRESULT CALLBACK About(HWND h ...
- u-boot-2019.07 移植步骤
doc/README.kconfig Tips to add/remove boards------------------------- When adding a new board, the f ...
- 组件通信 eventtBus
平级组件的通信 一个全局发布订阅模式,它是挂载到全局的 <!DOCTYPE html> <html lang="en"> <head> < ...
- RPC vs REST
RPC vs REST 另外,由于Dubbo是基础框架,其实现的内容对于我们实施微服务架构是否合理,也需要我们根据自身需求去考虑是否要修改,比如Dubbo的服务调用是通过RPC实现的,但是如果仔细拜读 ...