Элементы HTML

Материал из Википедии — свободной энциклопедии
Перейти к навигации Перейти к поиску

Шаблон:Значения2 Шаблон:Боковая навигационная таблица

Элемент HTML — основная структурная единица веб-страницы, написанная на языке HTML. Элементы можно увидеть в исходном коде всех веб-страниц после задания типа документа. <!DOCTYPE> определяет, какую версию (X)HTML использует страница. Элементы страницы находятся между открывающим тегом <html> и закрывающим </html>. Элемент <html> называется корневым элементом.<ref name="Tepllo">Корневой элемент HTML-документа Шаблон:Wayback</ref>

Структура HTML-документа

HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот пример части разметки HTML-документа:

<source lang="html4strict">

Текст между двумя тегами - открывающим и закрывающим.

<a href="http://example.com">Здесь элемент содержит атрибут href.</a>

А вот пример пустого элемента:
</source>

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит примерно так: <source lang="html4strict"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></source> Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.

Варианты DOCTYPE для HTML 4.01

  • Строгий (Strict): не содержит тегов, помеченных как «устаревшие» или «не одобряемые» (deprecated).

<source lang="html4strict"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></source>

  • Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

<source lang="html4strict"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></source>

  • С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.

<source lang="html4strict"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"></source>

DOCTYPE для HTML 5

В отличие от предыдущих версий тег всего один.<ref>Шаблон:Cite web</ref>

<source lang="html4strict"><!DOCTYPE html></source>

Основные элементы

Шаблон:Main

Файл:HTML element content categories.svg
HTML element content categories

Теги и их параметры нечувствительны к регистру. То есть <A HREF="http://example.com"> и <a href="http://example.com"> означают одно и то же.

В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.

Гиперссылки

<source lang="html4strict"><a href="filename" target="_self">название ссылки</a></source>

  • Атрибут href задаёт значение адреса документа, на который указывает ссылка.
  • filename — имя файла или адрес Internet, на который необходимо сослаться.
  • название ссылки — название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашёл на страницу.
  • target — задаёт значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
    • _top — открытие документа в текущем окне;
    • _blank — открытие документа в новом окне;
    • _self — открытие документа в текущем фрейме;
    • _parent — открытие документа в родительском фрейме.

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

Якорь

Тот же элемент используется для создания так называемых «якорей» (anchor), которые могут потом использоваться в гиперссылках, направленных на какой-то определённый элемент страницы. Например:

<source lang="html5"> <!DOCTYPE html> 

<html>
 <head>
   <meta charset="utf-8">
   <title>Якорь внутри документа</title>
 </head>
 <body>

<a name="top"></a>

текст

<a href="#top">Наверх</a>

 </body>

</html> </source>

