|
XHTML的一些基础知识，以及和HTML的一些区别 HTML语言是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本，XHTML和HTML,XML有什么不同，它增加了什么新功能，今天就让我们来初步认识一下XHTML。
XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven pemberton回答的关于XHTML的常见基础问题。
问：为什么XHTML 1.0相对HTML 4.0独立发展?
答：并不是这样。XHTML恰恰就是HTML 4.0的重新组织，(确切的说它是HTML 4.01，是一个修正版本的HTML 4.0，只不过以XHTML 1.0命名发行。) 它们在XML里的解释会有一些必要的差别，但另一方面，它们依然非常相似，我们可以把XHTML的工作看作是HTML 4.0基础上的延续。
问：XHTML 1.0如何实现XML标准?
答：XHTML就是一种XML应用。它采用XML的DTD文件格式定义，并运行在支持XML的系统上。这里要感谢XML的Namespaces功能，浏览器制造商不需要再创造新的私有标签(tags)，他们只需要在XHTML代码里包含XML代码片段，或者XML代码里包含XHTML代码片段。
问：用XHTML，网页设计师会遇到和HTML一样的浏览器兼容性问题吗?
答：希望不会。"严格的错误防御标准"将帮助浏览器对代码作出相同的响应，XML的namespaces功能使你可以增加自己的新标签而不需要特别的浏览器支持。现在我们所需要得到保证的就是：所有浏览器开发商一致并且完全遵守我们制定的CSS。写信给你的浏览器制造商，告诉你需要的CSS规范，你甚至可以检测浏览器是否听从你的设计。
问：谁可以采用XHTML 1.0设计?
答：因为XHTML非常简单易于实现，所以任何会用HTML的人都可以容易地使用XHTML。当使用XML浏览器的人们越来越多，更多的工作会被建议使用XML，那时候也许都将使用XHTML。
问：什么时候XHTML网站会普及?
答：好问题。我已经看到一些使用XHTML建立的网站，甚至在XHTML 1.0发布以前。我相信它将会有一个大发展，因为它太容易了。但是现在的用户代理（浏览器）对XHTML都不是完全支持，而是部分支持，所以XHTML的普及还需要用户代理的进一步支持。
问：我们如何将现有的HTMl转换为XHTML?
答：非常简单，因为它们非常相似。在W3C(www.w3c.org)网站上有一个开放原代码(open-source)的软件叫HTML Tidy，可以帮助你直接转换。
问：XHTML未来会怎样？
答：XHTML1.0仅仅是这个新HTML语言的第一步。新版本将没有向下兼容老浏览器的约束，可以有更多的发展空间。
首先，我们将进行一次彻底的清理，删除HTML 4.0中不兼容的元素。
其次，我们将XHTML模块化，允许人们在XML应用中使用XHTML模块(比如表格)，减少重复开发。同时也允许开发特别用途的设计，比如电话应用，只要属于XHTML的子集就可以保持兼容，人们可以创造他们自己的HTML。
常用的HTML编辑软件
Dreamweaver
Dreamweaver是美国Adobe(原Macromedia，2005年被Adobe收购)公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它不仅是优秀的WYSIWYG编辑器，更是优秀的代码编辑器，有代码加亮，代码提示等丰富功能，提供各种示例代码，并支持Javascript,PHP,ASP,JSP等多种脚本语言。最新版本为CS4，发布于2008年9月。
Frontpage
Microsoft公司出品的FrontPage是制作表单式网页的常用工具。FrontPage 2000是微软公司最新推出的面向21世纪网络办公自动化时代的大型套装软件0ffice 2000中新增的一个重要组件，也是0ffice 2000注重网络与Internet应用的一个重要体现。FrontPage 2000是目前最常用的中文版网页制作工具之一，简单易学。FrontPage 2000相对于前面的版本在网页向导、网页编辑、表单与框架页技术、音频与视频插件、动态HTML技术（DHTML，上世纪末兴起的一种web技术，现在已经过时）、数据库连接等方面进行了重大的改进，从而增强了网页制作的功能。如果服务器安装了Frontpage扩展组件，还可以支持Frontpage的站点计数器等功能。它从2007版的Office开始更名为Sharepoint Designer。
Delphi
由Borland公司推出的Delphi是全新的可视化编程环境，为我们提供了一种方便、快捷的Windows应用程序开发工具。它使用了Microsoft Windows图形用户界面的许多先进特性和设计思想，采用了弹性可重复利用的完整的面向对象程序语言(Object-Oriented Language)、当今世界上最快的编辑器、最为领先的数据库技术。对于广大的程序开发人员来讲，使用Delphi开发应用软件，无疑会大大地提高编程效率，而且随着应用的深入，您将会发现编程不再是枯燥无味的工作——Delphi的每一个设计细节，都将带给您一份欣喜。
eclipse
Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括 Java 开发工具（Java Development Tools，JDT）。
UltraEdit
UltraEdit 是能够满足你一切编辑需要的编辑器。UltraEdit 是一套功能强大的文本编辑器，可以编辑文本、十六进制、ASCII 码，完全可以取代记事本(如果你的电脑足够强大)，内建英文单字检查、C++ 及 VB 指令突显，可同时编辑多个文件，而且即使开启很大的文件速度也不会慢。软件附有 HTML 标签颜色显示、搜寻替换以及无限制的还原功能，一般大家喜欢用其来修改EXE 或 DLL 文件。
[编辑本段]
HTML基本标签参考
基 本 标 签
创建一个HTML文档 <html></html>
设置文档标题以及其他不在WEB网页上显示的信息 <head></head>
设置文档的可见部分 <body></body>
标 题 标 签
将文档的题目放在标题栏中 <title></title>
文 档 整 体 属 性
设置背景颜色，使用名字或十六进制值 <body bgcolor=?>
设置文本文字颜色，使用名字或十六进制值 <body text=?>
设置链接颜色，使用名字或十六进制值 <body link=?>
设置已使用的链接的颜色，使用名字或十六进制值 <body vlink=?>
设置正在被击中的链接的颜色，使用名字或十六进制值 <body alink=?>
文 本 标 签
创建预格式化文本 <pre></pre>
创建最大的标题 <h1></h1>
创建最小的标题 <h6></h6>
创建黑体字 <b></b>
创建斜体字 <i></i>
创建打字机风格的字体 <tt></tt>
创建一个引用，通常是斜体 <cite></cite>
加重一个单词（通常是斜体加黑体） <em></em>
加重一个单词（通常是斜体加黑体） <strong></strong>
设置字体大小，从1到7 <font size=?></font>
设置字体的颜色，使用名字或十六进制值 <font color=?></font>
链 接
创建一个超链接 <a href="URL"></a>
创建一个自动发送电子邮件的链接 <a href="mailto:EMAIL">.... </a>
创建一个位于文档内部的靶位 <a name="NAME"></a>
创建一个指向位于文档内部靶位的链接 <a href="#NAME"></a>
格 式 排 版
创建一个新的段落 <p>
将段落按左、中、右对齐 <p align=?>
插入一个回车换行符 <br>
从两边缩进文本 <blockquote>
</blockquote>
创建一个定义列表 <dl></dl>
放在每个定义术语词之前 <dt>
放在每个定义之前 <dd>
创建一个标有数字的列表 <ol></ol>
放在每个数字列表项之前，并加上一个数字 <li>
创建一个标有圆点的列表 <ul></ul>
放在每个圆点列表项之前，并加上一个圆点 <li>
一个用来排版大块HTML段落的标签，也用于格式化表 <div align=?>
图 形 元 素
添加一个图像 <img src="name">
排列对齐一个图像：左中右或上中下 <img src="name" align=?>
设置围绕一个图像的边框的大小 <img src="name" border=?>
加入一条水平线 <hr>
设置水平线的大小（高度） <hr size=?>
设置水平线的宽度（百分比或绝对像素点） <hr width=?>
创建一个没有阴影的水平线 <hr noshade>
表 格
创建一个表格 <table></table>
开始表格中的每一行 <tr></tr>
开始一行中的每一个格子 <td></td>
设置表格头：一个通常使用黑体居中文字的格子 <th></th>
表 格 属 性
设置围绕表格的边框的宽度 <table border=#>
设置表格格子之间空间的大小 <table cellspacing=#>
设置表格格子边框与其内部内容之间空间的大小 <table cellpadding=#>
设置表格的宽度－用绝对像素值或文档总宽度的百分比 <table width=# or %>
设置表格格子的水平对齐（左中右） <tr align=?> or <td align=?>
设置表格格子的垂直对齐（上中下） <tr valign=?> or <td valign=?>
设置一个表格格子应跨占的列数（缺省为1） <td colspan=#>
设置一个表格格子应跨占的行数（缺省为1） <td rowspan=#>
禁止表格格子内的内容自动断行回卷 <td nowrap>
窗 框
放在一个窗框文档的<body>标签之前，也可以嵌在其他窗框文档中 <frameset></frameset>
定义一个窗框内的行数，可以使用绝对像素值或高度的百分比 <frameset rows="value,value">
定义一个窗框内的列数，可以使用绝对像素值或宽度的百分比 <frameset cols="value,value">
定义一个窗框内的单一窗或窗区域 <frame>
定义在不支持窗框的浏览器中显示什么提示 <noframes></noframes>
窗 框 属 性
规定窗框内显示什么HTML文档 <frame src="URL">
命名窗框或区域以便别的窗框可以指向它 <frame name="name">
定义窗框左右边缘的空白大小，必须大于等于1 <frame marginwidth=#>
定义窗框上下边缘的空白大小，必须大于等于1 <frame marginheight=#>
设置窗框是否有滚动栏，其值可以是"yes","no","auto"，缺省时一般为"auto" <frame scrolling=VALUE>
禁止用户调整一个窗框的大小 <frame noresize>
表 单
对于功能性的表单，一般需要运行一个CGI小程序，HTML仅仅是产生表单的表面样子。
创建所有表单 <form></form>
创建一个滚动菜单，size设置在需要滚动前可以看到的表单项数目 <select multiple name="NAME" size=?></select>
设置每个表单项的内容 <option>
创建一个下拉菜单 <select name="NAME"></select>
设置每个菜单项的内容 <option>
创建一个文本框区域，列的数目设置宽度，行的数目设置高度 <textarea name="NAME" cols=40 rows=8></textarea>
创建一个复选框，文字在标签后面 <input type="checkbox" name="NAME">
创建一个单选框，文字在标签后面 <input type="radio" name="NAME" value="x">
创建一个单行文本输入区域，size设置以字符计的宽度 <input type=text name="foo" size=20>
创建一个submit（提交）按钮 <input type="submit" value="NAME">
创建一个使用图象的submit（提交）按钮 <input type="image" border=0 name="NAME" src="name.gif">
创建一个reset（重置）按钮 <input type="reset">
HTML标签大全
<!>字体效果
<h1>...</h1>标题字(最大)
<h6>...</h6>标题字(最小)
<b>...</b>粗体字
<strong>...</strong>粗体字(强调)
<i>...</i>斜体字
<em>...</em>斜体字(强调)
<dfn>...</dfn>斜体字(表示定义)
<u>...</u>底线
<ins>...</ins>底线(表示插入文字)
<strike>...</strike>横线
<s>...</s>删除线
<del>...</del>删除线(表示删除)
<kbd>...</kbd>键盘文字
<tt>...</tt> 打字体
<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
<font color=00ff00>...</font>字体颜色
<font size=1>...</font>最小字体
<font style =font-size:100 px>...</font>无限增大
//....................................................
HTML标签和属性的语义化
分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素，比如用<div>来代替<p>标记标题。
首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。
其次，语义化的网页的好处，最主要的就是对搜索引擎友好，又有良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。
具体的语义和用途在，XHTML1.0 TAG 参考中都已经说明，这里将一些容易遗忘或者混淆的TAGS和属性予以补充。
<Hx>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用，并且依据重要性递减。<h1>是最高的等级。
例如:
<h1>文档标题</h1>
<h2>次级标题</h2>
而不要使用
<div class=\"title\">文档标题</div>，或者<span class=\"title\">文档标题</span>.很明显搜索引擎对于后者是不会认为他是标题的。
<p>
段落标记，知道了<p>作为段落，你就不会再使用<br/>来换行了，而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行，而且换行的效果优于<br>。段落与段落之间的空隙也可以利用CSS来控制，很容易而且清晰的区分出段落与段落。在利用行高(line-height)很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。
例如：
<p>在利用行高(line-height)很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。</p>
<ul>、<ol>、<li>
<ul>无序列表，很常见的到了大家广泛的使用，<ol>有序列表也挺常用。在web标准化过程中，<ul>还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持CSS的时候，导航链接仍然很好使，就是美观方面差了一点。
例如:
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ol>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ol>
<dl>、<dt>、<dd>
dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。
例如：
<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl>
<dl>
<dt>上海滩</dt>
<dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
当年在香港播出以后，产生了巨大的轰动效应。</dd>
<dt>周润发</dt>
<dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。
风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd>
</dl>
<cite>、cite 、<q>、 <blockquote>
论坛和blog经常会用到引用别人的话，用<q>来标记简短的单行引用。Web浏览器会自动识别在<q> 之间的内容。不幸的是，IE不能识别，并且有些时候， <q>会引起一些可访问性(Accessibility)的问题。正因为如此，一些人建议尽量不要使用 <q>,手动的插入引用标记。在一个包含适当的类的 <span>中加入单行的引用内容，那么就可以用CSS来给引用设计样式了，但是这个没有语义上的意义。CSS可以用来定义引用的样式。注意，一段文章是不可以直接放在<blockquote>中的，引用的内容还必须包含在一个元素中，通常是<p>。属性cite既可以与<q> 一起用，也可以与<blockquote>一起用，用来提供引用内容的来源地址。需要注意的是，如果你使用 <span>来代替 <q>标记引用内容,那么你就不能使用 cite属性了。
例如:
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.
<p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p>
<p>The W3C says that <q cite=\"http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1\">The presentation of phrase elements
depends on the user agent.</q>.</p>
<blockquote cite=\"http://www.w3cn.org/\">
<p>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，
我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的\"浏览器大战\"，
为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，
每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，
例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；
针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。
这是一种恶性循环，是一种巨大的浪费。”</p>
</blockquote>
<em>、 <strong>
<em> 是用作强调的，<strong>是用作重点强调的。 大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，然而，这是没有必要的，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好，特别是斜体对于中文来说，那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。
例如:
<p><em>强调</em> 的文本通常用斜体显示，
然而， <strong>特别强调</strong> 的文本通常以粗体显示。</p>
<table>、<td>、<th>、< caption >、 summary
XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。<th>为表格标题，属性summar为摘要，<caption>标签为首部说明，<thead>标签为表格头部，<tbody>标签为表格主体内容，<tfoot>标签为表格尾部。
其中还可以使用scope 可用于取代headers属性，标记含有表头信息的单元格，其中各数值的内容如下：
row 指示当前单元格，为包含当前单元格的行提供相关的表头信息。
col 指示当前单元格，为根据当前单元格指定的列提供相应的表头信息。
rowgroup 指示当前单元格，为包含当前单元格的其余行组提供相关的表头信息。
colgroup 指示当前单元格，为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略形式。
例如:
<table id=\"mytable\" cellspacing=\"0\" summary=\"The technical specifications of the Apple PowerMac G5 series\">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
<th scope=\"col\" abbr=\"Configurations\" class=\"nobg\">Configurations</th>
<th scope=\"col\" abbr=\"Dual 1.8\">Dual 1.8GHz</th>
<th scope=\"col\" abbr=\"Dual 2\">Dual 2GHz</th>
<th scope=\"col\" abbr=\"Dual 2.5\">Dual 2.5GHz</th>
</tr>
<tr>
<th scope=\"row\" abbr=\"Model\" class=\"spec\">Model</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<th scope=\"row\" abbr=\"G5 Processor\" class=\"specalt\">G5 Processor</th>
<td class=\"alt\">Dual 1.8GHz PowerPC G5</td>
<td class=\"alt\">Dual 2GHz PowerPC G5</td>
<td class=\"alt\">Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<th scope=\"row\" abbr=\"Frontside bus\" class=\"spec\">Frontside bus</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>
</tr>
<tr>
<th scope=\"row\" abbr=\"L2 Cache\" class=\"specalt\">Level2 Cache</th>
<td class=\"alt\">512K per processor</td>
<td class=\"alt\">512K per processor</td>
<td class=\"alt\">512K per processor</td>
</tr>
</table>
<dfn>
<p><dfn title=\"Microsoft web browser\">Internet Explorer</dfn> is the most popular browser used underwater.</p>
<ins>, <del>
知道del，就不要再用<s>做删除线了，用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。
例如：
<p>It really was <ins cite=\"rarara.html\" datetime=\"20031024\">very</ins> good.</p>
<code>
表示是计算机代码。而默认样式为打字体。技术论坛和blog中经常遇到。
例如：
<code>p{margin:2px 0;}</code>
<abbr>、<acronym>
<abbr>标签是表示web页面上的简称，<acronym>标签为取首字母缩写。（注：这里把简称和缩写分开而论，简称范围比缩写大，取首字母的缩写用<acronym>标签）Windows的IE6.0以下的浏览器暂不支持<abbr>标签。 在IE里，你可以应用CSS给<acronym>但是不能应用给<abbr>标签，IE会为<acronym>标签的title属性显示提示，但是会忽略<abbr>标签。
例如:
<abbr title=\"Cascading Style Sheets\">CSS</abbr>
<acronym title=\"Cascading Style Sheets\">CSS</acronym>
alt属性和title属性
title属性用来为元素提供额外说明信息title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。
alt属性为不能显示图像、窗体或applets的用户代理（UA），指定替换文字。替换文字的语言由lang属性指定。
<img src=\"/images/logo.gif\" width=\"90\" height=\"27\" alt=\"webjx.com\"/>
<a href=\"http://www.baidu.com\" title=\"用Photoshop创建最佳黑白照片的方法\">用Photoshop创建最佳黑白照片的方法</a>
提高html页面显示速度
< TABLE BORDER="0" > < TR > < TD COLSPAN="2" >< !-- 顶端导航条的内容 -- >< /TD >< /TR > < TR > < TD ALIGN="LEFT" VALIGN="TOP" >< !-- 左边导航条的内容 -- >< /TD > <TD ALIGN="LEFT" VALIGN="TOP" >< !-- 页面内容区域 -- >< /TD > < /TR > < /TABLE >
修改后的布局代码如下所示：
< TABLE BORDER="0" WIDTH="100%" > < TR > < TD ALIGN="CENTER" VALIGN="TOP">< !-- 顶端导航条的内容 -- >< /TD > < /TR > < /TABLE > < TABLE BORDER="0"ALIGN="LEFT" > < TR > < TD ALIGN="LEFT" VALIGN="TOP" >< !-- 左边导航条的内容 -- ></TD > < /TR > < /TABLE > < TABLE BORDER="0" > < TR > < TD ALIGN="LEFT"VALIGN="TOP" >< !-- 页面内容区域 -- >< /TD > < /TR > < /TABLE >
例如，原先使用下面的代码：
Do while not objRS.EOF strOptionList = strOptionList & "< OPTIONVALUE=""" & objRS("ID") & _ """ >" & objRS("ProductName") objRS.MoveNextLoop Response.Write "< SELECT SIZE=""1"" >" & strOptionList & "< /SELECT >"
现在只需改动一行代码：
Do while not objRS.EOF strOptionList = strOptionList & "< OPTIONVALUE=""" & objRS("ID") & _ """ >" & objRS("ProductName") & "< /OPTION >"objRS.MoveNext Loop Response.Write "< SELECT SIZE=""1"" >" & strOptionList &""
如果原来使用的代码如下：
< UL > < LI >苹果 < LI >桔子 < LI >香蕉 < /UL >
那么现在改用：
< UL > < LI >苹果< /LI > < LI >桔子< /LI > < LI >香蕉< /LI > < /UL >
经过这些改动之后，浏览器显示页面的速度将会更快。 | 
