Основы HTML
В этой статье мы объясняем основы HTML.
Здесь объясняются основные теги, такие как декларация DOCTYPE, теги <html>, <head> и <body>. Он также описывает теги, атрибуты и специальные символы.
YouTube Video
Основы HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>В начале файла мы указываем, что это документ HTML5, который соответствует правилам HTML5.
-
<html><html>— это наиболее внешний элемент в HTML-документе, который охватывает всё содержимое. Каждый HTML-файл содержит только один тег<html>, а все остальные теги вложены внутрь этого тега. Атрибутlang="en"в открывающем теге<html>сообщает браузеру, что документ написан на английском языке. Это помогает уведомить программы чтения с экрана и поисковые системы о языке документа. -
<head>Тег
<head>определяет метаданные (информацию) для страницы. Это включает заголовок страницы, кодировку символов и настройки адаптивного дизайна. Адаптивный дизайн — это метод, позволяющий веб-сайтам или приложениям адаптироваться и корректно отображаться на различных устройствах и размерах экранов. Это позволяет пользователям удобно просматривать контент на разных устройствах, таких как смартфоны, планшеты и настольные компьютеры.<meta charset="UTF-8">устанавливает кодировку символов документа в UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">— это настройка, оптимизирующая отображение для мобильных устройств. Страница адаптируется к ширине экрана устройства.<title>представляет собой название страницы, отображаемое на вкладке браузера. В этом примере установлено название 'Основы HTML'. -
<body>Тег
<body>содержит часть, отображающую содержимое для пользователей. Внутри этого тега размещаются текст, изображения, ссылки и т.д. -
<main>Тег
<main>представляет основной контент страницы. Это включает заголовки и абзацы. -
<h1>Тег
<h1>представляет самый важный заголовок на странице. Обычно теги<main>и<h1>используются в документе только один раз. -
<p>Тег
<p>представляет параграф. -
<!-- Comment -->Вы можете писать комментарии в HTML в этом формате. Поскольку клиентский HTML может быть доступен для просмотра любым пользователем, не добавляйте в комментарии конфиденциальную информацию, такую как пароли или ключи API.
HTML содержит много тегов, но обратите внимание на следующие моменты. HTML-файл состоит из декларации DOCTYPE и одного тега <html>. Тег <html> содержит один тег <head> и один тег <body>. В HTML все теги содержатся внутри тега <html>, выражая структуру текста через отношения родителя, ребенка и соседа, подобно древовидной структуре. При написании HTML уделяйте внимание структуре документа.
Теги и атрибуты
Теперь давайте ознакомимся с тегами и атрибутами HTML.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Теги заключены в угловые скобки (<, >) и обычно состоят из пар открывающих и закрывающих тегов. Однако также существуют одиночные теги, такие как <meta> и <img>, которые не содержат контента. Одиночные теги не требуют закрывающего тега.
Теги могут иметь атрибуты, которые предоставляют дополнительную информацию тегу. Атрибуты пишутся внутри открывающего тега в формате attributeName="value".
Здесь <div> называется тегом, а <div>Content</div> элементом.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>К распространённым атрибутам в HTML относятся id, class и style. Атрибут id используется для присвоения элементу уникального идентификатора, при этом на странице может быть только один элемент с таким же id. Это полезно при работе с конкретными элементами с помощью JavaScript или CSS. Атрибут class позволяет группировать несколько элементов с помощью CSS или JavaScript, назначая им имя класса. Вы можете назначить один и тот же класс нескольким элементам, что позволяет применять общие стили. Атрибут style задаёт CSS-стили непосредственно для элемента. Обычно стили определяются во внешнем CSS-файле или внутри тега <style>, но этот атрибут используется, когда вы хотите задать стили непосредственно для отдельных элементов.
Специальные символы в HTML
Теперь давайте изучим специальные символы в HTML.
В HTML существуют специальные символы, используемые для отображения определённых знаков и символов. Эти специальные символы называются сущностями. Специальные символы начинаются с & (амперсанда), за которым следует имя или номер, и заканчиваются ; (точкой с запятой).
Представительные специальные символы в HTML
Вот некоторые распространённые специальные символы.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Примеры использования специальных символов в HTML
В частности, угловые скобки (<, >) и двойные кавычки должны использоваться правильно в HTML.
Угловые скобки (<, >) и двойные кавычки должны быть представлены как специальные символы в HTML, как показано ниже.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
Версии HTML
Давайте рассмотрим версии HTML здесь.
Версии HTML развивались для определения структуры и функциональности веб-страниц. Вот основные версии:.
-
HTML 1.0 (1993)
Первая версия HTML имела только самые базовые функции разметки. Она определяла такие элементы, как ссылки, заголовки, параграфы и списки.
-
HTML 2.0 (1995)
Первая стандартизированная версия с добавлением большего числа элементов, включая поддержку форм и таблиц.
-
HTML 3.2 (1997)
Были добавлены дополнительные возможности разметки, позволяющие встраивать стили и сценарии. Кроме того, использование макетов с помощью элемента
<table>стало обычным. -
HTML 4.01 (1999)
Разделение структуры и представления прогрессировало, была введена CSS. Создание сайтов, соответствующих стандартам, стало рекомендованным. Также улучшилась интернационализация и доступность документов.
-
HTML5 (2014)
Последняя крупная версия, включающая поддержку видео и аудио, canvas, локального хранилища, геолокации и других новых API. Она является дружественной к мобильным устройствам, что позволяет создавать более интерактивные веб-приложения.
HTML5.2 — это версия HTML, рекомендованная в 2017 году, которая является улучшенной версией HTML5. Начиная с HTML5.2, она обновляется на постоянной основе как Живой стандарт HTML, вместо использования статических номеров версии.
HTML эволюционировал через эти версии, становясь более гибкой и мощной веб-технологией.
Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.