网页设计规范

最新推荐文章于 2025-09-12 16:27:57 发布

最新推荐文章于 2025-09-12 16:27:57 发布 · 788 阅读

文章标签：

#xhtml #前端 #javascript #ViewUI

本文详细阐述了网页设计的基本要求、HTML结构、CSS布局、图像约定、多媒体元素使用、网页布局、注释规范及编码标准等内容，旨在帮助开发者遵循最佳实践，确保网页在不同设备和浏览器上的良好展示。

1.1网页基本设计要求（网站建设尺寸规范）
网站的页面分辨率要保证页面在1024*768分辨率下没有横向滚动条。

1.2 HTML文件结构
HTML结构参考：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <meta /> </head> <body> </body> </html> 页面内参考以下原则： （1）静态页面XHTML代码应采用自动缩进的形式编写，这样代码层次结构清晰。 （2）页面一律采用UTF-8编码，避免因编码不一致而导致页面乱码。 （3）非特殊情况下必须把CSS外部链接放到页面的顶部（<head>… </ head>标签之间）。 （4）非特殊情况下必须把JS代码或外部链接放到页面的底部（</ body>标签之后），工具类JS嵌入的JS文件除外。 （5）书写链接地址时，必须避免重定向，例如：href="<a href="http://www.5fad.com/">http://www.5fad.com/</a>" ,即须在URL地址后面加上“/”。 （6）在页面中尽量避免使用XHTML标签的样式属性,即style="…"。 （7）应给每个页面的TITLE进行命名，所有中文页面TITLE设置为本页面的内容描述 （8）尽量减少DIV的嵌套层数。 （9）统一域名下的项目页面链接使用相对路径。 （10）给区块代码和套程序的循环的第一条数据加上注释。 （11）每个页面必须宣告使用哪一种DTD，目前非特殊情况下我们采用XHTML 1.0 Transitional DTD (一般为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">) （12）所有XHTML代码必须全部小写。 （13）XHTML标签的属性值必须用双引号（””）括起来,并且一定要有值,不能简写缩写。 （14）双标记签都要有开始和结束标签，单标记标签的后面一定要加“/”,例如： 等，并且有正确的层次。 （15）非特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font等。 （16）id属性，同一页面不要重复使用同一id。 （17）给重要图片加上alt属性；给重要的元素和截断的元素加上title。 （18）行距建议用百分比来定义，常用的行距的值是line-height: 150%。 （19）表格的嵌套尽量控制在三层以内。 （20）为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用 来人工干预分段。 （21）网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象，非必须情况下请保持在34K以下。 （22）为了保证浏览器的兼容性，必须设置页面背景<body bgcolor="#FFFFFF">。 （23）超过三屏的内容，应在头部设提纲，直接链接到文内锚点。

1.3 CSS结构
对于每个项目的CSS开发必须采用分层的设计思想，主要为三个大的层次：全局样式、通用元素和结构布局、具体的块状表现区域。对于层次的划分再做一次扩充： 前端固定结构内可进一步细分到：导航系统（包括：菜单，导航，面包屑，站点地图），辅助系统（提示，指南，FAQ），全局通用性功能模块（搜索功能块，登入/登出功能块）。 CSS结构参考以下设计： 常用CSS类/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 　　图标: icon 　　注释：note 　　指南：guild 　　服务：service 　　热点：hot 　　新闻：news 　　下载：download 　　投票：vote 　　合作伙伴：partner 　　友情链接：link 　　版权：copyright

1.4 图像约定
（1）图片采用 gif , jpg 压缩格式，以减小页面下载数据量。<img />标记要增加width, height，以免图像不能正常显示时，出现页面混乱现象。
（2）在页面尽量少使用图片，只在必要的情况下使用图片，图片大小最好不要超过8KB。
（3）图片统一放在images文件夹下面。

