(html代码优化.docVIP

HTML代码优化 彪骐数码 郭润桂 最后修改时间 7/12/2006 6:17 PM 目录 一. 为什么要优化？ 1 二. 优化原则 2 三. 优化技巧 2 四. 网页切图 2 1. 切图步骤 2 2. 切图技巧 2 五. SEO 3 六. 关于网页标准 3 5) 何谓标准？ 3 6) 使用标准价值在哪？ 3 7) 团队合作流程 4 8) 如何实现 4 七. 实例分析 5 1. 删除空标签 5 2. 合并标签 5 3. 合理安排表格布局 6 4. 表格列表优化 7 5. 利用div简化代码 9 八. 修订记录 11 3. 切图步骤 11 4. 切图技巧 11 九. 附录 12 A. 参考文档 12 B. 相关资源 12 为什么要优化？ 节省带宽服务器带宽是有限制的，为了支持更多在线人数，可以租用更多带宽，也可以增加服务器，但如果能通过优化代码减小网页体积，例如减少50%，那原本支持1000人同时在线的带宽现在就可以支持2000人了，这样就节省了昂贵的带宽费用 利于程序员编写代码静态页面转为动态页面时，经常要分析结构，把重复代码改为循环，因此简洁的代码有利用提高效率 减少页面下载及解析时间虽然现在大部分都是宽带，带宽非常充足，但一般访客都不只打开一个页面，而是同时访问多个网站，加上聊天、下载等工具占用一定带宽，这样带宽就显得拥挤了，减少页面体积可以缩短下载时间，同时也能减少客户端浏览器的解析时间 优化原则 不影响原外观 不要把整个页面放到一个table里面 不要嵌套太多表格，因为表格需要代码全部下载才能显示出来 不要用太大、太多Flash动画 不要用太多JavaScript特效，用户是来看内容不是看特效 尽量把大图切成小图，可以再次利用的图片就无需再另切图了 优化技巧 使用静态页面可以有效减少服务器资源占用 重复使用的样式写到外部CSS文件，一般是整站一个共用CSS文件，各独立栏目共用一个CSS文件，某页面特有的可以写在本页面内 需要从数据库读取但又不经常更换的内容，写到单独JS文件，例如各个栏目，内容是从数据库获取的，但又不会频繁更换 需要链接外部的Flash、图片等，可以用iframe标签，避免外部网络延迟而拖慢整体页面显示 为了方便程序员写循环，可以适当在代码里面加注释 网页切图 切图步骤 从整体布局考虑分块 划线分割 隐藏不需要的内容 输出html文件（如分多层切图，重复第三步骤） 用Dreamwaver等网页工具打开，整理表格 编写CSS文件 切图技巧 尽量按规则表格方式切，因为切后一般用需要整合 表格需要全部下载才能显示出来，尽量把大表格分成横向并排的表格 尽可能新建网页，新建表格把切好的图块手动放进去，因为PS、Fireworks切图生成的网页文件有很多垃圾代码 文字尽量用文本格式写在网页源码，方便修改 SEO SEO全称是Search Engine Optimization，即针对搜索的优化。网站在推出之后，最大的难点莫过于推广，而通过搜索引擎带来的流量是不可忽视的，如何通过优化代码使搜索引擎最大限度的收录，也就成为重要课题。 明确的标题，即title标签例如搜索“电脑”，搜索结果有2个页面，一个标题包含“电脑”，另一个只包含在正文body标签中，第一个页面会排第一位。根据观察，各搜索引擎都会对标题进行截断，具体为baidu20字、google30字、Yahoo20字、MSN Search25字（均为中文）所以标题不能过长，要跟正文内容符合，例如一个《碟中碟》电影页面，标题可以为“碟中碟 汤姆克鲁斯 酷娱乐 91Q.com” META标记meta name=description content=网页简述meta name=keywords content=关键字 链接文本文章、新闻经常标题过长，为了页面美观而不得不截短，加入title属性，一来有利于访客阅读完整标题，也有利于搜索引擎的收录a href=”test.htm” title=” 浅谈Flash ActionScript代码优化”浅谈Flash ActionScr…/a 图像同上，相应属性为alt 另外其它如h1input都可以加入关键字 SEO还包括其它方面的内容，以上只是在代码方面的优化， 关于网页标准 何谓标准？ 网页标准是进2年流行的话题，简单的说，就是抛弃HTML+Table改用XHTML+CSS来写网页，做到结构和样式分离。XHTML标准分过渡型和严格型，其中过渡型可以使用table，而严格型只能用div来进行布局。 使用标准价值在哪？ 易于维护HTML代码发展到现在，已经变得十分臃肿，这对网页设计师来说是非常不利的，特别在重构大型网站的时候，经常显得力不从心 加速开发通过结构与表现层分离，可以优化团队