HTML项目代码编写规范
如果本文档中有任何错误的、不符合行规的,敬请斧正。
引言
不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。
若您对本文档中任何内容有不明白的,或者感觉不合行规的,请您按以下格式向我邮件说明,同时也欢迎任何人参与讨论,共同完善本文档。本文档中很多也是根据我自己现在的公司需求来定的。
邮件不是QQ,请尽可能清晰的组织你的语言,将问题描述得更清楚,同时,不要使用过多的样式化,合乎文档排版标准,谢谢。
项目文件结构
前端项目文件结构
前端项目统一按以下目录结构管理项目文件:
/path/to/PROJECT_NAME/scss/base.scssmain.scss_module_name.scssscripts/build.jsgulp.jsbuild/vendor/THIRD_PARTY_LIBRARY_NAME/VERSION/MINIFIED_FILE_NAME/assets/css/base.min.cssbase.min.mapmain.min.cssmain.min.mapimg/logo.pnglogo@2x.pnglogo@3x.pngjs/main.min.jsmain.min.mapindex.htmllayout.htmlPAGE_NAME.htmltemplate/vendor/THIRD_PARTY_LIBRARY_NAME/VERSION/MINIFIED_FILE_NAME/assets/css/base.cssmain.cssimg/logo.pngjs/main.jsindex.htmllayout.htmlPAGE_NAME.html
在上面的目录结构中,大写的名称为可变的,即根据具体需求随时更换,它们的语义分别为:
PROJECT_NAME
当前项目的英文名称(若叮当钱包官方无法给出标准翻译,或者拼音即是其名称,则使用拼音全称,或者使用其官方定义的短名称),由纯小写字母
a-z
或者数字0-9
以及中划线-
组成的字符串template
模板目录,用于开发使用
build
构建目录
vendor
所有第三方的文件均存放在
vendor
目录中,在vendor
中,任何第三方库、样式、脚本等均需要遵守以下规则存放:任何一个第三方库均需要存放在其名称下,在开发过程中,使用bower
安装。
HTML标准说明
文档类型
任何一个HTML页面,均必须使用下面这个文档类型声明:
<!DOCTYPE html>
在叮当钱包的任何项目的 HTML 界面中,不允许出现该声明之外的任何声明。
合法性验证
合法的使用HTML,并利用w3c的工具(W3C HTML validator)进行检查。
语义性
根据目的合理使用HTML标签,例如 header
、footer
、nav
、section
等标签,跟 div
十分类似,但是在语义上却有天壤之别,比如下面这样:
<article class="entry"><header><h1>读《双城记》</h1></header><section class="content"><p><strong>《双城记》</strong>(英语:<em>A Tale of Two Cities</em>)是英国作家查尔斯·狄更斯所著的一部以法國大革命为背景所写成的长篇历史小说,情節感人肺腑,是世界文學經典名著之一,故事中將巴黎、倫敦兩個大城市連結起來,围绕着曼奈特医生一家和以德法奇夫妇为首的圣安东尼区展开故事。小说里描写了贵族如何败坏、如何残害百姓,人民心中积压对贵族的刻骨仇恨,导致了不可避免的法国大革命。本书的主要思想是为了爱而自我牺牲,書名中的「雙城」指的是<strong>巴黎與倫敦</strong>。</p><h2>人物介紹</h2><ul><li>曼奈特醫生(Dr. Alexandre Manette),一位老政治犯。</li><li>露西·曼奈特(Lucie Manette),曼奈特醫生的女兒。</li><li>查爾斯·丹尼(Charles Darney),厄弗裡蒙地侯爵的姪子,愛上露西·曼奈特。</li><li>雪尼‧卡頓(Sydney Carton),一位憤世嫉俗的律師,愛上露西·曼奈特。</li><li>德法奇(Ernest Defarge),曼奈特醫生舊日的僕人。</li><li>德法奇夫人(Madame Defarge/Teresa Defarge),一位堅定的女革命者。</li><li>約翰·拔沙(John Barsad),一位間諜。他的真實名字是索羅門(Solomon Pross) ,是波希小姐(Miss Pross)的哥哥。</li><li>波希小姐(Miss Pross),露西的保姆。</li><li>羅傑·錫利(Roger Cly),另一位間諜,約翰·拔沙的夥伴</li></ul></section>
</article><!-- /.entry -->
协议头
建议在指向图片、样式表、JavaScript脚本或者其它媒体文件的URL地址中省略 http:
与 https:
协议部分,除非已知相应文件不能同时兼容这两个协议,比如:
我们不推荐下面这种方式:
<script src="http://www.doraemoney.com/vendor/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://assets/css/style.css"/>
<style>.example {background: #fff url(http://www.doraemoney.com/assets/img/example-background.png) no-repeat center;}
</style>
你应该像下面这样写:
<script src="//www.doraemoney.com/vendor/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="//assets/css/style.css"/>
<style>.example {background: #fff url(//www.doraemoney.com/assets/img/example-background.png) no-repeat center;}
</style>
另外的示例,比如通过 <img>
标签引入图片,我们同样不推荐这样写:
<img src="http://www.doraemoney.com/assets/img/logo.png" alt="叮当钱包" class="logo"/>
而应该这样写:
<img src="//www.doraemoney.com/assets/img/logo.png" alt="叮当钱包" class="logo"/>
代码缩进
不允许在任何 HTML
、CSS
以及 JavaScript
代码中使用 Tab
进行缩进,且所有的缩进只允许使用两个空格 __
,如下面这样是正确的:
<a class="brand"><img src="//www.doraemoney.com/assets/img/logo.png" alt="叮当钱包" />
</a>
而下面这样均为错误的:
<a class="brand"><img src="//www.doraemoney.com/assets/img/logo.png" alt="叮当钱包" />
</a>
大小写
所有的代码都应该是小写的,包括元素名称、属性、属性值(除非 text
或者 CDATA
的内容)、选择器、CSS属性以及属性值,如下面这样均是错误的:
<A HREF="http://www.doraemoney.com" TITLE="叮当钱包官方网站首页" CLASS="Brand"/>叮当钱包</A>
正确的写法应该是:
<a href="http://www.doraemoney.com" title="叮当钱包官方网站首页" class="brand">叮当钱包</a>
对于资源文件的命名,我们同样要求全部使用纯小写字母,同时,多个单词间使用中横线分割(-
),同时,不允许在命名中出现空格,英文字母必须放在第一个位置, -
不允许出现在名称格式后缀小数点 .
的前面,如下面这样就是正确的命名方法:
logo.png
example-background.png
assets/css/base.css
而下面这些均是错误的:
logo-.png
-logo.png
0logo.png
example background.png
Example-Background.png
ExampleBackground.png
Assets/Css/Base.css
尾随空格
尾随空格是绝对不允许的,容易让 diff
更加复杂,比如下面这样是不允许的:
<h2>什么是叮当钱包? </h2>
<p>叮当钱包的命名灵感来源于哆啦A梦的四次元口袋,叮当希望自己也可以像这个神奇口袋一样,在小伙伴需要帮助时,伸出温暖援(圆)手,给予大家“无所不能”的帮助。</p>
下面这样才是正确的:
<h2>什么是叮当钱包?</h2>
<p>叮当钱包的命名灵感来源于哆啦A梦的四次元口袋,叮当希望自己也可以像这个神奇口袋一样,在小伙伴需要帮助时,伸出温暖援(圆)手,给予大家“无所不能”的帮助。</p>
注意仔细观察,在 h2
标签中 ?
号后面有无空格。
编码格式
所有的文件,包括 .html
、.css
、.js
、scss
、less
等,必须全部使用 utf-8
编码格式,如下面这样的是正确的:
<head><meta charset="utf-8" />
</head>
代码注释
任何编写代码的人都必须根据需要撰写代码注释,对于团队开发来说,这是非常重要的,比如下方是HTML的注释规范:
<!-- 这是单行注释 -->
<div class="foo"></bar><!--这是多行注释的标题这是多行注释中的一行
-->
HTML项目代码编写规范相关推荐
- J2EE项目代码编写规范分享
码编写规范目的:能够在编码过程中实现规范化,为以后的程序开发中养成良好的行为习惯. 代码编写规范使用范围:J2EE项目开发. 包命名规范: 目的:包的命名规范应当体现出项目资源良好的划分 servle ...
- .NET代码编写规范 整理
.NET代码编写规范 - [ASP.NET] 2009-02-26 | Tag: 版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://lenspe.blogbus.com/ ...
- 程序详细设计之代码编写规范_我在不编写任何代码的情况下建立了一个设计策划网站
程序详细设计之代码编写规范 It's been just over a month since MakeStuffUp.Info - my first solo project as an indep ...
- 项目代码编程规范(设计类和方法、变量、for语句格式 、while语句、 switch语句 、封装事务)
项目代码编程规范 应用范围 本规范应用于采用J2EE规范的项目中,所有项目中的JAVA代码(含JSP,SERVLET,JAVABEAN,EJB)JS代码.HTML代码及数据库设计均应遵守这个规范.同时 ...
- C语言 程序代码编写规范
前言 一个好的程序编写规范是编写高质量程序的保证.清晰.规范的源程序不仅仅是方便阅读,更重要的是能够便于检查错误,提高调试效率,从而最终保证软件的质量和可维护性. 说明 l 本文档主要适用于刚刚开始接 ...
- c语言程序前言,C语言 程序代码编写规范前言
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 一个好的程序编写规范是编写高质量程序的保证.清晰.规范的源程序不仅仅是方便阅读,更重要的是能够便于检查错误,提高调试效率,从而最终保证软件的质量和可维护性 ...
- 微课|中学生可以这样学Python(1.3节):Python代码编写规范
适用教材: 董付国,应根球.<中学生可以这样学Python>.清华大学出版社,2017. 第1章 Python概述 1.3 Python代码编写规范 京东购买链接:https://it ...
- c语言程序报告的前言,C语言 程序代码编写规范前言
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 一个好的程序编写规范是编写高质量程序的保证.清晰.规范的源程序不仅仅是方便阅读,更重要的是能够便于检查错误,提高调试效率,从而最终保证软件的质量和可维护性 ...
- 长沙北大青鸟java 学费_长沙北大青鸟学校好不好 长沙北大青鸟实力学费一览表:Java代码编写规范(二)...
原标题:长沙北大青鸟学校好不好 长沙北大青鸟实力学费一览表:Java代码编写规范(二) 文件名规范 1.一个Java源文件只能存储个Java类. 2.文件名与Java类名相同. 3.一个类文件的代码行 ...
最新文章
- 02 小程序入门实战
- hdu 2243 考研路茫茫——单词情结(AC自动+矩阵)
- Turtle-可视化界面画圣诞树
- Android中访问通讯录,数据的增删改查
- 棱镜刘大澎:云时代的手游SDK接入
- 一图读懂马云与阿里20年:互联网巨头是如何养成的?
- CURL POST PHP
- Newtonsoft.Json序列化和反序列之javascriptConvert.SerializeObject,DeserializeObject,JsonWriter,JsonReader...
- 数字图像处理及MATLAB实现实验四——图像变换
- Tensorflow搭建GAN网络
- snmp-cmds 系列工具命令
- RabbitMQ None of the specified endpoints were reachable 错误 解决方案
- 毛球科技论述区块链之符号理论(上)
- 索尼入局汽车市场,新能源汽车将成主流
- BMP280读不出数据(附驱动),数据一直不变解决方法,硬件I2C
- win7计算机里不显示摄像头,win7没有摄像头图标怎么办|win7显示摄像头图标的方法...
- Python与医疗图像4
- redis之地理位置
- 最近发现了一个高清计算机电子书和源码的网址
- UE4_Android打包流程注意及问题总结
热门文章
- 大数据之-Hadoop3.x_MapReduce_切片机制与MapTask并行度决定机制---大数据之hadoop3.x工作笔记0102
- python_程序格式_缩进_行注释_段注释---python工作笔记012
- AndroidStudio_Gradle介绍以及在androidstudio中的使用---Android原生开发工作笔记76
- IOS学习笔记02---语言发展概述,计算机语言简介.
- 小程序-读取视频数据 每个N帧采样保存
- VC创建可隐藏文件夹的方法
- et200sp模块接线手册_格力变频空调模块常见故障处理。
- win32开发(简单绘图)
- 随想录(我们的竞争力)
- linux下的C语言开发(线程互斥)