Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Учебники


HTML Формы


HTML Графика


HTML Медиа


HTML API Интерфейсы


HTML Примеры


HTML Ссылки



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>



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.