文档章节

Html 编码规范

阿法
 阿法
发布于 2017/06/28 12:02
字数 476
阅读 14
收藏 0

黄金定律:不管有多少人共同参与一个项目,选择一套规范,然后始终遵循,一定要确保每一行像是一个人编写的

  1. 语法
  • html标签以及属性应该全部小写,
  • 所有元素应该正确嵌套,编写时嵌套元素应该缩进一次,也就是两个空格。
  • 双标签必须闭合,单标签(自关闭标签)不闭合,不要在自闭合(self-closing)元素的尾部添加斜线比如<input><img> <br><link>。
  • 通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免。

     2. 属性 

 

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

            class

            id

             name

             data-*

            src, for, type, href, value

            title, alt

            role, aria-*

  • 对于属性的定义,确保全部使用双引号,绝不要使用单引号
  • 省略type属性。使用style、link、script,不用指定type属性,因为 text/css 和 text/javascript 分别是他们的默认值。省略Boolean属性值。Boolean属性不用添加取值,disabled,checked,selected等。省略url类属性资源协议头。

3.格式

  • soft tab。
  • 嵌套缩进。
  • 删除行尾空格。
  • 块元素、列表元素、表格元素都放在新行。
  • inline元素视情况换行。
  • 努力保持每行长度小于80列,如果太长可换行。

 4.元素

  • 尽量不要使用js标签,避免冗余标签。
  • 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素:
  • 块级元素不能放在<p>里面:
  •  有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:   h1、h2、h3、h4、h5、h6、p、dt  
  •  li 内可以包含 div 标签 

© 著作权归作者所有

阿法
粉丝 1
博文 17
码字总数 23853
作品 0
海淀
程序员
私信 提问
空格URL编码的正确使用姿势

1、简介 空格目前有两种不同的编码方式,一种是在HTML4中定义的,而另一种是在RFC-3986中定义的。本文将简要介绍这两种编码方式,以及会给我们的开发工作带来什么样的问题,最后给出一些编码...

joymufeng
2016/02/24
3.1K
1
H5 HTML代码编写规范及注意要点

HTML及H5代码编写规范及注意要点 语法: 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。 嵌套元素应当缩进一次(即两个空格)。 对于属性的定义,确保全...

sinat_34719507
2016/12/27
0
0
twitter bootstrap的html编码规范

这篇twitter bootstrap的html编码规范对于团队开发很有参考意义。 http://codeguide.bootcss.com/#html

foodon
2014/10/29
106
0
前端开发规范手册(命名、HTML、CSS、JS、ES6、React)

简介 前端开发规范手册(命名、HTML、CSS、JS、ES6、React)完整链接,欢迎给出您的宝贵意见; GitHub源码地址,要是觉得文档还能凑合着看,欢迎 ~ 不以规矩,不能成方圆。 对于团队而言,统...

baldwin
02/19
0
0
前端开发-学习资料库

前端开发-学习资料库 包含前端技术参考手册,前端编码规范,前端博客及社区,前端面试题,以及整理前端开源的一些开源书籍。 http://f2edocs.com 持续更新中... 参考、使用的项目 ECMAScript...

郭小铭
2015/12/01
260
0

没有更多内容

加载失败,请刷新页面

加载更多

Experts say the weaker pound is drawing investors to the UK tech sector

UK tech companies secured a record £5.5bn in foreign investment in the first seven months of this year, research shows. This was more than the amount invested per capita in th......

wowloop
10分钟前
2
0
Add support for Android 9-patch images in BorderImage

The 9-patch image implementation in Qt Quick Controls 1 is an internal implementation detail of the Android style. It cannot handle .9.png image files out of the box, but takes ......

shzwork
15分钟前
4
0
c/c++日期时间处理函数小结

日期时间处理函数: 日期时间转为字符串 strftime/std::put_time 字符串解析成日期时间 strptime/std::get_time 时间结构转换:time_t->tm localtime:time_t->tm 时间结构转换:tm->time_t ...

chuqq
19分钟前
4
0
Apache Flink 进阶入门(二):Time 深度解析

前言 Flink 的 API 大体上可以划分为三个层次:处于最底层的 ProcessFunction、中间一层的 DataStream API 和最上层的 SQL/Table API,这三层中的每一层都非常依赖于时间属性。时间属性是流处...

大涛学长
20分钟前
3
0
创龙基于Xilinx Artix-7系列FPGA处理器

SOM-TLA7是一款由广州创龙基于Xilinx Artix-7系列FPGA自主研发的核心板,可配套广州创龙Artix-7开发板使用。核心板尺寸仅70mm*50mm,采用沉金无铅工艺的10层板设计,专业的PCB Layout保证信号...

Tronlong创龙
26分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部