Урок #18: изучаем атрибут id в html самостоятельно

Содержание

Examples

Example

Two buttons with equal names, that submit different values when clicked:


<form action=»/action_page.php» method=»get»>   Choose your favorite subject:   <button name=»subject» type=»submit» value=»HTML»>HTML</button>   <button name=»subject» type=»submit» value=»CSS»>CSS</button> </form>

Form Example

An HTML form with a name attribute:

<form action=»/action_page.php» method=»get» name=»myForm»>   First name: <input type=»text» name=»fname»><br>   Last name: <input type=»text» name=»lname»><br>   <input type=»button» onclick=»formSubmit()» value=»Send form data!»> </form>

Iframe Example

An <iframe> that act as a target for a link:

<iframe src=»demo_iframe.htm» name=»iframe_a»></iframe> <a href=»https://www.w3schools.com» target=»iframe_a»>W3Schools.com</a>

Map Example

An image map, with clickable areas:

<img src=»planets.gif» width=»145″ height=»126″ alt=»Planets» usemap=»#planetmap»> <map name=»planetmap»>   <area shape=»rect» coords=»0,0,82,126″ href=»sun.htm» alt=»Sun»>   <area shape=»circle» coords=»90,58,3″ href=»mercur.htm» alt=»Mercury»>   <area shape=»circle» coords=»124,58,8″ href=»venus.htm» alt=»Venus»> </map>

Meta Example

Use the name attribute to define a description, keywords, and the author of an HTML document:

<head> <meta name=»description» content=»Free Web tutorials»> <meta name=»keywords» content=»HTML,CSS,JavaScript»> <meta name=»author» content=»Hege Refsnes»> </head>

Object Example

An <object> element with a name attribute:

<object data=»helloworld.swf» width=»400″ height=»400″ name=»obj1″></object>

Output Example

Perform a calculation and show the result in an <output> element:

<form oninput=»x.value=parseInt(a.value)+parseInt(b.value)»>0   <input type=»range» id=»a» value=»50″>100   +<input type=»number» id=»b» value=»50″>   =<output name=»x» for=»a b»></output> </form>

Param Example

Set the «autoplay» parameter to «true», so the sound will start playing as soon as the page loads:

<object data=»horse.wav»>   <param name=»autoplay» value=»true»> </object>

Select Example

A drop-down list with a name attribute:

<select name=»cars»>   <option value=»volvo»>Volvo</option>   <option value=»saab»>Saab</option>   <option value=»opel»>Opel</option>   <option value=»audi»>Audi</option> </select>

Textarea Example

A text area with a name attribute:

<form action=»/action_page.php»>   <textarea name=»comment»>Enter text here…</textarea>   <input type=»submit»> </form>

Использование атрибута ID в якорях ссылок

Мы упоминали в уроке про html ссылки, что для удобства чтения в каждую ссылку элемента списка можно заключить свой идентификатор с атрибутом и переходить до нужно блока текста на странице, если текст реально очень большой. Это очень удобно и является частью юзабилити сайта.

Давайте для начала создадим якорь с идентификатором id:

<h2 id=»C4″>Chapter 4</h2>

1 <h2 id=»C4″>Chapter4</h2>

А теперь добавим закладку-якорь в ссылку

<a href=»html_demo.html#C4″>Jump to Chapter 4</a>

1 <ahref=»html_demo.html#C4″>Jump toChapter4</a>

На этом наш урок подошел к концу. Впереди нас ждет следующая полезность — работа с html iframe.

Всем хорошего дня и приятного изучения!

Using The id Attribute

The attribute specifies a unique id for an HTML element. The value of the attribute must be unique within the HTML document.

The attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#) character, followed by an id name. Then, define the CSS properties within curly braces {}.

In the following example we have an element that points to the id name «myHeader». This element will be styled according to the style definition in the head section:

Example

<!DOCTYPE html><html><head><style>#myHeader {  background-color: lightblue;  color: black;  padding: 40px;  text-align: center;} </style></head><body><h1 id=»myHeader»>My Header</h1></body></html>

Note: The id name is case sensitive!

Note: The id name must contain at least one character, and must not contain whitespaces (spaces, tabs, etc.).

Title


Знакомое название, правда? Действительно. Есть такой тег, и мы его ставим между <head> и </head>. Но сейчас я говорю именно об атрибуте, и подходит он практически к любому тегу, так как является универсальным. А нужен он в качестве подсказки при наведении. И суть состоит в том, что вы сами пишите эту подсказку. Выглядит это примерно так:

