В это части учебника вы прочитаете что такое строчные элементы в HTML и какие они бывают.
Что такое строчный элементы:
Строчные элементы/теги это те которые предназначены для изменение строки, не всей, а только её части, хотя можете менять и всё, больше не чего сказать, только смотреть.
Какие теги являются строчными:
Их достаточно много, поэтому текста скорее всего будет много.
Основные:
Основные это те, которые вы будите использовать чаще всего, вот они.
- b — Делает жирный текст в HTML;
- strong — То же самое что и b;
- i — Делает курсивный текст;
- em — То же самое что и i;
- q — Выделяет в тексте цитату;
- a — Создаёт ссылку;
Вот пример использования их.
1 2 3 4 5 6 | <body> <p>Это <b>текст жирный</b>, а этот <i>текст курсивный</i></p> <p>Это <strong>текст жирный</strong>, а этот <em>текст курсивный</em></p> <p>Это <q>очень умная цитата</q></p> <p>Это <a href="#">ссылка</a></p> </body> |
Давайте не много разберём, первые два абзаце похоже, мы только используем разные подобные теги, в следующем абзаце используем тег <q>
, для обозначения цитат в тексте, потом идёт обычная ссылка, которая использует атрибут href
, который хранит данные куда отсылать, в нашем случае не куда.
Вот результат.
Как видите, первые два абзаца хоть и используют разные теги, но они абсолютно одинаковые, дольше идёт цитата, а потом ссылка.
Ещё у многих может возникнуть вопрос, как добавить ссылку в картинку в HTML, сделать это очень просто, вот какой код вам нужен.
1 | <a href="ссылка"><img src="путь до картинки"></a> |
То есть, делается это очень просто.
Дополнительные:
Теперь перейдём к менее важным строчным тегам, но они тоже используются, начну с тех, которые нужны в основном для различных формул.
- sup — Отображает виде верхнего индекса;
- sub — Отображает текст виде нижнего индекса;
Вот как с этим работать.
1 2 3 4 5 6 7 8 9 | <body> <p> Математическая формула: X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup> </p> <p> Химическая формула: СН<sub>3</sub>СНО + NH<sub>2</sub>OH = CH<sub>3</sub>C(=NOH)H + H<sub>2</sub>O </p> </body> |
В первом варианте мы используем <sup>
, для математических формул, а <sub>
, используется для химических формул.
Вот какая страница у нас получилось.
Как видите, всё хорошо работает.
Также есть другие, абсолютно для разных целый, вот они.
- code — Нужен для отображения программного кода в тексте;
- s — Перечёркивает текст;
- samp — Нужен для показа вывода компьютерной программы;
- u — Подчёркивает текст;
- br — перенёс строки;
Это пожалуй все которые вам надо знать, есть ещё, какие-то мы ещё затроним в других частях, а какие-то можете посмотреть по этой ссылке.
Вывод:
В этой части учебника вы узнали, что такое строчные элементы в HTML, как с ними работать и какие есть.