有些字符在HTML里有特别的含义，比如小于号<就表示HTML Tag的开始，这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号，该怎么办呢？

这就要说到HTML字符实体(HTML Character Entities)了。

一个字符实体(Character Entity)分成三部分：第一部分是一个&符号，英文叫ampersand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编号；第三部分是一个分号。

比如，要显示小于号，就可以写&lt;或者&#60;。

用实体(Entity)名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。

注意：Entity是区分大小写的。

如何显示空格

通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用&nbsp;表示空格。

最常用的字符实体(Character Entities)

其他常用的字符实体(Character Entities)

更多字符实体(Character Entities)

一、window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

二、基本语法：

window.open(pageURL,name,parameters)

其中：

pageURL 为子窗口路径

name 为子窗口句柄

parameters 为窗口参数(各参数用逗号分隔)

三、示例：

<SCRIPT>

<!--

window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')

//写成一行

-->

</SCRIPT>

脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。

请对照。

上例中涉及的为常用的几个参数，除此以外还有很多其他参数，请见四。

四、各项参数

其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。

参数 | 取值范围 | 说明

| |

alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后

alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上

depended | yes/no | 是否和父窗口同时关闭

directories | yes/no | Nav2和3的目录栏是否可见

height | pixel value | 窗口高度

hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键

innerHeight | pixel value | 窗口中文档的像素高度

innerWidth | pixel value | 窗口中文档的像素宽度

location | yes/no | 位置栏是否可见

menubar | yes/no | 菜单栏是否可见

outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度

outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度

resizable | yes/no | 窗口大小是否可调整

screenX | pixel value | 窗口距屏幕左边界的像素长度

screenY | pixel value | 窗口距屏幕上边界的像素长度

scrollbars | yes/no | 窗口是否可有滚动栏

titlebar | yes/no | 窗口题目栏是否可见

toolbar | yes/no | 窗口工具栏是否可见

Width | pixel value | 窗口的像素宽度

z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

window.showModalDialog使用手册

基本介绍：

showModalDialog() (IE 4+ 支持)

showModelessDialog() (IE 5+ 支持)

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。

window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

使用方法：

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])

vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

参数说明：

sURL--

必选参数，类型：字符串。用来指定对话框要显示的文档的URL。

vArguments--

可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures--

可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。

1.dialogHeight :对话框高度，不小于１００px， IE ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。

2.dialogWidth: 对话框宽度。

3.dialogLeft: 离屏幕左的距离。

4.dialogTop: 离屏幕上的距离。

5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。

6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。

7.resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。

8.status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。

9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

下面几个属性是用在HTA中的，在一般的网页中一般不使用。

10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。

11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。

12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

参数传递：

1.要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：

-------------------------------

parent.htm

<script>

var obj = new Object();

obj.name="51js";

window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");

</script>

modal.htm

<script>

var obj = window.dialogArguments

alert("您传递的参数为：" + obj.name)

</script>

-------------------------------

2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：

------------------------------

parent.htm

<script>

str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");

alert(str);

</script>

modal.htm

<script>

window.returnValue="http://www.51js.com";

</script>

String noHtmlContent = content.replaceAll("<[^>]*>","");

一句代码搞定。

<script>
   function KeyDown(){ //屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键
    //alert("ASCII代码是："+event.keyCode);
    if ( (window.event.altKey)&&
    (  (window.event.keyCode==37)|| //屏蔽 Alt+ 方向键 ←
       (window.event.keyCode==39) )  ){ //屏蔽 Alt+ 方向键 →
        alert("不准你使用ALT+方向键前进或后退网页！");
        event.returnValue=false;
    }

   if ((event.keyCode==8) || //屏蔽退格删除键
    (event.keyCode==116)|| //屏蔽 F5 刷新键
    (event.keyCode==112)|| //屏蔽 F1 刷新键
    (event.ctrlKey && event.keyCode==82)){ //Ctrl + R
    event.keyCode=0;
    event.returnValue=false;
  alert("不准你使用快捷！");
    }
   if ((event.ctrlKey)&&(event.keyCode==78)) //屏蔽 Ctrl+n
   {
     alert("ctrl + n");
  event.returnValue=false;
   }

    if ((event.shiftKey)&&(event.keyCode==121)) //屏蔽 shift+F10
      {
      alert(" shift+F10 ");
      event.returnValue=false;
   }

    if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
 {
   window.event.returnValue = false; //屏蔽 shift 加鼠标左键新开一网页
 }
   
    if ((window.event.altKey)&&(window.event.keyCode==115)){ //屏蔽Alt+F4
 alert('Alt+F4');
    //window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");
    return false;
 }
  }
document.onkeydown = KeyDown  
</script>

//取得网络上的打印机
function getnetprinter()
{
  var obj=new ActiveXObject("WScript.Network");
  var netprinter=obj.EnumPrinterConnections(); 
  for(i=0;i<netprinter.Count();i+=2)
  {
    document.writeln(netprinter.Item(i)+"="+netprinter.Item(i+1));
  }
}
//取得磁盘信息 传入参数如：getdiskinfo('c')
function getdiskinfo(para)
{
  var fs=new ActiveXObject("scripting.filesystemobject");
  d=fs.GetDrive(para);
  s="卷标:" + d.VolumnName;
  s+="------" + "剩余空间:" + d.FreeSpace/1024/1024 + "M";
  s+="------" + "磁盘序列号:" + d.serialnumber;
  alert(s)
}
//取得系统目录
function getprocessnum()
{
    var pnsys=new ActiveXObject("WScript.shell");
    pn=pnsys.Environment("PROCESS");
    alert(pn("WINDIR"));
}
//启动计算器
function runcalc()
{
  var calc=new ActiveXObject("WScript.shell");
  calc.Run("calc");
}
//读取注册表中的值
function readreg()
{
  var myreadreg=new ActiveXObject("WScript.shell");
  try{
    alert(myreadreg.RegRead("HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Run\\NeroCheck"));
  }
  catch(e)
  {
    alert("读取的值不存在！");
  }
}
//写注册表
function writereg()
{
  var mywritereg=new ActiveXObject("WScript.shell");
  try{
    mywritereg.RegWrite("HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Run\\MyTest","c:\\mytest.exe");
    alert("写入成功！");
  }
  catch(e)
  {
    alert("写入路径不正确！");
  }
}
//删除注册表
function delreg()
{
  var mydelreg=new ActiveXObject("WScript.shell");
  if(confirm("是否真的删除？"))
  {
    try{
   mydelreg.RegDelete("HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Run\\MyTest");
   alert("删除成功！");
 }
 catch(e)
 {
   alert("删除路径不正确");
 }
  }
}
//取得计算机名域名用户名
function netinfo()
{
  var mynetinfo=new ActiveXObject("WScript.network");
  alert("计算机名:"+mynetinfo.ComputerName+"域名:"+mynetinfo.UserDomain+"用户名:"+mynetinfo.UserName);
}
//返回系统中特殊目录的路径 (Fonts,AllUsersDesktop,Desktop,MyDocuments,Recent.....)
function getspecialfolder()
{
  var mygetfolder=new ActiveXObject("WScript.shell");
  if(mygetfolder.SpecialFolders("Fonts")!=null)
  {
    alert(mygetfolder.SpecialFolders("Fonts"));
  }
}
//取得文件信息  调用方式如：getfileinfo('E:\\MyPlace\\TEST\\myjs.htm')
function getfileinfo(para)
{
  var myfile=new ActiveXObject("scripting.filesystemobject");
  var fi=myfile.GetFile(para);
  alert("文件类型:"+fi.type+"文件大小:"+fi.size/1024/1024+"M"+"最后一次访问时间:"+fi.DateLastAccessed);
}
//取得客户端的信息
function clientInfo()
{
  strClientInfo="availHeight=   "+window.screen.availHeight+"\n"+
    "availWidth=   "+window.screen.availWidth+"\n"+
    "bufferDepth=   "+window.screen.bufferDepth+"\n"+
    "colorDepth=   "+window.screen.colorDepth+"\n"+
    "colorEnable=   "+window.navigator.cookieEnabled+"\n"+
    "cpuClass=   "+window.navigator.cpuClass+"\n"+
    "height=   "+window.screen.height+"\n"+
    "javaEnable=   "+window.navigator.javaEnabled()+"\n"+
    "platform=   "+window.navigator.platform+"\n"+
    "systemLanguage=   "+window.navigator.systemLanguage+"\n"+
    "userLanguage=   "+window.navigator.userLanguage+"\n"+
    "width=   "+window.screen.width;
  alert(strClientInfo); 
}
//Dilog Helper对象的使用
function changeColor()//Dilog Helper对象的使用之调用系统调色板
{
var sColor=dlgHelper.choosecolordlg();
sColor=sColor.toString(16);
if (sColor.length < 6) {
  var sTempString = "000000".substring(0,6-sColor.length);
  sColor = sTempString.concat(sColor);
}
alert(sColor);
mybody.style.backgroundColor=sColor;
}
function getFonts()//Dilog Helper对象的使用之取得系统支持的字体
{
  var strFonts="";
  for(var i=1;i<dlgHelper.fonts.count;i++)
  {
    strFonts=strFonts+dlgHelper.fonts(i)+"|";
  }
  alert(strFonts);
}
function getBlockFormat()//Dilog Helper对象的使用之取得系统中块的格式信息（如：标题1、标题2....）
{
  var strBlockFormat="";
  for(var i=1;i<dlgHelper.BlockFormats.count;i++)
  {
    strBlockFormat=strBlockFormat+dlgHelper.BlockFormats(i)+"|";
  }
  alert(strBlockFormat);
}

