Элементы HTML
Материал из Википедии — свободной энциклопедии
Элемент HTML — основная структурная единица веб-страницы, написанная на языке HTML. Данный элемент вы можете увидеть в исходном коде для всех веб-страниц после задания типа документа на первой строке на странице. DOCTYPE определяет, какую версию (X) HTML эта страница использует. Элементы страницы находятся между открывающим тегом <html> и закрывающим </html>. Элемент <html> называется корневым элементом.[1]
Структура HTML-документа
[править | править код]HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот пример части разметки HTML-документа:
<p>Текст между двумя тегами - открывающим и закрывающим.</p>
<a href="http://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
[править | править код]В отличие от предыдущих версий тег всего один.[2]
<!DOCTYPE html>
Основные элементы
[править | править код]
Теги и их параметры нечувствительны к регистру. То есть <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 любого элемента.
Текстовые блоки
[править | править код]<h1> … </h1>,<h2> … </h2>, … ,<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>— выделение текста курсивом. Важно, что <i> и <b> не являются семантическими тегами, то есть не придают смысла содержимому.[3]<b> … </b>— выделение текста жирным шрифтом<u> … </u>— подчёркивание текста<s> … </s>(или<strike> … </strike>)—зачёркиваниетекста<big> … </big>— увеличение шрифта. Устарел и не рекомендуется к использованию[4].<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>— устаревший тег[5], отвечавший за задание параметров шрифта. У этого тега есть следующие параметры: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="текст" WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)">
Изображение можно сделать ссылкой:
<A HREF=url ><IMG SRC=url></A>
Карта изображений
[править | править код]<MAP>…</MAP>— создание карты изображений позволяющей хранить в одном изображении несколько ссылок.
Пример:
<IMG width="500" height="200" 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 приводят к некорректному отображению, особенно при работе со вложенными таблицами.[источник не указан 1801 день]
Формы
[править | править код]Создание форм в 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). Дата обращения: 23 апреля 2013. Архивировано 9 декабря 2007 года.
Символы <, > и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл. Для их отображения всегда используются <, > и & соответственно.
Большинство спецсимволов см. [webdesign.about.com/library/bl_htmlcodes.htm на сайте about.com].
Примечания
[править | править код]- ↑ Корневой элемент HTML-документа Архивная копия от 20 декабря 2019 на Wayback Machine Описание
- ↑ HTML Standard. html.spec.whatwg.org. Дата обращения: 26 сентября 2021. Архивировано 26 сентября 2021 года.
- ↑ Что такое семантическая вёрстка и зачем она нужна — журнал «Доктайп». HTML Academy. Дата обращения: 30 августа 2023. Архивировано 30 августа 2023 года.
- ↑ — журнал «Доктайп». HTML Academy. Дата обращения: 30 августа 2023. Архивировано 30 августа 2023 года.
- ↑ — журнал «Доктайп». HTML Academy. Дата обращения: 30 августа 2023. Архивировано 30 августа 2023 года.
Ссылки
[править | править код]Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.
