HTML网页优化压缩的实现步骤

想要对自己的html网页实现优化压缩的话需要检查5个方面,分别是,将table改为div布局,缩减精简div、span、ul li等系列标签,删除多余空格,表格类型布局时候适当使用table替代div布局,html网页gzip压缩,将table改为div布局 。下面给大家详细的介绍一下

尽量将table标签布局html重构div布局,可以节约至少40%的代码量。由于div代码少于table布局的html网页,所以搜索引擎索引权重也优于table布局的html网页。

缩减精简div、span、ul li等系列标签  

布局DIV+CSS网页时候,我们有时候可以节约一些DIV布局代码,减少代码量。

如下案例代码:

立即学习“前端免费学习笔记(深入)”;

  
      
  • DIV
  •   
  • DIV
  •   
  • DIV
  •   
可以改为:
      
  • DIV
  •   
  • DIVC/li>   
  • DIV

这样可以节约一对div标签,从而减少html代码量,起到压缩html作用。这样直接对ul命名css样式类,可以区别在一个页面不同地方使用ul li列表标签。

三、删除多余空格   –   TOP

删除多余空格换行,可以有效地压缩html代码占用字节,一般在开发完成后可以对html中代码进行删除换行和空格内容。

可以借助于DW软件进行批量删除html内标签之间空格

如:

 

  

 

 

可以删除空格与换行后:

 

这样即可节约空格和换行所占字节。

注意的是,网页发布版的可以借助于DW进行删除多余空格与空行。如果要再编辑,再到DW软件进行代码格式化排版即可。

四、表格类型布局时候适当使用table替代div布局   –   TOP

如果是本身是表格数据列表排版,我们最好选择table,因为表格布局使用table优于div布局,使用table布局却比div布局节约html标签代码和节约css样式。

如下图表格数据类型,建议采用TABLE标签+CSS样式布局

html网页代码压缩table标签布局表格

类似这种列表型table表格,推荐使用table标签布局

五、网页GZIP压缩   –   TOP

自己的服务器推荐设置网页Gzip压缩功能。

1.开GZIP有什么好处?

答:Gzip开启以后会将输出到用户浏览器的数据进行压缩的处理,这样就会减小通过网络传输的数据量,提高浏览的速度。

2.如何启用IIS的Gzip压缩功能:

答:首先,如果你需要压缩静态文件(HTML),需要在硬盘上建一个目录,并给它“IUSR_机器名”这个用户的写权限。如果压缩动态文件(PHP,asp,aspx)就不需要了,因为它的页面是每次都动态生成的,压缩完就放弃。然后在IIS管理器中,“网站”上面右键-属性,不是下面的某个站点,而是整个网站。进入“服务”标签,选上启用动态内容压缩,静态内容压缩。然后选中网站下面那个服务器扩展,新建一个服务器扩展。名字无所谓,下面的添加文件的路径是: c:\windows\system32\inetsrv\gzip.dll,然后启用这个扩展。这时候静态内容是可以压缩的,但是对于动态内容,aspx文件却不在压缩范围内。因为默认的可压缩文件并没有这个扩展名。而管理界面中你又找不到可以增加扩展名的地方,这时候只能去修改它的配置文件了。在c:\windows\system32\inetsrv\下面有个MetaBase.xml文件,可以用记事本打开,找到IIsCompressionScheme,有三个相同名字的段,分别是deflate,gzip,Parameters,第三段不用管它,前两段有基本相同的参数,在这两段的参数HcScriptFileExtensions下面都加上一行aspx,如果你有其它的动态程序要压缩,也加在这里。HcDynamicCompressionLevel改成9,(0-10,9是性价比最高的一个)。然后需要重启一下IIS服务,就可以体会到压缩后的速度了。

相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章!

相关阅读:

html与xhtml的区别详解

如何用CSS做图片旋转效果

怎么优化HTML网页

以上就是HTML网页优化压缩的实现步骤的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545314.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:52:25
下一篇 2025年12月21日 16:52:40

