JavaScript для детей. Самоучитель по программированию. Ник Морга. Москва Манн, Иванов и Фербер 2016

86
Часть I. Основы
Элементы заголовков
У каждого элемента есть особое назначение и способ применения.
Например, элемент h1 означает «это заголовок верхнего уровня».
Содержимое, которое вы введете между открывающим и закрывающим тегами
, браузер отобразит на отдельной строке крупным жирным шрифтом.
Всего в HTML шесть уровней заголовков: h1, h2, h3, h4, h5 и h6.
Выглядят они так:

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня

Заголовок шестого уровня

На рис. 5.2 показано, как эти заголовки выглядят в браузере.
Рис. 5.2. Элементы заголовков разного уровня
Элемент p
Элемент p нужен для разделения текста на параграфы. Любой фрагмент текста, который вы поместите между тегами
, будет отображен как отдельный параграф, с отступами сверху и снизу. Давайте посмотрим, что происходит, если элементов несколько. Для этого добавьте новую строку в документ page.html (прежние строки показаны серым цветом).

5. Основы HTML
87

Привет, мир!

Моя первая веб-страничка.
Добавим-ка еще параграф.
На рис. 5.3 показана страничка с нашим новым параграфом.
Рис. 5.3. Та же страничка с еще одним параграфом
Обратите внимание, что каждый параграф отображен с новой строки, а между параграфами сделан отступ. Все это благодаря тегу
Пробелы в HTML и блочные элементы
А как наша страничка будет выглядеть без тегов? Давайте посмотрим:
Привет, мир!
Моя первая веб-страничка.
Добавим-ка еще параграф.
На рис. 5.4 показана страничка без тегов.
Рис. 5.4. Та же страничка без HTML-тегов
Мало того что пропало форматирование, теперь весь текст отображается в одну строку! Дело в том, что в HTML все пробельные символы преобразуются в единственный пробел. Пробельные символы — это любые символы, которые отображаются в браузере как пробелы или

88
Часть I. Основы отступы, — например, это пробел, символ табуляции и символ перевода строки (тот самый, который вы вводите, нажимая ENTER или RETURN). Поэтому все пустые строки, которые вы вставите между фрагментами текста в HTML-документе, сожмутся до одного пробела.
Элементы p и h1 — блочные; это значит, что их содержимое отображается отдельными блоками текста с новой строки и любое содержимое, идущее после такого блока, тоже начнется с новой строки.
Строчные элементы
А теперь добавим к нашему документу еще два элемента, em и strong:
На рис. 5.5 показано, как выглядит страница с новыми тегами.

Привет, мир!

Моя

первая

веб-страничка
.
Добавим-ка еще

параграф
.
Рис. 5.5. Элементы
em и strong
Элемент em отображает свое содержимое курсивом, а элемент strong — жирным шрифтом. И em, и strong относятся к строчным элементам, поскольку они, в отличие от блочных элементов, не выводят свое содержимое отдельной строкой.
Чтобы отобразить текст одновременно жирным шрифтом и курсивом, поместите его внутрь обоих тегов. Обратите внимание, что в последнем примере теги стояли в такой последовательности:
параграф. Очень важно правильным образом вкладывать элементы друг в друга: если один элемент находится внутри другого элемента, то его открывающий тег и его