Аналогичным образом якорь можно сделать на закладку, находящуюся на другой веб-странице или на другом сайте: там, куда направлена ссылка, должен стоять <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>  — выделение текста курсивом. Важно, что '' и ''' не являются семантическими тегами, то есть не придают смысла содержимому.<ref>Шаблон:Cite web</ref>
  • <b> … </b>  — выделение текста жирным шрифтом
  • <u> … </u>  — подчёркивание текста
  • <s> … </s> (или <strike> … </strike> )— зачёркивание текста
  • <big> … </big>  — увеличение шрифта. Устарел и не рекомендуется к использованию<ref>Шаблон:Cite web</ref>.
  • <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>  — устаревший тег<ref>Шаблон:Cite web</ref>, отвечавший за задание параметров шрифта. У этого тега есть следующие параметры:
    • color=цвет — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.
    • face=шрифт задание гарнитуры шрифта
    • size=размер задание размера шрифта. Размер от 1 до 7: стандартный по умолчанию 3. Есть много способов изменить стандартный размер.
    • size=+изменение или size=-изменение — изменение размера шрифта от стандартного. Например, +2 означает размер на 2 больше стандартного.

Например, <source lang="html4strict"> Сигналом к началу атаки являются три больших зелёных свистка. </source> создаст текст

Сигналом к началу атаки являются три больших зелёных свистка.

Списки

<source lang="html4strict">

  • первый элемент
  • второй элемент
  • третий элемент

</source> создаёт список

  • первый элемент
  • второй элемент
  • третий элемент

Если вместо <ul> (Шаблон:Lang-en2 — ненумерованный список) поставить <ol> (Шаблон:Lang-en2 — нумерованный список), список получится нумерованным:

  1. первый элемент
  2. второй элемент
  3. третий элемент

У этих тегов есть параметры: 

type = "тип"

где тип — форма:

в <UL>  — символов

  • square — квадрат
  • circle — окружность
  • disk — круг: по умолчанию

а в <OL>  — цифр или букв

  • A или а (латинскими буквами) — буквенный список: соответственно заглавными или строчными буквами
  • I или i — римские цифры: соответственно заглавными или строчными буквами (римскими цифрами отображаются числа с 1 по 3999, остальные — арабскими)
  • 1 — арабские цифры: по умолчанию

пишется так: <source lang="html4strict">

  1. Первое
  2. Второе
  3. И т.д.

</source> и создаст следующее:

  1. Первое
  2. Второе
  3. И т. д.

Параметр start="начало" (только для <OL> ), определяющий начало нового отсчёта: например, если нужно не 1, 2, 3, а 24, 25, 26

Пишется так: <source lang="html4strict">

  1. Двадцать четыре
  2. Двадцать пять
  3. И т.д.
    4. </source> и создаст следующее:
    1. Двадцать четыре
    2. Двадцать пять
    3. И т. д.

    и, наконец для тега <LI> параметр value="следующий" — если необходимо перескочить с одной цифры на другую: например, не 1, 2, 3, 4, а 1, 2, 22, 23 <source lang="html4strict">

    1. Один
    2. Два
    3. Двадцать два
    4. Двадцать три
      5. </source> создаст следующее:
      1. Один
      2. Два
      3. Двадцать два
      4. Двадцать три

      Наконец, третьим, и последним, списком является список определений: <source lang="html4strict">

      Кошка
      мяукающее домашнее животное
      Кот
      муж кошки
      Крокодил
      большой африканский зверь с острыми зубами

      </source> создаст следующее:

      Кошка
      мяукающее домашнее животное
      Кот
      муж кошки
      Крокодил
      большой африканский зверь с острыми зубами

      Между прочим, теги <LI>, <DT>, <DD> можно и не закрывать.

      Различия в отображении нумерованных списков

      При неположительных значениях в нумерации браузеры ведут себя по-разному. Например, Internet Explorer игнорирует value=0, value=-1 и т.д., другие же браузеры, как Chrome, Firefox, отображают заданное значение. При этом Internet Explorer не игнорирует start=0, start=-1 и т.д., т.е. начать список с неположительного значения он может, но перескочить в нумерации на неположительное значение не может.

      HTML-разметка Данный браузер Chrome, Firefox Internet Explorer
      <source>
      </source>
      1.  
      2.  
      3.  
      		 -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)
      <source>
      </source>
      1.  
      2.  
      3.  
      		 -1, 0, A -A, @, A

      Пустое или нечисловое значение (value=, value=A, value=B) одни браузеры, как Chrome, Firefox, игнорируют, а Internet Explorer воспринимает как value=1.

      HTML-разметка Данный браузер Chrome, Firefox Internet Explorer
      <source>
      </source>
      1.  
      2.  
      3.  
      		 -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)
      <source>
      </source>
      1.  
      2.  
      3.  
      4.  
      		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 — имя или URL
        • ALT — альтернативное имя (отобразится, если в браузере запретить отображать картинки)
        • TITLE — краткое описание изображения (отобразится при наведении курсора на картинку)
        • WIDTH, HEIGHT — размеры (если не совпадают с истинными размерами картинки, то изображение «растянется» или «сожмётся»)
        • ALIGN — задаёт параметры обтекания текстом (top, middle, bottom, left, right)
        • VSPACE, HSPACE — задают размеры вертикального и горизонтального пространства вокруг изображения

      Пример: <source lang="html4strict"> <IMG SRC=url ALT="текст" TITLE="текст" WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)"> </source>

      Изображение можно сделать ссылкой: <source lang="html4strict"> <A HREF=url ><IMG SRC=url></A> </source>

      Карта изображений

      Шаблон:Main

      • <MAP>…</MAP> — создание карты изображений позволяющей хранить в одном изображении несколько ссылок.

      Пример: <source lang="html4strict"> <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> </source>

      Таблицы

      • TABLE — создание таблицы. Параметры тега:
        • BORDER — толщина разделительных линий в таблице
        • CELLSPACING — расстояние между клетками
        • CELLPADDING — отступ от рамки до содержимого ячейки.
      • CAPTION — заголовок таблицы (этот тег необязателен)
      • TR — строка таблицы
      • TH — заголовок столбца таблицы (этот тег необязателен)
      • TD — ячейка таблицы
      • height — высота таблицы
      • width — ширина таблицы

      Так, например,

      <source lang="html4strict">

      Улов крокодилов в Мумбе-Юмбе
      Год Улов
      1997 214
      1998 216
      1999 207

      </source>

      Создаст таблицу:

      <templatestyles src="Шаблон:Начало_цитаты/styles.css" />{{#ifexpr: 0 mod 2 = 0 and 0 != 4 and 0 != 104 |

      }}{{#if: |

      :

      }}

      {{#ifexpr: 0 mod 2 = 0 and 0 != 4 and 0 != 104 |

      }}

      Улов крокодилов в Мумбе-Юмбе
      Год Улов
      1997 214
      1998 216
      1999 207

      {{#if:

      | <templatestyles src="Шаблон:Конец цитаты/styles.css" />

      —

      }}

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

      <source lang="html4strict"> </source> таблица получится такой: <templatestyles src="Шаблон:Начало_цитаты/styles.css" />{{#ifexpr: 0 mod 2 = 0 and 0 != 4 and 0 != 104 | }}{{#if: |

      :

      }}

      {{#ifexpr: 0 mod 2 = 0 and 0 != 4 and 0 != 104 |

      }}

      Улов крокодилов в Мумбе-Юмбе
      Год Улов
      1997 214
      1998 216
      1999 207

      {{#if:

      | <templatestyles src="Шаблон:Конец цитаты/styles.css" />
      —
      }}

      Другой параметр тегов TABLE, TR, TH, TD — ALIGN. Он определяет выравнивание. Возможные значения — center (по центру), left (по левому краю), right (по правому краю).

      Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR — для содержимого всех ячеек строки, TABLE — для самой таблицы на страничке. Для каждой ячейки берётся выравнивание из TD или TH, если оно не задано — из TR, если и оно не задано — по центру для TH или по левому краю для TD.

      Например, если заменить первые строки таблицы на <source lang="html4strict">

      </source> таблица получится такой:

      <templatestyles src="Шаблон:Начало_цитаты/styles.css" />{{#ifexpr: 0 mod 2 = 0 and 0 != 4 and 0 != 104 |

      }}{{#if: |

      :

      }}

      {{#ifexpr: 0 mod 2 = 0 and 0 != 4 and 0 != 104 |

      }}

      Улов крокодилов в Мумбе-Юмбе
      Год Улов
      1997 214
      Улов крокодилов в Мумбе-Юмбе
      Год Улов
      1997 214
      1998 216
      1999 207

      {{#if:

      | <templatestyles src="Шаблон:Конец цитаты/styles.css" />
      —
      }}

      Шаблон:Нет АИ 2

      Формы

      Шаблон:Main Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.

      • FORM — создание формы
      • INPUT — элемент ввода (может иметь разные функции — от ввода текста до отправки формы)
      • TEXTAREA — текстовая область (многострочное поле для ввода текста)
      • SELECT — список (обычно в виде выпадающего меню)
      • OPTION — пункт списка

      Символы

      Чтобы создать символ, необязательно искать его на клавиатуре: можно просто набрать соответствующую HTML-мнемонику; например, чтобы получить ¢, надо набрать &cent;, неразрывный пробел — &nbsp;, ударение — &#x301; и т. д.

      Названия цветов

      Шаблон:Main В 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

      Основные символы

      Шаблон:Main

      Код Символ Смысл
      &lt; < меньше
      &gt; > больше
      &amp; & амперсанд
      &nbsp; неразрывный пробел (предотвращает перенос строки на нём)
      &sect; § параграф
      &#8470; № номер
      &copy; © копирайт (Шаблон:Lang-en2)
      &reg; ® зарегистрированный товарный знак (Шаблон:Lang-en2)
      &#153; ™ товарный знак (Шаблон:Lang-en2)
      &deg; ° градусы
      &laquo; « открывающая кавычка—«ёлочка»
      &raquo; » закрывающая кавычка-«ёлочка»
      &hellip; … многоточие
      &mdash; — тире
      &#149; • жирная точка
      &plusmn; ± плюс-минус
      &minus; − минус

      Клавиатурные символы ' и " в русском языке кавычками не являются. Также неправильно на сайтах заменять №, ©, ®, ™, °C на N, (c), (R), TM, C.

      Дефис, тире и минус — три разных знака.

      1. Клавиатурный символ - называется дефис и используется внутри слов.
      2. Минус шире дефиса. Он используется для записи отрицательных чисел и операции вычитания.
      3. Тире ещё шире, чем минус. Оно используется между словами и отбивается пробелами, причём спереди — неразрывным. Для обозначения числовых интервалов тоже используется тире, но пробелами не отбивается.

      Более подробно: Шаблон:Cite web

      Символы <, > и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл. Для их отображения всегда используются &lt;, &gt; и &amp; соответственно.

      Большинство спецсимволов см. на webdesign.about.com/library/bl_htmlcodes.htm на сайте about.com.

      Примечания

      Шаблон:Примечания

      Ссылки

      Шаблон:Нет источников

      Шаблон:Спам-ссылки

Источник — https://camokathomelab.servebeer.com/mediawiki/index.php?title=Элементы_HTML&oldid=46271