Элементы HTML | Учебные курсы
Если мы посмотрим на код HTML, то увидим, что помимо самого текста, который выводится в браузере, код содержит несколько команд в угловых скобках (к примеру, <h2>). Такие команды называются элементами HTML и состоят из нескольких частей: открывающего тега, содержимого и закрывающего тега (рис. 1).
Рис. 1. Элемент <h2>
Открывающий тег показывает начало элемента и может содержать или не содержать атрибуты, которые расширяют возможности элемента (об атрибутах расскажем позже). Каждый тег начинается с открывающей угловой скобки, затем идёт имя элемента и закрывающая угловая скобка (<p>). Теги можно писать в нижнем и верхнем регистре, иными словами, маленькими, большими буквами или произвольно смешивать их. Все варианты написания ниже корректны.
- <article>
- <ARTICLE>
- <Article>
Хотя теги можно писать в любом регистре и это с точки зрения синтаксиса HTML будет правильно, рекомендуем придерживаться единообразия и писать все теги маленькими буквами. Так повышается читаемость кода и снижается вероятность возникновения ошибок.
После содержимого элемента идёт закрывающий тег, в котором вместе с открывающей угловой скобкой есть косая черта (</p>). По закрывающему тегу мы определяем, что элемент завершён.
Некоторые элементы не содержат закрывающего тега и такие элементы называются самозакрывающими. Естественно, у них нет и содержимого. Вот пример.
<meta charset="utf-8">
Узнать, к какому типу относится элемент и является ли он самозакрывающим, можно в справочнике HTML.
Итак, каждый элемент содержит открывающий тег и может включать содержимое и закрывающий тег. Порядок открывающих и закрывающих тегов важен и его нельзя нарушать.
Правильные варианты:
- <p>Абзац текста</p>
- <h2>Заголовок</h2>
- <article>Статья</article>
Неправильные варианты:
- <h2>Заголовок <!— Нет закрывающего тега —>
- </p>Абзац<p> <!— Перепутан порядок тегов —>
- <meta charset=»utf-8″></meta> <!— Ненужный закрывающий тег —>
Комментарии в HTML
В коде HTML разработчик может писать свои комментарии, которые никак не отображаются в браузере. Такие комментарии нужны для пояснения своего кода и для заметок себе и другим разработчикам. Комментарий начинается с <!— и закрывается —>. Всё что находится между этими тегами является комментарием и выводиться в браузере не будет.
В примере 1 показан типичный HTML-документ.
Пример 1. HTML-документ
<!DOCTYPE html> <html> <head> <!-- Кодировка документа --> <meta charset="utf-8"> <!-- Название страницы --> <title>Моя веб-страница</title> </head> <body> <h2>Заголовок страницы</h2> <p>Основной текст.</p> </body> </html>
В данном примере используются элементы <html>, <head>, <title>, <body>, <p> и самозакрывающие элементы <!doctype> и <meta>.
Вложения элементов
Одни элементы допустимо вкладывать внутрь других, однако следует соблюдать их порядок. На рис. 2 демонстрируется, как можно и нельзя добавлять один элемент внутрь другого.
а
б
Рис. 2. Вложение тегов, а — правильное, б — неверное
Если связать открывающие и закрывающие теги между собой скобкой, как показано на рис. 2, то несколько скобок не должны пересекаться между собой (рис. 2а). Любое пересечение условных скобок (рис. 2б) говорит о том, что правильная последовательность тегов нарушена.
Перейти к заданиям
Элементы HTML — это… Что такое Элементы HTML?
Эта статья посвящена в основном элементам HTML. Чтобы узнать о формате элементов Википедии, см. Википедия:Как редактировать статью и m:Помощь:HTML в викитексте
Элемент HTML — это основная структурная единица веб-страницы, написанная на языке HTML
Структура HTML-документа
HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот пример части разметки HTML-документа:
<p>Текст между двумя тегами - открывающим и закрывающим.</p> <a href="http://www.example.com">Здесь элемент содержит атрибут href.</a> А вот пример пустого элемента: <br>
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит примерно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.
Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.
Варианты DOCTYPE для HTML 4.01
- Строгий (Strict): не содержит тегов, помеченных как «устаревшие» или «не одобряемые» (deprecated).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
DOCTYPE для HTML 5
В отличие от предыдущих версий тег всего один [1]
Основные элементы («теги»)
Теги и их параметры нечувствительны к регистру. То есть <A HREF=»http://yahoo.com»> и <a href=»http://yahoo.com»> означают одно и то же.
В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.
Гиперссылки
<A HREF="filename" target="_self">название ссылки</A>
- Атрибут
HREF
задает значение адреса документа, на который указывает ссылка. filename
— имя файла или адрес Internet, на который необходимо сослаться.название ссылки
— название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашел на страницу.TARGET
— задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:_top
— открытие документа в текущем окне;_blank
— открытие документа в новом окне;_self
— открытие документа в текущем фрейме;_parent
— открытие документа в родительском фрейме.
Значение по умолчанию: _self.
Текстовые блоки
<h2> … </h2>
,<h3> … </h3>
, … ,<H6> … </H6>
— заголовки 1, 2, … 6 уровня. Используются для выделения частей текста (заголовок 1 — самый большой, 6 — почти равен обычном тексту по умолчанию).<P>
— новый абзац. Можно в конце абзаца поставить</P>
, но это не обязательно.<BR>
— новая строка. Этот тег не закрывается (то есть не существует тега</BR>
)<HR>
— горизонтальная линия<BLOCKQUOTE> … </BLOCKQUOTE>
— цитата. Обычно текст сдвигается вправо.-
<PRE> … </PRE>
— режим preview. В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе). <DIV> … </DIV>
— блок (обычно используется для применения стилей CSS)<SPAN> … </SPAN>
— строка (обычно используется для применения стилей CSS)
Форматирование текста
<EM> … </EM>
— логическое ударение (обычно отображается курсивным шрифтом)<STRONG> … </STRONG>
— усиленное логическое ударение (обычно отображается жирным шрифтом)<I> … </I>
— выделение текста курсивом<B> … </B>
— выделение текста жирным шрифтом<U> … </U>
— подчёркивание текста<S> … </S>
<STRIKE> … </STRIKE>
)—зачёркиваниетекста<BIG> … </BIG>
— увеличение шрифта<SMALL> … </SMALL>
— уменьшение шрифта<BLINK> … </BLINK>
— мигающий текст. Внимание! Этот тег не работает в браузере Internet Explorer версий 5 и ниже без применения JavaScript<MARQUEE> … </MARQUEE>
— сдвигающийся по экрану текст.<SUB> … </SUB>
— подстрочный текст. Например, H<SUB>2</SUB>O
создаст текст H2O.<SUP> … </SUP>
— надстрочный текст. Например, E=mc<SUP>2</SUP>
создаст текст E=mc2.<FONT параметры> … </FONT>
— задание параметров шрифта. У этого тега есть следующие параметры:- COLOR=color — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.
- FACE=шрифт задание гарнитуры шрифта
- SIZE=размер задание размера шрифта. Размер от 1 до 7: стандартный по умолчанию 3. Есть много способов изменить стандартный размер.
- SIZE=+изменение или SIZE=-изменение — изменение размера шрифта от стандартного. Например, +2 означает размер на 2 больше стандартного.
Так, например,
Сигналом к началу атаки являются <U>три</U> <FONT SIZE="+2">больших</FONT> <FONT COLOR="green">зелёных</FONT> свистка.
создаст текст
- Сигналом к началу атаки являются три больших зелёных свистка.
Списки
<UL> <LI> первый элемент </LI> <LI> второй элемент </LI> <LI> третий элемент </LI> </UL>
создаёт список
- первый элемент
- второй элемент
- третий элемент
Если вместо <UL>
(Unordered List — ненумерованный список) поставить <OL>
(Ordered List — нумерованный список), список получится нумерованным:
- первый элемент
- второй элемент
- третий элемент
У этих тегов есть параметры:
type = "тип"
где тип — форма: в <UL>
— символов
- square — квадрат
- round — окружность
- disk — круг: по умолчанию
а в <OL>
— цифр или букв
- A или а (латинскими буквами) — буквенный список: соответственно заглавными или строчными буквами
- I или i — римские цифры: соответственно заглавными или строчными буквами
- 1 — арабские цифры: по умолчанию
пишется так:
<ol type="i"> <li> Первое </li> <li> Второе </li> <li> И т.д. </li> </ol>
и создаст следующее:
- Первое
- Второе
- И т.д.
Параметр start = «начало» (только для <OL>
), определяющий начало нового отсчёта: например, если нужно не 1, 2, 3, а 24, 25, 26
Пишется так:
<ol start="24"> <li> Двадцать четыре </li> <li> Двадцать пять </li> <li> И т.д. </li>
и создаст следующее:
- Двадцать четыре
- Двадцать пять
- И т.д.
и, наконец для тега <LI>
параметр value = «следующий» — если необходимо перескочить с одной цифры на другую: например, не 1, 2, 3, 4, а 1, 2, 22, 23
<ol> <li> Один </li> <li> Два </li> <li value="22"> Двадцать два </li> <li> Двадцать три </li>
создаст следующее:
- Один
- Два
- Двадцать два
- Двадцать три
Наконец, третьим, и последним, списком является список определений:
<DL> <DT> Кошка </DT> <DD> мяукающее домашнее животное </DD> <DT> Кот </DT> <DD> муж кошки </DD> <DT> Крокодил </DT> <DD> большой африканский зверь с острыми зубами </DD> </DL>
создаст следующее:
- Кошка
- мяукающее домашнее животное
- Кот
- муж кошки
- Крокодил
- большой африканский зверь с острыми зубами
Между прочим, теги <LI>
, <DT>
, <DD>
можно и не закрывать.
Объекты
- EMBED — вставка различных объектов: не-HTML документов и media-файлов
- APPLET — вставка Java-апплетов
- SCRIPT — вставка скриптов.
Изображения
- IMG — вставка изображения. Этот тег не закрывается.
- SRC — имя или URL
- ALT — альтернативное имя (отобразится, если в браузере запретить отображать картинки)
- TITLE — краткое описание изображения (отобразится при наведении курсора на картинку)
- WIDTH, HEIGHT — размеры (если не совпадают с истинными размерами картинки, то изображение «растянется»/«сожмется»)
- ALIGN — задает параметры обтекания текстом (top, middle, bottom, left, right)
- VSPACE, HSPACE — задают размеры вертикального и горизонтального пространства вокруг изображения
Пример:
<IMG SRC=url ALT="текст" TITLE="текст">
Изображение можно сделать ссылкой:
<A HREF=url ><IMG SRC=url></A>
Таблицы
- TABLE — создание таблицы. Параметры тега:
- BORDER — толщина разделительных линий в таблице
- CELLSPACING — расстояние между клетками
- CAPTION — заголовок таблицы (этот тег необязателен)
- TR — строка таблицы
- TH — заголовок столбца таблицы (этот тег необязателен)
- TD — ячейка таблицы
- height — высота таблицы
- width — ширина таблицы
Так, например,
<TABLE BORDER="1" CELLSPACING="0"> <CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION> <TH> Год </TH> <TH> Улов </TH> <TR> <TD> 1997 </TD> <TD> 214 </TD> </TR> <TR> <TD> 1998 </TD> <TD> 216 </TD> </TR> <TR> <TD> 1999 </TD> <TD> 207 </TD> </TR> </TABLE>
Создаст таблицу:
Улов крокодилов в Мумбе-Юмбе Год Улов 1997 214 1998 216 1999 207
У тега TABLE есть ещё параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и её содержимым. Например, если заменить первую строку таблицы на
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">
таблица получится такой:
Улов крокодилов в Мумбе-Юмбе Год Улов 1997 214 1998 216 1999 207
Другой параметр тегов TABLE, TR, TH, TD — ALIGN. Он определяет выравнивание. Возможные значения — center (по центру), left (по левому краю), right (по правому краю).
Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR — для содержимого всех ячеек строки, TABLE — для самой таблицы на страничке. Для каждой ячейки берётся выравнивание из TD или TH, если оно не задано — из TR, если и оно не задано — по центру для TH или по левому краю для TD.
Например, если заменить первые строки таблицы на
<TABLE BORDER="1" CELLSPACING="0" ALIGN="center"> <CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION> <TH> Год </TH> <TH> Улов </TH> <TR> <TD> 1997 </TD> <TD ALIGN="CENTER"> 214 </TD>
таблица получится такой:
Улов крокодилов в Мумбе-Юмбе Год Улов 1997 214 1998 216 1999 207
Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе с вложенными таблицами.
Формы
Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.
- FORM — создание формы
- INPUT — элемент ввода (может иметь разные функции — от ввода текста до отправки формы)
- TEXTAREA — текстовая область (многострочное поле для ввода текста)
- SELECT — список (обычно в виде выпадающего меню)
- OPTION — пункт списка
Символы
Чтобы создать символ, необязательно искать его на клавиатуре. Можно просто набрать тег (например, чтобы получить ¢, надо набрать следующее: ¢
). Пробел — , ударение — ́ и т. д.
Названия цветов
В HTML определены следующие цвета.
Название | Шестнадцатеричный цвет |
---|---|
black | #000000 |
silver | #c0c0c0 |
maroon | #800000 |
red | #ff0000 |
navy | #000080 |
blue | #0000ff |
purple | #800080 |
fuchsia | #ff00ff |
green | #008000 |
lime | #00ff00 |
olive | #808000 |
yellow | #ffff00 |
teal | #008080 |
aqua | #00ffff |
gray | #808080 |
white | #ffffff |
Основные символы
Код | Символ | Смысл |
---|---|---|
< | < | |
> | > | |
& | & | |
| неразрывный пробел (на этом пробеле не переводится строка) | |
§ | § | |
№ | № | |
© | © | копирайт (copyright) |
® | ® | зарегистрированный товарный знак (registered trademark) |
™ | ™ | товарный знак (trademark) |
° | ° | градусы |
« | « | открывающая кавычка в русском языке |
» | » | закрывающая кавычка в русском языке |
… | … | многоточие |
— | — | тире |
• | • | жирная точка |
± | ± | плюс-минус |
− | − | минус |
Клавиатурные символы ‘ и « в русском языке кавычками не являются. Также неправильно на сайтах заменять №, ©, ®, ™, °C на N, (c), (R), TM, C.
Дефис, тире и минус — три разных знака.
- Клавиатурный символ — называется дефис и используется внутри слов.
- Минус шире дефиса. Он используется для записи отрицательных чисел и операции вычитания.
- Тире ещё шире, чем минус. Оно используется между словами и отбивается пробелами. Для обозначения числовых интервалов тоже используется тире, но пробелами не отбивается.
В электронной переписке, чатах и форумах все эти упрощения допустимы: можно заменять тире и минусы дефисами, знак номера на N, кавычки теми, что есть на клавиатуре и т. д.
Символы <, > и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл.
Большинство спецсимволов см. на сайте about.com.
Элементы HTML — Википедия. Что такое Элементы HTML
Эта статья посвящена в основном элементам HTML. Чтобы узнать о формате элементов Википедии, см. Википедия:Как редактировать статью и m:Help:HTML in wikitext/ru
Элемент HTML — это основная структурная единица веб-страницы, написанная на языке HTML.
Структура HTML-документа
HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br/>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот пример части разметки HTML-документа:
<p>Текст между двумя тегами - открывающим и закрывающим.</p> <a href="http://www.example.com">Здесь элемент содержит атрибут href.</a> А вот пример пустого элемента: <br>
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит примерно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.
Далее обозначается начало и конец документа тегами <html>
и </html>
соответственно.
Внутри этих тегов должны находиться теги заголовка (<head></head>
) и тела (<body></body>
) документа.
Варианты DOCTYPE для HTML 4.01
- Строгий (Strict): не содержит тегов, помеченных как «устаревшие» или «не одобряемые» (deprecated).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
DOCTYPE для HTML 5
В отличие от предыдущих версий тег всего один [1]
Основные элементы
Теги и их параметры нечувствительны к регистру. То есть <A HREF=»http://example.com»> и <a href=»http://example.com»> означают одно и то же.
В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.
Гиперссылки
<a href="filename" target="_self">название ссылки</a>
- Атрибут
href
задаёт значение адреса документа, на который указывает ссылка. filename
— имя файла или адрес Internet, на который необходимо сослаться.название ссылки
— название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашёл на страницу.target
— задаёт значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:_top
— открытие документа в текущем окне;_blank
— открытие документа в новом окне;_self
— открытие документа в текущем фрейме;_parent
— открытие документа в родительском фрейме.
Значение по умолчанию: _self
.
Якорь
Тот же элемент используется для создания так называемых «якорей» (anchor), которые могут потом использоваться в гиперссылках, направленных на какой-то определённый элемент страницы. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Якорь внутри документа</title> </head> <body> <p><a name="top"></a></p> <p>текст</p> <p><a href="#top">Наверх</a></p> </body> </html>
Аналогичным образом якорь можно сделать на закладку, находящуюся на другой веб-странице или на другом сайте: там, куда направлена ссылка, должен стоять <a name="xxx"></a>
, а там, откуда идёт ссылка, к значению href
добавляется знак решётки и название якоря.
Так-же якорем в современных браузерах может служить id любого элемента.
Текстовые блоки
<h2> … </h2>
,<h3> … </h3>
, … ,<H6> … </H6>
— заголовки 1, 2, … 6 уровня. Используются для выделения частей текста (заголовок 1 — самый крупный, 6 — самый мелкий).<P>
— новый абзац. Можно в конце абзаца поставить</P>
, но это не обязательно.<BR>
— новая строка. Этот тег не закрывается (то есть не существует тега</BR>
)<HR>
— горизонтальная линия<BLOCKQUOTE> … </BLOCKQUOTE>
— цитата. Обычно текст сдвигается вправо.<PRE> … </PRE>
— режим preview (preformatted text). Пробельные символы остаются там, где они есть в оригинальном документе (в других тегах игнорируются). Внутри могут обрабатываться внутристроковые теги кроме img, object, big, small, sup и sub.<DIV> … </DIV>
— блок (обычно используется для применения стилей CSS)<SPAN> … </SPAN>
— строка (обычно используется для применения стилей CSS)
Форматирование текста
<EM> … </EM>
— логическое ударение (обычно отображается курсивным шрифтом)<STRONG> … </STRONG>
— усиленное логическое ударение (обычно отображается жирным шрифтом)<I> … </I>
— выделение текста курсивом<B> … </B>
— выделение текста жирным шрифтом<U> … </U>
— подчёркивание текста<S> … </S>
(или<STRIKE> … </STRIKE>
)—зачёркиваниетекста<BIG> … </BIG>
— увеличение шрифта<SMALL> … </SMALL>
— уменьшение шрифта<BLINK> … </BLINK>
— мигающий текст. Внимание! Этот тег не работает в браузере Internet Explorer версий 5 и ниже без применения JavaScript<MARQUEE> … </MARQUEE>
— сдвигающийся по экрану текст.<SUB> … </SUB>
— подстрочный текст. Например, H<SUB>2</SUB>O
создаст текст H2O.<SUP> … </SUP>
— надстрочный текст. Например, E=mc<SUP>2</SUP>
создаст текст E=mc2.<FONT параметры> … </FONT>
— задание параметров шрифта. У этого тега есть следующие параметры:COLOR=цвет
— задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.FACE=шрифт
задание гарнитуры шрифтаSIZE=размер
задание размера шрифта. Размер от 1 до 7: стандартный по умолчанию 3. Есть много способов изменить стандартный размер.SIZE=+изменение
илиSIZE=-изменение
— изменение размера шрифта от стандартного. Например, +2 означает размер на 2 больше стандартного.
Например,
Сигналом к началу атаки являются <U>три</U> <FONT SIZE="+2">больших</FONT> <FONT COLOR="green">зелёных</FONT> свистка.
создаст текст
Сигналом к началу атаки являются три больших зелёных свистка.
Списки
<UL> <LI> первый элемент </LI> <LI> второй элемент </LI> <LI> третий элемент </LI> </UL>
создаёт список
- первый элемент
- второй элемент
- третий элемент
Если вместо <UL>
(Unordered List — ненумерованный список) поставить <OL>
(Ordered List — нумерованный список), список получится нумерованным:
- первый элемент
- второй элемент
- третий элемент
У этих тегов есть параметры:
type = "тип"
где тип — форма:
в <UL>
— символов
square
— квадратcircle
— окружностьdisk
— круг: по умолчанию
а в <OL>
— цифр или букв
- A или а (латинскими буквами) — буквенный список: соответственно заглавными или строчными буквами
- I или i — римские цифры: соответственно заглавными или строчными буквами (римскими цифрами отображаются числа с 1 по 3999, остальные — арабскими)
- 1 — арабские цифры: по умолчанию
пишется так:
<ol type="i"> <li> Первое </li> <li> Второе </li> <li> И т.д. </li> </ol>
и создаст следующее:
- Первое
- Второе
- И т. д.
Параметр start=»начало» (только для <OL>
), определяющий начало нового отсчёта: например, если нужно не 1, 2, 3, а 24, 25, 26
Пишется так:
<ol start="24"> <li> Двадцать четыре </li> <li> Двадцать пять </li> <li> И т.д. </li>
и создаст следующее:
- Двадцать четыре
- Двадцать пять
- И т. д.
и, наконец для тега <LI>
параметр value
="следующий"
— если необходимо перескочить с одной цифры на другую: например, не 1, 2, 3, 4, а 1, 2, 22, 23
<ol> <li> Один </li> <li> Два </li> <li value="22"> Двадцать два </li> <li> Двадцать три </li>
создаст следующее:
- Один
- Два
- Двадцать два
- Двадцать три
Наконец, третьим, и последним, списком является список определений:
<DL> <DT> Кошка </DT> <DD> мяукающее домашнее животное </DD> <DT> Кот </DT> <DD> муж кошки </DD> <DT> Крокодил </DT> <DD> большой африканский зверь с острыми зубами </DD> </DL>
создаст следующее:
- Кошка
- мяукающее домашнее животное
- Кот
- муж кошки
- Крокодил
- большой африканский зверь с острыми зубами
Между прочим, теги <LI>
, <DT>
, <DD>
можно и не закрывать.
Различия в отображении нумерованных списков
При неположительных значениях в нумерации браузеры ведут себя по-разному. Например, Internet Explorer игнорирует value=0
, value=-1
и т.д., другие же браузеры, как Chrome, Firefox, отображают заданное значение. При этом Internet Explorer не игнорирует start=0
, start=-1
и т.д., т.е. начать список с неположительного значения он может, но перескочить в нумерации на неположительное значение не может.
HTML-разметка | Данный браузер | Chrome, Firefox | Internet Explorer |
---|---|---|---|
<ol start=-2><li><li value=0><li value=2></ol> |
-2, 0, 2 | -2, -1, 2 |
В буквенном списке (type=A
или type=a
) неположительные значения одни браузеры, как Chrome, Firefox, отображают цифрами, а Internet Explorer (в режиме Quirks mode, т.е. если на странице не указана версия HTML 4.01 или 5 в тэге !DOCTYPE HTML
) отрицательные значения отображает буквами со знаком “минус”, а ноль — символом @.
HTML-разметка | Данный браузер | Chrome, Firefox | Internet Explorer (Quirks mode) |
---|---|---|---|
<ol type=A start=-1><li><li><li></ol> |
-1, 0, A | -A, @, A |
Пустое или нечисловое значение (value=
, value=A
, value=B
) одни браузеры, как Chrome, Firefox, игнорируют, а Internet Explorer воспринимает как value=1
.
HTML-разметка | Данный браузер | Chrome, Firefox | Internet Explorer |
---|---|---|---|
<ol start=-2><li><li value=B><li value=2></ol> |
-2, -1, 2 | -2, 1, 2 |
Имеются различия при отображении чисел римскими цифрами (type=I
или type=i
), т.к. Internet Explorer (в режиме Quirks mode, т.е. если на странице не указана версия HTML 4.01 или 5 в тэге !DOCTYPE HTML
) некоторые числа отображает неправильно.
HTML-разметка | Данный браузер | Chrome, Firefox | Internet Explorer (Quirks mode) |
---|---|---|---|
<ol type=I start=3300><li><li><li><li></ol> |
MMMCCC MMMCCCI MMMCCCII MMMCCCIII |
MMMCCC MMMCCC MMMCCC MMMCCC |
Все числа из интервала с 1 по 1880 Internet Explorer отображает правильно, а из интервала с 1881 по 3999 — не все. Для 603 чисел, 67 групп по 9 чисел (xxx1—xxx9), в запись римскими цифрами не попадает младшая цифра. И это, скорее всего, не для того, чтобы укоротить длинную запись, т.к. 3888 — число с самой длинной (в интервале с 1 по 3999) записью римскими цифрами (MMMDCCCLXXXVIII) — отображается правильно.
В таблице крестиком отмечены группы неправильно отображаемых в Internet Explorer (в режиме Quirks mode) чисел:
01-09 | 11-19 | 21-29 | 31-39 | 41-49 | 51-59 | 61-69 | 71-79 | 81-89 | 91-99 | |
1800 | ✘ | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
2300 | ✘ | ✘ | ✘ | |||||||
2700 | ✘ | ✘ | ✘ | |||||||
2800 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | |
3100 | ✘ | |||||||||
3200 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | |||
3300 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | |
3400 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | |||
3500 | ✘ | |||||||||
3600 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | |||
3700 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | |
3800 | ✘ | ✘ | ✘ | |||||||
3900 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ |
Объекты
EMBED
— вставка различных объектов: не-HTML документов и media-файловAPPLET
— вставка Java-апплетовSCRIPT
— вставка скриптов.
Изображения
IMG
— вставка изображения. Этот тег не закрывается.SRC
— имя или URLALT
— альтернативное имя (отобразится, если в браузере запретить отображать картинки)TITLE
— краткое описание изображения (отобразится при наведении курсора на картинку)WIDTH
,HEIGHT
— размеры (если не совпадают с истинными размерами картинки, то изображение «растянется» или «сожмётся»)ALIGN
— задаёт параметры обтекания текстом (top, middle, bottom, left, right)VSPACE
,HSPACE
— задают размеры вертикального и горизонтального пространства вокруг изображения
Пример:
<IMG SRC=url ALT="текст" TITLE="текст">
Изображение можно сделать ссылкой:
<A HREF=url ><IMG SRC=url></A>
Карта изображений
<MAP>…
</MAP>
— создание карты изображений позволяющей хранить в одном изображении несколько ссылок.
Пример:
<IMG usemap="#somemap" src="url"> <MAP name="somemap"> <AREA shape="rect" coords="6, 7, 140, 196" href="url1"> <AREA shape="circle" coords="239, 98, 92" href="url2"> <AREA shape="polygon" coords="386,16, 344,56, 350,189, 385,132, 489,190, 496,74" href="url3"> </MAP>
Таблицы
TABLE
— создание таблицы. Параметры тега:BORDER
— толщина разделительных линий в таблицеCELLSPACING
— расстояние между клеткамиCELLPADDING
— отступ от рамки до содержимого ячейки.
CAPTION
— заголовок таблицы (этот тег необязателен)TR
— строка таблицыTH
— заголовок столбца таблицы (этот тег необязателен)TD
— ячейка таблицыheight
— высота таблицыwidth
— ширина таблицы
Так, например,
<TABLE BORDER="1" CELLSPACING="0"> <CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION> <TH> Год </TH> <TH> Улов </TH> <TR> <TD> 1997 </TD> <TD> 214 </TD> </TR> <TR> <TD> 1998 </TD> <TD> 216 </TD> </TR> <TR> <TD> 1999 </TD> <TD> 207 </TD> </TR> </TABLE>
Создаст таблицу:
Улов крокодилов в Мумбе-Юмбе Год Улов 1997 214 1998 216 1999 207
У тега TABLE есть ещё параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и её содержимым. Например, если заменить первую строку таблицы на
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">
таблица получится такой:
Улов крокодилов в Мумбе-Юмбе Год Улов 1997 214 1998 216 1999 207
Другой параметр тегов TABLE
, TR
, TH
, TD
— ALIGN
. Он определяет выравнивание. Возможные значения — center
(по центру), left
(по левому краю), right
(по правому краю).
Параметр ALIGN
в TD
или TH
определяет выравнивание для содержимого внутри данной ячейки, в TR
— для содержимого всех ячеек строки, TABLE
— для самой таблицы на страничке. Для каждой ячейки берётся выравнивание из TD
или TH
, если оно не задано — из TR
, если и оно не задано — по центру для TH
или по левому краю для TD
.
Например, если заменить первые строки таблицы на
<TABLE BORDER="1" CELLSPACING="0" ALIGN="center"> <CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION> <TH> Год </TH> <TH> Улов </TH> <TR> <TD> 1997 </TD> <TD ALIGN="CENTER"> 214 </TD>
таблица получится такой:
Улов крокодилов в Мумбе-Юмбе Год Улов 1997 214 1998 216 1999 207
Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе со вложенными таблицами.
Формы
Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.
FORM
— создание формыINPUT
— элемент ввода (может иметь разные функции — от ввода текста до отправки формы)TEXTAREA
— текстовая область (многострочное поле для ввода текста)SELECT
— список (обычно в виде выпадающего меню)OPTION
— пункт списка
Символы
Чтобы создать символ, необязательно искать его на клавиатуре: можно просто набрать тег; например, чтобы получить ¢, надо набрать ¢
, неразрывный пробел —
, ударение — ́
и т. д.
Названия цветов
В HTML определены следующие цвета.
Название | Шестнадцатиричный цвет |
---|---|
black | #000000 |
silver | #c0c0c0 |
maroon | #800000 |
red | #ff0000 |
navy | #000080 |
blue | #0000ff |
purple | #800080 |
fuchsia | #ff00ff |
green | #008000 |
lime | #00ff00 |
olive | #808000 |
yellow | #ffff00 |
teal | #008080 |
aqua | #00ffff |
gray | #808080 |
white | #ffffff |
Основные символы
Код | Символ | Смысл |
---|---|---|
< | < | меньше |
> | > | больше |
& | & | амперсанд |
| неразрывный пробел (на этом пробеле строка не разрывается для переноса) | |
§ | § | параграф |
№ | № | номер |
© | © | копирайт (copyright) |
® | ® | зарегистрированный товарный знак (registered trademark) |
™ | ™ | товарный знак (trademark) |
° | ° | градусы |
« | « | открывающая кавычка в русском языке |
» | » | закрывающая кавычка в русском языке |
… | … | многоточие |
— | — | тире |
• | • | жирная точка |
± | ± | плюс-минус |
− | − | минус |
Клавиатурные символы ‘ и » в русском языке кавычками не являются. Также неправильно на сайтах заменять №, ©, ®, ™, °C на N, (c), (R), TM, C.
Дефис, тире и минус — три разных знака.
- Клавиатурный символ — называется дефис и используется внутри слов.
- Минус шире дефиса. Он используется для записи отрицательных чисел и операции вычитания.
- Тире ещё шире, чем минус. Оно используется между словами и отбивается пробелами, причём спереди — неразрывным. Для обозначения числовых интервалов тоже используется тире, но пробелами не отбивается.
Более подробно: Артемий Лебедев. Тире, минус и дефис, или Черты русской типографики. Ководство (15 января 2003). Архивировано 24 августа 2011 года.
В электронной переписке, чатах и форумах все эти упрощения допустимы: можно заменять тире и минусы дефисами, знак номера на N, кавычки теми, что есть на клавиатуре и т. д.
Символы <, > и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл. Для их отображения всегда используются <, > и & соответственно.
Большинство спецсимволов см. на сайте about.com.
Ссылки
HTML5 | Семейства элементов
165Веб-программирование — HTML5 — Семейства элементов
Ранее мы рассматривали изменения в синтаксисе HTML5. Но более важными являются добавления, удаления и изменения поддерживаемых в HTML элементов. В последующих разделах мы вкратце рассмотрим эти аспекты.
Добавленные элементы в HTML5
Новые элементы, с кратким описанием перечислены в таблице:
Категория | Элементы |
---|---|
Семантические элементы для работы со структурой страниц | <article>, <aside>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <nav>, <section>, <details>, <summary> |
Семантические элементы для работы с текстом | <mark>, <time>, <wbr> (поддерживался и ранее, но теперь официально является частью языка) |
Элементы для работы с веб-формами и интерактивности | <input> (старый элемент, но со многими новыми подтипами), <datalist>, <keygen>, <meter>, <progress>, <command>, <menu>, <output> |
Элементы для поддержки аудио, видео и подключаемых модулей | <audio>, <video>, <source>, <embed> (поддерживался и ранее, но теперь официально является частью языка) |
Поддержка холста | <canvas> |
Поддержка иных языков | <bdo>, <rp>, <rt>, <ruby> |
Удаленные элементы из HTML5
В HTML5 были не только добавлены новые элементы, но и несколько элементов были лишены официального родства с ним. Эти элементы будут работать в браузерах, но любой уважающий себя валидатор HTML5 обнаружит их и закатит по этому поводу скандал.
Самыми заметными шагами при удалении были те, что поддерживают продолжаемую в HTML5 философию (впервые введенную в XHTML): элементам оформления не место в языке. К таким элементам относятся элементы, используемые для форматирования веб-страниц, и даже самый «зеленый» веб-разработчик знает, что это работа для таблиц стилей. Удалены, среди прочих, были элементы оформления, которые не использовались профессиональными веб-разработчиками годами, такие как <big>, <center>, <font>, <tt> и <strike>. Атрибуты оформления HTML постигла та же судьба, поэтому нет надобности рассматривать их здесь.
Кроме этого, HTML5 вбил осиновый кол в погребенный веб-разработчиками инструмент фреймов. Когда инструмент фреймов HTML впервые увидел свет, он казался отличным способом для отображения нескольких веб-страниц в одном окне браузера. Но в настоящее время фреймы воспринимаются больше как кошмар доступности к веб-страницам, создающим проблемы для поисковых движков, вспомогательных приложений и мобильных устройств.
Но, что довольно интересно, элемент <iframe>, который позволяет вставлять одну страницу в другую, проскользнул в новый стандарт. Это ему удалось по той причине, что он используется в веб-страницах для выполнения ряда интеграционных задач, таких как вставка в страницы окон YouTube, рекламных блоков и поисковых полей Google.
Еще несколько элементов были удалены из-за того, что они просто предоставляли уже существующие возможности другим способом и были источником частых ошибок. Например, функцию элемента <acronym> лучше предоставляет элемент <abbr>, а элементу <applet> предпочтителен элемент <object>. Но подавляющее большинство элементов HTML было сохранено в HTML5.
Для любителей цифр, семейство HTML5 состоит немногим из более 100 элементов. Из них почти 30 новых и около 10 существенно измененных. Просмотреть список элементов (и узнать, какие из них новые или измененные) можно на веб-сайте w3.org/TR/html-markup/.
Адаптированные элементы HTML5
У HTML5 есть еще один интересный трюк — некоторые старые методы применяются с новой целью. Возьмем, например, элемент <small>, предназначенный для уменьшения размера шрифта в блоке текста. Будучи не самым оптимальным способом решения этой задачи, для которой лучше подходят таблицы стилей, этот элемент впал в немилость веб-разработчиков. Но в отличие от выброшенного элемента <big>, элемент <small> остался в HTML5, однако функция его несколько иная.
Теперь элемент <small> используется для обозначения так называемого «мелкого текста» — информации, которую не горят желанием предоставить, но которую нужно разместить согласно каким-либо требованиям. Например, предупреждение об отказе от ответственности, помещенное в самом низу сайта, наподобие следующего:
<small>Файлы для обмена предоставлены пользователями сайта. Администрация не несёт ответственности за их содержание.
На сервере хранятся только торрент-файлы. Это значит, что мы не храним никаких нелегальных материалов,
а так же материалов охра
HTML5 | Элементы группировки
Элементы группировки
Последнее обновление: 08.04.2016
Ряд элементов предназначен для группировки контента на веб-странице.
Элемент div
Элемент div служит для структуризации контента на веб-странице, для заключения содержимого в отдельные блоки. Div создает блок, который по умолчанию растягивается по всей ширине браузера, а следующий после div элемент переносится на новую строку. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Документ HTML5</title> </head> <body> <div>Заголовок документа HTML5</div> <div>Текст документа HTML5</div> </body> </html>
Параграфы
Параграфы создаются с помощью тегов <p> и </p>, которые заключают некоторое содержимое. Каждый новый параграф располагается на новой строке. Применим параграфы:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Документ HTML5</title> </head> <body> <div>Заголовок документа HTML5</div> <div> <p>Первый параграф</p> <p>Второй параграф</p> </div> </body> </html>
Если в рамках одного параграфа нам надо перенести текст на другую строку, то мы можем воспользоваться элементом <br>:
<p>Первая строка.<br/>Вторая строка.</p>
Элемент pre
Элемент pre выводит предварительно отформатированный текст так, как он определен:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Документ HTML5</title> </head> <body> <pre> Первая строка Вторая строка Третья строка </pre> </body> </html>
Элемент span
Элемент span обтекает некоторый текст по всей его длине и служит преимущественно для стилизации заключенного в него текстового содержимого. В отличие от
блоков div или параграфов span
не переносит содержимое на следующую строку:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Документ HTML5</title> </head> <body> <div>Заголовок документа HTML5</div> <div> <p><span>Первый</span> параграф</p> <p><span>Второй</span> параграф</p> </div> </body> </html>
При этом стоит отметить, что сам по себе span
ничего не делает. Так, во втором параграфе span
никак не повлиял на внутренне текстовое
содержимое. А в первом параграфе элемент span
содержит атрибут стиля: style="color:red;"
, который устанавливает для вложенного текста
красный цвет фона.
При этом стоит отметить, что элементы div
и p
являются блочными, элемент div может содержать любые другие элементы, а элемент p — только строчные элементы.
В отличие от них элемент span
является строчным, то есть как бы встраивает свое содержимое во внешний контейнер — тот же div или параграф. Но при
этом не следует помещать блочные элементы в строчный элемент span.
HTML5 | Элемент article
Элемент article
Последнее обновление: 08.04.2016
Элемент article представляет целостный блок информации на странице, который может рассматриваться отдельно и использоваться независимо от других блоков. Например, это может быть пост на форуме или статья в блоге, онлайн-журнале, комментарий пользователя.
Один элемент article может включать несколько элементов article. Например, мы можем заключить в элемент article всю статью в блоге, и этот элемент будет содержать другие элементы article, которые представляют комментарии к этой статье в блоге. То есть статья в блоге может рассматриваться нами как отдельная семантическая единица, и в то же время комментарии также могут рассматривать отдельно вне зависимости от другого содержимого.
Использование article на примере статьи из блога с комментариями:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Семантическая разметка в HTML5</title> </head> <body> <article> <h3>Lorem ipsum</h3> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat ... </div> <div> <h4>Комментарии</h4> <article> <h5>Неплохо</h5> <p>Норм статья</p> </article> <article> <h5>Бред</h5> <p>Мне не понравилось...</p> </article> <article> <h5>Непонятно</h5> <p>О чем вообще все это?</p> </article> </div> </article> </body> </html>
Здесь вся статья может быть помещена в элемент article, и в то же время каждый отдельный комментарий также представляет отдельный элемент article.
При использовании article надо учитывать, что каждый элемент article должен быть идентифицирован с помощью включения в него заголовка h2-h6.