JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

html代码书写规范

一、 网页制作细节 ---- 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.com">
  • 网站简介  <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
  • 搜索关键字  <META NAME="keywords" 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">
  • 自动跳转。
    <META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">  5指时间停留5秒
  • 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
    <META NAME="robots" CONTENT="none">CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
  • 收藏夹图标
      <link rel = "Shortcut Icon" href="favicon.ico">
  • 所有的javascript的调用尽量采取外部调用。
    <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表格 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>标记,以便能够使这个大表格分块显示

五、网页制作细节 ---- 下载速度

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

六、网页制作细节 ---- include

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。

十二、图片处理细节 ---- 页面修饰图片处理

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