WEB前端编码规范
上传人：文***
文档编号：25508059
上传时间：2021-07-26
格式：DOCX
页数：47
大小：657.68KB
收藏
版权申诉
举报
下载
第1页 / 共47页
第2页 / 共47页
第3页 / 共47页
资源描述：
和<TITLE>是不同的标签。
具体规范如下：
1. 文件定义
<!DOCTYPE html PUBLIC -"//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="">
<head>
<meta http -equiv="Content -Type" content="text/html; charset=utf -8" />
</p>
<p >4、
2. 网站 head 区代码规范：
head 区是指 <head>和</head> 之间的内容。必须加入的标签：
2.1 公司版权注释
<!---
文件： XXX.html
说明：说明本 HTML 是用于什么功能
作者：李四
时间： 2016/1/30
--->
2.2 网页显示字符集
简体中文 ： <meta http-equiv="Content-Type" content="text/html;
charset= utf-8 ">
繁体中文： <me</p>
<p >5、ta http-equiv="Content-Type" content="text/html;
charset= BIG5">
英 语： <meta http-equiv="Content-Type" content="text/html; charset= iso-8859-1 ">
2.3 作者与版权信息
此处用于存储开发公司版权信息，如：
<meta name="author" content="">
<meta name="copyright" content=", 版权所有 "/>
2.4 网页的 c</p>
<p >6、ss,javascript 规范
在引用 CSS和 JS文件时，统一放置在 <head></head> 中，先放 CSS引用，再放 js 引用。
<link href="style/style.css" rel="stylesheet" type="text/css" />
html 中 javascript 的书写：
<script language="javascript" type="text/javascript"></script>
2.5 网页标题
Title 中使用“ - ”分割，如：设备管理平台 - 运维系统</p>
<p >7、。
2.6 设置搜索关键词
<meta name="keywords" content=" " />
百度关键词搜索指数： ，在这个工具里， 可以看到一些常用关键词的每日搜
索次数。
热门词汇，目前收索量最多的词汇。可以查看百度热词榜，
Google AdWords 关键字工具：查询特定关键词的常见查询及扩展匹配。
KEYWRODS关键字最多不超过 5 个建议长度：小于等于 100 个汉字，如果使用的网页编码是 UTF-8，不同关键字之间用英文“ , ”分隔。
2.7 网站简介
</p>
<p >8、
<meta name="description" content=" " />
description 是描述网页内容的， 因此最好是可以用一句话来概括本网页的
主题内容。
description 不要超过 255 个字符，搜索引擎索引一般都会索引 Description 的前 255 个字符，因此，这 255 个字符是做搜索引擎优化的关键。
如果使用的网页编码是 UTF-8，那么在 Description 中的标点符号最好都使
用英文，例如英文的逗号、句号等。如果是中文的话，那么就使用中文的标点符
号即可。
2.</p>
<p >9、8 其它标签 [ 非必需 ]
1. 设定网页的到期时间。 一旦网页过期， 必须到服务器上重新调阅， 这样有利于页面信息。
<meta http -equiv="expires" content="wed, 26 feb 2009 08:21:57 gmt">
2. 禁止浏览器从本地机的缓存中调阅页面内容。
<meta http -equiv="pragma" content="no -cache">
3. 用来防止别人在框架里调用你的页面。
<meta http -equiv="window -target" content="_to</p>
<p >10、p">
4. 自动跳转。
<meta http -equiv="refresh" content="5;url="> 5 指时间停留 5 秒。
5. 网页搜索机器人向导 . 用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<meta name="robots" content="none">
CONTENT的参数有 all,none,index,noindex,follow,nofollow 。默认是 all 。
6. 收藏夹图标
<link rel="shortcut icon" href="/favicon.i</p>
<p >11、co" type="image/x -icon"/> 图片大小 16px*16px
7. 订阅 RSS浏览
是一种描述和同步网站内容的格式。用户可以通过 RSS阅读器订阅。
<link href= ”abc.aspx” title= ”新现代教育网” type=”application/rss+xml ” rel= ”alternte ” />
2.9 完整示例
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>12、
3. html 中元素的书写：
<body>区域标签
3.1 段落
段落使用 <p> 标签进行定义。
<p>This is a paragraph</p>
3.2 标题
即正文标题一般用 <h1></h1>标签，最好和 title 标签的内容有关联。
标题使用 <h1> 至 <h6> 标签进行定义。 <h1> 定义最大的标题。 <h6> 定义
最小的标题。
<h1>This </p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>13、is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
文章中的小标题一定也要加粗。
可以把网页中的重要内容做成这样。 用户不用登陆这个网页就可看到更新的内容。
3.3 字体的设置标签
换行： <br/>
字体修饰不要使用 <font><strong</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>14、> 等进行标注，一般使用 css 样式进行字体
样式排版
3.4 注意事项
1.<body> 为了保证浏览器的兼容性 ，必须设置页面背景：
<body bgcolor="#FFFFFF">
2. 关 所有的
打开的 必 关 ，例如 <p></p>，当然 有一种关 方式，如： <br/> 。
即：一定要有 束 。
3. 属性 用双引号 “” 括起来 , 属性 一使用小写
例如： <img height="60" width="760" src="images/lo</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>15、go.gif"/>
4. 所有的属性
不正确的写法： <input ⋯⋯ checked />
正确的写法 ： <input ⋯⋯ checked= "checked"/>
5. 要合理嵌套
不正确的写法： <div><h1> </div></h1>
正确的写法 ： <div><h1></h1></div>
7. 特殊字符用
如 " <" 用 "<" 表示， " >" 用 ">" 表示。
8. 网 中 片 化
一定要加 alt 属性，al</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>16、t 属性指定了当 片不能 示的 候就 示供替 文本。 内容最好与关 相关。
如： <img src="images/logo.gif" alt=" 网站 LOGO"/>
一些小 最好用 .png 或 .gif 格式 片，比如 箭 ，文章列表前的 等，在 CSS中做成背景。 些小 最好做一 片，用 CSS来定位。
9. 用 构化的元素 出内容
<ul>
<li>新现代 </li>
<li>新现代 </li>
<li>新现代 </li>
</ul>
或者使用
<dl>
<dt><</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>17、/dt>
<dd></dd>
</dl>
10． 标签要有缩进，便于代码阅读修改 。
11、 tr 、td 必须定义在 table 之间；
<table>
<tbody>
<tr>
<td> ⋯⋯ </td>
⋯ .
</tr>
</tbody>
</table>
注： tbody 绝对不可以省略 。
12、 button 按钮必须定义在 form 之间，否则 netscape 不支持；
<form action= ”⋯⋯” method= ” post ”</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>18、>
<input type= ” button ” name= ” but ” value= ” back ”> </form>
13、 html 注释
(1) 每一独立部分都要表明注释。例如：
<! —右边 begin--> <!-- 右边 end-->
<! —左边 begin--> <! —左边 end-->
块代码的注释
<! —头部 begin-->
大量代码块，使用此种样式，方便阅读
<! —头部 end-->
(2) 注释要用描述性语言，能够清楚的表达每一部分的意思。
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>19、
4. HTML 元素的排序规则
能够使用的 HTML元素包括： div 、p、ul 、table 、span、input 、select 等。基本上 div 、table 、ul 、p 都属于结构性比较强的元素，而 span、input 则是比较弱的元素，因此不允许有 span 嵌套 div 、 table 等等的情况出现， span 可以嵌套 input, 可以嵌套 span。
在写页面的时候可以先不考虑界面呈现， 按照这样的规则， 把数据直接绑定到 HTML元素的节点上。
5. 九大原则
原则一：
一般要写兼容多种浏览器的</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>20、网页， 最省事的方法就先写适合 chrome 的样式，并在 chrome 进行调度。测试时可以使用多种浏览器。
原则二：
逐步叠加的方式，如果需要用这个样式的模块很多， 并且会存在些许的不同，千万不要把样式一步写到位， 最好把框架性的先写好， 细节性的留到第二个步骤，甚至第三个步骤，当然最好步骤不要超过三步，这样很不利于维护。
由若干个二级定义对一级定义进行补充， 这样的既可以减少代码， 又可以减少繁多的 CLASS命名。
不要轻易修改共用的 CSS，否则可能会影响其它页面。
在每个一级 CSS前添加注释，说明哪些页面使用了该 CSS。
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>21、
原则三：
从总到分。顺序应该是这样：总体需要用到的 >>结构 >>模块 >>二级模块 >> 细节；并且这个文档最不容易修改的处于最上端， 频繁用于修改的在末端。 最忌讳即兴发挥， 这样写出的东西经不起推敲， 稍有变化就要忙得乱成一团。 结构性的东西应该慎重精细。
原则四：
尽量把能够放在一组的小图标或者图片放在一个图片文件里， 这样的好处有很多。
1、 图片文件的总量会变小；
2、利于下载，太多的小图片下载效果是不理想的，常常会发现这个图片出
来，那个没出来， 这样在写样式的时候只需要写一个总体的， 对于具体的要显</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>22、示
的只需要标一个位置，非常省时间，样式也很精炼；
3、 显而易见，这样做非常便于管理，替换或新增的时候工作量很小。
原则五：
切图的原则， 应该切大的图绝不切小， 应该切小的绝不切大， 能够用颜色代替的绝不切图。 把一个大图切成很多份并不一定能够加快页面的显示速度， 相反会浪费很多不必要的带宽。 不光要控制图片文件的多少， 还要考虑到这样切会不会造成页面增加许多额外的代码。
原则六：
图片使用能名称表达图片意义的名词命名，尽量不要使用编号命名。
原则七：
涉及多行多列的特别是列宽有不固定的，坚决用表格，千万不要为</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>23、了 DIV
而 DIV。
多个图片规则排列时，可以使用 <dl><dt></dt><dd></dd></dl> 。
原则八：
尽可能不把样式直接写到元素的标签里（ 除非这个样式出现的几率特别小，有相当程度的偶然性 ）。
原则九：
尽量不要用 ID 来定义或索引样式， ID 的唯一性比较高，且用 ID 索引样式
效率非常低而且兼容性的问题也比较明显。
6．文件命名原则
6.1 前台文件组织
在前台页面文件中，每个大类功能</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>24、模块（子系统）单独创建一个文件夹，使
用与之相关的有意义的英文名词命名。 例如有一个系统包括后台管理 （admin）、
前台商城（ shop）、会员中心（ member）和商家中心（ store ）等子系统，文件
夹组织：
每个子系统中应该包含一个缺省的 html 文件，文件名统一用 index.html ，即当用户缺省访问该目录时，自动加载该页面。
公用页面（如登录 login.html 、页头 header.html 、页脚 footer.html 、导
航 navigation.</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>25、html 、菜单 menu.html 、信息 / 错误提示 message.html 等），可以统一放在 common目录中。
6.2 页面命名规则
具有管理功能的页面，如用名、角色、设备、日志、文章等的管理，可以归
纳为列表（ list.htm ）、新建（ add.html ）、编辑（ edit.html ）等几类操作，
所以在页面组织时， 每类模块单独创建一个文件夹， 使用能够表达模块意义的英
文名词命名，并在其中分别创建 list.html 、add.html 、 edit.html 等文件，对
应于内容列表、添加、编辑等操作。</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>26、示例：
其它说明：
1. 在列表页面里统一使用“四栏式”显示风格，即列表页面里必须包括模块目录 / 位置提示、工具栏（含添加、编辑、删除、刷新、查询等操作控件）、表格、分页操作等部分。示例：
2. 表格用于显示查询内容，在 list.html 打开时，必须默认加载一定的记录；表格栏目仅</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>27、显示用户常用或关心的字段； 在显示时必须对表格内容进行必要的格式处理；对记录常用的操作可以放置于操作栏内 （如上图中的操作栏内放置有编辑和删除两个操作按钮）。
3. 表格可以统一使用 easyui datagrid 或 bootstap data tables 。
6.3. 资源文件的命名原则
资源文件包括 css 、js 、图片等内容。所有资源文件统一存储在 web 根目录
resource 文件夹中。示例：
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>28、
每个子系统（大类）文件夹命名规则同 6.1 规则。
每个子系统文件夹中分别包括 css 、 js 和 images，示例：
多个子系统公共使用的资源，统一存储在 common文件夹中，如常用的 js 操作，可以命名为 generic.js ，放置在 common/js/generic.js 。
6.3 图片命名规则
图片分成两部分， 一是网页设计时使用的静态资源， 通常不会因系统的运行而发生变化，另一类是程序生成、用户上传、终端上传的图片。
（</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>29、1）静态图片存储在 大类目录 \images 中，使用能表达图片意
义的英文单词命名， 不能使用图片编号命名。 网面使用的小图标， 可以放置在一个图片文件中，使用 css 裁切和背景方式显示在页面中。
（2）动态图片存储在 resources\upload 目录中，在其中创建分类图片目录。
例如，与系统相关的图片存储在 system 目录中，设备监控相关图片存储在
management 中等。为了避免同一文件夹中文件数量限制，在分类目录中，按上
传日期分成不同的次级目录， 命名规则为上传文件所在的 yyyyMM（年度月份），其中月份使用</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>30、两位数字表示。例如：
上传的图片统一使用 GUID标识进行命名， 即在上传时，由接收的 java 程序自动生成 guid 编号 +. 图片扩展名进行命名。
注意：保存图片时，文件扩展名必须保持不变。示例：
7. 常用 HTML标识符
HTML 标记一览 :
标记
类型
译名或意义
作 用
备注
文件标记
<HTML>
●
文件声明
让浏览器知道这是 HTML 文件
<HEAD>
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>31、●
开头
提供文件整体资讯
<TITLE>
●
标题
定义文件标题，将显示于浏览顶端
<BODY>
●
本文
设计文件格式及内文所在
排版标记
<!-- 注解 -->
○
说明标记
为文件加上说明，但不被显示
<P>
○
段落标记
为字、画、表格等之间留一空白行
<BR>
○
换行标记
令字、画、表格等显示于下一行
<HR>
○
水平线
插入一条水平线
<CENTER>
●
居中
令字、画、表格等显示于中间
反对
<PRE>
●
预设格式
令文件按照原始码的排列方式显示
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>32、<DIV>
●
区隔标记
设定字、画、表格等的摆放位置
<NOBR>
●
不折行
令文字不因太长而绕行
<WBR>
●
建议折行
预设折行部位
字体标记
<STRONG>
●
加重语气
产生字体加粗 BOLD 的效果
<B>
●
粗体标记
产生字体加粗的效果
<EM>
●
强调标记
字体出现斜体效果
<I>
●
斜体标记
字体出现斜体效果
<TT>
●
打字字体
COURIER字体，字母宽度相同
<U>
●
加上底线
加上底线
反对
<H1>
●
一级标题标记
变</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>33、粗变大加宽，程度与级数反比
<H2>
●
二级标题标记
将字体变粗变大加宽
<H3>
●
三级标题标记
将字体变粗变大加宽
<H4>
●
四级标题标记
将字体变粗变大加宽
<H5>
●
五级标题标记
将字体变粗变大加宽
<H6>
●
六级标题标记
将字体变粗变大加宽
<FONT>
●
字形标记
设定字形、大小、颜色
反对
<BASEFONT> ○
基准字形标记
设定所有字形、大小、颜色
反对
<BIG>
●
字体加大
令字体稍为加大
<SMALL>
●
字体缩细
令字体</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>34、稍为缩细
<STRIKE>
●
画线删除
为字体加一删除线
反对
<CODE>
●
程式码
字体稍为加宽如 <TT>
<KBD>
●
键盘字
字体稍为加宽，单一空白
<SAMP>
●
范例
字体稍为加宽如 <TT>
<VAR>
●
变数
斜体效果
<CITE>
●
传记引述
斜体效果
<BLOCKQUOTE>●
引述文字区块
缩排字体
<DFN>
●
述语定义
斜体效果
<ADDRESS>
●
地址标记
斜体效果
<SUB>
●
下标字
下标字
<SUP>
●
上标字
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>35、
指数（平方、立方等）
清单标记
<OL>
●
顺序清单
清单项目将以数字、字母顺序排列
<UL>
●
无序清单
清单项目将以圆点排列
<LI>
○
清单项目
每一标记标示一项清单项目
<MENU>
●
选单清单
清单项目将以圆点排列，如 <UL>
反对
<DIR>
●
目录清单
清单项目将以圆点排列，如 <UL>
反对
<DL>
●
定义清单
清单分两层出现
<DT>
○
定义条目
标示该项定义的标题
<DD>
○
定义内容
标示定义内容
表格标记
<TA</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>36、BLE>
●
表格标记
设定该表格的各项参数
<CAPTION>
●
表格标题
做成一打通列以填入表格标题
<TR>
●
表格列
设定该表格的列
<TD>
●
表格栏
设定该表格的栏
<TH>
●
表格标头
相等于 <TD>，但其内之字体会变粗
表单标记
<FORM>
●
表单标记
决定单一表单的运作模式
<TEXTAREA> ●
文字区块
提供文字方盒以输入较大量文字
<INPUT>
○
输入标记
决定输入形式
<SELECT>
●
选择标记
建立 POP-UP 卷动清单
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>37、
<OPTION>
○
选项
每一标记标示一个选项
图形标记
<IMG>
○
图形标记
用以插入图形及设定图形属性
连结标记
<A>
●
连结标记
加入连结
<BASE>
○
基准标记
可将相对 URL 转绝对及指定连结目标
框架标记
<FRAMESET> ●
框架设定
设定框架
<FRAME>
○
框窗设定
设定框窗
<IFRAME>
○
页内框架
于网页中间插入框架
IE
<NOFRAMES> ●
不支援框架
设定当浏览器不支援</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>38、框架时的提示
影像地图
<MAP>
●
影像地图名称 设定影像地图名称
<AREA>
○
连结区域
设定各连结区域
多媒体
<BGSOUND>
○
背景声音
于背景播放声音或音乐
IE
<EMBED>
○
多媒体
加入声音、音乐或影像
其他标记
<MARQUEE>
●
走动文字
令文字左右走动
IE
<BLINK>
●
闪烁文字
闪烁文字
NC
<ISINDEX>
○
页内寻找器
可输入关键字寻找于该一页
反对
<META>
○
开头定义
让浏览器知道这</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>39、是 HTML 文件
<LINK>
○
关系定义
定义该文件与其他 URL 的关系
STYLESHEET
<STYLE>
●
样式表
控制网页版面
<SPAN>
●
自订标记
独立使用或与样式表同用
注：
? ● 表示该标记属围堵标记，即需要关闭标记如 </ 标记 >。
? ○ 表示该标记属空标记，即不需要关闭标记。
? IE 表示该标记只适用于 INTERNET EXPLORER。
? NC 表示该标记只适用于 NETSCAPE COMMUNICATOR。
? 反对 表示该标记不为 </p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>40、W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择。
弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，
不用担心新浏览器不支援旧标记。
第二部分 CSS编码规范
1. 基本书写规范
1.1 所有的 CSS的尽量采用外部调用
<LINK href="/style/style.css" rel="stylesheet" type="text/css">
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>41、
书写时重定义的最先，伪类其次，自定义最后（其中
a:hover a:actived 要按照顺序写）便于自己和他人阅读。
a:link a:visited
为了保证不同浏览器上字号保持一致，字号建议用点数
pt
和像素
px
来定
义，pt 一般使用中文宋体的 9pt 和 11pt ，px 一般使用中文宋体 12px 和 14.7px
这是经过优化的字号，黑体字或者宋体字加粗时，一般选用
11px 和 14.7px
的
字号比较合适。
字</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>42、体选择： 优先使用微软雅黑，其次为宋体，可以统一在自定义样式中，不需要重复定义字体。如：
body 中定义 ，而
1.2 CSS 推荐模板
body
{
font-size
: 9pt
; font-family
: Arial, Helvetica, sans-serif
; color
: #333333
; text
-align
: center
;
margin
: 0px ;}
ul {</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>43、 margin
: auto
; }
img
{
border
: 0px
;
}
a { font-size
: 9pt ; text-decoration
: none
; color
: #FFFFFF
;
}
a:hover
{
font-size
: 9pt ; text-decoration
: underline
; color
: #990000
; }
a.1 { font-size
: </p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>44、9pt
; color
: #3366cc
; text-decoration
: none }
a.1:hover
{
font-size
: 9pt
;
color
: #FF9900
;
text-decoration
: none
}
.colorblue,colorblue:hover
{ color
: #003366
;} .blue
{
font-family
: " 宋体 " ;
font-si
ze : 9pt ; line-height
: 20px
;
color
: #0099FF
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>45、;
letter-spacing
: 5em }
.colorRed,a.colorRed:hover
{ color
: #FF0000
; } .colorLime,a.colorLime:hover
{ co
lor : #00FF00
; } .colorGreen,a.colorGreen:hover
{ color
: #008000
; } .colorBlue,a.c
olorBlue:hover
{ </p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>46、 color
: #0000FF
; } .colorOrange,a.colorOrange:hover
{ color
: #FF
A500 ; }
为了保证浏览器的兼容性，必须设置页面背景
<body bgcolor="#FFFFFF">
1.3 CSS 注释写法
在定义的 CSS文件顶部添加文件说明、作者、时间等说明，如例：
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>47、
一级 CSS上面必须加上注释，说明样式的用处。必要时可以添加作者、创建时间、修改人、修改时间。示例：
2.CSS命名参考
CSS文件名统一使用小写英文单词命名。
样式定义变量统一使用 class 命名方式，不建议使用 id 命名方式 。如下图中，使用“ . ”定义的样式为 class 命名方式，使用“ #”引导的样式为 id 命名方式。 Id 命名方式仅针对于 html 中使用 id 定义的元素，通常复用性较差。
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>48、
2.1 常用的 CSS命名规则：
头： header
内容： content/container
尾： footer
导航： nav
侧栏： sidebar
容 器： container/box
主 导 航： mainNav
子 导 航： subNav
顶 导 航： topNav
网站标志： logo
大 广 告： banner
页面中部： mainBody
菜 单： menu
菜单内容： menuContent
子 菜 单： subMenu
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>49、
子菜单内容： subMenuContent
搜 索： search
搜索关键字： keyword
搜索范围： range
标签文字： tagTitle
标签内容： tagContent
当前标签： tagCurrent/currentTag
标 题： title
列 表： list
当前位置： currentPath
图 标： icon
注 释： note
登 录： login
注 册： register
栏目： column
列 定 义： column_1of3 ( 三列中的第一列 </p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>50、)
column_2of3 ( 三列中的第二列 )
column_3of3 ( 三列中的第三列 )
2.2 直观命名
当在设计 Web页面以及需要对一个 div 进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。如：
自上而下分组： top-panel
横向导航： horizontal-nav
左面边栏： left-side
中心 - 栏目： center-column
右面： right-col
2.3 CSS 复用
不需要重复定义可继承的值，子元素自</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>51、动继承父元素的属性值，象颜色、
字体等，已经在父元素中定义过的， 在子元素中可以直接继承， 不需要重复定义，除非是为了更变当前元素样式不使用父元素的属性值， 但是要注意， 浏览器可能用一些默认值覆盖你的定义。
2.4. 多重 CSS样式定义
CSS属性追加重复最后优先原则， 即一个标签可以同时定义多个 class ，也可以是同一个 class 中重复定义属性。例如：
先定义两个样式
.one{width:200px;background:url() no-repeat left top;}
.two{border:</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>52、10px solid #000; background:url() no-repeat left top;}
在页面代码中，我们可以这样调用 :
<div class=one two></div>
当应用两个或多个样式时，浏览器所应用的样式根据是属性追加重复最后优先原则。即两个或多个或重复的样式名定义， 浏览器所应用的样式是按先后顺序的，如果定义了重复的属性值， 以最后定义的为准， 如果应用了两个或多个样式名，里面不重复定义的属性值就追加上去， 重复的属性值就以最后一个为准。这里要注意的是， 样式的先后不是根据页面上应用的名字顺序， 而是样式表里的样式顺序。
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>53、
2.5.CSS 作用域
CSS的作用域是通过书写方式来实现的更准确的说法应该叫做选择器如
果你深入了解后， 同样能达到编程思想中的 “命名空间” 、“全局”、“私有”、“继承”等“编程特性”更能体现他特点的也就是他名字中的“层叠样式”。
如下面的 p 的作用域：
/* 作用域：全局 */ p{text-indent:2em;}
/* 作用域： .demo 这个类中 */
.demo p{color:#000000;}
3. CSS 样式书写顺序
3.1 显示</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>54、属性
* display * list -style * position * float * clear
3.2 自身属性
* width * height * margin * padding * border * background
3.3 文本属性
* color * font * text-decoration * text-align
* vertical-align * white-space * other text * content
4. 其它规范
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>55、
4.1 图片样式
禁止用 <img width=? height=?>
代码中的 <img> 标签中不要带上 width
图片往往需要反复的修改。
来人为干预图片显示的尺寸，即在 HTML
和 height 两个属性，因为制作过程中，
但是使用 CSS控制图片大小时， 当网页还未加载图片时， 不会留出图片的占位大小，可能会造成网页在加载过程中抖动 （如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显。
所以当预料到这种会明显导致网页抖动的情况会发生时，务必给 <im</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>56、g> 附上
width 和 height 属性。
4.2 换行
为了最大程度的发挥浏览器自动排版的功能， 在一段完整的文字中请尽量不要使用 <br> 来人工干预分段。
4.3 字体
所有的字号都应该用样式表来实现，禁止在页面中出现 <font size=?> 标
记。
请不要在网页中连续出现多于一个的也尽量少使用全角空格 （英文字符集下，
全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的 gif 图片来实现。</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>57、
中英文混排时，我们尽可能的将英文和数字定义为 verdana 和 arial 两种字体。
行 距 建 议 用 百 分 比 来 定 义 ， 常 用 的 两 个 行 距 的 值 是 line-height:120%/150%.
第三部分 JavaScript 规范
1. 命名规范
1.1 基本原则
规范的命名能使程序更易阅读， 从而更易于理解。 它们也可以提供一些标识功能方面的信息，有助于更好的理解代码和应用。
? 使用可以准确说明变量 / 函数 / 原型 (pro</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>58、totype) 的完整英文描述符。
例如， firstName ，listAllUsers 或 CorporateCustomer 等，避免
使用汉语拼音、不相关单词及汉字进行命名。
? 采用大小写混合，提高名字的可读性。一般应该采用小写字母，但是原型 (prototype) 命名时任意单词的首字母大写。
? 尽量少用缩写 ，但如果一定要使用，当使用公共缩写和习惯缩写等，
如实现（ implement ）可缩写成 impl ，经理（ manager）可缩写成 mgr
等，严禁滥用缩写。
? 避免使用长名字（最好不超过 25 个字母）。
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>59、
? 避免使用相似或者仅在大小写上有区别的名字。
? 避免使用数字，但可用 2 代替 to ，用 4 代替 for 等，如：go2Jsp。此外，若元素 id 包含数字则除外
1.2 Prototype/Method 命名规范
1.2.1 原型 Prototype
所有单词首字母大写。使用能确切反应该原型含义、功能等的词。一般采用名词。
1.2.2 方法 Method/ 函数 Function
方法的命名应采用完整的、能够清楚表达该方法功能的英文描述符，首字母小写，其他单词的首字母大写。 方法名称的第一个单词常常</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>60、采用一个有强烈动
作色彩的 。
取 使用 get 前 ， 使用 set 前 ，判断 使用 is(has) 前 。如
下例所示：
getName()
setSarry()
isLogon()
方法参数建 序： ( 被操作者，操作内容，操作 志，其他⋯⋯ ) 。如下
例所示：
function replace (sourceStr, // 源字串
oldStr, // 被替换字串
newStr){ // 替换为字串
}
1.3 字段命名规范
1.</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>61、3.1 常量
采用完整的英文大写 ， 在 与 之 用下划 接， 如：DEFAULT_VALUE
1.3.2 量
除第一个 外其余 首字母大写。
私有 例 量可使用 _前 ，但在其存取方法中 将其前 去掉。
1.3.3 集合
一个集合，例如数 或 xml 点集合， 采用复数命名来表示 量中存放的是一 象。 命名 采用完整的英文描述符， 名字中所有非首 的第一个字母 大写，适当使用集合 写前 。如下例所示：
集合 量命名示例
var rowNodes = xmlDom.sel</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>62、ectNodes(
“/*/data/row
”);
var aryUsers = []; //
用户列表
1.3.4 特殊值
我们在程序里经常会用到一些量，它是有特定的含义的。例如，现在我们
写一个薪金统计程序， 公司员工有 50 人，我们在程序里就会用 50 这个数去进行各种各样的运算。在这里， 50 就是“特殊值”。当别的程序员在程序里看到 50 这个数，将很难知道它的含义，造成理解上的困难。
在程序里出现“特殊值”会降低程序的可读性、可维护性和可扩展性，故
规定不得出现此类“特殊值</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>63、” 。避免的方法是把“特殊值”定义为一个常量 。注意这个常量的命名应该能表达该数的意义， 并且应该全部大写， 且单词之间使用下划线。例如上面 50 这个数，我们可以定义一个名为 NUM_OF_EMPLOYEES的常量。这样，别的程序员在读程序的时候就可以很容易的理解了。
1.4 异常
必要时，在 javascript 代码段中加入异常捕获代码。 通常情况下不需要自
定义异常原型，仅使用内建 error 对象。
异 常 原 型 由 表 示 该 异 常 类 型 的 单 词 和 Exception 组 成 ， 如
ResponseExceptio</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>64、n 。
异常实例一般使用 e、ex 等，在多个异常时使用该异常名或简写加 E，Ex
等组成，例如： SQLEx、ActionEx 。
1.5 文件命名规范
外部 js 文件一律小写命名。
1.6 命名约定表
操作项
命名约定
示例
参数
使用传递值 /对象的完整的英文描述符。
userID
字段 /属性
字段采用完整的英文描述，第一个字母
firstName
小写，任何中间单词的首字母大写。
布尔型的获取成
所有的布尔型获取函数必须用单词
is isSt</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>65、ring()
员函数
（ has）做前缀。
hasMoney()
采用完整的英文描述符，所有单词的第
原型
一个字母大写。
由表示该异常类型等的单词和 Exception
异常原型名
组成
通常采用字母 e 、ex表示异常。
异常实例名 多个异常时使用异常名或其简写加 E、 Ex 等构成
静 态 常 量 字 段 全部采用大写字母，单词之间用下划线
（常量） 分隔。采用静态常量获取成员函数。
采用完整的英文描述符，第一个字母小
写，但不要隐藏已有字段。例如，如果
局部变量
有一个字段叫 firstName </p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>66、，不要让一个局部变量叫 firstName 。
通常采用字母 i ， j ， k 或者 counter，
循环计数器
index
采用完整的英文描述说明成员函数功
能，第一个单词尽可能采用一个生动的
成员函数
动词，除第一个单词外，每个单词第一
个字母小写。
获取成员函数 被访问字段名的前面加上前缀 get。
设置成员函数 被访问字段名的前面加上前缀 set。
Customer
SQLException
ActionException
e
SQLEx
DEFAULT_NAME
,totalMoney
i,j,k,count,index
openFile()
addUser()
getUserName()
setUserName ()
2. 代码组织与风格
代码组织和风格的基本原则是：利于个人开发</p>
</div>
<div class="readmore" onclick="showmore()" style="background-color: transparent; height: auto; margin: 0px 0px; padding: 20px 0px 0px 0px;"><span class="btn-readmore" style="background-color: transparent;"><em style="font-style: normal">展开</em>阅读全文<i></i></span></div>
<script type="text/javascript">
function showmore()
{
$(".readmore").hide();
$(".detail-article").css({
"height":"auto",
"overflow": "hidden"
});
}
$(document).ready(function() {
var dh = $(".detail-article").height();
if(dh >100)
{
$(".detail-article").css({
"height":"100px",
"overflow": "hidden"
});
}
else
{
$(".readmore").hide();
}
});
</script>
</div>
<script type="text/javascript">
var defaultShowPage = parseInt("3");
var id = "25508059";
var total_page = "47";
var mfull = false;
var mshow = false;
function DownLoad() {
window.location.href='https://www.zhuangpeitu.com/d-25508059.html';
}
function relate() {
$("html,body").animate({ scrollTop: 0 }, 500);
$('#relate').toggle();
if (!mshow) {
var relateScroll = new iScroll("relatelist", { zoom: true, hScrollbar: false, vScrollbar: true, bounce: true, momentum: false });
}
}
</script>
<script> var pre = "https://file7.zhuangpeitu.com/fileroot7/2021-7/18/9f18480f-97c8-4086-bd72-040d5e3c5714/9f18480f-97c8-4086-bd72-040d5e3c5714";
var freepage = parseInt('20');
var total_c = parseInt('47');
var start = parseInt('3');
var adcount = 0;
var adindex = 0;
var adType_list = ";1;2;5;6;7;";
var end = start;
$("#spanpage").text(total_c-start);
function ShowSvg() {
end = start + defaultShowPage;
if (end > freepage) end = freepage;
for (var i = start; i < end; i++) {
var imgurl = pre + (i + 1) + '.gif';
var html = "<img src='" + imgurl + "' onerror=\"this.src='/images/s.gif'\" alt=\"WEB前端编码规范_第" + (i + 1) + "页\" width='100%'/>";
$("#page").append("<div class='page'>" + html + "</div>");
$("#page").append("<div class='pageSize'>第" + (i + 1) + "页 / 共" + total_c + "页</div>");
if(adcount > 0 && adType_list.indexOf(";"+(i+1)+";")>-1)
{
if(adindex > (adcount-1)) adindex = 0;
$("#page").append("<div class='pagead' id='addiv"+(i + 1)+"'></div>");
document.getElementById("addiv"+(i + 1)+"").innerHTML =document.getElementById("adpre" + adindex).outerHTML;
adindex += 1;
}
}
start = end;
$("#spanpage").text(total_c-start);
if (start > (freepage - 1)) {
if(start < total_c)
$("#ftip").html("亲，很抱歉，此页已超出免费预览范围啦！<br/>如果喜欢就下载吧，价低环保！");
else
$("#ftip").html("最后一页预览完了！喜欢就下载吧，查找使用更方便");
if($("#nftip"))$("#nftip").html("此文档不允许下载，在线阅读到最后一页了。");
$("#ntip2").hide();
$("#ntip").hide();
}
}
//$(document).ready(function () {
// ShowSvg();
//});
</script>
<div style="margin:10px 0px; text-align:center;">
<div style="margin: auto; height:300px; overflow:hidden; text-align: center;"><dl class="works-intro gray2 " style="text-align:left;border:solid 1px #ddd;">
<dd style="font-size:14px; padding-left:20px; width:96%; line-height:22px;"><b>温馨提示: </b><br />
1: 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。<br>
2: 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。<br>
3.本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。<br>
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。<br>
5. 装配图网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。<br>
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。<br>
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。<br>
</dd>
</dl></div> </div>
<div class="widget-box pt0" style="border: none;">
<h2 class="h4 widget-box__title">最新文档</h2>
<ul class="taglist--inline multi">
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585958.html" target="_blank">36个关键词详解2025政府工作报告</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585957.html" target="_blank">学习2025年政府工作报告中的八大科技关键词</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585956.html" target="_blank">2025年政府工作报告要点速览接续奋斗共谱新篇</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585955.html" target="_blank">学习2025政府工作报告里的加减乘除</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585954.html" target="_blank">深化农村改革党课ppt课件（20250305）</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585953.html" target="_blank">弘扬雷锋精神凝聚奋进力量学习雷锋精神的丰富内涵和时代价值</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585952.html" target="_blank">深化农村改革推进乡村全面振兴心得体会范文（三篇）</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585951.html" target="_blank">2025年民营企业座谈会深度解读PPT课件</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585950.html" target="_blank">领导干部2024年述职述廉述责述学述法个人报告范文（四篇）</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585949.html" target="_blank">读懂2025中央一号党课ppt课件</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585948.html" target="_blank">2025年道路运输企业主要负责人安全考试练习题[含答案]</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585947.html" target="_blank">2024四川省雅安市中考英语真题[含答案]</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585946.html" target="_blank">2024湖南省中考英语真题[含答案]</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585945.html" target="_blank">2024宁夏中考英语真题[含答案]</a></li>
<li><a class="tag book" href="https://www.zhuangpeitu.com/article/253585944.html" target="_blank">2024四川省内江市中考英语真题[含答案]</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="u-width265 u-floatRight js-sidebar" style="width:265px">
<div id="homeTab2" style="width:265px;margin-top:-12px;">
<div>
<a href="https://www.zhuangpeitu.com/d-25508059.html" class="download" style="background-position-x:50px; text-indent:10px;">点击下载此资源</a>
</div>
<div class="box hot-keywords mt20" style="overflow: hidden; width: 100%; border: solid 1px #dedede;"
id="relatebox">
<div class="boxHd" style="padding-bottom: 0px;">
<h2 class="fl font-normal font16 font-yahei" style="font-size: 16px; font-weight: 100; margin-left: 0px; margin-top: 3px; position: relative; text-indent: 34px; font-family: 微软雅黑">
<svg t="1586227845664" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="https://www.w3.org/2000/svg" p-id="6477" width="20" height="20"
style="position: absolute; left: 10px; top: -1px;">
<path d="M768.1 273.6c-52.9-98.8-155.5-162.1-264.6-162.1-129.8 0-245.2 83.6-285.2 204.9C96.9 350.6 6.9 472.7 6.9 606.4c0 162.9 131.8 300.5 287.8 300.5 12.7 0 23-10.3 23-23s-10.3-23-23-23C163.7 860.9 53 744.3 53 606.4 53 488.9 134 382.1 241.5 358l13.4-3 3.7-13.2c30.3-108.4 131-184.2 244.8-184.2 95.5 0 185.2 57.6 228.7 146.8l5.3 10.8 11.9 1.9C876.8 337 973 451.7 973 583.8c0 150.2-121.5 277.1-265.4 277.1-12.7 0-23 10.3-23 23s10.3 23 23 23c168.8 0 311.4-148 311.4-323.2C1019 433.3 911.9 302.1 768.1 273.6z" p-id="6478" fill="#bfbfbf"></path><path d="M325.9 683.8l172 198.6c4.8 5.6 11.8 8.7 19.1 8.7 7.3 0 14.3-3.2 19.1-8.7l172-198.6-38.3-33.2L540 800.7 540 465l-51 0 0 330.2L364 650.6 325.9 683.8z" p-id="6479" fill="#bfbfbf"></path>
</svg>
相关资源</h2><a style="display:block; position:absolute;right:10px; top:2px; color:#888;font-size:13px;" target="_blank"
rel="nofollow" href="https://www.zhuangpeitu.com/search.html?q=WEB%e5%89%8d%e7%ab%af%e7%bc%96%e7%a0%81%e8%a7%84%e8%8c%83" >更多</a>
</div>
<div id="author-works-list" class="author-works-list bgF">
<div id="xgwendang" style=" line-height:30px; text-align:center;height:460px;border-radius:3px;" >
<div style="padding-top:140px; ">
<div>正为您匹配相似的精品文档</div>
<div><img src="/images/jdt.gif" style=" width:220px; margin: 10px 0px" /></div>
</div>
<script type="text/javascript">
function xg() {
var myiframe = '<iframe scrolling="no" src="https://smart.zhuangpeitu.com/ajax.aspx?type=pc&q=WEB%e5%89%8d%e7%ab%af%e7%bc%96%e7%a0%81%e8%a7%84%e8%8c%83&id=25508059&sign=e942f5db5591aba83e1ace8fbad343b5" style="width:100%; height:460px;;" frameborder="0" enableviewstate="false" ></iframe>';
document.getElementById("xgwendang").innerHTML = myiframe;
}
setTimeout('xg()', 500)
</script>
</div>
</div>
</div>
</div><div class="box hot-keywords mt10" id="box3" style="overflow: hidden;width: 100%; border:solid 1px #dedede;">
<div class="boxHd" style="border: none;padding-bottom: 0px;">
<h2 class="fl font-normal font16 font-yahei" style="font-size: 16px; font-weight: 100;position:relative; text-indent:34px;
margin-left: 0px; margin-top: 3px; font-family: 微软雅黑">
<svg t="1586228055974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="https://www.w3.org/2000/svg" p-id="7665"
width="20" height="20" style="position:absolute;left:10px; top:0px;"><path d="M870 154c-13.1-13.1-30.4-21.8-49.8-24L527.8 97.5c-25.2-2.8-50.3 6-68.3 24l-326 326c-48.7 48.7-48.7 128.5 0 177.2l265.8 265.8c48.7 48.7 128.5 48.7 177.2 0l326-326c17.9-17.9 26.8-43.1 24-68.3L894 203.8c-2.2-19.4-10.9-36.8-24-49.8z m3.2 381.1l-326 326c-15.7 15.7-36.8 24.4-59.3 24.4s-43.5-8.7-59.3-24.4L162.9 595.3c-15.7-15.7-24.4-36.8-24.4-59.3s8.7-43.5 24.4-59.2l326-326c7.9-7.9 18.5-12.3 29.7-12.3 1.5 0 3.1 0.1 4.6 0.3l292.4 32.5c9.6 1.1 18.2 5.2 25 12 6.8 6.8 11 15.5 12.1 25.1l32.5 292.3c1.5 12.8-2.9 25.3-12 34.4z" p-id="7666" fill="#bfbfbf"></path><path d="M723.3 217.7c-45.8 0-83 37.2-83 83s37.2 83 83 83 83-37.2 83-83c0-45.9-37.1-83-83-83z m0 124.5c-22.9 0-41.5-18.6-41.5-41.5s18.6-41.5 41.5-41.5 41.5 18.6 41.5 41.5-18.6 41.5-41.5 41.5z" p-id="7667" fill="#bfbfbf"></path></svg>
相关搜索</h2>
</div>
<input name="ctl00$Content$hiddenCategoryID" type="hidden" id="Content_hiddenCategoryID" />
<div class="hot-keywords-list" style="padding:10px 20px;">
<a target="_blank" rel="nofollow" href="https://www.zhuangpeitu.com/search.html?q=WEB"
class="tag-item ico" title="WEB" hidefocus="true"><span class="ico"><em>
WEB</em></span></a>
<a target="_blank" rel="nofollow" href="https://www.zhuangpeitu.com/search.html?q=%e5%89%8d%e7%ab%af"
class="tag-item ico" title="前端" hidefocus="true"><span class="ico"><em>
前端</em></span></a>
<a target="_blank" rel="nofollow" href="https://www.zhuangpeitu.com/search.html?q=%e7%bc%96%e7%a0%81"
class="tag-item ico" title="编码" hidefocus="true"><span class="ico"><em>
编码</em></span></a>
<a target="_blank" rel="nofollow" href="https://www.zhuangpeitu.com/search.html?q=%e8%a7%84%e8%8c%83"
class="tag-item ico" title="规范" hidefocus="true"><span class="ico"><em>
规范</em></span></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://www.zhuangpeitu.com/js/artDialog-5.0.3/artDialog.min.js"></script>
<script>
var uid = "0";
var obj = null;
function popFolder() {
var html = '<iframe src="/FlexPaper/BookFolderSelect.aspx?id=25508059" scrolling="no" frameborder="0" style="width: 550px; height: 300px"></iframe>';
if (uid == "0") { window.location.href="https://www.zhuangpeitu.com/login.aspx?returl=http%3a%2f%2fwww.zhuangpeitu.com%2fView_renren.aspx%3fid%3d25508059"; return; }
obj = art.dialog({ title: '收藏资源', content: html, cancelValue: '取消',
width: '540', height: '380', skin: 'blue', lock: true,
background: '#666', opacity: .6, duration: 300, fixed: true, left: '50%',
top: '38.2%', zIndex: 1987, resize: true, drag: true
});
}
function CloseMe() {
obj.close();
}
var tp2 = $('#homeTab2').offset().top;
$(window).bind("scroll", function (event) {
var Y = $(this).scrollTop();
if (Y > tp2 && $('#homeTab2').css("position") != "fixed") {
$('#homeTab2').css({
position: "fixed",
width: "265px",
top: "15px",
zIndex: "999"
});
} else if (Y <= tp2 && $('#homeTab2').css("position") == "fixed") {
$('#homeTab2').css({
position: "static",
zIndex: "1"
});
}
});
</script>
</div>
<!-- JiaThis Button END -->
<span id="LabelScript"></span>
</div>
</div>
<script>function popLogin() {
window.location.href = '/login.aspx?returl=http%3a%2f%2fwww.zhuangpeitu.com%2fView_renren.aspx%3fid%3d25508059'; return;
}</script>
<script type="text/javascript">
var objjubao = null;
function jubao() {
var html = '<iframe src="https://www.zhuangpeitu.com/UserManage/ReportBack.aspx?id=25508059&url=vZ7Tt5whIvr/dRdNgGIKyPKNDzA93OKs oH1UA29j7gQz3uKhWEeAHHbezUmCzOpfr4eV4Ghp8M=" scrolling="no" frameborder="0" style="width: 600px; height: 420px"></iframe>';
objjubao = art.dialog({
title: '非法内容有奖举报', content: html,
close: Closejubao, width: '700', height: '470', skin: 'blue', lock: true,
background: '#666', opacity: .6, duration: 300, fixed: true, left: '50%',
top: '38.2%', zIndex: 1987, resize: true, drag: true
});
}
function Closejubao() {
objjubao.close();
}
</script>
<!--foot-->
<div class="bg_100 foot_nav_bg" style=" min-width:1200px;">
<div class="foot_nav">
<a href="https://www.zhuangpeitu.com/h-33.html" target="_blank" >关于我们</a> - <a href="https://www.zhuangpeitu.com/h-34.html"
target="_blank" >网站声明</a> - <a href="https://www.zhuangpeitu.com/h-35.html" target="_blank" >
网站地图</a> - <a href="https://www.zhuangpeitu.com/sitemap.html" target="_blank" >
资源地图</a>
- <a href="https://www.zhuangpeitu.com/friend.aspx" target="_blank" >友情链接</a> -
<a rel="nofollow" target="_blank" href="https://wpa.qq.com/msgrd?v=3&uin=3328566220&site=qq&menu=yes" >网站客服</a>
- <a rel="nofollow" href="https://www.zhuangpeitu.com/h-38.html" target="_blank" >联系我们</a>
</div>
</div>
<div class="bg_100 siteInner_bg" style=" min-width:1200px;">
<div class="siteInner">
<p>copyright@ 2023-2025 zhuangpeitu.com 装配图网版权所有 联系电话：18123376007</p><p><a href="https://beian.miit.gov.cn/" target="_blank"><span><span>备案号:</span></span><span>蜀</span><span>ICP</span><span>备</span><span>2024067431</span><span>号</span><span>-1</span></a> <span>川公网安备51140202000466号</span></p><p><span><span><br /></span></span></p><p><span><span>本站为文档C2C交易模式，即用户上传的文档直接被用户下载，本站只是中间服务平台，本站所有文档下载所得的收益归上传人(含作者)所有。装配图网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私，请立即通知<span>装配图</span>网，我们立即给予删除！</span></span></p>
</div>
</div>
<!--foot end-->
<script type="text/javascript" src="https://www.zhuangpeitu.com/JS/jquery.lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
<script type="text/javascript" src="https://www.zhuangpeitu.com/umeditor/xss.js"></script>
<script>(function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/f0b69d13c371916b96c564bba41b9dae8/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();</script><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?f6f8927201e0ce73292b83a428843c78";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script>
</body>
</html>
《WEB前端编码规范》由会员分享，可在线阅读，更多相关《WEB前端编码规范（47页珍藏版）》请在装配图网上搜索。
1、 XXXX有限公司 XXXXXXXX管理平台 Web 前端代码编写规范 文件状态： 文件标识： [ √ ] 草稿 当前版本： 1.0 [ ] 正式发布 作 者： 李光强 [ ] 正在修改 完成日期： 2016.1.30 XXXXXX 2016 年 1
2、 月 修改历史 修订后 修订人 修订 编号 修订内容简述 版本号 日期 11.0 李光强 起草 2016.1.30 第一部分 HTML 规范 HTML并不是一种编程语言，而是一种标记语言，它没有任何真正的编程语 言中的循环或是流程控制语句。然而， HTML代码的格式和风格是非常重要的，因为要经常对 HTML代码进行维护和修改， 因此 HTML代码必须有很清晰的逻辑结构和布局，而使其易懂和易于维护。 HTML语言是不区分大小写的，但为改善
3、可读性，规定小写所有字母（除最 上一行引用外） 。与 HTML不一样， XHTML对大小写是敏感的，