HTML入门基础教程相关知识

HTML入门基础教程

html是什么，什么是html通俗解答：
html是hypertext markup language的缩写，即超文本标记语言。html是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建web页面。html文件是带有格式标识符和超文本链接的内嵌代码的ascii 文本文件——html结构了解。

html文本是由 html命令组成的描述性文本，html 命令可以说明文字、图形、动画、声音、表格、链接等。
html网页结构包括头部 (head)、主体 (body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。

　　html是制作网页的基础，我们在网络营销中讲的静态网页，就是以html为基础制作的网页，早期的网页都是直接用html代码编写的，不过现在有很多智能化的网页制作软件（常用的如frontpage，dream weaver等）通常不需要人工去写代码，而是由这些软件自动生成的。尽管不需要自己写代买，但了解html代码仍然非常重要，了解认识html是什么？是学习网络营销与电子商务的重要技术基础知识。

自己动手建一个非常简单的网页，首先设置电脑显示扩展名方法，打开我的电脑，然后现在栏目工具-》文件夹选项-》查看-》高级设置中找到《隐藏已知文件类
型的扩展名》将其不勾选，然后点击运用
确认设置完成。实现建立一个新的文本文件，在桌面新建一个txt文档（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保
存）在文档里些一些文字，然后将此文件命名为“xxxx.html”。(随便你起一个什么名字,扩展名也可是HTM)。然后你可以用浏览器将它打开，你会看见最简单的自己做的页面。

可能想学习网页制作的同学才开始，不知道怎么做从什么地方入手，多么希望有人指点。

这里DIVCSS5是你学习网页制作的好地方，从这里你可以学习认识html，到DIV+CSS技术的掌握，通过DIV
CSS你可以完成你第一个网页，甚至制作一个实用网站。万事开头难就这样来的，希望你能好好学习，刻苦学习，耐心的学习任何技术或知识，会有好的结果。

转入正题，DIVCSS5通过通俗的说法给大家介绍下html及html作用,与div
css关系。
相信大家过以下文章：

1. 引入阅读

2. html通俗定义

3. html结构

4. 实例

5. 小总结

引入阅读 TOP
什么是HTML
：http://www.divcss5.com/html/h5.html
HTML页面结构：http://www.divcss5.com/html/h2.html
以上是基础问题建议先看了以上2篇文章再看以下内容。

html通俗定义 TOP
通俗的讲html是网页，一个文本文件，可以使用记事本打开，打开后里面有html自己的标签（这些标签各有各的功能），并有一定规律存在。

首先html使用浏览器打开，就能呈现你们的内容，而这些内容需要你放入特定的标签里。
html结构 TOP
先看一下最基本html结构：

html实例 TOP
以上代码可以直接拷贝，然后新建一个记事本，将代码拷贝入内，并以“.html”扩展名命名（如：index.html）（扩展名显示），保存这样就新建一个完整html网页，当然你使用浏览器打开，什么内容也没有。

假如你想显示“divcss5-测试内容”，那你只需在<body></body>中间打上字即可，完整代码如下：

<!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>
</head>
<body>
divcss5-测试内容
</body>
</html>

这样使用浏览器浏览一下

效果：

这样内容就显示了，这也是最基础的演示-自己不妨试试制作自己第一个网页。

总结： TOP
如果我们要想浏览器显示什么样的文章文字内容，我们只需要将文字文章放入“<body></body>”之间即可。

也许你就会想了，那我看见很多网页，都有图片，各式各样的文字，排版也各式各样的又怎么实现的呢？
这里那就告诉你，这个就是需要你真真切切一步一个脚印的自己学习的，这里就会涉及到了CSS话题的引入。

我们要想显示自己设计的不同样式漂亮的网页，那就需要CSS来实现了。通过CSS设置网页中对应区域的高、宽、背景、边框、文字大小、文字颜色等来实现。

如果你对CSS 网页制作仍然感兴趣，那就从DIVCSS5开始吧，如果上面的文章一遍看不懂，那就多看几遍，多实践即可。希望您能早日学习成功，同时DIVCSS5也开通了系统的CSS培训（包括了从html到CSS的系统学习），不妨试试。

相关知识：
1、html结构
2、html源代码
3、什么是html
4、html shtml区别
5、html标签元素
6、html编码
7、head标签
8、网页标题
9、utf-8
10、 GB2312

很多时候学网页制作开发的时候第一看到的印象深刻的就是html或htm后缀结尾的网页，我们把这类网页归结为静态网页，伪静态除外。

那html或htm与其它如php、asp、aspx、jsp等后缀结尾的网页有什么区别呢？
首先，html页面是静态的从头到尾没有程序的执行是纯的html语言，是不经过服务器处理就直接送出给浏览器呈现给浏览者。
而其他后缀的结尾的网页相对来说就是动态网页页面，动态页面是经过服务器对各自的程序翻译处理、数据库操作等处理然后才由浏览器把服务器处理完的数据程序给用户，而网页内容数据可以随后台数据改变而改变。

那html基本语言机构是怎么样的呢？
先看一下的html结构：
<html>
<head>

<title>放置文章标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> //这里是网页编码现在是gb2312
<meta name="keywords" content="关键字" />
<meta name="description" content="本页描述或关键字描述" />
</head>
<body>
这里就是正文内容
</body>
</html>

完整HTML包括html DOCTYPE声明、标题、head、网页编码声明等内容
最初使用完整的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>标题部分-www.divcss5.com</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="本页描述或关键字描述" />
</head>
<body>
内容
</body>
</html>

最新完整HTML结构-HTML源代码(推荐)：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>网页标题-www.divcss5.com</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="此网页描述" />
</head>
<body>
网页正文内容-WWW.DIVCSS5.COM -DIVCSS5提供
</body>
</html>

无论是html还是其它后缀的动态页面其html语言结构都是这样的，只是在命名网页文件时以不同的后缀结尾。
1、无论是动态还是静态页面都是以“<html>”开始，然后在网页最后以“</html>”结尾。
2、“<html>”后接着是“<head>”页头，其在<head></head>中的内容是在浏览器中内容无法显示的，这里是给服务器、浏览器、链接外部JS、链接CSS样式等区域，而里面“<title></title>”中放置的是网页标题，可在浏览器最左上看见如图：

TITLE显示位置图

3、接着“<meta name="keywords" content="关键字" /> <meta
name="description" content="本页描述或关键字描述" />
”这两个标签里的内容是给搜索引擎看的说明本页关键字及本张网页的主要内容等SEO可以用到。
4、接着就是正文“<body></body> ”也就是常说的body区
，这里放置的内容就可以通过浏览器呈现给用户，其内容可以是table表格布局格式内容，也可以DIV布局的内容，也可以直接是文字。这里也是最主要区
域，网页的内容呈现区。
5、最后是以“</html> ”结尾，也就是网页闭合。

以上是一个完整的最简单的html语言基本结构，通过以上可以再增加更多的样式和内容充实网页。
注意：网页一般的根据xhtml标准都要求每个标签闭合，如：以<html>
开始，以</html>闭合；如果没有闭合如<meta name="keywords" content="关键字"
/>就没有</meta> 就要<meta 内容。。。 />来完成闭合。

以上就是通俗来讲的最简单的html语言结构，如果需要看更多更丰富的html语言结构，可打开一个网站的网页，然后点击浏览器的“查看”--然后点击“查看源代码”即可看见该网页的html语言结构，这样可以根据此源代码来分析此网页的HTML语言结构与内容。

源代码(源文件)是指网页的html代码现在这里可以加上CSS代码。

网页源代码怎么看或源文件怎么看：
第一种：打开一个网页后点击鼠标的右键就会有"查看源文件"，操作鼠标右键--->查看源文件即可弹出一个记事本，而记事本内容就是此网页的html代码。可能会碰到一些网页鼠标右键无反应或提出提示框，那是因为做网页的加入了JS代码来禁止用户查看源文件代码或复制网页内容，但是这种方法也没用，只有你稍微懂得以下第二种方法即可查看此网页的源代码源文件。

源文件、源代码样式图

第二种：通过浏览器状态栏或工具栏中的点击 “查看”然后就用一项“查看源代码”，点击查看源代码即可查看此网页的源代码源文件。
在微软IE下截图：

在微软IE下查看--->源文件即可查看此网页代码在傲游浏览器下截图：

查看别人网页的源代码可以为我们制作网页时候有帮助，以后将介绍查看源代码更多方法及怎么运用到别人的源代码文件。

DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。

要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效,也就是说如果没有这个DOCTYPE声明将会导致CSS失效-css无效，特别是没有声明或声明不正确将在标准浏览器下更是不能正常显示。

DOCTYPE声明
开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。

查看很多使用XHTML标准开发的网站，第一行就是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，会发现同样的代码。

而另一些符合标准的站点的代码则如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

那么这些代码有什么含义？一定要放置吗？
什么是DOCTYPE
上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。
要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。

XHTML 1.0 提供了三种DTD声明可供选择：
* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
我们选择什么样的DOCTYPE
理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。
注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。
打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难。呵呵，有点抽象了，这个概念需要我们在应用过程中逐步领会。
补充
DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

一般可以用简单方法可以选择标准的DOCTYPE声明，通过Adobe Dreamweaver软件来新建“CTRL+N”将弹出

然后点击左下角的“首选参数”来配置,以上即是DIV+CSS网站总结关于DOCTYPE声明及DOCTYPE声明的作用介绍。

推荐DOCTYPE声明（常用DOCTYPE声明）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DIVCSS5推荐使用最新简便DOCTYPE声明方法：

<!DOCTYPE html>
<html>
<head>
其它内容....
....
</html>

浏览过此页用户还浏览以下内容：
UTF-8 GBK UTF8 GB2312之间的区别和关系

html网页中head之script标签
什么是script标签?
script标签通常放置在一个网页的头部标签head标签内的用于链接外部JS文件外部资源标签，<script> 标签最常见的用途是链接外部js，外部资源。

script实例
<script src="js/index.js" type="text/javascript"></script>

script使用实例演示

链接外部JS时候script 标签的内容结构解释
src的值为外部资源地址，这里是js文件的地址,相当于link标签href链接外部css文件一样CSS引用
type规定被链接文档的 MIME 类,这里是值为text/javascript

div+css通过对head标签内script“<script >”标签讲解，希望对大家有帮助。

特别说明<script>标签和link标签一样不一定必须放置在<head></head>标签内,可以适当放置在<body>下</body>以上部分，效果相同，但是推荐标准的放置在head标签内。

接下来我们来了解html网页标签（html标签），简单的理解网页标签即是网页浏览器识别符，就像一个人名字张三、李四代表人的姓名一样。这里说明的是在网页程序中不同的标签有着不同的意义，也代表不同功能和样式。

标签

在一个常见html网页中有很多不同的标签，接下来我们来认识下
第一，html网页标签是放入以“<”开始，“>”结束尖括号有意义单词（系统、程序、浏览器默认单词），如<div>这就是div标签。
第二，网页标签不是随便自己命名，如<p>、<br>、<div>等都是有意义而且是浏览器支持的标签，不能自己想当然的自己将一个单词字母放如尖括号里就作为标签，即使将自己命名标签作为标签使用浏览器都不会解释网页也不会显示。
第三，认识常见标签及标签意义
<html> </html>这是一对超文本开始与结束标签
<head></head>是一对头部声明标签，如标题、JS链接、CSS链接都是放入此对标签内
<title></title>是标题标签，此标签内内容是在浏览器最左上角标题显示，在内容不会显示，同时一个网页里具有唯一性（使用一次并且放入head标签内）
<body></body>是一定内容标签，即要显示内容都放入此标签内。
<div> </div> div标签也是div css所说的div标签。
<p></p> 是一对段落标签
<br />换行标签-
p与br区别
<font>字体声明标签，可在此标签内设置文字的CSS样式
<span>此标签与div标签相似
<b></b>和<strong></strong>都是加粗标签代表css样式中font-weight相当于加粗文字，
例：<b>我是div+css</b>,这样“我是div+css”被加粗显示。
Table、tr、td 对一组表格标签

等等... ...
以上是常见的html标签，通过什么是标签，让大家知道标签是网页中用于浏览器识别标签，是浏览器程序默认系统默认许可标签，同时标签不能自己想怎么命名就怎么命名。

br与p标签区别，br和p标签认识之div+css开发时候常用换行标签
接下来，我们介绍下html中常遇见和常用到的<br />和<p>标签之间的区别及用法，以及使用css对他们控制设置属性样式——扩展知识css换行，css不换行。

首先，相同之处是br和p都是有换行的属性及意思
其次，区别<br /.>是只需一个单独使用，而<p>和</p>是一对使用
再次，br标签是小换行提行，p标签是大换行（分段）各行作用。

Br实例，特别注意是br的web标准是<br />,而如果用<br>没有"/"虽然效果相同，但是是不符合w3c标准的。

这个是<p>标签实例，可以看出使用p标签是换了一个大行，有一个空白行样式。
在未对p设置css样式时候，一般使用一个<p>段落标签效果等于使用两个<br />换行标签效果。
说明如下图示意图：

上图表现的正是两个br标签等于一个p实例

使用p标签的时候需要注意的是需要<p>和</p>是一对配合使用的，可见以上图例即可了解与理解。

当然可以让p标签换行与br换行一样没有空白，可以使用css对对应p标签进行设置margin:0; padding:0;即可实现，实例p{ margin:0; padding:0;}，即可实现<p>等于一个<br />。

以上是div css网给大家通俗介绍br“<br />”和p“<p>”标签用法。

什么是伪静态,伪静态作用
伪静态即是网站本身是动态网页如.php、.asp、.aspx等格式动态网页有时这类动态网页还跟“?”加参数来读取数据库内不同资料。很典型的案例即
是discuz论坛系统，后台就有一个设置伪静态功能，开启伪静态后，动态网页即被转换重写成静态网页类型页面，通过浏览器访问地址和真的静态页面没区
别。前提服务器支持伪静态重写URL Rewrite功能。

需要伪静态功能地方
考虑搜索引擎优化SEO，将动态网页通过服务器处理成静态页面，如www.xxx.com/jk/fd.php?=12这样的动态网页处理成www.xxx.com/jk-fd-12.html这样格式静态页面，常见的论坛帖子页面，都是经过伪静态处理成静态页面格式html页面。
考虑网站所用的程序语言不易被发现，经过重写来伪静态来将动态网页的程序后缀变为html的静态页面格式。

伪静态的利与弊
当然犹如一篇文章的作者所说的："如果流量稍大一些使用伪静态就出现CPU使用超负荷，我的同时在线300多人就挂了，而不使用伪静态的时候同时在线超500人都不挂，我的IIS数是1000。”
　　确实是这样的，由于伪静态是用正则判断而不是真实地址，分辨到底显示哪个页面的责任也由直接指定转由CPU来判断了，所以CPU占有量的上升，确实是伪静态最大的弊病。
　　我们应该选择伪静态还是真静态？
　　1、使用真静态和假静态对SEO来说没有什么区别
　　2、使用真静态可能将导致硬盘损坏并将影响论坛性能
　　3、使用伪静态将占用一定量的CPU占有率，大量使用将导致CPU超负荷
　　4、最重要的一点，我们要静态是为了SEO
　　所以：
　　1、使用真静态的方法可以直接排除了，因为无论怎么生成，对硬盘来说都是很伤的。
　　2、既然真伪静态的效果一样，我们就可以选择伪静态了。
　　3、但是伪静态大量使用会造成CPU超负荷。
　　4、所以我们只要不大量使用就可以了。
　　5、既然静态只是给SEO看的，我们只需要伪静态给SEO就行了，不需要给用户使用。
　　6、所以我们只要在专门提供给SEO爬的Archiver中使用伪静态就可以了。
　　7、谢谢大家耐心看我写的文章。
　　8、有何不解的地方或是有不同的看法欢迎提出。
　　关于伪静态和真静态的评论

　　真正的静态化和伪静态还是有本质的区别的。为浏览用户处理一个纯粹htm和一个调用多个数据的php在CPU的使用率方面明显前者少。记得原来有个人说html下载硬盘读写频繁，他这么说好像读取数据库不用读写磁盘似的，何况还有一大堆缓存的零散php也是放在硬盘的，这些读取不用磁盘操作么？可笑。
　　读取单个htm+图片Flash等附件就可以实现的目的，何苦要读数据库又要读php缓存文件又要重新整合数据输出再+图片Flash等附件这么大费
周章呢？CMS首页不需要很多的互动的，论坛那一套不应该拿到这里来用，相反应该更多考虑的是：美观！兼容！信息的直观！性能！还有稳定！

伪静态查考-百度百科伪静态

具体伪静态实现可以根据自己所用的语言写的网站去百度或谷歌搜索实现方法-css介绍。

Html div
这里html div是指html源代码里的div标签。

如在html中DIV代码片段：
<div class="yangshi">演示</div>

Div作用
Div起分割作用，分割内容使用的常用标签。DIV+CSS更是起到分割与设置对应样式作用。

div演示代码：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div 演示</title>
<style type="text/css">
.yangshi{ color:#F00;}/* 设置颜色为红色 */
.yangshi2{ color:#0F0;}/* 设置颜色为绿色 */
</style>
</head>

<body>
<div class="yangshi">设置我颜色为红色</div>
<div class="yangshi2">设置我颜色为绿色</div>
</body>
</html>

div css的html样式结果图：

说明：以上使用了个div分别隔开了“设置我颜色为红色”和“设置我颜色为绿色”文字，并分别设置了文字样式。

总结：
Div是Html标签之一，div具有分割内容作用，div与CSS样式可让网页实现各种样式效果。

px em pt单位区别换算公式

1. 认识3单位

2. 单位换算

3. em单位介绍

4. 推荐单位PX(像素)

PX\EM\PT单位介绍 - TOP
px单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的国内推荐；
em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多；
pt单位名称为点（Point），绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用。

1. 以前IE无法调整那些使用px作为单位的字体大小,但现在几乎IE都支持在这里也推荐使用PX作为单位;

2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;

3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的，QQ截图也是使用PX作为长度宽度单位。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

em与px换算 - TOP
任意浏览器的默认字体高度16px（16像素）。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为
16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em单位有如下特点： - TOP

　　1. em的值并不是固定的;

　　2. em会继承父级元素的字体大小。

我们在写CSS的时候如果要用em为单位，需要注意两点：

　　1. body选择器中声明Font-size=62.5%;

　　2. 将你的原来的px数值除以10，然后换上em作为单位;

　　3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

　　也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

　　但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义
的字体大小，而是稍大一点。这个问题
Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有
其他的解释。

推荐网页单位 - TOP
所以为了单位换算错误推荐使用PX（像素）作为网页制作单位。

以上为大家介绍了px em pt单位，及换算方式，一般现在我们使用长度单位都以px为长度单位。这里我们也推荐使用以px（像素）为网页的尺寸长度单位，符合浏览器的像素单位，同时也为了方便计算长度尺寸。

1. 什么是虚拟主机

2. 绑定域名

3. 默认首页

4. FTP

5. MX记录

6. 虚拟主机目录

1、什么是虚拟主机 TOP
虚拟主机（Virtual Host Virtual
Server）又称网站空间或网络空间网页空间是使用特殊的软硬件技术，把一台计算机主机分成一台台“虚拟”的主机，每一台虚拟主机都具有独立的域名和
IP地址（或共享的IP地址），具有完整的Internet服务器功能。在同一台硬件、同一个操作系统上，运行着为多个用户打开的不同的服务器程序，互不
干扰；而各个用户拥有自己的一部分系统资源（IP地址、文件存储空间、内存、CPU时间等）。虚拟主机之间完全独立，在外界看来，
每一台虚拟主机和一台独立的主机的表现完全一样。

随着业界的发展，虚拟主机从最开始的雏形模式慢慢的走向了高端模式。在虚拟主机上，越来越多的功能被挖掘，他将是网络的主流。

2、什么是绑定域名 TOP
绑定域名也就是“主机名头”，简单的说，如果我们希望一个域名访问虚拟主机，那么我们需要做的事情是：
第一步：将域名的IP解析到虚拟主机所在服务器的IP。
第二步，将虚拟主机绑定该域名。
做完以上两步，即可用域名访问空间了。
什么是国际域名和国内域名
互联网上的域名可谓千姿百态，但从域名的结构来划分，总体上可把域名分成两类，一类称为“国际顶级域名”（简称“国际域名”），一类称为“国内域名”。

一般国际域名的最后一个后缀是一些诸如.com，.net，.gov，.edu的”国际通用域”，这些不同的后缀分别代表了不同的机构性质。比如.com表示的是商业机构，.net表示的是网络服务机构，.gov表示的是政府机构，.edu表示的是教育机构

3、什么是默认首页 TOP
默认首页即默认文档。他是指在访问一个文件目录的时候自动定位的一个文件。比如您空间内有一个目录/bbs，如果您在这个目录中有许多不同名字的文件，但
是您希望在输入网址www.abc.com/bbs的时候，默认访问其中一个叫做index.htm的文件，那么您就需要将默认首页设置为
Index.htm，当然，您也可以设置其他的比如zgsj.cgi等

常见默认首页顺序:index.html,index.php,index.shtml,Default.aspx 等可根据你自己网页实际定顺序

4、什么是FTP TOP
FTP(FileTransfer
Protocol,文件传输协议)是Internet上使用非常广泛的一种通讯协议。它是由支持Internet文件传输的各种规则所组成的集合，这些规
则使Internet用户可以把文件从一个主机拷贝到另一个主机上，因而为用户提供了极大的方便和收益

5、什么是MX记录 TOP
MX记录也叫做邮件路由记录，用户可以将该域名下的邮件服务器指向到自己的mail server上，然后即可自行操控所有的邮箱设置。您只需在线填写您服务器的IP地址，即可将您域名下的邮件全部转到您自己设定相应的邮件服务器上。

简单的说，通过操作MX记录，您才可以得到以您域名结尾的邮局。

6、FTP里的几个文件夹分别有什么用处 TOP
虚拟主机开通成功之后，会在您的FTP里面自动生成4个文件夹，分别是："databases","logofiles"
"others","wwwroot",他们作用如下：

1、wwwroot文件夹：该文件夹内存放可以通过web访问的文件，您需要将您对外发布的网站文件上传到该目录下，输入域名访问到的文件将是该文件夹下的文件。

2、databases文件夹：该文件夹同logofiles、others文件夹一样，属于不可通过web访问的文件
夹，即用户无法通过输入网址来访问这些文件夹下的文件，您可以在这些文件夹下上传一些不希望别人能够访问的文件。比如您可以将access数据库存放在
databases文件夹下，这样可以最大化的保证您的数据库安全。

3、others文件夹：该站点存放不可以通过http方式下载的文件。

相关知识：
1、ftp上传网页方法
2、DIV+CSS网页开发工具

注意HTML的语言编码的重要性

1.
charset编码重要性

2.
charset在html什么地方

3.
charset标签

4.
编码种类

5.
charset utf-8介绍

6.
charset GB2312介绍

7.
推荐网页编码

8.
因编码导致网页兼容

1、编码重要性 - TOP

编码可导致浏览者通过IE时候网页乱码，也可导致div+css的兼容性Hack。
2、编码的位置 - TOP

一般这段网页编码放在html网页中的<head>和</head>中间。

3、html编码样式 - TOP

4、常用html编码种类 - TOP

国内常用的流行的有utf-8、gb2312这两种。一般这两种类型就能满足国内网页编码需求。当然程序和数据库中也会用到这两种编码类型来处理网页和存储数据类型。

UTF-8 有一下特性: - TOP

1. UCS 字符 U+0000 到 U+007F (ASCII) 被编码为字节 0x00 到 0x7F (ASCII 兼容). 这意味着只包含 7 位 ASCII 字符的文件在 ASCII 和 UTF-8 两种编码方式下是一样的.

2. 所有 >U+007F 的 UCS 字符被编码为一个多个字节的串, 每个字节都有标记位集. 因此, ASCII 字节 (0x00-0x7F) 不可能作为任何其他字符的一部分.

3. 表示非 ASCII 字符的多字节串的第一个字节总是在 0xC0 到 0xFD 的范围里, 并指出这个字符包含多少个字节. 多字节串的其余字节都在 0x80 到 0xBF 范围里. 这使得重新同步非常容易, 并使编码无国界, 且很少受丢失字节的影响.

4. 可以编入所有可能的 231个 UCS 代码

5. UTF-8 编码字符理论上可以最多到 6 个字节长, 然而 16 位 BMP 字符最多只用到 3 字节长.

6. Bigendian UCS-4 字节串的排列顺序是预定的.

7. 字节 0xFE 和 0xFF 在 UTF-8 编码中从未用到.

GB2312 有一下特性: - TOP

GB2312标准共收录6763个汉字，其中一级汉字3755个，二级汉字3008个；同时，GB2312收录了包括拉丁字母、希腊字母、日文平假名及片假名字母、俄罗斯语西里尔字母在内的682个全形字符。

GB2312的出现，基本满足了汉字的计算机处理需要，它所收录的汉字已经覆盖99.75%的使用频率。GB2312中对所收汉字进行了“分区”处理，每区含有94个汉字/符号。这种表示方式也称为区位码。

01-09区为特殊符号。

16-55区为一级汉字，按拼音排序。

56-87区为二级汉字，按部首/笔画排序。

10-15区及88-94区则未有编码。

举例来说，“啊”字是GB2312之中的第一个汉字，它的区位码就是1601。字节结构在使用GB2312的程序中，通
常采用EUC储存方法，以便兼容于ASCII。每个汉字及符号以两个字节来表示。第一个字节称为“高位字节”，第二个字节称为“低位字节”。
“高位字节”使用了0xA1-0xF7(把01-87区的区号加上0xA0)，“低位字节”使用了0xA1-0xFE(把01-94加上0xA0)。例如
“啊”字在大多数程序中，会以0xB0A1储存。（与区位码对比：0xB0=0xA0+16,0xA1=0xA0+1）。

所以GB2312编码中汉字区码的十进制是从176到247，位码是从161到255.之所以存储了6763小于82*94=6768，是因为在区码为215，位码为250-254之间共五个编码没有汉字编码，所以6768-5=6763个。

GB2312编码可以通俗理解为国内通用的语言。

推荐charset使用编码 - TOP
UTF-8可以通俗理解简体繁体可用此编码如台湾和内地使用此编码。

因编码导致网页兼容错误问题： - TOP

如果编码混排将使网页乱码也叫不兼容，特别是在CSS注解中使用了编码混排将导致css hack。

希望以后在制作网页的时候千万不要忘记对网页编码的声明。

浏览过此页用户还浏览以下内容：
UTF-8 GBK UTF8 GB2312之间的区别和关系

dl dt dd认识及dl dt dd使用方法

<dl> 标签用于定义列表类型标签。
如标题、标题对应列表效果。
代码如下：

<html>
<body>
<h1>一个定义列表：</h1>
<dl>
<dt>css网站</dt>
<dd>网址为www.divcss5.com</dd>
<dt>div css网站</dt>
<dd>网址为www.divcss5.com</dd>
<dt>div+css网站</dt>
<dd>网址为www.divcss5.com</dd>
</dl>
</body>
</html>

演示截图

扩展与提升
dl dt dd是一个组合型标签
标签标准用法，代码如下

同时dd内可以放置<ul>标签使用。

在以后开发div+css适当运用dl dt dd标签你将会体会到带来的便利。

htm、html、shtml区别

接下来我们来了解下htm、shtml、html这三者之间区别。
首先htm、html、shtml都是静态网页的后缀，三者也可以说都是只是扩展名不同，其他一样，都是静态的网页。
Htm和html是完全静态的网页不通过服务器编译解释直接送出给浏览器读取的静态网页，以Htm和html伪静态Request除外。

shtml和shtm是服务器动态产生的静态网页，需要服务器自带SSI处理出来静态网页。

定义：html,htm是一个完全的超文本静态网页——hypertext markup language
shtml是一种用于SSI技术的文件——Server Side Include--SSI。

shtml是什么格式,比html有何好处? shtml,html格式是差不多，shtml主要可以使用include（包含html），经过服务器生成静态页面。

Shtml的页面可以使用include嵌入另外的html页面这样可以使得一个网站里共用相同办法分离出来使用include来嵌入到静态页面里。静态页面则不能！
Shtml使用方法

假如一个网站头部和导航、底部各个页面完全相同，则可以分离出这些部分分别放到一个html页面里，然后使用include嵌入到一个shtml页面里。特别说明html和htm不能使用include，即使使用也无效。

要想服务器能解析shtml网页页面，必须在服务器IIS中开SSI。

windows 2003下解决.shtml的文件不能访问shtml在2003下默认不支持，要支持的话可以做如下修改：

1：在主机管理-管理-自定义Mime类型中，添加扩展名 .shtml Mime类型为text/html 一般就可以了如果嵌套的语法不行，则需要做第二步修改

2：在服务器的配置里添加个映射：c:/windows/system32/inetsrv/ssinc.dll 扩展名.shtml 动作限于GET,POST

2003的系统下要记的在IIS管理器里的web服务扩展里把在服务器端的包含文件修改为允许

最后最好重启下服务器。

以上div css讲解和说明介绍了htm、html、shtml之间的区别，相信通过此文介绍对这三者之间有一定了解和认识。

显示扩展名-DIV CSS网页开发准备

1. 为什么要显示文件扩展名

2. 显示扩展名方法图例

为什么需要显示扩展名？ - TOP

因为很多时候我们需要辨别文件的扩展名如是.txt、.js、.css、.php、.htm、.asp、.aspx等扩展名。从扩展名即可认识文件类型及功能特点。

1、认识网页文件扩展名辨别功能特点
很多时候我们需要更改文件的扩展名，如一般手写简单测试html的时候我们只需要新建一个记事本而记事本扩展名是.txt，这个时候我们就需要更改为.html扩展名。
如果一个Html静态页面我们需要将网页变为.php的动态网页，这个时候同样我们需要变更其扩展名等等... ..

2、认识图片扩展名来辨别其功能 - TOP

大家知道常见的图片扩展名有.jpg、.gif、.png等扩展名，而.gif扩展名图片背景可以为透明；而.png图片在IE7图片背景可以显示透明；.jpg扩展名就是我们常见的图片，自然知道背景没有透明功能属性。提供辨别图片扩展名知道该图片的功能属性及用处。

可见开发DIV+CSS网页及开发其他动态网页的时候常常需要更改文件的扩展名和辨认文件扩展名，所以我们将设置系统将文件的扩展名显示出来。

系统默认情况下文件名的扩展名是隐藏的。

以下是WIN 7系统显示扩展名方法：
双击计算机(我的电脑图标)，找到“组织”，找到“文件夹和搜索选项”，查看，往下拉~OK

以下是WIN XP显示扩展名方法步骤：
1、打开“我的电脑”然后点击顶部工具栏的“工具（T）”然后点击“文件夹选项（O）...”

2、在弹出窗口，选择点击“查看”，然后在“高级设置”拖动右边滚动条找到“隐藏已知文件类型的扩展名”如下图：

3、将“隐藏已知文件类型的扩展名”前面选项勾去掉。如下图：

4、最后点击弹出窗口下方“运用”。然后再点击“确定”即可完成设置。

5、测试文件扩展名有无被显示（扩展名显示设置是否生效）
在电脑桌面右键鼠标新建“文本文档”。正常情况将显示其扩展名为.txt

到此DIVCSS5要求CSS开发前设置显示文件扩展名完成。

Html 标题-title标签

1. 标签格式

2. 标签所处位置

3. 代码片段

4. 演示效果图

5. SEO关系

6. 小结

一个html网页里只能有一个标题标签作为唯一标题显示。

为什么要在设置title标签？答：每个人都有自己名字，每篇作文都有很好的标题，正如此网页同样也是有了标题便于浏览者一看便知网页里相关内容。

TITLE标签格式： - TOP
html标题标签：<title>
title标签放置位置 - TOP
标题标签位置：位于<head></head>内

以上是divcss5主页源代码标题标签位置截图（位于<head></head>内）

最简单html标题标签代码： - TOP

<html>
<head>
<title>我是标题，我在title标签内，我显示在IE最顶部标题地方</title>
</head>
<body>
我是内容-www.divcss5.com演示
</body>
</html>

演示结果图： - TOP

说明html标题标签内内容不会显示在IE浏览器的内容区，只被显示在IE浏览器最顶部或浏览器多窗口选项卡处。

网页标题标签与SEO关系： - TOP

对于一个网页在搜索引擎上某关键字排名因素，很大部分是标题标签<title>是否含有此关键词，由此看出在网页中标题标签重要同样在搜索引擎排名上标题标签同样非常重要。

总结： - TOP

一个网页中只能使用一次title标签，是标识一个网页唯一标题作用，而且根据W3C标准必须放入一个网页中头部head标签内。

以上是CSS网站介绍关于HTML 标题标签知识，有什么不明白可到CSS论坛的讨论区提问。

相关知识：
1、meta标签
2、script标签
3、link标签
4、html常见标签
5、div标签
6、p br标签

head标签详细讲解

head位于html网页的头部,<html>后<body>前的标签，并以<head>开始以</head>结束的一html标签。
Head标签位置如图：

head标签示意图

head包含标签
meta,title,link,base,script等常用标签。

head包含的标签说明
title是网页唯一标题标签 -title标签
base是网页默认打开方式声明标签 base
link是一个链接标签，包括外部css文件引用、js文件引用、favicon.ico图标引用等作用
link介绍
meta包含广泛的内容标签，如网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签。
meta介绍
script是引入外部js文件作用
style直接嵌入网页的js或css文件标签。

html网页中head之meta标签
什么是meta标签?
在一个网页中meta标签常常被用做网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签。

网页显示字符集网页编码
简体中文：<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=BIG5" />

英语：<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

2、网页制作者信息
<meta name="author" content="Evance" />

3、网页关键字声明（搜索引擎优化地方）
<meta name="keywords" content="abc,xxx,defg,xyz" />

4、网页简介说明（搜索引擎优化地方）
<meta name="description" content="简介内容如本页div+css教程之meta标签说明-www.divcss5.com" />

5、防止别人在框架里调用你的页面<meta http-equiv="Window-target" content="_top" />
6、自动跳转（此标签用法可以让网页在多少秒后自动从当前页面跳转到另外一个网页页面或网站）
<meta http-equiv="Refresh" content="5;URL=http://www.divcss5.com" />
Content后跟值为当前页面在多少时间跳转；
Url值为跳转到具体网页网站

7、网页告诉搜索机器人向导对此网页操作（用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引）
<meta name="robots" content="all" />
content的参数有all,none,index,noindex,follow,nofollow。默认是all。如果在一个页面不加入此标签默认情况下content="all"意思是搜索并收录抓取爬行此网页及此网页指向页面。

robots取值
none
搜索引擎将忽略此网页，等价于noindex，nofollow。
noindex
搜索引擎不索引此网页。
nofollow
搜索引擎不继续通过此网页的链接索引搜索其它的网页。
all
搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
index
搜索引擎索引此网页。
follow
搜索引擎继续通过此网页的链接索引搜索其它的网页。
搜索引擎对搜索与收录方法介绍-百度站长工具

说明：根据W3C标准，需要直接用斜杠一个">"结束，如<meta .... ... />构成完整的一个link标签。

meta实例图示

html网页中head之link标签
什么是link标签?
link标签通常放置在一个网页的头部标签head标签内的用于链接外部css文件、链接收藏夹图标（favicon.ico），<link>
标签最常见的用途是链接外部样式表，外部资源。

link实例
<link href="img/divcss5.css" rel="stylesheet" type="text/css" />
链接外部css样式时候link标签的内容结构解释——css引用
href的值为外部资源地址，这里是css的地址
rel定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet
type规定被链接文档的 MIME 类,这里是值为text/css
这样就构成了一个完整的link标签
注意link标签因为不像<head></head>、<html></html>是一对的，解释还需一个斜杠的标签，这里link样式是放在<link>内的。
根据W3C标准，需要直接用斜杠一个">"结束，如<link .... ... />构成完整的一个link标签。

使用link引用网页收藏夹图标
收藏夹标签样式如下图

代码<link rel="icon" href="favicon.ico" type="image/x-icon" />
link标签的内容结构解释
href的值为外部资源地址这里是收藏夹图标地址
rel定义当前文档与被链接文档之间的关系,这里是外部icon图标属性
type规定被链接文档的 MIME 类,这里是值为image/x-icon

div+css通过对head标签内link“<link>”标签讲解，希望对大家有帮助。在一个网页中常用就这两种，也许会碰到rel值不同的，大致使用方法相同。

特别说明<link>标签不一定必须放置在<head></head>标签内,可以适当放置在<body>下</body>以上部分，效果相同，但是推荐标准的放置在head标签内。

UTF-8：Unicode TransformationFormat-8bit，允许含BOM，但通常不含BOM。是用以解决国际上字符的一种多字节编码，
它对英文使用8位（即一个字节），中文使用24为（三个字节）来编码。UTF-8包含全世界所有国家需要用到的字符，是国际编码，通用性强。UTF-8编
码的文字可以在各国支持UTF8字符集的浏览器上显示。如，如果是UTF8编码，则在外国人的英文IE上也能显示中文，他们无需下载IE的中文语言支持
包。

GBK是国家标准GB2312基础上扩容后兼容GB2312的标准。GBK的文字编码是用双字节来表示的，即不论中、英文字符均使用双字节来表示，为了区分中文，将其最高位都设定成1。GBK包含全部中文字符，是国家编码，通用性比UTF8差，不过UTF8占用的数据库比GBD大。

GBK、GB2312等与UTF8之间都必须通过Unicode编码才能相互转换：
GBK、GB2312－－Unicode－－UTF8
UTF8－－Unicode－－GBK、GB2312

对于一个网站、论坛来说，如果英文字符较多，则建议使用UTF－8节省空间。不过现在很多论坛的插件一般只支持GBK。
个编码的区别详细解释
简单来说，unicode，gbk和大五码就是编码的值，而utf-8,uft-16之类就是这个值的表现形式．而前面那三种编码是一兼容的，同一个汉
字，那三个码值是完全不一样的．如＂汉＂的uncode值与gbk就是不一样的，假设uncode为a040，gbk为b030，而uft-8码，就是把
那个值表现的形式．utf-8码完全只针对uncode来组织的，如果ＧＢＫ要转ＵＴＦ－８必须先转uncode码，再转utf-8就ＯＫ了．

详细的就见下面转的这篇文章．

谈谈Unicode编码，简要解释UCS、UTF、BMP、BOM等名词
这是一篇程序员写给程序员的趣味读物。所谓趣味是指可以比较轻松地了解一些原来不清楚的概念，增进知识，类似于打RPG游戏的升级。整理这篇文章的动机是两个问题：

问题一：
使用Windows记事本的“另存为”，可以在GBK、Unicode、Unicode big endian和UTF-8这几种编码方式间相互转换。同样是txt文件，Windows是怎样识别编码方式的呢？

我很早前就发现Unicode、Unicode
bigendian和UTF-8编码的txt文件的开头会多出几个字节，分别是FF、FE（Unicode）,FE、FF（Unicode
bigendian）,EF、BB、BF（UTF-8）。但这些标记是基于什么标准呢？

问题二：
最近在网上看到一个ConvertUTF.c，实现了UTF-32、UTF-16和UTF-8这三种编码方式的相互转换。对于Unicode(UCS2)、GBK、UTF-8这些编码方式，我原来就了解。但这个程序让我有些糊涂，想不起来UTF-16和UCS2有什么关系。

查了查相关资料，总算将这些问题弄清楚了，顺带也了解了一些Unicode的细节。写成一篇文章，送给有过类似疑问的朋友。本文在写作时尽量做到通俗易懂，但要求读者知道什么是字节，什么是十六进制。

0、big endian和little endian
big
endian和littleendian是CPU处理多字节数的不同方式。例如“汉”字的Unicode编码是6C49。那么写到文件里时，究竟是将6C
写在前面，还是将49写在前面？如果将6C写在前面，就是big endian。如果将49写在前面，就是little endian。

“endian”这个词出自《格列佛游记》。小人国的内战就源于吃鸡蛋时是究竟从大头(Big-Endian)敲开还是从小头(Little-Endian)敲开，由此曾发生过六次叛乱，一个皇帝送了命，另一个丢了王位。

我们一般将endian翻译成“字节序”，将big endian和little endian称作“大尾”和“小尾”。

1、字符编码、内码，顺带介绍汉字编码
字符必须编码后才能被计算机处理。计算机使用的缺省编码方式就是计算机的内码。早期的计算机使用7位的ASCII编码，为了处理汉字，程序员设计了用于简体中文的GB2312和用于繁体中文的big5。

GB2312(1980年)一共收录了7445个字符，包括6763个汉字和682个其它符号。汉字区的内码范围高字节从B0-F7，低字节从A1-FE，占用的码位是72*94=6768。其中有5个空位是D7FA-D7FE。

GB2312支持的汉字太少。1995年的汉字扩展规范GBK1.0收录了21886个符号，它分为汉字区和图形符号区。汉字区包括21003个字符。

从ASCII、GB2312到GBK，这些编码方法是向下兼容的，即同一个字符在这些方案中总是有相同的编码，后面的标准支持更多的字符。在这些编
码中，英文和中文可以统一地处理。区分中文编码的方法是高字节的最高位不为0。按照程序员的称呼，GB2312、GBK都属于双字节字符集
(DBCS)。

2000年的GB18030是取代GBK1.0的正式国家标准。该标准收录了27484个汉字，同时还收录了藏文、蒙文、维吾尔文等主要的少数民族文字。从汉字字汇上说，GB18030在GB13000.1的20902个汉字的基础上增加了CJK扩展A的6582个汉字（Unicode码0x3400-0x4db5），一共收录了27484个汉字。

CJK就是中日韩的意思。Unicode为了节省码位，将中日韩三国语言中的文字统一编码。GB13000.1就是ISO/IEC 10646-1的中文版，相当于Unicode 1.1。

GB18030的编码采用单字节、双字节和4字节方案。其中单字节、双字节和GBK是完全兼容的。4字节编码的码位就是收录了CJK扩展A的
6582个汉字。例如：UCS的0x3400在GB18030中的编码应该是8139EF30，UCS的0x3401在GB18030中的编码应该是
8139EF31。

微软提供了GB18030的升级包，但这个升级包只是提供了一套支持CJK扩展A的6582个汉字的新字体：新宋体-18030，并不改变内码。Windows 的内码仍然是GBK。

这里还有一些细节：

GB2312的原文还是区位码，从区位码到内码，需要在高字节和低字节上分别加上A0。

对于任何字符编码，编码单元的顺序是由编码方案指定的，与endian无关。例如GBK的编码单元是字节，用两个字节表示一个汉字。这两个字节的顺序是固定的，不受CPU字节序的影响。UTF-16的编码单元是word（双字节），word之间的顺序是编码方案指定的，word内部的字节排列才会受到endian的影响。后面还会介绍UTF-16。

GB2312的两个字节的最高位都是1。但符合这个条件的码位只有128*128=16384个。所以GBK和GB18030的低字节最高位都可能
不是1。不过这不影响DBCS字符流的解析：在读取DBCS字符流时，只要遇到高位为1的字节，就可以将下两个字节作为一个双字节编码，而不用管低字节的
高位是什么。

2、Unicode、UCS和UTF
前面提到从ASCII、GB2312、GBK到GB18030的编码方法是向下兼容的。而Unicode只与ASCII兼容（更准确地说，是与ISO-8859-1兼容），与GB码不兼容。例如“汉”字的Unicode编码是6C49，而GB码是BABA。

Unicode也是一种字符编码方法，不过它是由国际组织设计，可以容纳全世界所有语言文字的编码方案。Unicode的学名
是"UniversalMultiple-Octet Coded Character Set"，简称为UCS。UCS可以看作是"Unicode
CharacterSet"的缩写。

根据维基百科全书(http://zh.wikipedia.org/wiki/)的记载：历史上存在两个试图独立设计Unicode的组织，即国
际标准化组织（ISO）和一个软件制造商的协会（unicode.org）。ISO开发了ISO
10646项目，Unicode协会开发了Unicode项目。

在1991年前后，双方都认识到世界不需要两个不兼容的字符集。于是它们开始合并双方的工作成果，并为创立一个单一编码表而协同工作。从Unicode2.0开始，Unicode项目采用了与ISO 10646-1相同的字库和字码。

目前两个项目仍都存在，并独立地公布各自的标准。Unicode协会现在的最新版本是2005年的Unicode 4.1.0。ISO的最新标准是ISO 10646-3:2003。

UCS只是规定如何编码，并没有规定如何传输、保存这个编码。例如“汉”字的UCS编码是6C49，我可以用4个ascii数字来传输、保存这个编
码；也可以用utf-8编码:3个连续的字节E6
B189来表示它。关键在于通信双方都要认可。UTF-8、UTF-7、UTF-16都是被广泛接受的方案。UTF-8的一个特别的好处是它与ISO-
8859-1完全兼容。UTF是“UCS Transformation Format”的缩写。

IETF的RFC2781和RFC3629以RFC的一贯风格，清晰、明快又不失严谨地描述了UTF-16和UTF-8的编码方法。我总是记不得
IETF是Internet Engineering Task Force的缩写。但IETF负责维护的RFC是Internet上一切规范的基础。

2.1、内码和code page
目前Windows的内核已经支持Unicode字符集，这样在内核上可以支持全世界所有的语言文字。但是由于现有的大量程序和文档都采用了某种特定语言的编码，例如GBK，Windows不可能不支持现有的编码，而全部改用Unicode。

Windows使用代码页(code page)来适应各个国家和地区。code page可以被理解为前面提到的内码。GBK对应的code page是CP936。

微软也为GB18030定义了code page：CP54936。但是由于GB18030有一部分4字节编码，而Windows的代码页只支持单字节和双字节编码，所以这个code page是无法真正使用的。

3、UCS-2、UCS-4、BMP
UCS有两种格式：UCS-2和UCS-4。顾名思义，UCS-2就是用两个字节编码，UCS-4就是用4个字节（实际上只用了31位，最高位必须为0）编码。下面让我们做一些简单的数学游戏：

UCS-2有2^16=65536个码位，UCS-4有2^31=2147483648个码位。

UCS-4根据最高位为0的最高字节分成2^7=128个group。每个group再根据次高字节分为256个plane。每个plane根据第
3个字节分为256行 (rows)，每行包含256个cells。当然同一行的cells只是最后一个字节不同，其余都相同。

group 0的plane 0被称作Basic Multilingual Plane, 即BMP。或者说UCS-4中，高两个字节为0的码位被称作BMP。

将UCS-4的BMP去掉前面的两个零字节就得到了UCS-2。在UCS-2的两个字节前加上两个零字节，就得到了UCS-4的BMP。而目前的UCS-4规范中还没有任何字符被分配在BMP之外。

4、UTF编码

UTF-8就是以8位为单元对UCS进行编码。从UCS-2到UTF-8的编码方式如下：

UCS-2编码(16进制) UTF-8 字节流(二进制)
0000 - 007F 0xxxxxxx
0080 - 07FF 110xxxxx 10xxxxxx
0800 - FFFF 1110xxxx 10xxxxxx 10xxxxxx

例如“汉”字的Unicode编码是6C49。6C49在0800-FFFF之间，所以肯定要用3字节模板了：1110xxxx
10xxxxxx10xxxxxx。将6C49写成二进制是：0110 110001 001001，
用这个比特流依次代替模板中的x，得到：1110011010110001 10001001，即E6 B1 89。

读者可以用记事本测试一下我们的编码是否正确。需要注意，UltraEdit在打开utf-8编码的文本文件时会自动转换为UTF-16，可能产生混淆。你可以在设置中关掉这个选项。更好的工具是Hex Workshop。

UTF-16以16位为单元对UCS进行编码。对于小于0x10000的UCS码，UTF-16编码就等于UCS码对应的16位无符号整数。对于不
小于0x10000的UCS码，定义了一个算法。不过由于实际使用的UCS2，或者UCS4的BMP必然小于0x10000，所以就目前而言，可以认为
UTF-16和UCS-2基本相同。但UCS-2只是一个编码方案，UTF-16却要用于实际的传输，所以就不得不考虑字节序的问题。

5、UTF的字节序和BOM
UTF-8以字节为编码单元，没有字节序的问题。UTF-16以两个字节为编码单元，在解释一个UTF-16文本前，首先要弄清楚每个编码单元的字节序。
例如“奎”的Unicode编码是594E，“乙”的Unicode编码是4E59。如果我们收到UTF-16字节流“594E”，那么这是“奎”还是
“乙”？

Unicode规范中推荐的标记字节顺序的方法是BOM。BOM不是“Bill Of Material”的BOM表，而是Byte order Mark。BOM是一个有点小聪明的想法：

在UCS编码中有一个叫做"ZERO WIDTH
NO-BREAKSPACE"的字符，它的编码是FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输
字节流前，先传输字符"ZERO WIDTH NO-BREAK SPACE"。

这样如果接收者收到FEFF，就表明这个字节流是Big-Endian的；如果收到FFFE，就表明这个字节流是Little-Endian的。因此字符"ZERO WIDTH NO-BREAK SPACE"又被称作BOM。

UTF-8不需要BOM来表明字节顺序，但可以用BOM来表明编码方式。字符"ZERO WIDTH NO-BREAKSPACE"的UTF-8编码是EF BB BF（读者可以用我们前面介绍的编码方法验证一下）。所以如果接收者收到以EF BBBF开头的字节流，就知道这是UTF-8编码了。

Windows就是使用BOM来标记文本文件的编码方式的。

6、进一步的参考资料
本文主要参考的资料是 "Short overview of ISO-IEC 10646 and Unicode" (http://www.nada.kth.se/i18n/ucs/unicode-iso10646-oview.html)。

我还找了两篇看上去不错的资料，不过因为我开始的疑问都找到了答案，所以就没有看：

"Understanding Unicode A general introduction to the Unicode
Standard"
(http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&item_id=IWS-Chapter04a)

"Character set encoding basics Understanding character set encodings and
legacy encodings"
(http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&item_id=IWS-Chapter03)

我写过UTF-8、UCS-2、GBK相互转换的软件包，包括使用Windows API和不使用Windows API的版本。以后有时间的话，我会整理一下放到我的个人主页上

我是想清楚所有问题后才开始写这篇文章的，原以为一会儿就能写好。没想到考虑措辞和查证细节花费了很长时间，竟然从下午1:30写到9:00。希望有读者能从中受益。

附录1 再说说区位码、GB2312、内码和代码页
有的朋友对文章中这句话还有疑问：
“GB2312的原文还是区位码，从区位码到内码，需要在高字节和低字节上分别加上A0。”

我再详细解释一下：

“GB2312的原文”是指国家1980年的一个标准《中华人民共和国国家标准信息交换用汉字编码字符集基本集
GB2312-80》。这个标准用两个数来编码汉字和中文符号。第一个数称为“区”，第二个数称为“位”。所以也称为区位码。1-9区是中文符
号，16-55区是一级汉字，56-87区是二级汉字。现在Windows也还有区位输入法，例如输入1601得到“啊”。（这个区位输入法可以自动识别
16进制的GB2312和10进制的区位码，也就是说输入B0A1同样会得到“啊”。）

内码是指操作系统内部的字符编码。早期操作系统的内码是与语言相关的。现在的Windows在系统内部支持Unicode，然后用代码页适应各种语言，“内码”的概念就比较模糊了。微软一般将缺省代码页指定的编码说成是内码。

内码这个词汇，并没有什么官方的定义，代码页也只是微软这个公司的叫法。作为程序员，我们只要知道它们是什么东西，没有必要过多地考证这些名词。

所谓代码页(code page)就是针对一种语言文字的字符编码。例如GBK的code page是CP936，BIG5的code page是CP950，GB2312的code page是CP20936。

Windows中有缺省代码页的概念，即缺省用什么编码来解释字符。例如Windows的记事本打开了一个文本文件，里面的内容是字节流：BA、BA、D7、D6。Windows应该去怎么解释它呢？

是按照Unicode编码解释、还是按照GBK解释、还是按照BIG5解释，还是按照ISO8859-1去解释？如果按GBK去解释，就会得到“汉
字”两个字。按照其它编码解释，可能找不到对应的字符，也可能找到错误的字符。所谓“错误”是指与文本作者的本意不符，这时就产生了乱码。

答案是Windows按照当前的缺省代码页去解释文本文件里的字节流。缺省代码页可以通过控制面板的区域选项设置。记事本的另存为中有一项ANSI，其实就是按照缺省代码页的编码方法保存。

Windows的内码是Unicode，它在技术上可以同时支持多个代码页。只要文件能说明自己使用什么编码，用户又安装了对应的代码页，Windows就能正确显示，例如在HTML文件中就可以指定charset。

有的HTML文件作者，特别是英文作者，认为世界上所有人都使用英文，在文件中不指定charset。如果他使用了0x80-0xff之间的字符，
中文Windows又按照缺省的GBK去解释，就会出现乱码。这时只要在这个html文件中加上指定charset的语句，例如：
<meta http-equiv="Content-Type" content="text/html;
charset=ISO8859-1">
如果原作者使用的代码页和ISO8859-1兼容，就不会出现乱码了。

再说区位码，啊的区位码是1601，写成16进制是0x10,0x01。这和计算机广泛使用的ASCII编码冲突。为了兼容00-7f的ASCII编码，我们在区位码的高、低字节上分别加上A0。这样“啊”的编码就成为B0A1。我们将加过两个A0的编码也称为GB2312编码，虽然GB2312的原文根本没提到这一点。

JSP了解

1.一个JSP页面由元素和模板数据组成。元素是必须由JSP容器处理的部分，而模板数据是JSP容器不处理的部分.元素有三种类型：指令元素、脚本元素和动作元素.
2.指令元素<%@ %>---有page指令,include指令,taglib指令.
3.脚本元素--<%! 声明 %> <% 脚本即JAVA代码 %> <%= 表达式 %>
4.动作元素--JSP2.0规范中定义了20个标准的动作元素,如:<jsp:useBean>
5.注释--HTML注释,JSP注释<%-- comments --%>

6.JSP页面使用JSP标签时,必须WEB-INF/lib下加入两个包(jstl.jar和standard.jar)才能taglib指令
7.SERVLET控制器转向页面时要用request.getRequestDispatcher("").forward(req,
res);此方法.否则JSP页面就得不到req.setAttribute()设的值;当然用
req.getSession().setAttribute();这个不受此限制--res.sendRedirect();
8.JSP页面使用<jsp:useBean>时:javaBean这个类一定要符合规范(相关属性要有SET和GET方法,空参数构造方法,最好该类实现Serializable接口)
9.页面三种动态显示内容方式:<c:out value="${u.id}"/>,<%=user.getId() %>,<% out.write(user.getId()+""); %>

10.表单提交路径用相对路径:

<s:form action="login" method="post"></form>

<html:form action="login" method="post"></html:form>

jsp页面中的代码执行加载顺序

1. java是在服务器端运行的代码，jsp在服务器的servlet里运行，而javascript和html都是在浏览器端运行的代码。所以加载执行顺序是是java>jsp>js。

2.
js在jsp中的加载顺序

页面上的js代码时html代码的一部分，所以页面加载的时候是由上而下加载。所以js加载的顺序也就是页面中<script>标签出现的顺序。<script>标签里面的或者是引入的外部js文件的执行顺序都是其语句出现的顺序，其中js执行的过程也是页面装载的一部分。

2.1在js脚本中定义的全局变量和函数，都可以在后面的脚本中调用。变量的调用，必须是前面已经声明了的，否则变量返回的值是undefined。同一段脚本中，函数定义可以出现在函数的调用后面；若函数的定义和调用在两个脚本段中，函数调用在函数定义之前就会报函数未定义错误。

2.2 js中出现ajax的异步加载

由于ajax的异步加载可能会导致语句的执行顺序并不是按照语句的出现顺序来执行。下面以我做任务时遇到的问题为例：

在页面初始加载的时候需要向jsp发送请求来获得该页面所需的数据，在ajax成功函数中，对data的操作所需时间过长，就会导致在ajax函数外面的confirm与loadTree比data操作后面的语句先执行。最终在loadTree中使用data的值得时候就为空，此时全局变量openTab_Id就为空。

2.3控制js执行顺序

可以使用setTimeout(function(),time);来使function延迟加载。

浏览器加载显示html页面内容的顺序

1、浏览器加载显示html页面内容的顺序

我们经常看到浏览器在加载某个页面时,部分内容先显示出来,又有些内容后显示。那么浏览器加载显示html究竟是按什么顺序进行的呢?

其实浏览器加载显示html的顺序是按下面的顺序进行的：
      1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
      2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
      3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS 剑 敲创耸盜E的下载过程会启用单独连接进行下载。
      4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
      5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
      6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

如果你的网页比较大，希望部分内容先显示出来，粘住浏览者，那么你可以按照上面的规则合理的布局你的网页，达到预期的目的。

2. JS的加载
不能并行下载和解析（阻塞下载）
当引用了JS的时候，浏览器发送1个jsrequest就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现.

Javascript在网页页面加载时的执行顺序

操作HTML DOM文档的一个难题是，你的JavaScript代码可能在DOM完全载入之前运行，这会导致你的代码产生一些问题。页面加载时浏览器内部操作的顺序大致是这样的：
　　1. HTML被解析。
　　2. 外部脚本/样式表被加载。
　　3. 文档解析过程中内联的脚本被执行。
　　4. HTML DOM构造完成。
　　5. 图像和外部内容被加载。
　　6. 页面加载完成。
　　头部包含的和从外部文件中载入的脚本实际上在HTML DOM构造好之前就执行了。正如前面提到的，这一个问题是很重要的，因为在那两种地方的执行的所有脚本将不能访问DOM。可喜的是，存在许多绕开这一问题的办法。

html中的加载是自上而下

如 alert.html 中

以下为引用内容：
<html>
<head>
<script type="text/javascript">
alert(1);
</script>
<script type="text/javascript" src="a.js"></script>(在a.js中有一句alert(2))
</head>

对JS脚本与CSS样式的加载

1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
      2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
      3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
      4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
      5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
      6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

以下为引用内容：
<body>
姓名：<input id="a"/>
<script>alert(3)</script>
</body>

则执行顺序是1,2,3,姓名：<input id="a"/>，如果要在 "姓名：<input id="a"/>，"上面写

以下为引用内容：
<script>document.getElementById("a")</script>

返回的是null，但在下面写可以，尽管alert(3)先于它执行

注意：只要是方法都是加载完后执行，若写onload="a()",此方法是以上的1,2,3....全部执行完后才执行

在HTML中嵌入Javasript

1、直接在Javascript代码放在标记对<script>和</script>之间

2、由<script />标记的src属性制定外部的js文件

3、放在事件处理程序中，比如：

以下为引用内容：
<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p>

4、作为URL的主体，这个URL使用特殊的Javascript：协议，比如：

以下为引用内容：
<a href="javascript:alert('我是由javascript:协议执行的javascript')">点击我</a>

5、利用javascript本身的document.write()方法写入新的javascript代码

6、利用Ajax异步获取javascript代码，然后执行

第3种和第4种方法写入的Javascript需要触发才能执行，所以除非特别设置，否则页面加载时不会执行。

Javascript 的执行顺序

1、页面上的Javascript代码是HTML文档的一部分，所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序， <script />标记里面的或者通过src引入的外部JS，都是按照其语句出现的顺序执行，而且执行过程是文档装载的一部分。

2、每个脚本定义的全局变量和函数，都可以被后面执行的脚本所调用。

3、变量的调用，必须是前面已经声明，否则获取的变量值是undefined。

以下为引用内容：
<script type="text/javscrpt">//<![CDATA[
alert(tmp); //输出 undefined
var tmp = 1;
alert(tmp); //输出 1
//]]></script>

4、同一段脚本，函数定义可以出现在函数调用的后面，但是如果是分别在两段代码，且函数调用在第一段代码中，则会报函数未定义错误。

以下为引用内容：
<script type="text/javscrpt">//<![CDATA[
aa(); //浏览器报错
//]]></script>
<script type="text/javscrpt">//<![CDATA[
aa(); //输出 1
function aa(){alert(1);}
//]]></script>

5、document.write()会把输出写入到脚本文档所在的位置，浏览器解析完documemt.write()所在文档内容后，继续解析document.write()输出的内容，然后在继续解析HTML文档。

以下为引用内容：
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"><//script>');
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("我是" + tmpStr);');
document.write('<//script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>

test.js的内容是：

var tmpStr = 1;
alert(tmpStr);

在Firefox和Opera中的弹出值的顺序是：1、2、我是1、3

在IE中弹出值的顺序是：2、1、3，同时浏览器报错：tmpStr未定义

原因可能是IE在document.write时，并未等待加载SRC中的Javascript代码完毕后，才执行下一行，所以导致2先弹出，并且执行到document.write(’document.write("我是" + tmpStr)’)调用tmpStr时，tmpStr并未定义，从而报错。

解决这个问题，可以利用HTML解析是解析完一个HTML标签，再执行下一个的原理，把代码拆分来实现：

以下为引用内容：
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"><//script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("我是" + tmpStr);');
document.write('<//script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>

这样IE下和其他浏览器输出值的顺序都是一直的了：1、2、我是1、3。

改变Javascript的执行顺序

1、利用onload

以下为引用内容：
<script type="text/javascript">//<![CDATA[
window.onload = f;
function f(){alert(1);}
alert(2);
//]]></script>

输出值顺序是 2、1。

需要注意的是，如果存在多个winodws.onload的话，只有最有一个生效，解决这个办法是：

以下为引用内容：
window.onload = function(){f();f1();f2();.....}

利用2级DOM事件类型

以下为引用内容：
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}

2、IE中可以利用deferdefer作用是把代码加载下来，并不立即执行，等文档装载完毕之后再执行，有点类似onload，但是没有onload那样的局限性，可以重复使用，但是只在IE中有效，所以上面的例子可以修改成为

以下为引用内容：
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"><//script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('alert(2);')
document.write('alert("我是" + tmpStr);');
document.write('<//script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>

这样IE就不报错了，输出值的顺序变成：1、3、2、我是1

3、利用Ajax。

因为xmlhttpRequest能判断外部文档加载的状态，所以能够改变代码的加载顺序。

如何控制页面内容的加载顺序

目前网站之间相互调用的情况越来越多，比如需要调用某个第三方提供的一些接口（天气预报），或者是第三方提供的广告......

但是出于各种原因（网络故障、服务器故障、软件故障......）常常会发生第三方的相应页面不能访问的情况，而直接导致自己网站不能正常访问，或者访问速度比较慢。

比如：某个网站为头、内容、底
结构，在网站的头部放置了第三方提供的广告，但是出于某种原因，第三方的服务不能正常访问了，直接导致的情况就是，整个网站头部广告
以下的部分均不能正常访问（或者要过很久以后才能打开，昨天的台湾大地震，导致了 Google Adsense 不能正常访问，直接导致了我的个人网站http://www.oldtool.net
不能正常打开。）。

为了解决如上的问题，查阅了很多文章后，找到如下的解决方案：页面的延时加载（Page Delay Load）。

在IE中，几乎每个对象（div iframe td ...）均有一个属性 readyState(http://msdn2.microsoft.com/en-us/library/ms534358.aspx) ，此属性反应对象在当前页面的载入状态，当该对象完全载入以后，则当前对象的
readyState=="complete" ，借助该属性，可以控制待当前页面最期待的内容载入完成以后，再载入有可能出错的页面（或者是优先级不高的页面）。

详细代码如下：

问题页面代码：
<!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>
<title>精巧软件 www.oldtool.net</title>
</head>
<body>
<div>这里是页面的最顶端内容。</div>
<div>如下的 div1 div2 div3 div4 可以放置任何第三方的内容，比如广告。</div>
<div id="div1" >
<div>说明：此处的宽、高，不一定需要提前设置，可以将此 Container 的宽、高根据内部的内容自适应。</div>
<div id="div2" >
<div>说明：div3中的内容不能正常访问，直接导致其下最重要的内容不能正常打开，或者要过很久以后才可以正常打开。</div>
<div id="div3" >

<script type="text/javascript"></script>
<script type="text/javascript" src="http://wrongcode.wrongcode.com/pagead/wrongcode.js">
</script>

</div>
<div id="div4" >
<div>这里是页面最重要的内容，您每次打开该页面，均希望该部分内容无论如何可以正常显示。</div>
<div>这里是页面的最底端</div>
</body>
</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>
<title>精巧软件 www.oldtool.net</title>
</head>
<body>
<script language="javascript" type="text/javascript">
// 按照期望的次序排列每个 div 的 Id.
var arr1=new Array("div3","div2","div4","div1");
//var arr1=new Array("if3","if2","if4","if1");
// 期望次序 div 中的内容.
var arr2=new Array("换成你期望的内容。","inner html 2","inner html 4","inner html 1");
//var arr2=new Array("3.html","2.html","4.html","1.html");
// 期望次序中 iframe 的状态.
var arr3=new Array("false","false","false","false");
function showState()
{
// 判断当前页面是否载入完毕
if(window.document.body.readyState=="complete")
{
for(i=0;i<arr1.length;i++)
{
if(arr3[i]=="false")
{
document.getElementById(arr1[i]).innerHTML=arr2[i];
arr3[i]="true";
return ;
}
}
}
}
// 每间隔 2 秒后调用如上方法, 当然,正常应用应该将此时间间隔设置小一些, 此处仅为了方便大家看效果
setInterval("showState()",2000);
</script>
<div>这里是页面的最顶端内容。</div>
<div>如下的 div1 div2 div3 div4 全部延时加载。当前页面中的最重要内容不会因 div1 div2 div3 div4 内容的损坏，而不能正常访问。</div>
<div id="div1" >
<div id="div2" >
<div id="div3" >
<div id="div4" >
<div>这里是页面最重要的内容，您每次打开该页面，均希望该部分内容无论如何可以正常显示。</div>
<div>这里是页面的最底端</div>
</body>
</html>

本文转载于：http://www.verydemo.com/demo_c101_i77501.html