Web开发规范手册

1，文件名命名规范

文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。

a.  HTML的命名原则\

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

如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示；
每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm  index.html  index.asp；

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

c.  javascript的命名原则

例如：广告条的javascript文件名为 ad.js  弹出窗口的javascript文件名为 pop.js

d.  动态语言文件命名原则

以性质_描述，描述可以有多个单词，用“_”隔开，性质一般是该页面得概要。
范例：register_form.asp   register_post.asp   topic_lock.asp
 

2.  CSS 书写规范

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

1. 样式为设计师自定义的新 CSS 样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样式名 “ . ”+“相应样式效果描述的单词或缩写”例：“ .shadow ”。文字样式样式名“ . no”+“字号”+“行距”+“颜色缩写”例：“ .no12 ” “ .no12-24 ”

2. 以HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。样式名“HTML标签”例：hr { border: 1px dotted #333333 }

3. 态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。该样式写法有2种： a.nav:link    nav.a:link  第一种只能修饰 a标签中；第二种可以修饰所有包含有 a 标签的其他标签。页面内的样式加载必须用链接方式 <link rel="stylesheet" type="text/css" href="style/style.css">

3.类命名规则：

头：header

  内容：content/container

  尾：footer

  导航：nav   

  侧栏：sidebar

  栏目：column

  页面外围控制整体布局宽度：wrapper

  左右中：left right center

  登录条：loginbar

  标志：logo

  广告：banner

  页面主体：main

  热点：hot

  新闻：news

  下载：download

  子导航：subnav

  菜单：menu

  子菜单：submenu

  搜索：search

  友情链接：friendlink

  页脚：footer

  版权：copyright

  滚动：scroll

  内容：content

  标签页：tab

  文章列表：list

  提示信息：msg

  小技巧：tips

  栏目标题：title 加入：joinus

  指南：guild

  服务：service

  注册：regsiter

  状态：status

  投票：vote

  合作伙伴：partner

(二)注释的写法:

  /* Footer */

  内容区

  /* End Footer */

(三)id的命名:

(1)页面结构

  容器: container

  页头：header

  内容：content/container

  页面主体：main

  页尾：footer

  导航：nav

  侧栏：sidebar

  栏目：column

  页面外围控制整体布局宽度：wrapper

  左右中：left right center

(2)导航

  导航：nav

  主导航：mainbav

  子导航：subnav

  顶导航：topnav

  边导航：sidebar

  左导航：leftsidebar

  右导航：rightsidebar

  菜单：menu

  子菜单：submenu

  标题: title

  摘要: summary

(3)功能

  标志：logo

  广告：banner

  登陆：login

  登录条：loginbar

  注册：regsiter

  搜索：search

功能区：shop

  标题：title

  加入：joinus

  状态：status

  按钮：btn

  滚动：scroll

  标签页：tab

  文章列表：list

  提示信息：msg

  当前的: current

  小技巧：tips

  图标: icon

  注释：note

  指南：guild

  服务：service

  热点：hot

  新闻：news

  下载：download

  投票：vote

  合作伙伴：partner

  友情链接：link

  版权：copyright

4. html书写规范

4.1 网页制作细节 head区代码规范

head区是指HTML代码的和之间的内容。

必须加入的标签：

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>

4.2可以选择加入的标签

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">
 

4.3网页制作细节 ---- 字体

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

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

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

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

5. 请不要在网页中连续出现多于一个的   也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding,margin, hspace, vspace 以及透明的gif 图片来实现。

6. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.\

7. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用   或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记 。
 

4.4网站网页制作细节 ---- 链接

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

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

未完待续

作者：白嫖使人心情愉悦
链接：https://juejin.cn/post/7027265916031205384
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。