﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>语源科技BlogJava-Put on steam!!</title><link>http://www.blogjava.net/auditionlsl/</link><description /><language>zh-cn</language><lastBuildDate>Tue, 05 May 2026 12:11:34 GMT</lastBuildDate><pubDate>Tue, 05 May 2026 12:11:34 GMT</pubDate><ttl>60</ttl><item><title>[转]大型网站架构演变和知识体系</title><link>http://www.blogjava.net/auditionlsl/archive/2009/06/04/279965.html</link><dc:creator>zeus.xiao</dc:creator><author>zeus.xiao</author><pubDate>Thu, 04 Jun 2009 02:43:00 GMT</pubDate><guid>http://www.blogjava.net/auditionlsl/archive/2009/06/04/279965.html</guid><wfw:comment>http://www.blogjava.net/auditionlsl/comments/279965.html</wfw:comment><comments>http://www.blogjava.net/auditionlsl/archive/2009/06/04/279965.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/auditionlsl/comments/commentRss/279965.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/auditionlsl/services/trackbacks/279965.html</trackback:ping><description><![CDATA[<span style="font-size: 12pt; font-family: 宋体">声明:本文转自BlueDavy之技术Blog(<font face="宋体"><a href="http://www.blogjava.net/BlueDavy/archive/2008/09/03/226749.html">http://www.blogjava.net/BlueDavy/archive/2008/09/03/226749.html</a></font>)<br />
&nbsp;&nbsp;&nbsp;&nbsp;之前也有一些介绍大型网站架构演变的文章，例如LiveJournal的、ebay的，都是非常值得参考的，不过感觉他们讲的更多的是每次演变的结果，而没有很详细的讲为什么需要做这样的演变，再加上近来感觉有不少同学都很难明白为什么一个网站需要那么复杂的技术，于是有了写这篇文章的想法，在这篇文章中将阐述一个普通的网站发展成大型网站过程中的一种较为典型的架构演变历程和所需掌握的知识体系，希望能给想从事互联网行业的同学一点初步的概念，:)，文中的不对之处也请各位多给点建议，让本文真正起到抛砖引玉的效果。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<p style="text-align: left" align="left"><strong><span style="font-size: 14pt; font-family: 宋体">架构演变第一步：物理分离webserver和数据库</span></strong></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">最开始，由于某些想法，于是在互联网上搭建了一个网站，这个时候甚至有可能主机都是租借的，但由于这篇文章我们只关注架构的演变历程，因此就假设这个时候已经是托管了一台主机，并且有一定的带宽了，这个时候由于网站具备了一定的特色，吸引了部分人访问，逐渐你发现系统的压力越来越高，响应速度越来越慢，而这个时候比较明显的是数据库和应用互相影响，应用出问题了，数据库也很容易出现问题，而数据库出问题的时候，应用也容易出问题，于是进入了第一步演变阶段：将应用和数据库从物理上分离，变成了两台机器，这个时候技术上没有什么新的要求，但你发现确实起到效果了，系统又恢复到以前的响应速度了，并且支撑住了更高的流量，并且不会因为数据库和应用形成互相的影响。</span></p>
<span style="font-size: 12pt; font-family: 宋体">看看这一步完成后系统的图示：</span><br />
<br />
<img height="99" alt="" src="http://www.blogjava.net/images/blogjava_net/auditionlsl/frame1.png" width="195" border="0" /><br />
&nbsp;
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">这一步涉及到了这些知识体系：</span></p>
<span style="font-size: 12pt; font-family: 宋体">这一步架构演变对技术上的知识体系基本没有要求。<br />
<br />
&nbsp;
<p style="text-align: left" align="left"><strong><span style="font-size: 14pt; font-family: 宋体">架构演变第二步：增加页面缓存</span></strong></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">好景不长，随着访问的人越来越多，你发现响应速度又开始变慢了，查找原因，发现是访问数据库的操作太多，导致数据连接竞争激烈，所以响应变慢，但数据库连接又不能开太多，否则数据库机器压力会很高，因此考虑采用缓存机制来减少数据库连接资源的竞争和对数据库读的压力，这个时候首先也许会选择采用squid 等类似的机制来将系统中相对静态的页面（例如一两天才会有更新的页面）进行缓存（当然，也可以采用将页面静态化的方案），这样程序上可以不做修改，就能够很好的减少对webserver的压力以及减少数据库连接资源的竞争，OK，于是开始采用squid来做相对静态的页面的缓存。</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">看看这一步完成后系统的图示：<br />
</span></p>
<img height="156" alt="" src="http://www.blogjava.net/images/blogjava_net/auditionlsl/frame2.png" width="195" border="0" /><br />
&nbsp;
<p class="MsoNormal" style="text-align: left; mso-pagination: widow-orphan; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto" align="left"><span style="font-size: 12pt; font-family: 宋体; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体">这一步涉及到了这些知识体系：<span lang="EN-US"><o:p></o:p></span></span></p>
<p class="MsoNormal" style="text-align: left; mso-pagination: widow-orphan; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto" align="left"><span style="font-size: 12pt; font-family: 宋体; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体">前端页面缓存技术，例如<span lang="EN-US">squid</span>，如想用好的话还得深入掌握下<span lang="EN-US">squid</span>的实现方式以及缓存的失效算法等。<br />
<br />
&nbsp; </p>
<p style="text-align: left" align="left"><strong><span style="font-size: 14pt; font-family: 宋体">架构演变第三步：增加页面片段缓存</span></strong></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">增加了squid做缓存后，整体系统的速度确实是提升了，webserver的压力也开始下降了，但随着访问量的增加，发现系统又开始变的有些慢了，在尝到了squid之类的动态缓存带来的好处后，开始想能不能让现在那些动态页面里相对静态的部分也缓存起来呢，因此考虑采用类似ESI之类的页面片段缓存策略，OK，于是开始采用ESI来做动态页面中相对静态的片段部分的缓存。</span></p>
<p class="MsoNormal" style="text-align: left; mso-pagination: widow-orphan; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto" align="left"><span style="font-size: 12pt; font-family: 宋体">看看这一步完成后系统的图示：<br />
<img height="235" alt="" src="http://www.blogjava.net/images/blogjava_net/auditionlsl/frame3.png" width="337" border="0" /><br />
&nbsp; </p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">这一步涉及到了这些知识体系：</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">页面片段缓存技术，例如ESI等，想用好的话同样需要掌握ESI的实现方式等；</span></p>
&nbsp;
<p style="text-align: left" align="left"><strong><span style="font-size: 14pt; font-family: 宋体">架构演变第四步：数据缓存</span></strong></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">在采用ESI之类的技术再次提高了系统的缓存效果后，系统的压力确实进一步降低了，但同样，随着访问量的增加，系统还是开始变慢，经过查找，可能会发现系统中存在一些重复获取数据信息的地方，像获取用户信息等，这个时候开始考虑是不是可以将这些数据信息也缓存起来呢，于是将这些数据缓存到本地内存，改变完毕后，完全符合预期，系统的响应速度又恢复了，数据库的压力也再度降低了不少。</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">看看这一步完成后系统的图示：</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体"><img height="258" alt="" src="http://www.blogjava.net/images/blogjava_net/auditionlsl/frame4.png" width="341" border="0" /><br />
</span><span style="font-size: 12pt; font-family: 宋体">这一步涉及到了这些知识体系：</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">缓存技术，包括像Map数据结构、缓存算法、所选用的框架本身的实现机制等。</span></p>
<p style="text-align: left" align="left"><strong><span style="font-size: 14pt; font-family: 宋体">架构演变第五步： 增加webserver</span></strong></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">好景不长，发现随着系统访问量的再度增加，webserver机器的压力在高峰期会上升到比较高，这个时候开始考虑增加一台webserver，这也是为了同时解决可用性的问题，避免单台的webserver down机的话就没法使用了，在做了这些考虑后，决定增加一台webserver，增加一台webserver时，会碰到一些问题，典型的有：<br />
1、如何让访问分配到这两台机器上，这个时候通常会考虑的方案是Apache自带的负载均衡方案，或LVS这类的软件负载均衡方案；<br />
2、如何保持状态信息的同步，例如用户session等，这个时候会考虑的方案有写入数据库、写入存储、cookie或同步session信息等机制等；<br />
3、如何保持数据缓存信息的同步，例如之前缓存的用户数据等，这个时候通常会考虑的机制有缓存同步或分布式缓存；<br />
4、如何让上传文件这些类似的功能继续正常，这个时候通常会考虑的机制是使用共享文件系统或存储等；<br />
在解决了这些问题后，终于是把webserver增加为了两台，系统终于是又恢复到了以往的速度。</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">看看这一步完成后系统的图示：<br />
</span><span style="font-size: 12pt; font-family: 宋体"><img height="244" alt="" src="http://www.blogjava.net/images/blogjava_net/auditionlsl/frame5.png" width="341" border="0" />&nbsp;&nbsp;&nbsp;</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">这一步涉及到了这些知识体系：</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">负载均衡技术（包括但不限于硬件负载均衡、软件负载均衡、负载算法、linux转发协议、所选用的技术的实现细节等）、主备技术（包括但不限于ARP欺骗、linux heart-beat等）、状态信息或缓存同步技术（包括但不限于Cookie技术、UDP协议、状态信息广播、所选用的缓存同步技术的实现细节等）、共享文件技术（包括但不限于NFS等）、存储技术（包括但不限于存储设备等）。</span></p>
<p style="text-align: left" align="left"><strong><span style="font-size: 14pt; font-family: 宋体">架构演变第六步：分库</span></strong></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">享受了一段时间的系统访问量高速增长的幸福后，发现系统又开始变慢了，这次又是什么状况呢，经过查找，发现数据库写入、更新的这些操作的部分数据库连接的资源竞争非常激烈，导致了系统变慢，这下怎么办呢，此时可选的方案有数据库集群和分库策略，集群方面像有些数据库支持的并不是很好，因此分库会成为比较普遍的策略，分库也就意味着要对原有程序进行修改，一通修改实现分库后，不错，目标达到了，系统恢复甚至速度比以前还快了。</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">看看这一步完成后系统的图示：<br />
</span><span style="font-size: 12pt; font-family: 宋体"><img height="243" alt="" src="http://www.blogjava.net/images/blogjava_net/auditionlsl/frame6.png" width="341" border="0" /><br />
这一步涉及到了这些知识体系：</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">这一步更多的是需要从业务上做合理的划分，以实现分库，具体技术细节上没有其他的要求；</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">但同时随着数据量的增大和分库的进行，在数据库的设计、调优以及维护上需要做的更好，因此对这些方面的技术还是提出了很高的要求的。</span></p>
<p style="text-align: left" align="left"><strong><span style="font-size: 14pt; font-family: 宋体">架构演变第七步：分表、DAL和分布式缓存</span></strong><span style="font-size: 12pt; font-family: 宋体"><br />
</span><span style="font-size: 12pt; font-family: 宋体">随着系统的不断运行，数据量开始大幅度增长，这个时候发现分库后查询仍然会有些慢，于是按照分库的思想开始做分表的工作，当然，这不可避免的会需要对程序进行一些修改，也许在这个时候就会发现应用自己要关心分库分表的规则等，还是有些复杂的，于是萌生能否增加一个通用的框架来实现分库分表的数据访问，这个在ebay的架构中对应的就是DAL，这个演变的过程相对而言需要花费较长的时间，当然，也有可能这个通用的框架会等到分表做完后才开始做，同时，在这个阶段可能会发现之前的缓存同步方案出现问题，因为数据量太大，导致现在不太可能将缓存存在本地，然后同步的方式，需要采用分布式缓存方案了，于是，又是一通考察和折磨，终于是将大量的数据缓存转移到分布式缓存上了。</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">看看这一步完成后系统的图示：<br />
</span><span style="font-size: 12pt; font-family: 宋体"><img height="439" alt="" src="http://www.blogjava.net/images/blogjava_net/auditionlsl/frame7.png" width="342" border="0" /><br />
这一步涉及到了这些知识体系：</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">分表更多的同样是业务上的划分，技术上涉及到的会有动态hash算法、consistent hash算法等；</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">DAL</span><span style="font-size: 12pt; font-family: 宋体">涉及到比较多的复杂技术，例如数据库连接的管理（超时、异常）、数据库操作的控制（超时、异常）、分库分表规则的封装等；</span></p>
<p style="text-align: left" align="left"><strong><span style="font-size: 14pt; font-family: 宋体">架构演变第八步：增加更多的webserver</span></strong></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">在做完分库分表这些工作后，数据库上的压力已经降到比较低了，又开始过着每天看着访问量暴增的幸福生活了，突然有一天，发现系统的访问又开始有变慢的趋势了，这个时候首先查看数据库，压力一切正常，之后查看webserver，发现apache阻塞了很多的请求，而应用服务器对每个请求也是比较快的，看来是请求数太高导致需要排队等待，响应速度变慢，这还好办，一般来说，这个时候也会有些钱了，于是添加一些webserver服务器，在这个添加 webserver服务器的过程，有可能会出现几种挑战：<br />
1、Apache的软负载或LVS软负载等无法承担巨大的web访问量（请求连接数、网络流量等）的调度了，这个时候如果经费允许的话，会采取的方案是购 买硬件负载，例如F5、Netsclar、Athelon之类的，如经费不允许的话，会采取的方案是将应用从逻辑上做一定的分类，然后分散到不同的软负载集群中；<br />
2、原有的一些状态信息同步、文件共享等方案可能会出现瓶颈，需要进行改进，也许这个时候会根据情况编写符合网站业务需求的分布式文件系统等；<br />
在做完这些工作后，开始进入一个看似完美的无限伸缩的时代，当网站流量增加时，应对的解决方案就是不断的添加webserver。</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">看看这一步完成后系统的图示：<br />
<img height="441" alt="" src="http://www.blogjava.net/images/blogjava_net/auditionlsl/frame8.png" width="466" border="0" /><br />
</span><span style="font-size: 12pt; font-family: 宋体">这一步涉及到了这些知识体系：</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">到了这一步，随着机器数的不断增长、数据量的不断增长和对系统可用性的要求越来越高，这个时候要求对所采用的技术都要有更为深入的理解，并需要根据网站的需求来做更加定制性质的产品。</span></p>
<p style="text-align: left" align="left"><strong><span style="font-size: 14pt; font-family: 宋体">架构演变第九步：数据读写分离和廉价存储方案</span></strong></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">突然有一天，发现这个完美的时代也要结束了，数据库的噩梦又一次出现在眼前了，由于添加的webserver太多了，导致数据库连接的资源还是不够用，而这个时候又已经分库分表了，开始分析数据库的压力状况，可能会发现数据库的读写比很高，这个时候通常会想到数据读写分离的方案，当然，这个方案要实现并不容易，另外，可能会发现一些数据存储在数据库上有些浪费，或者说过于占用数据库资源，因此在这个阶段可能会形成的架构演变是实现数据读写分离，同时编写一些更为廉价的存储方案，例如BigTable这种。</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">看看这一步完成后系统的图示：<br />
<img height="398" alt="" src="http://www.blogjava.net/images/blogjava_net/auditionlsl/frame9.png" width="555" border="0" /><br />
</span><span style="font-size: 12pt; font-family: 宋体">这一步涉及到了这些知识体系：</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">数据读写分离要求对数据库的复制、standby等策略有深入的掌握和理解，同时会要求具备自行实现的技术；</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">廉价存储方案要求对OS的文件存储有深入的掌握和理解，同时要求对采用的语言在文件这块的实现有深入的掌握。</span></p>
<p style="text-align: left" align="left"><strong><span style="font-size: 14pt; font-family: 宋体">架构演变第十步：进入大型分布式应用时代和廉价服务器群梦想时代</span></strong></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">经过上面这个漫长而痛苦的过程，终于是再度迎来了完美的时代，不断的增加webserver就可以支撑越来越高的访问量了，对于大型网站而言，人气的重要毋 庸置疑，随着人气的越来越高，各种各样的功能需求也开始爆发性的增长，这个时候突然发现，原来部署在webserver上的那个web应用已经非常庞大 了，当多个团队都开始对其进行改动时，可真是相当的不方便，复用性也相当糟糕，基本是每个团队都做了或多或少重复的事情，而且部署和维护也是相当的麻烦，因为庞大的应用包在N台机器上复制、启动都需要耗费不少的时间，出问题的时候也不是很好查，另外一个更糟糕的状况是很有可能会出现某个应用上的bug就导 致了全站都不可用，还有其他的像调优不好操作（因为机器上部署的应用什么都要做，根本就无法进行针对性的调优）等因素，根据这样的分析，开始痛下决心，将系统根据职责进行拆分，于是一个大型的分布式应用就诞生了，通常，这个步骤需要耗费相当长的时间，因为会碰到很多的挑战：<br />
1、拆成分布式后需要提供一个高性能、稳定的通信框架，并且需要支持多种不同的通信和远程调用方式；<br />
2、将一个庞大的应用拆分需要耗费很长的时间，需要进行业务的整理和系统依赖关系的控制等；<br />
3、如何运维（依赖管理、运行状况管理、错误追踪、调优、监控和报警等）好这个庞大的分布式应用。<br />
经过这一步，差不多系统的架构进入相对稳定的阶段，同时也能开始采用大量的廉价机器来支撑着巨大的访问量和数据量，结合这套架构以及这么多次演变过程吸取的经验来采用其他各种各样的方法来支撑着越来越高的访问量。</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">看看这一步完成后系统的图示：<br />
<img height="431" alt="" src="http://www.blogjava.net/images/blogjava_net/auditionlsl/frame10.png" width="554" border="0" /><br />
</span><span style="font-size: 12pt; font-family: 宋体">这一步涉及到了这些知识体系：</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">这一步涉及的知识体系非常的多，要求对通信、远程调用、消息机制等有深入的理解和掌握，要求的都是从理论、硬件级、操作系统级以及所采用的语言的实现都有清楚的理解。</span></p>
<p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">运维这块涉及的知识体系也非常的多，多数情况下需要掌握分布式并行计算、报表、监控技术以及规则策略等等。</span></p>
<span style="font-size: 12pt; font-family: 宋体">说起来确实不怎么费力，整个网站架构的经典演变过程都和上面比较的类似，当然，每步采取的方案，演变的步骤有可能有不同，另外，由于网站的业务不同，会有不同的专业技术的需求，这篇blog更多的是从架构的角度来讲解演变的过程，当然，其中还有很多的技术也未在此提及，像数据库集群、数据挖掘、搜索等，但在真实的演变过程中还会借助像提升硬件配置、网络环境、改造操作系统、CDN镜像等来支撑更大的流量，因此在真实的发展过程中还会有很多的不同，另外一个大型网站要做到的远远不仅仅上面这些，还有像安全、运维、运营、服务、存储等，要做好一个大型的网站真的很不容易，写这篇文章更多的是希望能够引出更多大型网站架构演变的介绍.</span></span></span></span></span>
<img src ="http://www.blogjava.net/auditionlsl/aggbug/279965.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/auditionlsl/" target="_blank">zeus.xiao</a> 2009-06-04 10:43 <a href="http://www.blogjava.net/auditionlsl/archive/2009/06/04/279965.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>你的系统安全吗?(利用SQL注入攻击系统)</title><link>http://www.blogjava.net/auditionlsl/archive/2009/05/26/278013.html</link><dc:creator>zeus.xiao</dc:creator><author>zeus.xiao</author><pubDate>Tue, 26 May 2009 07:12:00 GMT</pubDate><guid>http://www.blogjava.net/auditionlsl/archive/2009/05/26/278013.html</guid><wfw:comment>http://www.blogjava.net/auditionlsl/comments/278013.html</wfw:comment><comments>http://www.blogjava.net/auditionlsl/archive/2009/05/26/278013.html#Feedback</comments><slash:comments>10</slash:comments><wfw:commentRss>http://www.blogjava.net/auditionlsl/comments/commentRss/278013.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/auditionlsl/services/trackbacks/278013.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 作者:肖文伟&nbsp;今天在IBM的站点上看到一篇关于系统安全的文章,文章是由伍斯特工业学院（Worcester Polytechnic Institute，WPI）的计算机科学在读研究生Bob Breznak写的.中间有很多关于系统攻击方法,不禁让人深思:我们的系统到底有多脆弱呢?文章位于: http://www.ibm.com/developerworks/cn/rati...&nbsp;&nbsp;<a href='http://www.blogjava.net/auditionlsl/archive/2009/05/26/278013.html'>阅读全文</a><img src ="http://www.blogjava.net/auditionlsl/aggbug/278013.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/auditionlsl/" target="_blank">zeus.xiao</a> 2009-05-26 15:12 <a href="http://www.blogjava.net/auditionlsl/archive/2009/05/26/278013.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>图解img标签的usemap使用</title><link>http://www.blogjava.net/auditionlsl/archive/2009/05/26/278012.html</link><dc:creator>zeus.xiao</dc:creator><author>zeus.xiao</author><pubDate>Tue, 26 May 2009 07:10:00 GMT</pubDate><guid>http://www.blogjava.net/auditionlsl/archive/2009/05/26/278012.html</guid><wfw:comment>http://www.blogjava.net/auditionlsl/comments/278012.html</wfw:comment><comments>http://www.blogjava.net/auditionlsl/archive/2009/05/26/278012.html#Feedback</comments><slash:comments>6</slash:comments><wfw:commentRss>http://www.blogjava.net/auditionlsl/comments/commentRss/278012.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/auditionlsl/services/trackbacks/278012.html</trackback:ping><description><![CDATA[&nbsp;
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">作者</span><span lang="EN-US">:</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">肖文伟</span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">各位在看这篇文章之前请先到</span><span lang="EN-US">w3school</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">来了解一下</span><span lang="EN-US">&lt;img&gt;</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">标签中的</span><span lang="EN-US">usemap</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">属性是什么</span><span lang="EN-US">:</span></p>
<p class="MsoNormal"><span lang="EN-US"><a href="http://www.w3school.com.cn/tags/tag_img_prop_ismap_usemap.asp">http://www.w3school.com.cn/tags/tag_img_prop_ismap_usemap.asp</a></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">在有些概念之后</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">文章将要开始介绍</span><span lang="EN-US">&lt;img&gt;</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">标签的</span><span lang="EN-US">usemap</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">详细使用方法了</span><span lang="EN-US">.</span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">usemap</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">属性在</span><span lang="EN-US">w3school</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">描述为</span><span lang="EN-US">:</span><strong><span lang="EN-US" style="font-size: 9pt; font-family: Verdana; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体; mso-bidi-font-size: 12.0pt"> usemap</span></strong><span lang="EN-US" style="font-size: 9pt; font-family: Verdana; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体"> </span><span style="font-size: 9pt; font-family: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体">属性提供了一种</span><span lang="EN-US" style="font-size: 9pt; font-family: Verdana; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体">&#8220;</span><span style="font-size: 9pt; font-family: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体">客户端</span><span lang="EN-US" style="font-size: 9pt; font-family: Verdana; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体">&#8221;</span><span style="font-size: 9pt; font-family: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体">的图像映射机制</span><span lang="EN-US" style="font-size: 9pt; font-family: Verdana; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体">.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size: 9pt; font-family: Verdana; mso-font-kerning: 0pt; mso-bidi-font-family: 宋体"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">事实上我个人觉得它就是在一个图像上描绘了多个&#8220;热点&#8221;</span><span lang="EN-US">.</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">这样解释好像比较容易理解一点</span><span lang="EN-US">.</span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">让我们先来看看在</span><span lang="EN-US">Dreamweaver</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">中一个图像上被描绘上了两个热点的最终效果吧</span><span lang="EN-US">:</span></p>
<p class="MsoNormal" style="margin-left: 105pt; text-indent: 21pt"><span lang="EN-US"><v:shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><v:stroke joinstyle="miter"></v:stroke><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f></v:formulas><v:path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></v:path><o:lock aspectratio="t" v:ext="edit"><img alt="" src="http://www.blogjava.net/images/blogjava_net/auditionlsl/foot1.JPG" border="0" /></o:lock></v:shapetype></span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">我们可以在上图很明显的看到</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">这个图片上有两个热点</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">分别在图像的左上角和右下角</span><span lang="EN-US">.</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">只要点击不同区域时</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">就可以超链接到不同的地方</span><span lang="EN-US">.</span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">现来看看页面中的代码吧</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">这个应该比较重要些</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">代码如下</span><span lang="EN-US">:</span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">body</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&gt;</span><span lang="EN-US" style="font-size: 10pt; font-family: 'Courier New'; mso-font-kerning: 0pt"><o:p></o:p></span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt"><span style="mso-spacerun: yes">&nbsp;&nbsp; </span></span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">img </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">src</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"images/loginfoot.jpg" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">border</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"0" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">usemap</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"#Map1" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">name</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"foot" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">width</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"100" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">height</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"100"</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">/&gt;</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt"><span style="mso-spacerun: yes">&nbsp; </span></span><span lang="EN-US" style="font-size: 10pt; font-family: 'Courier New'; mso-font-kerning: 0pt"><o:p></o:p></span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt"><span style="mso-tab-count: 1">&nbsp;&nbsp;&nbsp; </span></span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">map </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">name</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"Map1"</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&gt;</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt"><span style="mso-spacerun: yes">&nbsp;&nbsp;&nbsp; </span></span><span lang="EN-US" style="font-size: 10pt; font-family: 'Courier New'; mso-font-kerning: 0pt"><o:p></o:p></span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt"><span style="mso-tab-count: 1">&nbsp;&nbsp;&nbsp; </span><span style="mso-spacerun: yes">&nbsp; </span></span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">area </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">shape</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"rect" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">coords</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"50,50,100,100" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">style</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"cursor:hand" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">href</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"login.jsp" </span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">/&gt;</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt"> </span><span lang="EN-US" style="font-size: 10pt; font-family: 'Courier New'; mso-font-kerning: 0pt"><o:p></o:p></span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt"><span style="mso-tab-count: 1">&nbsp;&nbsp;&nbsp; </span><span style="mso-spacerun: yes">&nbsp; </span></span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">area </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">shape</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"rect" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">coords</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"0,0,50,50" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">style</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"cursor:hand" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">href</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"main.jsp"</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">/&gt;</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt"><span style="mso-spacerun: yes">&nbsp;&nbsp; </span></span><span lang="EN-US" style="font-size: 10pt; font-family: 'Courier New'; mso-font-kerning: 0pt"><o:p></o:p></span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt"><span style="mso-spacerun: yes">&nbsp; </span></span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;/</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">map</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&gt;</span><span lang="EN-US" style="font-size: 10pt; font-family: 'Courier New'; mso-font-kerning: 0pt"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt"><span style="mso-spacerun: yes">&nbsp; </span></span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;/</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">body</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&gt;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">让我来解释一下这段代码吧</span><span lang="EN-US">:</span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">先解释这一段</span><span lang="EN-US">:</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">img </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">src</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"images/loginfoot.jpg" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">border</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"0" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">usemap</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"#Map1" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">name</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"foot" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">width</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"100" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">height</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"100"</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">/&gt;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">其实不用多说</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">这段就是在页面上插入一个图像</span><span lang="EN-US">.</span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">图像为</span><span lang="EN-US">:</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt"> images</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">目录下的</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">loginfoot.jpg</span><span lang="EN-US">.</span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">边框为</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">0</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">页面中名称为</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">foot</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">宽</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">100</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">高</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">100</span><span lang="EN-US">:(</span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt"> border</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"0" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">name</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"foot" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">width</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"100" </span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">height</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"100"</span><span lang="EN-US">)</span></p>
<p class="MsoNormal"><strong style="mso-bidi-font-weight: normal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">重点</span></strong><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">是这个</span><span lang="EN-US">:</span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt"> usemap</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"#Map1"</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">我想它应该描述为在此图像中使用图像映射</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">映射的具体描述为页面中的一个</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">map&gt;</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">而它的名称为</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">Map1</span><span lang="EN-US">.</span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">接下来就要讲到</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">map&gt;</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">了</span><span lang="EN-US">, </span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">这个</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">map&gt;</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">的名字为</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">Map1</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">在</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">map&gt;&lt;/map&gt;</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">之间有两个</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">area/&gt;</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">这两个</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">area/&gt;</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">分别代表了图片上的两个热点区域</span><span lang="EN-US">.</span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">下面就</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">area/&gt;</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">标签的属性来作一些介绍</span><span lang="EN-US">:</span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">shape</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"rect"</span><span lang="EN-US">:</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">热点的形状</span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">shape</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">为矩形</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">rect</span><span lang="EN-US">(rectangular);</span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">style</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"cursor:hand"</span><span lang="EN-US">:</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">鼠标指针</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">cursor</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">的样式为手</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">hand</span><span lang="EN-US">;</span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">href</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"login.jsp"</span><span lang="EN-US">:</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">超连接到</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">login.jsp</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">页面</span><span lang="EN-US">;</span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">coords</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"50,50,100,100"</span><span lang="EN-US">:</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">这用属性用来描述这个指点区域的具体位置</span><span lang="EN-US">.</span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span lang="EN-US"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">我不知道描述位置的属性为什么要使用</span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">coords</span><span lang="EN-US"> ,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">这很让人想不明白</span><span lang="EN-US">.</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">如果你不明白</span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">coords</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">里面几个值具体是什么意思</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">我按照个人理解</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">画了下面这张图</span><span lang="EN-US">.</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">希望你看完之后能够明白</span><span lang="EN-US">:</span></p>
<p class="MsoNormal" style="text-align: left; mso-layout-grid-align: none" align="left"><span lang="EN-US">(</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">将</span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt">coords</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"a,b,c,d"</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">里面的几个值分别看作是</span><span lang="EN-US">a,b,c,d ).</span></p>
<p class="MsoNormal"><span lang="EN-US"><span style="mso-tab-count: 4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img alt="" src="http://www.blogjava.net/images/blogjava_net/auditionlsl/foot.JPG" border="0" /></span></span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">这副图像大小为</span><span lang="EN-US">100*100,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">中只有一个热点</span><span lang="EN-US" style="font-size: 10pt; color: teal; font-family: 'Courier New'; mso-font-kerning: 0pt">&lt;</span><span lang="EN-US" style="font-size: 10pt; color: #3f7f7f; font-family: 'Courier New'; mso-font-kerning: 0pt">area/&gt;</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">位于图像的右下角</span><span lang="EN-US">.</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">中间用来描述位置的属性及其值为</span><span lang="EN-US">:</span><span lang="EN-US" style="font-size: 10pt; color: #7f007f; font-family: 'Courier New'; mso-font-kerning: 0pt"> coords</span><span lang="EN-US" style="font-size: 10pt; color: black; font-family: 'Courier New'; mso-font-kerning: 0pt">=</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">"50,50,100,100",</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">即</span><span lang="EN-US">:</span><span lang="EN-US" style="font-size: 10pt; color: #2a00ff; font-family: 'Courier New'; mso-font-kerning: 0pt">a=50,b=50,c=100,d=100</span><span lang="EN-US">.</span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">看完之后不知道你明白了吗</span><span lang="EN-US">?</span></p>
<p class="MsoNormal"><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">以上均为我个人的理解</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">我将他分享出来</span><span lang="EN-US">.</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">如有错误</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">还请各位帮忙指正</span><span lang="EN-US">,</span><span style="font-family: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">谢谢</span><span lang="EN-US">!!</span></p>
 <img src ="http://www.blogjava.net/auditionlsl/aggbug/278012.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/auditionlsl/" target="_blank">zeus.xiao</a> 2009-05-26 15:10 <a href="http://www.blogjava.net/auditionlsl/archive/2009/05/26/278012.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>处理URL传递中文乱码问题</title><link>http://www.blogjava.net/auditionlsl/archive/2009/05/26/278011.html</link><dc:creator>zeus.xiao</dc:creator><author>zeus.xiao</author><pubDate>Tue, 26 May 2009 07:07:00 GMT</pubDate><guid>http://www.blogjava.net/auditionlsl/archive/2009/05/26/278011.html</guid><wfw:comment>http://www.blogjava.net/auditionlsl/comments/278011.html</wfw:comment><comments>http://www.blogjava.net/auditionlsl/archive/2009/05/26/278011.html#Feedback</comments><slash:comments>4</slash:comments><wfw:commentRss>http://www.blogjava.net/auditionlsl/comments/commentRss/278011.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/auditionlsl/services/trackbacks/278011.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 作者：肖文伟&nbsp;在网上搜了很多资料都没有搞定,一般都有以下几种说法:方法1:在后台中先获得字符串的iso-8859-1编码形式数组,再使用此数组实例一个UTF-8编码形式String类型字符串. 页面提交的url为:leavesp?work=部门主管审批&nbsp;后台处理:String inStr=request.getParameter("work ")...&nbsp;&nbsp;<a href='http://www.blogjava.net/auditionlsl/archive/2009/05/26/278011.html'>阅读全文</a><img src ="http://www.blogjava.net/auditionlsl/aggbug/278011.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/auditionlsl/" target="_blank">zeus.xiao</a> 2009-05-26 15:07 <a href="http://www.blogjava.net/auditionlsl/archive/2009/05/26/278011.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>