Что мы тут видим? В начале открываем абзац, потом прописываем сам атрибут и даем ему значение «Ну что ты тупишь? Будет 2». Далее пишем отображаемый текст, ну и в конце закрываем тег </p>.

Что после этого произойдет? Сохраните документ и сами увидите. При наведении на текст курсором должна появиться всплывающая подсказочка.

Атрибут formmethod

Атрибут formmethod указывает метод отправки данных формы на сервер. Атрибут formmethod переопределяет атрибут method элемента <form>. Атрибут formaction может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»). Значение атрибута formmethod по умолчанию — get. Синтаксис:

Значения атрибута formmethod

Значение Описание
get Объединяет данные формы в одну строку, присоединяет полученную строку к URL-адресу обработчика формы (указывается в атрибуте «action» или «formaction») и с помощью полученного URL-адреса передаёт данные формы на сервер. Достоинства и недостатки:
  • позволяет быстро получать результаты передачи форм с небольшим количеством информации;
  • некоторые сервера ограничивают длину URL-адреса с аргументами (обрезают часть URL-адреса с передаваемой информацией);
  • передача личных данных (пароли, номера банковских карт и т.д.) с помощью данного метода является небезопасной, так как такие данные могут быть легко перехвачены.
post Браузер устанавливает связь с сервером, на котором находится обработчик данных формы (URL-адрес обработчика указывается в атрибуте «action» или «formaction») и после установки связи передаёт (в отдельном сеансе связи) данные на сервер. Достоинства и недостатки:
  • в отличие от метода get данный метод является более безопасным в плане передачи личных данных;
  • данный метод позволяет передавать на сервер большие объёмы данных формы.

Различия между классами и идентификаторами

Вполне логичный вопрос, так чем же пользоваться в итоге, если можно применять и тот, и другой способы? Ответ простой. Идентификатор id по принципу приоритета стоит выше класса, т.е если у элемента будет сначала прописан идентификатор, а потом за другим элементов пойдет класс, то браузер сначала исполнит запрос в таблице стилей к идентификатору id, а уже потом к классу! Это нужно просто запомнить.

И еще элемент в html может иметь только один идентификатор, в то время как имя класса может использоваться несколькими элементами!

<style> /* Style the element with the id «myHeader» */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; }

/* Style all elements with the class name «city» */ .city { background-color: tomato; color: white; padding: 10px; } </style>

<!— A unique element —> <h1 id=»myHeader»>My Cities</h1>

<!— Multiple similar elements —> <h2 class=»city»>London</h2> <p>London is the capital of England.</p>

<h2 class=»city»>Paris</h2> <p>Paris is the capital of France.</p>

<h2 class=»city»>Tokyo</h2> <p>Tokyo is the capital of Japan.</p>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<style> /* Style the element with the id «myHeader» */

#myHeader {

background-colorlightblue;

colorblack;

padding40px;

text-aligncenter;

}   /* Style all elements with the class name «city» */

.city {

background-colortomato;

colorwhite;

padding10px;

}

</style>  

<!—Aunique element—>

<h1 id=»myHeader»>My Cities</h1>

<!—Multiple similar elements—>

<h2 class=»city»>London</h2>

<p>London isthe capital of England.</p>

<h2 class=»city»>Paris</h2>

<p>Paris isthe capital of France.</p>

<h2 class=»city»>Tokyo</h2>

<p>Tokyo isthe capital of Japan.</p>

Результат:

Использование id атрибута в Javascript

JavaScript может получить доступ к элементу с указанным идентификатором с помощью метода getElementById ():

Пример ниже показывает как с помощью атрибута id можно манипулировать текстом:

<script> function displayResult() { document.getElementById(«myHeader»).innerHTML = «Have a nice day!»; } </script>

1 2 3 4 5

<script>

functiondisplayResult(){

document.getElementById(«myHeader»).innerHTML=»Have a nice day!»;

} </script>

Так выглядит текст пока кнопка не зажата:

После нажатия на кнопку «Change Text» мы получим изменение текста с идентификатором #myHeader по которому обращается Яваскрипт:

Data-атрибуты HTML5

К счастью, в HTML5 была введена возможность использовать пользовательские атрибуты. Вы можете использовать любое имя в нижнем регистре с префиксом data-, например:

<div id="msglist" data-user="bob" data-list-size="5" data-maxage="180"></div>

