Как найти не закрытый тег - Исправление недочетов и поиск решений вместе с Examum.ru

A unclosed div problem almost make me crazy. It is very difficult to track especially when the page is long and complex.

<div>
   <span>
       <b>Text</b>
       <a href="/">Title <span>another test</span>
   </span>
</div>

How can I find unclosed HTML-tags on a website?

Any suggestions?

asked Jun 7, 2011 at 22:25

As stated already, running your code through the W3C Validator is great but if your page is complex, you still may not know exactly where to find the open div.

I like using tabs to indent my code. It keeps it visually organized so that these issues are easier to find, children, siblings, parents, etc… they’ll appear more obvious.

EDIT: Also, I’ll use a few HTML comments to mark closing tags in the complex areas. I keep these to a minimum for neatness.

<body>

    <div>
        Main Content

        <div>
            Div #1 content

            <div>
               Child of div #1

               <div>
                   Child of child of div #1
               </div><!--// close of child of child of div #1 //-->
            </div><!--// close of child of div #1 //-->
        </div><!--// close of div #1 //-->

        <div>
            Div #2 content
        </div>

        <div>
            Div #3 content
        </div>

    </div><!--// close of Main Content div //-->

</body>

answered Jun 7, 2011 at 22:32

SparkySparky

97.9k25 gold badges199 silver badges284 bronze badges

answered Jun 7, 2011 at 22:27

rockerestrockerest

10.4k3 gold badges37 silver badges67 bronze badges

I know that there have already been some good answers, but I came across this question with a Google Search and I wish someone would have pointed out this online checking tool…

http://www.tormus.com/tools/div_checker

You just throw in a URL and it will show you the entire map of the page. Very useful for a quick debug like I needed.

answered Jul 17, 2013 at 17:19

1- Count the number of <div in notepad++ (Ctrl + F)
2- Count the number of </div

Compare the two numbers!

Bo Persson

90.3k31 gold badges145 silver badges203 bronze badges

answered Feb 20, 2013 at 19:39

MiladMilad

1451 silver badge1 bronze badge

If you use Dreamweaver you could easily note to unclosed div. In the left pane of the code view you can see there <> highlight invalid code button, click this button and you will notice the unclosed div highlighted and then close your unclosed div. Press F5 to refresh the page to see that any other unclosed div are there.

You can also validate your page in Dreamweaver too. File>Check Page>Browser Compatibility, then task-pane will appear Click on Validation, on the left side there you’ll see ► button click this to validate.

Enjoy!

answered Apr 11, 2013 at 10:38

Taking Milad’s suggestion a bit further, you can break your document source down and then do another find, continuing until you find the unmatched culprit.

When you are working with many modules (using a CMS), or don’t have access to the W3C tool (because you are working locally), this approach is really helpful.

CRABOLO

8,56739 gold badges41 silver badges68 bronze badges

answered Mar 13, 2013 at 2:20

RogerRogerRogerRoger

3863 silver badges9 bronze badges

Div tags are easy to spot for me. Just download the file, scan it or so with netbeans, then continue debugging it. Or you can use the Google chrome developer kit, and view the page source. I’m a bit of a weird developer, I don’t always use the «best» stuff. But it works for me.

I’ll link you with some developer stuff I use

http://www.coffeecup.com/free-editor/

http://www.netbeans.org

Those are just a few of the good ones out there. I’m open to more suggestions to this list

Happy programming

-skycoder

answered Feb 24, 2015 at 5:26

Источник

Ситуация: есть страница товара. На ней, при косметических правках кода/установке плагинов, полезла верстка — все блоки под блоком товара переместились вправо. Потенциально — проблема в незакрытом блоке кода.

Вопрос: как найти незакрытый блок верстке или исправить ее в общем? Спасибо.

Источник

Тема: как определить незакрытые элементы в коде (Прочитано 3939 раз)

0 Пользователей и 1 Гость просматривают эту тему.

fg0987