function createTxtLink()//给选中的文本创建链接
{
  var sText=document.selection.createRange();
  if(sText.text!="")
  {
    document.execCommand("CreateLink");
    if(sText.parentElement().tagName=="A")
    {
      sText.parentElement().innerText=sText.parentElement().href;
      document.execCommand("ForeColor",false,"#ffff00");
    }
  }
}
//以下为取得BlockFormats，填充Select（id为myselect）并根据选择不同的BlockFormat改变样式
//函数fillselect()和changeformat()
//对execCommand的一点说明：Executes a command over the given selection or text range
function fillselect()
{
  var item=document.createElement("OPTION")
  item.text="请选择";
  item.value="";
  myselect.add(item);
  for(var i=1;i<dlgHelper.BlockFormats.count;i++)
  {
    item=document.createElement("OPTION");
    item.text=dlgHelper.BlockFormats(i);
    item.value=dlgHelper.BlockFormats(i);
    myselect.add(item);
  }
}
function changeformat()
{
  var sSelect=myselect.options[myselect.selectedIndex].value;
  document.execCommand("FormatBlock",false,sSelect);
}
//取得驱动器类型，调用如：ShowDriveType('c:')
function ShowDriveType(drvpath)
{
  fs=new ActiveXObject("scripting.filesystemobject");
  disk=fs.GetDrive(drvpath);
  var whichtype="";
  switch(disk.DriveType)
  {
 case 0:
   whichtype="Unknown"
   break
 case 1:
   whichtype="Removable"
   break
 case 2:
   whichtype="Fixed"
   break
 case 3:
   whichtype="Network"
   break
 case 4:
   whichtype="CD-ROM"
   break
 case 5:
   whichtype="RAM Disk"
  }
  alert(whichtype);
  //显示磁盘的SerialNumber
  try{
 alert(disk.SerialNumber);
  }
  catch(e){
    alert(e.message);
  }
  alert(disk.VolumeName);//取得卷标
}

</script>
－－－－－－－－－－－－－－－－－－－－－－－－－
<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>

前言

网络上的变革每天都在发生，当我们觉得网站设计技术已经非常简单和熟悉的时候。国外网站设计标准化的概念早已悄悄的形成和迅速“蔓延”，自2000年起，大部分新发行的浏览器版本都开始支持网站标准。主流的网页编辑工具也开始全面支持网站标准，甚至一些软件几乎完全由XML文件组成，例如Dreamweaver MX。一些著名的大型商业网站开始采用网站标准来重新构建（例如体育资讯www.espn.com），另外一些则拒绝非标准浏览器浏览它们的网站（例如连线杂志www.wired.com）。众多的设计网站(例如：www.k10k.net) 和个人网站更是标准推广的先行者，纷纷转向采用XHTML+CSS来建立。2004年2月4日XML1.1推荐标准正式发布，标志着网站设计的标准时代已经到来。

国外网站标准的声势汹涌，但国内业界显得有些后知后觉或者毫无兴趣，让我们来看看国内三大门户网站首页对网站标准的遵循情况：

校验结果显示所有门户网站都没有符合网站标准，甚至连HTML4.0标准都没有遵循。举例来说：<FONT>标签，早在1998年4月HTML4.0标准中就已经被W3C列为“不建议使用(deprecated)”标签。但我们的三大门户网站首页上都有不少类似<font color=red>的代码。这里的简单列表，目的不是批评这些网站做得不好（事实上大部分的大型商业站点都通不过W3C严格的正确性校验），有很多的原因造成这种状况，例如采用老的信息发布系统，网页设计人员的技术和意识不够等等。我们只是想说明一点：连比较规范的上市公司的网站都没有意识到遵循标准，其他规模教小的商业网站就更不用说，国内对网站标准没有足够的重视。

让我们赶紧跟上新时代的步伐，一起来了解一下网站标准吧。

一．为什么要建立网站标准

我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的“浏览器大战”，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。

如何解决这些问题呢？有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft等)也终于认识到统一标准的好处，因此在W3C（W3C.org）的组织下，网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的督促下推广执行。

简单说，网站标准的目的就是：

• 提供最多利益给最多的网站用户
• 确保任何网站文挡都能够长期有效
• 简化代码、降低建设成本
• 让网站更容易使用，能适应更多不同用户和更多网路设备
• 当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。

对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于你的网站用户来说，网站标准就是最佳体验。

访问量排名世界第4，中国第1的新浪网站，也遭遇非标准DHTML的问题。在最新发布的Netscape7和Mozila1.6浏览器中，新浪首页的漂浮广告全部失效，层叠挤在页面左下角。也许那些广告主认为损失这些潜在的用户无所谓。（截图日期2004年4月12日）

二．什么是网站标准

网站标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：

1．结构标准语言

（1）XML

XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。

（2）XHTML

XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

2. 表现标准语言

CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

3.行为标准

（1）DOM

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

(2) ECMAScript

ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。

三．遵循标准的网站与传统网站的区别

传统网站只是印刷媒体的延伸，设计目标是保证在4-6个主流浏览器版本中看起来一致。通常的特征是：

• 以表格为基础的布局。
• 内容与表现方式混杂在一起。典型的例子是<font>标签。
• 垃圾代码（非标准代码）。
• 不易用的代码。
• 语义不正确的代码。比如<b>不解释的话，你根本不明白这是字体加粗的意思。

而采用网站标准建立的网站是一个能够接受各种用户和各种设备的广泛的交流沟通工具。一般特征是：

• 语义正确的标识。即使用能够表达含义的标签。保证代码可以在文本浏览器、PDAs、搜索引擎中被正确理解。
• 正确有效的代码。通过W3C代码校验（http://validator.w3.org/）的就是正确代码。
• 对人、机都易用的代码。能够接受广泛的用户和设备的访问，
• 用CSS分离表现层和内容。使代码更简洁、下载速度更快，批量修改和定制表现形式更容易。

四．采用网站标准的好处和缺点

1．好处

对网站浏览者的好处：

• 文件下载与页面显示速度更快；
• 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；
• 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）
• 用户能够通过样式选择定制自己的表现界面
• 所有页面都能提供适于打印的版本

对网站所有者的好处：

• 更少的代码和组件，容易维护
• 带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。
• 更容易被搜寻引擎搜索到
• 改版方便，不需要变动页面内容
• 提供打印版本而不需要复制内容
• 提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

2．缺点

• 需要花费更多时间来学习标准
• 依然需要注意浏览器的兼容问题
• 用 CSS 来实现某些表现反而比表格更为麻烦

五．怎么改善现有网站

我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+CSS的方法需要一个过程，使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进，分阶段来逐步达到完全符合网站标准的目标。如果你是新手，或者对代码不是很熟悉，也可以采用遵循标准的编辑工具，例如Dreamweaver MX 2004，它是目前支持CSS标准最完善的工具。

1．初级改善

• 为页面添加正确的DOCTYPE

很多设计师和开发者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE

是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以，如果你不注意设置了错误的DOCTYPE，结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择：

过渡型（Transitional ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格型（Strict ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架型（Frameset ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

对于我们初级改善来说，只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等，不至于让你觉得变化太大，难以掌握。

Tip:你懒得输入上面过渡型代码的话，可以访问http://www.macromedia.com/网站的首页，然后查看源代码，把head区同样的代码拷贝粘贴就可以了。

• 设定一个名字空间（Namespace）

直接在DOCTYPE声明后面添加如下代码：

<html XMLns="http://www.w3.org/1999/xhtml" >

一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

• 声明你的编码语言

为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。

• 用小写字母书写所有的标签

XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的：

<TITLE>公司简介</TITLE>

正确的写法是：

<title>公司简介</title>

同样的，<P>改成<p>，<B>改成<b>等等。这步转换很简单。

• 为图片添加 alt 属性

为所有图片添加alt属性。Alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性，象下面这样的写法毫无意义：

<img src=”logo_unc_120x30.gif” alt=” logo_unc_120x30.gif”>

正确的写法：

<img src=”logo_unc_120x30.gif” alt=”UNC公司标志，点击返回首页”>

• 给所有属性值加引号

在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。

例：height=”100”，而不能是height=100。

• 关闭所有的标签

在XHTML中，每一个打开的标签都必须关闭。就象这样：

<p>每一个打开的标签都必须关闭。</p>

<b>HTML可以接受不关闭的标，XHTML就不可以。</b>

这个规则可以避免HTML的混乱和麻烦。举例来说：如果你不关闭图像标签，在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是：空标签也要关闭，在标签尾部使用一个正斜杠“/”来关闭它们自己。例如：

<br />

<img src="webstandards.gif" />

经过上述七个规则处理后，页面就基本符合XHTML1.0的要求。但我们还需要校验一下是否真的符合标准了。我们可以利用W3C提供免费校验服务（http://validator.w3.org/）。发现错误后逐个修改。在后面的资源列表中我们也提供了其他校验服务和对校验进行指导的网址，可以作为W3C校验的补充。当最后通过了XHTML验证，恭喜你已经向网站标准迈出了一大步。不是想象中的那么难吧！

2．中级改善

接下来我们的改善主要在结构和表现相分离上，这一步不象第一步那么容易实现，我们需要观念上的转变，以及对CSS2技术的学习和运用。但学习任何新知识都需要花点时间的，不是吗？诀窍在于边做边学。假如你一直采用表格布局，根本没用过 CSS，也不必急于跟表格布局说再见，你可以先用样式表代替 font 标签。随着你学到的越多，你能做的就越多。好，一起来看看我们需要做哪些事：

• 用CSS定义元素外观

我们在写标识时已经养成习惯，当希望字体大点就用<h1>，希望在前面加个点符号就用<li>。我们总是想<h1>的意思是大的，<li>的意思是圆点，<b>的意思是“加粗文本”。而实际上， <h1>能变成你想要的任何样子，通过CSS，<h1>能变成小的字体，<p>文本能够变成巨大的、粗体的，<li>能够变成一张图片等等。我们不能强迫用结构元素实现表现效果，我们应该使用CSS来确定那些元素的外观。例如，我们可以使原来默认的6级标题可以看起来大小一样：

h1, h2, h3, h4, h5, h6{

font-family: 宋体, serif;

font-size: 12px;

}

• 用结构化元素代替无意义的垃圾

许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现，而不是结构。例如，一段列表内容可能会使用下面这样的标识：

句子一<br />

句子二<br />

句子三<br />

如果我们采用一个无序列表代替会更好：

<ul>

<li>句子一</li>

<li>句子二</li>

<li>句子三</li>

</ul>

你或许会说“但是<li>显示的是一个圆点，我不想用圆点”。事实上，CSS没有设定元素看起来是什么样子，你完全可以用CSS关掉圆点。