相关推荐

  • HTML的网页错位原因以及解决方法

    我们常常会遇到需要设置同一行的布局,但是却因为种种原因错了位,我总结了一下网页布局错位大概有俩种原因,今天给大家好好分析一下原因以及解决方法。 常常我们会遇到我们要设置在一行显示的布局,却因为种种原因造成了错位,看到结果是在一行的最后一个盒子布局错位掉下去了 造成DIV CSS网页布局错位的原因大概…

    好文分享 2025年12月21日
    000
  • HTML里需要兼容验证的浏览器有哪些

    我们知道,不论做什么前端项目,一定要注意的事项就是兼容性,那么今天就给大家带来一份详细的攻略,我们来看看需要兼容验证的浏览器有哪些。 需要兼容验证的浏览器有哪些?DIV+CSS开发需要安装的浏览器有哪些? div+css需要验证兼容性的浏览器:微软浏览器包括IE6、IE7、IE8即将出来的IE9浏览…

    好文分享 2025年12月21日
    000
  • HTML 框架如何使用

    使用html框架的好处不用自己去写令人头疼的响应式了,html标签使用也比新手程序员使用的要严谨等,会使用了html框架这样对我们的html代码书写量也会减少哦! Previous Page Next Page 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。 框架 立即学习“前端免费学习…

    好文分享 2025年12月21日
    000
  • HTML实现移动端固定悬浮半透明搜索框

    现在互联网已经有成千上百个网站,然而网站少不了的一个功能就是搜索,我们可以看到很多网站的搜索框各有不同,在移动端也是如此。本文我们就和大家分享一种在移动端固定在页面顶部,半透明悬浮,能依稀看见部分轮播图形式的搜索框。 要制作这样的搜索框,技术关键在于: fixed 搜索框定位 opacity 设置透…

    2025年12月21日
    000
  • 什么是js深拷贝和浅拷贝及其实现方式

    今天来给大家说一下js的js深拷贝和浅拷贝,它们有什么区别,有什么作用呢?下面给大家举例说明一下。 var m = { a: 10, b: 20 }var n = m;n.a = 15;// 这时m.a的值是多少 m.a会输出15,因为这是浅拷贝,n和m指向的是同一个堆,对象复制只是复制的对象的引用…

    好文分享 2025年12月21日
    000
  • 浅谈HTML里的布局对于SEO的影响

    因为我之前是seo出身,今天就来给大家好好说说div+css设计开发的xhtml网页对seo优化的影响。对于seo的利与弊。 第一:DIV+CSS页面对于spider爬行效率Div+Css的代码精简是table无法比拟的,即使DIV CSS的html加上对应CSS文件一般都小于table的html文…

    好文分享 2025年12月21日
    000
  • 在HTML里用CSS隐藏div的方法

    我们知道,在制作网页的过程中常常会想隐藏一些内容,比如网站添加第三方统计显示的图标等,如何通过css隐藏,怎么让图片作为背景,但文字又不显示呢?这篇文章来给大家解读一下。 一、普通隐藏网页内容 CSS样式单词:display:none假如我们想隐藏一段统计代码,但又不想显示出统计代码图标,又不影响统…

    好文分享 2025年12月21日
    000
  • HTML如何2d和3d转换

    现在比较流行的vr和裸眼3d想必大家都一定听说过,今天给大家介绍的的是在html里,怎么转换2d和3d效果。 transform:        rotate()  旋转函数 (deg) deg  度数        skew(X,Y) 倾斜函数 (deg) 立即学习“前端免费学习笔记(深入)”; …

    好文分享 2025年12月21日
    000
  • HTML里的最后一行文字显示不全怎么处理

    在我们的网页里,布局中文字内容超出div或显示一半显示不全,那么我们要怎么进行解决呢?今天就给大家点来最后一行文字显示不全的处理方法。 div css布局中DIV盒子里的最后一排文字字体显示一半显示不全如何进行解决?或者最后一排文字内容超出DIV边框,最后一排内容显示与隐藏如何控制和取舍的CSS布局…

    好文分享 2025年12月21日
    000
  • HTML怎么实现数字焦点图轮播代码

    html怎么实现数字焦点图轮播代码?数字焦点图轮播怎么做?数字焦点图轮播需要注意什么?给大家一份实现数字焦点图轮播代码,需要的朋友可以借鉴一下。 数字焦点图轮播代码 @@##@@ @@##@@ @@##@@ 1 2 3 数字焦点图轮播代码就是这么多了,更多精彩请关注创想鸟其它相关文章! 相关阅读: …

    好文分享 2025年12月21日
    000
  • html页面用js中实现查找功能

    今天先说一个这几天做的功能,就是html页面的查找功能。 这个功能主要是实现在html查找框内输入字符,之后按后面的上一个下一个按钮,会自动把查询区域内的匹配字符用特殊的样式标记,之后可以继续按上一个下一个按钮把按照顺序浏览匹配字符,并把当前匹配的字符用另一种样式与其他匹配字符加以区别。付有html…

    2025年12月21日
    000
  • html文字怎么竖排显示

    有些时候我们需要一段文字从上到下竖着显示排班,那么在css里需要怎么操作才能让文字在网页端是竖排显示呢?今天来给大家解答一下这个疑惑 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃。但有2中方法对文字字体实现竖排显示,在接下…

    好文分享 2025年12月21日
    000
  • HTML的语言编码有哪些

    在html里,编码可导致浏览者通过ie时候网页乱码,也可以导致div+css的兼容性hack,编码非常的重要,一般编码的位置放在html网页中的head>和中间。今天我们就介绍一下关于编码的知识。 一般这段网页编码放在html网页中的 和中间。 html编码样式 通过改变charset=utf…

    好文分享 2025年12月21日
    000
  • html的网页结构由哪些部分组成

    我们都知道,开发一个网页的时候一定是要先布局网页的结构和组成部分,那么我们有哪些部分需要注意呢?下面给大家总结归纳一下。 首先,html页面是静态的从头到尾没有程序的执行是纯的html语言,是不经过服务器处理就直接送出给浏览器呈现给浏览者。 而其他后缀的结尾的网页相对来说就是动态网页页面,动态页面是…

    好文分享 2025年12月21日
    000
  • html的绝对路径和相对路径怎么使用

    当我们引用文件的时候,每一个路径都是不同的,今天我们就来讨论一下绝对路径和相对路径的共同以及不同之处,让我们以后能够分清引用路径的利弊。 相对路径:以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对。 绝对路径:以…

    2025年12月21日 好文分享
    000
  • html里的if注释怎么使用

    我们在css布局里常常会用到ie,css,hack,ie的条件注释会起到很大的作用,那么今天我们就说一下怎么使用if条件注释。 以小于符号+叹号+两个减号开始 两个减号大于符号结束构成(字符均为英文小写输入),而注解注释内容放入其中。 一般注释,我们不能使用浏览器看见注解内容,只能通过html源代码…

    好文分享 2025年12月21日
    000
  • html的标签内用css操作style属性

    在html的标签内使用style属性是为了方便我们直接使用css样式。这样我们在改对象的时候可以加入css样式。比较方便 style语法结构 style=”css样式” 常见标签内使用style   一般的html标签都可以加入style属性直接使用css样式。比如 立即学习…

    好文分享 2025年12月21日
    000
  • html里div居中需要注意哪些

    很多人有这样的疑惑。当我们在布局一张网页时,通常网页主体框架是居中于浏览器中的。那么如果想要实现最外层div水平居中那么肯定需要单独设置。设置div居中需要注意哪些事项呢?今天就来给大家介绍一下。 假如最外层DIV盒子的CSS命名为“#divcss5”,这个时候为了兼容各大浏览器实现最外层的这个盒子…

    好文分享 2025年12月21日
    000
  • html里的br,p和DIV有什么区别

    很多人弄不明白,br,p和div都是标签,他们之前有什么区别?我想怎么用都可以吗?并不是这样的,今天就来给大家详细的说一下br,p,div这三种标签有什么区别 div和p是成对组合闭合标签; 是单一的闭合标签。 以 开始, 结束; 以 开始, 立即学习“前端免费学习笔记(深入)”; 结束 小例: 内…

    好文分享 2025年12月21日
    000
  • html里怎么插入图片

    在html里我们常常会插入图片,那么插入图片需要怎么实现?让html显示图片有什么需要什么主意的方面吗?今天我们就来说一下怎样在html插入图片 在html插入图片 让图片显示需要HTML标签来实现,使用img标签即可实现。 html图片标签语法     img介绍: 立即学习“前端免费学习笔记(深…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信