HTML-редакторы, которые помогают найти незакрытые теги - PullRequest
21 голосов
/ 17 июля 2010

Я редактировал много HTML-страниц с помощью основного текстового редактора, блокнота. Когда я пошел, чтобы проверить их, служба проверки сказала, что есть тег div, который не закрыт. Я нахожу автоматические отчеты об ошибках, такие как эти, не слишком надежными, то есть они дают вам номер строки и ошибку, но часто ошибка фактически находится в другой части файла целиком.

Мне просто интересно, есть ли какие-нибудь бесплатные легковесные редакторы html, которые имеют функцию поиска закрывающего тега для тега. Например, вы нажимаете на тег, затем нажимаете на ярлык, и программа переходит на закрывающий тег, я знаю, что эта функциональность находится на домашнем сайте, но у меня нет домашнего сайта, и в любом случае это немного громоздкая программа.

Или, что еще лучше, какие-либо онлайн-службы проверки HTML, которые могут выделять незакрытые теги?

Подводя итог, я хотел бы знать, как найти HTML-теги, которые не имеют закрывающих тегов - есть ли бесплатный редактор HTML или простой онлайн-сервис, который может помочь с этим?

Ответы [ 8 ]

42 голосов
/ 17 июля 2010

Если вы сохраните свой HTML как page.xhtml (вместо page.html), браузер (Firefox / Chrome или Opera) должен найти для вас незамкнутые теги без необходимости валидатора. Просто не забудьте переименовать их .html перед их обслуживанием в Интернете - IE пока не поддерживает .xhtml файлы.

Редактировать (3 года спустя): Этот пост все еще получает комментарии / отзывы, поэтому небольшая поправка. IE9 и IE10 теперь поддерживают файлы xhtml.

9 голосов
/ 19 июня 2013

Использовать исходный код Firefox - неправильный код будет другого цвета

7 голосов
/ 17 июля 2010

Блокнот ++ - с ним никогда не было проблем, а также с ним не было никаких открытых html-тегов.

Вы можете просто щелкнуть любой элемент и посмотреть, есть ли у него закрывающий тег.Также вы можете сделать это: нажмите «TextFX» (слева от плагинов в навигации) -> нажмите «Text FX HTML Tidy» -> нажмите, скажем, хм «TiDy clean Document - wrap».Это должно исправить ваш HTML-документ, или закрыть все незакрытые элементы.

4 голосов
/ 17 июля 2010

http://validator.w3.org/

Имеет больше, чем просто незакрытые теги. Должен использоваться всеми разработчиками интерфейса, IMO.

1 голос
/ 19 сентября 2015

CSE HTML Validator Lite - это бесплатный легкий редактор (для Windows), который проверит ваш HTML (просто нажмите F6) и найдет отсутствующие конечные теги и другие проблемы.Вы также можете нажать Ctrl + M на начальном или конечном теге, и он приведет вас к соответствующему начальному или конечному тегу.

Простой онлайн-сервис, который также сделает это (и более), - OnlineWebCheck.com .Есть и другие онлайн-сервисы, но, на мой взгляд, тот, который я только что упомянул, является самым простым в использовании и понимании.

Полное раскрытие: я разработчик CSE HTML Validator Lite и http://www.OnlineWebCheck.com/на основе CSE HTML Validator.

1 голос
/ 15 сентября 2014

Я использую два онлайн-инструмента, которые работают очень хорошо. jona.ca и tormus.com

0 голосов
/ 19 мая 2018

Если ваш код очень запутанный, без предварительной проверки или с отступом, v.Nu (как видно на https://validator.w3.org/nu/) будет часто путаться (например, если есть закрывающий тег extre, ему может не удастся выбрать один из них)что на самом деле неправильно).

Одним из решений является свертывание кода: сворачивая весь код, помеченный как дочерний элемент определенного узла, вы часто можете легко обнаружить некоторую неверную иерархию.

AnПример редактора, который поддерживает свертывание кода: Kate editor : см. стрелки слева на их скриншоте. Kate screenshot

0 голосов
/ 18 ноября 2016

бесплатные легкие html-редакторы ... онлайн-сервисы проверки html, которые могут выделить незакрытые теги?

Используйте Линтер-Вну .

linter-vnu - это пакет для редактора Atom, который использует Nu Html Checker (v.Nu) для проверки документов HTML или XHTML.

Раскрытие информации: Я разработчик Линтер-Вну.

linter-vnu использует другой пакет Atom, linter, для интеграции v.Nu и 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>

(с намеренно отсутствующим закрывающим тегом </div>)

тогда Atom (точнее, linter-vnu, благодаря linter и v.Nu) отображает следующие сообщения об ошибках:

  • Незакрытый элемент «div». в строке 8 col 1 в test.html
  • Конечный тег для «body» замечен, но были незакрытые элементы. в строке 10 col 1 в test.html

и помечает эти строки в редакторе красными точками.

Если щелкнуть «at ...» (текст с гиперссылкой) в сообщении об ошибке, точка вставки редактора переместится на соответствующую строку, а под строкой появится всплывающее окно с текстом ошибки («Unclosed element» div). ».").

Если вы сохраните ваш HTML-документ с расширением .xhtml и откроете его в Atom, то v.Nu проверяет ваш документ как XHTML (XML), а не HTML, с немного отличающимися сообщениями. В этом случае просто одно сообщение об ошибке:

  • обязательный символ (найден «b») (ожидаемый «d») в строке 10 col 3

где строка 10 содержит закрывающий тег </body>. v.Nu ожидал тег </div> вместо этого; он был доволен </ - ожидал закрывающий тег - но ожидал, что имя элемента начнется с «d» для «div», а не «b» для «body».

По состоянию на ноябрь 2016 года я предъявляю следующие претензии:

  • v.Nu - лучший вариант для проверки (X) HTML (5) .
  • linter-vnu - лучший вариант для интерактивного использования v.Nu в редакторе. Сам Линтер-Вну тривиален; это всего лишь несколько строк «клеевого» кода. Что делает его лучшим вариантом - это редактор Atom и пакет Atom linter.

Я приветствую встречные претензии и вопросы по поводу этих претензий. Я был бы счастлив оказаться неправым и показать что-то лучшее. Особенно, если, как v.Nu и linter-vnu, это бесплатно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...