• 给每个表格和表单加上id

给表格或表单赋予一个唯一的、结构的标记，例如

<table id="menu">

接下来，在书写样式表的时候，你就可以创建一个“menu”的选择器，并且关联一个CSS规则，用来告诉表格单元、文本标签和所有其他元素怎么去显示。这样，不需要对每个<td>标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只需要一个附着的标记（标记“menu”的id标记），你就可以在一个分离的样式表内为干净的、紧凑的代码标记进行特别的表现层处理。

中级改善我们这里先列主要的三点，但其中包含的内容和知识点非常多，需要我们逐步学习和掌握，直到最后实现完全采用CSS而不才用任何表格实现布局。限于本文是引导推广之意，不展开详述。

最后我们特别需要补充介绍的是网站的易用性(Accessibility)和交互设计改善，易用性与网站标准有着标准联系紧密，和网站标准一样，都是为了使我们的网站接受更多的用户访问。1990年W3C建立了Web Accessibility Initiative（WAI），给网站建造者提供实现可访问性的方法和策略（http://www.w3.org/WAI/GL/）。提高易用性和研究交互设计（推荐VB之父Alan Cooper的About Face2.0一书）的策略能提高你的开发技术，开阔视野。提高你作为专业网页设计师的价值，使你更具竞争力。这正是每个网站所有者和每个设计师或开发者要努力达到的目标。

六．网站标准的资源

1．网站标准

http://www.zeldman.com/

http://webstandards.org/

http://webstandardsgroup.org/

http://www.nypl.org/styleguide/

2．有语义代码

http://brainstormsandraves.com/articles/semantics/structure/

3．校验（Validation ）

http://validator.w3.org/

http://www.htmlhelp.com/tools/validator/

http://webboy.net/presentation/validation.cfm

4．易用性（Accessibility ）

http://www.joeclark.org/

http://www.accessify.com/

http://www.juicystudio.com/

5．样式表CSS

http://webboy.net/presentation/ict2004/01.htm

http://webboy.net/presentation/ict2004/02.htm

http://webboy.net/presentation/ict2004/03.htm

http://westciv.com/style_master/academy/css_tutorial/

http://css.maxdesign.com.au

http://www.thenoodleincident.com/tutorials/css/

6．实例站点(XHTML+CSS)

http://www.macromedia.com/

http://www.k10k.net

http://www.fyrebase.com/

http://www.onetruefit.com/

http://pixeltable.com/

http://www.fishmarketing.net/

附．参考文章及网站

• Jeffrey Zeldman（www.zeldman.com）著作《Design with Web Standards》，该书已经由电子工业出版社引进，即将发行中文版。
• Max Design的文章：《The benefits of Web Standards to your visitors, your clients and you!》http://www.maxdesign.com.au/presentation/benefits/index.htm
• Mark Pilgrim 《Dive Into Accessibility》http://diveintoaccessibility.org
• 网站标准组织www.webstandards.org
• 网站标准团体www.webstandardsgroup.org

1.文件标题
＜title＞..........＜/title＞
2.文件更新--＜meta＞
　【1】10秒后自动更新一次
　　＜meta http-equiv="refresh" content=10＞
　【2】10秒後自动连结到另一文件
　　＜meta http-equiv="refresh" content="10；URL=欲连结文件之URL"＞
3.查询用表单--＜isindex>
　　　若欲设定查询栏位前的提示文字：
　　＜isindex prompt="提示文字"＞
4.预设的基准路径--＜base>
   ＜base href="放置文件的主机之URL"＞

版面
1.标题文字 ＜h#＞..........＜/h#＞ #=1~6；h1为最大字，h6为最小字
2.字体变化 ＜font＞..........＜/font＞
【1】字体大小 ＜font size=#＞..........＜/font＞ #=1~7；数字愈大字也愈大
【2】指定字型 ＜font face="字型名称"＞..........＜/font＞
【3】文字颜色 ＜font color=#rrggbb＞..........＜/font＞ rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码
3.显示小字体 ＜small＞..........＜/small＞
4.显示大字体 ＜big＞..........＜/big＞
5.粗体字 ＜b＞..........＜/b＞
6.斜体字 ＜i＞..........＜/i＞
7.打字机字体 ＜tt＞..........＜/tt＞
8.底线 ＜u＞..........＜/u＞
9.删除线 ＜strike＞..........＜/strike＞
10.下标字 ＜sub＞..........＜/sub＞
11.上标字 ＜sup>..........＜/sup＞
12.文字闪烁效果 ＜blink＞..........＜/blink＞
13.换行 ＜br＞
14.分段 ＜p＞
15.文字的对齐方向 ＜p align="#"＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 P.S.＜p align="#"＞之後的文字都会以所设的对齐方式显示， 直到出现另一个＜palign="#"＞改变其对齐方向，或遇到 ＜hr＞ⅱ＜h#＞标签时会自动设回预设的向左对齐。
16.分隔线 ＜hr＞
【1】分隔线的粗细 ＜hr size=点数＞
【2】分隔线的宽度 ＜hr size=点数或百分比＞
【3】分隔线对齐方向 ＜hr align="#"＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐
【4】分隔线的颜色 ＜hr color=#rrggbb＞
【5】实心分隔线 ＜hr noshade＞
17.向中对齐 ＜center＞..........＜/center＞
18.依原始样式显示 ＜pre＞..........＜/pre＞
19.＜body＞指令的属性
【1】背景颜色 -- bgcolor ＜body bgcolor=#rrggbb＞
【2】背景图案 -- background ＜body background="图形文件名"＞
【3】设定背景图案不会卷动 -- bgproperties ＜body bgproperties=fixed＞
【4】文件内容文字的颜色 -- text ＜body text=#rrggbb＞
【5】超连结文字颜色 -- link ＜body link=#rrggbb＞
【6】正被选取的超连结文字颜色 -- vlink ＜body vlink=#rrggbb＞
【7】已连结过的超连结文字颜色 -- alink ＜body alink=#rrggbb＞
20.注解 ＜!--..........--＞21.特殊字元表示法
符 号 　　语 法 
＜  　　　＆ｌｔ 
＞  　　　＆ｇｔ 
& 　　 　＆ａｍｐ 
"  　　　＆ｑｕｏｔ 
空白  　　＆ｎｂｓｐ  

图片
1.插入图片 ＜img src="图形文件名"＞
2.设定图框 -- border ＜img src="图形文件名" border=点数＞
3.设定图形大小 -- widthⅱheight ＜img src="图形文件名" width=宽度点数 height=高度点数＞
4.设定图形上下左右留空 -- vspaceⅱhspace ＜img src="图形文件名" vspace=上下留空点数 hspace=左右留空点数＞
5.图形附注 ＜img src="图形文件名" alt="说明文字"＞
6.预载图片
＜img src="高解析度图形文件名" lowsrc="低解析度图形文件名"＞ P.S.两个图的图形大小最好一致
7.影像地图（Image Map） ＜img src="图形文件名" usemap="#图的名称"＞ ＜map name="图的名称"＞
       ＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞
       ＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞
       ＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞
       ＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞    ＜/map＞   
【1】定义形状 -- shape
       shape=rect：矩形         shape=circle：圆形         shape=poly：多边形   
【2】定义区域 -- coords
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：＜area shape=rect coords=100,50,200,75 href="/URL"＞
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：＜area shape=circle coords=85,155,30 href="/URL"＞
c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：＜area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="/URL"＞

表格
1.定义表格 ＜table＞..........＜/table＞
【1】设定边框的厚度 -- border
＜table border=点数＞
【2】设定格线的宽度 -- cellspacing
＜table cellspacing=点数＞
【3】设定资料与格线的距离 -- cellpadding
＜table cellpadding=点数＞
【4】调整表格宽度 -- width
＜table width=点数或百分比＞
【5】调整表格高度 -- height
＜table height=点数或百分比＞
【6】设定表格背景色彩 -- bgcolor
＜table bgcolor=#rrggbb＞
【7】设定表格边框色彩 -- bordercolor
＜table bordercolor=#rrggbb＞

2.显示格线 ＜table border＞

3.表格标题
＜caption＞..........＜/caption＞
表格标题位置 -- align
＜caption align="#"＞ #号可为 top：表标题置于表格上方（预设值）
bottom：表标题置于表格下方
4.定义列 ＜tr＞

5.定义栏位 《1》＜td＞：K左对齐

《2》＜th＞：K中对齐ⅱ粗体
【1】水平位置 -- align ＜th align="#"＞
#号可为 left：向左对齐
center：向中对齐 right：向右对齐
【2】垂直位置 -- align ＜th align="#"＞ #号可为
top：向上对齐 middle：向中对齐
bottom：向下对齐
【3】栏位宽度 -- width
＜th width=点数或百分比＞
【4】栏位垂直合并 -- rowspan
＜th rowspan=欲合并栏位数＞
【5】栏位横向合并 -- colspan
＜th colspan=欲合并栏位数＞

清单

一、目录式清单
＜dir＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/dir＞ P.S.目录式清单每一个项目不能超过20个字元（即10个中文字）

二、选项式清单 ＜menu＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/menu＞

三、有序号的清单 ＜ol＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/ol＞
【1】序号形式 -- type ＜ol type=#＞或＜li type=#＞ #号可为 A：表以大写英文字母AⅱBⅱCⅱD...做为项目编号 a：表以小写英文字母aⅱbⅱcⅱd...做为项目编号 I：表以大写罗马数字做为项目编号 i：表以小写罗马数字做为项目编号 1：表以阿拉伯数字做为项目编号（预设值）
【2】起始数字 -- start ＜ol start=欲开始计数的序数＞
【3】指定编号 -- value ＜li value=欲指定的序数＞

四、无序号的清单 ＜ul＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/ul＞
【1】项目符号形式 -- type ＜ul type=#＞或＜li type=#＞ #号可为 disc：实心圆点（预设值） circle：空心圆点 square：实心方块
【2】原始清单 -- plain ＜ul plain＞
【3】清单排列方式 -- warp 《1》清单垂直排列 ＜ul warp = vert＞ 《2》清单水平排列 ＜ul warp = horiz＞

