Элемент HTML
HTML-документ состоит из элементов. Каждый элемент содержит две пары угловых скобок (‹› и ‹/›), которые составляют открывающий и закрывающий теги для этого элемента. Есть несколько специальных элементов, которые не имеют закрывающего тега (‹/›). Известно, что эти элементы имеют «самозакрывающиеся» теги, потому что все, что им нужно для правильной работы, — это первый и открывающий тег.
Что такое атрибут HTML?
Внутри тегов элемента должно быть ключевое слово, а иногда и ряд атрибутов в диапазоне от нуля до трех или пяти. Давайте посмотрим на полный элемент, например:
<body id=“main”> </body>
В элементе, указанном выше, «body» — это ключевое слово, а «id» — это атрибут со значением «main». Атрибуты используются в элементе для многих конкретных целей. Присвоенные им значения используются для управления поведением элементов.
Общие атрибуты
Атрибуты, подпадающие под эту категорию, очень важны в HTML5. Они включены в теги HTML, чтобы языки сценариев, такие как PHP и JavaScript, могли напрямую взаимодействовать с элементами через них. Они включают:
(i) класс: определенный класс присваивается группе элементов, имеющих одинаковые характеристики.
(ii) id: предоставляет уникальную идентификацию отдельным элементам, что позволяет получить доступ к определенным элементам из файлов CSS и Javascript.
(iii) стиль: с помощью этого атрибута встроенные стили CSS можно применять непосредственно к отдельным элементам в файле HTML.
(iv) имя: объявляет пользовательское имя для элементов формы.
Конкретные атрибуты
Эти атрибуты ни в коем случае не являются маловажными, они используются только для специального использования, которое требуется нечасто.
(i) lang: определяет язык, используемый в файле HTML.
(ii) href: гипертекстовая ссылка, которая используется для установления связи между файлом HTML и другим файлом или файлом HTML и внешней веб-страницей.
(iii) src: местоположение внешних мультимедийных файлов, таких как изображения, видео, аудио и файлы Javascript, назначается этому атрибуту, известному как «источник».
(iv) rel: этот атрибут присутствует только в элементе ‹link›. Он идентифицирует предоставленную ссылку как таблицу стилей.
Введите приведенный ниже пример кода в редакторе кода и отобразите его в браузере, чтобы увидеть, как работает каждая часть файла.
Глобальная структура HTML
Все элементы, без которых нельзя обойтись в файле HTML, составляют его глобальную структуру. Давайте рассмотрим каждый из них в общих чертах.
Ключевое слово «!DOCTYPE» необходимо для того, чтобы браузеры интерпретировали документ как код HTML5. Он должен быть написан на первой строке документа без пробелов и строк перед ним.
Этот элемент отмечает начало и конец древовидной структуры HTML. Это корневой элемент, который объединяет все остальные элементы.
Элемент head составляет первый раздел HTML-документа. Элементы, содержащиеся в элементе head, являются элементами с атрибутами конфигурации и определения.
Второй раздел HTML-документа содержится в элементе body. Этот раздел является самым сложным, поскольку он содержит элементы, которые далее разбиты на подразделы. В будущем вы узнаете об элементах строения тела.
Оба элемента имеют самозакрывающиеся теги и содержатся внутри элемента head, выполняя очень разные роли.
Элемент meta имеет собственный специальный набор атрибутов, который включает «набор символов», «имя» и «контент», которые необходимы для определения;
- Кодировка набора символов документа, которая является стандартом utf-8.
- Описание документа
- Ключевые слова документа
- Окно просмотра документа
Элемент link используется для включения стилей, скриптов, изображений или значков из внешних источников в документ HTML.
Название веб-страницы определяется между тегами элемента title. Определенный заголовок не отображается в содержимом веб-страницы при отображении в браузере. Он виден только на панели задач браузера. Заголовок всегда помещается внутри элемента head.
Вывод
Чтобы закончить эту неловко длинную статью, давайте посмотрим на все элементы, которые мы изучили, и на то, как они сочетаются друг с другом в документе.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="This is about HTML5 structure"> <meta name="keywords" content="HTML5, CSS3, JavaScript, Medium"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The title is Structure</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> <p>This is the content of the website</p> </body> </html>
Надеюсь, вы хорошо понимаете, что может предложить каждый элемент.