⽹站前端开发（⽂件,html,js,css）规范⽂档整理
⽹站前端开发(⽂件,html,js,css)规范⽂档整理
摘⾃kupeer⽼师的⽂档，谢谢kupeer⽼师对我的帮助.
第⼀部分：⽂件规范
html表单日期1. tpl, css, js, img⽂件均归档⾄<；系统开发规范>约定的⽬录中;
2. tpl⽂件命名: 英⽂命名, 后缀.html，请重命名与php⽂件同名, 以⽅便后端添加功能时查对应页⾯;
3. css⽂件命名: 英⽂命名, 后缀.css. 共⽤base.css, ⾸页index.css, 其他页⾯依实际模块需求命名.;
4. Js⽂件命名: 英⽂命名, 后缀.js. 共⽤common.js, 其他依实际模块需求命名.
第⼆部分：HTML书写规范
1. ⽂档类型声明及编码: 统⼀为html5声明类型; 编码统⼀为, 书写时利⽤IDE实现层次分明的缩进;
2. ⾮特殊情况下样式⽂件必须外链⾄<head></head>之间;⾮特殊情况下JavaScript⽂件必须外链⾄页⾯底部;
3 引⼊JS库⽂件, ⽂件名须包含库名称及版本号及是否为压缩版, ⽐如-1.7.1.min.js; 引⼊插件, ⽂件名格式为库名称+插件名称, ⽐如kie.js;
4. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由⼩写字母及下划线数字组成, 且所有标签必须闭合; 属性值必须⽤双引号包括;
5. 充分利⽤⽆兼容性问题的html⾃⾝标签, ⽐如span, em, strong, optgroup, label，等等; 需要为html元素添加⾃定义属性的时候, ⾸先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使⽤须以”data-”为前缀来添加⾃定义属性，避免使⽤”data:”等其他命名⽅式;
6. 语义化html, 如 标题根据重要性⽤h(同⼀页⾯只能有⼀个h1), 段落标记⽤p, 列表⽤ul, 内联元素中不可嵌套块级元素;
7. 尽可能减少div嵌套
9. 在页⾯中尽量避免使⽤style属性，即style=”…”，应该尽量使⽤class或者id来定义新的样式，然后再对应的css⽂件⾥⾯修改;
⼀、 细节
---- head区代码规范
head区是指HTML代码的<head>和</head>之间的内容。
必须加⼊的标签：
·公司版权注释 <!--- The site is designed by EHM,Inc 07/2005 --->；
·⽹页显⽰字符集。
简体中⽂：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁体中⽂：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
英 语：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
·⽹页制作者信息 <META name="author" content="webmaster@maketown">
·⽹站简介 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
·搜索关键字 <META NAME="keys" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
· ⽹页的css规范 <LINK href="../css/style.css" rel="stylesheet" type="text/css">
·
⽹页标题 <title>xxxxxxxxxxxxxxxxxx</title>
可以选择加⼊的标签：
·设定⽹页的到期时间。⼀旦⽹页过期，必须到服务器上重新调阅。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08：21：57 GMT">
·禁⽌浏览器从本地机的缓存中调阅页⾯内容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
·⽤来防⽌别⼈在框架⾥调⽤你的页⾯。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
violinist·⾃动跳转。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http：//www.yahoo"> 5指时间停留5秒
·⽹页搜索机器⼈向导。⽤来告诉搜索机器⼈哪些页⾯需要索引，哪些页⾯不需要索引。
<META NAME="robots" CONTENT="none">CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
·收藏夹图标
<link rel = "Shortcut Icon" href="favicon.ico">
·所有的的调⽤尽量采取外部调⽤。
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
·附<body>标签：
<body>标签不属于head区，这⾥强调⼀下，为了保证浏览器的兼容性，必须设置页⾯背景<body bgcolor="#FFFFFF">
⼆、⽹页制作细节 ---- 字体
·在设定字体样式时对于⽂字字号样式和⾏间距应必须使⽤CSS样式表。禁⽌在页⾯中出现 <font size=?> 标记。
·
在⽹页中中⽂应⾸选使⽤宋体。英⽂和数字⾸选使⽤verdana 和arial 两种字体。⼀般使⽤中⽂宋体的9pt 和11pt 或12px 和14.7px 这是经过优化的字号，⿊体字或者宋体字加粗时，⼀般选⽤11pt 和14.7px 的字号⽐较合适。
·为了最⼤程度的发挥浏览器⾃动排版的功能，在⼀段完整的⽂字中请尽量不要使⽤<br> 来⼈⼯⼲预分段。
·不同语种的⽂字之间应该有⼀个半⾓空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要⽤全⾓标点，英⽂字母和数字周围的括号应该使⽤半⾓括号。
·请不要在⽹页中连续出现多于⼀个的 也尽量少使⽤全⾓空格（英⽂字符集下，全⾓空格会变成乱码），空⽩应该尽量使⽤ text-indent, padding, margin, hspace, vspace 以及透明的gif 图⽚来实现。
·⾏距建议⽤百分⽐来定义，常⽤的两个⾏距的值是line-height:120%/150%.
·排版中我们经常会遇到需要进⾏⾸⾏缩进的处理，不要使⽤ 或者全⾓空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每⼀段加上 <p> 标记，注意，⼀般情况下，请不要省略 </p> 结束标记 。
三、⽹页制作细节 ---- 链接
·⽹站中的链接路径全部采⽤相对路径，⼀般链接到某⼀⽬录下的缺省⽂件的链接路径不必写全名，如我们不必这样：<a
href=”aboutus/index.htm”> ⽽应该这样：<a href=”aboutus/”>，所有内页指向⾸页的链接写成<a href=”/”>
·在浏览器⾥，当我们点击空链接时，它会⾃动将当前页⾯重置到⾸端，从⽽影响⽤户正常的阅读内容，我们⽤代
码“javascript:void(null)”代替原来的“#”标记
四、⽹页制作细节 ---- 表格
1px表格
实例如下：
<table border="1" cellspacing="0" width="32" height="32" bordercolor="#000000" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
设置亮、暗边框颜⾊：表格有亮边框（bordercolorlight）和暗边框（bordercolordark）两个属性可以对表格样式设置。
<table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF">
在写 <table> 互相嵌套时，严格按照的规范，对于单独的⼀个<table>来说，<table><tr>对齐，<td> 缩进两个半⾓空格，<td> 中如果还有嵌套的表格，<table>也缩进两个半⾓空格，如果<td>中没有任何嵌套的表格，</td> 结束标记应该与 <td> 处于同⼀⾏，不要换⾏，如我们注意在源代码中不应有这样的代码：
<td><img src=”../images/sample.gif”> </td>
⽽应该是这样的：
<td><img src=”../images/sample.gif”></td>
这是因为浏览器认为换⾏相当于⼀个半⾓空格，以上不规范的写法相当于⽆意中增加⼀个半⾓空格，如果确实有必要增加⼀个半⾓空格，也应该这样写：
<td><img src=”../images/sample.gif”> </td>
⼀个⽹页要尽量避免⽤整个⼀张⼤表格，所有的内容都嵌套在这个⼤表格之内，因为浏览器在解释页⾯的元素时，是以表格为单位逐⼀显⽰，如果⼀张⽹页是嵌套在⼀个⼤表格之内，那么很可能造成的后果就是，当浏览者敲⼊⽹址，他要先⾯对⼀⽚空⽩很长时间，然后所有的⽹页内容同时出现。如果必须这样做，请使⽤ <tbody>标记，以便能够使这个⼤表格分块显⽰
五、⽹页制作细节 ---- 下载速度
⾸页Flash ⽹页⼤⼩应限定在 200K 以下，尽可能的使⽤⽮量图形和来减⼩动画⼤⼩。⾮⾸页静态页⾯含应限定在 70K 左右，尽可能的使⽤背景颜⾊替换⼤块同⾊图⽚。
六、⽹页制作细节 ----
asp标准写法：<!--#include file="inc/index_top.asp" -->
jsp 标准写法：<%@ include file="../inc/index_top..jsp" %>
七、⽹页制作细节 ---- Alt和Title
都是提⽰性语⾔标签，请注意它们之间的区别。
在我们浏览⽹页时，当⿏标停留在图⽚对象或⽂字链接上时，在⿏标的右下⾓有时会出现⼀个提⽰信息框。对⽬标进⾏⼀定的注释说明。在⼀些场合，它的作⽤是很重要的。
alt ⽤来给图⽚来提⽰的。Title⽤来给链接⽂字或普通⽂字提⽰的。⽤法如下：
<p Title="给链接⽂字提⽰">⽂字</p>
<a href="#" Title="给链接⽂字提⽰">⽂字</a>
<img src="图⽚.gif" alt="给图⽚提⽰">
⼋、⽹页制作细节 ---- 缓存
⽹页不会被缓存
·HTM⽹页
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
·ASP⽹页
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
九、⽹页制作细节 ---- 浏览器兼容性
创建站点时，应该明⽩访问者可能使⽤各种 Web 浏览器。在已知的其他设计限制下，尽可能将站点设计为具有最⼤的浏览器兼容性。
⽬前使⽤的 Web 浏览器有⼆⼗多种，⼤多数已发⾏了多个版本。即使您只针对使⽤ Netscape Navigator 和 Microsoft Internet Explorer 的⼤多数 Web ⽤户，但您应明确并不是每个⼈都在使⽤这两种浏览器的最新版本。
您的站点越复杂（在布局、动画、多媒体内容和交互⽅⾯），跨浏览器兼容的可能性就越⼩。例如，
并⾮所有的浏览器都可以运⾏JavaScript。不使⽤特殊字符的纯⽂本页⾯或许能够在任何浏览器中正确显⽰，但⽐起有效地使⽤图形、布局和交互的页⾯，这样的页⾯在美感上可能要差得多。所以，应尽量在最佳效果设计和最⼤浏览器兼容性设计之间取得平衡。
所有的HTML 标签的属性都要⽤单引号或者双引号括起，即我们应该写 <a href=”url”> ⽽不 是 <a href=url>.
⼗、图⽚处理细节 ---- banner
·全尺⼨banner为468X60px，半尺⼨banner为234X60px，⼩banner为88X31px。
·另外120X90，120X60也是⼩图标的标准尺⼨。全尺⼨banner不超过14K。
·普遍的banner尺⼨760X100，750X120，468X60，468X95，728X90，585X140
·次级页的pip尺⼨360X300，336X280
·游标:100X100或120X120
⼗⼀、图⽚处理细节 ---- LOGO的国际标准规范
为了便于INTERNET上信息的传播，⼀个统⼀的国际标准是需要的。实际上已经有了这样的⼀整套标准。其中关于⽹站的LOGO，⽬前有三种规格：
·88*31 这是互联⽹上最普遍的LOGO规格。
·120*60 这种规格⽤于⼀般⼤⼩的LOGO。
·120*90 这种规格⽤于⼤型LOGO。
⼗⼆、图⽚处理细节 ---- 页⾯修饰图⽚处理
图⽚经过优化以加快下载的速度，有较佳的视觉空间效果，⽤图要与页⾯风格、页⾯内容相符；制作精美，细节处理得当
第三部分：CSS规范
1. 编码统⼀为utf-8;
学生个人网页制作html代码css2.公⽤⽂件：协作开发过程中，会引⼊默认的base.css(⾥⾯包括了css reset、常⽤的css间距，css字体，css⼤⼩等，详细参见
base.css)；
3. class与id命名: ，样式名称由 ⼩写英⽂ 、 数字 和 _ 来组合命名, 如i_comment, fontred, width200; 避免使⽤中⽂拼⾳, 尽量使⽤简易的单词组合；命名要语义化, 简明化。
4. 为JavaScript预留钩⼦的命名, 尽量使⽤id属性，可以更快的获取到dom。
5. css属性书写顺序, 建议遵循: 布局定位属性–>⾃⾝属性–>⽂本属性–>其他属性. 此条可根据⾃⾝习惯书写, 但尽量保证同类属性写在⼀起. 属性列举: 布局定位属性主要包括: display 、 list-style 、 position（相应的 top,right,bottom,left） 、 float & clear 、 visibility 和overflow； ⾃⾝属性主要包括: width 、height 、 margin 、 padding 、 border 和 background; ⽂本属性主要包括：color 、 font、text-decoration 、 text-align 、 vertical-align 、 white- space 和其他content; 我所列出的这些属性只是最常⽤到的, 并不代表全部;
6. 书写代码前, 考虑并提⾼样式重复使⽤率;
7. 背景图⽚请尽可能使⽤sprite技术, 减⼩http请求, 考虑到多⼈协作开发, sprite按模块制作;
8. 必须为⼤区块样式添加注释, ⼩区块适量注释;
9. 代码缩进与格式: 建议单⾏书写, 可根据⾃⾝习惯, 后期优化会统⼀处理;
常⽤的CSS命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏⽬：column
页⾯外围控制整体?丫挚矶龋?rapper
左右中：left right center
登录条：loginbar
标志：logo
⼴告：banner
页⾯主体：main
热点：hot
新闻：news抹茶粉的吃法
下载：download
⼦导航：subnav
菜单：menu
⼦菜单：submenu
搜索：search
property形容词友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
⽂章列表：list
提⽰信息：msg
⼩技巧：tips
栏⽬标题：title
加⼊：joinus
指南：guide
div和css的作用分别是什么服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
注释的写法:
/* Header */
内容区
/* End Header */
id的命名:
1)页⾯结构
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论