五、定义式清单 ＜dl＞ ＜dt＞项目1 ＜dd＞项目1说明 ＜dt＞项目2 ＜dd＞项目2说明 ＜dt＞项目3 ＜dd＞项目3说明 ＜/dl＞
紧密排列 -- compact ＜dl compact＞ P.S.如此可使＜dt＞的内容与＜dd＞的内容在同一行，仅 以数格空白相隔而不换行，但若＜dt＞的文字超过一 定的长度后，compact的作用就消失了！
表单

一、基本架构 ＜form action="处理资料用的CGI程式之URL"或"mailt电子信箱的URL" method="get或post"＞ .......... .......... .......... ＜/form＞

二、输入文件型表单 ＜form action="URL" method="post"＞ ＜input＞ ＜input＞ .......... .......... ＜/form＞
【1】栏位类型 -- type ＜input type=#＞ #号可为 text：文字输入 password：密码 checkbox：多选钮 radio：单选钮 submit：接受按钮 reset：重设按钮 image：图形钮 hidden：隐藏栏位
【2】栏位名称 -- name ＜input name="资料栏名"＞ P.S.若type为submitⅱreset则name不必设定
【3】文件上的预设值 -- value ＜input value="预设之字串"＞
【4】设定栏位的宽度 -- size ＜input size=字元数＞
【5】限制最大输入字串的长度 -- maxlength ＜input maxlength=字元数＞
【6】预设checkbox或radio的初值 -- checked ＜input type=checkbox checked＞ ＜input type=radio checked＞
【7】指定图形的URL -- src ＜input type=image src="图档名"＞
【8】图文对齐 -- align ＜input type=image align="#"＞ #号可为 top：文字对齐图片之顶端 middle：文字对齐图片之中间 buttom：文字对齐图片之底部

三、选择式表单 ＜form action="URL" method="post"＞ ＜select＞ ＜option＞ ＜option＞ .......... .......... ＜/select＞ ＜/form＞
A、＜select＞的属性
【1】栏位名称 -- name ＜select name="资料栏位名"＞
【2】设定显示的选项数 -- size ＜select size=个数＞
【3】多重选项 -- multiple ＜select multiple＞
B、＜option＞的属性
【1】定义选项的传回值 -- value ＜option value="传回值"＞
【2】预先选取的选项 -- selected ＜option selected＞

四、多列输入文字区表单 ＜form action="URL" method="post"＞ ＜textarea＞ .......... .......... ＜/textarea＞ ＜/form＞
【1】文字区的变数名称 -- name ＜textarea name=变数名称＞
【2】设定文字输入区宽度 -- cols ＜textarea cols=字元数＞
【3】设定文字输入区高度 -- rows ＜textarea rows=列数＞
【4】输入区设定预设字串 ＜textarea＞ 预设文字 ＜/textarea＞
【5】自动换行与否 -- wrap ＜textarea wrap=#＞ #号可为 off：表输入的文字超过栏宽时，不会自动换行（预设值） virtual：表输入的文字在超过栏宽时会自动换行
链接

一、连结至其他文件 ＜a href="/URL"＞说明文字或图片＜/a＞

二、连结至文件内之某一处（外部连结）
《1》起点
＜a href="档名#名称"＞..........＜/a＞
《2》终点 ＜a name="名称"＞

三、frame的超连结
【1粜碌匿榔骼聪允玖嵛募?-- _blank ＜a href="/URL" target=_blank＞
【2】显示连结文件於目前的frame -- _self ＜a href="/URL" target=_self＞
【3】以上一层的分割视窗显示连结文件 -- _parent ＜a href="/URL" target=_parent＞
【4】以全视窗显示连结文件 -- _top ＜a href="/URL" target=_top＞
【5】以特定视窗显示连结文件 --＜a href="/URL" target="特定视窗名称"＞
FRAME

一、分割视窗指令 ＜frameset＞..........＜/frameset＞
【1】垂直（上下）分割 -- rows
＜frameset rows=#＞ #号可为点数：如欲分割为100,200,300三个视窗，则
＜frameset rows=100,200,300＞；亦可以*号代表，如＜frameset rows=*,500,*＞
百分比：如＜frameset rows=30%,70%＞，各 项总和最好为100%
【2】水平（左右）分割 -- cols ＜frameset cols=点数或百分比＞

二ⅱ指定视窗内容 -- ＜frame＞
＜frameset cols=30%,70%＞    ＜frame＞    ＜frame＞ ＜/frameset＞
【1】指定视窗的文件名称 -- src ＜frame src=HTML档名＞
【2】定义视窗的名称 -- name
＜frame name=视窗名称＞
【3】设定文件与上下边框的距离 -- marginheight
＜frame marginheight=点数＞
【4】设定文件与左右边框的距离 -- marginwidth
＜frame marginwidth=点数＞
【5】设定分割视窗卷轴 -- scrolling
＜frame scrolling=#＞ #号可为 yes：固定出现卷轴
no：不出现卷轴 auto：自动判断文件大小需不需要卷轴（预设值）
【6】锁住分割视窗的大小 -- noresize ＜frame noresize＞

你现在要做的是，下载、安装、配置好以下的工具，版本不同的话操作可能会有些差异，具体的看它们的文档吧：

Struts 是用 Java 写的，应此它需要 JDK 1.2 或者更高版本。如果你用的是 JDK 1.4，就像我，XML parser 和 JDBC 2.0 Optional Package Binary 就已经被默认的包含了。

<?xml version="1.0"?>
<!DOCTYPE web-app
  PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
  "http://java.sun.com/j2ee/dtds/web-app_2_3.dtd">

<web-app>
  <!-- Action Servlet Configuration -->
  <servlet>
    <servlet-name>action</servlet-name>
    <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
    <init-param>
      <param-name>config</param-name>
      <param-value>/WEB-INF/struts-config.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <!-- Action Servlet Mapping -->
  <servlet-mapping>
    <servlet-name>action</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>

  <!-- The Welcome File List -->
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

  <!-- Struts Tag Library Descriptors -->
  <taglib>
    <taglib-uri>/WEB-INF/struts-bean.tld</taglib-uri>
    <taglib-location>/WEB-INF/struts-bean.tld</taglib-location>
  </taglib>

  <taglib>
    <taglib-uri>/WEB-INF/struts-html.tld</taglib-uri>
    <taglib-location>/WEB-INF/struts-html.tld</taglib-location>
  </taglib>

  <taglib>
    <taglib-uri>/WEB-INF/struts-logic.tld</taglib-uri>
    <taglib-location>/WEB-INF/struts-logic.tld</taglib-location>
  </taglib>
</web-app>

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE struts-config PUBLIC
          "-//Apache Software Foundation//DTD Struts Configuration 1.1//EN"
          "http://jakarta.apache.org/struts/dtds/struts-config_1_1.dtd">

<struts-config>
  <form-beans>
    <form-bean name="logonForm" 
      type="org.apache.struts.validator.DynaValidatorForm">
      <form-property name="username" type="java.lang.String"/>
      <form-property name="password" type="java.lang.String"/>
    </form-bean>
  </form-beans>

  <global-forwards>
    <forward   name="success"              path="/main.jsp"/>
    <forward   name="logoff"               path="/logoff.do"/>
  </global-forwards>

  <action-mappings>
    <action    path="/logon"
               type="org.monotonous.struts.LogonAction"
               name="logonForm"
               scope="session"
               input="logon">
    </action>

    <action    path="/logoff"
               type="org.monotonous.struts.LogoffAction">
      <forward name="success"              path="/index.jsp"/>
    </action>
  </action-mappings>

  <controller>
    <!-- The "input" parameter on "action" elements is the name of a
         local or global "forward" rather than a module-relative path -->
    <set-property property="inputForward" value="true"/>
  </controller>

  <message-resources parameter="org.monotonous.struts.ApplicationResources"/>
</struts-config>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>

<html:html locale="true">
<head>
  <title><bean:message key="index.title" /></title>
  <html:base/>
</head>

<body>
<html:errors/>
<html:form action="/logon">
  <bean:message key="prompt.username"/>
  <html:text property="username"/>
  <br/>
  <bean:message key="prompt.password"/>
  <html:password property="password"/>
  <br/>
  <html:submit>
    <bean:message key="index.logon"/>
  </html:submit>
</html:form>
</body>
</html:html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>

<html:html>
<head>
  <title><bean:message key="main.title"/></title>
  <html:base/>
</head>
<body>
<html:link forward="logoff">
<bean:message key="main.logoff"/>
</html:link>
</body>
</html:html>

index.title=Struts Homepage
prompt.username=Username
prompt.password=Password
index.logon=Log on
main.title=Struts Main page
main.logoff=Log off
error.password.mismatch=Invalid username and/or password.

package org.monotonous.struts;

import java.util.Locale;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionError;
import org.apache.struts.action.ActionErrors;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.util.MessageResources;
import org.apache.commons.beanutils.PropertyUtils;

public final class LogonAction extends Action {
    public ActionForward execute(
        ActionMapping mapping,
        ActionForm form,
        HttpServletRequest request,
        HttpServletResponse response)
        throws Exception {
        Locale locale = getLocale(request);
        MessageResources messages = getResources(request);

        // Validate the request parameters specified by the user
        ActionErrors errors = new ActionErrors();
        String username =
            (String) PropertyUtils.getSimpleProperty(form, "username");
        String password =
            (String) PropertyUtils.getSimpleProperty(form, "password");

        if ((username != "foo") || (password != "bar"))
            errors.add(ActionErrors.GLOBAL_ERROR,
                new ActionError("error.password.mismatch"));

        // Report any errors we have discovered back to the original form
        if (!errors.isEmpty()) {
            saveErrors(request, errors);
            return (mapping.getInputForward());
        }

        // Save our logged-in user in the session
        HttpSession session = request.getSession();
        // Do something with session...

        // Remove the obsolete form bean
        if (mapping.getAttribute() != null) {
            if ("request".equals(mapping.getScope()))
                request.removeAttribute(mapping.getAttribute());
            else
                session.removeAttribute(mapping.getAttribute());
        }

        // Forward control to the specified success URI
        return (mapping.findForward("success"));
    }
}