Как можно определить незакрытый элемент в исходном коде (ctrl+U)? Валидатор пишет, что перед </body> есть незакрытый тег (скорее всего это один <div>), но вот как его найти, кода очень много и вручную смотреть у меня не получается?

kiff

Проги разные есть — Dreamweaver, HTMLPad2010, WeBuilder

Igoritaly

У меня тоже самое, не ставится новая тема для smf из официального репозитория, в исх коде красный </body> перед </html>.

Обнаружен конечный тег «body», но имеются незакрытые элементы.

Если чекнуть проверку XHTML — _http://validator.w3.org/check?uri=referer получаем следующее:

Validation Output: 1 Error
Error
   Line 1392, Column 7: end tag for «div» omitted, but OMITTAG NO was specified
</body></html>
You may have neglected to close an element, or perhaps you meant to «self-close» an element, that is, ending it with «/>» instead of «>».
Info
   Line 78, Column 2: start tag was here
   <div id=»main_b»>

Получается у меня не закрыт блок main_b? ::)

CoBa7

Я так делаю. Блокнот Notepad ++, нажимаем для поиска «Ctrl + F», в поле «Найти» вставить <div и нажать кнопку «Искать далее». Находим первый див. Теперь закрываем окно поиска и нажимаем кнопку F3, так мы будем переходить от одного дива к следующему. Тот, который не подсветится фиолетовым цветом — и есть искомый незакрытый тег.

Источник

9 ответов

Как уже говорилось, запуск вашего кода с помощью W3C Validator велик, но если ваша страница сложная, вы все равно можете не знать, где найти открытый div.

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

EDIT: Кроме того, я буду использовать несколько комментариев HTML, чтобы отметить теги закрытия в сложных областях. Я держу их как минимум для аккуратности.

<body>

    <div>
        Main Content

        <div>
            Div #1 content

            <div>
               Child of div #1

               <div>
                   Child of child of div #1
               </div><!--// close of child of child of div #1 //-->
            </div><!--// close of child of div #1 //-->
        </div><!--// close of div #1 //-->

        <div>
            Div #2 content
        </div>

        <div>
            Div #3 content
        </div>

    </div><!--// close of Main Content div //-->

</body>

Sparky
07 июнь 2011, в 22:37

Я сделал онлайн-инструмент под названием Unclosed Tag Finder, который будет делать то, что вам нужно.

Вставьте свой HTML-код, и он даст вам выход, например: «Закрывающий тег в строке 188 не соответствует открытому тегу в строке 62».

Jonathan Aquino
17 май 2013, в 18:31

rockerest
07 июнь 2011, в 23:31

Я знаю, что уже были хорошие ответы, но я столкнулся с этим вопросом с помощью Google Search, и я бы хотел, чтобы кто-то указал на это онлайн-инструмент проверки…

http://www.tormus.com/tools/div_checker

Вы просто вводите URL-адрес, и он покажет вам всю карту страницы. Очень полезно для быстрой отладки, как мне было нужно.

Noah Whitmore
17 июль 2013, в 19:12

Использовать блокнот ++. вы можете легко найти их

http://notepad-plus-plus.org/download/

Или вы можете Просмотреть источник с FIREfox — Unclosed divs будет отображаться в RED

Thilanka De Silva
19 июнь 2013, в 05:32

1- Подсчитайте количество <div в блокноте ++ (Ctrl + F)
2- Подсчитайте количество </div

Сравните два числа!

Milad
20 фев. 2013, в 20:28

Если вы используете Dreamweaver, вы можете легко заметить незакрытый div. На левой панели окна кода вы можете увидеть кнопку <> highlight invalid code, нажмите эту кнопку, и вы заметите, что незакрытый div выделен, а затем закройте незакрытый div. Нажмите F5, чтобы обновить страницу, чтобы увидеть, что там есть любой другой незакрытый div.

Вы также можете проверить свою страницу в Dreamweaver. File>Check Page>Browser Compatibility, появится панель задач Нажмите на Validation, на левой стороне вы увидите кнопку ►, чтобы щелкнуть это, чтобы подтвердить.

