解决IE6、IE7、IE8样式不兼容问题.doc

解决IE6、IE7、IE8样式不兼容问题(1)阅读：333次时间：2010-08-18 13:03:56 字体：大中小这里和大家探讨一下解决IE6、IE7、IE8 DIV错位问题，如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，非常方便。IE6里DIV错位的问题采用”FLOAT：LEFT“的DIV在IE8、IE7、都没问题，IE6下却向下移动，出现空白。这是因为，IE6采用的内核默认把DIV之间的距离增加了35个PX，所以，试试是将下移的DIV的STYLE里增加margin-left:-5px;或者更小。解决IE7、IE8样式不兼容问题方法一、要在页面中加入如下HTTPmeta-tag:1. 2. 只要IE8一读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展示。方法二、针对整个网站，在IIS中加入如下描述符就可以有相同的效果，当然这么做范围更广。1. xmlversionxmlversion=1.0encoding=utf-8?2. 3. 4. 5. 6. 7. customHeaders8. httpProtocol9. system.webServer10. configuration11. 解决IE6、IE7、IE8样式不兼容问题现在我们在做网页的时刻总是要考虑一些浏览器之间的兼容问题。近期在做一个短信平台的项目。在项目的开发过程中让我遇到了一件头痛的事情就是IE7与IE8不兼容。后面想了许多办法得以解决。现共享如下：如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：CODE:1. 2.解决Firefox、IE6、IE7的css样式兼容问题做主题最麻烦的就是CSS样式兼容问题，由于各浏览器对ccs的不同解释，造成本来IE7可正常显示，但到了Firefox、IE6等其它浏览器上，却出现错位、下沉等问题，只得在Firefox、IE6、IE7之间不停的切换调试，汗最近又有两款浏览器加入googleChrome和IE8,某个浏览器一统天下看来是没希望了，只能尽量克服兼容问题。找到一篇解决兼容问题的文章，还是很有效的。1.针对FirefoxIE6IE7的CSS样式现在大部分都是用!important来hack，对于IE6和Firefox测试可以正常显示，但是IE7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：1. #1color:#333;/*Moz*/ 2. 3. *html#1color:#666;/*IE6*/ 4. 5. *+html#1color:#999;/*IE7*/ 6. 那么在Firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。2.css布局中的居中问题主要的样式定义如下：1. bodyTEXT-ALIGN:center; 2. 3. #centerMARGIN-RIGHT:auto;MARGIN-LEFT:auto; 4. 说明：首先在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT:auto;MARGIN-LEFT:auto;就可以了。3.盒模型不同解释.1. #box 2. 3. width:600px; 4. 5. /forIE6.0-width:500px; 6. 7. /forff+IE6.0 8. 9. 10. 11. #box 12. 13. width:600px!important 14. 15. /forff 16. 17. width:600px; 18. 19. /forff+IE6.0 20. 21. width/*/:500px; 22. 23. /forIE6.0- 24. 25. 26. 4.浮动IE产生的双倍距离#boxfloat:left;width:100px;margin:000100px;/这种情况之下IE会产生200px的距离display:inline;/使浮动忽略这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,不可控制(内嵌元素);#boxdisplay:block;/可以为内嵌元素模拟为块元素display:inline;/实现同一行排列的的效果diplay:table;5.IE与宽度和高度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：1. #boxwidth:80px;height:35px;htmlbody#box 2. 3. width:auto;height:auto;min-width:80px;min-height:35px; 6.页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个放到标签下，然后为div指定一个类：然后CSS这样设计：1. #container 2. 3. min-width:600px; 4. 5. width:expression(document.body.clIEntWidth600?“600px”:“auto”); 6. 7. 8. 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。7.清除浮动1. .hackbox 2. 3. display:table; 4. 5. /将对象作为块元素级的表格显示 6. 7. 8. 或者1. .hackbox 2. 3. clear:both; 4. 5. 6. 或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非IE浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的1. #box:after 2. 3. content:“.”; 4. 5. display:block; 6. 7. height:0; 8. 9. clear:both; 10. 11. visibility:hidden; 12. 13. 14. 8.DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.1. #box 2. 3. float:left; 4. 5. width:800px; 6. 7. #left 8. 9. float:left; 10. 11. width:50%; 12. 13. #right 14. 15. width:50%; 16. 17. 18. 19. *html#left 20. 21. margin-right:-3px; 22. 23. /这句是关键 24. 25. 26. HTML代码1. 2. 3. DIV4. 5. DIV6. 7. DIV8. 9.属性选择器(这个不能算是兼容,是隐藏css的一个bug)1. piddivid 2. 3. piddivid 4. 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如pid中,所有p标签中有id的都是同样式的.10.IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。11.高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin或paddign时。例：1. 2. 3. p对象中的内容p4. 5. div6. 7. CSS： 8. 9. #boxbackground-color:#eee; 10. 11. #boxpmargin-top:20px;margin-bottom:20px;text-align:center; 12. 解决方法：在P对象上下各加2个空的div对象CSS代码：.1height:0px;overflow:hidden;或者为DIV加上border属性。注：IE都能识别*;标准浏览器(如FF)不能识别*；IE6能识别_，其他不能IE6能识别*，也能识别!important,但不能把它识别成优先IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;文章来源:Div-C设计网参考:/div_css/topic/?id=7633解决IE6、IE7、IE8、Firefox兼容的几种方案阅读：49次时间：2010-08-19 11:06:13 字体：大中小你是否在位IE6、IE7、IE8、Firefox不兼容问题而烦恼，这里向大家简单介绍一下解决IE6、IE7、IE8、Firefox兼容的几种方案，希望对你的学习有所帮助。解决IE6、IE7、IE8、Firefox兼容的几种方案浏览器不兼容，你知道源头吗？凡事都要知其然，才能知其所以然，前端开发的朋友想毕都会碰到浏览器兼容的问题，今天在网上觅到此文，希望对大家有用。浏览器的不兼容，大家肯定都是深恶痛绝的，往往我们只是去做修补，却忘了更重要的事情，那就是追溯根源，避免类似的不兼容再次出现。在下不才，归纳几点html编码要素，望能指点各位：1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，IE下实际占高16px，下留白3px，Firefox下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定line-height。确保所有文字都有默认的line-height值。这点很重要，在高度上我们不能容忍1px的差异。2.Firefox下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而IE下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。3.还讨论内容撑破容器问题，横向上的。如果float容器未定义宽度，Firefox下内容会尽可能撑开容器宽度，IE下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。1. a.2. 3. b.4. 5. c.6. 7. d.8. 上面的代码在不同浏览器中是不一样的，实验起源于对小height值div的运用，小height值要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。4.浮动的清除，Firefox下不清除浮动是不行的。纠正大家一个误区，遇到不兼容就说Firefox烂是不对的，其实更多时候是IE的奇怪表现让我们无所适从。以下列出IE6的种种劣迹。5.最被痛恨的，double-marginbug。IE6下给浮动容器定义margin-left或者margin-right实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。6.mirrormarginbug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是IE6下的特产，该类bug出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border或设定float。引申：Firefox和IE下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。7.吞吃现象，限于篇幅，我就不展开了。还是IE6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决IE6bug而生的。8.注释也能产生bug“多出来的一只猪。”这是前人总结这个bug使用的文案，IE6的这个bug下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“picRotatestart”方法写注释。9.里加float，这是一个典型的，棘手的兼容问题，希望引起大家正视，给li不同的属性会有不同的解释效果，Firefox下的解释稍可理解，IE6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在ul使用心得一文里有相关成果，却没给出问题解决的过程。10.使用了“float:left;display:inline”的ul的奇怪表现。可以看出这句css是针对IE6下的doublemarginbug而加上的display:inline，这也是我的css体系里的重要一环，在ul使用心得一文中有相关阐述。而这句css用在ul上会让你痛苦不堪。点到为止，这里不能多说哈。11.img下的留白，大家看这段代码有啥问题：1. 2. 3. 4. 把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写1. 2. 3. 4. 5. 后面两个标签要紧挨着。IE7下这个bug依然存在。解决方案：给img设定display:block。12.失去line-height。文字，很遗憾，在IE6下单行文字line-height效果消失了。，原因是这个inline-block元素和inline元素写在一起了。解决方案：让img和文字都float起来。引申：大家知道img的align有text-top，middle，absmiddle啊什么的，你可以尝试去调整img和文字让他们在IE和Firefox下能一致，你会发现怎么调都不会让你满意。索性让img和文字都float起来，用margin调整。13.链接的hover状态。a:hoverimgwidth:300px我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在IE6下无效，IE7、Firefox下有效。14.非链接的hover状态。div:hover这样的样式IE6是不认的，在IE7、Firefox下才有效果。15.block化的a链接，其内套absolute层，absolute层内放置img，IE下，鼠标点击img不会有链接效果，Firefox、op下正常。想不出来了，以后想到再加吧。上面的诸多问题如果你掌握了其中奥妙，90%的不兼容问题不需要另起csshack的。16.无法彻底清除的float。如果让ul下的li具有了float属性，如何clear浮动的li呢？或者class=”c”或者class=”c”或者class=”c”或者上述的组合？这个问题，我无法给出解答。下面有个例子与此相关1. 4. 5. 6. .cclear:both;overflow:hidden;+overflow:visible 7. .bdborder:1pxsolidred 8. 9. ul.exlist-style:none; 10. ul.exlifloat:left;border:1pxsolidgreen; 11. 12. 13. sfsdfsfdf14. sfsdfsfdf15. 16. 17. sfsdfsfdf18. 请在IE下测试，仅仅将margin-top:19px改为margin-top:20px你发现什么了？要素：doctype必须有，IE6、IE7下margin-top:19px还好好的，margin-top:20px就出问题了，无法解释。大家还可以将clear层换不同的位置测试。解决方案：给ul属性zoom:1（给li加zoom:1没用）引申：clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是Firefox和op下失去margin效果，IE下某些margin值也会失效1. dd2. Firefox3. 17.IE下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，IE6支持overflow-x或者overflow-y的特性，IE7、Firefox不支持。18.IE6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。19.IE6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。20.IE6下的bug，内有的情况下，position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。21.终于来了个Firefox的缺点。width:100%这个东西在IE里用很方便，会向上逐层搜索width值，忽视浮动层的影响，Firefox下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了IE完美实现IE6 IE7 Firefox兼容的通用方法阅读：18次时间：2010-08-19 15:51:30 字体：大中小本文和大家重点讨论一下完美兼容IE6/IE7/Firefox的通用方法，相信通过本文的介绍你对这些方法一定会有深刻的认识。完美兼容IE6/IE7/Firefox的通用方法关于CSS对各个浏览器兼容已经是老生常谈的问题了，网络上的教程遍地都是。以下内容没有太多新颖,纯属个人总结，希望能对初学者有一定的帮助。一、CSSHACK以下两种方法几乎能解决现今所有HACK.1,!important随着IE7对!important的支持,!important方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)1. 2. #wrapper 3. 4. width:100px!important;/*IE7+Firefox*/ 5. width:80px;/*IE6*/ 6. 7. 8. 9. 10. 2,IE6/IE77对FireFox*+html与*html是IE特有的标签,firefox暂不支持.而*+html又为IE7特有标签.1. 2. #wrapper 3. 4. #wrapperwidth:120px;/*FireFox*/ 5. *html#wrapperwidth:80px;/*ie6fixed*/ 6. *+html#wrapperwidth:60px;/*ie7fixed,注意顺序*/ 7. 8. 9. 10. 注意:*+html对IE7的HACK必须保证HTML顶部有如下声明：1. 二、万能float闭合(非常重要!)关于clearfloat的原理可参见HowToClearFloatsWithoutStructuralMarkup将以下代码加入GlobalCSS中,给需要闭合的div加上class=clearfix即可,屡试不爽.1. 2. /*ClearFix*/ 3. 4. .clearfix:after 5. 6. content:.; 7. display:block; 8. height:0; 9. clear:both; 10. visibility:hidden; 11. 12. .clearfix 13. 14. display:inline-block; 15. 16. /*HidefromIEMac*/ 17. .clearfixdisplay:block; 18. /*EndhidefromIEMac*/ 19. /*endofclearfix*/ 20. 21. 三、其他兼容技巧1,Firefox下给div设置padding后会导致width和height增加,但IE不会.(可用!important解决)2,居中问题.1).垂直居中.将line-height设置为当前div相同的高度,再通过vertical-align:middle.(注意内容不要换行.)2).水平居中.margin:0auto;(当然不是万能)3,若需给a标签内内容加上样式,需要设置display:block;(常见于导航标签)4,Firefox和IE对BOX理解的差异导致相差2px的还有设为float的div在ie下margin加倍等问题.5,ul标签在Firefox下面默认有list-style和padding.最好事先声明,以避免不必要的麻烦.(常见于导航标签和内容列表)6,作为外部wrapper的div不要定死高度,最好还加上overflow:hidden.以达到高度自适应.7,关于手形光标.cursor:pointer.而hand只适用于IE.本篇文章来自IDC专家网原文链接：/articles/1213781627945/20070419/1214037410899_1.htmlCSS兼容：解决IE6、IE7和IE8的兼容问题妙招阅读：155次时间：2010-08-19 08:50:10 字体：大中小本文和大家重点讨论一下CSS兼容：解决IE6、IE7和IE8的兼容问题妙招，本来网页设计是件很有趣的事情，但是却被这多余兼容工作伤脑筋，相信本文介绍一定会让你有所收获。CSS兼容:解决IE6、IE7和IE8的兼容问题CSS兼容_如何解决IE6、IE7和IE8的兼容问题，有时做网页明明css样式表是正常的但ie8不兼容,网页显示不正常,css如何兼容ie8呢，下面看解决办法：IE6、IE7、Firefox等浏览器的兼容性问题让网页设计师们大伤脑筋，本来网页设计是件很有趣的事情，但是却被这多余兼容工作伤脑筋，特别是让人唾弃的IE6，多少人想让它消失，可是它就是消失不了，微软还说不会停止对IE6，真够郁闷的。现在呢，IE8正式版已经出来一段时间了，不少网民被微软的Update提示安装上了IE8，这下又给设计师带来了麻烦，还好微软良心发现，把IE8做得比较符合标准，与其他标准浏览器区别不大，可是它还是与其他浏览器有区别的。怎么办呢？我一直在用IE6，不想用IE8，电脑里有个绿色版的IE6，还有绿色版的Firefox，对于网页兼容测试，我用IE6、IE7、Firefox三个浏览器测试，因为没安装IE8，所以一直没能测试。大家都知道，IE8是有两种解析模式的，一种是IE8StandardModes：默认的最标准的模式，严格按照W3C相关规定，一种是IE7StandardsModes：IE7现在用的解析网页的模式。IE7还算是不错的浏览器，如果让IE8浏览器自动切换到IE7,IE6模式，那我们就不用为IE8布局兼容问题烦恼了，而这个开关只有一行代码：1. 或者1. 2. 或者1. 2. 【这个是兼容IE6的】 其实就是比较霸道的让ie8以ie7的标准或者是以ie6的标准去解析整个页面!在网页的head里加入以上这段代码，用IE8访问时就会自动切换到IE7模式，如果你的网站在IE7下显示正常，那在IE8下也可以正常显示了。加入这段代码会不会影响其它的浏览器呢？不会，X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，所以你就放心使用吧！就这样一段代码就可以让你的网站轻松兼容IE8了。帮你走进web标准设计的世界:web标准教程阅读：17次时间：2012-04-23 09:57:35 字体：大中小一个网页的架构：声明，头部，主体，结束123/声明的一些规范，初学者不必去理会，该部分会自动生成456/*7*http-equiv=Content-Type表示描述文档类型8*content=text/HTML;文档类型mime类型，这里为html,如果JS就是*text/javascript，9*charset=utf-8页面字符集，编码，eg:gb2312,iso-8859-1,utf-810*建议统一采用utf-811*/12无标题文档13/一个网页的标题1415161718我要主要讲解的是主体部分，在这过程成中会对其他部分有一定的讲解和延伸。在讲body之前，我先讲一下HTML标签的大体分类。主要是为接下来讲解网页的基本结构做铺垫。html标签大体分为：块级元素和内联元素，那么何为块级元素何为内联元素呢？块级元素：直白的说就是一块区域，独立占用一行空间的元素，如：div，p。内联元素：与块级元素不同，就是不能占据一行空间的元素，如a，span。我说的可能不是很专业，目的只是初学者便于理解。举个例子，大家就懂啦（这里我只写了body中的内容，其他的内容大家自己补充）：12我是块级元素，我独占一块空间3我是块级元素，我独占一块空间4我是内联元素元素，我不独占一块空间*5我是内联元素元素，我不独占一块空间6运行结果：相信到这里大家对块级元素和内联元素也已经有了一定了解，那么接下来我将细致的讲解body中的那些事，哈哈！事1：body是怎么个架子？插播广告：div是html的一个标签，每个标签都有自己的一些属性，例如.,其中id和class就是对应的div元素的属性，具体含义以后讲解。我以学生在线首页/为例对事一进行讲解。body的架子：整理：123/我是最外层！包裹这整个网页的皮，也有人给我起名字为wrapper456/我是头部！7891011/我是内容！1213141516/我是尾部！1718192021详解：123/我是最外层！包裹这整个网页的皮，也有人给我起名字为wrapper12/我是头部！1234/我是内容！1234/我是尾部！13万事没有绝对，我说的是个主流事儿二：下面针对每一块我将细细为大家讲解，通过这种方式来讲解html主流标签的应用。Ok，begin！Right now！首先：header部分我们可以把他分为3个部分：banner：logo：（logo就是一个网站或公司的标识）nav（导航条）：声明：这里我首先只讲html，至于样式（css）我将会在以后的教程中详细讲解；好吧，html开始写了，还等什么？12你还没有登录，请登录登陆注册3So easy !讲解标签之前，我先讲一下他们的几个常用的共有属性：1.id：就是一个标签的名字，在一张页面中id不允许重复，体现了唯一性，特有性，如果一张页面就是一个家族，当然我指的是传统的中国家族，不要较真哦，那么每一个标签就是一个家庭成员，id就是该成员的名字，当然一个家族的成员名字还是不要重复的好，是吧？2.class：当然一个大家族有若干个家庭组成，如果只用id区分那么时就有些繁琐了，比如说某某家的人应该怎么样时，那么这一类人我们怎么来划分呢？class就是为这个而生的，哈哈。class指一个标签所属的类别，就像是说这个人是哪家的一样，当然一张页面我们可以无限的重复使用了（这里就不考虑计划生育啦）。3.title：这个含义很简单，就是当鼠标放在该标签身上的时候所给的提示。不信你把鼠标放在注册两个子上面试试。标签1：div使用指数：*功能：主要用来布局，估计通过事一大家应该有所了解了类型：块级元素常用属性：id，class ，title标签2：span使用指数：*功能：主要用来提取一小段文本来设置特别的样式类型：内联元素常用属性：id，class，title标签3：a使用指数：*功能：主要用来表示一个链接类型：内联元素常用属性：id，class，title特别属性：1.href:指的是该链接指向的url（链接地址）例如下面的代码，点击学生在线四个字就会链接到学生在线首页了，试试看哦！1学生在线 2.target: 常用值：_blank,_self(默认值)注意：书写html标签的时候一定要有规范：1.有开始就有结束:XXX,除了个别没有结束标志的:2.块级元素不能被内联元素包裹：这是可笑的写法！网页制作掌握的最常用的HTML标记阅读：19次时间：2011-11-30 14:14:34 字体：大中小一、HTML常用标签的优化对于html，应该是网络编辑的基本技能，不熟悉是说不过的。作为网络编辑，所有的SEO参数没有必要全部掌握，但HTML基本标签中相关SEO的东西，大家有必要了解一下。页面标题上面这段是网页的HEAD部分，这里的各个标签对于搜索引擎来说都是至关重要的。TITLE对于搜索引擎永远是重要的，不管他们的算法如何变化，这个标签的重要性是不会降低的。所以这里就要求网络编辑在撰写文章或给频道命名时要考虑到从搜索引擎过来的这部分用户。目前，百度能够直接显示31-32个汉字，也就是62个左右的字符，而GOOGLE则可以显示34个左右的汉字。所以，我们在撰写文章标题或频道标题时就要在减去程序自动加上的在TITLE显示的内容，如下图中的“_新闻中心_新浪网”这几个字，使整体网页TITLE控制在要求字数左右。这里需要说明的是，你是否要求程序自动添加的内容要在搜索结果中显示。这个时候，需要考虑的是网站的权威性及内容的优先性。如果你网站的文章是被泛滥引用的，那么为了避免这个问题就必须强调你的权威：否则，由于前面的文章标题太长而使后面的频道名、网站名显示不出来，就有可能使用户放弃点击转而点击其他转载此文章并将TITLE规范化的网页。如上图，根据网名的习惯，如