Loading...

关于html标签闭合的问题

Filed under: 网站技术 — 江东 @ 2010-06-30 16:28:48 才(24)条评论

昨天下午,在推上看到了google.cn不再重定向的讨论,于是我就发了这一推。本来是确实是半开玩笑半认真发布的这推,因为当时我也不知道有部分html标签是可以不用关闭的。 于是谷奥同学也跟着发布了一篇猜测,这下,广大的技术骚男可不买账了,伟大的google怎么可能犯这样低级的错误呢,纷纷在留言中对谷奥做出“武断”的猜测给予“抨击”。

争论是个好东西,它让我发现了google的这这个链接:Reducing the file size of HTML documents,这篇文章大大意就是,减少网页的内容也是优化网站速度的方法之一,html4的标准允许不关闭部分标签,他们是:</area></base><body></body></br></col></colgroup>
</dd></dt><head></head></hr><html></html></img>
</input></li></link></meta></option></p></param>
<tbody></tbody></td></tfoot></th></thead></tr>

所以网页如果想加速,简洁,那么这些标签是可以选择不关闭的,比如<li>第一条 <li>第二条 这样的代码也是合理的,这样一般的网页至少节省了5-20%的传输内容。

看到这里,我就在想,我的huichuan365.com 要不要也这样不关闭这些可以不用关闭的标签呢?这样做是不是会节省传输的时间呢?

不过我奇怪的是,在google自己的这个页面Reducing the file size of HTML documents,并没有放弃关闭这些标签,不解!

</area>
</base>
<body>
</body>
</br>
</col>
</colgroup>
</dd>
</dt>
<head>
</head>
</hr>
<html>
</html>
</img>
</input>
</li>
</link>
</meta>
</option>
</p>
</param>
<tbody>
</tbody>
</td>
</tfoot>
</th>
</thead>
</tr>

提升本blog用户体验

Filed under: Wordpress,网站技术 — 江东 @ 2008-12-04 17:01:04 才(19)条评论

ishawn对通过show和hide来提升用户体验的方式进行了批判之后,本人决定还是要采用这个方式来提升一下用户体验。不过值得一提的是,虽然本次的提升采用的是show和hide,但是和ishawn所批判完全的不是同一个东西。

正如你看到的那样,生活点滴的sidebar中的小版块都是可以通过点击进行折叠的,可能很多和我一样有“洁癖”的网友不喜欢右边花花绿绿的小东西,这个功能正是为了满足这些朋友而诞生的。在以前,cosbeta按照自己的喜好将那些自认为不需要显示的板块进行了折叠,如你确实需要看该板块的内容,点击鼠标即可展开。然而这样的方式最大不足就是每次访问,折叠方式总会重置。所以今天cosbeta就花了点时间,改动了这个sidebar的折叠方式,一旦用户改变了sidebar中的折叠状态,在同一台计算机上下次访问的时候,依然会记住最后一次的折叠状态(其实就是一个cookie记录嘛),所以这样做应该提升了用户体验!

老朋友打开本blog的时候,请用ctrl+F5刷新一下本站,因为css和js可能缓存在你本地了。

本站的老友,这样你就可以永久关闭本站顶端的那个虚拟主机推介的广告链接了!

一个简单的画面切换例子

Filed under: HTML客户端,网站技术 — 江东 @ 2008-07-06 18:06:31 才(6)条评论

有了jQuery,一切都变得那么简单;

web编程难煞人,一只红杏出墙来;

切换不用flash,一只红杏出墙来;

上面的文不对题,不合逻辑,不过,不合逻辑是当今的主旋律,所以在写这个日志之前,我吟诗几首,做了几个俯卧撑,这才正二八经的开始。

下面这个效果大家都见过吧,比如迅雷的影片介绍,但是有很多是用flash来完成的,当然,也可以用html+css来完成
,下面是代码,具体的解释请看代码中的注释: (read on …)

google的圆角代码

Filed under: HTML客户端,网站技术 — 江东 @ 2008-04-28 14:45:43 才(8)条评论

不整点圆角怎么能算是2.0呢,所以我在bloggermap的新版设计中全部采用了圆角。下图是正在孕育中的新版bloggermap界面截图
而那个圆角是采用google的圆形背景来作为转角实现的,具体的思路如下图所示: (read on …)

