web前端规范

2018-10-23 本文已影响352人晨曦诗雨

文件规范

1.文件命名规范

文件名统一用小写的英文字母,数字和下划线的组合，其中不得包含汉字，空格和特殊字符。

a. HTML的命名原则

引文件统一使用index.htm index.html index.asp文件名（小写）
各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如：
关于我们 \ aboutus
信息反馈 \ feedback
产品 \ product

b. 图片的命名原则

图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质
例如：广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名： banner
标志性的图片取名为： logo
在页面上位置不固定并且带有链接的小图片我们取名为 button
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu
装饰用的照片我们取名： pic
不带链接表示标题的图片我们取名： title
范例：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg
鼠标感应效果图片命名规范为"图片名+_+on/off"。
例如：menu1_on.gif menu1_off.gif

文件存放位置规范

image.png

2.css书写规范

CSS样式可细分为3类：自定义样式、重新定义HTML样式、链接状态样式。

样式为设计师自定义的新 CSS 样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”
文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例：“ .no12 ”、“ .no12-24 ”
义HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。样式名“HTML标签”例：hr { border: 1px dotted #333333 }
态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。
该样式写法有2种： a.nav:link nav.a:link 第一种只能修饰<a>标签中；第二种可以修饰所有包含有<a>标签的其他标签。

页面内的样式加载必须用链接方式<link rel="stylesheet" type="text/css" href="style/style.css">

3.命名规则

侧栏: sidebar
栏目:column
页面外围控制整体布局宽度: wrapper
登录条：loginbar
子导航：subnav
友情链接：friendlink
版权：copyright
提示信息：msg
小技巧：tips
指南：guild
投票：vote

id的命名:

(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
广告：banner
功能区：shop
标题：title
加入：joinus
状态：status
标签页：tab
当前的: current
小技巧：tips
图标: icon
注释：note
下载：download

4.html 书写规范

网页制作细节 ---- head区代码规范
head区是指HTML代码的<head>和</head>之间的内容。
必须加入的标签

a) 公司版权注释

     <!--- The site is designed by EHM,Inc 07/2005 --->

b)网页显示字符集

 简体中文：<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">

c) 网页制作者信息

  <META name="author" content="webmaster@maketown.com">

d) 网站简介

 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">

e) 搜索关键字

 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">

f) 网页的css规范

<LINK href="../css/style.css" rel="stylesheet" type="text/css">

g) 网页标题

<title>xxxxxxxxxxxxxxxxxx</title>

可以选择加入的标签

a) 设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。

  <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08：21：57 GMT">

b) 禁止浏览器从本地机的缓存中调阅页面内容。

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

c) 用来防止别人在框架里调用你的页面。

 <META HTTP-EQUIV="Window-target" CONTENT="_top">

d) 自动跳转。

 <META HTTP-EQUIV="Refresh" CONTENT="5;URL=http：//www.yahoo.com">  5指时间停留5秒

e) 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

    <META NAME="robots" CONTENT="none">

  CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。

f) 收藏夹图标

 <link rel = "Shortcut Icon" href="favicon.ico">

g) 所有的javascript的调用尽量采取外部调用.

   <SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>

h) 附<body>标签：

 <body>标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景<body bgcolor="#FFFFFF">

5. 网页制作细节 ---- 字体

在设定字体样式时对于文字字号样式和行间距应必须使用CSS样式表。禁止在页面中出现 <font size=?> 标记。

2.在网页中中文应首选使用宋体。英文和数字首选使用verdana 和arial 两种字体。一般使用中文宋体的9pt 和11pt 或12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt 和14.7px 的字号比较合适。

为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用
来人工干预分段。

4.不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。

请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.
排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记。

3. 网页制作细节 ---- 链接

1. 网站中的链接路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：<a href=”aboutus/index.htm”> 而应该这样：<a href=”aboutus/”>，所有内页指向首页的链接写成<a href=”/”>*

在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端，从而影响用户正常的阅读内容，我们用代码“javascript:void(null)”代替原来的“#”标记

4. 网页制作细节 ---- 表格