Пользовательские data-атрибуты:

  • это строки — в них вы можете хранить любую информацию, которая может быть представлена или закодирована в виде строки, например JSON. Приведение типов должно осуществляться с помощью JavaScript
  • должны использоваться в тех случаях, когда нет подходящих элементов HTML5 или атрибутов
  • относятся только к странице. В отличие от микроформатов они должны игнорироваться внешними системами, типа поисковых систем и поисковых роботов

Пример №1 обработки на JavaScript: getAttribute и setAttribute

Все браузеры позволяют вам получить и изменить data-атрибуты с использованием методов getAttribute и setAttribute:

var msglist = document.getElementById("msglist");

var show = msglist.getAttribute("data-list-size");
msglist.setAttribute("data-list-size", +show+3);

Это работает, но должно использоваться только для поддержания совместимости со старыми браузерами.

Пример №2 обработки на JavaScript: метод data() библиотеки jQuery

Начиная с версии jQuery 1.4.3 метод data() обрабатывает data-атрибуты HTML5. Вам нет необходимости явно указывать префикс data-, так что подобный код будет работать:

var msglist = $("#msglist");

var show = msglist.data("list-size");
msglist.data("list-size", show+3);

Но как бы то ни было, имейте в виду, что jQuery пытается конвертировать значения таких атрибутов в подхдящие типы (булевы значения, числа, объекты, массивы или null) и затронет DOM. В отличие от setAttribute, метод data() физически не заменит атрибут data-list-size — если вы проверите его значение вне jQuery — оно все еще останется равным 5.

Пример №3 обработки на JavaScript: API для работы с наборами данных

И, наконец, у нас есть API для работы с наборами данных HTML5, которое возвращает объект DOMStringMap. Необходимо помнить, что data-атрибуты отображаются в объект без префиксов data-, из названий убираются знаки дефиса, а сами названия конвертируются в camelCase, например:

Имя атрибута Имя в API набора данных
data-user user
data-maxage maxage
data-list-size listSize

Наш новый код:

var msglist = document.getElementById("msglist");

var show = msglist.dataset.listSize;
msglist.dataset.listSize = +show+3;

Данный API поддерживается всеми современными браузерами, но не IE10 и ниже. Для таких браузеров существует , но, наверное, куда практичнее использовать jQuery, если вы пишете для старых браузеров.

Методы

Мето­ды — это то, как мож­но вза­и­мо­дей­ство­вать с атри­бу­та­ми, узна­вать и менять их зна­че­ния. Рас­смот­рим их на том же про­шлом при­ме­ре про класс мобиль­ни­ка. Вот какие дей­ствия мож­но совер­шать:

  • позво­нить;
  • сде­лать фото;
  • обра­бо­тать HDR-фото, что­бы было кра­си­во, когда сни­ма­ешь про­тив солн­ца;
  • запи­сать замет­ки;
  • уста­но­вить про­грам­му;
  • посмот­реть пого­ду;
  • поли­стать фот­ки;
  • пой­мать сиг­нал сото­вой сети.

Полу­ча­ет­ся, что мето­ды отве­ча­ют за то, что­бы мож­но было вза­и­мо­дей­ство­вать с клас­сом. Чаще все­го они отве­ча­ют за то, что мож­но сде­лать с атри­бу­та­ми

Если посмот­реть на спи­сок, мож­но заме­тить, что почти все мето­ды доступ­ны для выпол­не­ния извне — позво­нить, сде­лать фото, посмот­реть пого­ду и так далее. Это зна­чит, что это откры­тые мето­ды (public) — их может вызы­вать и рабо­тать с ними кто угод­но: как поль­зо­ва­тель, так и дру­гие про­грам­мы для сво­их нужд.

Но два дру­гих мето­да из спис­ка — осо­бен­ные: обра­бо­тать HDR-фото и пой­мать сиг­нал сети. Их нель­зя запу­стить напря­мую, их вызы­ва­ет опе­ра­ци­он­ная систе­ма, когда ей это нуж­но. Это зна­чит, что это закры­тые (private) мето­ды, и они доступ­ны толь­ко внут­ри само­го клас­са. Если клас­су пона­до­бит­ся что-то обра­бо­тать внут­ри себя, он ими вос­поль­зу­ет­ся, а дру­гие не смо­гут это­го сде­лать.

Ещё есть защи­щён­ные (protected) мето­ды. Их пока нет в наших при­ме­рах, но мы до них обя­за­тель­но дой­дём.