强制升级到IE7

Filed under: 互联网事 — 江东 @ 2008-01-24 10:17:12 才(4)条评论

朋友说微软打算在今年的二月份强制将所有的IE都升级到IE7,据说主要是为了安全考虑。当然你也可以通过微软官方提供的手段来防止自动强制升级。既然微软打算强制执行升级,估计已经考虑好了xp的兼容问题了,那我不如自己主动动手升级。想到以前用win98或者2k的时候,升级浏览器到IE6总会出现这样那样的问题,所以那个时候总是反复的卸载,反复的升级,相当的麻烦。

升级过程省略……。终于升级完毕,发现IE7确实不错,图标更加的细腻,增加了很多安全的防护功能,譬如我写这篇文章需要插入链接的时候要执行一个js脚本,这个时候浏览器就问会我是否信任目前的站点。当然这样的提示可能会把不熟悉电脑的人给吓唬住,不过总比中毒要来得好吧!

其实微软的这个做法我是相当的赞成的,这样写界面的时候就不需要考虑IE6了,多好啊,省去了很多的麻烦。当然也有人非常反对的,因为强制到IE7可能会给他(也包括我给别人做的一个站点)当前的一些站点带来不兼容的现象!我看了看本blog,一切都很正常,嘿嘿,遵守标准就是好,幸亏没有被微软奴化,否则写出来的css就兼容不了FF,动不动就只能写VBS。

菜单教程1:利用jquery和css编制类似QQ分栏菜单

Filed under: 互联网事 — 江东 @ 2007-11-16 19:21:49 才(4)条评论

前面我在blog中提到了如何用jQuery实现简单的ajax编程,如果你阅读过那篇文章或者你正在使用jQuery,你应该会体验到jQuery是多么强大,早知道有这样的库出来,我当初就不用花时间学习javascript了。所以鉴于此,我打算今后将逐步写一些如何用jQuery配合css制作出特殊菜单的教程,或者一些比较有用的应用,由于是原创,所以可能发布的速度不会很快,其实很多js的教程不需要专门写得多么的详细,我建议大家发现好玩的东西就去查看源代码,然后将脚本下载到本地就行修改和研究,这样就会有比较大的进步。

今天要介绍的这个例子将会在我新版的bloggermap中出现,那就是如何利用jquery和css制作出类似QQ软件分栏的菜单。其实主要的重点还是css,其次才是jQuery的应该首先请大家看看这个iframe中的效果图: (read on …)

CSS兼容性考虑-如何用css固定位置

Filed under: HTML客户端,网站技术 — 江东 @ 2007-10-14 11:48:00 才(6)条评论

有的时候我们需要将一个div固定在一个屏幕的指定位置,如在使用loading状态条的时候,或者显示在线用户数的时候。需要的是将div显示在网页的中间,顶端或者左下端,并且无论滚动条如何拉动,这个div将始终保持在相同的相对位置。这些要求用css是很可以容易实现的,只需要用到position:fixed这个描述参数即可。和position: fixed;平行的描述语言有 position: absolute; position: relative; position: static;这里主要讲一讲fixed和absolute的区别,fixed表示始终处于同屏幕的一个位置,即使你拉动滚动条,依然会显示在屏幕的相对位置,而absolute则不一样,absolute针对网页的位置进行描述,所以拉动滚动条后有可能会将显示在中部的div拉动到顶端去,因此,下面的一段css将会把div放在屏幕的中央:
#LoadingStatus{
position:fixed ;
top:100px;/*始终距离屏幕的高度是100px*/

/*后面的描述和位置无关,所以后面的例子请大家关注本行之前的描述*/
width:220px;height:20px;
left:50%;
margin:0 0 0 -110px;/* 将div将左端推进一半的长度,这样才能显示到真正的中间 */
border:1px solid red;
}
如果你用这段css去做实验的话,我相信多数朋友看不到应有的效果,原因在于你用的是IE,那个对w3标准支持不完善的浏览器,如果你用firefox的话,应该是没有任何问题的。不过我们得承认现实,毕竟IE的浏览器占据了绝大部分市场,所以必须写出兼容IE的css才行。由于IE不支持fixed,因此,可以针对IE和FF写不同的css,如: (read on …)