Изучаем теги div и span
Время чтения: 2 мин.Здравствуй, уважаемый читатель.
Это двенадцатый заключительный урок изучения html, в котором вы узнаете про очень полезные блоки на странице, без которых было бы невозможно работать и верстать шаблоны для сайтов, про теги DIV и SPAN.
Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения
Урок 5. Ссылки. Часть 1
Урок 5. Ссылки. Часть 2
Урок 6. Атрибуты
Урок 7. Таблицы
Урок 8. Выделения текста
Урок 9. Формы. Часть 1
Урок 9. Формы. Часть 2
Урок 10. Метатеги
Урок 11. Комментарии
Теория и практика
В основном из данных двух тегов строится вся html страница. После того как вы поймете что можно делать с этими тегами, вы не будете знать как обходились раньше без них. По порядку о каждом из этих тегов.
Тег div
Тег div является блочным элементом, который предназначен для выделения фрагмента документа и затем изменением его содержимого.
В коде html он выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div> <h2>Анкета</h2> </div> <div> <div> <ul> <li>Главная</li> <li>Об авторе</li> <li>Разное</li> </ul> </div> <p>Основной текст</p> </div> <div>Все права защищены.</div> </body> </html> |
Вот так выглядит работа с тегом div. Он очень удобен. Сначала мы заключаем всё в блоки, а затем с помощью стилей(CSS) размещаем блоки как и где хотим.
Тег span
Тег span является строчным элементом, который предназначен для выделения фрагмента текста внутри других тегов, таких как <p>,<table> или <div>.
Пример кода с тегом span:
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <p>Оказывается, <span>древние предки</span> человека, как выяснили учёные, питались преимущественно фруктами.</p> <p>Поэтому наш организм изначально <span>приспособлен к употреблению фруктов</span>.</p> </body> </html> |
Данный тег работает следующим образом: вы помещаете в него тот фрагмент текста, который хотите выделить и задаете ему стиль.
Дело в том, что если для данных тегов стили не заданы, то вы не увидите никаких изменений на html странице. Стили задаются для тега div и span через таблицу стилей(CSS). В коде html вы только привязываете определенный стиль в CSS через атрибуты или. Данные атрибуты называются селекторами. Вы поймете как они работают когда начнете проходить уроки по CSS.
Пробуйте всё прописать руками. Тогда вы лучше запомните и будете помнить где и как их применить.
Больше практикуйтесь!
Атрибут span | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Определяет число колонок, к которым будут применяться заданные характеристики. Если этот атрибут отсутствует, то тег <col> работает для одной колонки. Допускается применять атрибут span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.
Синтаксис
HTML |
|
XHTML |
|
Значения
Целое положительное значение.
Значение по умолчанию
1
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег COL, атрибут span</title> </head> <body> <table cellspacing="0" border="1"> <col> <col span="5" align="center"> <col span="4" align="center"> <tr> <td> </td><td>1995</td><td>1996</td><td>1997</td> <td>1998</td><td>1999</td><td>2000</td><td>2001</td> <td>2002</td><td>2003</td> </tr> <tr> <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td> <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td> <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td> <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> </table> </body> </html>
Тег — Портал программирования
Описание
Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Синтаксис
<span>...</span>
Закрывающий тег
Обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
Пример
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег SPAN</title> <style> body { font-family: Arial, sans-serif; /* Рубленый шрифт */ } .letter { color: red; /* Красный цвет символов */ font-size: 200%; /* Размер шрифта в процентах */ font-family: serif; /* Шрифт с засечками */ position: relative; /* Относительное позиционирование */ top: 5px; /* Сдвиг сверху */ } </style> </head> <body> <p><span class="letter">Р</span>азумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей.</p> <p>Бернард Шоу</p> </body> </html>
Результат данного примера показан ниже.
Рис. 1. Вид текста, оформленного с помощью тега <span> и стилей
Тег // Вебшкола онлайн
Пример
<p>У моей мамы <span>голубые</span> глаза.</p>Описание и использование
Тег <span> никак не отображается визуально. Однако он позволяет идентифицировать доступ к тексту или части документа (В приведенном выше примере слову голубые был присвоен класс blue. После этого в стилевом файле css можно изменить оформление этого слова, изменяя свойства класса blue).
Когда вы связываете текст с помощью элемента span вы можете добавить оформление с помощью CSS или изменить элемент с помощью JavaScript.
Браузерная поддержка
Тег <span> поддерживается всеми основными браузерами.
Отличия между HTML и XHTML
Нет
Стандартные атрибуты
DTD показывает в какой версии DTD использование атрибута разрешено. S=Strict, T=Transitional и F=Frameset.
Тег <span> поддерживает следующие стандартные атрибуты:
Атрибут | Значение | Описание | DTD |
---|---|---|---|
class | название класса | Указывает название класса для элемента | STF |
dir | rtl ltr |
Указывает направление вывода текста для элемента | STF |
id | id | Указывает id для элемента | STF |
lang | код_языка | Указывает код языка содержимого элемента | STF |
style | описание_элемента | Указывает строчный стиль элемента | STF |
title | текст | Указывает дополнительную информацию об элементе | STF |
xml:lang | код_языка | Указывает код языка содержимого элемента в XHTML документах | STF |
Дополнительная информация о стандартных атрибутах.
События
Тег <span> поддерживает следующие атрибуты событий:
Атрибут | Значение | Описание | DTD |
---|---|---|---|
onclick | скрипт | Скрипт, который должен быть выполнен при одинарном щелчке мышью | STF |
ondblclick | скрипт | Скрипт, который должен быть выполнен при двойном щелчке мышью | STF |
onmousedown | скрипт | Скрипт, который должен быть выполнен, если пользователь зажал кнопку мыши | STF |
onmousemove | скрипт | Скрипт, который должен быть выполнен при движении курсора мыши | STF |
onmouseout | скрипт | Скрипт, который должен быть выполнен, если пользователь передвинул курсор мыши за пределы элемента | STF |
onmouseover | скрипт | Скрипт, который должен быть выполнен, когда пользователь двигает курсор мыши над элементом | STF |
onmouseup | скрипт | Скрипт, который должен быть выполнен, когда пользователь отпускает кнопку мыши | STF |
onkeydown | скрипт | Скрипт, который должен быть выполнен при нажатии клавиши пользователем | STF |
onkeypress | скрипт | Скрипт, который должен быть выполнен при нажатии и отпускании клавиши пользователем | STF |
onkeyup | скрипт | Скрипт, который должен быть выполнен при отпускании клавиши пользователем | STF |
Дополнительная информация о cобытиях HTML.
HTML тег span | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 23.01.2011
Тег <span> — тег-контейнер, не имеет логического значения, используется в основном для оформления и/или назначения уникального идентификатора (id) определенному фрагменту текста.
Строчный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<span>...</span>
Атрибуты
Основные Вспомогательные События
align | выраванивание текста
|
---|---|
class | определяет имя используемого класса |
dir | определяет направление символов:
|
id | уникальный идентификатор |
lang | определяет используемый язык в документе, на который указывает ссылка |
onclick | щелчок на элементе |
ondblclick | двойной щелчок на элементе |
onkeydown | нажатие клавиши, когда элемент имеет фокус |
onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
onmousemove | движение указателя мыши, когда элемент имеет фокус |
onmouseout | смещение указателя мыши с элемента |
onmouseover | помещение указателя мыши на элемент |
onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
style | задает встроенную таблицу стилей |
title | всплывающая подсказка |
Пример
Дорогу переходим на <span>зеленый</span> сигнал светофора!
Рекомендации по использованию
Твой код:
<html> <head> <title></title> </head> <body> <p>Дорогу переходим на <span>зеленый</span> сигнал светофора!</p> </body> </html> Сделай код и жми тут
Результат:
большой полигонПо теме
Показать комментарии
HTML тег span | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 23.01.2011
Тег <span> — тег-контейнер, не имеет логического значения, используется в основном для оформления и/или назначения уникального идентификатора (id) определенному фрагменту текста.
Строчный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<span>...</span>
Атрибуты
Основные Вспомогательные События
align | выраванивание текста
|
---|---|
class | определяет имя используемого класса |
dir | определяет направление символов:
|
id | уникальный идентификатор |
lang | определяет используемый язык в документе, на который указывает ссылка |
onclick | щелчок на элементе |
ondblclick | двойной щелчок на элементе |
onkeydown | нажатие клавиши, когда элемент имеет фокус |
onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
onmousemove | движение указателя мыши, когда элемент имеет фокус |
onmouseout | смещение указателя мыши с элемента |
onmouseover | помещение указателя мыши на элемент |
onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
style | задает встроенную таблицу стилей |
title | всплывающая подсказка |
Пример
Дорогу переходим на <span>зеленый</span> сигнал светофора!
Рекомендации по использованию
Твой код:
<html> <head> <title></title> </head> <body> <p>Дорогу переходим на <span>зеленый</span> сигнал светофора!</p> </body> </html> Сделай код и жми тутРезультат:
большой полигонПо теме
Показать комментарии
HTML тег span | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 03.03.2009
Тег <span> — тег-контейнер, не имеет логического значения, используется в основном для оформления и/или назначения уникального идентификатора (id) определенному фрагменту текста.
Строчный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<span>...</span>
Атрибуты
Основные Вспомогательные События
align | выраванивание текста
|
---|---|
class | определяет имя используемого класса |
dir | определяет направление символов:
|
id | уникальный индетификатор |
lang | определяет используемый язык в документе, на который указывает ссылка |
onclick | щелчек на элементе |
ondblclick | двойной щелчек на элементе |
onkeydown | нажатие клавиши, когда элемент имеет фокус |
onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
onmousemove | движение указателя мыши, когда элемент имеет фокус |
onmouseout | смещение указателя мыши с элемента |
onmouseover | помещение указателя мыши на элемент |
onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
style | задает встроенную таблицу стилей |
title | всплывающая подсказка |
Пример
Дорогу переходим на <span>зеленый</span> сигнал светофора!