| onafterprint | Скрипт виконується тільки після як документ надрукований. |
| onbeforeprint | Скрипт виконується перед тим, як документ надрукований. |
| onbeforeunload | Скрипт виконується коли документ ось-ось буде вивантажений |
| onhashchange | Скрипт виконується коли там відбулися зміни до частини якоря в URL |
| onload | Викликається після того як завантаження елемента завершене. |
| onmessage | Скрипт виконується коли викликане повідомлення. |
| onoffline | Спрацьовує коли браузер починає працювати в автономному режимі |
| ononline | Спрацьовує коли браузер починає працювати в режимі онлай. |
| onpagehide | Скрипт виконується коли користувач переходить на іншу сторінку сторінку. |
| onpageshow | Скрипт виконується коли користувач заходить на сторінку. |
| onpopstate | Скрипт виконується коли змінено історію одного вікна. |
| onresize | Скрипт виконується, коли розмір вікна браузера змінюється. |
| onstorage | Скрипт виконується, коли вміст Web Storage оновлюється. |
| onunload | Викликається, коли сторінка розвантажена, або вікно браузера було зачинено. |
| onblur | Скрипт виконується, коли елемент втрачає фокус. |
| onchange | Викликається в той момент, коли значення елемента змінюється. |
| oncontextmenu | Скрипт виконується коли викликається контекстне меню. |
| onfocus | Викликається в той момент, коли елемент отримує фокус. |
| oninput | Скрипт викликається коли користувач вводить дані поле. |
| oninvalid | Скрипт виконується, коли елемент недійсний. |
| onreset | Викликається, коли натискається у формі кнопка типу Reset. |
| onsearch | Викликається, коли користувач щось пише в поле пошуку (для <input type="search">) |
| onselect | Викликаєтсья після того як будь-який текст був обраний в елементі. |
| onsubmit | Викликається при відправленні форми. |
| onkeydown | Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу. |
| onkeypress | Викликається коли корисрувач натиснув на клавішу. |
| onkeyup | Викликається коли користувач відпускає клавішу. |
| onclick | Подія викликається коли користувач клацає ЛКМ по елементу. |
| ondblclick | Виникає при подвійному клацанні ЛКМ на елементі. |
| ondrag | Періодично викликається при операції перетягування. |
| ondragend | Викликається коли користувач відпускає перелягуваний елемент. |
| ondragenter | Викликається, коли перетягуваний елемент входить в цільову зону. |
| ondragleave | Викликається, коли перетягуваний елемент виходть з зони призначення. |
| ondragover | Викликається, коли перетягуваний елемент знаходиться в зоні призначення. |
| ondragstart | Викликається, коли користувач починає перетягувати елемент, або виділений текст. |
| ondrop | Викликається, коли перетягуваний елемент падає до зони призначення. |
| onmousedown | Викликається, коли користувач затискає ЛКМ на елементі. |
| onmousemove | Викликається, коли курсор миші переміщається над елементом. |
| onmouseout | Викликається, коли курсор виходить за межі елемента. |
| onmouseover | Виконується, коли курсор наводиться на елемент. |
| onmouseup | Викликається, коли користувач відпускає кнопку миші. |
| onscroll | Викликається при прокручуванні вмісту елемента (чи веб-сторінки). |
| onwheel | Викликається, коли користувач прокручує коліщатко миші. |
| oncopy | Викликається, коли користувач копіює вміст елемента. |
| oncut | Викликається, коли користувач вирізає вміст елемента. |
| onpaste | Викликається, коли користувач вставляє вміст в елемент. |
| onabort | Виконується при перериванні якоїсь події. |
| oncanplay | Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення) |
| oncanplaythrough | Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію. |
| oncuechange | Скрипт виконується коли змінюється кий в <track> елемента |
| ondurationchange | Викликається коли змінюється довжина медіа файлу. |
| onemptied | Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею). |
| onended | Викликається коли медіа елемент повністю відтворив свій зміст. |
| onshow | Викликається, коли елемент <menu> буде відображено як контекстне меню. |
| onloadedmetadata | Скрипт виконується коли метадані (розміри чи тривалість) завантажуються. |
| onloadeddata | Викликається коли медіа данні завантажено. |
| onloadstart | Викликається коли браузер тільки починає завантажувати медіа дані з сервера. |
| onpause | Викликається коли відтворення медіа даних призупинено. |
| onplay | Скрипт викликається коли медіа дані готові почати відтворення. |
| onplaying | Викликається коли розпочато відтворення медіа даних. |
| Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео. | |
| onratechange | Викликається коли змінюється швидкість відтворення медіа даних. |
| onseeked | Викликається коли атрибут seeked у тега audio або video змінює значення з true на false. |
| onseeking | Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true |
| onstalled | |
| onsuspend | Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження. |
| ontimeupdate | Викликається коли змінилася позиція відтворення елемента <audio> або <video>. |
| onvolumechange | Викликається коли змінюється гучність звуку. |
| onwaiting | Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться. |
| ontoggle | Викликається, коли користувач відкриває або закриває елемент <details>. |
| onerror | Викликається якщо при завантаженні елемента сталася помилка. |
Атрибут type | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
| HTML | |
| XHTML | |
Обязательный атрибут
Да
Значения
В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.
В HTML5 добавлены новые значения, представленные в табл. 2.
| Тип | Описание |
|---|---|
| color | Виджет для выбора цвета. |
| date | Поле для выбора календарной даты. |
| datetime | Указание даты и времени. |
| datetime-local | Указание местной даты и времени. |
| Для адресов электронной почты. | |
| number | Ввод чисел. |
| range | Ползунок для выбора чисел в указанном диапазоне. |
| search | Поле для поиска. |
| tel | Для телефонных номеров. |
| time | Для времени. |
| url | Для веб-адресов. |
| month | Выбор месяца. |
| week | Выбор недели. |
Поддержка этих значений браузерами показана в табл. 3.
| Значение | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| color | 21.0+ | 11.01+ | |||||
| date | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| datetime | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| datetime-local | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| 10.0 | 5.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.1+ | |
| month | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| number | 10.0 | 6.0+ | 10.62+ | 5.0+ | 2.3+ | 4.0+ | |
| range | 10.0 | 5.0+ | 10.62+ | 5.0+ | 23.0+ | 5.0+ | |
| search | 10.0 | 5.0+ | 11.01+ | 5.0+ | 4.0+ | 4.0+ | |
| tel | 10.0 | 5.0+ | 11.01+ | 5.0+ | 4.0+ | 3.1+ | |
| time | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| url | 10.0 | 5.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.1+ |
| week | 5.0+ | 10.62+ | 5.0+ | 5.0+ |
Значение по умолчанию
text
Пример 1
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег input, атрибут type</title>
</head>
<body>
<form action="input10.php">
<p><input type="radio" name="drink" value="rad1"> Пиво<Br>
<input type="radio" name="drink" value="rad2"> Чай<Br>
<input type="radio" name="drink" value="rad3"> Кофе</p>
<p><input type="image" src="images/imgbutton.gif"></p>
</form>
</body>
</html>Пример 2
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег input, атрибут type</title>
</head>
<body>
<form>
<p>Введите число от 1 до 10</p>
<p><input type="range" min="1" max="10"></p>
</form>
</body>
</html>Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
Синтаксис
| HTML | |
| XHTML | |
Атрибуты
- accept
- Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
- accesskey
- Переход к элементу с помощью комбинации клавиш.
- align
- Определяет выравнивание изображения.
- alt
- Альтернативный текст для кнопки с изображением.
- autocomplete
- Включает или отключает автозаполнение.
- autofocus
- Устанавливает фокус в поле формы.
- border
- Толщина рамки вокруг изображения.
- checked
- Предварительно активированный переключатель или флажок.
- disabled
- Блокирует доступ и изменение элемента.
- form
- Связывает поле с формой по её идентификатору.
- formaction
- Определяет адрес обработчика формы.
- formenctype
- Устанавливает способ кодирования данных формы при их отправке на сервер.
- formmethod
- Сообщает браузеру каким методом следует передавать данные формы на сервер.
- formnovalidate
- Отменяет встроенную проверку данных на корректность.
- formtarget
- Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
- list
- Указывает на список вариантов, которые можно выбирать при вводе текста.
- max
- Верхнее значение для ввода числа или даты.
- maxlength
- Максимальное количество символов разрешенных в тексте.
- min
- Нижнее значение для ввода числа или даты.
- multiple
- Позволяет загрузить несколько файлов одновременно.
- name
- Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
- pattern
- Устанавливает шаблон ввода.
- placeholder
- Выводит подсказывающий текст.
- readonly
- Устанавливает, что поле не может изменяться пользователем.
- required
- Обязательное для заполнения поле.
- size
- Ширина текстового поля.
- src
- Адрес графического файла для поля с изображением.
- step
- Шаг приращения для числовых полей.
- tabindex
- Определяет порядок перехода между элементами с помощью клавиши Tab.
- type
- Сообщает браузеру, к какому типу относится элемент формы.
- value
- Значение элемента.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не требуется.
Пример
HTML5IECrOpSaFx6
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег INPUT</title>
</head>
<body>
<form name="test" method="post" action="input1.php">
<p><b>Ваше имя:</b><br>
<input type="text" size="40">
</p>
<p><b>Каким браузером в основном пользуетесь:</b><Br>
<input type="radio" name="browser" value="ie"> Internet Explorer<Br>
<input type="radio" name="browser" value="opera"> Opera<Br>
<input type="radio" name="browser" value="firefox"> Firefox<Br>
</p>
<p>Комментарий<Br>
<textarea name="comment" cols="40" rows="3"></textarea></p>
<p><input type="submit" value="Отправить">
<input type="reset" value="Очистить"></p>
</form>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Вид элементов формы в браузере
Атрибут type | HTML | WebReference
Сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text">Значения
В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.
В HTML5 добавлены новые значения, представленные в табл. 2.
| Тип | Описание |
|---|---|
| color | Виджет для выбора цвета. |
| date | Поле для выбора календарной даты. |
| datetime | Указание даты и времени. |
| datetime-local | Указание местной даты и времени. |
| Для адресов электронной почты. | |
| number | Ввод чисел. |
| range | Ползунок для выбора чисел в указанном диапазоне. |
| search | Поле для поиска. |
| tel | Для телефонных номеров. |
| time | Для времени. |
| url | Для веб-адресов. |
| month | Выбор месяца. |
| week | Выбор недели. |
Поддержка этих значений браузерами показана в табл. 3.
| Значение | ||||||
| color | 14 | 20 | 11.5 | 11 | 29 | |
| date | 13 | 20 | 10.1 | 57 | ||
| datetime | 11 | 20 | 10.1 | |||
| datetime-local | 11 | 20 | 10.1 | |||
| 10 | 11 | 5 | 10.1 | 5 | 4 | |
| month | 13 | 20 | 10.1 | |||
| number | 10 | 11 | 6 | 10.1 | 5 | 29 |
| range | 10 | 11 | 4 | 10.1 | 3.1 | 23 |
| search | 10 | 11 | 5 | 10.1 | 5 | 4 |
| tel | 10 | 11 | 5 | 10.1 | 5 | 4 |
| time | 13 | 20 | 10.1 | 57 | ||
| url | 10 | 11 | 8 | 15 | 6 | 4 |
| week | 13 | 20 | 10.1 |
Значение по умолчанию
Пример
<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>input, атрибут type</title> </head> <body> <form action=»input10.php»> <p><input type=»radio» name=»drink» value=»rad1″> Пиво<Br> <input type=»radio» name=»drink» value=»rad2″> Чай<Br> <input type=»radio» name=»drink» value=»rad3″> Кофе</p> <p><input type=»image» src=»image/imgbutton.gif»></p> </form> </body> </html><!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>input, атрибут type</title> </head> <body> <form> <p>Введите число от 1 до 10</p> <p><input type=»range» min=»1″ max=»10″></p> </form> </body> </html>
Примечание
Android для типа number не поддерживает атрибуты step, min и max.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 24.03.2018
Редакторы: Влад Мержевич
Атрибуты HTML-тегов — шпаргалка
С тем, что такое HTML теги, мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом
вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.
Как писать атрибуты?
Атрибуты — зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично — это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?
Значения с атрибутами записываются в таком формате:
Атрибут=”значение”
lang=”en” Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.
<p align=”center”>Абзац</p>
Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.
Универсальные атрибуты
Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.
- accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.
В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:
<a acceskey=”1” href=”https://youtube.com”>Ссылка будет открываться по нажатию сочетания клавиш с единицей</a>
- class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
- С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true — правку разрешить, false — запретить.
- При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге <menu>, а атрибуту contextmenu присваивается его идентификатор.
- dir определяет направление текста: слева направо (ltr) или справа налево (rtl).
- draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
- dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy), перемещать (move) или создать на него ссылку (link).
- hidden — атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true — скрывается.
- id задаёт идентификатор элемента — своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_). Русских букв содержать не может.
- lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский — ru, английский — en и т. п.).
- spellcheck включает (true) или отключает (false) проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.
- style позволяет задать оформление элемента с помощью CSS-кода.
- tabindex даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута — целое положительное число.
- title — всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.
<a title=”Ссылка, ведущая на Яндекс” href=”http://yandex.ru”>Поиск</a>
- translate разрешает (yes) или запрещает (no) перевод содержимого тега.
- align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left), по правому краю (right), по центру (center) или по ширине (justify). Для изображений (тег <img>
) также доступно выравнивание по верхней границе самого высокого элемента строки (top), по нижней границе (bottom), а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.
Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.
Пример использования атрибутов
В качестве примера рассмотрим строку HTML-кода:
<p contenteditable=”true”>Этот текст можно редактировать</p>
Вся строка создаёт абзац текста, который пользователь может в браузере самостоятельно изменять.
Разберём каждый элемент строки.
<p> — открывающий тег контейнера, хранящего абзац.
</p> — закрывающий тег.
Между символами > и < расположен текст Этот текст можно редактировать. Это — надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.
contenteditable=”true” — это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable=”true”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true, написанное в кавычках через знак равно, редактирование разрешает:
Атрибут=”значение”
contenteditable=”true”Полезные ссылки:
Стандарты кодирования в HTML5
Зачастую веб-разработчики даже не подозревают о существовании определенных стандартов кодирования в HTML. Однако в период с 2000 по 2010 годы многие веб-разработчики перешли с HTML на XHTML. При этом XHTML вынудил разработчиков писать валидный и «хорошо сформированный» код. HTML5 же, когда дело доходит до валидации кода, допускает некоторую небрежность.
Тем не менее, единообразие по стилю облегчит другим понимание вашего HTML кода.
Возможно, когда-нибудь программам, вроде программ чтения XML данных, потребуется прочитать ваш HTML код. Таким образом, использование хорошо сформированного, близкого к XHTML синтаксиса будет вполне разумным подходом.
Всегда следите, чтобы ваш код был аккуратным, чистым и хорошо сформированным.
Используйте корректный тип документа
На первой строке всегда декларируйте тип документа:
<!DOCTYPE html>
Если вы хотите соблюдать последовательность с написанием тегов в нижнем регистре, то вы можете использовать следующее определение типа документа:
<!doctype html>
Имена элементов пишите маленькими буквами
HTML5 допускает одновременное использование в именах элементов больших и маленьких букв. Однако, лучше всегда использовать только маленькие буквы. Это объясняется следующими соображениями:
- Смешение больших и маленьких букв в именах тегов считается плохой практикой
- Разработчики обычно используют маленькие буквы (как в XHTML)
- Написание в нижнем регистре выглядит чище
- В нижнем регистре легче писать
Плохо:
<SECTION>
<p>Это параграф текста.</p>
</SECTION>
Очень плохо:
<Section>
<p>Это параграф текста.</p>
</SECTION>
Хорошо:
<section>
<p>Это параграф текста.</p>
</section>
Закрывайте все HTML элементы
В HTML5 вы не обязаны закрывать все элементы (например, элемент <p>). Тем не менее, мы все же рекомендуем закрывать все HTML элементы.
Плохо:
<section>
<p>Это параграф текста.
<p>Это параграф текста.
</section>
Хорошо:
<section>
<p>Это параграф текста.</p>
<p>Это параграф текста.</p>
</section>
Закрывайте пустые HTML элементы
В HTML5 закрывать или нет пустые элементы зависит от желания веб-разработчика.
Допустимо:
<meta charset="utf-8">
Также допустимо:
<meta charset="utf-8" />
Тем не менее, закрывающая косая черта (/) ОБЯЗАТЕЛЬНА в XHTML и XML.
Если ожидается, что к вашей веб-странице будут обращаться XML приложения, то в пустых HTML элементах лучше использовать закрывающую косую черту!
В именах атрибутов используйте маленькие буквы
В HTML5 при написании имен атрибутов можно смешивать большие и маленькие буквы.
Мы рекомендуем в именах атрибутов всегда ис
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Элемент <pre> определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику. В отличие от тега <plaintext>, использование которого осуждается в HTML 4, внутри контейнера <pre> допустимо применять любые теги кроме следующих: <big>, <img>, <object>, <small>, <sub> и <sup>.
Синтаксис
<pre>Текст</pre>Закрывающий тег
Обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег PRE</title>
</head>
<body>
<pre>
- -----
----- |-----
||----| ----||
||----- -----||
||-----| |-----||
|| ----- ------||
||- ----| |------||
||---||-- -------||
||--|| --| |-------||
|| -|| |-- --- - --||
|| -|| --|-|--| - ---|
|---|| |-----| |-----|
|---|| |---- |-----|
|----| --- |-----|
|----- ------|
</pre>
</body>
</html>Результат данного примера показан ниже.
Рис. 1. Вид текста, оформленного с помощью тега <pre>
HTML-тег p
Пример
Абзац размечен следующим образом:
Это некоторый текст в абзаце.
Попробуй сам »Ниже приведены примеры «Попробуйте сами».
Определение и использование
Тег
автоматически добавляют одну пустую строку до и после каждого
Подсказка: Используйте CSS для стилизации абзацев.
Поддержка браузера
| Элемент | |||||
|---|---|---|---|---|---|
| да | да | да | да | да |
Глобальные атрибуты
Тег
Атрибуты события
Тег
также поддерживает атрибуты событий в HTML.
Дополнительные примеры
Пример
Выровнять текст в абзаце (с помощью CSS):
Это некоторый текст в абзаце.
Попробуй сам "Пример
Стиль абзацев с помощью CSS:
р {
цвет: темно-синий;
текстовый отступ: 30px;
преобразование текста: верхний регистр;
}
Lorem Ipsum Dolor Sit Amet, Concetetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut Enim Ad Minim Veniam, Quis Nostrud упражнение Ullamco Labouris Ниси ут аликвип ex ea Коммандо. Duis aute irure Долор в репереендерит в завитушке велит esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat непроизведенный, иск в виновнике дезеррант моллит аним ид трудоум.
Пример
Подробнее по пунктам:
Этот параграф
содержит много строк
в исходном коде,
но браузер
игнорирует это.
Пример
стихотворение проблемы в HTML:
Моя Бонни лежит над океаном.
Моя Бонни лежит над морем.
My
Бонни лежит над океаном.
О, верни мне мою Бонни.
Связанные страницы
Учебник HTML: абзацы HTML
HTML DOM ссылка: объект абзаца
Настройки CSS по умолчанию
Большинство браузеров отображают элемент
Пример
р {
дисплей: блок;
margin-top: 1em;
на полях: 1em;
поле слева: 0;
margin-right: 0;
}
HTML абзацы
Абзац всегда начинается с новой строки и обычно представляет собой блок текста.
HTML абзацы
Элемент HTML
Абзац всегда начинается с новой строки, и браузеры автоматически добавляют пробел (поле) до и после абзаца.
HTML-дисплей
Вы не можете быть уверены, как будет отображаться HTML.
Большие или маленькие экраны и измененные размеры окон приведут к различным результатам.
С HTML вы не можете изменить отображение, добавив дополнительные пробелы или дополнительные строки в ваш HTML-код.
Браузер автоматически удалит все лишние пробелы и строки, когда страница отображается:
Пример
Этот параграф
содержит много строк
в исходном коде,
, но браузер
игнорирует его.
Этот пункт
содержит
много мест
в источнике
код,
, но браузер
игнорирует
Это.
Горизонтальные правила HTML
Тег
определяет тематический разрыв в HTML-странице и чаще всего
отображается как горизонтальное правило. Элемент
используется для разделения содержимого (или определения изменения) в HTML
страница: Пример
Это заголовок 1
Это некоторый текст.
Это заголовок 2
Это другой текст.
<ч>
Попробуй сам " Тег
Разрывы строк HTML
Элемент HTML
определяет разрыв строки.
Используйте
, если вы хотите, чтобы разрыв строки (новая строка) не начинался с нового абзаца:
Тег
является пустым тегом, что означает, что у него нет конечного тега.
Задача Поэмы
Это стихотворение будет отображаться в одной строке:
Пример
Моя Бонни лежит
океан. Моя Бонни лежит над морем.
Моя Бонни
лежит над океаном.
О, верни мне мою Бонни.
Попробуй сам "
Решение - HTML-элемент
Элемент HTML
определяет предварительно отформатированный текст.
Текст внутри элемента
отображается шрифтом фиксированной ширины (обычно
Курьер), и это сохраняет как пробелы, так и разрывы строк: Пример
Моя Бонни лежит над океаном. Моя Бонни лежит над морем.
Моя Бонни лежит над
океан.
О, верни мне мою Бонни.
Попробуй сам "
HTML Упражнения
Проверьте себя с помощью упражнений
Упражнение:
Используйте правильный тег HTML, чтобы добавить абзац с текстом «Hello World!».
<Тело>
Отправить ответ » Начните упражнение
Справочник по тегам HTML
Справочник по тегам W3Schools содержит дополнительную информацию об элементах HTML и их атрибутах.
Tag Описание Определяет абзац <час> Определяет тематическое изменение содержания
Вставляет один разрыв строки Определяет предварительно отформатированный текст
, Ссылка на элемент HTML - по категории Tag Описание Определяет вид документа Определяет HTML-документ Содержит метаданные / информацию для документа </td><td> Определяет заголовок для документа</td></tr><tr><td><body></td><td> Определяет тело документа</td></tr><tr><td><div> до<h6></td><td> Определяет заголовки HTML</td></tr><tr><td><p></td><td> Определяет абзац</td></tr><tr><td> <br></td><td> Вставляет один разрыв строки</td></tr><tr><td> <900><td> Определяет тематическое изменение содержания</td></tr><tr><td> <! -...--></td><td> Определяет комментарий</td></tr><tr><th> Tag</th><th> Описание</th></tr><tr><td> <аббревиатура></td><td> Не поддерживается в HTML5. Используйте вместо этого <abbr>. <br/> Определяет аббревиатуру</td></tr><tr><td> <abbr></td><td> Определяет аббревиатуру или аббревиатуру</td></tr><tr><td> <адрес></td><td> Определяет контактную информацию автора / владельца документа / статьи</td></tr><tr><td> <900><td> Определяет жирный текст</td></tr><tr><td> <bdi></td><td> Изолирует часть текста, которая может быть отформатирована в другом направлении.
из другого текста за его пределами</td></tr><tr><td> <bdo></td><td> Переопределяет текущее направление текста</td></tr><tr><td> <большой></td><td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Определяет большой текст</td></tr><tr><td><blockquote></td><td> Определяет раздел, который цитируется из другого источника</td></tr><tr><td> <центр></td><td> Не поддерживается в HTML5. Вместо этого используйте CSS. <br/> Определяет центрированный текст</td></tr><tr><td><td> Определяет название произведения</td></tr><tr><td> <code></td><td> Определяет кусок компьютерного кода</td></tr><tr><td> <del></td><td> Определяет текст, который был удален из документа</td></tr><tr><td> <dfn></td><td> Определяет термин, который будет определен в контенте</td></tr><tr><td> <em></td><td> Определяет выделенный текст</td></tr><tr><td> <font></td><td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Определяет шрифт, цвет и размер текста</td></tr><tr><td> <я></td><td> Определяет часть текста альтернативным голосом или настроением</td></tr><tr><td> <ins></td><td> Определяет текст, который был вставлен в документ</td></tr><tr><td> <кбд></td><td> Определяет ввод с клавиатуры</td></tr><tr><td> <отметка></td><td> Определяет помеченный / выделенный текст</td></tr><tr><td> <метр></td><td> Определяет скалярное измерение в известном диапазоне (датчик)</td></tr><tr><td> <pre></td><td> Определяет предварительно отформатированный текст</td></tr><tr><td> <прогресс></td><td> Представляет ход выполнения задачи</td>.</tr><tr><td> <q></td><td> Определяет короткую цитату</td></tr><tr><td> <rp></td><td> Определяет, что отображать в браузерах, которые не поддерживают рубиновые аннотации</td></tr><tr><td><td> Определяет объяснение / произношение символов (для восточноазиатских
типография)</td></tr><tr><td> <ruby></td><td> Определяет рубиновую аннотацию (для восточноазиатской типографии)</td></tr><tr><td> <s></td><td> Определяет текст, который больше не является правильным</td></tr><tr><td> <образец></td><td> Определяет пример вывода из компьютерной программы</td></tr><tr><td> <маленький></td><td> Определяет меньший текст</td></tr><tr><td> <забастовка></td><td> Не поддерживается в HTML5.Вместо этого используйте <del> или <s>. <br/> Определяет зачеркнутый текст</td></tr><tr><td> <strong></td><td> Определяет важный текст</td></tr><tr><td> <sub></td><td> Определяет подписанный текст</td></tr><tr><td> <sup></td><td> Определяет надстрочный текст</td></tr><tr><td> <шаблон></td><td> Определяет контейнер для контента, который должен быть скрыт при загрузке страницы</td></tr><tr><td> <время></td><td> Определяет определенное время (или дату / время)</td></tr><tr><td> <tt></td><td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Определяет телетайпный текст</td></tr><tr><td> <u></td><td> Определяет некоторый текст, который не выделен и оформлен иначе, чем обычный
текст</td></tr><tr><td> <var></td><td> Определяет переменную</td></tr><tr><td> <wbr></td><td> Определяет возможный разрыв строки</td></tr><tr><th> Tag</th><th> Описание</th></tr><tr><td> <форма></td><td> Определяет форму HTML для пользовательского ввода</td></tr><tr><td> <вход></td><td> Определяет элемент управления вводом</td></tr><tr><td><textarea> </td>
<td> Определяет управление многострочным вводом (текстовая область) </td>
</tr>
<tr>
<td> <кнопка> </td>
<td> Определяет нажимаемую кнопку </td>
</tr>
<tr>
<td> <выбрать> </td>
<td> Определяет раскрывающийся список </td>
</tr>
<tr>
<td> <optgroup> </td>
<td> Определяет группу связанных параметров в раскрывающемся списке </td>
</tr>
<tr>
<td> <опция> </td>
<td> Определяет параметр в раскрывающемся списке </td>
</tr>
<tr>
<td> <ярлык> </td>
<td> Определяет метку для элемента <input> </td>
</tr>
<tr>
<td> <fieldset> </td>
<td> Группирует связанные элементы в форме </td>
</tr>
<tr>
<td> <легенда> </td>
<td> Определяет заголовок для элемента <fieldset> </td>
</tr>
<tr>
<td> <datalist> </td>
<td> Указывает список предопределенных параметров для элементов управления вводом </td>.
</tr>
<tr>
<td> <вывод> </td>
<td> Определяет результат расчета </td>
</tr>
<tr>
<th> Tag </th>
<th> Описание </th>
</tr>
<tr>
<td> <img> </td>
<td> Определяет изображение </td>
</tr>
<tr>
<td> <карта> </td>
<td> Определяет клиентскую карту изображения </td>
</tr>
<tr>
<td> <область> </td>
<td> Определяет область внутри карты изображения </td>
</tr>
<tr>
<td> <холст> </td>
<td> Используется для рисования графики на лету с помощью сценариев (обычно JavaScript) </td>
</tr>
<tr>
<td> <figcaption> </td>
<td> Определяет заголовок для элемента <figure> </td>
</tr>
<tr>
<td> <цифра> </td>
<td> Указывает автономный контент </td>
</tr>
<tr>
<td> <изображение> </td>
<td> Определяет контейнер для нескольких ресурсов изображений </td>
</tr>
<tr>
<td> <svg> </td>
<td> Определяет контейнер для графики SVG </td>
</tr>
<tr>
<th> Tag </th>
<th> Описание </th>
</tr>
<tr>
<td> <ul> </td>
<td> Определяет неупорядоченный список </td>
</tr>
<tr>
<td> <ol> </td>
<td> Определяет упорядоченный список </td>
</tr>
<tr>
<td> <li> </td>
<td> Определяет элемент списка </td>
</tr>
<tr>
<td> <dir> </td>
<td> Не поддерживается в HTML5.Используйте вместо этого <ul>. <br/> Определяет список каталогов </td>
</tr>
<tr>
<td> <900>
<td> Определяет список описания </td>
</tr>
<tr>
<td> <dt> </td>
<td> Определяет термин / имя в списке описания </td>
</tr>
<tr>
<td> <дд> </td>
<td> Определяет описание термина / имени в списке описания </td>
</tr>
<tr>
<th> Tag </th>
<th> Описание </th>
</tr>
<tr>
<td> <стол> </td>
<td> Определяет таблицу </td>
</tr>
<tr>
<td> <подпись> </td>
<td> Определяет заголовок таблицы </td>
</tr>
<tr>
<td> th </td>
<td> Определяет ячейку заголовка в таблице </td>
</tr>
<tr>
<td> <tr> </td>
<td> Определяет строку в таблице </td>
</tr>
<tr>
<td> <тд> </td>
<td> Определяет ячейку в таблице </td>
</tr>
<tr>
<td> <thead> </td>
<td> Группирует содержимое заголовка в таблице </td>
</tr>
<tr>
<td> <tbody> </td>
<td> Группирует содержание тела в таблице </td>
</tr>
<tr>
<td> <tfoot> </td>
<td> Группирует нижний колонтитул в таблице </td>
</tr>
<tr>
<td> <col> </td>
<td> Задает свойства столбца для каждого столбца в элементе <colgroup> </td>.
</tr>
<tr>
<td> <colgroup> </td>
<td> Указывает группу из одного или нескольких столбцов в таблице для форматирования </td>.
</tr>
<tr>
<th> Tag </th>
<th> Описание </th>
</tr>
<tr>
<td> <стиль> </td>
<td> Определяет информацию о стиле для документа </td>
</tr>
<tr>
<td> <div> </td>
<td> Определяет раздел в документе </td>
</tr>
<tr>
<td> <span> </td>
<td> Определяет раздел в документе </td>
</tr>
<tr>
<td> <header> </td>
<td> Определяет заголовок для документа или раздела </td>
</tr>
<tr>
<td> <нижний колонтитул> </td>
<td> Определяет нижний колонтитул для документа или раздела </td>
</tr>
<tr>
<td> <основной> </td>
<td> Указывает основное содержание документа </td>.
</tr>
<tr>
<td> <раздел> </td>
<td> Определяет раздел в документе </td>
</tr>
<tr>
<td> <артикул> </td>
<td> Определяет артикул </td>
</tr>
<tr>
<td> <в сторону> </td>
<td> Определяет содержимое помимо содержимого страницы </td>
</tr>
<tr>
<td> <подробно> </td>
<td> Определяет дополнительные детали, которые пользователь может просматривать или скрывать </td>
</tr>
<tr>
<td> <диалог> </td>
<td> Определяет диалоговое окно или окно </td>
</tr>
<tr>
<td> <резюме> </td>
<td> Определяет видимый заголовок для элемента <details> </td>
</tr>
<tr>
<td> <данные> </td>
<td> Добавляет машиночитаемый
перевод данного контента </td>
</tr>
<tr>
<th> Tag </th>
<th> Описание </th>
</tr>
<tr>
<td> <head> </td>
<td> Определяет информацию о документе </td>
</tr>
<tr>
<td> <мета> </td>
<td> Определяет метаданные о документе HTML </td>
</tr>
<tr>
<td> <база> </td>
<td> Определяет базовый URL / цель для всех относительных URL в документе </td>
</tr>
<tr>
<td> <basefont> </td>
<td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Указывает цвет, размер и шрифт по умолчанию для всего текста в документе </td>
</tr>
<tr>
<th> Tag </th>
<th> Описание </th>
</tr>
<tr>
<td> <скрипт> </td>
<td> Определяет клиентский скрипт </td>
</tr>
<tr>
<td> <noscript> </td>
<td> Определяет альтернативный контент для пользователей, которые не поддерживают
клиентские скрипты </td>
</tr>
<tr>
<td> <апплет> </td>
<td> Не поддерживается в HTML5.Вместо этого используйте <embed> или <object>. <br/> Определяет встроенный апплет </td>
</tr>
<tr>
<td> <embed> </td>
<td> Определяет контейнер для внешнего (не HTML) приложения. </td>
</tr>
<tr>
<td> <объект> </td>
<td> Определяет внедренный объект </td>
</tr>
<tr>
<td> <param> </td>
<td> Определяет параметр для объекта </td>
</tr>
</table>.<div> CSS - Может тег в теге? </h2>
Переполнение стека
<ol role="presentation">
<li>
Товары
</li>
<li>
Клиенты
</li>
<li>
Случаи использования
</li>
</ol>
<ol>
<li>
Переполнение стека
Публичные вопросы и ответы
</li>
<li>
Команды
Частные вопросы и ответы для вашей команды
</li>
<li>
предприятие
Частные вопросы и ответы для вашего предприятия
</li>
<li>
работы
Программирование и связанные с ним технические возможности карьерного роста
</li>
<li>
Талант
Нанимать технический талант
</li>
<li>
реклама
Связаться с разработчиками по всему миру
</li>
</ol>
,<div class='yarpp-related yarpp-related-none'>
<p>No related posts.</p>
</div>
</div>
<footer class="entry-footer">
<span class="cat-links">Категория: <a href="https://forjobathome.ru/category/raznoe" rel="category tag">Разное</a></span> </footer>
</div>
</article>
<nav class="navigation post-navigation" aria-label="Записи">
<h2 class="screen-reader-text">Навигация по записям</h2>
<div class="nav-links"><div class="nav-previous"><a href="https://forjobathome.ru/raznoe/versii-html-versii-i-standarty-html-i-xhtm.html" rel="prev">Версии html: Версии и стандарты HTML и XHTM.</a></div><div class="nav-next"><a href="https://forjobathome.ru/raznoe/dannaya-rabota-sinonimy-k-slovu-dannaya-rabota.html" rel="next">Данная работа: Синонимы к слову «данная работа»</a></div></div>
</nav>
<div id="comments" class="comments-area">
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/p-v-html-teg-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://forjobathome.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='5847' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div></section><footer class="wrapper wrap-footer"><section class="wrapper footer-widget"><div class="container"><div class="row"></div></div></section><section id="colophon" class="wrapper site-footer" ><div class="container"><div class="row"><div class="xs-12 col-sm-6 col-md-6"><div class="site-info"><p class="endtext"><strong>© 2007-2019 forjobathome.ru<br></strong> Использование материалов сайта разрешено и <br>всячески приветствуется при одном условии:<br> <a href="./copyright.htm" title="" class="stext7">наличие гиперссылки</a> на данный ресурс!</p></div></div><div class="xs-12 col-sm-6 col-md-6"><div class="footer-menu"><nav id="footer-site-navigation" class="footer-main-navigation" role="navigation" aria-label="footer-menu"><div class="menu-footer-menu-container"></div></nav></div></div></div></div></section></footer> <a id="gotop" class="greenturtle-back-to-top" href="#page"><i class="fa fa-angle-up"></i></a></div><div style="display:none"></div><style type="text/css">.pgntn-page-pagination{text-align:left !important}.pgntn-page-pagination-block{width:60% !important;padding:0}.pgntn-page-pagination a{color:#1e14ca !important;background-color:#fff !important;text-decoration:none !important;border:1px solid #ccc !important}.pgntn-page-pagination a:hover{color:#000 !important}.pgntn-page-pagination-intro,.pgntn-page-pagination .current{background-color:#efefef !important;color:#000 !important;border:1px solid #ccc !important}.archive #nav-above,.archive #nav-below,.search #nav-above,.search #nav-below,.blog #nav-below,.blog #nav-above,.navigation.paging-navigation,.navigation.pagination,.pagination.paging-pagination,.pagination.pagination,.pagination.loop-pagination,.bicubic-nav-link,#page-nav,.camp-paging,#reposter_nav-pages,.unity-post-pagination,.wordpost_content .nav_post_link,.page-link,.page-links,#comments .navigation,#comment-nav-above,#comment-nav-below,#nav-single,.navigation.comment-navigation,comment-pagination{display:none !important}.single-gallery .pagination.gllrpr_pagination{display:block !important}</style><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://forjobathome.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <script defer src="https://forjobathome.ru/wp-content/cache/autoptimize/js/autoptimize_0030dea6373de79f37b16b5061ee8be9.js"></script></body></html>