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

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу 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 Canvas HTML SVG HTML 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>
Редактор кода »

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