HTML5 — frwiki.wiki
HTML5 ( HyperText Markup Language 5 ) — это последняя крупная версия HTML ( формата данных, предназначенного для представления веб-страниц ). Эта версия была завершена. HTML5 определяет два синтаксиса абстрактной модели, определенной в терминах DOM : HTML5 и XHTML5 .
В состав языка также входят:
- уровень приложения с множеством API
- алгоритм для того, чтобы иметь возможность обрабатывать документы, не соответствующие требованиям синтаксиса .
Работа была передана W3C в марте 2007 г. по инициативе WHATWG . Обе организации работают параллельно над одним и тем же документом, чтобы поддерживать единую версию технологии . W3C закрывает добавление функций на, объявляет о завершении спецификации в 2014 году и призывает веб-разработчиков использовать HTML 5 с этого момента.
Резюме
- 1 Историческая справка
- 2 Изменения по сравнению с HTML 4.X и XHTML 1.X
- 2.1 Doctype
- 2.1.1 Пример использования с HTML5
- 2.2 Кодирование
- 2.1 Doctype
- 3 Элементы языка
- 3.1 XHTML5
- 3.2 Новые элементы
- 3.3 Новые атрибуты
- 3.4 P2P-соединение и распространение
- 3.5 Изменения в тегах и атрибутах
- 3.6 Устаревание атрибутов
- 3.7 API
- 4 Споры
- 5 Примечания и ссылки
- 6 См. Также
- 6.1 Библиография
- 6.2 Статьи по теме
- 6.3 Внешние ссылки
Исторический контекст
Отличия от HTML 4.X и XHTML 1.X
Doctype
Как и страницы HTML или XHTML, документы HTML5 требуют объявления Doctype, указывающего стандартный метод отображения в браузере.
В случае HTML 5 вы должны указать »<!DOCTYPE html>
» в начале любого HTML-документа. Однако для XML- документов это объявление не является обязательным, браузер по умолчанию интерпретирует его в стандартном режиме. Чтобы использовать структуру XML ( XHTML 5 ), вы должны указать в заголовке : « Content-Type: application/xhtml+xml
».Пример использования с HTML5
Пример исходного кода
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>titre de la page</title> <!-- meta --> <meta name="description" content=""> <meta name="author" content=""> <!-- mon icon --> <link rel="shortcut icon" href="favicon.ico"> <!-- mon template.css --> <link rel="stylesheet" href="main.css" media="screen"> </head> <body> <header> <!-- menu du haut --> <nav> <ul> <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li> <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li> <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li> </ul> </nav> </header> <!-- contenu de ma page --> <div> <!-- article n°1 --> <article> <h2>titre de mon article</h2> <p>texte de mon article</p> <section> <h3>sous-titre mon article</h3> <p>texte de mon sous-titre</p> <figure> <a href="mon-url"><img src="url-de-mon-image" alt="nom-de-mon-image"></a> </figure> </section> </article> <!-- article n°2 --> <article> <h2>titre de mon article</h2> <p>texte de mon article</p> <section> <h3>sous-titre mon article</h3> <p>texte de mon sous-titre</p> <figure> <a href="mon-url"><img src="url-de-mon-image" alt="nom-de-mon-image"></a> </figure> </section> </article> </div> <footer> <!-- menu du bas --> <nav> <ul> <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li> <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li> <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li> </ul> </nav> </footer> </body> </html>
Объявление Doctype не чувствительно к регистру, и больше нет ссылки на DTD ( определение типа документа или определение типа документа, документ, используемый для описания модели документа SGML или XML).
Кодирование
Процесс обнаружения кодирования также был изменен и выполняется по порядку, проверяя наличие HTTP- заголовка Content-Type, а затем обнаруживая спецификацию в начале файла.
Элементы языка
XHTML5
Для документов XHTML5 автор должен указать кодировку в прологе XML, а также тип содержимого: « application/xhtml+xml
». Вся страница должна соответствовать синтаксису XML . Благодаря расширяемой природе языка XML можно добавлять другие теги (пример 🙂 <mabalise></mabalise>
; такое расширение требует объявления соответствующих пространств имен, иначе страница будет ошибочной и браузер не сможет ее отобразить. Это самый строгий режим, требующий почти идеального синтаксиса.
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr"> <head> <title>Exemple</title> </head> <body> <!-- Contenu de la page respectant la syntaxe XML. --> </body> </html>
Новые элементы
-
main
: определяет основное содержание страницы, оно должно быть уникальным на странице.
Пример исходного кода
<html lang="fr"> <head> </head> <body> <header> <nav> <ul> <li><a href="#contenu-principal">contenu principal</a></li> </ul> </nav> </header> <main> <!-- Contenu principal de la page --> </main> </body> </html>
-
section
: определяет разделы документа, такие как главы, верхние и нижние колонтитулы. -
article
: независимая часть сайта, как комментарий. -
aside
: связанный с предшествующим ему тегом. -
header
: определяет введение или группу элементов навигации для документа. -
footer
: определяет нижний колонтитул статьи или документа. Обычно содержит имя автора, дату написания документа и / или контактные данные. -
nav
: определяет раздел в навигации. -
figure
: определяет изображения, диаграммы, фотографии, код и т. д. -
figcaption
: легенда для тега <figure>. -
audio
: для определения звука, например музыки или других аудиопотоков ( потоковая передача ). -
video
: позволяет вставлять потоковое видео . -
track
: позволяет вставлять субтитры (в формате WebVTT ) в видео, отображаемое с тегом видео. -
embed
: определяет встроенный контент, такой как плагин . -
mark
: определяет выделенный текст. -
meter
: позволяет использовать измерения с известным минимумом и максимумом для отображения шкалы. -
progress
: устанавливает индикатор выполнения текущего выполняемого задания. -
time
: установить дату или время, или и то, и другое. Этот тег был прекращен вв пользу тега
перед повторным введением. -
canvas
: используется для отображения графических элементов, вы должны использовать скрипт для его анимации. -
command
: определяет кнопку. Этот тег поддерживается только Internet Explorer 9 . Поэтому использовать его не рекомендуется . -
details
: Задает дополнительную информацию, которую можно скрыть или отобразить по запросу. -
keygen
: используется для генерации (безопасного) ключа. -
output
: представляет результат расчета. -
ruby
,rt
иrp
: рубиновые аннотации .
Новые атрибуты
Для тега : <a>
-
media
: позволяет указать, для какого носителя или устройства он оптимизирован. -
type
: определяет MIME целевого URL.
Для тега : <area>
-
hreflang
: указывает язык URL-адреса. -
media
: позволяет указать, для какого носителя или устройства он оптимизирован. -
rel
: указывает связь между текущим документом и целевым URL. -
type
: определяет MIME целевого URL.
Для тега : <button>
-
autofocus
: указывает, что кнопка должна находиться в фокусе во время загрузки страницы. -
form
: указывает, к какой форме принадлежит кнопка. -
formaction
: указывает, куда отправлять данные формы при отправке формы. Заменяет атрибут действия формы. -
formenctype
: указывает, как данные формы должны быть закодированы перед отправкой на сервер. Заменяет атрибут enctype формы. -
formmethod
-
formnovalidate
: если присутствует, указывает, что форма не должна проверяться при отправке. -
formtarget
: указывает, где открыть / выполнить действие.
Для тега : <fieldset>
-
name
: определяет имя набора полей. -
disabled
: отключить набор полей. -
form
: определяет форму набора полей.
Для тега : <form>
-
autocomplete
: автозаполнение. -
novalidate
: если присутствует, форма не проверяется при отправке.
Для тега : <html>
-
manifest
: URL объявления ( манифест ) файлов для автономного использования.
Для тега : <iframe>
-
sandbox
: указывает ограничения на содержимое iframe. -
seamless
: указывает на то, что iframe должен быть идеально интегрирован в документ. -
srcdoc
: HTML-код документа, отображаемого в iframe.
Для тега : <input>
-
autocomplete
: автозаполнение. -
autofocus
: устанавливает фокус при загрузке страницы. -
form
: указывает, к какой форме принадлежит элемент управления. -
formaction
: заменяет атрибут «действие» формы. Задает URL-адрес для отправки данных формы. -
formenctype
: заменяет атрибут «enctype» формы. Указывает, как форма данных должна быть закодирована перед отправкой на сервер. -
formmethod
: заменяет атрибут «метод» формы. Определяет метод HTTP для отправки данных по URL-адресу. -
formnovalidate
: заменяет атрибут формы «novalidate». Если он присутствует, поле ввода не должно проверяться при отправке. -
formtarget
: заменяет атрибут «target» формы. Указывает целевое окно, используемое при отправке формы. -
height
: определяет высоту. -
list
: обозначает «список данных», содержащий предопределенные параметры для элемента управления редактированием. -
max
: указывает максимальное значение поля ввода. -
min
: указывает минимальное значение поля ввода. -
multiple
: если присутствует, пользователь может ввести несколько значений. -
pattern
: определяет шаблон. -
placeholder
: подсказка, которая поможет пользователям заполнить поле ввода. -
required
: указывает, что значение поля ввода необходимо для отправки формы. -
step
: указывает интервал между значениями. - новые виды:
datetime
datetime-local
date
month
week
time
tel
number
range
email
url
search
color
Для тега : <link>
-
sizes
: определяет размер, высоту и ширину.
Для тега : <menu>
-
label
: метка, видимая из меню. -
type
: определяет тип отображаемого меню. По умолчанию это «список».
Для тега : <meta>
-
charset
: определяет таблицу символов для кодирования страницы.
Для тега : <ol>
-
reversed
: если есть, измените порядок отображения.
Для тега : <script>
-
async
: определяет, должен ли скрипт выполняться асинхронно или нет.
Для тега : <select>
-
autofocus
: активировать фокус на этом элементе. -
form
: определяет одну или несколько форм для «выбора».
Для тега : <style>
-
scoped
: если присутствует, стиль применяется только к родительскому и дочернему элементам.
Для тега : <textarea>
-
autofocus
: сфокусировать элемент textarea. -
dirname
: указывает имя текстовой области. -
form
: определяет одну или несколько форм для текстового поля. -
maxlength
: максимальное количество символов. -
placeholder
: определяет подсказку, чтобы помочь пользователю. -
required
: указывает, что значение элемента управления редактирования необходимо. -
wrap
: определяет, как текст отображается в текстовой области.
А также глобальные атрибуты, которые применяются ко всем тегам:
contenteditable
contextmenu
data-*
draggable
hidden
-
on*
(обработчики событий) spellcheck
P2P-соединение и распространение
- HTML 5 предоставляет возможность устанавливать соединения между пользователями PeerToPeerConnection (), а также благодаря веб-сокетам .
Изменения в тегах и атрибутах
Следующие теги удалены, поскольку их эффекты были чисто репрезентативными, что и является ролью CSS .
-
basefont
, -
big
, -
center
, -
font
, -
strike
, -
tt
, -
u
,
Теги frame
, frameset
и noframes
также были удалены; они уже устарели, потому что создавали проблемы с доступностью и удобством использования для конечного пользователя.
Также удаляются следующие теги:
-
acronym
больше не включен, потому что это вызвало много путаницы; -
applet
заменяется наobject
; -
isindex
, потому что его можно заменить использованием контроллеров формы; -
dir
устарело в пользуul
.
Наконец, noscript
он предоставляется только в версии HTML, а не в версии XML.
Устаревание атрибутов
- На теге a
- кодировка
- координаты
- имя (предпочтительнее атрибут id )
- методы
- rev
- форма
- урна
- На площади тег
- nohref
- На встроенном теге
- имя (предпочтительнее атрибут id )
- В теге формы
- принимать
- На теге на голове
- профиль
- nohref
- В теге html
- версия
- В теге iframe
- longdesc
- На входном теге
- ismap
- карта использования
- В теге img
- longdesc
- lowsrc
- имя (предпочтительнее атрибут id )
- На теге ссылки
- кодировка
- методы
- rev
- цель
- урна
- В метатеге
- схема
- На теге объекта
- архив
- ID класса
- закодированный
- кодовая база
- codetype
- объявлен
- ожидать
- На теге опции
- имя (предпочтительнее атрибут id )
- В теге param
- тип
- тип ценности
- В теге скрипта
- мероприятие
- для
- язык
- На столе теге
- размер страницы
- резюме
- На теге td
- ось
- сфера
- На теге th
- ось
API
Усовершенствования в спецификации HTML5 и связанных API.
HTML5 представляет несколько новых API-интерфейсов, которые могут помочь в создании веб-приложений и могут использоваться вместе, обеспечивая новые элементы, представленные для приложений, в том числе:
- 2D-рисунок, используемый с новым тегом холста ,
- воспроизводить видео и звуки / музыку, используемые с новыми тегами видео и аудио,
- офлайн- приложения ,
- edition в сочетании с новым атрибутом contenteditable ,
- перетаскивание в сочетании с так называемым атрибутом перетаскивания ,
- доступ к истории просмотров и страницам, чтобы добавить эту функцию истории просмотров, чтобы предотвратить проблемы с кнопкой возврата .
Кроме того, в этот стандарт интегрированы сторонние API, такие как WebGL от Khronos Group, что позволяет добавлять на страницы трехмерный контент.
Споры
К концу 2012 года кампания, возглавляемая несколькими ассоциациями в защиту цифровых свобод, включая Free Software Foundation, попыталась привлечь внимание к включению цифровых замков (DRM) в стандарт HTML5.
Примечания и ссылки
- ↑ (ru) W3C подтверждает, что HTML5 будет доступен для комментариев в мае 2011 г., www.w3.org, 14 февраля 2011 г.
- ↑ « Какие новые возможности предлагает HTML 5.1?» » ,
- ↑ (in) Рабочий проект W3C .
- ↑ (in) Ошибка 13240 — Рассмотрите возможность замены, w3.org.
- ↑ (in) W3C добавляет элемент времени обратно в HTML5, webmonkey. com, опубликовано в ноябре 2011 г.
- ↑ http://www.w3schools.com/tags/att_command_type.asp
- ↑ « <command>: The HTML Command element » в MDN Web Docs (по состоянию на 11 июля 2020 г. ) .
- ↑ (ru) Информация W3C :
- Что касается одноранговых соединений: http://www.w3.org/TR/2008/WD-html5-20080122/#peer-to-peer
- По поводу широковещательных подключений к локальной сети: http://www.w3.org/TR/2008/WD-html5-20080122/#broadcast
- По поводу TCP-соединений (в закодированном протоколе): http://www.w3.org/TR/2008/WD-html5-20080122/#tcp-connections
- Полная предлагаемая спецификация: http://www.w3.org/TR/2008/WD-html5-20080122/#network
- ↑ (in) HTML 5 снимки, позволяющие одноранговые соединения из javascript, соединения цели тезиса не будут необработанными TCP. Полную спецификацию можно найти на http://dev.w3.org/html5/websockets/ .
- ↑ (in) Умные клиенты: ReverseHTTP и WebSockets .
- ↑ (in) Позволят ли веб-приложения HTML5 устанавливать одноранговые HTTP-соединения?
- ↑ P2P, аудио и видео в меню HTML 5 .
- ↑ Скажите W3C: мы не хотим Hollyweb http://www.defectivebydesign.org/no-drm-in-html5/en
- ↑ Защита от появления DRM в HTML5 http://www.numerama.com/magazine/25802-levee-de-boucliers-contre-l-arrivee-des-drm-au-sein-du- html5.html
Смотрите также
Библиография
- (ru) Марк Пилигрим, HTML5: Работаем, О’Рейли ,, 205 с. ( ISBN 978-0-596-80602-6 )
- (ru) Джереми Кейт ( преф. Джеффри Зельдман), HTML5 для веб-дизайнеров, A Book Apart,, 87 с. ( ISBN 978-0-9844425-0-8 )
Статьи по Теме
- Микроформат, микроданные
- HTML5 на мобильных устройствах
- Идентификатор фрагмента
- Полифилл
Внешние ссылки
- (ru) Спецификация
- ( fr ) Отличия от HTML 4
- (ru) Стандартный тест на совместимость HTML5
<img src=»//fr. wikipedia.org/wiki/Special:CentralAutoLogin/start?type=1×1″ alt=»» title=»»>
HTML справочник. Все теги по категории. W3Schools на русском. Основы HTML5 для начинающих
Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих
❮ Prev Next ❯
HTML теги упорядоченные по категории
= Новые в HTML5.
Базовый HTML
Тег | Описание |
---|---|
<!DOCTYPE> | Определяет тип документа |
<html> | Определяет документ HTML |
<head> | Определяет информацию о документе |
<title> | Определяет заголовок документа |
<body> | Определяет тело документа |
<h2> to <h6> | Определяет заголовки HTML |
<p> | Определяет параграф (абзац) |
<br> | Вставляет один разрыв строки |
<hr> | Определяет тематическое изменение содержания |
<!—. ..—> | Определяет комментарий |
Форматирование
Тег | Описание |
---|---|
<acronym> | Не поддерживается в HTML5. Используйте <abbr> вместо этого. Определяет акроним |
<abbr> | Определяет аббревиатуру или акроним |
<address> | Определяет контактную информацию для автора / владельца документа / статьи |
<b> | Определяет жирный текст |
<bdi> | Изолирует часть текста, который может быть отформатирован в другом направлении от прочего текста за его пределами |
<bdo> | Переопределяет текущее направление текста |
<big> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет большой текст |
<blockquote> | Определяет раздел, что цитируется с другого источника |
<center> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет центрирование текста |
<cite> | Определяет название произведения |
<code> | Определяет фрагмент компьютерного кода |
<del> | Определяет удалённый с документа текст |
<dfn> | Представляет определяющий экземпляр термина |
<em> | Определяет подчёркнутый текст |
<font> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет шрифт, цвет и размер для текста |
<i> | Определяет часть текста альтернативным голосом или настроением |
<ins> | Определяет текст, который был вставлен в документ |
<kbd> | Определяет ввод с клавиатуры |
<mark> | Определяет отмеченный / выделенный текст |
<meter> | Определяет скалярное измерение в границах известного диапазона (датчик) |
<pre> | Определяет предварительно отформатированный текст |
<progress> | Представляет ход выполнения задания |
<q> | Определяет короткую цитату |
<rp> | Определяет, что отображать в браузерах, которые не поддерживают ruby аннотации |
<rt> | Определяет объяснение / произношение символов (для восточноазиатской типографики) |
<ruby> | Определяет аннотацию ruby (для восточноазиатской типографики) |
<s> | Определяет текст, которій больше не является правильным |
<samp> | Определяет исходные данные с компьютерной программы |
<small> | Определяет меньший текст |
<strike> | Не поддерживается в HTML5. Используйте <del> или <s> вместо этого. Определяет перечёркнутый текст |
<strong> | Определяет важный текст |
<sub> | Определяет подстрочный текст (нижний индекс) |
<sup> | Определяет надстрочный текст (верхний индекс) |
<template> | Определяет шаблон |
<time> | Определяет дату / время |
<tt> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет текст телетайпа |
<u> | Определяет текст, который должен быть стилистически отличным от обычного текста |
<var> | Определяет переменную |
<wbr> | Определяет возможный разрыв строки |
Формы и входящие данные
Тег | Описание |
---|---|
<form> | Определяет форму HTML для ввода пользователем |
<input> | Определяет элемент управления вводом |
<textarea> | Определяет многострочный элемент управления вводом (текстовая область) |
<button> | Определяет кнопку, которую можно нажимать |
<select> | Определяет выпадающий список |
<optgroup> | Определяет группу соответствующих параметров в выпадающем списке |
<option> | Определяет параметр в выпадающем списке |
<label> | Определяет метку для <input> элемента |
<fieldset> | Группы связанных элементов в форме |
<legend> | Определяет заголовок для <fieldset> элемента |
<datalist> | Определяет список предварительно определённых параметров управления вводом |
<output> | Определяет результат расчёта |
Фреймы
Тег | Описание |
---|---|
<frame> | Не поддерживается в HTML5. Определяет окно (фрейм) в наборе фреймов |
<frameset> | Не поддерживается в HTML5. Определяет набор фреймов |
<noframes> | Не поддерживается в HTML5. Определяет альтернативное содержание для пользователей, которые не поддерживают фреймы |
<iframe> | Определяет встроенный фрейм |
Изображения
Тег | Изображение |
---|---|
<img> | Определяет изображение |
<map> | Определяет карту изображения на стороне клиента |
<area> | Определяет область внутри карты изображения |
<canvas> | Используется для рисования на лету с помощью сценариев (обычно на JavaScript) |
<figcaption> | Определяет заголовок для элемента <figure> |
<figure> | Определяет автономное содержание |
<picture> | Определяет контейнер для нескольких ресурсов изображения |
<svg> | Определяет контейнер для графики SVG |
Аудио / Видео
Тег | Описание |
---|---|
<audio> | Определяет звуковой контент |
<source> | Определяет несколько медиа-ресурсов для медиа-элементов (<video>, <audio>, <picture>) |
<track> | Определяет текстовые дорожки для медиа-элементов (<video> и <audio>) |
<video> | Определяет видео или фильм |
Ссылки
Тег | Описание |
---|---|
<a> | Определяет гиперссылку |
<link> | Определяет взаимосвязь между документом и внешним ресурсом (наиболее часто используется для ссылки на внешние таблицы стилей) |
<nav> | Определяет навигационные ссылки (навигация по сайту) |
Списки
Тег | Описание |
---|---|
<ul> | Определяет неупорядоченный (ненумерованный) список |
<ol> | Определяет упорядоченный (нумерованный) список |
<li> | Определяет элемент списка |
<dir> | Не поддерживается в HTML5. Используйте <ul> вместо этого. Определяет список каталогов |
<dl> | Определяет список описаний |
<dt> | Определяет термин / имя в списке описания |
<dd> | Определяет описание / значение термина в списке описания |
Таблицы
Tег | Описание |
---|---|
<table> | Определяет таблицю |
<caption> | Определяет подпись таблицы |
<th> | Определяет ячейку заголовка в таблице |
<tr> | Определяет строку в таблице |
<td> | Определяет ячейку в таблице |
<thead> | Группирует содержание заголовка в таблице |
<tbody> | Группирует содержание тела в таблице |
<tfoot> | Группирует содержание нижнего колонтитула в таблице |
<col> | Указывает свойства столбцов для каждого столбца в элементе <colgroup> |
<colgroup> | Определяет группу с одного или нескольких столбцов в таблице для форматирования |
Стили и семантика
Тег | Описание |
---|---|
<style> | Определяет информацию о стиле для документа |
<div> | Определяет блочный раздел в документе |
<span> | Определяет строчный раздел в документе |
<header> | Определяет заголовок для документа или раздела |
<footer> | Определяет нижний колонтитул (футер) для документа или раздела |
<main> | Определяет основное содержание документа |
<section> | Определяет раздел (секцию) в документе |
<article> | Определяет статью |
<aside> | Определяет содержание, кроме содержимого страницы (в стороне) |
<details> | Определяет дополнительные детали, которые пользователь может просматривать или прятать |
<dialog> | Определяет диалоговій бокс или окно |
<summary> | Определяет видимый заголовок для элемента <details> |
<data> | Связывает заданный контент с машиночитаемым переводом |
Мета Информация
Тег | Описание |
---|---|
<head> | Определяет информацию о документе |
<meta> | Определяет метаданные HTML документа |
<base> | Указывает базовый URL-адрес / цель для всех относительных URL-адресов документа |
<basefont> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет цвет, размер и шрифт по умолчанию для всего текста документа |
Программирование
Тег | Описание |
---|---|
<script> | Определяет скрипт на стороне клиента |
<noscript> | Определяет альтернативное содержание для пользователей, которые не поддерживают сценари на стороне клиента |
<applet> | Не поддерживается в HTML5. Используйте <embed> или <object> вместо этого. Определяет встроенный апплет |
<embed> | Определяет контейнер для внешнего (не HTML) приложения |
<object> | Определяет встроенный объект |
<param> | Определяет параметр для объекта |
❮ Prev Next ❯
Пожалуйста, включите JavaScript для просмотра комментариев, предоставленных Disqus.
HTML тег фигуры
❮ Предыдущий Полный справочник HTML Далее ❯
Пример
Используйте элемент
Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Тег указывает автономный контент, такой как иллюстрации, диаграммы, фотографии, списки кодов и т. д.
Хотя содержимое элемента относится основной поток,
его положение не зависит от основного потока, и его удаление не должно влиять на поток документа.
Совет: Элемент элемент.
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.
Элемент | |||||
---|---|---|---|---|---|
<рисунок> | 8,0 | 9,0 | 4,0 | 5.1 | 11,0 |
Глобальные атрибуты
<рисунок> 9Тег 0023 также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег также поддерживает атрибуты событий в HTML.
Дополнительные примеры
Пример
Используйте CSS для оформления
Попробуйте сами »
Связанные страницы
Ссылка HTML DOM: объект Figure
Настройки CSS по умолчанию
Большинство браузеров отображают элемент со следующими значениями по умолчанию:
Верхнее поле: 1em;
нижнее поле: 1em;
левое поле: 40 пикселей;
отступ справа: 40 пикселей;
}
Попробуйте сами »
❮ Предыдущий Полный справочник HTML Далее ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
904 Справочник 9004
904
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Лучшие примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM |
3
3
3
3 | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3. CSS.
Вот как он идентифицирует автономный контент »
В тегах HTML, New
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше
- Элемент веб-изображений
- : рекомендации и HTML-код в одном полезном руководстве
- Что делает элемент
HTML Figure: вот как он идентифицирует самостоятельный контент
? - Элемент
- Дисплей
- Блок
- Использование
- Структурная
Содержание
- 1 Пример
- 2 Самосодержащий Содержание
- 3 <Рисунок
- 2 Содержание
- 3 <фиг. Пример
<рисунок>
рис. 1 Розовый фламинго.рис. 1 Розовый фламинго. рисунок>Самодостаточное содержимое
Элемент
является новым в HTML5 и является одним из тех элементов, в которых сообщество веб-разработчиков все еще немного не уверено. Вот что говорит об этом спецификация W3C:Элемент figure представляет собой единицу содержимого, необязательно с заголовком, которая является автономной, на которую обычно ссылаются как на единую единицу из основного потока документа, и который можно удалить из основного потока документа, не затрагивая смысла документа.
Кроме того, он указывает, что содержимое элемента
должно быть потоковым содержимым с необязательным заголовком до или после содержимого. Теоретически это можно использовать для нескольких типов вещей: боковых панелей, цитат, отступлений, диаграмм, изображений, вторичных медиа. На практике чаще всего используются изображения с подписями и диаграммы. Это имеет смысл, так как «рисунок» имеет значение в академическом и техническом письме — иллюстрация, изображение, диаграмма или другой визуальный контент, обычно снабженный подписью, связанный с основным содержанием, но часто отделенный от него. Однако нет причин, чтобы это нельзя было использовать для каких-то других целей.
по сравнению сЭлементы
и, судя по спецификации, используются одинаково. Некоторые люди используют
для кавычек и боковых панелей, связанных с контентом, поэтому есть некоторое совпадение. Но есть и некоторые отличия. Главное отличие, конечно, в том, что
не имеет встроенного элемента заголовка. Так что, если ваш побочный контент требует подписи, это может указывать на то, что это действительно
<цифра>
. Однако, что еще более важно,
предназначен для контента, непосредственно связанного с основным контентом, а— для «касательно связанного» контента.