Наслаждайтесь!

Bhojendra Nepal
11 апр. 2013, в 12:20

Взяв предложение Milad немного дальше, вы можете сломать источник документа вниз, а затем сделать еще одну находку, продолжая, пока не найдете непревзойденного преступника.

Когда вы работаете со многими модулями (используя CMS) или не имеете доступа к инструменту W3C (потому что вы работаете локально), этот подход действительно полезен.

RogerRoger
13 март 2013, в 02:23

Знаки Div легко заметить для меня. Просто скачайте файл, сканируйте его или нет с помощью netbeans, а затем продолжите его отладку. Или вы можете использовать набор разработчика Google Chrome и просмотреть источник страницы. Я немного странный разработчик, я не всегда использую «лучшие» вещи. Но это работает для меня.

Я свяжу вас с некоторыми материалами разработчика, которые я использую

http://www.coffeecup.com/free-editor/

http://www.netbeans.org

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

Счастливое программирование

-skycoder

TheCodingKlam
24 фев. 2015, в 06:32

Ещё вопросы

0Кеширование с JSP и HTML5: как отключить кеширование на стороне сервера
1Алгоритм самой длинной палиндромной последовательности, анализ времени
0Об обработке исключений в C ++
0Codeigniter: правильный способ доступа к функции в пользовательской библиотеке
1Чтение сжатого файла NumPy во время «с open () как f»
1URL открытое соединение для адреса ssl выдает исключение утверждения
1Как я могу получить доступ к объекту, связанному с LiveData, вне наблюдателя?
0PHP альбом: move_uploaded_file не работает
0PHP Array_combine неопределенный индекс
0AngularJS / Javascript — Как я могу заменить весь объект на JSON
0peewee используя ‘t1’ в качестве таблицы, а не мой стол
1Можно ли проанализировать с JSONObject и RealmObject с той же моделью?
1В облачных функциях Firebase отказано в доступе
0Div точная высота как высота окна
1ПИТОН Как сделать «ассоциативный массив»
1Как сделать номера телефонов кликабельными в текстовом представлении в Android
0Показать ссылку в jquery datagrid
1Несколько объектов, которые будут объявлены во время выполнения для модифицированной модели
0Когда использовать & в C ++ при объявлении переменных?
0проблемы с поиском в базе данных, чтобы соответствовать вводу пользователя
0Перевод с C / C ++ на C #
1Как смоделировать RestTemplate метод getForObject, используя jmockit?
1Как я могу создать консольное приложение, которое utlilitize async / await
1Wikitude Передача значения из Java в JavaScript для использования в AR.RelativeLocation
1Скомпилируйте javacode из запущенной java-сборки — в системе, в которой не установлен JDK
0Я хочу получать вложения в электронное письмо от формы
1некоторые настройки в VS Code
0Как добавить идентификатор для элемента в JQuery
0C ++ Массив указателей и буферизация
0rails: запрос has_many для получения списка объектов
0Как потушить изображения и текст (здесь текст связан с конкретным изображением) за один раз, используя плагин цикла jQuery?
0Angular не обновляет цикл из-за реализации $ mdDialog (Material Design)
0Удалить файл из папки и MySQL присоединился к таблице
0codeigniter извлекает таблицу mysql с where_in + сохраняет порядок массива ключей в массиве результатов
0я использую ng-grid, который загружает данные из файла json, я хочу сделать кнопки редактирования и удаления, чтобы редактировать и удалять мои данные, используя угловой js?
1Python-запросы GET со строками из списка
1Свободный оптимистичный замок NHibernate и ленивая нагрузка
1ItemRegister Iterator
0Попытка удалить вложенный объект в мангусте
0Статические методы создания в Boost Python
0Выбор элемента из многомерного массива
1Проблема Xamarin Forms CustomPicker
1Страница входа с использованием Mvvmcross
1Как называется этот шаблон? (многоразовый вес)
0Добавление файла в crontab через скрипт php
0Изменить фоновое изображение с помощью JQuery успешно, но как сделать одно изображение по умолчанию
0почему это JQuery не добавляет правильные значения в моей БД
1C # добавить схему в URI
1Libgdx stage2d с другой камерой для HUD, как обрабатывать координаты?
0PHP preg_replace неожиданно ведет себя с ‘$’ в теме

