Элемент HTML — основная структурная единица веб-страницы, написанная на языке HTML. Элементы можно увидеть в исходном коде всех веб-страниц после задания типа документа. <!DOCTYPE> определяет, какую версию (X)HTML использует страница. Элементы страницы находятся между открывающим тегом <html> и закрывающим <code></html></code>. Элемент <html> называется корневым элементом.Корневой элемент HTML-документа
Структура 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> и <code></html></code> соответственно. Внутри этих тегов должны находиться теги заголовка () и тела () документа.
Варианты 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 В отличие от предыдущих версий тег всего один.
<!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>
Аналогичным образом якорь можно сделать на закладку, находящуюся на другой веб-странице или на другом сайте: там, куда направлена ссылка, должен стоять <code><a name="xxx"></a></code>, а там, откуда идёт ссылка, к значению 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> — выделение текста курсивом. Важно, что '' и ''' не являются семантическими тегами, то есть не придают смысла содержимому. <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> ( — ненумерованный список) поставить <ol> ( — нумерованный список), список получится нумерованным: первый элемент второй элемент третий элемент
У этих тегов есть параметры: 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 и т.д., т.е. начать список с неположительного значения он может, но перескочить в нумерации на неположительное значение не может. {|rules=all frame=void !HTML-разметка||Данный браузер||Chrome, Firefox||Internet Explorer |- |<ol start=-2><li><li value=0><li value=2></ol>||<ol start=-2> ||-2, 0, 2||-2, -1, 2 |} В буквенном списке (type=A или type=a) неположительные значения одни браузеры, как Chrome, Firefox, отображают цифрами, а Internet Explorer (в режиме Quirks mode, т.е. если на странице не указана версия HTML 4.01 или 5 в тэге !DOCTYPE HTML) отрицательные значения отображает буквами со знаком “минус”, а ноль — символом @. {|rules=all frame=void !HTML-разметка||Данный браузер||Chrome, Firefox||Internet Explorer (Quirks mode) |- |<ol type=A start=-1><li><li><li></ol>||<ol type=A start=-1> ||-1, 0, A||-A, @, A |} Пустое или нечисловое значение (value=, value=A, value=B) одни браузеры, как Chrome, Firefox, игнорируют, а Internet Explorer воспринимает как value=1. {|rules=all frame=void !HTML-разметка||Данный браузер||Chrome, Firefox||Internet Explorer |- |<ol start=-2><li><li value=B><li value=2></ol>||<ol start=-2> ||-2, -1, 2||-2, 1, 2 |} Имеются различия при отображении чисел римскими цифрами (type=I или type=i), т.к. Internet Explorer (в режиме Quirks mode, т.е. если на странице не указана версия HTML 4.01 или 5 в тэге !DOCTYPE HTML) некоторые числа отображает неправильно. {|rules=all frame=void !HTML-разметка||Данный браузер||Chrome, Firefox||Internet Explorer (Quirks mode) |- |<ol type=I start=3300><li><li><li><li></ol> |<ol type=I start=3300 style=margin-left:6em> |MMMCCCMMMCCCIMMMCCCIIMMMCCCIII |MMMCCCMMMCCCMMMCCCMMMCCC |} Все числа из интервала с 1 по 1880 Internet Explorer отображает правильно, а из интервала с 1881 по 3999 — не все. Для 603 чисел, 67 групп по 9 чисел (xxx1—xxx9), в запись римскими цифрами не попадает младшая цифра. И это, скорее всего, не для того, чтобы укоротить длинную запись, т.к. 3888 — число с самой длинной (в интервале с 1 по 3999) записью римскими цифрами (MMMDCCCLXXXVIII) — отображается правильно.
В таблице крестиком отмечены группы неправильно отображаемых в Internet Explorer (в режиме Quirks mode) чисел: 01-0911-1921-2931-3941-4951-5961-6971-7981-8991-991800✘2300✘✘✘2700✘✘✘2800✘✘✘✘✘✘✘✘✘3100✘3200✘✘✘✘✘✘✘3300✘✘✘✘✘✘✘✘✘3400✘✘✘✘✘✘✘3500✘3600✘✘✘✘✘✘✘3700✘✘✘✘✘✘✘✘✘3800✘✘✘3900✘✘✘✘✘✘✘
Объекты EMBED — вставка различных объектов: не-HTML документов и media-файлов APPLET — вставка Java-апплетов SCRIPT — вставка скриптов.
Изображения IMG — вставка изображения. Этот тег не закрывается. SRC — имя или URL ALT — альтернативное имя (отобразится, если в браузере запретить отображать картинки)