package org.monotonous.struts;

import java.util.Locale;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.util.MessageResources;

public final class LogoffAction extends Action {
    public ActionForward execute(
        ActionMapping mapping,
        ActionForm form,
        HttpServletRequest request,
        HttpServletResponse response)
        throws Exception {

        Locale locale = getLocale(request);
        MessageResources messages = getResources(request);
        HttpSession session = request.getSession();

        session.removeAttribute("userattrib");
        session.invalidate();

        // Forward control to the specified success URI
        return (mapping.findForward("success"));
    }
}

本文介绍servlet 容器的基本原理。现有两个Servlet容器，第一个很简单，第二个则是根据第一个写出。为了使第一个容器尽量简单，所以没有做得很完整。复杂一些的 servlet 容器 （包括 TOMCAT 4 和 5） 可以参考其他资料。

两个servlet容器都处理简单的servlet及staticResource。您可以使用 webroot/ 目录下的 PrimitiveServlet 来测试它。复杂一些的 servlet会超出这些容器的容量，创建复杂servlet容器不是本文的内容，所以在这里就不详细介绍了。

　　两个应用程序的类都封装在ex02.pyrmont 包下。在理解应用程序如何 运作 之前，您必须熟悉 javax.servlet.Servlet 接口。首先就来介绍这个接口。随后，就介绍 servlet 容器服务servlet 的具体内容。

　　javax.servlet.Servlet 接口

　　servlet编程，需要引用以下两个类和接口：javax.servlet 和 javax.servlet.http，在这些类和接口中，javax.servlet.Servlet接口尤为重要。所有的 servlet 必须实现这个接口或继承已实现这个接口的类。

　　Servlet 接口有五个方法，如下：

(1) 创建并返回一个包含基于客户请求性质的动态内容的完整的 HTML页面。

(2) 创建可嵌入到现有 HTML 页面中的一部分 HTML 页面（HTML 片段）。

(3) 与其它服务器资源（包括数据库和基于 Java 的应用程序）进行通信。

(4) 用多个客户机处理连接，接收多个客户机的输入，并将结果广播到多个客户机上。例如，Servlet 可
以是多参与者的游戏服务器。

(5) 当允许在单连接方式下传送数据的情况下，在浏览器上打开服务器至applet的新连接，并将该连
接保持在打开状态。当允许客户机和服务器简单、高效地执行会话的情况下，applet也可以启动客户浏览器和服务器之间的连接。可以通过定制协议或标准（如 IIOP）进行通信。

(6) 对特殊的处理采用 MIME 类型过滤数据，例如图像转换和服务器端包括（SSI）。

(7) 将定制的处理提供给所有服务器的标准例行程序。例如，Servlet 可以修改如何认证用户。

2．Servlet 的生命周期:

Servlet 的生命周期始于将它装入 Web 服务器的内存时，并在终止或重新装入 Servlet 时结束。

(1) 初始化
在下列时刻装入 Servlet：
=如果已配置自动装入选项，则在启动服务器时自动装入
=在服务器启动后，客户机首次向 Servlet 发出请求时
=重新装入 Servlet 时
装入 Servlet 后，服务器创建一个 Servlet 实例并且调用 Servlet 的 init() 方法。在初始化阶段，Servlet 初始化参数被传递给 Servlet 配置对象。

(2) 请求处理
对于到达服务器的客户机请求，服务器创建特定于请求的一个"请求"对象和一个"响应"对象。服务器调用 Servlet 的 service() 方法，该方法用于传递"请求"和"响应"对象。service() 方法从"请求"对象获得请求信息、处理该请求并用"响应"对象的方法以将响应传回客户机。service() 方法可以调用其它方法来处理请求，例如 doGet()、doPost() 或其它的方法。

(3) 终止
当服务器不再需要 Servlet, 或重新装入 Servlet 的新实例时，服务器会调用 Servlet 的 destroy() 方法。

[代码] <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME>

你会看到一个外部引入的文件，但会发现有一个类似外框的东西将其包围，可使用
[代码] <iframe name="content_frame" marginwidth=0 marginheight=0 width=100% height=30 src="import.htm" frameborder=0></iframe>

但你会发现还会有点问题，就是背景色不同，你只要在引入的文件import.htm中使用相同的背景色也可以，但如果你使用的是IE5.5的话，可以看看这篇关于透明色的文章 如果想引入的文件过长时不出现滚动条的话在import.htm中的body中加入scroll=no

2.<object>方式

[代码] <object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>

3.Behavior的download方式

[代码]
<span id=showImport></span>
<IE:Download ID="oDownload" STYLE="behavior:url(#default#download)" />
<script>
function onDownloadDone(downDate){
showImport.innerHTML=downDate
}
oDownload.startDownload('import.htm',onDownloadDone)
</script>

这篇文章说明了在 POSIX 系统 (Linux,Unix) 上使用 Unicode/UTF-8 所需要的信息. 在将来不远的几年里, Unicode 已经很接近于取代 ASCII 与 Latin-1 编码的位置了. 它不仅允许你处理处理事实上存在于地球上的任何语言文字, 而且提供了一个全面的数学与技术符号集, 因此可以简化科学信息交换.

UTF-8 编码提供了一种简便而向后兼容的方法, 使得那种完全围绕 ASCII 设计的操作系统, 比如 Unix, 也可以使用 Unicode. UTF-8 就是 Unix, Linux 已经类似的系统使用 Unicode 的方式. 现在是你了解它的时候了.

什么是 UCS 和 ISO 10646?

国际标准 ISO 10646 定义了 通用字符集 (Universal Character Set, UCS). UCS 是所有其他字符集标准的一个超集. 它保证与其他字符集是双向兼容的. 就是说, 如果你将任何文本字符串翻译到 UCS格式, 然后再翻译回原编码, 你不会丢失任何信息.

UCS 包含了用于表达所有已知语言的字符. 不仅包括拉丁语,希腊语, 斯拉夫语,希伯来语,阿拉伯语,亚美尼亚语和乔治亚语的描述, 还包括中文, 日文和韩文这样的象形文字, 以及 平假名, 片假名, 孟加拉语, 旁遮普语果鲁穆奇字符(Gurmukhi), 泰米尔语, 印.埃纳德语(Kannada), Malayalam, 泰国语, 老挝语, 汉语拼音(Bopomofo), Hangul, Devangari, Gujarati, Oriya, Telugu 以及其他数也数不清的语. 对于还没有加入的语言, 由于正在研究怎样在计算机中最好地编码它们, 因而最终它们都将被加入. 这些语言包括 Tibetian, 高棉语, Runic(古代北欧文字), 埃塞俄比亚语, 其他象形文字, 以及各种各样的印-欧语系的语言, 还包括挑选出来的艺术语言比如 Tengwar, Cirth 和 克林贡语(Klingon). UCS 还包括大量的图形的, 印刷用的, 数学用的和科学用的符号, 包括所有由 TeX, Postscript, MS-DOS，MS-Windows, Macintosh, OCR 字体, 以及许多其他字处理和出版系统提供的字符.

ISO 10646 定义了一个 31 位的字符集. 然而, 在这巨大的编码空间中, 迄今为止只分配了前 65534 个码位 (0x0000 到 0xFFFD). 这个 UCS 的 16位子集称为 基本多语言面 (Basic Multilingual Plane, BMP). 将被编码在 16 位 BMP 以外的字符都属于非常特殊的字符(比如象形文字), 且只有专家在历史和科学领域里才会用到它们. 按当前的计划, 将来也许再也不会有字符被分配到从 0x000000 到 0x10FFFF 这个覆盖了超过 100 万个潜在的未来字符的 21 位的编码空间以外去了. ISO 10646-1 标准第一次发表于 1993 年, 定义了字符集与 BMP 中内容的架构. 定义 BMP 以外的字符编码的第二部分 ISO 10646-2 正在准备中, 但也许要过好几年才能完成. 新的字符仍源源不断地加入到 BMP 中, 但已经存在的字符是稳定的且不会再改变了.

UCS 不仅给每个字符分配一个代码, 而且赋予了一个正式的名字. 表示一个 UCS 或 Unicode 值的十六进制数, 通常在前面加上 "U+", 就象 U+0041 代表字符"拉丁大写字母A". UCS 字符 U+0000 到 U+007F 与 US-ASCII(ISO 646) 是一致的, U+0000 到 U+00FF 与 ISO 8859-1(Latin-1) 也是一致的. 从 U+E000 到 U+F8FF, 已经 BMP 以外的大范围的编码是为私用保留的.

什么是组合字符?

UCS里有些编码点分配给了 组合字符.它们类似于打字机上的无间隔重音键. 单个的组合字符不是一个完整的字符. 它是一个类似于重音符或其他指示标记, 加在前一个字符后面. 因而, 重音符可以加在任何字符后面. 那些最重要的被加重的字符, 就象普通语言的正字法(orthographies of common languages)里用到的那种, 在 UCS 里都有自己的位置, 以确保同老的字符集的向后兼容性. 既有自己的编码位置, 又可以表示为一个普通字符跟随一个组合字符的被加重字符, 被称为 预作字符(precomposed characters). UCS 里的预作字符是为了同没有预作字符的旧编码, 比如 ISO 8859, 保持向后兼容性而设的. 组合字符机制允许在任何字符后加上重音符或其他指示标记, 这在科学符号中特别有用, 比如数学方程式和国际音标字母, 可能会需要在一个基本字符后组合上一个或多个指示标记.

组合字符跟随着被修饰的字符. 比如, 德语中的元音变音字符 ("拉丁大写字母A 加上分音符"), 既可以表示为 UCS 码 U+00C4 的预作字符, 也可以表示成一个普通 "拉丁大写字母A" 跟着一个"组合分音符":U+0041 U+0308 这样的组合. 当需要堆叠多个重音符, 或在一个基本字符的上面和下面都要加上组合标记时, 可以使用多个组合字符. 比如在泰国文中, 一个基本字符最多可加上两个组合字符.

什么是 UCS 实现级别?

不是所有的系统都需要支持象组合字符这样的 UCS 里所有的先进机制. 因此 ISO 10646 指定了下列三种实现级别:

级别1

