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

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 Компьютерный код HTML5 Семантика HTML5 Синтаксис HTML Сущность HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML в XHTML

HTML Формы

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

HTML Графика

HTML5 Canvas HTML5 SVG

HTML Медиа

HTML Медиа формат HTML5 Видео HTML5 Аудио HTML Плагины HTML YouTube

HTML API

HTML5 Геолокация HTML5 Перетаскивание HTML5 Веб хранилище HTML5 Веб работник HTML5 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 Идентификаторы



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>

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