1px表格 style="border-collapse: collapse"
实例如下：
<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse"
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>标记，以便能够使这个大表格分块显示

5. 网页制作细节 ---- 下载速度

首页Flash 网页大小应限定在 200K 以下，尽可能的使用矢量图形和Action来减小动画大小。非首页静态页面含图片大小应限定在 70K 左右，尽可能的使用背景颜色替换大块同色图片。

6. 网页制作细节 ---- include

asp标准写法
jsp 标准写法 <%@ include file="../inc/index_top..jsp" %>

7. 网页制作细节 ---- Alt和Title

都是提示性语言标签，请注意它们之间的区别。
在我们浏览网页时，当鼠标停留在图片对象或文字链接上时，在鼠标的右下角有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合，它的作用是很重要的。

alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。

用法如下：

   <p Title="给链接文字提示">文字</p>

   <a href="#" Title="给链接文字提示">文字</a>

   <img src="图片.gif" alt="给图片提示">

8. 网页制作细节 ---- 缓存

网页不会被缓存

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

 Response.cachecontrol = "no-cache"

9. 网页制作细节 ---- 浏览器兼容性

创建站点时，应该明白访问者可能使用各种 Web 浏览器。在已知的其他设计限制下，尽可能将站点设计为具有最大的浏览器兼容性。
目前使用的 Web 浏览器有二十多种，大多数已发行了多个版本。即使您只针对使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多数 Web 用户，但您应明确并不是每个人都在使用这两种浏览器的最新版本。
您的站点越复杂（在布局、动画、多媒体内容和交互方面），跨浏览器兼容的可能性就越小。例如，并非所有的浏览器都可以运行JavaScript。不使用特殊字符的纯文本页面或许能够在任何浏览器中正确显示，但比起有效地使用图形、布局和交互的页面，这样的页面在美感上可能要差得多。所以，应尽量在最佳效果设计和最大浏览器兼容性设计之间取得平衡。
所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 <a href=”url”> 而不是 <a href=url>.

10. 图片处理细节 ---- banner

全尺寸banner为468X60px，半尺寸banner为234X60px，小banner为88X31px。
另外120X90，120X60也是小图标的标准尺寸。全尺寸banner不超过14K。
普遍的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140
次级页的pip尺寸360X300，336X280
游标:100X100或120X120

11. 图片处理细节 ---- LOGO的国际标准规范

为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：
8831 这是互联网上最普遍的LOGO规格。
12060 这种规格用于一般大小的LOGO。
120*90 这种规格用于大型LOGO。

12. 图片处理细节 ---- 页面修饰图片处理

图片经过优化以加快下载的速度,有较佳的视觉空间效果，用图要与页面风格、页面内容相符；制作精美，细节处理得当。

6. 注释规范

1. html注释: 注释格式 , '--'只能在注释的始末位置,不可置入注释文字区域;
1. css注释: 注释格式 /这儿是注释/;
1. JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;

7.浏览器兼容性 CSS hack

标识区别：

区别IE6,IE7,IE8,FF。

IE都能识别* ; 标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important; IE6在样式前面加_
IE7能识别*，也能识别!important;
IE8能识别\ 9 例如：background:red \9;
firefox不能识别*，但能识别!important;

8.属性

1.双引号属性值，不要使用单引号。
2.省略type属性。使用style、link、script，不用指定type属性，因为 text/css 和 text/javascript 分别是他们的默认值。
3.省略Boolean属性值。Boolean属性不用添加取值，disabled,checked,selected等。
4.省略url类属性资源协议头。
5.属性顺序。html属性应该按照特定的顺序出现以保证易读性。class->id,name->data-->src,for,type,href->title,alt->aria-,role。
6.多媒体元素添加替代属性。图像增加alt属性，音视频增加替代文字。

9.元素

1.避免冗余标签。
2.避免JS生成标签。
3.段落文字应该用p，避免使用br。
4.列表项放ul,ol,dl,不要使用一系列的div或p。
5.input使用for属性绑定label。
6.使label标签包裹radio或checkbox和他们的文字，不用再使用for属性。
8.form button应制定type类型，使用type="submit"、type="reset"或type="button"。