Элемент | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
5.0+ | 7.0+ | 1.0+ | 7.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.
Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы. В табл. 1. приведены основные типы документов с их описанием.
DOCTYPE | Описание |
---|---|
HTML 4.01 | |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> | Строгий синтаксис HTML. |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> | Переходный синтаксис HTML. |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»> | В HTML-документе применяются фреймы. |
HTML 5 | |
<!DOCTYPE html> | Для всех документов. |
XHTML 1.0 | |
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1. 0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> | Строгий синтаксис XHTML. |
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> | Переходный синтаксис XHTML. |
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»> | Документ написан на XHTML и содержит фреймы. |
XHTML 1.1 | |
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»> | Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. |
Синтаксис
<!DOCTYPE [Элемент верхнего уровня] [Публичность] «[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]» «[URL]»>
Параметры
Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег <html>.
Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.
Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и — (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».
Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.
Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.
Имя — уникальное имя документа для описания DTD.
Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).
URL — адрес документа с DTD.
Закрывающий тег
Не требуется.
Пример 1. HTML 4.01
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>!DOCTYPE</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <p>Разум — это Будда, а прекращение умозрительного мышления — это путь. Перестав мыслить понятиями и размышлять о путях существования и небытия, о душе и плоти, о пассивном и активном и о других подобных вещах, начинаешь осознавать, что разум — это Будда, что Будда — это сущность разума, и что разум подобен бесконечности.</p> </body> </html>
Пример 2. HTML 5
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <title>!DOCTYPE</title> <meta charset="utf-8"> </head> <body> <p>Разум — это Будда, а прекращение умозрительного мышления — это путь. Перестав мыслить понятиями и размышлять о путях существования и небытия, о душе и плоти, о пассивном и активном и о других подобных вещах, начинаешь осознавать, что разум — это Будда, что Будда — это сущность разума, и что разум подобен бесконечности.</p> </body> </html>
Браузеры
Internet Explorer до версии 6.0 требует, чтобы <!DOCTYPE> стоял обязательно в первой строке кода. В противном случае браузер переходит в режим совместимости (quirk mode).
Хотя значение URL является не обязательным, браузеры при его отсутствии могут перейти в режим совместимости, поэтому всегда указывайте полный путь к DTD-файлу, как показано в табл. 1.
Глобальные атрибуты HTML — список атрибутов. Сlass, style, title, data атрибуты тегов
Рейтинг: 4 из 5, голосов 16
01 декабря 2017 г.
На этой странице собраны глобальные атрибуты тегов.
Ниже в таблице представлены глобальные атрибуты HTML тегов с кратким описанием и примерами использования.
Атрибут | Описание |
---|---|
accesskey |
Определяет горячую клавишу для активации элемента или перевода фокуса на элемент. Значение: символ клавиши на клавиатуре. <a href="https://guruweba.com" accesskey="k">текст</a> |
class |
Определяет одно или больше имен класса элемента. Используется для связи HTML элемента с таблицами стилей CSS. Значение: одно или более имен классов. <div>контент</div> |
contenteditable |
Определяет возможность редактирования контента элемента пользователем. Значение: true | false. <p contenteditable="true">текст</p> |
contextmenu |
Определяет контекстное меню для элемента. Контекстное меню появляется при нажатии на правую кнопку мыши. Значение: id контекстного меню <menu>. <div contextmenu="menu_id">контент</div> |
data-* |
Используется для хранения пользовательских данных. Значение: пользовательское. Можно использовать атрибут с любым именем, начинающимся на «data-«, например, data-count, data-value, data-result, data-chtoto. <div data-count="5">контент</div> |
dir |
Определяет направление текста внутри элемента (слева направо или справа налево). Значение: ltr — слева на право | rtl — справа на лево. <p dir="ltr">текст</p> |
draggable |
Определяет, можно ли перетаскивать элемент. Значение: true | false | auto. <div draggable="true">контент</div> |
hidden |
Скрывает элемент. Значение: Отсутствует. <p hidden>текст</p> |
id |
Определяет идентификатор элемента. Значение: Название идентификатора. <button>контент</button> |
lang |
Указывает на язык содержимого элемента. Значение: Language Code (код языка). <p lang="en">текст</p> |
spellcheck |
Определяет, нужно ли браузеру проверять грамматику содержимого элемента. Значение: true | false. <input name="input_name" type="text" spellcheck="true"> |
style |
Определяет CSS стили элемента (стили также могут быть определены другими способами). Значение: CSS код. <div>контент</div> |
tabindex |
Определяет порядковый номер элемента при табуляции. Значение: порядковый номер. <input name="input_name" type="text" tabindex="1"> |
title |
Содержит дополнительную информацию об элементе. Значение: текстовая строка. <img src="img.png" alt="img_alt" title="Гуру Веба"> |
translate |
Определяет, нужно ли переводить содержимое элемента. Значение: yes | no. <p translate="yes">текст</p> |
by Lebedev
Глоссарий HTML | Codecademy
Обновление: Шпаргалки БЕТА уже здесь!
- Введение в HTML: элементы и структура
- Введение в HTML: таблицы
- Введение в HTML: формы
Атрибуты
класс
Элементы HTML могут иметь один или несколько классов, разделенных пробелами. Вы можете стилизовать элементы с помощью CSS, выбирая их с помощью их классов.
Пример
Это большая желтая коробка.
id
HTML-элемент может иметь атрибут id
для его идентификации. Элементы id
всегда должны быть уникальными для этого единственного элемента, и каждый элемент никогда не должен иметь более одного id
.
Пример
Это моя коробка! Поместите текст в другое поле.
href
Ссылки сообщают браузеру, куда идти, используя атрибут href
, в котором хранится URL-адрес.
Пример
Базовое форматирование
подчеркнуты с помощью простых тегов форматирования.
Пример
Этот текст выделен полужирным, курсивом и подчеркнутым.
Тело
Тело — это контейнер для всего содержимого страницы. Поставляется после тега
внутри общего тега
.
Пример
Пример тега body
9000 !
Подробнее
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
Usage
Почти все содержимое находится внутри тега body. Основными исключениями являются теги script и style, а также тег title страницы. Как вы можете видеть в этом примере, внутри тега body есть заголовок, изображение и ссылка. Тег head содержит только внешние файлы и заголовок страницы.
Пример
Моя домашняя страница
<тип скрипта ="text/javascript" src="homepage.js">
Привет, это фотография моего кота!
Дочерние элементы
Элемент, являющийся непосредственным потомком другого элемента или вложенный в другой элемент, называется дочерним. Они становятся полезными при использовании дочерних селекторов CSS и псевдоэлементов.
Пример
- Я дочерний элемент родителя!
HTML-комментарии иногда используются в коде для объяснения разметка. Они похожи на комментарии на других языках. Пользователи не видят комментарии в своем браузере.
Синтаксис
Div
Контейнер блочного уровня (или «раздел» веб-страницы) для содержимого, не имеющего семантического значения.
Синтаксис
Это элемент div.
Заголовок
Тег, который окружает важное содержимое, невидимое для пользователя, но важное для браузера. Элементы внутри этого тега содержат метаданные о странице и ссылки на таблицы стилей, скрипты и т. д.
<голова>
. ,
,
, … позволяют использовать шесть уровней заголовков документа, от самого большого до самого маленького, разбивая документ на логические разделы. Например, слово «Заголовки» выше завернуто в 9.0034 тег.Синтаксис
Это заголовок!
Горизонтальные линейки
Этот тег создает черную линию толщиной в один пиксель, которая проходит через весь контейнер. С помощью CSS его можно изменить, чтобы он выглядел иначе.
Пример
Этот текст разделен на
...от этого текста!
Подробнее
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
HTML
Что такое HTML?
HTML означает язык гипертекстовой разметки. Это язык, используемый для создания всех веб-сайтов.
Подробнее
- http://www.w3.org/wiki/HTML/Training/What_is_HTML
тегВсе HTML-файлы находятся внутри всеобъемлющего тега html. Это основной тег, определяющий HTML-документ.
Синтаксис
Остальная часть вашей веб-страницы находится здесь!
Подробнее
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
Гиперссылки
Гиперссылки (или просто ссылки) переносят пользователя на другую веб-страницу при нажатии на нее. Наиболее распространенный атрибут, используемый со ссылками, — это href, который сообщает браузеру, куда ведет ссылка.
Синтаксис
Пример
=»Следующий текст:переходит в Google.
Изображения
Тег img встраивает изображение в ваш HTML. Всегда находится с атрибутом «src», который сообщает браузеру, где найти изображение. Обратите внимание, что тег
является самозакрывающимся.
Синтаксис
Разрывы строк
Этот тег используется в блоке текста для принудительного разрыва строки. Это должно использоваться для вещей, которые представляют собой один абзац, но где это форматирование необходимо, например, стихи или адреса. Чтобы разделить абзацы, вместо этого разделите каждый абзац на отдельный элемент
. Результирующий элемент на веб-странице будет выглядеть так:
Пример 9
Ссылки на другую веб-страницу при нажатии на них). Ссылки появляются только в шапке документа, поэтому они не изменяют содержание, а только представление. Ссылки чаще всего используются для подключения к таблице стилей, сценарию, значку или альтернативному формату страницы, например RSS-каналу или PDF-файлу.
Пример
Списки
HTML поддерживает два типа списков: упорядоченные списки и неупорядоченные списки. списки. В списках каждый отдельный элемент списка имеет свой собственный тег.
Неупорядоченные списки
Ненумерованные списки — это просто списки, элементы которых обозначены маркерами.
Пример
Список покупок
- Мыло для посуды
- Наполнитель для туалета
- Томатный соус
Подробнее 3 Элементы заказанных списков обозначаются цифрами. Пример Мой нумерованный список 5
5 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
Заказные списки
Подробнее
- https://developer. mozilla.org /en-US/docs/Web/HTML/Element/li
Абзацы
Один из самых распространенных тегов в HTML — он обозначает абзац текста. Внутри него часто вложены другие элементы, например
,
,
и
.
Синтаксис
Это текст абзаца!
Семантическое форматирование
Эти теги аналогичны ранее упомянутым тегам форматирования, которые потеряли популярность. Разница в том, что эти теги имеют семантическое значение (значение).
используется для того, что вы хотите подчеркнуть, а
используется для чего-то важного. С обоими этими элементами вы можете передать уровень акцента или важности с помощью вложенности. Чем больше раз вы вкладываете элемент внутрь себя, тем выше величина содержащегося в нем текста.
Пример
Внимание!Кислота может вызвать сильные ожоги
Таблицы
Элемент для отображения информации в строки и столбцы. Поддерживает верхние и нижние колонтитулы для маркировки столбцов. Разделяет информацию на строки (обозначаемые тегом tr), содержащие ячейки (обозначаемые тегом td).
Пример
<таблица>
Товар
Цена
5
5
tr>
Банан
$56,75
Йогурт
$12. /td>
Всего
69,74$
2
Теги и элементы
Теги — это основные метки, которые определяют и разделяют части разметки на элементы. Они состоят из ключевого слова, заключенного в угловые скобки <>
. Содержимое помещается между двумя тегами, а перед закрывающим стоит косая черта (Примечание: существуют некоторые самозакрывающиеся теги HTML, например теги изображений). Теги также имеют атрибуты, которых 9.0005
Синтаксис
content
Title
Этот тег сообщает браузеру, что отображать в качестве заголовка страницы вверху, и сообщает поисковым системам, что именно название вашего сайта. Он находится внутри
тегов. Постарайтесь сделать заголовки своих страниц описательными, но не слишком многословными.
Пример
Глоссарий HTML
Узнайте больше о Codecademy
Курс навыков
Основы кода
Начните свое путешествие в мир программирования со знакомства с миром кода и основных концепций. Checker Denseвключает
5 курсов
Проверка Densecertificate Iconс
Сертификат . 0005
Инженер с полным стеком
Инженер с полным стеком может выполнить проект от начала до конца, от внутреннего до внешнего интерфейса. Шекер ПлотныйВключает
51 Курсы
Шекер Денсирдер. Язык HTML-элемент
задает термин в описании или списке определений и поэтому должен использоваться внутри элемента
. Обычно за ним следует элемент
; однако несколько элементов
в строке указывают на несколько терминов, которые все определяются ближайшим следующим элементом
.
Последующий элемент
( Description Details ) предоставляет определение или другой связанный текст, связанный с термином, указанным с помощью <дт>
.
Этот элемент включает только глобальные атрибуты.
См. примеры для элемента
.
Категории контента | Нет. |
---|---|
Разрешенный контент | Потоковое содержимое, но без , , содержание разделов или заголовков
потомки. |
Отсутствие тега | Начальный тег обязателен. Конечный тег может быть опущен, если этот элемент
сразу за ним следует еще один элемент или элемент, или если в
родительский элемент. |
Разрешенные родители | A или (в WHATWG HTML,
W3C HTML 5.2 и выше)
|
Неявная роль ARIA | термин |
Разрешенные роли ARIA | элемент списка |
Интерфейс DOM | HTMLElement До Gecko 1. |