1.5 多媒体元素约定
（1）如页面采用动画活跃网页，须避免动画过大，尽量减少用户浏览等待时间。整页用到flash动画或SilverLight程序，要考虑到flash动画或SilverLight程序界面与页面的融合统一。

1.6 网页布局
（1）各主要栏目之间要求使用一致的布局，包括一致的页面元素，一致的导航形式，使用相同的铵钮，相同的顺序，可跟首页有变化。

1.7 网页注释
1.7.1、HTML注释注释规范
所有的注释文字一律使用简体中文。注释格式为感叹号后面2个横线，结束时2个横线，不要在注释内容中使“--”，“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是错误的：

1.8 CSS编码规范

（1）为了保证不同浏览器上字号保持一致，字号尽量采用点数（pt）和像素（px）来定义，使用pt单位时一般使用中文宋体的9pt和10.5pt，使用px单位时一般使用中文宋体12px 和14.8px 。字体需要作为标题显示时，一般选用10.5pt或14.8px 的字号比较合适；字体定义中尽量使用“宋体”为首选字体；中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。
（2）原则上尽量采用CSS缩写。
以下是CSS缩写性质的列表以及它们所表示的常规性质。
background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复
border（边框）：边框颜色、边框风格、边框宽度
border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度
border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度
border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度
border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度
cue（声音提示）：前提示、后提示
font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型
margin（空白）：顶部空白、右侧空白、底部空白、左侧空白
outline（大纲）：大纲颜色、大纲样式、大纲宽度
padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙
pause（暂停）：后暂停、前暂停
示例：padding-top:1px;padding-left:2px;padding-bottom:3px;padding-rigth:4px
可缩写为：padding:1px 4px 3px 2px;
（3）、CSS文件一律采用UTF-8编码，避免因为编码问题而造成页面结构混乱。

1.8 JS编码规范

（1）尽量采用轻量级的Js框架：例如：ProtoType、jQuery、MooTools，推荐使用jQuery。
（2）JS文件一律采用UTF-8编码，避免出现编码不一致的问题。.
（3）JavaScript程序尽量保存在后缀名为.js的文件中，以方便缓存以及压缩。
（4）Js文件导入的标签应尽量放到body的后面。这样可以减少因为载入script而造成其他页面内容载入也被延迟的问题。
（5）缩进的单位为四个空格或一个Tab键长度。
（6）所有的变量必须在使用前进行声明，将var语句放在函数的首部。最好把每个变量的声明语句单独放到一行,并加上注释说明。所有变量按照字母排序。JavaScript没有块作用域（只有函数级的作用域），所以在块里面定义变量很容易引起C/C++/Java程序员们的误解。在函数的首部定义所有的变量。尽量减少全局变量的使用。不要让局部变量覆盖全局变量。
（7）变量名应由26个大小写字母(A..Z,a..z),10个数字(0..9),和_(下划线)组成。避免使用国际化字符(如中文),因为它们不是在任何地方都可以被方便的阅读和理解。不要在命名中使用$(美元符号)或者(反斜杠)。不要把_(下划线)作为变量名的第一个字符。它有时用来表示私有变量,但实际上JavaScript并没提供私有变量的功能。如果私有变量很重要, 那么使用私有成员的形式。应避免使用这种容易让人误解的命名习惯。
（8）函数名与左括号之间不应该有空格。右括号与开始程序体的左大括号之间应插入一个空格。函数程序体应缩进四个空格或一个Tab键长度。右大括号与声明函数的那一行代码头部对齐。如果函数是匿名函数,则在function和((左括号)之间应有一个空格。如果省略了空格,否则会让人感觉函数名叫作 function。
（9）变量名和方法名应以小写字母开头，与JS本身的命名一致。
（10）尽量使用{}代替new Object()。使用[]代替new Array()。
（11）eval是JavaScript中最容易被滥用的方法。避免使用它。
（12）不要使用Function构造器。
（13）不要给setTimeout或者setInterval传递字符串参数这种做法