在进行CSS网页布局开发时，您肯定遇到过形形色色的布局问题，虽然本站网页布局频道提供了大量的教程，但最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您遇到困难时为您提供快速参考。
一、有疑问，先验证
　　在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。
　　在其他浏览器中进行测试之前，请先在最先进的浏览器中撰写和测试CSS代码，而不是相反。
　　如果您在破旧的浏览器中编写和测试，你的代码就不得不依赖那个破旧浏览器的糟糕的显示，然后在符合标准的浏览器中进行测试，看到显示结果“不正常” 时，你会很沮丧的。相反，您应该先将您的代码完善，然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的，你不必再为支持其他浏览器而劳心费神。当然了，目前遵从标准的浏览器无疑就是 Mozilla， Safari 或 Opera。
二、确保您期望的效果确实存在
　　许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter（滤镜）或滚动条指定了样式，那么您就用了私有代码，除了IE之外，在别的浏览器中毫无作用。如果验证器告诉您代码没有定义，极有可能您用了私有样式，这样在不同的浏览器中很难达到一致的效果。
　　如果布局中一定要用浮动对象，别忘了适时使用清除（clear）属性。
　　浮动对象似易实难，而且不总是令人如愿以偿。如果您发现浮动对象伸出了容器的边界，或者不像您所期望的那样显示，请检查您的期望是否正确。关于这个问题请看Eric Meyer的教程
　　边距的合并：可用padding 或 border 来避免。
　　您可能被多余的（或者想要却不出现的）空白搞得焦头烂额。如果您用了 margins，边距的合并可能就是问题的根源。 Andy Budd 对此的解释可能为你解惑。
　　避免将 padding/border 和固定宽度同时应用到同一元素。
　　IE5 的区块模型是错误的，是它把事情办坏了。对此也有权宜之计，不过最好是绕过这个问题，当子元素的宽度固定时，为父元素指定padding。
三、避免IE下未指定样式内容的闪烁。
　　如果您仅仅靠 @import 来输入外部样式表，早晚您会发现IE有“闪烁”的毛病。在应用CSS样式之前，未经格式化的HTML文本会短暂地出现。这是可以避免的。
四、别指望 min-width 在IE中有用。
　　IE不支持它，但是它将 width 当作 min-width，所以通过一些 IE 的过滤技巧（filtering），可以实现同样的最终效果。
　　把CSS过滤器（filters）当作最后的手段
　　CSS 技巧和过滤器可以使您有选择地应用到（或者不应用到）某些元素。应当尽可能地找到标准的跨浏览器的解决办法来实现您想要的效果，而不是动不动就使用过滤器。要将它当成走投无路时的救命手段。在这里可以找到大量的CSS 过滤技巧。［译注：不要把这里的filters和IE中的滤镜混淆。由于各个浏览器对CSS标准的支持程度不一，人们找到了许多技巧，将浏览器无法解释或错误解释的样式表或规则屏蔽掉。这就是所谓的CSS过滤器或技巧。webjx.com
　　如果使用了锚点，在应用超链接样式时要特别小心。
　　如果您在代码中使用了传统的锚点（），您会注意到 ：hover 和 ：active伪类也会作用于它。要避免这种情形，你可以使用 id，或者使用鲜为人知的语法： ：link:hover， ：link:active
五、记住“LoVe/HAte”（爱/恨）链接规则
　　要以下面的顺序指定超链接伪类：Link， Visited， Hover， Acitve。任何其他顺序都不妥当。假如用了：focus，次序应为 LVHFA（“Lord Vader‘s Handle Formerly Anakin”，Matt Haughey这样建议）。
　　请记住“TRouBLED”（麻烦的）边框。
　　边框（border）、边距（margin）和补白（padding）的简写次序为：顺时针方向从上开始，即 Top， Right， Bottom， Left。比如 margin： 0 1px 3px 5px;表示上边距为零，右边距为1px，依此类推。
六、非零值要指明单位。
　　在用CSS指定字体、边距或大小时，必须指明所用的单位。某些浏览器对未指明单位的处理方法不足为凭。零就是零，不管是 px还是em还是其他单位，它不需要单位。例如： padding： 0 2px 0 1em;
七、测试不同的字体大小。
　　像Mozilla和Opera这样的高级浏览器允许对字体进行缩放，不管你用的是什么单位。某些用户的默认字体大小肯定和您的不同，尽最大努力去满足他们。
　　用嵌入式测试，发布时改为输入。
　　将样式表嵌入在你的HTML源代码中，在测试时可以消除许多缓存引起的错误，尤其是某些Mac下的浏览器。但在发布前，一定要记住将样式表移到外部文件，用 @import 或 引入。
八、加上明显的边框有利于布局调试。
　　像 div {border： solid 1px #f00;} 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的交错或空白问题。
　　对图片路径不要用单引号。
　　当设置背景图片时，要坚持用双引号。尽管看起来有些多余，但是如果不这么做，IE5/Mac会噎住。
　　不要为将来的样式表（比如手持式设备或打印用样式表）留个“空位”。
　　Mac IE5 对空的样式表比较感冒，会增加页面的装入时间。建议样式表中至少应该有一条规则（哪怕是注释也好），免得 MacIE噎住。
　　另外值得一提的还有一些虽然不针对某些功能，但是在开发过程中应当注意的理论
九、好好组织您的CSS文件
　　恰当地成块注释CSS，将相似的CSS选择符编为一组，养成一致的命名习惯和空白格式（为跨平台考虑，建议用空白字符而不是tab。）以及适当的次序。
　　以功能（而不是外观）为类和ID命名
　　假如您创建了一个 .smallblue 类，后来打算将文字改大，颜色变为红色，这个类名就不再有任何意义了。相反，您可以用更有描述性的名字如 .copyright 和 .pullquote。
十、组合选择符
　　保持CSS短小对减少下载时间非常重要。请尽量为选择符分组、 利用继承（inheritance）以及使用简写（shorthand）来减少冗余。
　　使用图片替换技术时要考虑亲和力
　　已经发现传统的FIR在屏幕阅读器，以及关闭图片显示［的浏览器］中会出问题。 对此有其他解决办法，要根据具体情况，慎重使用。

 （1） 什么是IP地址？
　　在Internet上有千百万台主机，为了区分这些主机，人们给每台主机都分配了一个专门的地址，称为IP地址。通过IP地址就可以访问到每一台主机。IP地址由4部分数字组成，每部分都不大于256，各部分之间用小数点分开。例如百度主机的IP地址就是"119.75.217.56"。
（2） 什么是固定IP地址？
　　固定IP地址是长期固定分配给一台计算机使用的IP地址，一般是特殊的服务器才拥有固定IP地址。
（3） 什么是动态IP地址？
　　通过Modem和电话线上网等的机子不具备固定IP地址，而是由ISP动态分配暂时的一个IP地址。普通人一般不需要去了解动态IP地址，这些都是计算机系统自动完成的。
（4） 什么是公有的IP地址？
　　公有地址（Public address）由Inter NIC（Internet Network Information Center 因特网信息中心）负责。这些IP地址分配给注册并向Inter NIC提出申请的组织机构。通过它直接访问因特网。
（5） 什么是私有的IP地址？
　　私有地址（Private address）属于非注册地址，专门为组织机构内部使用。
以下表列出留用的内部寻址地址
　　A类 10.0.0.0
　　B类 .0.0
　　C类 .0
（6） 什么是域名？
　　要记住那么多枯糙的数字串显然是非常困难的，为此，Internet提供了域名(Domain Name)。可以根据公司名、行业特征等制定合适、易记的域名，这就大大方便了人们的访问。对于普通用户而言，他们只需要记住域名就可以浏览到网页，例如，去沈阳网站制作的主页，我们只要记住它的域名,而不用管它具体的IP地址。
（7） 什么是域名解析？
　　机器间互相只认IP地址，要域名与IP地址之间是一一对应的，还得使用域名解析服务。域名解析需要由专门的域名解析服务器来完成，整个过程是自动进行的。
（8） 什么是子域名?
　　域名有很多级，中间用点分开。例如中国的顶级域名是以CN结尾的，所有以CN结尾的域名便都是它的子域。

设计高并发架构需要注意的一些因素与要点：
1,负载均衡架构
    首先网站前端需要采用负载均衡群集解决用户高并发的响应，目前常用方法包括 a、squid反向代理，这也是各大网站常用的方法，包括sohu、sina…；b、DNS轮循；c、采四层硬件设备，包括google、baidu使用这种方式。。。对于lvs，小频道或不重要应用可以尝试使用，对于大流量、实时性要求高的网站目前还不成熟。

2,高性能中间件选择、优化
    中间件选择、优化非常重要，当服务流量大于一定承度时，性能的稍微提升，对于整体硬件成本控制、服务的整体性能提升都是非常可观的。对于web server 目前常用的属apache，但apache 多进程(线程池)架构有一些缺点，进程频繁生成\注销系统开销大，特别当流量大时更是明显，对于应用逻辑简单的可以考虑lighttpd 采用单进程+epoll并发模式，效率高，但对多CPU支持有问题，但可采用启多服务解决这个问题；如果由于应用架构原因必须使用apache，可考虑apache module 性能比普通CGI成倍提升。。。其它原则，包括各中间件各版本测试、包括性能、安全上的考良，找到平衡点，不要太关注某一点因素，导致整体架构上出现隐患，另外一点非常重要，那就中间件的参数优化，这些方面大家可以google、baidu上找找，比较多，但有个原则那就是需要根据服务器实际资源情况进行优化，如httpd最大进程数设多大合适呢？有些朋友，就随手来个2048，觉得这样肯定不会再出现httpd由于进程阀值过低导致拒绝服务，但这有个隐患，因为生成进程，是需要硬件资源的，当进程数达到一定承度，可能服务器内存会溢出，导致服务器crash，特别是内存消耗量大的应用。这样的案例很多，需谨记
3,扩展性问题
     扩展性对于高速发展期间的网站非常重要，大家可以经常在网上看到某某网站的发展励途，那简直就是一部进化史，过程曲折而痛苦~~。因此成熟的经验就非常重要了，扩展性可以从两个方面来看：网络系统上的扩展性及应用本身的扩展性，首先在网络上需层次分明，尽量扁平化，全网冗余不能存在故障点，尽量按业务类型进行划分网络结构(pv大小、优先级)防止互扰，重要的一点：网络设计中，简单就是美~~，在不影响扩展性的前提下，不要搞得太复杂；网络硬件资源、机架位、IDC都需提前至少半年进行规划，这些规划的重要依据是公司业务发展的前景评估，这就体现公司的战略眼光了，包括是否需要外地IDC（依用户群体而定）。。。；另外，选一个好点的IDC是非常必要的，否则就得疲于IDC迁移了，北京地区好IDC还是不少的：皂君庙（有点老了。）、土城、联通、酒仙桥、爱立信、互联世纪、奥运官方机房数字北京据说马上也能入驻了。。。当然了，有钱也能像google一样自已搞个IDC，国内谁有这个实力?
     另一点就是应用本身的扩展性了，原则其实很简单，应用设计时应尽量确保应用的层次化、采用高性能的中间件、逻辑复杂及大数据量交互的功能尽量做成独立模块\后台、cache层、数据库分层（读/写操作分离），不要图前期简单直接将功能全部揉进前端CGI中，这很致命，随时都可能会遇到性能瓶颈、而且毫无扩展性。。。
      当以上两点很好的解决后，现在唯一的问题就是每半年根据业务的PV增涨、新业务发展，预购服务器了。。。；当然了，对现有架构优化，性能提升才是根本解决之道，特别是现在全球经济不景气，大家都不好过，这就是运维工程师的责任了，优化再优化!
4,应用设计、开发中的注意点
    架构层设计好后，应用层设计就是我们重点关注对象了，这也是一个项目成功的关键，好的设计主要体现在：性能(高并发承载能力)、可扩展性、可维护、安全性（数据完整性、应用稳定性、前端应用安全如SQL注入。）、模块冗余、负载均衡等等，技术点：线程池、epoll、TCP(长/短)连接的选择、功能模块的细化及后台化、模块冗余/负载均衡考虑(可扩展性)、高频数据cache缓存、数据分层、应用单故障点的解决(数据唯一性问题)等。
    有两点要注意：(1)应用设计时要允分考虑服务器、硬件设备甚基于IDC的不可靠性；也就是说我们在应用设计时需要考虑到应用运行过程中，随时都可能会有1~2台服务器或更多服务器出现故障情况(网络故障、灾难、攻击、停电(整个IDC全挂))，
    如google GFS就是一个典型，我们不能将应用的稳定性寄托于硬件的稳定上，特别是门户型公司大部份采用的都是X86普通机型，服务器crash是家常便饭、随时随刻(当总量到一定量级时)，所以我们在做应用架构设计时需允分考虑这些问题发生时的对策，做到允分的冗余/负载均衡（这两点可统一），如多IDC间通过智能CDN的流控、单IDC应用模块多节点冗余/负载均衡等，即使某些应用由于特殊原因无法做到这点，也需允分考虑应急预案。好的设计在这些突发情况下可以做到不用人工干预，当然难度也很大。记得李开复在北大演讲时说过：google一个IDC同时故障800台机器，不会影响到任何应用的正常响应；(2)大流量应用/模块中能不使用数据库就不要使用数据库.
5,数据库问题
    如数据库缓存，在高并发高处理的时候,在整个应用程序下，缓存是全局共享的，然而在我们进行修改的时候就，如果两个或者多个请求同时对缓存有更新的要求的情况下，应用程序会直接的死掉。这个时候，就需要一个好的数据并发处理策略以及缓存策略。
    数据库的死锁问题，死锁在高并发的情况下的出现的概率是非常高的.还有就是考虑图片服务器分离,数据库集群和库表散列,镜像等
6,用户分地域优化问题
     这就根据某个地域用户集中访问进行相应的设制策略.等服务了。

一、什么情况下网站会被百度降权
　　1.网站长时间无法访问(服务器不稳定);
　　2、新站过快增加外链(容易进入沙盒);
　　3、频繁修改网站标题、关键词、描述等;
　　4、大量采集内容、页面重复度高。

　　二、导致网站被降权主要有以下几个常见原因：
　　1.友情链接，友情链接可能是导致网站降权出现的几率最大的，特别是百度优化的过程中，百度对友情链接的要求很高，在百度给站长的一封信就明确表示，慎重选择你的网站的友情链接。
　　2.内容问题，长期更新了一些与主题不相关的内容，这样的话搜索引擎认为你是在欺骗他，他对你网站进行了降权。一定要注意更新的内容一定要与主题相关，切勿为了家原创文章，不断的写一些与网站主题不相关的文 ...
　　三、怎么知道你网站被降权
　　1、主关键词排名下降;比如原来关键词在首页，现在突然掉到几十页或者找不到排名了;
　　2、网站快照不更新或快照日期很早以前的;
　　3、收录数量递减，没有新的收录页面放出来;
　　4、很多长尾关键词排名下降;
　　5、PR下降;
　　6、蜘蛛爬行量减少。
　　四、排名不见了，是不是网站降权了?
　　排名不见有二个可能: 1 网站被降权是其中一个可能 2 百度更新 时对排名做调整楼主所说的降权不能完全肯定,判断网站降权从下面几个方面: 1 排名忽然下降或消失,并且很难再做上去 2 快照不及时更新,如每周更新一次 3 发的文章原来很快收录,忽然很长时间不见收录这几个出现可判断为网站降权
　　五、站如果出现大量的死链，会降权吗?
　　死链，简单地说就是打不开的链接。产生原因主要包括：网站升级，原来的文章改动，重新发布，数据库出现问题，文章位置变动，服务器问题，更新时以旧换新等等。死链对于网站来说，可以说是比较致命，尤其是大量的死链。搜索引擎会认为此网站出现问题，或是用户体验很差，从而降低权重，访问减少，收录减少，排名受到影响。

最近在搞网页编程，总结了frameset 的一些使用技巧，供大家参考哦，还是先剖析一下框架吧！
■ 框架标记
　　<FRAMESET> <FRAME>
　　<NOFRAMES>
　　<IFRAME>
　　欲明白本篇【HTML彻底剖析】之标记分类，请看 【标记一览】。
　　也请先明白围堵标记与空标记的分别，请看 【HTML概念】。
 
 
■ 框架概念 ：
　　谓框架便是网页画面分成几个框窗，同时取得多个 URL。只需要 <FRAMESET> <FRAME> 即可，面所有框架标记需要放在一个总起的 html 档，这个档案只记录了该框架如何分割 ，不会显示任何资料，所以不必放入 <BODY> 标记，浏览这框架必须读取这档案 面不是其他框窗的档案。<FRAMESET> 是用来划分框窗，每一窗框由一个 <FRAME> 标 记所标示，<FRAME>必须在 <FRAMESET> 范围中使用。如下例：
　　<frameset cols="50%,*"> <frame name="hello" src="up2u.html"> <frame name="hi" src="me2.html">
　　</frameset>
　　此例中 <FRAMESET> 把画面分成左右两相等部分，左便是显示 up2u.html，右边则会显示 me2.html 这档案，<FRAME> 标记所标示的框窗永远是按由上而下、由左至右的次序
 
<FRAME>
用法：　　　　　　定义一个帧
开始／结束标识：　必须／非法
属性：　　　　　　name="..."定义帧的名字
　　　　　　　　　scr="..."定义在帧中显示的内容的来源
　　　　　　　　　frameborder="..."定义帧之间的边界(0或1)
　　　　　　　　　margwidth="..."设置帧的边界和其中内容之间的间距
　　　　　　　　　margheight="..."设置帧的边界和其中内容之间的间距化
　　　　　　　　　noresize="..."使帧的尺寸不能变
　　　　　　　　　scrolling="..."设置滚动条的表示方式(auto, yes, no)
空：　　　　　　　不允许
 
<FRAMESET>...</FRAMESET>
用法：　　　　　　定义在一个窗口中帧的布局
开始／结束标识：　必须／必须
属性：　　　　　　rows="..."设定行的数目
　　　　　　　　　cols="..."设定列的数目
　　　　　　　　　onload="..."当载入文档时的内部事件触发器
　　　　　　　　　onunload="..."当卸载文档时的内部事件触发器
空：　　　　　　　不允许
注释：　　　　　　FRAMESET可以嵌套
 
以上所述只是最简单的框架设定，若希望达到更合适的效果请加入或修改以下各参数。
　　标记：<FRAMESET>
　　例子：<frameset rows="90,*" frameborder="0" border=0 framespacing="2" border="2" bordercolor="#008000"></frameset>
　　功用：宣告HTML文件为框架模式，并设定视窗如何分割。
　　参数：
COLS="90,*"
垂直切割画面(如分左右两个画面)，接受整数值、百分数， * 则代表占用剩余的空间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以切成三个视窗，第一个视窗是 30 pixels 的宽度，为一绝对分割，第二个视窗是当分配完第一及第三个视窗后剩下的空间，第三个视窗则占整个视窗画面的 50% 宽度为一相对分割。你可自己调整数字。
 
ROWS="120,*"
这是横向切割，将画面上下分开，数值设定同上。 COLS 与 ROWS 两参数尽量不要放在同一个 <FRAMESET> 标记中，因 Netacape 偶然不能显示这类型的框架，尽量采用多重分割，如以上各例。
 
frameborder="0"
设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。
 
border="0"
设定框架的边框厚度，以 pixels 为单位。
 
bordercolor="#008000"
设定框架的边框颜色。颜色值请参考【调色原理】。
 
framespacing="5"
表示框架与框架间保留的空白的距离。
　　标记：<FRAME>
　　例子：<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">
　　功能：设定每一个框窗内的参数属性。
　　参数：

一、什么是动态内容 
大多数热门Web网站都从在线广告业务获利。Web页面中的广告空间是有限的，为了让广告投资物有所值，广告客户不仅必须在很小的广告空间内塞入大量的信息，而且还要保证广告能够吸引用户的注意力。在当前的大多数网站上，放入Web页面的横幅广告一般由服务器在构造页面的同时生成，我们无法把新的广告动态地插入到已经发送出去的页面。 如果要显示新的广告，唯一的办法就是重新刷新页面。我们可以用编程的方法刷新页面，例如：
使用浏览器窗口对象的setTimeOut函数定期地刷新页面。但是，用这种方法刷新广告时，用户会很明显地感到页面刷新过程；同时，要确定一个合适的刷新频率也很困难。 
把页面的过期时间设置为数秒时间，使得无论何时输入焦点转到该页面（即浏览器被激活）时，浏览器就会重新下载该页面。
一些大型网站，如yahoo.com和msn.com，都已经采用了这些技术。这两种方法都有各自的优点和缺点。在只使用java的情况下，我们完全可以通过网络编程和一些界面编程工作实现横幅广告的刷新系统，但必须解决下载时间过长和刷新延迟的问题。
二、用Java实现内容推送 
结合JavaScript帧间通信和一个管理网络通信的Java Applet，我们能够用推送技术解决这个问题。在这样一个系统中，Java Applet的任务是连接服务器并监听内容更新。一旦接收到了新的内容，Applet就构造出显示这些新内容的HTML代码，调用一个Javascript函数并把包含新内容的HTML传递给JavaScript函数。JavaScript函数运用DHTML和DOM技术，把页面中一个<div>标记的内容用参数中传入的新内容替换。由于浏览器安全的限制，Applet所打开的Socket端口只能连接到下载该Applet的服务器。
Web服务器只在80端口监听连接请求。因此，除了Web服务器之外，我们还需要一个接受Applet的Socket连接请求的网络应用服务。这个网络应用服务定时地查询数据库，把改动数据发布（推送）到所有已经连接的Applet。由于运用了隐藏帧和JavaScript的帧间通信功能，我们能够从用户面前隐藏大多数JavaScript逻辑。
在这整个处理过程中，最困难的任务是Java Applet与JavaScript代码之间的通信。Netscape提供了一个称为netscape.javascript.JSObject的类。要使用这个对象，请加入一个包含特殊“MAYSCRIPT”属性的Applet标记：
<APPLET code="MyApplet.class" height=1 width=1 MAYSCRIPT>
JSObject的方法允许Applet与文档对象交互以及调用JavaScript命令。例如，把下面的代码放入Applet，我们就能够访问窗口对象：
import netscape.javascript.*; public class MyApplet extends java.applet.Applet{ PRivate JSObject mainwin; public void init(){ mainwin = JSObject.getWindow(this); } }
获得JSObject引用后，我们就能够访问文档窗口对象，并通过JSObject的eval()方法调用JavaScript函数。
三、用DHTML更新页面 
在把来自Applet的新内容写入文档时，为了不影响原来已经存在的内容，我们可以使用HTML的<div></div>标记。这个标记在IE和Netscape中是不同的。
　　对于IE以及Netscape 6，这个HTML标记是：
// 所有要更新的内容必须用id标识 <div id="iexplorer" width=700px ></div>

 <body style="direction: ltr;" leftmargin="2" topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()" marginheight="0" marginwidth="0">消除右键点击复制的程序
本文介绍如何使用CSS让英文文本自动换行，大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们自动换行的方法！
大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是CSS如何将他们自动换行的方法！对于Div和table以及不同的浏览器，实现css自动换行的方法都稍有不同，下面分别介绍：
对于div
1.（IE浏览器）white-space:normal; Word-break:break-all;这里前者是遵循标准：
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#wrap{white-space:normal; width:200px; }
或者：
#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd111111111111111111111111111111</div>
效果：可以实现自动换行
2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#wrap{white-space:normal; width:200px; overflow:auto;}
或者：
#wrap{word-break:break-all;width:200px; overflow:auto; }
<div id="wrap">ddd1111111111111111111111111111111111111111</div>
效果：容器正常，内容隐藏
对于table
1. (IE浏览器)使用样式table-layout:fixed：
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
效果：可以自动换行
2.(IE浏览器)使用样式：
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
效果：可以自动换行
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap：
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<style>
.tb{table-layout:fixed}
</style>
<table class="tb" width=80>
<tr>
<td width=25% nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>
效果：两个td均正常自动换行
4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div：
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tb width=80>
<tr><td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</table>
这里单元格宽度一定要用百分比定义 效果：正常显示，但不能换行。

 1 createElement(element)
创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。
eg) var para = document.createElement("p");
    document.body.appendChild(para);