Атрибуты и свойства тега

1. Свойство align=»параметр» — определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:

  • left — выравнивание по левому краю
  • middle — выравнивание середины изображения по базовой линии текущей строки
  • bottom — выравнивание нижней границы изображения по окружающему тексту
  • top — верхняя граница изображения выравнивается по самому высокому элементу текущей строки
  • right — выравнивание по правому краю

Пример 3.1. Выравнивание изображения в html по правому краю

Преобразуется на странице в следующее:

2. Свойство alt=»текст» — подсказка/описание картинки. Выполняет сразу две важные функции:

  • Выдает подсказку при наведении
  • Если в браузере отключены изображения, то выводится этот текст

Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.

3. Свойство border=»ЧИСЛО» — задает толщину рамки обтекающей изображение. Измеряется в пикселях. Более подробно читайте в отдельной статье: свойство CSS border

Пример 3.2. Вывод картинки в html с рамкой (границей)

Преобразуется на странице в следующее:

4. Свойство bordercolor=»цвет» — задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.

Пример 3.3. Вывод картинки в html с цветной рамкой

Результат можно видеть чуть выше.

Примечание

Атрибуты border и bordercolor можно задать в стилях CSS к img:

5. Свойство height=»ЧИСЛО» — задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а мы укажем высоту 150 пикселей, то оно сжимается до 300х150 (на 25% меньше), т.е. пропорционально.

6. Свойство width=»ЧИСЛО» — задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется на 20% до 1200х960.

7. Свойство hspace=»ЧИСЛО» — задает горизонтальный отступ изображения в пикселях от других объектов html.

8. Свойство vspace=»ЧИСЛО» — задает вертикальный отступ изображения в пикселях от других объектов html.

Примечание

Вместо hspace и vspace советую применять старый и проверенный margin (более подробно про него можете прочитать в уроке про описание стилей html). Кратко напомню:

  • margin-top: X px; (X — отступ сверху)
  • margin-bottom: Y px; (Y — отступ внизу)
  • margin-left: L px; (L — отступ слева)
  • margin-right: R px; (R — отступ справа)

Задают отступы от объектов в пикселях. Допускаются отрицательные значения. По умолчанию либо наследуется значение предка, либо имеет значение 0.

Например. Отступ слева составляет 50 пикселей, а сверху 10 пикселей.

Преобразуется на странице в следующее:

В данном примере — отступ сверху составил 10 пикселей, слева 50 пикселей.

9. Свойство class=»имя_класса» — можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Tags

<!—> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> — <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

Описание аттрибутов¶

Дает подсказку для создания комбинации клавиш для текущего элемента. Этот атрибут содержит список разделенных пробелами символов. Браузер должен использовать первый имеющийся в раскладке клавиатуры символ из списка.
Это список разделенных пробелами классов элемента. Классы позволяют CSS и JavaScript выбирать и получать доступ к конкретным элементам через селекторы по классу или через функции, такие как метод .
Это перечислимый атрибут, указывающий, нужно ли предоставить пользователю возможность редактировать элемент. Если это так, браузер изменит свой виджет таким образом, чтобы позволить редактирование. Атрибут должен принимать одно из следующих значений:
Это элемента , который следует использовать в качестве контекстного меню для данного элемента.
Определяет группу атрибутов, называемых атрибутами пользовательских данных, позволяющих осуществлять обмен служебной информацией между HTML и его DOM представлением, что может быть использовано скриптами. Все такие пользовательские данные доступны через интерфейс элемента у которого установлен атрибут. Свойство предоставляет доступ к ним.
Это перечислимый атрибут указывающий направление текста в элементе. Он может принимать одно из следующих значений:
Это перечислимый атрибут, указывающий, можно ли перетаскивать элемент используя Drag and Drop API. Он может иметь одно из следующих значений:
Это перечислимый атрибут, указывающий типы содержимого, которое можно перетащить в элемент с использованием Drag and Drop API. Он может иметь одно из следующих значений:
Это логический атрибут, указывающий, что элемент уже (или еще) не актуален. Можно использовать этот атрибут, например для того, чтобы спрятать части страницы, которые не должны быть видны до завершения авторизации. Браузер не будет отображать такие элементы. Этот атрибут не должен использоваться, чтобы скрыть содержимое, которое может быть показано на законных основаниях.
Определяет идентификатор (ID), который должен быть уникален для всего документа. Он предназначен для идентификации элемента при созданиии ссылок на него, исполнении скриптов или применении стилей (посредством CSS).

