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

原则
1.规范。保证您的代码规范，趋html5，远xhtml，保证结构表现行为相互分离。
2.简洁。保证代码的最简化，避免多余的空格、空行，保持代码的语义化，尽量使用具有语义的元素，避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。
3.实用。遵循标准，但是不能以牺牲实用性为代价。
4.忠诚。选择一套规范，然后始终遵循。不管代码由多少人参与，都应该看起来像一个人写的一样。

语法
1.小写。html标签、html属性全部小写。
2.嵌套。所有元素必须正确嵌套。
3.闭合。双标签必须闭合，单标签（自关闭标签）不闭合。
[html] view plaincopy在CODE上查看代码片派生到我的代码片

<!--bad-->

<br/>

<hr/>

<!--good-->

<br>

<hr>

注释

1.详尽注释。解释代码解决问题、解决思路、是否为新鲜方案等。
2.模块注释。github建议不使用模块结束注释。
[html] view plaincopy在CODE上查看代码片派生到我的代码片

<div class="news">  ...


3.待办注释。
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  ...

文档
1.文档类型使用html5标准文档类型，文档类型声明之前，不允许出现任何非空字符。不允许添加<meta>强制改变文档模式。
2.html元素上指定lang属性。显示页面语言，有助于语言合成工具来确定怎样发音，以及翻译工具决定使用的规则，等等。
3.指定明确的字符编码。让浏览器轻松、快速的确定适合网页内容的渲染方式。
4.IE兼容模式。Internet Explorer 支持使用兼容性 <meta> 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要，通常通过 edge mode 来通知 IE 使用最新的兼容模式。
[html] view plaincopy在CODE上查看代码片派生到我的代码片
<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，但是不要添加额外的样式表。
[html] view plaincopy在CODE上查看代码片派生到我的代码片

<!--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>前提高加载速度。
[html] view plaincopy在CODE上查看代码片派生到我的代码片

<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列，如果太长可换行。
[html] view plaincopy在CODE上查看代码片派生到我的代码片

<!--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"

>

前端开发规范之html编码规范的更多相关文章

【转发】网易邮箱前端技术分享之javascript编码规范
网易邮箱前端技术分享之javascript编码规范发布日期:2013-11-26 10:06 来源:网易邮箱前端技术中心作者:网易邮箱点击:533 网易邮箱是国内最早使用ajax技术的邮箱.早在 ...
Java语言编码规范 - Java语言编码规范(中文版)（http://doc.javanb.com/code-conventions-for-the-java-programming-language-zh/index.html）
目录 1 介绍 1.1 为什么要有编码规范 1.2 版权声明 2 文件名 2.1 文件后缀 2.2 常用文件名 3 文件组织 3.1 Java源文件 3.1.1 开头注释 3.1.2 包和引入语句 ...
Web前端开发中的各种CSS规范
Reference: http://yusi123.com/2866.html 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和 ...
【安全开发】IOS安全编码规范
申明:本文非笔者原创,原文转载自:https://github.com/SecurityPaper/SecurityPaper-web/blob/master/_posts/2.SDL%E8%A7%8 ...
【安全开发】Android安全编码规范
申明:本文非笔者原创,原文转载自:https://github.com/SecurityPaper/SecurityPaper-web/blob/master/_posts/2.SDL%E8%A7%8 ...
HTML编码规范、CSS编码规范
HTML编码规范 IE 兼容模式 IE 支持通过特定的标签来确定绘制当前页面所应该采用的 IE 版本.除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的 ...
python编码规范、js编码规范及IDE的检查插件pylint/eslint等
一.python规范参考:https://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/的风格规范和语 ...
前端开发 css、less编写规范
壹 ❀ 引早在大半年前,我在负责整理定义了前端组JavaScript开发规范与less.css样式开发规范.一直想将两个规范整理成文章,但在整理了JavaScript规范后,我花了较多的时间在学习J ...
【安全开发】Perl安全编码规范
多年以来,Perl已经成为用于系统管理和WebCGI开发的功能最强的编程语言之一(几乎可以使用Perl做任何功能的程序).但其扩展应用,即作为Internet上CGI的开发工具,使得它经常成为Web服 ...

随机推荐

PAT1076. Forwards on Weibo（标准bfs模板）
//标准的层次遍历模板 //居然因为一个j写成了i,debug半天.....解题前一定要把结构和逻辑想清楚,不能着急动手,理解清楚题意,把处理流程理清楚再动手,恍恍惚惚的写出来自己慢慢debug吧 # ...
【Linux】自动化部署可信任登录
Linux信任登录,免密码登录的脚本: 需要安装expect,可以yum也可以编译安装,编译后注意脚本中的expect路径. rsa.exp #!/usr/bin/expect ########### ...
Linux设备驱动开发环境的搭建（转）
经过两周的摸索,终于对Linux设备驱动开发有了个初步的认识,下面对Linux设备驱动开发环境的搭建做个小结,以方便自己以后查询,同时也能给同道的初学者一点帮助. 刚接触Linux设备驱动时,初学者往 ...
用绝对路径引用JS、CSS
项目中,最好使用绝对路径引用JS和CSS文件,详情如下: 1.vm文件中: <link rel="stylesheet" href="$!{request.cont ...
WireShark 过滤语法
1. 过滤IP,如来源IP或者目标IP等于某个IP 例子: ip.src eq 192.168.1.107 or ip.dst eq 192.168.1.107 或者 ip.addr eq 192.1 ...
1. Hello UWP
1. UWP UWP,Universal Windows Platform,也就是 Windows 10 新推出的通用平台应用,只要一次编码,即可运行在 Windows 10 电脑以及手机上,甚至可以 ...
js 实现获取对象所有键名（key）的方法
1.for in 循环并且使用hasOwnProperty 方法 var jsonObject1 = { "name": "xiaoming", " ...
POJ C++程序设计编程题＃1 编程作业—STL1
编程题#1 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述下面的程序输出结 ...
Clearing Search Values
Use the SearchClear() method which is part of the Field class to clear search values on a particul ...
Linux安装配置php环境的方法
本文实例讲述了Linux安装配置php环境的方法.分享给大家供大家参考,具体如下: 1.获取安装文件: http://www.php.net/downloads.php php-5.3.8.tar.g ...

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

前端开发规范之html编码规范的更多相关文章

随机推荐

热门专题