不支持组合字符和 Hangul Jamo 字符 (一种特别的, 更加复杂的韩国文的编码, 使用两个或三个子字符来编码一个韩文音节)

级别2

类似于级别1, 但在某些文字中, 允许一列固定的组合字符 (例如, 希伯来文, 阿拉伯文, Devangari, 孟加拉语, 果鲁穆奇语, Gujarati, Oriya, 泰米尔语, Telugo, 印.埃纳德语, Malayalam, 泰国语和老挝语). 如果没有这最起码的几个组合字符, UCS 就不能完整地表达这些语言.

级别3

支持所有的 UCS 字符, 例如数学家可以在任意一个字符上加上一个 tilde(颚化符号,西班牙语字母上面的～)或一个箭头(或两者都加).

什么是 Unicode?

历史上, 有两个独立的, 创立单一字符集的尝试. 一个是 国际标准化组织(ISO) 的 ISO 10646 项目, 另一个是由(一开始大多是美国的)多语言软件制造商组成的协会组织的 Unicode 项目 . 幸运的是, 1991年前后, 两个项目的参与者都认识到, 世界不需要两个不同的单一字符集. 它们合并双方的工作成果, 并为创立一个单一编码表而协同工作. 两个项目仍都存在并独立地公布各自的标准, 但 Unicode 协会和 ISO/IEC JTC1/SC2 都同意保持 Unicode 和 ISO 10646 标准的码表兼容, 并紧密地共同调整任何未来的扩展.

那么 Unicode 和 ISO 10646 不同在什么地方?

Unicode 协会公布的 Unicode 标准 严密地包含了 ISO 10646-1 实现级别3的基本多语言面. 在两个标准里所有的字符都在相同的位置并且有相同的名字.

Unicode 标准额外定义了许多与字符有关的语义符号学, 一般而言是对于实现高质量的印刷出版系统的更好的参考. Unicode 详细说明了绘制某些语言(比如阿拉伯语)表达形式的算法, 处理双向文字(比如拉丁与希伯来文混合文字)的算法和 排序与字符串比较 所需的算法, 以及其他许多东西.

另一方面, ISO 10646 标准, 就象广为人知的 ISO 8859 标准一样, 只不过是一个简单的字符集表. 它指定了一些与标准有关的术语, 定义了一些编码的别名, 并包括了规范说明, 指定了怎样使用 UCS 连接其他 ISO 标准的实现, 比如 ISO 6429 和 ISO 2022. 还有一些与 ISO 紧密相关的, 比如 ISO 14651 是关于 UCS 字符串排序的.

考虑到 Unicode 标准有一个易记的名字, 且在任何好的书店里的 Addison-Wesley 里有, 只花费 ISO 版本的一小部分, 且包括更多的辅助信息, 因而它成为使用广泛得多的参考也就不足为奇了. 然而, 一般认为, 用于打印 ISO 10646-1 标准的字体在某些方面的质量要高于用于打印 Unicode 2.0的. 专业字体设计者总是被建议说要两个标准都实现, 但一些提供的样例字形有显著的区别. ISO 10646-1 标准同样使用四种不同的风格变体来显示表意文字如中文, 日文和韩文 (CJK), 而 Unicode 2.0 的表里只有中文的变体. 这导致了普遍的认为 Unicode 对日本用户来说是不可接收的传说, 尽管是错误的.

什么是 UTF-8?

首先 UCS 和 Unicode 只是分配整数给字符的编码表. 现在存在好几种将一串字符表示为一串字节的方法. 最显而易见的两种方法是将 Unicode 文本存储为 2 个 或 4 个字节序列的串. 这两种方法的正式名称分别为 UCS-2 和 UCS-4. 除非另外指定, 否则大多数的字节都是这样的(Bigendian convention). 将一个 ASCII 或 Latin-1 的文件转换成 UCS-2 只需简单地在每个 ASCII 字节前插入 0x00. 如果要转换成 UCS-4, 则必须在每个 ASCII 字节前插入三个 0x00.

在 Unix 下使用 UCS-2 (或 UCS-4) 会导致非常严重的问题. 用这些编码的字符串会包含一些特殊的字符, 比如 '\0' 或 '/', 它们在 文件名和其他 C 库函数参数里都有特别的含义. 另外, 大多数使用 ASCII 文件的 UNIX 下的工具, 如果不进行重大修改是无法读取 16 位的字符的. 基于这些原因, 在文件名, 文本文件, 环境变量等地方, UCS-2 不适合作为 Unicode 的外部编码.

在 ISO 10646-1 Annex R 和 RFC 2279 里定义的 UTF-8 编码没有这些问题. 它是在 Unix 风格的操作系统下使用 Unicode 的明显的方法.

UTF-8 有一下特性:

• UCS 字符 U+0000 到 U+007F (ASCII) 被编码为字节 0x00 到 0x7F (ASCII 兼容). 这意味着只包含 7 位 ASCII 字符的文件在 ASCII 和 UTF-8 两种编码方式下是一样的.
• 所有 >U+007F 的 UCS 字符被编码为一个多个字节的串, 每个字节都有标记位集. 因此, ASCII 字节 (0x00-0x7F) 不可能作为任何其他字符的一部分.
• 表示非 ASCII 字符的多字节串的第一个字节总是在 0xC0 到 0xFD 的范围里, 并指出这个字符包含多少个字节. 多字节串的其余字节都在 0x80 到 0xBF 范围里. 这使得重新同步非常容易, 并使编码无国界, 且很少受丢失字节的影响.
• 可以编入所有可能的 2³¹个 UCS 代码
• UTF-8 编码字符理论上可以最多到 6 个字节长, 然而 16 位 BMP 字符最多只用到 3 字节长.
• Bigendian UCS-4 字节串的排列顺序是预定的.
• 字节 0xFE 和 0xFF 在 UTF-8 编码中从未用到.

下列字节串用来表示一个字符. 用到哪个串取决于该字符在 Unicode 中的序号.

xxx 的位置由字符编码数的二进制表示的位填入. 越靠右的 x 具有越少的特殊意义. 只用最短的那个足够表达一个字符编码数的多字节串. 注意在多字节串中, 第一个字节的开头"1"的数目就是整个串中字节的数目.

例如: Unicode 字符 U+00A9 = 1010 1001 (版权符号) 在 UTF-8 里的编码为:

11000010 10101001 = 0xC2 0xA9

而字符 U+2260 = 0010 0010 0110 0000 (不等于) 编码为:

11100010 10001001 10100000 = 0xE2 0x89 0xA0

这种编码的官方名字拼写为 UTF-8, 其中 UTF 代表 UCS Transformation Format. 请勿在任何文档中用其他名字 (比如 utf8 或 UTF_8) 来表示 UTF-8, 当然除非你指的是一个变量名而不是这种编码本身.

什么编程语言支持 Unicode?

在大约 1993 年之后开发的大多数现代编程语言都有一个特别的数据类型, 叫做 Unicode/ISO 10646-1 字符. 在 Ada95 中叫 Wide_Character, 在 Java 中叫 char.

ISO C 也详细说明了处理多字节编码和宽字符 (wide characters) 的机制, 1994 年 9 月 Amendment 1 to ISO C 发表时又加入了更多. 这些机制主要是为各类东亚编码而设计的, 它们比处理 UCS 所需的要健壮得多. UTF-8 是 ISO C 标准调用多字节字符串的编码的一个例子, wchar_t 类型可以用来存放 Unicode 字符.

在 Linux 下该如何使用 Unicode?

在 UTF-8 之前, 不同地区的 Linux 用户使用各种各样的 ASCII 扩展. 最普遍的欧洲编码是 ISO 8859-1 和 ISO 8859-2, 希腊编码 ISO 8859-7, 俄国编码 KOI-8, 日本编码 EUC 和 Shift-JIS, 等等. 这使得 文件的交换非常困难, 且应用软件必须特别关心这些编码的不同之处.

最终, Unicode 将取代所有这些编码, 主要通过 UTF-8 的形式. UTF-8 将应用在

• 文本文件 (源代码, HTML 文件, email 消息, 等等)
• 文件名
• 标准输入与标准输出, 管道
• 环境变量
• 剪切与粘贴选择缓冲区
• telnet, modem 和到终端模拟器的串口连接
• 以及其他地方以前用ASCII来表示的字节串

在 UTF-8 模式下, 终端模拟器, 比如 xterm 或 Linux console driver, 将每次按键转换成相应的 UTF-8 串, 然后发送到前台进程的 stdin 里. 类似的, 任何进程在 stdout 上的输出都将发送到终端模拟器, 在那里用一个 UTF-8 解码器进行处理, 之后再用一种 16 位的字体显示出来.

只有在功能完善的多语言字处理器包里才可能有完全的 Unicode 功能支持. 而广泛用在 Linux 里用于取代 ASCII 和其他 8 位字符集的方案则要简单得多. 第一步, Linux 终端模拟器和命令行工具将只是转变到 UTF-8. 这意味着只用到 级别1 的 ISO 10646-1 实现 (没有组合字符), 且只支持那些不需要更多处理的语言象 拉丁, 希腊, 斯拉夫 和许多科学用符号. 在这个级别上, UCS 支持与 ISO 8859 支持类似, 唯一显著的区别是现在我们有几千种字符可以用了, 其中的字符可以用多字节串来表示.

总有一天 Linux 会当然地支持组合字符, 但即便如此, 对于组合字符串, 预作字符(如何可用的话)仍将是首选的. 更正式地, 在 Linux 下用 Unicode 对文本编码的首选的方法应该是定义在 Unicode Technical Report #15 里的 Normalization Form C.

在今后的一个阶段, 人们可以考虑增加在日文和中文里用到的双字节字符的支持 (他们相对比较简单), 组合字符支持, 甚至也许对从右至左书写的语言如希伯来文 (他们可不是那么简单的) 的支持. 但对这些高级功能的支持不应该阻碍简单的平板 UTF-8 在 拉丁, 希腊, 斯拉夫和科学用符号方面的快速应用, 以取代大量的欧洲 8 位编码, 并提供一个象样的科学用符号集.

我该怎样修改我的软件?

有两种途径可以支持 UTF-8, 我称之为软转换与硬转换. 软转换时, 各处的数据均保存为 UTF-8 形式, 因而需要修改的软件很少. 在硬转换时, 程序将读入的 UTF-8 数据转换成宽字符数组, 以在应用程序内部处理. 在输出时, 再把字符串转换回 UTF-8 形式.

大多数应用程序只用软转换就可以工作得很好了. 这使得将 UTF-8 引入 Unix 成为切实可行的. 例如, 象 cat 和 echo 这样的程序根本不需要修改. 他们仍然可以对输入输出的是 ISO 8859-2 还是 UTF-8 一无所知, 因为它们只是搬运字节流而没有处理它们. 它们只能识别 ASCII 字符和象 '\n' 这样的控制码, 而这在 UTF-8 下也没有任何改变. 因此, 这些应用程序的 UTF-8 编码与解码将完全在终端模拟器里完成.

而那些通过数字节数来获知字符数量的程序则需要一些小修改. 在 UTF-8 模式下, 它们必须不数入 0x80 到 0xBF 范围内的字节, 因为这些只是跟随字节, 它们本身并不是字符. 例如, ls 程序就必须要修改, 因为它通过数文件名中字符数来排放给用户的目录表格布局. 类似地, 所有的假定其输出为定宽字体, 并因此而格式化它们的程序, 必须学会怎样数 UTF-8 文本中的字符数. 编辑器的功能, 如删除单个字符, 必须要作轻微的修改, 以删除可能属于该字符的所有字节. 受影响有编辑器 (vi,emacs, 等等)以及使用 ncurses 库的程序.

Linux 核心使用软转换也可以工作得很好, 只需要非常微小的修改以支持 UTF-8. 大多数处理字符串的核心功能 (例如: 文件名, 环境变量, 等等) 都不受影响. 下列地方也许必须修改:

• 控制台显示与键盘驱动程序 (另一个 VT100 模拟器) 必须能编码和解码 UTF-8, 必须要起码支持 Unicode 字符集的几个子集. 从 Linux 1.2 起这些功能已经有了.
• 外部文件系统驱动程序, 例如 VFAT 和 WinNT 必须转换文件名字符编码. UTF-8 已经加入可用的转换选项的列表里了, 因此 mount 命令必须告诉核心驱动程序用户进程希望看到 UTF-8 文件名. 既然 VFAT 和 WinNT 无论如何至少已经用了 Unicode了, 那么 UTF-8 在这里就可以发挥其优势, 以保证转换中无信息损失.
• POSIX 系统的 tty 驱动程序支持一种 "cooked" 模式, 有一些原始的行编辑功能. 为了让字符删除功能工作正常, stty 必须在 tty 驱动程序里设置 UTF-8 模式, 因此它就不会把 0x80 到 0xBF 范围内的跟随字符也数进去了. Bruno Haible 那里已经有了一些 stty 和核心 tty 驱动 程序的 Linux 补丁 了.

C 对 Unicode 和 UTF-8 的支持

从 GNU glibc 2.1 开始, wchar_t 类型已经正式定为只存放独立于当前 locale 的, 32位的 ISO 10646 值. glibc 2.2 开始将完全支持 ISO C 中的多字节转换函数 (wprintf(),mbstowcs(),等等), 这些函数可以用于在 wchar_t 和包括 UTF-8 在内的任何依赖于 locale 的多字节编码间进行转换.

例如, 你可以写

  wprintf(L"Sch鰊e Gre!\n");

然后, 你的软件将按照你的用户在环境变量 LC_CTYPE (例如, en_US.UTF-8 或 de_DE.ISO_8859-1) 中选择的 locale 所指定的编码来打印这段文字. 你的编译器必须运行在与该 C 源文件所用编码相应的 locale 中, 在目标文件中以上的宽字符串将改为 wchar_t 字符串存储. 在输出时, 运行时库将把 wchar_t 字符串转换回与程序执行时的 locale 相应的编码.

注意, 类似这样的操作:

  char c = L"a"; 

  /* This function tests, whether the ISO 10646/Unicode character code
   * ucs belongs into the East Asian Wide (W) or East Asian FullWidth
   * (F) category as defined in Unicode Technical Report #11. In this
   * case, the terminal emulator should represent the character using a
   * a glyph from a double-wide font that covers two normal (Latin)
   * character cells. */

  int iswide(int ucs)
  {
    if (ucs < 0x1100)
      return 0;

    return
      (ucs >= 0x1100 && ucs <= 0x115f) || /* Hangul Jamo */
      (ucs >= 0x2e80 && ucs <= 0xa4cf && (ucs & ~0x0011) != 0x300a &&
       ucs != 0x303f) ||                     /* CJK ... Yi */
      (ucs >= 0xac00 && ucs <= 0xd7a3) || /* Hangul Syllables */
      (ucs >= 0xf900 && ucs <= 0xfaff) || /* CJK Compatibility Ideographs */
      (ucs >= 0xfe30 && ucs <= 0xfe6f) || /* CJK Compatibility Forms */
      (ucs >= 0xff00 && ucs <= 0xff5f) || /* Fullwidth Forms */
      (ucs >= 0xffe0 && ucs <= 0xffe6);
  }

  #include <wchar.h>
  int wcwidth(wchar_t wc);
  int wcswidth(const wchar_t *pwcs, size_t n);

现在 Java 编程语言已经广泛应用于互联网世界，早在 Sun 公司开发 Java 语言的时候，就已经考虑到对非英文字符的支持了。Sun 公司公布的 Java 运行环境（JRE）本身就分英文版和国际版，但只有国际版才支持非英文字符。不过在 Java 编程语言的应用中，对中文字符的支持并非如同 Java Soft 的标准规范中所宣称的那样完美，因为中文字符集不只一个，而且不同的操作系统对中文字符的支持也不尽相同，所以会有许多和汉字编码处理有关的问题在我们进行应用开发中困扰着我们。有很多关于这些问题的解答，但都比较琐碎，并不能够满足大家迫切解决问题的愿望，关于 Java 中文问题的系统研究并不多，本文从汉字编码常识出发，分析 Java 中文问题，希望对大家解决这个问题有所帮助。

汉字编码的常识

我们知道，英文字符一般是以一个字节来表示的，最常用的编码方法是 ASCII 。但一个字节最多只能区分256个字符，而汉字成千上万，所以现在都以双字节来表示汉字，为了能够与英文字符分开，每个字节的最高位一定为1，这样双字节最多可以表示64K格字符。我们经常碰到的编码方式有 GB2312、BIG5、UNICODE 等。关于具体编码方式的详细资料，有兴趣的读者可以查阅相关资料。我肤浅谈一下和我们关系密切的 GB2312 和 UNICODE。GB2312 码，中华人民共和国国家标准汉字信息交换用编码，是一个由中华人民共和国国家标准总局发布的关于简化汉字的编码，通行于中国大陆地区及新加坡，简称国标码。两个字节中，第一个字节（高字节）的值为区号值加32（20H），第二个字节（低字节）的值为位号值加32（20H），用这两个值来表示一个汉字的编码。UNICODE 码是微软提出的解决多国字符问题的多字节等长编码，它对英文字符采取前面加“0”字节的策略实现等长兼容。如 “A” 的 ASCII 码为0x41，UNICODE 就为0x00，0x41。利用特殊的工具各种编码之间可以互相转换。

Java 中文问题的初步认识

我们基于 Java 编程语言进行应用开发时，不可避免地要处理中文。Java 编程语言默认的编码方式是 UNICODE，而我们通常使用的数据库及文件都是基于 GB2312 编码的，我们经常碰到这样的情况：浏览基于 JSP 技术的网站看到的是乱码，文件打开后看到的也是乱码，被 Java 修改过的数据库的内容在别的场合应用时无法继续正确地提供信息。

String sEnglish = “apple”;

String sChinese = “苹果”;

String s = “苹果 apple ”;

sEnglish 的长度是5，sChinese的长度是4，而 s 默认的长度是14。对于 sEnglish来说， Java 中的各个类都支持得非常好，肯定能够正确显示。但对于 sChinese 和 s 来说，虽然 Java Soft 声明 Java 的基本类已经考虑到对多国字符的支持（默认 UNICODE 编码），但是如果操作系统的默认编码不是 UNICODE ，而是国标码等。从 Java 源代码到得到正确的结果，要经过 “Java 源代码-> Java 字节码-> ;虚拟机->操作系统->显示设备”的过程。在上述过程中的每一步骤，我们都必须正确地处理汉字的编码，才能够使最终的显示结果正确。

“ Java 源代码-> Java 字节码”，标准的 Java 编译器 javac 使用的字符集是系统默认的字符集，比如在中文 Windows 操作系统上就是 GBK ,而在 Linux 操作系统上就是ISO-8859-1，所以大家会发现在 Linux 操作系统上编译的类中源文件中的中文字符都出了问题，解决的办法就是在编译的时候添加 encoding 参数，这样才能够与平台无关。用法是

javac ?Cencoding GBK。

“ Java 字节码->虚拟机->操作系统”， Java 运行环境 （JRE） 分英文版和国际版，但只有国际版才支持非英文字符。 Java 开发工具包 （JDK） 肯定支持多国字符，但并非所有的计算机用户都安装了 JDK 。很多操作系统及应用软件为了能够更好的支持 Java ，都内嵌了 JRE 的国际版本，为自己支持多国字符提供了方便。

“操作系统->显示设备”，对于汉字来说，操作系统必须支持并能够显示它。英文操作系统如果不搭配特殊的应用软件的话，是肯定不能够显示中文的。

还有一个问题，就是在 Java 编程过程中，对中文字符进行正确的编码转换。例如，向网页输出中文字符串的时候，不论你是用

out.println(string);还是用

<%=string%>，都必须作 UNICODE 到 GBK 的转换，或者手动，或者自动。在 JSP 1.0中，可以定义输出字符集，从而实现内码的自动转换。用法是

<%@page contentType=”text/html;charset=gb2312” %>

但是在一些 JSP 版本中并没有提供对输出字符集的支持，（例如 JSP 0.92），这就需要手动编码输出了，方法非常多。最常用的方法是

