Тег спан в html: Тег div и тег span – Тег | HTML справочник

Тег span — Уроки по созданию сайтов на WordPress

Тег <span>

Описание

Тег <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>Р</span>азумные люди приспосабливаются к окружающему миру. 
  Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется 
  действиями неразумных людей.</p> 
  <p>Бернард Шоу</p>
 
 </body>
</html>

<!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>Р</span>азумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей.</p> <p>Бернард Шоу</p> </body> </html>

Результат данного примера показан ниже.

Рис. 1

Рис. 1. Вид текста, оформленного с помощью тега <span> и стилей

 

Атрибут span | HTML | WebReference

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

Синтаксис

<col span="<число>">

Значения

Целое положительное число.

Значение по умолчанию

Пример

<!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>&nbsp;</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>

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 19.03.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Тeги «div» и «span»

Здравствуйте уважаемые начинающие веб-мастера.

Эту часть мы начнём со знакомства с двумя новыми тегами. Это теги <div> и <span>. Принадлежат они к логическому уровню, то есть явно себя не проявляют.

Но, при их помощи, можно создавать контейнеры, на которые потом очень удобно воздействовать средствами CSS.

Их можно делать видимыми и не видимыми, можно задавать им рамки и размещать в различных частях экрана.

Вы это поймёте на практике, а пока запомним следующее: <div></div> – это блочный элемент, и внутри него могут заключаться любые другие элементы, и он всегда начинается с новой строки.

А <span></span> – это встроенный элемент, и внутри его может размещаться только текст, или ещё встроенный элемент, и расположить его можно в любой части текста.

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

Именно благодаря этой особенности, и создаётся блочный каркас сайта.

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

<body>
<div>
    <div></div>
    <div></div>
        <div>
            <div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    <div></div>

    <div></div>
</div>
</body>
</html>

Чтобы не сбиться, и для каждого открывающего тега, не пропустить закрывающий, и не запороть тем самым весь код, сначала нужно написать пару <div></div>, а затем, между ними вставлять содержимое тега.

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

В примере показано, что блоку с идентификатором (id) wrapper заданы ширина, временная рамка, внутренние и внешние отступы, и позиционирование.

#wrapper{
  width: 900px;
  outline: 1px solid #787274;
  padding: 10px;
  margin: 0 auto;
  position:relative;
}

Тег <span></span> в основном применяется для выделения каких либо частей текста, путём подключения к нему встроенных стилей.

В примере показано, как при помощи тега <span>, можно покрасить слово head в синий цвет.

Тег<span><head></span> — голова документа

Тег<head> — голова документа

К цвету можно добавить размер, вид шрифта, и так далее.

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

Короткий отдых
Перемена

Постоялец — хозяйке отеля:
— А что это за странное пятно на потолке у меня в комнате?
— Понимаете, до вас тут жил один химик. . .
— Это пятно от химикатов?
— Нет, от химика.

Подключение таблиц стилей < < < В раздел > > > Селекторы CSS

 

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

span — Xiper.net

Автор: Евгений Рыжков Дата публикации: 16.01.2009

Тег <span> — тег-контейнер, не имеет логического значения, используется в основном для оформления и/или назначения уникального идентификатора (id) определенному фрагменту текста.
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<span>...</span>

Атрибуты

Основные Вспомогательные События

align выраванивание текста
  • left — выравнивание по левой границе (по умолчанию)
  • center — выравнивание по центру
  • right — выравнивание по правой границе
  • justify — выравнивание по ширине
class определяет имя используемого класса
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
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> Сделай код и жми тут

Результат:
большой полигон

По теме

Применение тегов Div и Span (примеры кода)

<div> и <span> применяются вместе с каскадными таблицами стилей. По отдельности они не вызывают больших изменений. Факт в том, что тег <span> вообще не влияет визуально на контент. Использование тега <div> приведет к «блокировке» его содержимого, как если бы вы поставили тег <br> до и после секции на странице.

Как и большинство остальных тегов, <div> и <span> могут иметь класс, идентификатор и стилевые атрибуты. Благодаря этим атрибутам стили можно применять к элементам. Теги применяются таким же способом, как и другие HTML-теги. Допускается вложенность одних тегов в другие в несколько уровней.

Образец кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div and Span</title>
</head>
<body>
<div>
This text appears in the
 <span>upper-left hand corner</span>
 of the page.<br />
 It also has a big blue groovy border around it.
</div>
</body>
</html>

Упражнение: Div и Span

Продолжительность задачи: от 10 до 20 мин.

Это упражнение научит вас как добавлять классы (class) и атрибуты идентификаторов (id) тегам div и span HTML-страницы, которые уже существуют. HTML-страница уже имеет встроенную таблицу стилей, которая должна оставаться без изменений. Ваша задача состоит в том, чтобы сделать так, что страница выглядит как следует.

Никаких подробных инструкций. Просто анализируйте правила во встроенной таблице стилей, используйте классы и идентификаторы id и соответствующим образом применяйте их.

Единицы измерений

В CSS вы можете определять размер шрифта, границ (рамок), полей и отступов, используя различные единицы измерений. Ознакомьтесь с таблицей ниже, где указаны различные единицы:

Единица измеренийОписаниеПример
pxПикселиmargin-top: 10px;
ptПунктыfont-size: 12pt;
inДюймыpadding-top: .5in;
cmСантиметрыtop: 5cm;
mmМиллиметрыleft: 45mm;
pcПикаbottom: 12pc;
emEmfont-size: 1.5em;
exExfont-size: 1.5ex;
%Процентыwidth: 80%;

Пиксели (px)

Единица измерений, которая наиболее часто используется в веб-дизайне, — это пиксели. В отличие, например, от дюймов и пунктов, пиксель не является абсолютной величиной. Окончательный размер пикселя определяется размером и разрешением экрана пользователя.

Представьте себе картину шириной 900 пикселей. Если установленное разрешение монитора 800 на 600 пикселей, изображение не поместится на экране. Но если на том же мониторе установлено разрешение 1024 на 768 пикселей, картинка поместится и останется немного пространства.

Типографский пункт (pt)

Пункты должны использоваться для печати. Один дюйм равен 72 пунктам.

Дюймы (in), сантиметры (cm), миллиметры (mm)

Несмотря на то, что это одни из самых распространенных единиц измерений, в веб-дизайне лучше их не использовать.

Пики (pc)

Пика (Picas) — единица измерений, которая используется для печати. Один дюйм равен 6 пикам.

Em (em)

Em, или Мутт, — это относительная единица измерений, определяющая размер буквы «М» в шрифте. Поскольку em — величина относительная, а не абсолютное значение, она часто используется в веб-дизайне.

Ex (em)

Ex, или “x-высота”, определяет высоту строчной «x» шрифта. Ex применяется для установки размера контента в зависимости от размера окружающего шрифта.



Оцени статью

Оценить

Средняя оценка / 5. Количество голосов:

Спасибо, помогите другим — напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

Напишите комментарий, что можно добавить к статье, какой информации не хватает.

Отправить

Спасибо за ваши отзыв!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *