html代码优化.doc

HTML代码优化彪骐数码 郭润桂最后修改时间 1/22/2020 2:44 上午目录一.为什么要优化？1二.优化原则2三.优化技巧2四.网页切图21.切图步骤22.切图技巧2五.SEO3六.关于网页标准35)何谓标准？36)使用标准价值在哪？37)团队合作流程48)如何实现4七.实例分析51.删除空标签52.合并标签53.合理安排表格布局64.表格列表优化75.利用简化代码9八.修订记录113.切图步骤114.切图技巧11九.附录12A.参考文档12B.相关资源12一. 为什么要优化？1 节省带宽服务器带宽是有限制的，为了支持更多在线人数，可以租用更多带宽，也可以增加服务器，但如果能通过优化代码减小网页体积，例如减少50%，那原本支持1000人同时在线的带宽现在就可以支持2000人了，这样就节省了昂贵的带宽费用2 利于程序员编写代码静态页面转为动态页面时，经常要分析结构，把重复代码改为循环，因此简洁的代码有利用提高效率3 减少页面下载及解析时间虽然现在大部分都是宽带，带宽非常充足，但一般访客都不只打开一个页面，而是同时访问多个网站，加上聊天、下载等工具占用一定带宽，这样带宽就显得拥挤了，减少页面体积可以缩短下载时间，同时也能减少客户端浏览器的解析时间二. 优化原则1. 不影响原外观2. 不要把整个页面放到一个table里面3. 不要嵌套太多表格，因为表格需要代码全部下载才能显示出来4. 不要用太大、太多Flash动画5. 不要用太多JavaScript特效，用户是来看内容不是看特效6. 尽量把大图切成小图，可以再次利用的图片就无需再另切图了三. 优化技巧1. 使用静态页面可以有效减少服务器资源占用2. 重复使用的样式写到外部CSS文件，一般是整站一个共用CSS文件，各独立栏目共用一个CSS文件，某页面特有的可以写在本页面内3. 需要从数据库读取但又不经常更换的内容，写到单独JS文件，例如各个栏目，内容是从数据库获取的，但又不会频繁更换4. 需要链接外部的Flash、图片等，可以用iframe标签，避免外部网络延迟而拖慢整体页面显示5. 为了方便程序员写循环，可以适当在代码里面加注释四. 网页切图1. 切图步骤1) 从整体布局考虑分块2) 划线分割3) 隐藏不需要的内容4) 输出html文件（如分多层切图，重复第三步骤）5) 用Dreamwaver等网页工具打开，整理表格6) 编写CSS文件2. 切图技巧1) 尽量按规则表格方式切，因为切后一般用需要整合2) 表格需要全部下载才能显示出来，尽量把大表格分成横向并排的表格3) 尽可能新建网页，新建表格把切好的图块手动放进去，因为PS、Fireworks切图生成的网页文件有很多垃圾代码4) 文字尽量用文本格式写在网页源码，方便修改五. SEOSEO全称是Search Engine Optimization，即针对搜索的优化。网站在推出之后，最大的难点莫过于推广，而通过搜索引擎带来的流量是不可忽视的，如何通过优化代码使搜索引擎最大限度的收录，也就成为重要课题。1. 明确的标题，即标签例如搜索“电脑”，搜索结果有2个页面，一个标题包含“电脑”，另一个只包含在正文标签中，第一个页面会排第一位。根据观察，各搜索引擎都会对标题进行截断，具体为baidu20字、google30字、Yahoo20字、MSN Search25字（均为中文）所以标题不能过长，要跟正文内容符合，例如一个碟中碟电影页面，标题可以为“碟中碟 汤姆克鲁斯 酷娱乐 91Q.com”2. META标记3. 链接文本文章、新闻经常标题过长，为了页面美观而不得不截短，加入title属性，一来有利于访客阅读完整标题，也有利于搜索引擎的收录浅谈Flash ActionScr4. 图像同上，相应属性为alt5. 另外其它如都可以加入关键字SEO还包括其它方面的内容，以上只是在代码方面的优化，六. 关于网页标准5) 何谓标准？网页标准是进2年流行的话题，简单的说，就是抛弃HTML+Table改用XHTML+CSS来写网页，做到结构和样式分离。XHTML标准分过渡型和严格型，其中过渡型可以使用table，而严格型只能用div来进行布局。6) 使用标准价值在哪？1. 易于维护HTML代码发展到现在，已经变得十分臃肿，这对网页设计师来说是非常不利的，特别在重构大型网站的时候，经常显得力不从心2. 加速开发通过结构与表现层分离，可以优化团队工作流程，提高工作效率3. 拓展访问渠不需做大改动即可在PDA等掌上设备浏览4. 节约带宽成本一般运用网页标准进行网站重构之后，代码可以减少一半以上，每页面如果能减少几十K，乘以访问量，一个月下来，就可以节约昂贵的带宽费用了5. 提高用户体验干净简介的代码，总比臃肿复杂代码显示得快，用户不必再忍受缓慢的访问速度7) 团队合作流程设计师做最后修改讨论整站结构设计师完成界面设计程序员完成数据库设计程序员完成代码编写老流程讨论整站结构程序员完成代码编写设计师CSS表现层修饰设计师完成结构布局程序员完成数据库设计将CSS和代码整合新流程8) 如何实现1. XHTML标签和属性全部要小写，比如2. 标签注意要关闭，常见的比如等，还有，别把alt属性忘记了3. 不用标签，可以用标签加CSS定义4. XHTML不具备HTML标签所有属性和值，例如居中align=absmiddle，在XHTML里面是没有absmiddle值的，只有top/bottom/right/left/center，某些属性例如onload也被废除了5. 要放在之间，共有的写出单独文件再在网页导入6. 尽量用div布局而不用table，但table还是可以用的七. 实例分析1. 删除空标签 剧情看点： 是可以去掉的Aa 2. 合并标签div太多，不仅影响浏览器解析，还可能因为未关闭标签造成错乱，也给编辑带来困难，例如用DW打开，如下图表格和div密密麻麻的N多线 的作用是左对其，其实在表格设置水平左对其也一样，修改后为3. 合理安排表格布局上图红色表示表格，绿色表示div层，可以看出里面嵌套了4层表格，同时也用了div来使文字靠左，其实标签也有水平位置的align属性，而且表格默认就是左对齐，所以div标签完全可以删除，整理一下，结果如下图4. 表格列表优化如上图，红色表示表格，绿色是DIV，可以看出套了很多表格，整理一下所要的效果，无非是外面圆角边框加里面数据，其中数据又分上下两部分，上面是图片加文字，而下面是文字。下图是优化后，可以看出只有2个表格嵌套，结构很简洁。优化过程：1. 将【本类排行】表格，放到外面表格中，作为一行而不是单独表格2. 排行第一的电影，原先用了几个表格嵌套，现改用div将图片浮动左边，文字会自动插入到右边空白处3. 下面的210排行不再用表格分割，改用标签，再用css进行修饰代码片段：CSS部分#testcolor:#000000;list-style:none;line-height:200%;margin:5px 0 0 10px;#test liborder-bottom:1px dotted #FFFFFF;排行列表2.新精武门3.赌圣2之街头赌圣4.流氓状元5.韩2005爆笑性喜.6.我的野蛮本色7.捣蛋三人组-整蛊王8.笑林小子2之乌龙院9.妓女竞选总统记10.一见钟性优化后代码字数为原来32%5. 利用简化代码如上图，五部影片所在的表格，先是用分割，再用定义样式（主要是定义字体大小），其中影片截图，为了显示圆边框，又套了一个表格，表格采用九宫格布置。单个电影代码如下： 北纬17度线 分析：圆角外框切成8块，九宫格布局好处是不受中间图像大小限制，但这里的图像大小都是固定的，而且采用灰阶图像，因此可以使用背景方式，而无须切图，这样可以大大减少代码，也方便程序员写循环。简化之后代码如下：.moviemargin:5px 11px;font-size:14px;color:#000000;text-align:center;float:left;.movie imgpadding:6px;background-image:url(test.gif);background-repeat:no-repeat;margin-bottom:4px;width:92px;border:none;height:124px;相关影片相关影片相关影片相关影片相关影片图像的大小边框都在css里面定义，这样以后改图像就无需更改程序代码了，只要改css文件就可以了，相对使用table还有一个好处，就是无需判断换行，通常在做多行排列时候，需要判断是否满位换行，而改用div之后，只管循环就行了，一行满了就会自动换行，很方便。效果跟原来一样，如下图所示。八. 修订记录l 2006年7月3日 星期三创建文档，整理实例分析1、0、3 实例l 2006年7月4日 星期四实例分析增加4实例，撰写优化原则、优化技巧等章节九. 2006年7月7日 星期五撰写网页切图3. 切图步骤7) 从整体布局考虑分块8) 划线分割9) 隐藏不需要的内容10) 输出html文件（如分多层切图，重复第三步骤）11) 用Dreamwaver等网页工具打开，整理表格12) 编写CSS文件4. 切图技巧9) 尽量按规则表格方式切，因为切后一般用需要整合10) 表格需要全部下载才能显示出来，尽量把大表格分成横向并排的表格11) 尽可能新建网页，新建表格把切好的图块手动放进去，因为PS、Fireworks切图生成的网页文件有很多垃圾代码12) 文字尽量用文本格式写在网页源码，方便修改l