~~~ KOCI.INUMO.RU ~~~
Теги <div> и <span>. Урок 32. Универсальные теги <div> и <span> являются на сегодня самыми популярными тегами. Тег <div> определяет блочный элемент. Тег <span> определяет строчный (инлайновый) элемент. Мнемоническая фраза на русском языке "ДИВный СтеПАН" позволит вам легко запомнить (и вспомнить, если вдруг забыли) эти два самых популярных тега.
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
32. Теги <div> и <span>.
Универсальные теги <div> и <span> являются на сегодня самыми популярными тегами:
Внутри тега <span> не может быть тегов <div>.
Стили отображения текста внутри тегов, размеры блоков, цвета и т.д. задаются с помощью атрибутов style и/или class.
Именно благодаря простоте использования и универсальности данные теги завоевали популярность.
Простой пример использования комбинации нескольких тегов <div> и <span>:
Попробуем нарисовать несколько дивов и спанов для нашего тестового примера:
Наша тестовая страничка после данного урока:
article_032.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_032.zip ← скачайте пример, чтобы установить на свой сайт...
Мнемоническая фраза на русском языке "ДИВный СтеПАН" позволит вам легко запомнить (и вспомнить, если вдруг забыли) эти два самых популярных тега. При условии, что вы не забудете этого самого дивного Степана. Впрочем, скорее всего, не забудете. Абсурдность фразы вызывает раздражение, а раздражение вызывает повышенную запоминаемость. Таковы законы психологии.
И опять же, популярность тегов <div> и <span> была высока, когда я создавал эту страничку. А какова эта популярность сейчас, когда эту страничку вы изучаете?
Мне кажется, популярность этих тегов останется высокой еще продолжительное время. Но, давайте, гадать не будем, а проверим это предположение с помощью лабораторной работы.
- <div> - определяет блочный элемент.
- <span> - определяет строчный (инлайновый) элемент.
Внутри тега <span> не может быть тегов <div>.
Стили отображения текста внутри тегов, размеры блоков, цвета и т.д. задаются с помощью атрибутов style и/или class.
Именно благодаря простоте использования и универсальности данные теги завоевали популярность.
Простой пример использования комбинации нескольких тегов <div> и <span>:
Я есть внешний див
Задача: сделать позиционирование одного слоя div внутри другого. Решение:- Внешнему диву - задаем значение position:relative, тогда дочерний (внутренний) элемент div начнет позиционироваться уже внутри родителя..
- Внутреннему диву - задаем значение position:absolute, и его можно позиционировать уже относительно левого верхнего угла или нижнего правого угла внешнего дива.
style="position:relative; ...
Я есть просто span внутри внешнего дива...
Я есть внутренний див
style="position:absolute; bottom:5px; ...
Я есть просто span внутри внутреннего дива... Хочу сообщить, что хотя мой див и внутри внешнего дива, можно сделать так, чтобы он выходил за его границы...
Попробуем нарисовать несколько дивов и спанов для нашего тестового примера:
<div id="big_div" style="position:relative; width:820px; height:160px; background-color: #F0FFFF; border: 1px solid #707F7F; padding: 20px 20px 20px 20px; margin: 0px 0px 0px 0px; "> <h1>Текст на английском...</h1> <p>If you're involved in an internet marketing business, then you've probably already come face-to-face with <span style="font-style: italic;" title="Я есть просто span внутри внешнего дива...">your #1 enemy - "Time Wasting"</span>.</p> <div id="tine_div" style="position:absolute; bottom:5px; right:-120px; width:720px; height:120px; background-color: #FFF0FF; border: 1px solid #7F707F; padding: 40px 60px 20px 20px; margin: 0px 0px 0px 0px; opacity: 0.7;"> <h2>Перевод на русский...</h2> <p style="background-color: #FFF0FF;">Если вы вовлечены в бизнес, связанный с Интернетом, тогда, возможно, вы столкнулись лицу к лицу с <span style="font-style: italic;" title="Я есть просто span внутри внтреннего дива...">вашим главным врагом, имя которого - "Пустая Трата Времени"</span>.</p> </div> </div>
article_032.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_032.zip ← скачайте пример, чтобы установить на свой сайт...
Мнемоническая фраза на русском языке "ДИВный СтеПАН" позволит вам легко запомнить (и вспомнить, если вдруг забыли) эти два самых популярных тега. При условии, что вы не забудете этого самого дивного Степана. Впрочем, скорее всего, не забудете. Абсурдность фразы вызывает раздражение, а раздражение вызывает повышенную запоминаемость. Таковы законы психологии.
И опять же, популярность тегов <div> и <span> была высока, когда я создавал эту страничку. А какова эта популярность сейчас, когда эту страничку вы изучаете?
Мне кажется, популярность этих тегов останется высокой еще продолжительное время. Но, давайте, гадать не будем, а проверим это предположение с помощью лабораторной работы.
*** Машина-Функционал для передвижения по страничкам курса HTML ***
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Тропинка к данной страничке:
ГлавСтр :: Урок_00 :: Урок_01 :: Урок_01.4 :: Лаба_1 :: Урок_01.5 :: Урок_01.6 :: Урок_02 :: Урок_03 :: Урок_04 :: Урок_05 :: Урок_06 :: Урок_07 :: Урок_08 :: Урок_09 :: Урок_10 :: Урок_11 :: Урок_12 :: Урок_13 :: Урок_14 :: Урок_15 :: Урок_16 :: Урок_17 :: Урок_18 :: Урок_19 :: Урок_20 :: Урок_21 :: Урок_22 :: Урок_23 :: Урок_24 :: Урок_25 :: Урок_26 :: Урок_27 :: Урок_28 :: Урок_29 :: Урок_30 :: Урок_31 :: Урок_32
Следующие странички, рекомендуемые для посещения и изучения:
Лаба 2
Страничка сделана на основе контента курса HTML сайта kocby.ru