Какой элемент определяет контент для браузеров, не поддерживающих фреймы
Обновлено: 24.11.2024
Мы привыкли к тому, что большая часть работы, связанной с HTML, выполняется кодировщиками, программистами и разработчиками программного обеспечения. Но это никоим образом не означает, что SEO-специалисты и специалисты по цифровому маркетингу не должны хорошо разбираться в основных HTML-тегах. Суть в том, что теги необходимо знать, если вы хотите правильно разработать технические спецификации и понять, как теги влияют на поисковую оптимизацию.
Итак, какие теги и атрибуты важны для поисковой оптимизации? Зачем они вообще нужны и как их использовать? Мы просмотрели все существующие HTML-теги и составили список самых важных, чтобы помочь вам изучить основы HTML или просто освежить память.
Разбираем основы HTML
Язык гипертекстовой разметки (HTML) – это стандартный язык разметки документов, который используется веб-страницами, чтобы сообщать браузерам, какие элементы он содержит и какие из них необходимо отображать на экране.
HTML лежит в основе подавляющего большинства веб-страниц и является одним из важнейших элементов технического SEO. С помощью HTML-элементов SEO-специалисты могут передавать информацию о веб-страницах как людям, так и роботам поисковых систем. Это может прояснить для всех структуру страницы и порядок содержимого, а также прояснить, как страница связана с другими веб-страницами в Интернете.
С точки зрения непрофессионала, если вы посетите любую веб-страницу как человек, вы увидите размеченный текст вместе с разделами, подзаголовками, изображениями и ссылками. Но имейте в виду, что для веб-браузеров и роботов поисковых систем веб-страницы представляют собой не более чем HTML-код с определенными элементами.
Мы уже упоминали такие термины, как элемент HTML и тег, но существуют также метатеги и атрибуты. Это может очень быстро запутать, если вы не знаете разницы.
Итак, давайте взглянем на основные термины, которые мы будем использовать в этом посте.
Структура элемента HTML
Код HTML состоит из элементов, каждый из которых может быть либо тегом, либо метатегом. Если у тега или метатега есть какие-либо дополнительные характеристики, то это атрибут.
Элемент HTML — это тип компонента HTML-документа, который состоит из дерева простых узлов HTML, таких как текстовые узлы. Такие элементы позволяют HTML-документу включать определенную семантику и форматирование. Вот из чего состоит элемент HTML:
В данном случае HTML-элемент – это заголовок, указанный в коде с помощью
закрывающий тег. Поскольку заголовок имеет атрибут align="left", он выравнивается по левому краю страницы.
Далее тег. Это базовая сущность HTML, которая отмечает начало и конец каждого элемента. Думайте о HTML-тегах как о ключевых словах, которые определяют, как веб-браузеры форматируют и отображают содержимое страницы.
Кроме того, текст, помещенный между тегами, отображается в соответствии со свойствами тега. Таким образом, вы можете, например, использовать тег, чтобы подчеркнуть часть текста на веб-странице. Теги могут быть как парными, так как они начинаются и заканчиваются (например, …), так и одиночными (например,
или ).
Теперь метатег – это тип тега, который предоставляет веб-браузерам и поисковым системам техническую информацию о веб-странице, например описание, ключевые слова, кодировку документа, правила индексирования ботов и т. д. Обратите внимание, что все метатеги должны быть помещены внутри тега документа. Интересен тот факт, что хотя описание и ключевые слова являются метатегами, заголовок является тегом.
Наконец, атрибут — это дополнительная информация о теге или метатеге. Они представляют собой специальные слова, которые используются внутри начального тега для управления поведением элемента.
Например, ранее в этом посте мы упоминали тег, добавляющий изображения на веб-страницы. Что ж, его атрибут alt отображает альтернативный заголовок изображения, если само изображение не может быть отображено по какой-либо причине.
Чем теги отличаются от атрибутов
Поскольку многие люди используют термины "тег" и "атрибут" практически как синонимы, давайте уделим немного времени разъяснению терминологии.
Вот пример формата элемента HTML, который разбивает элемент на три части:
В этом примере «
Элемент HTML в приведенном выше примере – это заголовок, который используется в качестве видимого заголовка на веб-странице для представления содержания об оптимизации для поисковых систем. Теперь давайте проведем различие.
Теги должны иметь начальный и закрывающий элементы для правильной работы, а атрибуты — нет, и они добавляются к элементам HTML в качестве модификаторов, например:
Обратите внимание, что есть и пустые элементы, такие как
, которые не имеют содержимого или закрывающих тегов.
Зачем пользователям и поисковым системам нужны теги
Теперь, когда у нас есть четкое представление о тегах и атрибутах, давайте обсудим, зачем они нужны поисковым системам, браузерам и пользователям. Во-первых, Google использует метатеги, чтобы получить информацию о содержании страницы и, в конечном итоге, включить ее в результаты поиска.
На самом деле сниппет является прямым тому подтверждением, поскольку состоит из тега заголовка и метатега описания. Однако, если заголовок и описание страницы настроены неправильно (например, вводят в заблуждение, перегружены ключевыми словами и т. д.), Google автоматически заменит их более подходящим текстом из содержания страницы.
В Справочном центре Google Search Console есть список всех метатегов, поддерживаемых поисковым гигантом. Так что, если вы хотите углубиться в каждый HTML-тег, обязательно ознакомьтесь с ним.
Теги помогают браузерам читать информацию о странице. Таким образом, тексты, изображения и ссылки могут отображаться именно так, как они указаны в HTML-коде. Вы можете себе представить, если бы пользователям приходилось визуально выуживать содержимое сайта из всего этого HTML-кода?
Теперь, когда мы рассмотрели все основы HTML, давайте перейдем к главному: тегам и атрибутам, полезным для поисковой оптимизации.
3 основных тега HTML
Если вы хотите создать веб-страницу, полезную для людей и, что более важно в контексте этой статьи, для поисковых систем, необходимо включить три ключевых HTML-тега.
Тег указывает, что страница является веб-страницей
Тег – это самый первый тег, который вы добавляете в код своей веб-страницы. Что он делает, так это представляет страницу поисковым системам как веб-страницу.
Обратите внимание, что, хотя тег сам по себе не является HTML-тегом (поэтому у него нет атрибутов), он предоставляет браузерам жизненно важную информацию, позволяющую им узнать, какой тип документа ожидать на странице. и как это должно отображаться.
Вот пример используемого кода:
При правильном использовании браузер поймет, что веб-страница создана на основе HTML. В конечном итоге у него не возникнет проблем с обработкой кода и отображением страницы, как задумано.
Тег содержит метаданные страницы
Тег представляет самый первый раздел веб-страницы и содержит информацию о странице, которая не отображается браузерами. Я хочу отметить, что важно знать, что тег содержит некоторые из наиболее важных SEO-тегов.
Элемент служит контейнером для метаданных, например данных о HTML-документе, который не отображается на странице, и размещается между тегом и тегом. Как правило, метаданные определяют заголовок документа, его набор символов, стили, скрипты и т. д.
DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.
В сводке новостей о платформе на этой неделе Chrome представляет новый атрибут для загрузки, спецификации доступности для веб-разработчиков, а BBC переносит визуализации в Shadow DOM.
Chrome добавляет атрибут загрузки
Атрибут загрузки HTML для отложенной загрузки изображений и фреймов теперь поддерживается в Chrome. Вы можете добавить loading="lazy", чтобы отложить загрузку изображений и фреймов, которые находятся ниже окна просмотра, пока пользователь не прокрутит их до них.
Google предлагает рассматривать эту функцию как прогрессивное усовершенствование или использовать ее поверх существующего решения отложенной загрузки на основе JavaScript.
Эта функция еще не добавлена в стандарт HTML (но есть открытый запрос на вытягивание), а на странице статуса Chrome указано несколько ссылок на документацию Google. (через web.dev)
Обзор спецификаций ARIA
Основные характеристики специальных возможностей для веб-разработчиков:
| Имя | Описание |
|---|---|
| ARIA в HTML | < td>Определяет, какие атрибуты ролей, состояний и свойств ARIA разрешены для тех или иных элементов HTML (здесь определяется неявная семантика ARIA)|
| Использование ARIA | Содержит практические советы по использованию ARIA в HTML, уделяя особое внимание динамическому содержимому и расширенным элементам управления пользовательского интерфейса (здесь определяются «пять правил использования ARIA») |
| ARIA ( Доступные многофункциональные интернет-приложения) | Определяет роли, состояния и свойства ARIA |
| Практики разработки ARIA | Общие рекомендации о том, как для использования ARIA для создания специальных приложений (включая шаблоны реализации ARIA для общих виджетов) |
| Сопоставления API доступности HTML | Определяет, как браузеры сопоставляют HTML-элементы и атрибуты с API доступности операционной системы |
| WCAG (Руководство по обеспечению доступности веб-контента) | Содержит рекомендации по улучшению веб-контента Доступность (критерии соответствия WCAG определены здесь) |
См. также: Саймон Питерс и Валери Янг, авторы Саймона Питерса и Валери Янг, «Содействие в разработке Руководства по авторскому праву ARIA».
Би-би-си перешла с Shadow DOM для встроенных интерактивных визуализаций на своем веб-сайте. Это привело к значительному повышению производительности загрузки ("более чем на 25 % быстрее").
Доступные полифиллы Shadow DOM не смогли надежно предотвратить утечку стилей через границу Shadow DOM, поэтому вместо этого они решили вернуться к браузерам, которые не поддерживают Shadow DOM.
Shadow DOM […] может доставлять контент аналогично iframe с точки зрения инкапсуляции, но без отрицательных накладных расходов […] Мы хотим инкапсулировать элемент, содержимое которого будет отображаться как часть страницы. Shadow DOM дает нам это без необходимости в пользовательском элементе.
Одним из основных недостатков этого нового подхода является то, что медиазапросы CSS больше нельзя использовать для условного применения стилей на основе ширины содержимого (поскольку содержимое больше не загружается в отдельный встроенный документ).
При использовании iframe медиа-запросы давали бы нам ширину нашего контента; с Shadow DOM медиа-запросы дают нам ширину самого устройства. Это огромный вызов для нас. Теперь у нас нет возможности узнать, насколько велик наш контент, когда он обслуживается.
Поле «Текст» в разделе «Информация о содержимом» позволяет вводить текст в формате HTML, который отображается в браузере. Вы должны добавить базовый HTML-код к тексту в поле ТЕКСТ.
HTML: при вводе HTML не добавляйте эти теги: , , , или .
Жирный текст: текст здесь
Текст курсивом: текст здесь
Подчеркнутый текст: текст здесь
Текст ссылки: текст ссылки здесь
Текст абзаца:текст здесь
Разрыв текста:
- поместите это после последнего слова, которое вы хотите вернуть,
Добавить изображение:
Поле "Текст" в разделе "Информация о содержании" позволяет ввести HTML, который отображается в браузере.
HTML: при вводе HTML не добавляйте эти теги; , , или .
На панели управления:
1) Щелкните ссылку Программа, Материалы курса, Задания или Книги в разделе Области содержимого.
2) Нажмите кнопку «Добавить элемент».
3) Выберите Имя (название контента) в раскрывающемся списке или выберите Другое: и введите название в пустое поле.
4) Введите текст в поле Текст.Хотите сделать контент видимым? - Нажмите «Да», чтобы ваши ученики могли просматривать содержимое; нажмите «Нет», если вы не хотите, чтобы ваши учащиеся просматривали этот контент.
Хотите добавить автономный контент? - Эту функцию следует выбирать (Да), только если вы создаете ссылку на файл на компакт-диске, который находится на персональных компьютерах учащихся.
Хотите отслеживать количество просмотров? - Нажмите «Да», чтобы увидеть, как часто к этому контенту обращались.
Хотите добавить метаданные? - Нажмите «Да», чтобы Blackboard могла сохранять точные показатели.
Выберите дату (даты) доступности. Нажмите «Да» и выберите «Отображать после/до даты/времени», чтобы ваш контент можно было просматривать только в эти даты/время. Если вы ничего не выберете здесь, содержимое будет постоянно отображаться.5) Прокрутите страницу вниз и нажмите кнопку "Отправить".
Дополнительная информация
>В: Зачем мне вводить HTML в текстовое поле?
О: Вводя HTML в поле Текст, вы получаете больший контроль над форматом содержимого (жирный шрифт, курсив, таблицы, цвета, шрифты и т. д.).В: Нужно ли мне знать HTML для добавления HTML в текстовое поле?
О: Нет, вы можете использовать Dreamweaver для создания содержимого, а затем скопировать/вставить HTML-код в текстовое поле.
Копировать/вставить текст или HTML
Поле "Текст" в разделе "Информация о содержании" позволяет ввести HTML, который отображается в браузере.
HTML: если вы копируете/вставляете HTML в это поле, помните, что копировать/вставлять нужно только между тегами body и не включать их (только для этого
Это всеобъемлющее руководство по внутренним операциям WebKit и Gecko является результатом обширных исследований, проведенных израильским разработчиком Тали Гарсиэль. За несколько лет она просмотрела все опубликованные данные о внутреннем устройстве браузера (см. Ресурсы) и потратила много времени на чтение исходного кода веб-браузера. Она написала:
В годы доминирования IE на 90 % ничего особенного не оставалось, кроме как рассматривать браузер как «черный ящик», но теперь, когда на браузеры с открытым исходным кодом приходится более половины доли использования, это хорошо время заглянуть под капот двигателя и посмотреть, что находится внутри веб-браузера. А внутри миллионы строк C++.
Тали опубликовала свое исследование на своем сайте, но мы знали, что оно заслуживает более широкой аудитории, поэтому мы подчистили его и повторно опубликовали здесь.
Как веб-разработчик, изучение внутренних операций браузера поможет вам принимать более обоснованные решения и понимать обоснования передовых методов разработки. Хотя это довольно объемный документ, мы рекомендуем вам потратить некоторое время на его изучение; мы гарантируем, что вы будете рады, что вы сделали. Пол Айриш, специалист по связям с разработчиками Chrome
Эта статья была переведена на несколько языков: HTML5 Rocks поддерживает немецкую, испанскую, японскую, португальскую, русскую и упрощенную китайскую версии. Вы также можете просматривать переводы на корейский и турецкий языки, размещенные на внешних серверах.
Введение
Содержание
Браузеры, о которых мы поговорим
Сегодня на настольных компьютерах используется пять основных браузеров: Chrome, Internet Explorer, Firefox, Safari и Opera. На мобильных устройствах основными браузерами являются Android Browser, iPhone, Opera Mini и Opera Mobile, UC Browser, браузеры Nokia S40/S60 и Chrome — все они, за исключением браузеров Opera, основаны на WebKit. Я приведу примеры из браузеров с открытым исходным кодом Firefox и Chrome, а также Safari (частично с открытым исходным кодом). Согласно статистике StatCounter (по состоянию на июнь 2013 г.), на Chrome, Firefox и Safari приходится около 71% использования настольных браузеров в мире. На мобильных устройствах Android Browser, iPhone и Chrome составляют около 54 % использования.
Основные функции браузера
Основная функция браузера — представить выбранный вами веб-ресурс, запросив его с сервера и отобразив в окне браузера. Ресурс обычно представляет собой HTML-документ, но также может быть PDF-файлом, изображением или другим типом контента. Расположение ресурса указывается пользователем с помощью URI (унифицированного идентификатора ресурса).
То, как браузер интерпретирует и отображает HTML-файлы, указано в спецификациях HTML и CSS. Эти спецификации поддерживаются организацией W3C (Консорциум World Wide Web), которая является организацией по стандартизации для Интернета. В течение многих лет браузеры соответствовали только части спецификаций и разрабатывали собственные расширения. Это вызвало серьезные проблемы совместимости для веб-авторов. Сегодня большинство браузеров более или менее соответствуют спецификациям.
- Адресная строка для вставки URI
- Кнопки «Назад» и «Вперед».
- Параметры закладок
- Кнопки «Обновить» и «Стоп» для обновления или остановки загрузки текущих документов.
- Кнопка "Главная", которая открывает главную страницу.
Как ни странно, пользовательский интерфейс браузера не указан ни в какой официальной спецификации, он просто основан на передовом опыте, сформированном многолетним опытом, и браузерами, имитирующими друг друга. Спецификация HTML5 не определяет элементы пользовательского интерфейса, которые должен иметь браузер, но перечисляет некоторые общие элементы. Среди них адресная строка, строка состояния и панель инструментов. Конечно, есть функции, уникальные для конкретного браузера, такие как менеджер загрузок Firefox.
Структура верхнего уровня браузера
Основные компоненты браузера (1.1):
Важно отметить, что такие браузеры, как Chrome, запускают несколько экземпляров механизма рендеринга: по одному для каждой вкладки. Каждая вкладка выполняется в отдельном процессе.
Механизм рендеринга
Ответственность механизма рендеринга хорошо. Рендеринг, то есть отображение запрошенного содержимого на экране браузера.
По умолчанию механизм рендеринга может отображать документы и изображения HTML и XML. Он может отображать другие типы данных через плагины или расширения; например, отображение PDF-документов с помощью подключаемого модуля для просмотра PDF-файлов. Однако в этой главе мы сосредоточимся на основном варианте использования: отображении HTML и изображений, отформатированных с помощью CSS.
Двигатели рендеринга
Разные браузеры используют разные механизмы визуализации: Internet Explorer использует Trident, Firefox использует Gecko, Safari использует WebKit. Chrome и Opera (начиная с версии 15) используют Blink, ответвление WebKit.
Основной поток
Механизм рендеринга начнет получать содержимое запрошенного документа с сетевого уровня. Обычно это делается фрагментами по 8 КБ.
После этого основной поток движка рендеринга:
Рис. : Основной процесс рендеринга
Механизм рендеринга начнет синтаксический анализ HTML-документа и преобразует элементы в узлы DOM в дереве, которое называется "дерево контента". Движок будет анализировать данные стиля как во внешних файлах CSS, так и в элементах стиля. Информация о стилях вместе с визуальными инструкциями в HTML будет использоваться для создания другого дерева: дерева рендеринга.
Дерево рендеринга содержит прямоугольники с визуальными атрибутами, такими как цвет и размеры. Прямоугольники расположены в правильном порядке для отображения на экране.
После построения дерева рендеринга оно проходит через процесс "макетирования". Это означает предоставление каждому узлу точных координат, где он должен появиться на экране. Следующим этапом является отрисовка: дерево рендеринга будет пройдено, и каждый узел будет отрисован с использованием внутреннего слоя пользовательского интерфейса.
Важно понимать, что это постепенный процесс. Для лучшего взаимодействия с пользователем механизм рендеринга попытается отобразить содержимое на экране как можно скорее. Он не будет ждать, пока весь HTML будет проанализирован, прежде чем начать построение и компоновку дерева рендеринга. Части содержимого будут проанализированы и отображены, в то время как процесс продолжится с остальным содержимым, которое продолжает поступать из сети.
Примеры основного потока
Рисунок : Основной поток WebKit Рисунок : Основной поток механизма рендеринга Mozilla Gecko (3.6)
Из рисунков 3 и 4 видно, что, хотя WebKit и Gecko используют немного разную терминологию, процесс в основном одинаков.
Gecko называет дерево визуально отформатированных элементов "Деревом фреймов". Каждый элемент представляет собой рамку. WebKit использует термин «Дерево рендеринга» и состоит из «Объектов рендеринга». WebKit использует термин «макет» для размещения элементов, а Gecko называет его «перекомпоновкой». «Вложение» — это термин WebKit для соединения узлов DOM и визуальной информации для создания дерева рендеринга. Небольшое несемантическое отличие заключается в том, что у Gecko есть дополнительный слой между HTML и деревом DOM. Он называется «приемником контента» и представляет собой фабрику по созданию элементов DOM. Мы поговорим о каждой части потока:
Синтаксический анализ — общее
Поскольку синтаксический анализ — очень важный процесс в механизме рендеринга, мы углубимся в него. Начнем с небольшого введения в синтаксический анализ.
Синтаксический анализ документа означает преобразование его в структуру, которую может использовать код. Результатом синтаксического анализа обычно является дерево узлов, представляющее структуру документа. Это называется деревом разбора или синтаксическим деревом.
Например, синтаксический анализ выражения 2 + 3 - 1 может вернуть следующее дерево:
Рисунок : узел дерева математических выражений
Грамматика
Анализ основан на правилах синтаксиса, которым подчиняется документ: язык или формат, в котором он был написан. Каждый формат, который вы можете анализировать, должен иметь детерминированную грамматику, состоящую из словаря и правил синтаксиса. Это называется контекстно-свободной грамматикой. Человеческие языки не являются такими языками и поэтому не могут быть проанализированы с помощью обычных методов синтаксического анализа.
Комбинация парсер-лексер
Синтаксический анализ можно разделить на два подпроцесса: лексический анализ и синтаксический анализ.
Лексический анализ — это процесс разбиения входных данных на токены. Токены — это словарный запас языка: набор действительных строительных блоков. В человеческом языке это будут все слова, встречающиеся в словаре этого языка.
Синтаксический анализ — это применение правил синтаксиса языка.
Синтаксические анализаторы обычно делят работу между двумя компонентами: лексером (иногда называемым токенизатором), который отвечает за разбиение входных данных на допустимые токены, и синтаксическим анализатором, который отвечает за построение дерева синтаксического анализа путем анализа структуры документа в соответствии с языком. правила синтаксиса. Лексер знает, как удалить ненужные символы, такие как пробелы и разрывы строк.
Рисунок : от исходного документа к деревьям синтаксического анализа
Процесс синтаксического анализа повторяется. Парсер обычно запрашивает у лексера новый токен и пытается сопоставить токен с одним из правил синтаксиса.Если правило соответствует, узел, соответствующий токену, будет добавлен в дерево синтаксического анализа, и синтаксический анализатор запросит другой токен.
Если ни одно правило не соответствует, синтаксический анализатор сохранит токен внутри и будет запрашивать токены до тех пор, пока не будет найдено правило, соответствующее всем хранящимся внутри маркерам. Если правило не найдено, парсер выдаст исключение. Это означает, что документ недействителен и содержит синтаксические ошибки.
Перевод
Во многих случаях дерево синтаксического анализа не является конечным продуктом. Синтаксический анализ часто используется при переводе: преобразование входного документа в другой формат. Пример - компиляция. Компилятор, который компилирует исходный код в машинный код, сначала преобразует его в дерево синтаксического анализа, а затем переводит это дерево в документ с машинным кодом.
Рисунок : поток компиляции
Пример синтаксического анализа
На рисунке 5 мы построили дерево синтаксического анализа из математического выражения. Давайте попробуем определить простой математический язык и посмотрим на процесс синтаксического анализа.
Словарный запас: наш язык может включать целые числа, знаки плюс и минус.
- Основными элементами синтаксиса языка являются выражения, термины и операции.
- Наш язык может включать любое количество выражений.
- Выражение определяется как «термин», за которым следует «операция», за которой следует еще один термин.
- Операция – это плюс или минус.
- Термин — это целочисленный токен или выражение.
Формальные определения словарного запаса и синтаксиса
Словарь обычно выражается регулярными выражениями.
Например, наш язык будет определен как: Как видите, целые числа определяются регулярным выражением.
Синтаксис обычно определяется в формате BNF. Наш язык будет определен как:
Мы сказали, что язык может быть проанализирован обычными синтаксическими анализаторами, если его грамматика является контекстно-свободной грамматикой. Интуитивное определение контекстно-свободной грамматики — это грамматика, которая может быть полностью выражена в БНФ. Формальное определение см. в статье Википедии о контекстно-свободной грамматике
Типы парсеров
Существует два типа парсеров: парсеры "сверху вниз" и парсеры "снизу вверх". Интуитивное объяснение состоит в том, что синтаксические анализаторы сверху вниз изучают высокоуровневую структуру синтаксиса и пытаются найти соответствие правилу. Синтаксические анализаторы снизу вверх начинают с входных данных и постепенно преобразуют их в синтаксические правила, начиная с правил нижнего уровня до тех пор, пока не будут соблюдены правила высокого уровня.
Давайте посмотрим, как два типа синтаксических анализаторов будут анализировать наш пример.
Парсер сверху вниз начнет с правила более высокого уровня: он идентифицирует 2 + 3 как выражение. Затем он идентифицирует 2 + 3 - 1 как выражение (процесс определения выражения развивается в соответствии с другими правилами, но отправной точкой является правило самого высокого уровня).
Синтаксический анализатор снизу вверх будет сканировать ввод до тех пор, пока не будет найдено соответствие правилу. Затем он заменит соответствующий ввод правилом. Это будет продолжаться до конца ввода. Частично совпавшее выражение помещается в стек парсера.
| Стек | Ввод |
|---|---|
| 2 + 3 - 1 | |
| термин | + 3 - 1 |
| термин операция | 3 - 1 |
| выражение | - 1 |
| операция выражения | 1 |
| выражение | - |
Автоматическое создание парсеров
Существуют инструменты, которые могут создавать синтаксический анализатор. Вы скармливаете им грамматику вашего языка — его словарный запас и правила синтаксиса — и они генерируют работающий синтаксический анализатор. Создание синтаксического анализатора требует глубокого понимания синтаксического анализа, а создать оптимизированный синтаксический анализатор вручную непросто, поэтому генераторы синтаксических анализаторов могут быть очень полезными.
WebKit использует два хорошо известных генератора синтаксических анализаторов: Flex для создания лексера и Bison для создания синтаксического анализатора (вы можете встретить их с именами Lex и Yacc). Входные данные Flex — это файл, содержащий определения регулярных выражений токенов. Ввод Bison — это правила синтаксиса языка в формате BNF.
Синтаксический анализатор HTML
Задачей синтаксического анализатора HTML является преобразование HTML-разметки в дерево синтаксического анализа.
Определение грамматики HTML
Словарь и синтаксис HTML определены в спецификациях, созданных организацией W3C.
Не контекстно-свободная грамматика
Как мы видели во введении к синтаксическому анализу, синтаксис грамматики можно формально определить с помощью таких форматов, как BNF.
К сожалению, все темы, посвященные обычным парсерам, неприменимы к HTML (я привел их не просто для развлечения — они будут использоваться при разборе CSS и JavaScript).HTML не может быть легко определен контекстно-свободной грамматикой, которая нужна синтаксическим анализаторам.
Существует формальный формат для определения HTML — DTD (определение типа документа), но это не контекстно-свободная грамматика.
На первый взгляд это кажется странным; HTML довольно близок к XML. Существует множество доступных парсеров XML. Существует XML-вариация HTML — XHTML — так в чем же большая разница?
Разница в том, что HTML-подход более "щадящий": он позволяет опустить определенные теги (которые затем добавляются неявно), а иногда и начальные или конечные теги и т. д. В целом это «мягкий» синтаксис, в отличие от жесткого и требовательного синтаксиса XML.
Эта, казалось бы, небольшая деталь имеет огромное значение. С одной стороны, это основная причина популярности HTML: он прощает ваши ошибки и облегчает жизнь веб-автору. С другой стороны, это затрудняет написание формальной грамматики. Подводя итог, можно сказать, что HTML не может быть легко проанализирован обычными синтаксическими анализаторами, поскольку его грамматика не является контекстно-свободной. HTML не может быть проанализирован синтаксическими анализаторами XML.
HTML DTD
Определение HTML находится в формате DTD. Этот формат используется для определения языков семейства SGML. Формат содержит определения для всех разрешенных элементов, их атрибутов и иерархии. Как мы видели ранее, HTML DTD не формирует контекстно-свободную грамматику.
Выходное дерево ("дерево синтаксического анализа") представляет собой дерево элементов DOM и узлов атрибутов. DOM — это сокращение от объектной модели документа. Это объектное представление HTML-документа и интерфейс HTML-элементов с внешним миром, такой как JavaScript.
Корнем дерева является объект "Документ".
DOM почти полностью связан с разметкой. Например: эта разметка будет преобразована в следующее дерево DOM:
Рисунок : DOM-дерево примера разметки
Когда я говорю, что дерево содержит узлы DOM, я имею в виду, что дерево состоит из элементов, реализующих один из интерфейсов DOM. Браузеры используют конкретные реализации, которые имеют другие атрибуты, используемые браузером внутри.
Алгоритм синтаксического анализа
Как мы видели в предыдущих разделах, HTML нельзя анализировать с помощью обычных парсеров "сверху вниз" или "снизу вверх".
- Снисходительный характер языка.
- Тот факт, что браузеры имеют традиционную устойчивость к ошибкам для поддержки хорошо известных случаев недопустимого HTML.
- Процесс синтаксического анализа является повторным. Для других языков источник не изменяется во время синтаксического анализа, но в HTML динамический код (например, элементы скрипта, содержащие вызовы document.write()) могут добавлять дополнительные токены, поэтому процесс синтаксического анализа фактически изменяет ввод.
Не имея возможности использовать обычные методы синтаксического анализа, браузеры создают собственные синтаксические анализаторы для анализа HTML.
Алгоритм синтаксического анализа подробно описан в спецификации HTML5. Алгоритм состоит из двух этапов: токенизация и построение дерева.
Токенизация – это лексический анализ, который преобразует входные данные в токены. Среди маркеров HTML есть начальные теги, конечные теги, имена атрибутов и значения атрибутов.
Токенизатор распознает токен, передает его конструктору дерева и использует следующий символ для распознавания следующего токена и так далее до конца ввода.
Рис. : Процесс синтаксического анализа HTML (взято из спецификации HTML5)
Алгоритм токенизации
Выводом алгоритма является токен HTML. Алгоритм выражается в виде конечного автомата. Каждое состояние использует один или несколько символов входного потока и обновляет следующее состояние в соответствии с этими символами. На решение влияет текущее состояние токенизации и состояние построения дерева. Это означает, что один и тот же использованный символ будет давать разные результаты для правильного следующего состояния в зависимости от текущего состояния. Алгоритм слишком сложен для полного описания, поэтому давайте рассмотрим простой пример, который поможет нам понять принцип.
Базовый пример — токенизация следующего HTML:
Исходным состоянием является "Состояние данных". Когда персонаж встречается, состояние меняется на «Состояние тега открыто». Использование символа az вызывает создание «токена начального тега», состояние изменяется на «состояние имени тега». Мы остаемся в этом состоянии до тех пор, пока символ > не будет израсходован. Каждый символ добавляется к новому имени токена. В нашем случае созданный токен является токеном html.
При достижении тега > выдается текущий токен, и состояние снова меняется на «Состояние данных». Тег будет обрабатываться теми же шагами. До сих пор были испущены теги html и body. Теперь мы вернулись к «состоянию данных». Использование символа H Hello world приведет к созданию и выдаче маркера персонажа, это продолжается до тех пор, пока не будет выполнено
Читайте также: