WITH
MOTIVATION
Регистрация
Дата рождения:



Введите код с картинки:
Вы регистрируетесь на сервисе withMotivation

Регистрируясь, вы соглашаетесь с правилами пользования сервисом, и обязуетесь честно и добросовестно относиться к своей работе и работе окружающих!

HTML и CSS

Урок 3. Понятие блочного и строчного элемента, комментарии.

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

Итак, в тэге BODY, то есть в теле документа (в видимой части) могут находиться элементы двух типов - блочные или строчные. Блочные элементы как правило имеют парный тэг DIV, а строчные - SPAN. Но это не обязательно. Есть некоторые блочные и строчные элементы, которые имеют другие тэги, и я об этом буду рассказывать, но в большинстве случаев именно DIV и SPAN являются основными тэгами.

Разница между ними следующая: когда мы создаём блочный элемент (то есть блок), то он автоматически (если мы не укажем ему специально) подгоняет свою ширину под ширину того элемента, в котором он находится (то есть подстраивается под ширину элемента-родителя). Высота блока будет подгоняться под высоту содержимого блока. То есть если мы напишем так:

<body>
    <div>
        Привет!
    </div>
    <div>
        Как дела?
    </div>
</body>

То мы получим 2 блока с шириной во всю ширину документа и высотой в  строку, которые располагаются друг под другом. Почему друг под другом, а не друг за другом, надеюсь, понятно? Потому что ширина каждого блока занимает всю ширину элемента, в котором находится наш DIV, а поскольку наш DIV находится в теле BODY, то ширина его равна ширине всего документа, и блоки вынуждены создаваться друг под другом. Пример такого блока - обыкновенный абзац текста. Мы, конечно визуально самих блоков (границ блоков) не увидим, мы будем видеть лишь содержимое этих блоков, но саму структуру будем понимать чётко.

В отличие от блочного элемента есть строчный элемент - SPAN. С ним ситуация обратная - ширина строчного элемента равна содержимому. Поэтому если мы разместим несколько друг за другом следующих строчных элементов. например

<body>
    <span>Привет,</span>
    <span>как твои дела? </span>
    <span>Удачи!</span>
</body>

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

<div>
    Созда<span>ние сай</span>та с нуля
</div>

Чтобы было проще понять, замените слово "блок" словом "абзац", а слово "строка" - понятием "слово или отрезок строки". Так становится понятнее, да? Абзацы идут друг под другом, какими бы они большими ни были, а слова - друг за другом слева направо.

Вот ключевые отличия DIV и SPAN элементов. Примерно изобразить всю разницу между ними можно таким образом:

DIV
DIV
DIV
SPAN SPAN SPAN

Надеюсь, более-менее понятна разница, да?

Теперь дальше: очень важное правило: Нельзя располагать блочные элементы внутри строчных! То есть никогда не делайте так:

<span>
    <div>
        Текст
    </div>
</span>

Наоборот - пожалуйста, в блоке может быть сколько угодно строк, но в строке блоков быть не может. Это просто нужно запомнить.

Далее, когда я буду вас знакомить с очередным тэгом, я буду помечать - блочный это элемент или строчный. Это очень важное понятие, которое нужно понять и запомнить, так как не все строчные на первый взгляд элементы являются строками в действительности. Яркий пример - заголовки вида H1, H2, H3 - это блочные элементы, а не строчные (более того - в них можно помещать только строчные элементы, и ни в коем случае нельзя помещать блоки), но об этом мы подробнее поговорим в следующей статье.

А сейчас давайте рассмотрим ещё один важный элемент - комментарии. 

Комментариями называется блок, который имеет следующие тэги:

<!--
    какой-то текст
-->

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

<div>
    <!-- Открываем блок "Шапка сайта" -->
    <div>
        ...
    </div>
    <!-- Конец "Шапки сайта" -->
</div>

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

Ещё один очень полезный эффект комментариев - временное отключение каких-то частей документа. Например, если вы пишете код документа, и вам нужно чтобы какая-то часть временно было не видна, а потом вы планируете её включить, то можно эту часть "закомментировать", например:

<div>
    <div>
        <span>Привет!</span>
        <span>Пока!</span>
    </div>
    <div>
        Это сайт withMotivation.com
    </div>
</div>

Если мы хотим временно скрыть блоки с текстом "Привет!" и "Пока!", можно сделать так:

<div>
    <!--
    <div>
        <span>Привет!</span>
        <span>Пока!</span>
    </div>
    -->
    <div>
        Это сайт withMotivation.com
    </div>
</div>

Теперь целый кусок кода у вас не будет отображаться в браузере, и вы сможете "раскомментировать" его, когда он вам понадобится.

И ещё запомните одно золотое правило: в HTML любое слово, или строка должна быть обязательно помечена каким-нибудь тэгом. Это важно!

Вы действительно хотите удалить запись?

Действительно