帮助查找未闭合标签的 HTML 编辑器

HTML editors that help find unclosed tags

提问by user280109

I've been editing a lot of HTML pages with basic text editor, notepad. When I went to validate them the validation service is saying theres a divtag that is not closed. I tend to find automatic error reports such as these dont tend to be too reliable, i.e they will give you a line number and the error but often times the error is actually in another part of the file entirely.

我一直在用基本的文本编辑器记事本编辑很多 HTML 页面。当我去验证它们时，验证服务说有一个div未关闭的标签。我倾向于发现诸如此类的自动错误报告不太可靠，即它们会给您一个行号和错误，但通常错误实际上完全在文件的另一部分。

I'm just wondering if there are any free lightweight html editors that have the functionality of finding the closing tag for a tag. For example, you click on a tag then click a shortcut, and the program will jump to the closing tag, I know this functionality is in homesite, but i dont have homesite, and its a bit of a bulky program anyway.

我只是想知道是否有任何免费的轻量级 html 编辑器具有查找标签的结束标签的功能。例如，您单击一个标签，然后单击一个快捷方式，程序将跳转到结束标签，我知道此功能在 homesite 中，但我没有 homesite，无论如何它都是一个庞大的程序。

Or even better any online html validation services that can highlight unclosed tags?

或者甚至更好的任何可以突出显示未关闭标签的在线 html 验证服务？

To sum up, I would like to know how to find html tags that don't have closing tags - is there a free html editor or simple online service that can help with this?

总而言之，我想知道如何找到没有结束标签的 html 标签 - 有没有免费的 html 编辑器或简单的在线服务可以帮助解决这个问题？

回答by lucideer

If you save your HTML as page.xhtml(instead of page.html), the browser (Firefox/Chrome or Opera) should find the un-closed tags for you without the need for a validator. Just remember to rename them .htmlbefore serving them online - IE doesn't support .xhtmlfiles yet.

如果您将 HTML 保存为page.xhtml（而不是page.html），浏览器（Firefox/Chrome 或 Opera）应该会为您找到未关闭的标签，而无需验证器。请记住.html在在线提供它们之前重命名它们- IE 尚不支持.xhtml文件。

Edit (3 years later):This post's still getting comments/upvotes so a slight amendment. IE9 and IE10 do now support xhtml files.

编辑（3 年后）：这篇文章仍然得到评论/投票，所以稍作修改。IE9 和 IE10 现在支持 xhtml 文件。

回答by Thilanka De Silva

Use the firefox view source - wrong code will be in different color

使用 firefox 查看源代码 - 错误代码将显示不同颜色

回答by Gavrisimo

Notepad++- never had any problems with it and also never had any unclosed html tag with it.

Notepad++- 它从来没有任何问题，也从来没有任何未关闭的 html 标签。

You can just click on any element and see if it has a closing tag. Also you can do this: click on "TextFX"(left from plugins in navigation) -> click on "Text FX HTML Tidy" -> click on lets say hmm "TiDy clean Document - wrap". That should fix your html document, aka close all unclosed elements.

您只需单击任何元素即可查看它是否有结束标记。你也可以这样做：点击“TextFX”（导航插件左侧）->点击“Text FX HTML Tidy”->点击让我们说嗯“TiDy clean Document - wrap”。这应该修复您的 html 文档，也就是关闭所有未关闭的元素。

回答by Jason McCreary

http://validator.w3.org/

http://validator.w3.org/

Does more than just unclosed tags. Should be used by all front-end developers, IMO.

不仅仅是未闭合的标签。所有前端开发人员都应该使用，IMO。

回答by BrainBUG

I am using two online-tool, which work very fine. jona.caand tormus.com

我正在使用两个在线工具，它们工作得很好。 jona.ca和tormus.com

回答by Albert Wiersch

CSE HTML Validator Liteis a free lightweight editor (for Windows) that will check your HTML (just press F6) and find missing end tags and other problems. You can also press Ctrl+M on a start tag or end tag and it will take you to the matching start or end tag.

CSE HTML Validator Lite是一个免费的轻量级编辑器（适用于 Windows），它将检查您的 HTML（只需按 F6）并查找缺少的结束标记和其他问题。您还可以在开始标签或结束标签上按 Ctrl+M，它将带您到匹配的开始或结束标签。

A simple online service that will also do this (and more) is OnlineWebCheck.com. There are other online services but in my opinion the one I just mentioned is the simplest one to use and understand.

一个简单的在线服务也可以做到这一点（以及更多）是OnlineWebCheck.com。还有其他在线服务，但在我看来，我刚刚提到的服务是最容易使用和理解的服务。

Full disclosure: I am the developer of CSE HTML Validator Lite and http://www.OnlineWebCheck.com/which is based on CSE HTML Validator.

完全披露：我是 CSE HTML Validator Lite 和基于 CSE HTML Validator 的http://www.OnlineWebCheck.com/的开发者。

回答by Nemo

