前端开发规范之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服 ...

随机推荐

【spring 3】AOP：静态代理
一.代理的基本简介首先,在什么时候使用代理: 在面向方面编程过程中,当需要对所有类进行某种操作(如,安全性检查,记录操作日志)时,考虑到OCP原则,我们不能在所有实现类中直接添加某些相关方法,这样一 ...
openStack reboot调试
Windbg 线程状态笔记
1.ntdll!ZwWaitForSingleObject 线程被挂起,如果下面跟着是这样子: RetAddr : Args to Child : Call Site `7766e518 : `fff ...
css兼容
1.不同浏览器默认边距不同,必须对body自定义:margin:0;padding:0; 2.margin.padding属性值为%时,不是所有浏览器都支持: 3.transparent属性,IE7之 ...
windows server 时间同步
域环境,加入域的客户端时间同步服务器时间问题:服务器存在一种情况,不存在"intelnet时间"选项卡解决办法:手动修改为正确时间客户端运行: CMD-->w32tm ...
leetcode 121
121. Best Time to Buy and Sell Stock Say you have an array for which the ith element is the price of ...
Jetson TK1 Restore 步骤
Jetson TK1 Restore 步骤下载驱动包和文件系统包: 1:驱动包 2:文件系统具体参见文档:http://download.csdn.net/detail/xiabodan/7 ...
MySQL 5.7.9 免安装配置
MySQL 5.7.9 免安装配置环境:win10 64位 mysql版本:mysql-5.7.9-winx64.zip (http://dev.mysql.com/downloads/mysql/ ...
JS获取网页属性包括宽、高等
JS获取网页属性包括宽.高等. function getInfo() { // www.jbxue.com var s = ""; s += " 网页可见区域宽:&q ...
linux中PHP dirname(__FILE__)路径问题解决
近期在给wordpress开发模板功能时发现,直接使用include(“文件名”)的形式调用其他php代码片段时会出现路径错误.之前服务器环境一直都是iis,未曾出现过类似的BUG,但换成linux服 ...

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

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

随机推荐

热门专题