前端开发规范之html编码规范

原创 2015年01月03日 19:10:31
前端开发whqet,csdn,王海庆,whqet,前端开发专家

前端开发规范系列文章之html编码规范,感兴趣的同学请关注《前端开发规范》专栏。随着html5的逐渐深入人心,html5和xhtml截然相反的态度,造成了前端开发者的困惑,如何保持html代码的兼容性、简洁性、未来适用性,称为今天我们这篇文章的主要目的。参考一系列的html开发规范(mdogithubdoyoeglobantLFeh等),从诸多规范中寻求共同点,试图寻找最佳解决方案。

------------------------------------------------------------

--我参加了博客之星评选,如果你喜欢我的博客,求投票,您的支持是我的动力之源走起!

-----------------------------------------------------------------------------------------

原则

1.规范 。保证您的代码规范,趋html5,远xhtml,保证结构表现行为相互分离。

2.简洁。保证代码的最简化,避免多余的空格、空行,保持代码的语义化,尽量使用具有语义的元素,避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。

3.实用。遵循标准,但是不能以牺牲实用性为代价。

4.忠诚。选择一套规范,然后始终遵循。不管代码由多少人参与,都应该看起来像一个人写的一样。

语法

1.小写。html标签、html属性全部小写。

2.嵌套。所有元素必须正确嵌套。

3.闭合。双标签必须闭合,单标签(自关闭标签)不闭合。

<!--bad-->
<br/>
<hr/>

<!--good-->
<br>
<hr>

注释

1.详尽注释。解释代码解决问题、解决思路、是否为新鲜方案等。

2.模块注释。github建议不使用模块结束注释。

<!-- 新闻列表模块 -->
<div class="news">
...
<!-- /新闻列表模块 -->
<!-- 有不少规范建议不使用结束模块的注释,因为这样太丑了,又加重文件负荷。 -->

3.待办注释。

<!-- TODO:待办事项 -->
...

文档

1.文档类型使用html5标准文档类型,文档类型声明之前,不允许出现任何非空字符。不允许添加<meta>强制改变文档模式。

2.html元素上指定lang属性。显示页面语言,有助于语言合成工具来确定怎样发音,以及翻译工具决定使用的规则,等等。

3.指定明确的字符编码。让浏览器轻松、快速的确定适合网页内容的渲染方式。

4.IE兼容模式。Internet Explorer 支持使用兼容性 <meta> 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要,通常通过 edge mode 来通知 IE 使用最新的兼容模式。

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

5.head部分的顺序:a.<meta>元素,b. 需要的js文件(eg. Moddernizr or HTML5 Shiv),c. <title>元素,d.样式表。

6.可以使用IE条件注释的方式兼容IE,但是不要添加额外的样式表。

<!--bad-->
<!--[if IE8]>
	<link rel="stylesheet" href="/Assets/styles/IE8.css" >
<![endif]-->
<!--[if IE7]>
	<link rel="stylesheet" href="/Assets/styles/IE7.css" >
<![endif]-->

<!--good-->
<!--[if IE8]><html class="ie8" lang="zh-cn"><![endif]-->
<!--[if IE7]><html class="ie7" lang="zh-cn"><![endif]-->

属性

1.双引号属性值,不要使用单引号。

2.省略type属性。使用style、link、script,不用指定type属性,因为 text/css 和 text/javascript 分别是他们的默认值。

3.省略Boolean属性值。Boolean属性不用添加取值,disabled,checked,selected等。

4.省略url类属性资源协议头。

5.属性顺序。html属性应该按照特定的顺序出现以保证易读性。class->id,name->data-*->src,for,type,href->title,alt->aria-*,role。

6.多媒体元素添加替代属性。图像增加alt属性,音视频增加替代文字。

7.不手动设置tabindex属性,让浏览器自动设置。

元素

1.避免冗余标签。

2.避免JS生成标签。

3.段落文字应该用<p>,避免使用<br>。

4.列表项放<ul>、<ol>、<dl>,不要使用一系列的<div>或<p>

5.<input>使用for属性绑定<label>。

6.使用<label>标签包裹radio或checkbox和他们的文字,不用再使用for属性。

7.使用单选、复选替代下拉菜单。(radio or checkbox instead of select menu)

8.form button应制定type类型,使用type="submit"、type="reset"或type="button"。

9.首要的表单按钮首先出现(在DOM中),尤其是适用多个提交按钮的场合。视图中显示的顺序可以利用css修改。

10.有效使用<thead>、<tfoot>、<tbody>、<th>(scope属性)。可以把<tfoot>放<tbody>前提高加载速度。

<table summary="This is a chart of invoices for 2011.">
  <thead>
    <tr>
      <th scope="col">Table header 1</th>
      <th scope="col">Table header 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Table footer 1</td>
      <td>Table footer 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Table data 1</td>
      <td>Table data 2</td>
    </tr>
  </tbody>
</table>

格式

1.soft tab。

2.嵌套缩进。

3.删除行尾空格。

4.块元素、列表元素、表格元素都放在新行。

5.inline元素视情况换行。

6.努力保持每行长度小于80列,如果太长可换行。

<!--bad-->
<img class="block_element" id="unicorn" src="http://cl.ly/image/1a1u013e002z" alt="unicorn, rainbows, poop and stuff" width="500" height="400" />
<!--good-->
<img 
  class="block_element" 
  id="unicorn" 
  src="http://cl.ly/image/1a1u013e002z" 
  alt="unicorn, rainbows, poop and stuff" 
  width="500"
  height="400"
>

关于编码规范,没有标准答案,没有正确对错,只有更合理、更有效。本博文档写作过程耗费了博主的几乎大半个元旦假期,github上fork和star比较多的规范整理、遴选、书写,希望能对您有所帮助,如果有不同意见,请评论、争论、拍砖!

感谢您耐心读完,如果对您有帮助,请支持我

----------------------------------------------------------

前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------

版权声明:本文为博主原创文章,未经博主允许不得转载。

redmine配置邮箱提醒步骤(qq企业邮箱和个人邮箱)

1.打开如下目录文件 2.修改参数如下 注意:如果邮箱地址是以https开头的必须设置ssl参数设置为true,否则测试的时候会收到502 Proxy Error错...

Redmine艰辛安装过程和邮件配置

Redmine使用有多种安装方式,本人使用最简单的一键安装: Bitnami 这个东西。Windows下载地址: https://bitnami.com/redirect/to/47668...
  • icewst
  • icewst
  • 2015年01月08日 11:32
  • 8564

前端开发规范之html编码规范

前端开发规范系列文章之html编码规范,感兴趣的同学请关注《前端开发规范》专栏。随着html5的逐渐深入人心,html5和xhtml截然相反的态度,造成了前端开发者的困惑,如何保持html代码的兼容性...

web前端开发编码规范及性能优化

代码优化 这个部分仅仅将代码优化本身,不考虑性能,关于代码部分的性能优化在 页面渲染 部分 代码优化 中 HTML+CSS 符合 XHTML 规范: 小写,正确嵌套,必须关闭; 双引号,合理缩进,...
  • Faremax
  • Faremax
  • 2017年04月22日 09:40
  • 656

前端开发规范之jQuery编码规范

翻译自:http://lab.abhinayrathore.com/ 翻译人员:前端开发whqet,意译为主,不当之处敬请指正。 译者说:临近期末,大部分的基础教学内容已经讲解完毕,在进行...
  • xhjfor
  • xhjfor
  • 2015年06月27日 14:53
  • 417

前端开发规范手册(二)--HTML

一、通用约定 标签 自闭合(self-closing)标签,无需闭合 ( 例如: img、input、br、hr 等 ); 可选的闭合标签(closing tag),需闭合 ( 例如:> 或 ); ...

前端开发命名规范(html+css+js)

文件夹及文件命名 所有的命名最好都小写。 文件夹命名,尽量采取单个英语单词描述,如login,index。 html文件名称,当需要多个英语单词描述时用”_”(下划线)连接多个单词分隔,如:user_...
  • wzm9803
  • wzm9803
  • 2016年10月31日 15:59
  • 475

Web前端开发代码规范HTML JAVASCRIPT CSS

规范目的   为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对...

html5,web前端开发的规范(三)

一、规范目的       为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本...

Html5系列(十六)web前端开发规范文档

规范说明 此为前端开发团队遵循和约定的代码书写规范,意在提高代码的规范性和可维护性。 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁...
  • dhdhxgx
  • dhdhxgx
  • 2015年04月16日 23:12
  • 456
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端开发规范之html编码规范
举报原因:
原因补充:

(最多只允许输入30个字)