HTML блочные элементы

В этой части учебника, вы узнаете что такое блочные элементы HTML, какие они бывает и для чего нужны.

Что такое блочный элемент:

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

Какие теги являются блочными:

Теперь пришло время показать какие теги являются блочными, но ту будут показываться только самые основные.

Заголовки:

Самое первое, для создание заголовка в HTML используются блочные элементы/теги, всего их шесть уровней, от h1 и до h6, самый первый, это самый большой и главный заголовок, вот пример их всех.

Как вы можете заметить, так это то, что все заголовки написано в <body>, потому что весь контент надо писать в нём, вот весь результат

создание заголовка в html

Как видите, чем выше число, тем меньше заголовок, тут вообщем-то всё просто.

Текст:

Как добавить абзац в HTML, это делается с помощью тега <p>, в нём пишется текст любого размера, если вам нужен новый абзац, то просто вставляете новый этот тег.

В качестве примера, у меня вот такой не большой стих, который был взят с сайта с MillionStatusov.ru.

Как видите я написал этот стих не в одном теге <p>, а в нескольких, каждый этот тег, отдельный абзац, который отделён друг от друга отступами.

Также надо сказать и про тег <br>, он нужен для того, что бы переносить на другую строчку, иначе, каждый абзац был в одну строчку, вот результат.

как добавить абзац в html

Примечание:

Вам не надо всегда использовать <br> для переноса строки, так как, зависимо от ширины элемент <p>, он сам будет переносится на новую строчку, если в одну не влезает, а  <br> надо использовать только при необходимости.

Также у многих возникает вопрос, тег p строчный или блочный, отвечу с полной уверенностью он блочный.

Список:

Списки ещё один очень важный элемент HTML, здесь я покажу только один не большой пример, подробнее о нём вы узнаете в одной из следующих части учебника.

Вот результат этой HTML страницы.

Тут не чего рассказывать подробнее в следующей части.

Другие:

Ну и последнее, тот же <header>, <main> и <footer> это тоже блочные элементы, о них рассказано было в предыдущей части, ещё можно вспомнить тег <div>, это просто контейнер, нужен в основном для работы с CSS.

Также есть тег для вставки картинки в HTML, это <img>, вот как с ним работать.

Атрибут src хранит путь до картинуи а alt, альтернативный текст, если картинка не погрузилась.

Ещё вы можете использовать любой формат изображения, от JPG, до GIF.

Вывод:

В этой части учебника вы прочитали про блочные элементы в HTML, надеюсь для вас было полезно и понятно.

Если вы не увидели здесь интересующий вас элемент/тег, то скорее всего вы найдёте его в другой части.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Дополнительно: