наверх





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


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

<div>


Элемент <div> используется чаще всех остальных элементов, так как является блочным. С помощью этого тега создают новые блоки, элементы страниц, отделяют одну информационную часть от другой и так далее. Тег используется очень просто, пример:

<div class="block">
On the walls you can see pictures of some great writers and poets. 
On the table near the window you can always see beautiful spring and autumn flowers. 
</div>


В этом примере мы создали тег <div>, указали ему атрибут class и присвоили значение block. Вместо класса можно задать атрибут id.

<span>


Тег <span> используется реже, чем <div>. Данный тег предназначен для выделения строчных элементов в странице. Он может быть использован внутри любого другого тега, кстати, как и тег <div>, который может быть использован внутри себя.

<span class="fw">On</span> the walls you can see pictures of some great writers and poets. 


В этом примере мы использовали тег <span>, что бы выделить первое слово в предложении.

<p>


Параграф, это особый атрибут. У данного атрибута уже заданы специфические ему свойства. К примеру, если вы создадите два параграфа, то они будут начинаться каждый с новой строчки и между ними будут отступы.

<P><span class="fw">There</span> are many big and small libraries everywhere in our country. They have millions of books in different languages. You can find there the oldest and the newest books.</P> 
<P><span class="fw">Every</span> school has a library. Pupils come to the library to take books on different subjects</P>


В этом примере как раз и создали два идущих друг за другом параграфа. К тому же, внутри этих параграфов мы использовали строчный тег <span>, что бы, например, изменить шрифт первого слова. Как и другому любому элементу HTML, тегу <p> так же можно задать свои CSS свойства. Он так же поддерживает классы и идентификаторы, поэтому, если нужно, то можно их использовать.

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





Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.