Каждый HTML-документ должен иметь определенную структуру, чтобы браузеры могли правильно интерпретировать и отображать его содержимое. Эта структура включает в себя обязательные и рекомендуемые элементы, такие как DOCTYPE, <html>, <head>, и <body>. В этом уроке мы рассмотрим основные компоненты базовой структуры HTML-документа, их предназначение, распространенные ошибки, а также предложим тестовое задание для закрепления материала.
Объявление DOCTYPE указывает браузеру, какую версию HTML следует использовать для интерпретации документа. В HTML5 используется следующая строка:
<!DOCTYPE html>
HTML предоставляет шесть уровней заголовков, от <h1> до <h6>. Тег <h1> используется для главного заголовка, а <h6> — для наименее важного.
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвёртого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
Ссылки создаются с помощью тега <a>. Атрибут href указывает адрес, на который ведет ссылка.
<a href="https://www.example.com">Перейти на Example</a>
HTML поддерживает нумерованные и маркированные списки.
Тег <ol> используется для создания нумерованных списков, а тег <li> — для элементов списка.
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
Тег <ul> используется для создания маркированных списков, а тег <li> — для элементов списка.
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
HTML предоставляет теги для форматирования текста.
Тег <b> делает текст полужирным.
<b>Это полужирный текст.</b>
Тег <strong> делает текст жирным и подчеркивает его важность.
<strong>Это жирный и важный текст.</strong>
Тег <i> делает текст курсивным.
<i>Это курсивный текст.</i>
Тег <em> делает текст наклонным и подчеркивает его акцент.
<em>Это наклонный и акцентированный текст.</em>
Тег <u> подчеркивает текст.
<u>Это подчеркнутый текст.</u>
Тег <s> зачеркивает текст.
<s>Это зачеркнутый текст.</s>
HTML предоставляет теги для создания цитат.
Тег <blockquote> используется для длинных цитат, которые отображаются как отдельные блоки текста.
<blockquote>
Это длинная цитата. Она отображается как отдельный блок текста.
</blockquote>
Тег <q> используется для коротких цитат внутри текста.
<p>Он сказал: <q>Это короткая цитата.</q></p>
Тег <code> используется для отображения фрагментов кода.
<code>console.log('Hello, world!');</code>
Тег <hr> используется для создания горизонтальных линий, разделяющих содержимое.
<p>Первый абзац текста.</p>
<hr>
<p>Второй абзац текста.</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Текст в HTML</title>
</head>
<body>
<h1>Основные элементы текста в HTML</h1>
<p>Это первый абзац текста. Он демонстрирует использование тега <code><p></code>.</p>
<h2>Заголовки</h2>
<p>Заголовки используются для структурирования текста:</p>
<h3>Заголовок третьего уровня</h3>
<h2>Списки</h2>
<p>Пример нумерованного списка:</p>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
</ol>
<p>Пример маркированного списка:</p>
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
</ul>
<h2>Форматирование текста</h2>
<p><b>Полужирный текст</b> и <strong>жирный текст</strong></p>
<p><i>Курсивный текст</i> и <em>наклонный текст</em></p>
<p><u>Подчеркнутый текст</u> и <s>зачеркнутый текст</s></p>
<h2>Цитаты</h2>
<blockquote>
Это пример блочной цитаты.
</blockquote>
<p>Это пример <q>встроенной цитаты</q> внутри текста.</p>
<h2>Код</h2>
<p>Пример отображения кода: <code>console.log('Hello, world!');</code></p>
<h2>Линии</h2>
<hr>
<p>Горизонтальная линия выше разделяет этот текст от предыдущего.</p>
</body>
</html>
1.Неправильное закрытие тегов
Каждый открывающий тег (кроме одиночных) должен иметь соответствующий закрывающий тег.
<!-- Правильно -->
<p>Текст параграфа</p>
<!-- Неправильно -->
<p>Текст параграфа
2.Отсутствие обязательных атрибутов
Некоторые теги требуют обязательные атрибуты. Например, тег <img> требует атрибут src:
<!-- Правильно -->
<img decoding="async" src="image.jpg" alt="Описание изображения">
<!-- Неправильно -->
<img alt="Описание изображения">
3.Отсутствие обязательных атрибутов
Не используйте устаревшие теги, такие как <center> и <font>. Вместо этого используйте CSS для стилизации.
<!-- Правильно -->
<p style="text-align: center;">Центрированный текст</p>
<!-- Неправильно -->
<center>Центрированный текст</center>
4. Отсутствие метатега <meta charset="UTF-8">
Не забывайте добавлять метатег для указания кодировки.
<head>
<meta charset="UTF-8">
</head>
В этом уроке мы рассмотрели, как работать с текстом в HTML. Мы изучили основные теги для создания и форматирования текста, а также узнали о некоторых специальных элементах, таких как цитаты и отображение кода. Умение правильно структурировать и стилизовать текст — это важный навык для веб-разработчика.
Создайте веб-страницу, которая содержит следующие элементы:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Основы работы с текстом в HTML</title>
</head>
<body>
<h1>Основы работы с текстом в HTML</h1>
<p>Это описание моего опыта работы с HTML.</p>
<a href="https://www.example.com">Перейти на Example</a>
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
<p><b>Полужирный текст</b>, <i>курсивный текст</i> и <u>подчеркнутый текст</u></p>
<blockquote>
Это пример блочной цитаты.
</blockquote>
<p>Это пример <q>встроенной цитаты</q> внутри текста.</p>
<p>Пример отображения кода: <code>console.log('Hello, world!');</code></p>
<hr>
<p>Горизонтальная линия выше разделяет этот текст от предыдущего.</p>
</body>
</html>
Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.
Наша цель и главная задача сделать качественное образование в вашем браузере
Телефон: +375 33 910-08-92
Email: info@codefor.tech
Адрес: г. Барановичи, ул. Пирогова, д. 7
© 2024-2025 Все права защищены. CodeFor.