String s1 = request.getParameter(“keyword”);

String s2 = new String(s1.getBytes(“ISO-8859-1”),”GBK”);

getBytes 方法用于将中文字符以“ISO-8859-1”编码方式转化成字节数组，而“GBK” 是目标编码方式。我们从以ISO-8859-1方式编码的数据库中读出中文字符串 s1 ，经过上述转换过程，在支持 GBK 字符集的操作系统和应用软件中就能够正确显示中文字符串 s2 。

Java 中文问题的表层分析及处理

.CLASS 文件存放在服务器端，由客户端的浏览器运行 APPLET ， APPLET 只起调入 FRAME 类等主程序的作用。界面包括 Textfield ，TextArea，List，Choice 等。

I.用 JDBC 执行 SELECT 语句从服务器端读取数据（中文）后，将数据用 APPEND 方法加到 TextArea（TA） ，不能正确显示。但加到 List 中时，大部分汉字却可正确显示。

将数据按“ISO-8859-1” 编码方式转化为字节数组，再按系统缺省编码方式 （Default Character Encoding） 转化为 STRING ，即可在 TA 和 List 中正确显示。

程序段如下：

//After reading the result from DB server，converting it to string.
dbbyte1 = dbstr2.getBytes(“iso-8859-1”);
dbstr1 = new String(dbbyte1);

在转换字符串时不采用系统默认编码方式，而直接采用“ GBK” 或者 “GB2312” ,在 A 和 B 两种情况下，从数据库取数据都没有问题。

II.处理方式与“取中文”相逆，先将 SQL 语句按系统缺省编码方式转化为字节数组，再按“ISO-8859-1”编码方式转化为 STRING ，最后送去执行，则中文信息可正确写入数据库。

程序段如下：

问题：如果客户机上存在 CLASSPATH 指向 JDK 的 CLASSES.ZIP 时（称为 A 情况），上述程序代码可正确执行。但是如果客户机只有浏览器，而没有 JDK 和 CLASSPATH 时（称为 B 情况），则汉字无法正确转换。

我们的分析：

1.经过测试，在 A 情况下，程序运行时系统的缺省编码方式为 GBK 或者 GB2312 。在 B 情况下，程序启动时浏览器的 JAVA 控制台中出现如下错误信息：

然后系统的缺省编码方式为“8859-1”。

2.如果在转换字符串时不采用系统缺省编码方式，而是直接采用 “GBK” 或“GB2312”，则在 A 情况下程序仍然可正常运行，在 B 情况下，系统出现错误：

3.在客户机上，把 JDK 的 CLASSES.ZIP 解压后，放在另一个目录中， CLASSPATH 只包含该目录。然后一边逐步删除该目录中的 .CLASS 文件，另一边运行测试程序，最后发现在一千多个 CLASS 文件中，只有一个是必不可少的，该文件是：

sun.io.CharToByteDoubleByte.class。

将该文件拷到服务器端和其它的类放在一起，并在程序的开头 IMPORT 它，在 B 情况下程序仍然无法正常运行。

4.在 A 情况下，如果在 CLASSPTH 中去掉 sun.io.CharToByteDoubleByte.class ，则程序运行时测得默认编码方式为“8859-1”，否则为 “GBK” 或 “GB2312” 。

如果 JDK 的版本为1.2以上的话，在 B 情况下遇到的问题得到了很好的解决，测试的步骤同上，有兴趣的读者可以尝试一下。

Java 中文问题的根源分析及解决

在简体中文 MS Windows 98 + JDK 1.3 下，可以用 System.getProperties() 得到 Java 运行环境的一些基本属性，类 PoorChinese 可以帮助我们得到这些属性。

类 PoorChinese 的源代码：
public class PoorChinese {
}
            
执行 java PoorChinese 后，我们会得到:

系统变量 file.encoding 的值为 GBK ，user.language 的值为 zh ， user.region 的值为 CN ，这些系统变量的值决定了系统默认的编码方式是 GBK 。

在上述系统中，下面的代码将 GB2312 文件转换成 Big5 文件，它们能够帮助我们理解 Java 中汉字编码的转化:

import java.io.*;

import java.util.*;

public class gb2big5 {

static int iCharNum=0;

public static void main(String[] args) {

System.out.println("Input GB2312 file, output Big5 file.");

if (args.length!=2) {

System.err.println("Usage: jview gb2big5 gbfile big5file");

System.exit(1);

String inputString = readInput(args[0]);

writeOutput(inputString,args[1]);

System.out.println("Number of Characters in file: "+iCharNum+".");

}

static void writeOutput(String str, String strOutFile) {

try {

FileOutputStream fos = new FileOutputStream(strOutFile);

Writer out = new OutputStreamWriter(fos, "Big5");

out.write(str);

out.close();

}

catch (IOException e) {

e.printStackTrace();

e.printStackTrace();

}

}

static String readInput(String strInFile) {

StringBuffer buffer = new StringBuffer();

try {

FileInputStream fis = new FileInputStream(strInFile);

InputStreamReader isr = new InputStreamReader(fis, "GB2312");

Reader in = new BufferedReader(isr);

int ch;

while ((ch = in.read()) > -1) {

iCharNum += 1;

buffer.append((char)ch);

}

in.close();

return buffer.toString();

}

catch (IOException e) {

e.printStackTrace();

return null;

}

}

}

编码转化的过程如下：

GB2312------------------>Unicode------------->Big5

执行 java gb2big5 gb.txt big5.txt ，如果 gb.txt 的内容是“今天星期三”，则得到的文件 big5.txt 中的字符能够正确显示；而如果 gb.txt 的内容是“情人节快乐”，则得到的文件 big5.txt 中对应于“节”和“乐”的字符都是符号“？”（0x3F），可见 sun.io.ByteToCharGB2312 和 sun.io.CharToByteBig5 这两个基本类并没有编好。

正如上例一样， Java 的基本类也可能存在问题。由于国际化的工作并不是在国内完成的，所以在这些基本类发布之前，没有经过严格的测试，所以对中文字符的支持并不像 Java Soft 所声称的那样完美。前不久，我的一位技术上的朋友发信给我说，他终于找到了 Java Servlet 中文问题的根源。两周以来，他一直为 Java Servlet 的中文问题所困扰，因为每面对一个含有中文字符的字符串都必须进行强制转换才能够得到正确的结果（这好象是大家公认的唯一的解决办法）。后来，他确实不想如此继续安分下去了，因为这样的事情确实不应该是高级程序员所要做的工作，他就找出 Servlet 解码的源代码进行分析，因为他怀疑问题就出在解码这部分。经过四个小时的奋斗，他终于找到了问题的根源所在。原来他的怀疑是正确的， Servlet 的解码部分完全没有考虑双字节，直接把 %XX 当作一个字符。（原来 Java Soft 也会犯这幺低级的错误！）

如果你对这个问题有兴趣或者遇到了同样的烦恼的话，你可以按照他的步骤 对Servlet.jar 进行修改：

找到源代码 HttpUtils 中的 static private String parseName ，在返回前将 sb（StringBuffer） 复制成 byte bs[] ，然后 return new String(bs,”GB2312”)。作上述修改后就需要自己解码了：

HashTable form=HttpUtils .parseQueryString(request.getQueryString())或者

form=HttpUtils.parsePostData(……)

千万别忘了编译后放到 Servlet.jar 里面。

关于 Java 中文问题的总结

Java 编程语言成长于网络世界，这就要求 Java 对多国字符有很好的支持。 Java 编程语言适应了计算的网络化的需求，为它能够在网络世界迅速成长奠定了坚实的基础。 Java 的缔造者 （Java Soft） 已经考虑到 Java 编程语言对多国字符的支持，只是现在的解决方案有很多缺陷在里面，需要我们付诸一些补偿性的措施。而世界标准化组织也在努力把人类所有的文字统一在一种编码之中，其中一种方案是 ISO10646 ，它用四个字节来表示一个字符。当然，在这种方案未被采用之前，还是希望 Java Soft 能够严格地测试它的产品，为用户带来更多的方便。

附一个用于从数据库和网络中取出 中文乱码的处理函数，入参是有问题的字符串，出参是问题已经解决了的字符串。

技术应用者提供解决方案

本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案，我愿意把这些与你分享，我会重点解释一些新手容易犯的错误(包括我自己也犯过的)，如果你已经是CSS高手，这些经验技巧可能已经都知道，如果你有更多的，希望可以帮我补充。

一.使用css缩写

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《 常用css缩写语法总结 》，这里就不展开描述。

二.明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

三.区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

四.取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：

可以写成

这样可以节省一些字节。

五.默认值

通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

六.不需要重复定义可继承的值

CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

七.最近优先原则

如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

在CSS文件中，你已经定义了元素p，又定义了一个class"update"

这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。

八.多重class定义

一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

在页面代码中，我们可以这样调用

这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

九.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

这段代码的CSS定义是：

你可以用下面的方法替代上面的代码

样式定义是：

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

十.不需要给背景图片路径加引号

为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：

可以写为

如果你加了引号，反而会引起一些浏览器的错误。

十一.组选择器(Group selectors)

当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

例如：定义所有标题的字体、颜色和margin，你可以这样写：

如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：

十二.用正确的顺序指定链接的样式

当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是"LVHA"，你可以记忆成"LoVe HAte"(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《 Link Specificity 》。

如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

十三.清除浮动

一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《 How To Clear Floats Without Structural Markup 》(注：本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《 Simple Clearing of Floats 》，又在《 Clearance 》和《 Super simple clearing floats 》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《 Floatutorial 》、《 Containing Floats 》和《 Float Layouts 》

十四.横向居中(centering)

这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

你可以这样定义使它横向居中：

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《 centricle’s css filter chart 》

十六.针对IE的优化

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

• 1.注释的方法
  • (a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
    html>body p {
    /* 定义内容 */
    }
  • (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
    * html p {
    /* declarations */
    }
  • (c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧：
    /* \*/
    * html p {
    declarations
    }
    /* */
• 2.条件注释(conditional comments)的方法

  另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

  <!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie.css" />
  <![endif]-->

十七.调试技巧：层有多大？

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：

当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。

空格和换行有助与阅读。