45IT.COM- 电脑学习从此开始!
DIY硬件教程攒机经验装机配置
设计Photoshop网页设计特效
系统注册表DOS系统命令其它
存储主板显卡外设键鼠内存
维修显卡CPU内存打印机
WinXPVistaWin7unix/linux
CPU光驱电源/散热显示器其它
修技主板硬盘键鼠显示器光驱
办公ExcelWordPowerPointWPS
编程数据库CSS脚本PHP
网络局域网QQ服务器
软件网络系统图像安全
页面导航: 首页 > 设计学院 > 网页设计 >

HTML代码优化的基本原则

电脑软硬件应用网 45IT.COM 时间:2006-08-25 08:13 作者:佚名

  在合法有效的HTML代码一文中,我们谈到过所见即所得编辑器造成的HTML冗余臃肿问题:所见即所得编辑器如FrontPage、 Dreamweaver,可以帮助我们简便快速地创作或编辑HTML页面,但在生成“干净的”HTML代码方面则是个弱项,尤其在其对一个网页进行修改的时候,往往会产生很多不必要的冗余代码。当页面的HTML文件在存在大量的冗余代码时,文件便会变得臃肿,这不但会降低网页的打开速度,损害到网页的效率,同时也会严重影响到相当网页的搜索引擎排名。

尽可能使用最精简的HTML代码

  要提高页面的下载速度,降低服务器带宽的压力,需要我们尽可能地缩小页面文件的“体积”,当然,这不能以减少页面中具体内容为代价,也即是说应该在保证页面可视部分不变的前提下,尽可能使用精简的代码,减小页面HTML文件的字节数。

  事实上,在HTML中同一效果的实现可以有多种不同的解决办法。比如说,如果我们需要在页面中显示“粗体”字,至少有两种方式可以实现:<strong> 标签或 <b> 标签,很显然,使用 <strong> 标签要比使用 <b> 标签多了5个字符,而如果考虑到HTML标签必须成对出现的语法,相应的 <strong></strong> 标签要比 <b></b> 多了10个字符。虽然某些HTML组织推荐使用<strong>标签,但事实上,二者毫无区别,无论在页面显示还是SEO方面,那么,为何不用效率更高的方式?

尽可能避免冗余的嵌套标签

  HTML代码一个显著的特征便是其支持代码的嵌套。但由此而来的另一个问题便是,所见即所得编辑器在修改某个格式时并不会将原格式删除,而只是简单地在原代码中置入新的嵌套标签,这样不可避免地使HTML代码变得臃肿。所以,要注意页面HTML文件中冗余的嵌套代码。

  比如说下文的代码:

<font face="宋体">这是</font>
<font face="宋体"><strong>粗体</strong></font>
<font face="宋体">示例</font>

  这在使用所见即所得编辑器创作的网页中是极其常见的,大家可以看出这类代码的拙劣:<font>标签不断地在重复定义。类似上文的例子我们可以更有效地修改为:

<font face="宋体>这是<b>粗体</b>示例</font>

  可以看出相应的代码减少了将近一半左右。

尽量使用CSS

  传统上,当我们在HTML页面中定义相应的格式时需使用如字体(<font>)、段落(<p>) 标签,在这些标签之间是我们的内容部分,如文本、链接、图像等。当使用所见即所得编辑器修改某一格式时,相应的新标签便会被放入页面的HTML文件中,这样,就会产生很多重复的代码。随Web技术的发展,现在我们可以通过定义样式表(CSS: Cascading Style Sheets)来实现,这样可以增强代码的复用,提高效率。

  同时,CSS也可以带来其他好处,如可以作为外部文件引用,这样,会大大降低HTML页面文件的大小;而当我们需要对页面的某些格式调整时,不必一个个去改动每个页面,只需调整CSS文件即可,等等。//本文来自电脑软硬件应用网www.45its.com转载请注明

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: baidushare.htm
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
推荐知识