HTML атрибут id используется для указания уникального идентификатора 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 с ссылками
HTML-закладки используются, чтобы позволить читателям перейти к определенным частям веб-сайта страница.
Закладки могут быть полезны, если Ваша страница очень длинная.
Чтобы создать закладку, необходимо сначала создать закладку, а затем добавить ссылку к ней.
При нажатии на ссылку страница будет прокручиваться до места, в котором закладка.
Пример
Сначала создайте закладку с атрибутомid:
<h2 id="C4">Глава 4</h2>
Затем добавьте ссылку на закладку ("Перейти к Главе 4"), в той же странице:
<a href="#C4">Перейти к главе 4</a>
Или добавьте ссылку в закладки ("Перейти к Главе 4"), в другую страницу:
<a href="html_demo.html#C4">Перейти к Главе 4</a>
Попробуйте сами »
Использование атрибута id в JavaScript
JavaScript может получить доступ к элементу с определенным ID с помощью метода getElementById():
Используйте атрибут id для управления текстом с помощью JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Хорошего дня!";
}
</script>
Попробуйте сами »
Совет: Изучение JavaScript в главе HTML JavaScript, или в нашем JavaScript Учебнике.