, , , ,

Эти атрибуты относятся к определению микроданных.
Участвует в определении языка элемента, языка написания нередактируемых элементов или языка, на котором должны быть написаны редактируемые элементы. Содержит единственное значение в формате, определенном в документе IETF BCP47. имеет приоритет над ним.
Это перечислимый атрибут, определяющий, может ли содержимое элемента быть проверено на наличие орфорафических ошибок. Он может принимать одно из следующих значений:
Содержит описание стилей CSS, которые должны быть применены к элементу. Учтите, что рекомендуется определять стили в отдельном файле или файлах. Этот атрибут, как и элемент , предназначен, в основном, для оперативного применения стилей, например в целях тестирования.
Это числовой атрибут, указывающий, может ли элемент получать фокус, участвует ли он в последовательной навигации с клавиатуры, и если да, то в какой позиции. Может принимать одно из нескольких значений:
Содержит текст, предоставляющий консультативную информацию об элементе. Эта информация может, но не обязательно, показываться пользователю в виде всплывающей подсказки.
Это перечислимый атрибут, используемый для того, чтобы указать, следует ли переводить значения атрибутов элемента и его текстовое содержимое (содержимое узла Text) при локализации страницы. Этот атрибут может принимать следующие значения:

Атрибуты и свойства тега


1. Атрибут target=»параметр», который может принимать следующие значения:

  • _blank — открывает страницу в новом окне
  • _self — загружает страницу в текущее окно
  • _parent — загружает страницу во фрейм-родитель
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера

Пример с target

В этом случае мы получим ту же ссылку, что и в первом примере, но перейдя по ней, страница откроется в новом окне.

Чаще всего применяется значение _blank, поскольку он позволяет открывать страницу в новой вкладке. Это удобно для пользователя, поскольку у него остается открытой текущая страница в соседней вкладке.

Пример с подсказкой title

Преобразуется на странице в следующее:

В данном случае подсказка высвечивается стандартным способом. Однако можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

3. Атрибут class=»название класса» задает класс стиля для ссылки. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия. Объясню все нюансы на следующем примере.

Пример

Преобразуется на странице в следующее:

как заработать на сайте

Поясню выше описанный пример. Класс, в котором мы описали тег <a> называется list. Давайте разберемся, что значат приписки visited, link и hover.

  • a.класс:visited стиль для ссылки, который пользователь уже посетил. Это позволяет пользователю не заходить на одну и ту же страницу дважды, даже если у ссылки на эту страницу будут разные анкоры.
  • a.класс:link стиль для тех ссылок, которые ещё не посещал пользователь (можно не указывать приписку «:link», поскольку a.класс — делает то же самое).
  • a.класс:hover стиль ссылки при наведении курсора. Обычно для этого стиля делают другой цвет, а также подчеркивание, чтобы дать пользователю понять, что ссылка стала активной.

4. Атрибут rel=»параметр» — определяет отношения между текущим документом и документом, на который ведет ссылка

Этот атрибут носит важное значение для поисковых машин, но браузерами никак не трактуется. Может принимать следующее значения:

Визуально никаких отличий Вы не заметите, однако для поисковых систем эта ссылка не будет передавать вес. Поэтому мой совет для всех: закрывайте все внешние ссылки атрибутом rel=»nofollow», чтобы сохранить вес на Вашем сайте.

4.2. canonical — в случае множества дублей на сайте, указывает главную страницу среди всех дублей

Есть также множество других значений атрибута rel, но они вообще никак не влияют не на внешний вид, ни на поисковые системы, поэтому рассматривать их не вижу смысла.

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

HTML Теги

<!—…—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

HTML Ссылки

HTML по АлфавитуHTML по КатегориямHTML Атрибуты ТеговHTML Атрибуты ГлобалHTML Атрибуты СобытийHTML ЦветаHTML ХолстыHTML Аудио / ВидеоHTML Наборы символовHTML DOCTYPEsHTML Кодирование URLHTML Языковые кодыHTML Коды странHTTP Ответы сервераHTTP МетодыPX в EM конвертерГорячие клавиши

HTML Теги

<!—> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> — <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

События медиа-файлов

События, вызываемые для медиа файлов, таких как видео, изображения и аудио (могут применяться ко всем элементам HTML, но чаще всего применяются к таким элементам, как <audio>, <embed>, <img>, <object>, and <video>):

