HTML & JavaScript编码规范
- 1 -
HTML & JavaScript编码规范
1. 简介
1.1 总则
本规范是翰子昂实训体系编码规范系列中的一部分。翰子昂实训体系编码规范系列包括C语言编码规范，HTML与JavaScript编码规范，JAVA编码规范，C#编码规范，ASP.NET编码规范，SQL Server编码规范，Oracle编码规范。
编码规范用于提供统一编码标准，旨在指导翰子昂实训体系学生的源代码文件的规范化，以保证开发团队的协作和系统的后期维护能有效进行，编码规范同时可作为代码评审的依据。
1.2 目的
本规范提供一个HTML与JavaScript编码的统一标准，目的在于在软件开发过程中基于HTML与JavaScript的代码在整个开发团队中能够始终保持一致。
1.3 适用范围
本规范适用于翰子昂实训体系内所有应用HTML与JavaScript代码的项目开发与评审活动。
2. 格 式
2.1 缩进
1. 最高一级的父标记采用左对齐顶格格式书写。
2. 下一级标记采用左对齐向右缩进一个TAB的格式书写。再下一级依此类推，分别左对齐相对于父标记向右缩进一个TAB的格式书写。
3. 同一级标记的首字符上下必须对齐。
4. 首行缩进不要使用空格来达到效果，规范的做法是在样式表中定义p {text-indent: 2em;} 然后给每一段加上
标记，注意，一般情况下，请不要省略
结束标记 。
2.2 排版
1. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
2. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用< br> 来人工干预分段。
3. 所有的字号都应该用样式表来实现，禁止在页面中出现标记。 4. 请不要在网页中连续出现多于一个的空格，也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent，padding，margin，hspace，vspace 以及透明的gif图片来实现。
5. 中英文混排时，我们尽可能的将英文和数字定义为verdana和arial两种字体。
- 2 -
HTML & JavaScript编码规范
6. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%。
2.3 标记换行
一个标记必须占用一行。不得出现两个标记在同一行的情况（同一标记的关闭标记除外）。 例如：
#001 text 而必须写成：
#001 #002 text #003 2.4 属性赋值
对于接受属性的标记，属性值必须使用双引号或者单引号包围。如：
#001
2.5 标记关闭
1. 静态文件内容必须包含在
标记中间 2. 标记必须包含在标记中间 3. 对于需要关闭的标记，如：
<body><p><textarea><select><font><option> 必须同其关闭标记同时出现。如： </p><p> <body>…<p>…<font>…</font>…</p>...</body> 4. 不得出现交叉包含的语句，如： <p><font>…</p></font> </p><p>3. 命名规则 </p><p>所有的标识符只能用字母（A-Z或a-z）和数字（0-9）。不能有货币符号或者其他非 ASCII字符。 </p><p>3.1 目录、文件命名规范 </p><p>1. 在网站根目录中开设images、common子目录，根据需要再开设media子目录。 ? images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner条、菜</p><p>单、按钮等等； </p><p>? common子目录中放css、js、include等公共文件或目录； ? temp子目录放客户提供的各种文字图片等原始资料； ? media子目录中放多媒体文件。 </p><p>2. 目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、</p><p> </p><p>HTML & JavaScript编码规范 </p><p>- 3 - </p><p>空格和特殊字符；目录的命名请尽量以有意义的英文为指导，多个英文组合，以下划线“_”分隔。 </p><p>3.2 HTML控件命名规范 </p><p>1. 各种标签、控件均采用小写字母； </p><p>2. 各种页面对象如text输入框、按钮、下拉选择框在命名时必须使用以下对应前缀： ? text输入框：txt ? button按钮：btn ? select下拉选择框：sel ? option项：opt ? form表单：frm ? frame框架：fra ? hidden表单项：hdn ? div标记：div ? span标记：span ? 对话框对象：dlg ? 窗口对象：win </p><p>3.3 JavaScript变量命名规范 </p><p>1. 常量以及全局变量名必须全部使用大写字母； 2. 变量名首字母必须小写； </p><p>3. 变量名必须使用其类型的缩写字符串开始。各种类型的缩写字符串如下： ? 整型变量：int ? 长整型变量：lng ? 浮点型变量：flt ? 双精度变量：dbl ? 对象引用变量：obj ? 字符串变量：str ? Date类型变量：dtm </p><p>4. 变量名必须采用有意义的单词命名，如： strUserName、lngArrayIndex </p><p>5. 变量名除首字母小写外，其他单词首字符必须大写； </p><p>6. 如果变量名过长可以使用单词缩写，除了被广泛了解的单词缩写以外，所有使用单词缩写的变量名必须在定义时给出注释，如： </p><p>var strAdName //用于表示Administrator帐户的名称 </p><p> </p><p>- 4 - </p><p> </p><p>HTML & JavaScript编码规范 </p><p>var strAdminName //不用给出注释，Admin被广泛了解。 </p><p>3.4 函数及子过程命名规范 </p><p>1. 函数命名必须使用动词＋名词对的方式，并且能够体现函数的功能； 2. 函数命名的动词前缀必须是同函数功能相关的完整动词； </p><p>3. 函数命名第一个单词的首字母小写，后面每一个单词的首字母大写。 </p><p>4. 注 释 </p><p>4.1 要求 </p><p>1. 注释内容应根据客户要求的语言编写。原则上，除常量、变量、变量类型等以外的说明尽可能采用中文注释； </p><p>2. 注释不要重复代码； </p><p>例如：var str String; //声明一个String对象：str </p><p>上面的代码看上去没有问题，但是注释却是没有用的——只是对代码的简单重复。要记住，注释是用来说明代码的，而不是重复代码的； </p><p>3. 在维护代码的同时，维护相关注释； 4. 对于JavaScript在编写代码之前，编写注释； 编写注释有助于仔细地思考代码逻辑。 5. 注释是用来说明要做什么，而不是如何做； </p><p>6. 程序发布时，须使用代码混淆器混淆与压缩JavaScript代码。 </p><p>4.2 HTML注释说明 </p><p>1. HTML注释用 #008 <head> #009 … </p><p>HTML & JavaScript编码规范 </p><p>- 5 - </p><p>4.3 JavaScript注释说明 </p><p>单行注释“//”，用来注释变量； </p><p>多行注释“/* */”用来注释方法、函数、算法、参数等。 </p><p>5. 编 码 </p><p>5.1 HTML头（HEAD区）内容 </p><p>5.1.1 注明网页显示字符集 </p><p>例如： 简体中文： </p><p>#001 <META HTTP-EQUIV=\#002 charset=gb2312\英 语： </p><p>#001 <META HTTP-EQUIV=\#002 charset=iso-8859-1\5.1.2 设置站点版权信息 </p><p>例如： </p><p>#001 <meta name=\翰子昂信息技术有限公司版权所有，未经许可， #002 严禁转载\5.1.3 加载JavaScript文件 </p><p>JavaScript代码尽量保存为单独的文件，在HTML页面中加载， 例如： </p><p>#001 <script src=\5.1.4 设置页面CSS </p><p>例如： </p><p>#001 <LINK href=\ 5.1.5 注明网页标题 </p><p>例如： </p><p>#001 <title>翰子昂信息服务网首页 5.1.6 表格
1. 表格的嵌套尽量控制在三层以内，并且应该尽量避免使用和两个标记，经验表明，这两个标记会带来许多麻烦。
本文来源：https://www.bwwdw.com/article/5022.html