Источник

Вопрос

Проблема незакрытого div почти сводит меня с ума. Это очень трудно отследить, особенно когда страница длинная и сложная.

Какие есть предложения?

Решение / Ответ

7-го июня 2011 в 10:32

2011-06-07T22:32:43+00:00

#12686987

Как уже говорилось, прогон кода через W3C Validator — это здорово, но если ваша страница сложная, вы все равно можете не знать, где именно искать открытый div.

Мне нравится использовать вкладки для отступов в коде. Это визуально упорядочивает его, так что эти моменты легче найти, дети, братья, сестры, родители и т.д… они будут выглядеть более очевидными.

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

Ответ на вопрос

17-го июля 2013 в 5:19

2013-07-17T17:19:15+00:00

#12686993

Я знаю, что есть уже некоторые хорошие ответы, но я наткнулся на этот вопрос в поиск Google, и я бы отметил Это онлайн <див> инструмент проверки…

http://www.tormus.com/tools/div_checker

Вы просто бросить в URL-адрес и он покажет вам всю <див> карта страница. Очень полезно для быстрой отладки, как мне нужно.

Ответ на вопрос

19-го июня 2013 в 4:13

2013-06-19T04:13:17+00:00

#12686992

Использовать Notepad ++ . вы можете легко найти их

http://notepad-plus-plus.org/download/

Или вы можете вид источника из Firefox — незакрытых дивов будет показан в красный

Ответ на вопрос

20-го февраля 2013 в 7:39

2013-02-20T19:39:49+00:00

#12686988

1- Подсчитайте количество <div в Notepad++ (Ctrl + F)
2- Подсчитайте количество </div.

Сравните два числа!

Ответ на вопрос

11-го апреля 2013 в 10:38

2013-04-11T10:38:20+00:00

#12686990

Если вы используете Dreamweaver можно легко заметить незакрытых дел. В левой панели просмотра кода Вы можете видеть, что есть в <> кнопка `выделите неверный код, нажмите эту кнопку и вы увидите незакрытый див, затем закрыть незакрытый див. Нажмите клавишу F5, чтобы обновить страницу, чтобы увидеть, что любой другой незакрытый див есть.

Вы также можете проверить страницу в Dreamweaver. Файл>проверить страница>совместимость браузера, затем панель задач-панели появится нажмите на кнопкуПроверка`, на левой стороне есть вы’увидите кнопку ► нажмите эту кнопку, чтобы проверить.

Наслаждайтесь!

Ответ на вопрос

13-го марта 2013 в 2:20

2013-03-13T02:20:42+00:00

#12686989

Принимая Милад’ы предложение немного далее, вы можете разбить исходный документ вниз и попробовать еще раз найти, продолжая, пока вы не найдете себе равных виновника.

Когда вы работаете с большим количеством модулей (с использованием CMS), или Дон’т иметь доступ в W3C инструмент (потому что вы работаете на месте), этот подход является очень полезным.

Ответ на вопрос

24-го февраля 2015 в 5:26

2015-02-24T05:26:15+00:00

#12686994

Теги div легко для меня место. Просто загрузите файл, отсканировать его или так с NetBeans, затем продолжить отладку его. Или вы можете использовать Google для разработчиков Chrome комплект, и просмотрите исходный код страницы. Я’m немного странный разработчик, я не’т всегда использовать в «лучших» и прочее. Но это работает для меня.

Я’МР связать вас с разработчиком материала я использую

http://www.coffeecup.com/free-editor/

http://www.netbeans.org

Таковы лишь некоторые из лучших там. Я’м более предложений в этот список :Д

Счастливого программирования

-skycoder

Источник