<body>
и </body>
включают в себя другие теги, которые в свою очередь включают теги, или текст. Вот вам пример документа из предыдущей главы:<!--
и -->
).<img>
) в документе текстом, содержащимся в их атрибуте “alt”, который задаёт альтернативное текстовое представление картинки.<pre>
(“preformatted”, предварительно отформатированный – используется для кода и простого текста) с атрибутом data-language (язык) и довольно грубо пытается подсветить ключевые слова в языке.<pre>
и регулярку (с включённой настройкой global), совпадающую с ключевым словом языка программирования, которое содержит элемент.<strong>
(жирный шрифт).<pre>
, у которых есть атрибут data-language
, и вызывая на каждом highlightCode
с правильной регуляркой.class
, имя которого является ключевым словом в JavaScript. По историческим причинам, когда старые реализации JavaScript не умели обращаться с именами свойств, совпадавшими с ключевыми словами, этот атрибут доступен через свойство под названием className
. Вы также можете получить к нему доступ по его настоящему имени class
через методы getAttribute
и setAttribute
.<p>
и заголовков <h1>
растягиваются на всю ширину документа и появляются на отдельных строках. Такие элементы называют блочными. Другие, как ссылки <a>
или жирный текст <strong>
появляются на одной строчке с окружающим их текстом. Они называются встроенными (inline).<strong>
делает жирным текст и <a>
делает текст подчёркнутым и синим.<img>
или то, что ссылка в теге <a>
при клике открывает новую страницу, связано с типом элемента. Но основные стили, связанные с элементом, вроде цвета текста или подчёркивания, могут быть нами изменены. Вот пример использования свойства style (стиль):<style>
:<strong>
, который делает текст жирным, накладывается правило из тега <style>
, по которому добавляется font-style и цвет.<style>
включал правило font-weight: normal, конфликтующее со стилем по умолчанию, то текст был бы обычный, а не жирный. Стили, которые применяются к узлу через атрибут style, имеют наивысший приоритет.p > a {…}
применима ко всем тегам <a>
, находящимся внутри тега <p>
и являющимся его прямыми потомками. p a {…}
применимо также ко всем тегам <a>
внутри <p>
, при этом неважно, является ли <a>
прямым потомком или нет.<table>
содержится тег <tr>
. Внутри него мы можем размещать ячейки: либо ячейки заголовков <th>
, либо обычные ячейки <td>
.<th>
, и должно быть по одной строчке на объект из массива, где его свойства обёрнуты в элементы <td>
. Здесь пригодится функция Object.keys, возвращающая массив, содержащий имена свойств объекта.<img src="img/hat.png">
летали по противоположным сторонам эллипса.