Scribd
Загрузить
33 просмотров12 страниц

HTML CSS Rus Tilida

Загружено:

kingofhakkers22092003
Авторское право
© © All Rights Reserved
Мы серьезно относимся к защите прав на контент. Если вы подозреваете, что это ваш контент, заявите об этом здесь.
Доступные форматы
Скачать в формате PDF, TXT или читать онлайн в Scribd
33 просмотров12 страниц

HTML CSS Rus Tilida

Загружено:

kingofhakkers22092003
Авторское право
© © All Rights Reserved
Мы серьезно относимся к защите прав на контент. Если вы подозреваете, что это ваш контент, заявите об этом здесь.
Доступные форматы
Скачать в формате PDF, TXT или читать онлайн в Scribd
Вы находитесь на странице: 1/ 12

Начнем перевод документа.

Вот русский перевод:

Часто используемые теги 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="styles.css">
</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="https://example.com">Посетите Example</a>

7. <img>: Изображение
Тег <img> используется для вставки изображений.
Использование: Добавление визуалов для улучшения контента, таких как
изображения продуктов или баннеры.
Пример:

<img src="image.jpg" 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>&copy; 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="sunset.jpg" 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() {
console.log("Привет, мир!");
}
</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;
}

Вам также может понравиться