2 createTextNode()
创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：
reference = document.createTextNode()
参数为新建文本节点所包含的文本字符串
eg)
var message = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(message);
document.body.appendChild(container);
3 cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本，参数为true或者false，true表示同时复制该节点的子节点，false则不复制任何子节点。
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);
4 appendChild()
reference = node.appendChild(newChild);
插入节点，例子参考前面。
5 insertBefore()
reference = element.insertBefore(newNode,targetNode)
将一个给定节点插入到一个给定元素节点的给定子节点的前面，返回一个指向新增子节点的引用指针。
eg)
var container = document.getElementById("content");
var message = document.getElementById("finePRint");
var para = document.createElement("p");
container.insertBefore(para,message);
6 removeChild()
reference = element.removeChild(node)
将从一个给定元素利删除一个子节点，返回一个指向已被删除的子节点的引用指针。
当某个节点被removeChild()删除后，此节点所有子节点都被删除。
7 replaceChild()
reference = element.replaceChild(newChild,oldChild)
把一个给定父元素里的一个子节点替换为另外一个节点，oldChild节点必须是element元素的一个子节点，返回值是一个指向已被替换的那个
子节点的引用指针。
eg)
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);
8 setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性
9 getAttribute
attributeValue = element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。
10 getElementById()
element = document.getElementById(ID)
寻找一个有着给定id属性值的元素，返回一个元素节点
11 getElementByTagName()
用于寻找有着给定标签名的所有元素：
elements = document.getElementsByTagName(tagName)
返回一个节点集合。
12 hasChildNodes
用来检查一个给定元素是否有子节点
booleanValue = element.hasChildNodes
返回true或false。
13 DOM属性
节点的属性
nodeName属性将返回一个字符串，其内容是给定节点的名字。
如果节点是元素节点，返回这个元素的名称；
如果是属性节点，返回这个属性的名称；
如果是文本节点，返回一个内容为#text的字符串；
nodeType属性将返回一个整数，这个数值代表给定节点的类型
nodeValue属性将返回给定节点的当前值
如果节点是元素节点，返回null；
如果是属性节点，返回这个属性的名称；
如果是文本节点，返回文本节点的内容；
遍历节点树
childNodes 该属性返回一个数组，这个数组由给定元素节点的子节点构成
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
nextSibling 返回给定节点的下一个子节点
parentNode 返回一个给定节点的父节点
previousSibling 返回给定节点的下一个子节点??
14 setTimeout
javaScript函数，能够让某个函数在经过一段预定的时间之后才开始执行，函数有两个参数，第一个参数是将要执行的那个函数的名字；
第二个参数是一个数值，以毫秒为单位设定了需要经过多长时间才开始执行由第一个参数所给出的函数：
setTimeout("function",interval);

 div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白：