HTML Атрибуты событий медиа-файлов

Атрибут Значение Описание

onabort script Скрипт срабатывает при прерывании

oncanplay script Скрипт срабатывает, когда файл будет готов, чтобы начать проигрывание (когда будет достаточно буферизирован, чтобы начать)

oncanplaythrough script Скрипт срабатывает, когда файл может быть воспроизведен полностью (от начала до конца), не останавливаясь для буферизации

oncuechange script Скрипт, который будет запускаться, когда изменения метки в элементе <track>

ondurationchange script Скрипт срабатывает при изменении длины продолжительности медиа файла

onemptied script ScСкрипт срабатывает, когда произошла какая-то неполадка и файл стал недоступен (например при разрыве связи с интернетом)

onended script Скрипт срабатывает, когда аудио/видео файл дойдет до конца (например для вывода сообщения: спасибо за прослушивание/просмотр)

onerror script Скрипт срабатывает, если возникнет ошибка при загрузке файла

onloadeddata script Скрипт срабатывает при загрузке данных медиа файла

onloadedmetadata script Скрипт срабатывает, когда загружены мета-данные (например размер и продолжительность)

onloadstart script Скрипт срабатывает при загрузке файла прежде, чем начнет загружаться на самом деле

onpause script Скрипт срабатывает, если воспроизведение файла приостановлено (нажали паузу) пользователем или программно

onplay script Script to be run when the media is ready to start playing

onplaying script Скрипт срабатывает, когда файл готов начать воспроизводиться

onprogress script Скрипт срабатывает, когда браузер находится в процессе получения данных медиа файла

onratechange script Скрипт срабатывает, каждый раз, при изменении режима воспроизведения (например, когда пользователь переключается на медленное воспроизведение или режим быстрой перемотки)

onseeked script Скрипт запускается, когда атрибут seeked у тегов audio или video имеет значение «false», т.е.текущая позиция воспроизведения найдена

onseeking script Скрипт запускается, когда атрибут seeking у тегов audio или video имеет значение «true», т.е. текущая позиция воспроизведения перемещается

onstalled script Скрипт срабатывает, когда браузер не может получить данные медиа файла по любой причине

onsuspend script Скрипт срабатывает, когда получение данных медиа файла прекращается, до окончания полной загрузки по любой причине

ontimeupdate script Скрипт срабатывает, когда позиция воспроизведения изменилась (например, когда пользователь выбрал другую точку воспроизведения)

onvolumechange script Скрипт срабатывает каждый раз при изменении значения громкости звука (включая полное отключение звука)

onwaiting script Скрипт срабатывает, когда медиа файл остановлен, но ожидается возобновление запуска (например, когда файл делает паузу для буферизации оставшихся данных)

HTML Теги

<!—…—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

Example

<style>/* Style the element with the id «myHeader» */#myHeader {  background-color: lightblue;  color: black;  padding: 40px;  text-align: center;}/* Style all elements with the class name «city» */.city {  background-color: tomato;  color: white;  padding: 10px;} </style><!— An element with a unique id —><h1 id=»myHeader»>My Cities</h1><!— Multiple elements with same class —><h2 class=»city»>London</h2><p>London is the capital of England.</p> <h2 class=»city»>Paris</h2><p>Paris is the capital of France.</p> <h2 class=»city»>Tokyo</h2><p>Tokyo is the capital of Japan.</p>

Tip: You can learn much more about CSS in our CSS Tutorial.

Первое итоговое задание [1-4]

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

Пришло время повторить изученное и выполнить несложные задания:

Всплывающая подсказка

  • Задание
  • Ответ
  • Реши сам »

Сделайте всплывающую подсказку с текстом «Хороший сайт», который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.

Рис. 1

  • Задание
  • Ответ
  • Реши сам »

Измените размер изображения до 200 пикселей в ширину и 150 пикселей в высоту.

Ссылка на веб-сайт

  • Задание
  • Ответ
  • Реши сам »

Измените нижеприведенный код так, чтобы при щелчке кнопкой мыши по тексту «Это ссылка на сайт», вы перешли на главную страницу сайта www.wm-school.ru.

Альтернативный текст

  • Задание
  • Ответ
  • Реши сам »

Создайте для изображения альтернативный текст «Смайлик», который будет показан при наведении указателя мыши на картинку или если картинка не загрузится.

HTML Элементы HTML Фоматирование


С этим читают