html屏幕不同非常乱,来说说比较一个那位的方法是最高效的:当页面因html标签错误(少/多/错匹配)而错乱时_html/css_WEB-ITnose...

来说说比较一个那位的方法是最高效的:当页面因html标签错误(少/多/错匹配)而错乱时_html/css_WEB-ITnose 5268f80b9b1e01f982625ef6fac83ca1.png

HTML 布局 标签 错乱 不说简单的页面.

起码页面上几k行.

全部布局几乎全部使用了最复杂的:浮动,绝对定位,相对定位,div....;多列,多行,错行

错误情况比较复杂,多处错乱;

那么你会怎么解决?步骤怎么样,用到什么工具?

解决最乱的是什么情况,速度如何?

你觉得这种情况你最想说点什么?

回复讨论(解决方案)

面试题?

重写最简单直接

这个怎么没有人关注呢?

在某个php群中讨论时,曾经有人跟我说,此类问题,最长10分钟,否则此人应该下岗;

可是我不相信,问过他是否清楚解决步骤.

我曾经试过dw,ie,ch,firefox,phpstorm;

phpstorm在这块的处理还是不错的,能明了的了解到多余的标签,且可以折叠.

但是同样,有些人为认为是错误,它还是不会提示.

firefox的查看源代码中也能与红色高亮的显示无效的标签,但是像

无之类问题一样认为正常.

目前我还没有发现有快速的解决方案.问过一个前台同事,他的处理是折叠查看丢失的标签.+扣工资;

此类问题极易出现,尤其是多人多岗位合作一个页面的情况下,再加上部分不了解标签代码的人;再加上布局是浮动性的,此问题尤其突出,且解决难度会很大.

但是对于布局简单的页面,此类错误影响非常小,可以从qq.com这类首页即可看出存在很错误标签,但并不影响浏览器排版,浏览器会尽最大的兼容性来解析不规范标签..

如果有工具能快速提示错误问题,这类问题解决效率会高很多.

我记得firefox有个插件专门校验标签的匹配,比查看源代码略为高级。

我首先会用一些格式化工具将HTML文档进行格式化,

为的是以最佳的缩进效果显示。

如果有错误,工具有时候会提示,

但有时候有错误却不会提示,这时候可以看看缩进是否整齐来查找错误。

还有就是把页面的DOCTYPE设置为xhtml严格模式,

这样如果有错误的话,验证工具会尽可能多地给出错误提示。

最后,如果工具仍不能找出错误,只有自己逐行并纵观全局排除。

回5楼:如果是解析后的对于此问题并没有太大帮助;

回6楼:折叠+全局纵观是一个非常耗时的,且经我测试,firefox中并没有提示某个div是多余的,但是dw中却会提示是多余的.但是从查看源代码来看,这并不会出现js补全的可能,另强制模式(我是这样加,br /> PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">)好像并没有起到太多作用;

如我们的网站首页非常大.1600行,

如果按照dw中的提示,那块出现问题,查找就有点郁闷了.目前我并没有实际的去折叠查找这个dw中的提示,是不是真实的存在,没有但是firefox中却没有提示.所以,我目前不能确定dw是正确的firefox是错误的.

前台也不是我在负责,

出现这样的问题,比较麻烦.

那位还有更加好的方式?

最常用的工具就是tidy

kdkkdkdkk

kkkkk

使用tidy处理后

C:\Users\Administrator\Desktop>tidy s.htmline 1 column 1 - Warning: missing declarationline 8 column 1 - Warning: inserting implicit

line 6 column 1 - Warning: missingline 2 column 1 - Warning: inserting missing 'title' elementline 5 column 1 - Warning: trimming empty

line 8 column 1 - Warning: trimming empty

Info: Document content looks like HTML56 warnings, 0 errors were found!

kdkkdkdkk

kkkkkAbout this fork of Tidy: http://w3c.github.com/tidy-html5/Bug reports and comments: https://github.com/w3c/tidy-html5/issues/Or send questions and comments to html-tidy@w3.orgLatest HTML specification: http://dev.w3.org/html5/spec-author-view/HTML language reference: http://dev.w3.org/html5/markup/Validate your HTML5 documents: http://validator.w3.org/nu/Lobby your company to join the W3C: http://www.w3.org/ConsortiumC:\Users\Administrator\Desktop>

所以这个东西,自动化处理并不能解决这个问题.

补充说:这个工具更多的用处是对于优化方面,而非处理这个问题.否则如果只是简单的删除了,可能出现的问题更加严重.

拙见,感觉没必要99%的遵守规定,规定是死的,只要界面效果到达了,代码也相对简洁了,不就行了,

你理解错了,我问的是标签出错了,乱时,怎么尽快修正.

对于大的页面,重写不现象,功能得重新弄.

修正是比较好的方式,但是我现在能想到的修改步骤并不高效.

征一高效解决此问题方法而已.

跟html是否漂亮无关.

tidy有多种用法的,也有很多工具借用了它

你只想到用它来修正这个并不是最好的用法

对于你给出的例子,tidy修正处理的结果并没有错的,但不是你所期望的,这就是个问题??电脑只会按某种固定的方式去思考问题,但人不是

所以你应该使用具有tidy插件的编辑工具,去 提醒你不合规范的地方,由你按自己的思想去修正(要实现自己的期望就自写程序),而不是图省事直接交给tidy修正

看来没有省事的方法了?

1428d0e076c3959ab11d28a39bc84fab.png

5268f80b9b1e01f982625ef6fac83ca1.png

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源:php中文网

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值