Эта инструкция предназначена для тех, кто только начинает работать с парсингом веб-страниц. Для настройки программы парсера вам потребуется минимальное понимание HTML — языка разметки, который используется для создания структуры веб-страниц. Мы разберём, как выглядит HTML, что такое теги и атрибуты, и как к ним "привязываться" при поиске элементов (например, по атрибутам вроде itemprop, id, name или class). Особое внимание уделим ссылкам (тег <a>), так как они часто используются в парсерах для извлечения URL.
Что такое HTML и как он выглядит?
HTML (HyperText Markup Language) — это не язык программирования, а система разметки текста, которая определяет структуру страницы. HTML-код состоит из тегов, которые обозначают элементы страницы, такие как заголовки, параграфы, изображения или ссылки.
Теги обычно выглядят так: <тег> содержимое </тег>.
Они бывают открывающими (с угловыми скобками <тег>) и закрывающими (с косой чертой: </тег>).
Пример простого HTML-кода страницы:
<!DOCTYPE html> <html> <head> <title>Пример страницы</title> </head> <body> <h1>Заголовок</h1> <p>Это параграф текста.</p> <a href="https://example.com">Ссылка на сайт</a> </body> </html>
Здесь:
- <html> — корневой тег всей страницы.
- <head> — содержит метаданные (например, заголовок страницы).
- <body> — основное содержимое страницы.
- <h1> — заголовок первого уровня.
- <p> — параграф.
- <a> — ссылка (о ней подробнее ниже).
В парсере вы будете искать конкретные теги, чтобы извлекать данные. Для этого используйте действие «HTML: Поиск тегов», где можно искать по имени тега, атрибутам и т.д.
По этому действию есть подробная видеоинструкция, — посмотрите её, если планируете часто настраивать парсеры.
Что такое атрибуты тегов?
Атрибуты — это дополнительные свойства тегов, которые указываются внутри открывающего тега в формате атрибут="значение". Они помогают уточнить поведение или стиль элемента. Атрибуты важны для парсинга, потому что по ним можно точно "привязаться" к нужному тегу, даже если на странице много похожих элементов.
Примеры атрибутов:
- id: Уникальный идентификатор элемента на странице. Используется для точного поиска одного элемента. Пример:
<div id="main-content">...</div>
Пример получения содержимого этого тега в программе «Парсер сайтов»:
- class: Класс элемента, который может быть общим для нескольких тегов. Пример:
<p class="status status-text">Текст</p>
Несколько классов могут быть перечислены через пробел. Берите ТОЛЬКО ОДНО имя класса:
- name: Имя элемента, часто используется в формах (для input-полей). Пример:
<input name="username">
Используется редко, но значение обычно уникально (к нему можно привязываться при поиске тегов)
- itemprop: Атрибут микроразметки, используется чтобы роботы поняли, где какой контент на странице сайта. Пример:
<span itemprop="name">Имя продукта</span>
К нему также можно привязываться при поиске (например, для взятия цены: itemprop="price").
Другие полезные атрибуты: href (для ссылок), src (для изображений), alt (подпись к картинке).
Парсер позволяет искать один тег внутри другого: сначала ищем div с классом class=product и потом внутри него ищем тег span со значением itemprop="price" (если на странице несколько цен, а нам нужна цена основного продукта)
Особое внимание: Ссылки (тег <a>)
Тег <a> (anchor) используется для создания гиперссылок. Он позволяет переходить на другие страницы сайта. В парсере мы будем извлекать ссылки для получения списка товаров, подкатегорий, и страниц пагинации (страницы результатов: 1 2 3 .. 28).
Как выглядит тег <a>:
<a href="https://example.com" class="link" id="my-link">Текст ссылки</a>
Ключевые атрибуты тега <a>:
- href: Основной атрибут — указывает URL (адрес), на который ведёт ссылка.
В большинстве случаев именно это значение (адрес ссылки) нам и нужно извлекать. - id: Уникальный ID ссылки, для точного поиска. Присутствует очень редко.
- class: Класс для оформления ссылок (например, все ссылки меню с class=menu-item выглядят одинаково).
Обычно ссылки мы ищем, ориентируяь именно на имя класса. - itemprop: Если ссылка — это часть микроразметки: например itemprop="url" для ссылки на продукт.
При поиске в парсере:
- Не ищите все теги a (без указания атрибутов): на странице много разных ссылок, в результаты попадут лишние ссылки.
- Привязывайтесь по атрибутам: например, a class=product для поиска ссылок с определённым классом.
- Извлекайте атрибут href (4-й параметр действия «Поиск тегов» ставим равным href_with_prefix): это даст вам URL (адрес ссылки) для дальнейшего парсинга.
- Использование href_with_prefix вместо href добавляет базовый URL сайта к относительным ссылкам (в HTML коде ссылка имеет вид href="/products/5320", извлекая же href_with_prefix на выходе получим «нормальную» ссылку с адресом сайта вида https://example.com/products/5320)
Как узнать, какой тег искать?
В браузере (например, в Google Chrome) щелкните правой кнопкой мыши → в контекстном меню выберите "Просмотреть код", чтобы увидеть теги и атрибуты для текста, который находится под курсором мыши:
Комментарии
Отправить комментарий