If your code is very messy, not prettified nor indented, v.Nu (as seen at https://validator.w3.org/nu/) will often get confused (for instance if there's an extre closing tag, it may not manage to select the one which is really wrong).

如果您的代码非常凌乱，既没有美化也没有缩进，v.Nu（见https://validator.w3.org/nu/）经常会感到困惑（例如，如果有一个额外的结束标签，它可能无法管理选择一个真正错误的）。

One solution is code folding: by collapsing all the code which is marked as a child of a certain node, you can often easily spot some incorrect hierarchy.

一种解决方案是代码折叠：通过折叠所有标记为某个节点的子节点的代码，您通常可以很容易地发现一些不正确的层次结构。

An example of editor which supports code folding is Kate editor: see the arrows on the left in their screenshot.

支持代码折叠的编辑器示例是Kate 编辑器：请参阅屏幕截图左侧的箭头。

回答by Graham Hannington

free lightweight html editors ... online html validation services that can highlight unclosed tags?

免费的轻量级 html 编辑器 ... 可以突出显示未关闭标签的在线 html 验证服务？

Use linter-vnu.

使用linter-vnu。

linter-vnu is a package for the Atom editor that uses the Nu Html Checker (v.Nu) to validate HTML or XHTML documents.

linter-vnu 是 Atom 编辑器的一个包，它使用 Nu Html Checker (v.Nu) 来验证 HTML 或 XHTML 文档。

Disclosure:I am the developer of linter-vnu.

披露：我是 linter-vnu 的开发者。

linter-vnu uses another Atom package, linter, to integrate v.Nu and Atom.

linter-vnu 使用另一个 Atom 包 linter 来集成 v.Nu 和 Atom。

For example, if you open the following test.htmlfile in Atom:

例如，如果您test.html在 Atom 中打开以下文件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8"/>
<title>Test HTML document</title>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>

(with a deliberately missing closing </div>tag)

（故意缺少结束</div>标签）

then Atom (or rather, linter-vnu, thanks to linter and v.Nu) displays the following error messages:

然后 Atom（或者更确切地说，linter-vnu，感谢 linter 和 v.Nu）显示以下错误消息：

• Unclosed element “div”. at line 8 col 1 in test.html
• End tag for “body” seen, but there were unclosed elements. at line 10 col 1 in test.html

• 未封闭的元素“div”。在 test.html 的第 8 列第 1 行
• 看到了“body”的结束标签，但有未关闭的元素。在 test.html 的第 10 列第 1 行

and marks those lines in the editor with red dots.

并在编辑器中用红点标记这些行。

If you click the "at..." (hyperlinked text) in the error message, the editor insertion point moves to the corresponding line, and a popup appears under the line, with the error text ('Unclosed element "div".').

如果单击错误消息中的“at...”（超链接文本），编辑器插入点将移动到相应的行，并且该行下方会出现一个弹出窗口，其中包含错误文本（'未关闭的元素“div”。'）。 ）。

If you save your HTML document with the file extension .xhtml, and open it in Atom, then v.Nu validates your document as XHTML (XML) rather than HTML, with slightly different messages. In this case, just one error message:

如果您使用文件扩展名保存 HTML 文档.xhtml，并在 Atom 中打开它，则 v.Nu 将您的文档验证为 XHTML (XML) 而不是 HTML，消息略有不同。在这种情况下，只有一条错误消息：

• required character (found “b”) (expected “d”) at line 10 col 3

• 第 10 行第 3 行所需的字符（找到“b”）（应为“d”）

where line 10 contains the closing </body>tag. v.Nu was expecting a </div>tag instead; it was happy with </- it was expecting a closing tag - but it was expecting the element name to begin with "d" for "div", not "b" for "body".

其中第 10 行包含结束</body>标记。v.Nu 期待一个</div>标签；它很高兴</——它期待一个结束标签——但它期待元素名称以“d”开头，代表“div”，而不是“b”开头，代表“body”。

I make the following claims, as of November 2016:

截至 2016 年 11 月，我提出以下声明：

• v.Nu is the best option for validating (X)HTML(5).
• linter-vnu is the best option for interactively harnessing v.Nu in an editor. linter-vnu itself is trivial; it's just a few lines of "glue" code. What makes it the best option is the Atom editor and the Atom linter package.

• v.Nu 是验证 (X)HTML(5) 的最佳选择。
• linter-vnu 是在编辑器中以交互方式利用 v.Nu 的最佳选择。linter-vnu 本身是微不足道的；它只是几行“胶水”代码。使它成为最佳选择的是 Atom 编辑器和 Atom linter 包。

I welcome counterclaims and questions about these claims. I'd be happy to be proven wrong and be shown something better. Especially if, like v.Nu and linter-vnu, it's free.

我欢迎反诉和关于这些主张的问题。我很乐意被证明是错误的，并会看到更好的东西。特别是如果像 v.Nu 和 linter-vnu 一样，它是免费的。