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