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

HTML Учебник

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

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML SSE

HTML Примеры

HTML Примеры HTML Тестирование HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

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

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

HTML идентификаторы - атрибут id



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 Учебнике.


HTML Упражнения

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

Упражнение:

Добавьте HTML атрибута, чтобы сделать элемент H1 красный.

<!DOCTYPE html>
<html>
<head>
<style>
#myheader {color:red;}
</style>
</head>
<body>

<h1 >Моя главная страница</h1>

</body>
</html>

Начните упражнение