Элементы HTML | это... Что такое Элементы HTML? (original) (raw)

Эта статья посвящена в основном элементам HTML. Чтобы узнать о формате элементов Википедии, см. Википедия:Как редактировать статью и m:Помощь:HTML в викитексте

Просмотр этого шаблона HTML
HTML и HTML5 Динамический HTML XHTML XHTML Mobile Profile и CHTML Canvas Кодировки символов Document Object Model Семейство шрифтов Редактор HTML Элементы HTML Мнемоники в HTML Фреймы HTML HTML5 audio и HTML5 video Скрипты в HTML Браузерный движок Quirks mode Таблицы стилей Каскадные таблицы стилей Unicode и HTML W3C и WHATWG Цвета HTML Web Storage WebGL Сравнение языков разметки документов браузеров браузерных движков для HTML HTML5 HTML5 Canvas HTML5 Media XHTML (1.1)

Элемент HTML — это основная структурная единица веб-страницы, написанная на языке HTML

Содержание

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

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

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

Здесь элемент содержит атрибут href. А вот пример пустого элемента:

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит примерно так:

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

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

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

DOCTYPE для HTML 5

В отличие от предыдущих версий тег всего один [1]

Основные элементы («теги»)

Теги и их параметры нечувствительны к регистру. То есть и означают одно и то же.

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

Гиперссылки

название ссылки

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

Текстовые блоки

Форматирование текста

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

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

создаст текст

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

Списки

создаёт список

Если вместо <UL> (Unordered List — ненумерованный список) поставить <OL> (Ordered List — нумерованный список), список получится нумерованным:

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

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

type = "тип"

где тип — форма: в <UL> — символов

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

пишется так:

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

и создаст следующее:

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

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

Пишется так:

  1. Двадцать четыре
  2. Двадцать пять
  3. И т.д.

    4. и создаст следующее:

    1. Двадцать четыре
    2. Двадцать пять
    3. И т.д.

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

    1. Один
    2. Два
    3. Двадцать два
    4. Двадцать три

      5. создаст следующее:

      1. Один
      2. Два
      3. Двадцать два
      4. Двадцать три

      Наконец, третьим, и последним, списком является список определений:

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

      создаст следующее:

      Кошка

      мяукающее домашнее животное

      Кот

      муж кошки

      Крокодил

      большой африканский зверь с острыми зубами

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

      Объекты

      • EMBED — вставка различных объектов: не-HTML документов и media-файлов
      • APPLET — вставка Java-апплетов
      • SCRIPT — вставка скриптов.

      Изображения

      • IMG — вставка изображения. Этот тег не закрывается.
        • SRC — имя или URL
        • ALT — альтернативное имя (отобразится, если в браузере запретить отображать картинки)
        • TITLE — краткое описание изображения (отобразится при наведении курсора на картинку)
        • WIDTH, HEIGHT — размеры (если не совпадают с истинными размерами картинки, то изображение «растянется»/«сожмется»)
        • ALIGN — задает параметры обтекания текстом (top, middle, bottom, left, right)
        • VSPACE, HSPACE — задают размеры вертикального и горизонтального пространства вокруг изображения

      Пример:

      текст

      Изображение можно сделать ссылкой:

      Таблицы

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

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

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

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

      Улов крокодилов в Мумбе-Юмбе

      Год Улов
      1997 214
      1998 216
      1999 207

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

      таблица получится такой:

      Улов крокодилов в Мумбе-Юмбе

      Год Улов
      1997 214
      1998 216
      1999 207

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

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

      Например, если заменить первые строки таблицы на

      таблица получится такой:

      Улов крокодилов в Мумбе-Юмбе

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

      Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе с вложенными таблицами.

      Формы

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

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

      Символы

      Чтобы создать символ, необязательно искать его на клавиатуре. Можно просто набрать тег (например, чтобы получить ¢, надо набрать следующее: &cent;). Пробел -   , ударение - ́ и т. д.

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

      В 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.

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

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

      В электронной переписке, чатах и форумах все эти упрощения допустимы: можно заменять тире и минусы дефисами, знак номера на N, кавычки теми, что есть на клавиатуре и т. д.

      Символы <**, **> и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл.

      Большинство спецсимволов см. на сайте about.com.