Начнем перевод документа.
Вот русский перевод:
Часто используемые теги HTML для начинающих
1. <html>: Корневой элемент
Тег <html> представляет корень HTML-документа. Все остальные элементы
вложены в него.
Использование: Всегда используется как контейнер для всего содержимого
HTML.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
</body>
</html>
2. <head>: Метаданные документа
Тег <head> содержит метаданные о веб-странице, такие как заголовок, ссылки на
таблицы стилей и скрипты.
Использование: Включение ресурсов, таких как файлы CSS, или установка
заголовка страницы.
Пример:
<head>
<title>Изучение HTML</title>
<link rel="stylesheet" href="[Link]">
</head>
3. <body>: Контейнер основного содержимого
Тег <body> содержит все видимое пользователям содержимое веб-страницы.
Использование: Заключает все видимые элементы, такие как заголовки,
параграфы, изображения и ссылки.
Пример:
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница.</p>
</body>
... (Продолжение для всех других разделов документа)
Продолжаем перевод:
4. <h1> до <h6>: Заголовки
Эти теги используются для определения заголовков, где <h1> — самый большой, а
<h6> — самый маленький.
Использование: Используйте <h1> для основного заголовка и меньшие заголовки
для подразделов.
Пример:
<h1>Название сайта</h1>
<h2>Заголовок раздела</h2>
<h3>Заголовок подраздела</h3>
5. <p>: Параграф
Тег <p> используется для определения блока текста как параграфа.
Использование: Для любого блока описательного или информационного текста.
Пример:
<p>Это параграф текста, предоставляющий некоторую информацию.</p>
6. <a>: Якорь (ссылка)
Тег <a> создает гиперссылки для перехода на другие страницы или веб-сайты.
Использование: Для навигационных меню или ссылок на внешние ресурсы.
Пример:
<a href="[Link] Example</a>
7. <img>: Изображение
Тег <img> используется для вставки изображений.
Использование: Добавление визуалов для улучшения контента, таких как
изображения продуктов или баннеры.
Пример:
<img src="[Link]" alt="Описание изображения">
8. <ul>, <ol>, и <li>: Списки
<ul>:
Ненумерованный список (с маркерами).
<ol>:
Нумерованный список.
<li>:
Элементы списка.
Использование: Отображение списков, например, меню навигации или функций.
Пример:
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
</ul>
<ol>
<li>Шаг 1</li>
<li>Шаг 2</li>
</ol>
9. <div>: Блок
Тег <div> — это контейнер для группировки элементов для их стилизации или
скриптов.
Использование: Для макетов или группировки содержимого.
Пример:
<div class="container">
<h2>О нас</h2>
<p>Мы изучаем веб-разработку.</p>
</div>
10. <span>: Встроенный контейнер
Тег <span> используется для стилизации небольших частей текста или встроенного
содержимого.
Использование: Выделение или стилизация определенных слов или фраз.
Пример:
<p>Это <span style="color: red;">выделенное</span> слово.</p>
Продолжим перевод:
11. <strong> и <em>: Выделение текста
<strong>: Указывает на важность текста, обычно отображается полужирным
шрифтом.
<em>: Указывает на акцент, обычно отображается курсивом.
Использование: Для выделения важного или акцентированного текста в статьях
или инструкциях.
Пример:
<p>Это <strong>важная</strong> информация.</p>
<p>Пожалуйста, <em>внимательно</em> прочитайте перед продолжением.</p>
12. <table>: Таблицы
Тег <table> определяет таблицу с дочерними элементами:
<tr>: Строка таблицы.
<td>: Ячейка таблицы (данные).
<th>: Заголовок таблицы.
Использование: Для отображения табличных данных, таких как цены, расписания
или сравнения.
Пример:
<table border="1">
<tr>
<th>Продукт</th>
<th>Цена</th>
</tr>
<tr>
<td>Книга</td>
<td>$10</td>
</tr>
</table>
13. <form>: Форма для ввода данных
Тег <form> используется для сбора данных от пользователя. Работает с такими
элементами, как <input> и <textarea>.
Использование: Сбор информации, например, логинов, отзывов или заказов.
Пример:
<form action="/submit" method="post">
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<button type="submit">Отправить</button>
</form>
14. <input>: Поле ввода
Тег <input> используется для ввода данных пользователем, таких как текст,
пароли, флажки и др.
Использование: Создание форм с различными типами ввода для взаимодействия с
пользователем.
Пример:
<input type="text" placeholder="Введите ваше имя">
<input type="checkbox" id="subscribe">
<label for="subscribe">Подписаться на рассылку</label>
15. <button>: Кнопка
Тег <button> создает нажимаемую кнопку.
Использование: Для выполнения действий, таких как отправка формы или запуск
событий JavaScript.
Пример:
<button onclick="alert('Привет!')">Нажми меня</button>
16. <textarea>: Многострочное текстовое поле
Тег <textarea> позволяет пользователям вводить несколько строк текста.
Использование: Используйте в формах для комментариев, отзывов или длинных
текстов.
Пример:
<textarea rows="4" cols="50" placeholder="Напишите свое сообщение
здесь"></textarea>
17. <select> и <option>: Выпадающие списки
<select>:
Определяет выпадающий список.
<option>:
Задает элементы в списке.
Использование: Для выбора пользователем из предопределенных вариантов.
Пример:
<select>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>
18. <nav>: Навигационный раздел
Тег <nav> определяет раздел для навигационных ссылок.
Использование: Для основных меню или навигации по всему сайту.
Пример:
<nav>
<a href="/home">Главная</a>
<a href="/about">О нас</a>
<a href="/contact">Контакты</a>
</nav>
19. <header> и <footer>: Структурные элементы
<header>: Представляет вводное содержимое, такое как логотип или заголовок.
<footer>: Представляет завершающее содержимое, такое как авторские права или
ссылки.
Использование: Организация макета с четко определенными разделами.
Пример:
<header>
<h1>Добро пожаловать на мой сайт</h1>
<nav>
<a href="#home">Главная</a>
<a href="#services">Услуги</a>
</nav>
</header>
<footer>
<p>© 2024 Мой сайт</p>
</footer>
Продолжим перевод:
20. <article> и <section>: Структурирование контента
<article>: Независимое содержимое, такое как записи в блогах или новостные
статьи.
<section>:Группирует связанный контент внутри страницы.
Использование: Улучшает читаемость и SEO за счет логической организации
контента.
Пример:
<article>
<h2>Изучение HTML</h2>
<p>HTML — основа веб-разработки.</p>
</article>
<section>
<h2>Темы</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
21. <aside>: Боковое содержимое
Тег <aside> определяет контент, связанный с основным, например, рекламу или
ссылки.
Использование: Добавление вспомогательной информации или рекламы без
нарушения основного контента.
Пример:
<aside>
<h3>Связанные темы</h3>
<ul>
<li>Основы HTML</li>
<li>Основы CSS</li>
</ul>
</aside>
22. <main>: Основное содержимое
Тег <main> определяет центральное содержимое веб-страницы.
Использование: Заключает наиболее важную информацию для улучшения
доступности.
Пример:
<main>
<h1>Добро пожаловать</h1>
<p>Это основное содержимое сайта.</p>
</main>
23. <figure> и <figcaption>: Изображения с подписями
<figure>: Группирует изображения, диаграммы или иллюстрации.
<figcaption>: Добавляет подпись для <figure>.
Использование: Для изображений с описаниями, улучшая доступность.
Пример:
<figure>
<img src="[Link]" alt="Красивый закат">
<figcaption>Потрясающий закат над океаном.</figcaption>
</figure>
24. <details> и <summary>: Скрываемое содержимое
<details>:Создает сворачиваемое содержимое.
<summary>:Определяет заголовок, который пользователи нажимают для
отображения содержимого.
Использование: Для FAQ или дополнительных деталей без загромождения
страницы.
Пример:
<details>
<summary>Что такое HTML?</summary>
<p>HTML расшифровывается как HyperText Markup Language и используется для
создания веб-страниц.</p>
</details>
25. <progress>: Индикатор выполнения
Тег <progress> отображает прогресс выполнения задачи.
Использование: Для отображения статуса задач, таких как загрузка файлов или
установки.
Пример:
<progress value="70" max="100">70%</progress>
26. <meter>: Измерение в диапазоне
Тег <meter> отображает значение в пределах диапазона, например, оценки или
результаты.
Использование: Для отображения рейтингов или показателей.
Пример:
<meter value="0.7" min="0" max="1">70%</meter>
27. <template>: Шаблон клиентской стороны
Тег <template> содержит повторно используемые фрагменты HTML, которые
сразу не отображаются.
Использование: Для динамической отрисовки контента через JavaScript.
Пример:
<template id="card-template">
<div class="card">
<h2>Заголовок</h2>
<p>Описание здесь.</p>
</div>
</template>
28. <time>: Дата или время
Тег <time> представляет даты, время или продолжительность, улучшая
доступность и SEO.
Использование: Для временных меток, дедлайнов или событий.
Пример:
<p>Опубликовано <time datetime="2024-11-29">29 ноября 2024 года</time>.</p>
29. <code>, <pre>, и <kbd>: Код и ввод с клавиатуры
<code>: Для встроенных фрагментов кода.
<pre>: Сохраняет пробелы для блоков кода.
<kbd>: Обозначает ввод с клавиатуры.
Использование: Для технической документации или руководств.
Пример:
<p>Для сохранения файла нажмите <kbd>Ctrl + S</kbd>.</p>
<pre>
<code>
function greet() {
[Link]("Привет, мир!");
}
</code>
</pre>
30. <script>: Интеграция JavaScript
Тег <script> позволяет встроить или подключить JavaScript.
Использование: Для добавления интерактивности на веб-страницы.
Пример:
<script>
alert('Добро пожаловать на сайт!');
</script>
Переходим к разделу CSS. Начнем перевод:
Часто используемые свойства CSS для начинающих
1. color: Цвет текста
Свойство color задает цвет текста.
Использование: Для улучшения читаемости или выделения отдельных элементов
текста.
Пример:
p {
color: blue;
}
2. background-color: Цвет фона
Свойство background-color задает цвет фона элемента.
Использование: Для выделения секций, кнопок или целых страниц.
Пример:
body {
background-color: lightgray;
}
3. font-size: Размер текста
Свойство font-size определяет размер текста.
Использование: Для настройки размеров заголовков, основного текста или
подписей.
Пример:
h1 {
font-size: 2em;
}
4. font-family: Шрифт
Свойство font-family задает шрифт, используемый для текста.
Использование: Для заголовков или абзацев для создания единого стиля дизайна.
Пример:
body {
font-family: Arial, sans-serif;
}
5. margin: Внешние отступы
Свойство margin добавляет пространство вокруг элемента.
Использование: Для предотвращения наложения элементов друг на друга.
Пример:
div {
margin: 20px;
}
6. padding: Внутренние отступы
Свойство padding добавляет пространство между содержимым и границей
элемента.
Использование: Для создания более просторных кнопок или карточек.
Пример:
button {
padding: 10px 20px;
}
7. border: Граница элемента
Свойство border добавляет границу вокруг элементов.
Использование: Для выделения кнопок, изображений или секций.
Пример:
img {
border: 2px solid black;
}
8. width и height: Размеры элемента
Эти свойства задают размеры элемента.
Использование: Для управления макетами контейнеров, изображений или видео.
Пример:
div {
width: 300px;
height: 200px;
}
9. display: Отображение элемента
Свойство display определяет, как отображается элемент (например, block, inline,
flex).
Использование: Для структурирования макетов или скрытия элементов.
Пример:
nav {
display: flex;
}
10. position: Позиционирование элемента
Свойство position управляет тем, как элемент располагается на странице.
Значения: static, relative, absolute, fixed, sticky.
Использование: Для позиционирования меню, подсказок или плавающих
элементов.
Пример:
header {
position: fixed;
top: 0;
width: 100%;
}
Продолжаем перевод раздела CSS:
11. text-align: Выравнивание текста
Свойство text-align задает горизонтальное выравнивание текста.
Использование: Для выравнивания заголовков, абзацев или подписей.
Пример:
h1 {
text-align: center;
}
12. Свойства Flexbox (display: flex)
Flexbox помогает выравнивать и распределять пространство внутри контейнеров.
Основные свойства:
justify-content: Выравнивание элементов по горизонтали.
align-items: Выравнивание элементов по вертикали.
Пример:
.container {
display: flex;
justify-content: center;
align-items: center;
}
13. Свойства Grid (display: grid)
Grid помогает создавать двумерные макеты.
Использование: Для расположения элементов в строках и столбцах.
Пример:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
14. overflow: Управление переполнением контента
Свойство overflow управляет тем, что происходит, когда содержимое превышает
границы элемента.
Значения: visible, hidden, scroll, auto.
Пример:
div {
overflow: scroll;
}
15. z-index: Порядок наложения
Свойство z-index управляет порядком наложения элементов.
Использование: Для того, чтобы важные элементы отображались поверх других.
Пример:
.modal {
position: absolute;
z-index: 1000;
}
16. box-shadow: Тень вокруг элементов
Свойство box-shadow добавляет тени к элементам.
Использование: Для визуального выделения кнопок, карточек или контейнеров.
Пример:
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
17. hover: Псевдокласс для интерактивности
Псевдокласс :hover стилизует элементы при наведении курсора.
Использование: Для улучшения интерактивности кнопок, ссылок или меню.
Пример:
button:hover {
background-color: darkblue;
color: white;
}
18. transition: Плавная анимация между состояниями
Свойство transition позволяет добавлять плавные изменения между состояниями
CSS.
Использование: Для визуальных эффектов, таких как наведение на кнопки или
раскрытие модальных окон.
Пример:
button {
background-color: blue;
transition: background-color 0.3s ease;
}
button:hover {
background-color: darkblue;
}
19. transform: Изменение размера, вращение или перемещение элементов
Свойство transform применяется для масштабирования, вращения или
перемещения элементов.
Использование: Для создания визуальных эффектов на изображениях, иконках
или кнопках.
Пример:
img {
transform: scale(1.2);
transition: transform 0.3s;
}
img:hover {
transform: scale(1.5);
}
20. animation: Анимации с использованием ключевых кадров
Свойство animation позволяет задавать сложные анимации с использованием
@keyframes.
Использование: Для создания индикаторов загрузки, баннеров или динамических
эффектов.
Пример:
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
div {
animation: bounce 1s infinite;
}