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

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:43 AM

HTML 布局标签错乱

不说简单的页面.
起码页面上几k行.
全部布局几乎全部使用了最复杂的:浮动,绝对定位,相对定位,div....;多列,多行,错行
错误情况比较复杂,多处错乱;

那么你会怎么解决?步骤怎么样,用到什么工具?
解决最乱的是什么情况,速度如何?
你觉得这种情况你最想说点什么?

回复讨论(解决方案)

面试题？

重写最简单直接

这个怎么没有人关注呢?
在某个php群中讨论时,曾经有人跟我说,此类问题,最长10分钟,否则此人应该下岗;
可是我不相信,问过他是否清楚解决步骤.

我曾经试过dw,ie,ch,firefox,phpstorm;
phpstorm在这块的处理还是不错的,能明了的了解到多余的标签,且可以折叠.
但是同样,有些人为认为是错误,它还是不会提示.
firefox的查看源代码中也能与红色高亮的显示无效的标签,但是像

无

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

此类问题极易出现,尤其是多人多岗位合作一个页面的情况下,再加上部分不了解标签代码的人;再加上布局是浮动性的,此问题尤其突出,且解决难度会很大.
但是对于布局简单的页面,此类错误影响非常小,可以从qq.com这类首页即可看出存在很错误标签,但并不影响浏览器排版,浏览器会尽最大的兼容性来解析不规范标签..

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

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

我首先会用一些格式化工具将HTML文档进行格式化，
为的是以最佳的缩进效果显示。

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

还有就是把页面的DOCTYPE设置为xhtml严格模式，
这样如果有错误的话，验证工具会尽可能多地给出错误提示。

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

回5楼:如果是解析后的对于此问题并没有太大帮助;
回6楼:折叠+全局纵观是一个非常耗时的,且经我测试,firefox中并没有提示某个div是多余的,但是dw中却会提示是多余的.但是从查看源代码来看,这并不会出现js补全的可能,另强制模式(我是这样加,nbsp;html
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

<html><body><p>kdkkdkdkk<p><div>kkkkk</p></body></html>

使用tidy处理后

C:\Users\Administrator\Desktop>tidy s.htmline 1 column 1 - Warning: missing <!DOCTYPE> declarationline 8 column 1 - Warning: inserting implicit <p>line 6 column 1 - Warning: missing </div>line 2 column 1 - Warning: inserting missing 'title' elementline 5 column 1 - Warning: trimming empty <p>line 8 column 1 - Warning: trimming empty <p>Info: Document content looks like HTML56 warnings, 0 errors were found!<!DOCTYPE html><html><head><meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39"><title></title></head><body><p>kdkkdkdkk</p><div>kkkkk</div></body></html>About 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修正

看来没有省事的方法了?

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract