html中title没写完整造成同样的页面firefox可以显示,其他浏览器都是空白

无聊的IE,失败的IE就是个垃圾。
不过也怪自己不好,一个页面在IE中或者在基于IE内核的浏览器中显示为一片空白,但是在火狐浏览器或者其他非IE浏览器中显示正常,这种情况下问题很有可能出现在Title标签上。
这次记住了:
1.title标签未写完整。
如:《title》murray-专注于网站建设及优化《title》,
解决办法:只要把它更改完整应该就没问题。
2.title标签位置不对。
如: 《title》murray-专注于网站建设及优化《/title》

解决办法:将meta标签内和title标签位置互换即可。
原因:Content-Type的位置出现在title之前。这使得IE浏览器不知怎么解释这个数据(按照图片解析还是按照文本解析),IE一片迷茫,所以就出现空白现象。FireFox 会“阅读”完所有代码后判断编码方式,自然不会出现空白现象。


css文件后面为什么有参数

客户端会缓存这些css或js文件,因此每次升级了js或css文件后,改变版本号,客户端浏览器就会重新下载新的js或css文件
举例来说:

可以看成是css的一个版本号,如果css改动过,担心浏览器本地css文件没有及时更新而导致页面没有出现相应效果时,就可以通过修改这个?后面的号码来达到使浏览器重新下载最新的css文档!


怎么做网站(基础知识)

网站说倒底就是我们想要展示的内容在浏览器上的一种表现形式。直到互联网历史的人都知道,在互联网的早期,大家都是通过一个类似现在windows网上邻居的界面来共享信息的。人们要从众多的文件和文件夹中找到自己想要的东西是件很累的事情,于是大家想到弄一个索引页,于是目录和介绍出现了。为了便于找到这些目录,并方便的阅读它,一个叫姆·伯纳斯-李(Tim Berners-Lee)的人发明了首个网页浏览器WorldWideWeb并第一个使用超文本来分享资讯。而那些用超文本编写的目录便成了网站的最早前身。
说到这里我们就不能不介绍html了。HTML(HyperText Mark-up Language)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。
想要做好网站,Html是必学科目。同时我们还要知道当前主流浏览器,它们种类繁多,稍有不慎就导致我们辛苦做的页面表现大乱。而且他们在某些方面还互不兼容,我们只有直到他们的脾气才能驾驭好。
Internet Explorer IE 6-7
火狐浏览器Mozilla - Firefox
opera
chrome:google浏览器
Tencent Traveler(腾讯TT)
TheWorld(世界之窗)
MagicMaster (M2,魔法大师)
miniie
Thooe(随E浏览器)
遨游 下载地址
绿色浏览器Greenbrowser
Safari
其中IE6-7是现在用户量最大的,火狐Firefox排名第二,只要要求不高,我们只要以这三个为准就好了。
网站建设说起来简单,但做起来却没有那么容易。以上是本人的心路总结,希望对新人的成长能有所帮助。当然我也不是什么高手,如有不妥之处,还望大家指正。如有转载请表明出处,谢谢。


解决CSS各个版本浏览器的兼容问题

屏蔽IE浏览器(也就是IE下不显示)
*:lang(zh) select {font:12px !important;} /*FF,OP可见,特别提醒:由于Opera最近的升级,目前此句只为FF所识别*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7与IE5.0可以识别
*+html select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
仅IE7可以识别
*+html select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
IE6及IE6以下识别
* html select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body select {…}
这句与上一句的作用相同。
仅IE6不识别,屏蔽IE6
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
仅IE6与IE5不识别,屏蔽IE6与IE5
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
不屏蔽IE5.5仅IE5不识别,屏蔽IE5
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。
盒模型解决方法
selct {width:IE5.x宽度; voice-family :”\”}\””; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动
select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。
截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。
只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。
IE5.x的过滤器,只有IE5.x可见
@media tty {
i{content:”\”;/*” “*/}} @import ‘ie5win.css’; /*”;}
}/* */
IE5/MAC的过滤器,一般用不着
/*\*//*/
@import [...]


网页性能优化工具

Firefox Firebug Net panel,见http://www.getfirebug.com
Yslow,Yahoo 性能扩展Firebug,见http://developer.yahoo.com/yslow/
Firefox LiveHTTP Headers,见http://livehttpheaders.mozdev.org/
IE Fiddler,同时也是一个多用途封包监听器,见http://www.fiddlertool.com/fiddler/
IE HTTPWatch,见http://www.httpwatch.com/
Web检查工具,见http://webkit.org/blog/?p=41