Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 15. Символьные данные и разметка документа, правила вложения элементов, кодировки

Содержание курса

Символьные данные и разметка документа

Любой документ, созданный с использованием языков разметки состоит из разметки (markup) - это теги и символьных данных (character data) - это содержимое, размещаемое между тегами.

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

При обработке документа, браузер строит DOM - дерево документа:


К узлам этого дерева обращаются селекторы CSS, а также JavaScript (о нем речь в другом курсе).


Как видно на схеме, элемент <html> является корневым элементом, в который вложены все остальные элементы документа html.

Дочерние элементы <html> - это элементы, находящиеся непосредственно внутри него (те, что произошли от него). В нашем случае - это элементы <head> и <body>. Для элемента <head> дочерним является элемент <title> и т.д. И наоборот, элемент <html> является родительским для элементов <head> и <body>.

Предок - это тот элемент, от которого в конечном счете произошел данный элемент. В примере для элемента <title> элемент <html> является предком. И наоборот, элемент <title> - потомок элемента <html>.

Смежные узлы - это "братья и сестры" в "семье дерева документа". В нашем случае элементы <head> и <body> - смежные потому, что у них общий родительский элемент <html>.

Разбором дерева документа занимается модуль браузера, называемый парсером. Именно парсер занимается обработкой html-кода и построением дерева документа (DOM). Существует парсер, занимающийся чтением скриптов, парсер обработки стилей CSS и др.

После построения дерева документа, парсер браузера, отвечающий за стили CSS начинает их применение к узлам документа - это происходит на уровне ядра отображения (см. схему).

Понять, как происходит построение документа очень важно - это поможет вам в будущем лучше понимать работу JavaScript, PHP и CSS.

Элемент <!DOCTYPE>

Элемент <!DOCTYPE> указывает браузеру, на какой версии html написан код. Строка <!DOCTYPE html> говорит об HTML5.

В случае, если указан <!DOCTYPE> документа, браузер выполняет обработку кода в режиме "standarts mode" - это режим валидности по указанной версии html, т.е. браузер выполняет обработку кода в соответствии со стандартами указанной версии html. Если же <!DOCTYPE> не указан, браузер переходит в режим "quirks mode" - режим совместимости со старыми версиями html.

Отображение документа в режимах "standarts mode" и "quirks mode" может сильно отличаться. В случае если были использованы нововведенные элементы, в режиме "quirks mode" они будут проигнорированны. Если в коде использованы только базовые элементы html, то никакого отличия не будет.

Правила вложения элементов

На официальном сайте W3.org по адресу https://www.w3.org/TR/html/grouping-content.html#grouping-content описаны правила вложения элементов друг в друга в виде справочника.

Content model элемента говорит о том, какие элементы могут быть вложены в данный элемент. Это могут быть flow content - потоковые элементы, phrasing content - элементы уровня текста. Какие элементы относятся к уровню текста, а какие к потоковым элементам на этом официальном сайте также указанно.

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

Для примера выберем в меню слева элемент <p> и увидим, что content model у него phrasing content.


Кликнув по ссылке "phrasing content" мы увидим, какие элементы относятся к этой категории:


В результате мы видим список элементов, которые могут быть вложены в элемент <p>.

Просто научитесь пользоваться этим официальным справочником, всё из него вам запоминать не нужно. Многое из того, что там есть, вам вообще никогда не понадобится.

Кодировки

Отрисовка символов текста - это результат двух процессов:

  1. набор векторных форм, который отображает нам этот символ
  2. код символа, по которому этот символ "выдергивается" из набора векторных форм

Таким образом, шрифт - это векторные формы, а за кодирование отвечает ОС, какая-либо программа и т.д.

Кодировка ASCII (англ. American Standart Code for Information Interchange) - американский стандартный код для обмена информацией. Кодировка ASCII является прародителем всех существующих кодировок.
ASCII представляет собой кодировку для представления десятичных цифр, латинского и национального алфавитов, знаков препинания и управляющих символов.

Кодировки Unicode:

Управляющей является та кодировка, которая указана в заголовках, приходящих от сервера, поэтому если у вас в документе выставлена одна кодировка (например, utf-8), а в заголовках от сервера приходит другая (например, windows-1251), то ваша кодировка работать не будет, её нужно изменить на сервере. Для внесения изменений в инструкции работы сервера используется файл ".htaccess", в котором и нужно указать кодировку. К примеру, для установки кодировки utf-8 по умолчанию в ".htaccess" нужно прописать строку "AddDefaultCharset utf-8" (без кавычек, с новой строки перед "utf-8" пробел)

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля