码迷,mamicode.com
首页 > Web开发 > 详细

HTML编码规范

时间:2020-04-10 00:27:43      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:开始   等等   als   pad   否则   checked   中划线   pre   支持   

1.黄金法则(Golden rule)

不管有多少人参与同一个项目,一定要确保每一行代码都像是同一个人编写的。

Every line of code should appear to be written by a single person, no matter the number of contributors.

这就需要在一个项目中,我们永远遵循同一套编码规范。在项目开发前,制定一套行之有效的编码规范,每个项目组成员都要按这个规范来编码。

2.命名规范

  • CSS 文件名使用英文小写,多个单词时,中间用下划线(_)连接,如:index.html web-guide.html

  • id 命名使用英文驼峰命名法,多采用语义化来命名

  • 自定义属性采用英文小写命名,多个单词时,中间用中划线(-)连接,如:generate-catalogue

  • 以 data- 开始的属性名,是用来存储数据的,具体可参考 W3C Html 5 data- 。html可以通过 dataset 来取属性中的值,对于不支持的浏览器,可以通过getAttribute来获取。例如:data-city="ShangHai" ,如果对应的html标签id为 cityList,则 document.getElementById(‘cityList‘).dataset(‘city‘); 对于不支持的浏览器,应该document.getElementById(‘cityList‘).getAttribute(‘-data-city‘);

3.书写规范
3.1 语法

  • 使用两个空格来代替制表符(tab)作为缩进,— 这是保证代码在各种环境下显示一致的唯一方式

  • 嵌套元素应当缩进一次(即两个空格)

  • 对于属性中的值,确保全部使用双引号,不要使用单引号,也不要省略引号

  • 不要在自闭合(self-closing)元素的尾部添加斜线 — HTML5 规范 中明确说明这是可选的

  • 不要省略可选的结束标签(closing tag)(例如,</li> 或 </body>)

  • 不要一行写太长的html代码,建议设置最大长度为120列,超过120列是最好换行书写,方便阅读和排版

  • 嵌套元素最好单独写在一行

  • 行内元素中不要嵌套块级元素,比如:<span><div>不推荐写法</div></span>

  • p标签中是不能嵌套块级元素的,浏览器会解析为两个独立的标签,而不能到达你想要的结果

3.2 HTML5 doctype

为每个 HTML 页面的第一行添加标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的展现。
3.3 语言属性 Language attribute

根据 HTML5 规范:

强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。

更多关于 lang 属性的知识可以从 此规范 中了解。

3.4 IE 兼容模式

Internet Explorer 支持使用 <meta> 标签来指定使用什么版本的 IE 来渲染页面。除非有强烈的特殊需求,否则最好设置为 edge mode,从而让 IE 采用其所支持的最新模式来渲染。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

具体信息可以参考 这里

3.5 字符编码

通过声明一个明确的字符编码,让浏览器正确的呈现内容,防止出现乱码,通常字符编码为 UTF-8

<head>
  <meta charset="UTF-8">
</head>

3.6 引入 CSS 和 JavaScript 文件

根据 HTML5 规范,在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性,因为 text/css 和 text/javascript 分别是它们的默认值。

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
 
<!-- JavaScript -->
<script src="code-guide.js"></script>

3.7 实用高于完美

尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

3.8 属性顺序

HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。

  • class

  • id, name

  • data-*

  • src, for, type, href

  • title, alt

  • aria-*, role

class 用于标识高度可复用组件,因此应该放在首位。id 用于标识具体组件,应该尽量少使用(例如,页面内的书签),因此排在第二位。

以上顺序也不一定是绝对的,可以根据需要把常用的放在首位

3.9 布尔(boolean)型属性

Boolean 属性指不需要声明值的属性。XHTML 需要每个属性声明值,但是 HTML5 并不需要。了解更多内容,参考 WhatWG section on boolean attributes

一个元素中 Boolean 属性的存在表示取值 true,不存在则表示取值 false。如果一定要为其赋值的话,请参照 WhatWG 中的说明。

如果属性存在,其值必须是空字符串或 [...] 属性的本身名称,并且不要在首尾添加空白符。

简单来说,就是不用赋值。

<input type="text" disabled>
 
<input type="checkbox" value="1" checked>
 
<select>
  <option value="1" selected>1</option>
</select>
 
<!--不建议 -->
<input type="text" value="1" readonly="readonly" disabled="disabled">

虽然 HTML5是这样规定的,但是对于IE浏览器,如果不指定属性值,有时会有问题的,尤其是readonly和 disabled ,所以最好还是设置为 readonly="readonly" disabled="disabled"

3.10 减少标签嵌套的数量

在编写 HTML 代码时,尽量避免多余的父节点。很多时候,需要通过迭代和重构来使 HTML 变得更少。 请看下面的例子

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>
 
<!-- Better -->
<img class="avatar" src="...">

3.11 避免利用JavaScript 生成标签或html片段

通过 JavaScript 生成的标签或html片段让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免,我们可以采用模板的方式来处理,常用的模板有

handlebars(模板引擎类),Ember.js 就采用该模板引擎

knockoutjs,除了支持模板,他还是一个轻量级的MVVM框架

mustashe, 一个模板引擎

JsRender,一个非常好用的html模板引擎类

在不引入其他mvc或mvvm框架的前提下,采用 JsRender 或 handlebars 来处理html模板,这两个模板支持循环、条件语句,还支持在模板中动态执行JavaScript脚本(不建议这样做)。当然我们还可以引入MVC框架,这些框架一般都自带模板处理引擎,比如Angular、Ember、KnockoutJs等

4.语义化命名和语义化标签

我们尽量多采用语义化来命名id,并且采用语义化标签来书写html代码,多用html5中新增的标签来书写。
5.Emmet帮助我们快速书写html代码

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hi10bhb1k0j

HTML编码规范

标签:开始   等等   als   pad   否则   checked   中划线   pre   支持   

原文地址:https://www.cnblogs.com/homehtml/p/12670589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!