以下是引用片段：
　　style="visibility: none;"
　　document.getElementById("typediv1").style.visibility="hidden";//隐藏
　　document.getElementById("typediv1").style.visibility="visible";//显示

 最近，我不得不对我的一个客户的旧网站进行更新，使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力，主要是因为我曾经使用的很多编程惯例已经不再适用，特别是从可访问性上来讲。我曾经使用绝对的字体大小，固定的页面宽度和表格来做版面设计和空间分配。
 
 像那时建构的很多网站一样，我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本。它没有使用任何CSS的更加强有力的版面设计功能，也没有允许HTML设备独立，而这是CSS可访问性的主要优点之一。
 
 问题是如何出现的？
 
 在我概述使网站更加具有可访问性的方法之前，了解现今众多的访问性问题的起因也许是很有帮助的：
 
 对HTML肤浅的理解：在1990年代的互联网大发展时期中，所有人都开始建构网站。WYSIWYG编辑器使得几乎每个人都可以很容易地建构一个网站，而不用费心去学习HTML。但不幸的是，这种在使用上的便利带来了一些蹩脚的代码，对可访问性造成了妨碍。
 
 HTML在设计方面的局限性：开发者和设计者经常会故意错用HTML标签，特别是<table>标签，来克服HTML在版面和设计上的局限性。这种设计方式也会带来妨碍可访问性的代码。
 
 什么使得CSS更具有访问性？
 
 CSS在1996年出现，用来解决上述的问题。通过使用CSS，你可以将一个HTML文件的内容与有关它的表现形式或风格的信息分离开来。这就使你可以应用准确的格式化并达到想要得到的版面设计，而无需使用可能会让屏幕阅读器和专门的浏览器软件产生困惑的HTML代码。
 
 例如，虽然HTML表格是用来排列表格式数据的，但他们也经常被用来排列对齐一个页面上的元素的。但是阅读器和例如语音合成器的软件要求有效的HTML代码。因此当他们遇到一个页面错误地使用了诸如一个表格的元素，产生的结果就会让使用者感到莫名其妙。
 
 CSS的另一个可访问性的优点就是它允许使用者定义他们自己的风格单，这个风格单可以与网站的风格单共同工作。因此，例如一个使用者可以设定，所有通过<p>标签定义的文本都应该是1.5em Arial，即使这个网站的风格单表示它应该是18px Verdana Bold。
 
 要注意用户定义的风格只有在用户的风格名称与HTML页面中的标签相符时才会起作用，这是很重要的。这就将确保兼容性的责任交到了开发者的手中。例如，如果用户的风格单指定<p>标签应显示1.5em Arial文本，但是HTML页面并不使用<p>标签来从风格单中调用一个风格（也许它使用<font class=”bodytext”>），用户对于<p>标签定义的风格将会被忽略。因此要确保你对你的标题和段落使用标准的HTML标签，这将减少用户定义的风格单被忽略的机会。
 
 开始
 
 如果你是从头开始建构一个新的网站，那么通过CSS来改善可访问性就会很容易。但你仍然可以轻松地将现有的网站转变为CSS形式。
 
 步骤1：检查现有代码
 
 为了更好地说明，我将用在表A中这个简单的HTML代码来代表一个使用CSS的页面。这个例子假设页面还没有使用CSS，不过你也可以使用相似的方法来评价一个基于CSS的站点。主要的不同点就是大多数的改变将发生在CSS文件中而不是HTML文件中。
 
 步骤2：从HTML中去掉所有特殊风格标签
 
 要在这个页面中加入CSS，我首先需要去掉所有要控制内容表现的标签。样本代码使用了字体标签来定义字体外观，风格和颜色。去掉这些元素使得样本代码如表B所示。
 
 步骤3：从HTML中去掉并替换任何错用的标签
 
 现在我要去掉任何错用的HTML标签。在样本代码之中，一个表格用来在页面的内容创建一个15象素的边缘，代码还使用<br>标签来创建段落。
 
 在我去掉表格和<br>标签之后，我将他们替换为适当的标签。例如，我对页面标题使用<h2>标签，用<p>标签来显示段落。使用这些标准HTML标签使得之后的CSS的应用变得非常容易，而且与用户定义的风格单更加兼容。现在的样本代码如表C所示。
 
 步骤4：建构一个CSS文件来覆盖风格信息
 
 现在我已经从HTML文件中去掉了所有风格信息，我需要将这些信息转移至一个CSS文件中。CSS文件仅仅是一个存为.css扩展名的文本文件，因此它可以在任何一个文本编辑器中进行创建。我使用的是Dreamweaver MX。
 
 为了使在HTML中应用CSS文件变得容易，我使用了名为p和h2的风格来对应标准HTML标签。我使用了可变的字体大小，使得用户可以轻松地在浏览器中增大或缩小字体大小。使用绝对大小可以防止浏览器对字体进行大小的调整（除了Netscape 6或以后的版本之外，它将不考虑绝对字体大小）。我还在需要的地方指定了字体的种类，重量和颜色。
 
 要重新产生由HTML标记代码创建的版面，我需要将<p>和<h2>标签设置宽度为780象素。然而，由于我们的目的是将可访问性最大化，因此我将去掉宽度设置使得页面能符合浏览器窗口的大小。而且我将让HTML页面使用浏览器的缺省边缘，而不是用原始代码的<table>标签来重新创建15象素的空白，这也使得其它例如打印机等的设备来使用它的缺省边缘设置。
 
 表D显示了我创建的CSS文件。我将它命名为Mystylesheet.css并将它放置在网站根目录下的一个风格文件夹之中。
 
 步骤5：在HTML文件上附加新的风格单
 
 在创建了CSS文件之后，我在HTML文件中插入了它的风格。因为HTML文件已经包括了所有在CSS文件中引用的标签(<h2>和<p>)，所以我只需要连接到HTML文件头部的风格单上就可以了。HTML文件从CSS文件中获得风格并将他们应用到<h2>和<p>标签当中，如表E所示。
 
 步骤6：验证代码
 
 整个过程的最后一个步骤就是验证HTML代码的可访问性。如果你对于CSS来说是个新手的话，你最好对CSS代码也进行验证。有很多种的工具都可以帮你对二者进行验证。
 
 我使用Dreamweaver MX来检查我的样本代码的可访问性。你可以通过在文件菜单中选择Check Page然后选择Check accessibility来实现。任何错误或是警告都会显示出来，还包括出现位置的行号以及对问题简要的解释。你可以在Dreamweaver MX的Reference工具中找到更多关于这些错误和警告的内容。你只要从Dreamweaver的Windows菜单中选择Reference然后从Book菜单中选择UsableNet Accessibility Reference就可以了。
 
 此外，World Wide Web Consortium (W3C)提供了超过30个的可访问性评估工具的链接。W3C还提供了针对HTML和CSS的基于Web的免费验证器。
 
 可访问性和简单的管理
 
 虽然这里给出的例子是很简单的，但它说明了利用CSS使你的站点更加具有可访问性是非常容易的。而且，对于CSS的使用不止这一个优点而已。
 
 基于CSS的网站要比仅仅只有HTML的网站要好管理得多。CSS文件中的风格上的变化可以应用到整个网站中而不需要改变网站中任何的HTML文件。而且CSS的使用缩小了每一个HTML文件的整体文件大小，因为所有的风格信息都存储在了CSS文件之中。
 
 因此如果你想要改善可访问性的话，将其视为一个机会，而不是一个障碍。要了解更多关于CSS和可访问性的内容，你可以去看一看World Wide Web Consortium中的Web Accessibility Initiative (WAI)。