Html элемент: Элементы html — Википедия – HTML elements reference — Web technology for developers

Leave a Comment / Html / By /

Содержание

Элементы HTML | Учебные курсы

Если мы посмотрим на код HTML, то увидим, что помимо самого текста, который выводится в браузере, код содержит несколько команд в угловых скобках (к примеру, <h2>). Такие команды называются элементами HTML и состоят из нескольких частей: открывающего тега, содержимого и закрывающего тега (рис. 1).

Элемент <h2>

Рис. 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 — нумерованный список), список получится нумерованным:

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

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

type = "тип"

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

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

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

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

пишется так:

<ol type="i">
 
<li> Первое </li>
 
<li> Второе </li>
 
<li> И т.д. </li>
 
</ol>

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

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

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

Пишется так:

<ol start="24">
 
<li> Двадцать четыре </li>
 
<li> Двадцать пять </li>
 
<li> И т.д. </li>

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

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

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

<ol>
 
<li> Один </li>
 
<li> Два </li>
 
<li value="22"> Двадцать два </li>
 
<li> Двадцать три </li>

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

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

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

 
 <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 — пункт списка

Символы

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

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

В 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

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

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

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

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

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

В электронной переписке, чатах и форумах все эти упрощения допустимы: можно заменять тире и минусы дефисами, знак номера на 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 — нумерованный список), список получится нумерованным:

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

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

type = "тип"

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

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

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

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

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

пишется так: 

<ol type="i">

<li> Первое </li>
 
<li> Второе </li>

<li> И т.д. </li>

</ol>

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

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

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

Пишется так: 

<ol start="24">

<li> Двадцать четыре </li>

<li> Двадцать пять </li>

<li> И т.д. </li>

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

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

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

<ol>

<li> Один </li>

<li> Два </li>

<li value="22"> Двадцать два </li>

<li> Двадцать три </li>

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

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

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

 
 <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>
  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) 
<ol type=A start=-1><li><li><li></ol>
  1.  
  2.  
  3.  
 -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>
  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) 
<ol type=I start=3300><li><li><li><li></ol>
  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 — задают размеры вертикального и горизонтального пространства вокруг изображения

Пример: 

<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 — пункт списка

Символы

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

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

В 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

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

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

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

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

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

Более подробно: Артемий Лебедев. Тире, минус и дефис, или Черты русской типографики. Ководство (15 января 2003). Архивировано 24 августа 2011 года.

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

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

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

Ссылки

HTML5 | Семейства элементов

165

Веб-программирование --- HTML5 --- Семейства элементов

Ранее мы рассматривали изменения в синтаксисе HTML5. Но более важными являются добавления, удаления и изменения поддерживаемых в HTML элементов. В последующих разделах мы вкратце рассмотрим эти аспекты.

Добавленные элементы в HTML5

Новые элементы, с кратким описанием перечислены в таблице:

Новые элементы 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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *