САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновыHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

HTML ФормыHTML Элементы формыHTML Тип вводаHTML Атрибуты ввода

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

HTML Идентификаторы



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

Атрибут id задает уникальный идентификатор для HTML-элемента (значение должно быть уникальным в HTML-документе).

Значение идентификатора HE может использоваться CSS и JavaScript для выполнения определенных задач для уникального элемента с указанным значением идентификатора.

В CSS, чтобы выбрать элемент с определенным идентификатором, напишите символ хэша ( # ), за ним следует идентификатор элемента:

Пример

Используйте CSS для стилизации элемента с идентификатором " myHeader":

<style>
#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
}
</style>

<h1 id="myHeader">Мой Заголовок</h1>

Результат:

Мой Заголовок

Редактор кода »

Совет: Атрибут id может использовать любой HTML элемент.

Примечание: Значение id чувствительно к регистру.

Примечание: Значение id должно содержать по крайней мере один символ и не должны содержать пробельных символов (пробелов, табуляций и т. д.).


Разница между атрибутами Сlass и ID

HTML-элемент может иметь только один уникальный идентификатор, который принадлежит к одному элементу, а имя класса может использоваться несколькими элементами:

Пример

<style>
/* Стиль элемента с ID "myHeader" */
#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
}

/* Все элементы с именем класса "city" */
.city {
    background-color: tomato;
    color: white;
    padding: 10px;
}
</style>

<!-- Уникальный элемент -->
<h1 id="myHeader">My Cities</h1>

<!-- Несколько похожих элементов -->
<h2 class="city">Лондон</h2>
<p>Лондон-столица Англии.</p>

<h2 class="city">Париж</h2>
<p>Париж-столица Франции.</p>

<h2 class="city">Токио</h2>
<p>Токио-столица Японии.</p>
Редактор кода »

Совет: Вы можете узнать гораздо больше о CSS в нашем CSS Учебнике.


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

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

Пример

Используйте атрибут id для управления текстом с помощью JavaScript:

<script>
function displayResult() {
    document.getElementById("myHeader").innerHTML = "Хорошего дня!";
}
</script>
Редактор кода »

Совет: Изучение JavaScript в главе HTML JavaScript, или в нашем JavaScript Учебнике.


Закладки с ID с ссылками

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

Закладки могут быть полезны, если Ваша страница очень длинная.

Чтобы создать закладку, необходимо сначала создать закладку, а затем добавить ссылку к ней.

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

Пример

Сначала создайте закладку с атрибутомid:

<h2 id="C4">Глава 4</h2>

Затем добавьте ссылку на закладку ("Перейти к Главе 4"), в той же странице:

<a href="#C4">Перейти к главе 4</a>

Или добавьте ссылку в закладки ("Перейти к Главе 4"), в другую страницу:

Пример

<a href="html_demo.html#C4">Перейти к Главе 4</a>
Редактор кода »

Проверьте себя с помощью упражнений!