Dvurechensky 5ed9800ca6 -

tag

2025-03-07 19:41:26 +03:00

18 KiB

Raw Blame History

✨Dvurechensky✨

👥 Синтаксис HTML и Селекторы CSS 👥

☀️ Базовая Структура HTML ☀️

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Заголовок</h1>
    <p>Текст параграфа.</p>
</body>
</html>

<!DOCTYPE html>: Объявление типа документа (HTML5).
<html></html>: Корневой элемент HTML-документа.
<head></head>: Содержит метаданные о документе (заголовок, кодировка, стили, скрипты).
<meta charset="UTF-8">: Указывает кодировку символов (UTF-8 для поддержки большинства языков).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Настройка области просмотра для адаптивного дизайна.
<title></title>: Заголовок страницы, отображаемый во вкладке браузера.
<body></body>: Содержит видимое содержимое страницы (текст, изображения, видео).

👥 Основные HTML Теги 👥

⭐ Структурные теги ⭐

<header></header>: Шапка сайта или раздела.

<header>
    <h1>Название сайта</h1>
    <nav>...</nav>
</header>

<nav></nav>: Навигационная панель.

<nav>
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</nav>

<main></main>: Основное содержимое страницы.

<main>
    <article>...</article>
    <aside>...</aside>
</main>

<article></article>: Самостоятельная часть контента (статья, пост в блоге).
```
<article>
    <h2>Заголовок статьи</h2>
    <p>Текст статьи...</p>
</article>
```

<aside></aside>: Дополнительная информация (боковая панель).

<aside>
    <h3>Реклама</h3>
    <p>Рекламный текст...</p>
</aside>

<footer></footer>: Подвал сайта или раздела.

<footer>
    <p>© 2023 Все права защищены</p>
</footer>

<section></section>: Раздел содержимого.

<section>
    <h2>Заголовок раздела</h2>
    <p>Текст раздела...</p>
</section>

<div></div>: Универсальный контейнер (не имеет семантического значения).
```
<div>
    <p>Содержимое внутри div.</p>
</div>
```

⭐ Текст ⭐

<h1></h1> - <h6></h6>: Заголовки разных уровней.

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

<p></p>: Параграф (абзац).

<p>Это текст параграфа.</p>

Это текст параграфа.

<br>: Перенос строки (без закрывающего тега).
```
Это строка текста.<br>
Это новая строка.
```

Это строка текста.
Это новая строка.

<hr>: Горизонтальная линия (без закрывающего тега).
```
<p>Текст над линией.</p>
<hr>
<p>Текст под линией.</p>
```

Текст над линией.

Текст под линией.

<a></a>: Ссылка (анкор).

<a href="https://sites.google.com/view/dvurechensky">Ссылка на example.com</a>

Ссылка на example.com

<span></span>: Строчный контейнер (не имеет семантического значения).
```
<p>Это <span>часть</span> текста.</p>
```

Это часть текста.

<strong></strong>: Важный текст (обычно отображается жирным шрифтом).
```
<p>Это <strong>важный</strong> текст.</p>
```

Это важный текст.

<em></em>: Выделенный текст (обычно отображается курсивом).
```
<p>Это <em>выделенный</em> текст.</p>
```

Это выделенный текст.

<code></code>: Код.
```
<code>
let x = 5;
</code>
```


let x = 5;

<pre></pre>: Форматированный текст (сохраняет пробелы и переносы строк).
```
<pre>
Это   текст,
сохраненный с форматированием.
</pre>
```

Это   текст,
сохраненный с форматированием.

⭐ Списки ⭐

<ul></ul>: Неупорядоченный список.

<ul>
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
    <li>Элемент списка 3</li>
</ul>

Элемент списка 1
Элемент списка 2
Элемент списка 3

<ol></ol>: Упорядоченный список.

<ol>
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
    <li>Элемент списка 3</li>
</ol>

<li></li>: Элемент списка.

Элемент списка 1
Элемент списка 2
Элемент списка 3

⭐ Изображения и мультимедиа ⭐

<img>: Изображение (без закрывающего тега).
```
<img src="" alt="Описание изображения">
```

<video></video>: Видео.

<video width="320" height="240" controls>
    <source src="Media/Pump.mp4" type="video/mp4">
    Ваш браузер не поддерживает тег video.
</video>

<audio></audio>: Аудио.

<audio controls>
    <source src="Media/ambience_bar_ground_larger.wav" type="audio/mpeg">
    Ваш браузер не поддерживает тег audio.
</audio>

Ваш браузер не поддерживает тег audio.

⭐ Формы ⭐

<form></form>: Форма.
```
<form action="/submit" method="post">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name"><br><br>
    <input type="submit" value="Отправить">
</form>
```
- <label></label>: Метка для элемента формы.
- <input>: Элемент ввода (текст, пароль, флажок, радиокнопка, файл и т. д.).
  - type="text": Текстовое поле.
  - type="password": Поле для ввода пароля.
  - type="email": Поле для ввода email.
  - type="checkbox": Флажок.
  - type="radio": Радиокнопка.
  - type="file": Выбор файла.
  - type="submit": Кнопка отправки формы.
  - type="reset": Кнопка сброса формы.

Имя:

<textarea></textarea>: Многострочное текстовое поле.
```
<textarea rows="4" cols="50">Введите текст...</textarea>
```

Введите текст...

<select></select>: Выпадающий список.

<select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<option></option>: Элемент выпадающего списка.

Volvo Saab Mercedes Audi

<button></button>: Кнопка.

<button type="button">Нажми меня</button>

Нажми меня

⭐ Таблицы ⭐

<table></table>: Таблица.
<tr></tr>: Строка таблицы.
<th></th>: Заголовочная ячейка таблицы.

<td></td>: Ячейка данных таблицы.

<table>
    <tr>
        <th>Имя</th>
        <th>Возраст</th>
    </tr>
    <tr>
        <td>Иван</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Мария</td>
        <td>25</td>
    </tr>
</table>

Имя	Возраст
Иван	30
Мария	25

⭐ Встраиваемые элементы ⭐

<iframe></iframe>: Встраиваемый фрейм (для вставки контента с другого сайта).
```
<iframe src="https://rutube.ru/channel/44085490/" width="600" height="400"></iframe>
```

⭐ Селекторы CSS ⭐

CSS (Cascading Style Sheets) используется для стилизации HTML-элементов. Селекторы CSS определяют, к каким элементам применяются стили.

Селектор по тегу (Type Selector):
```
p {
    color: blue;
}
```
Применяет стиль ко всем элементам <p>.
Селектор по классу (Class Selector):
```
.highlight {
    background-color: yellow;
}
```
Применяет стиль ко всем элементам с классом highlight.
```
<p class="highlight">Этот текст будет выделен.</p>
```
Селектор по ID (ID Selector):
```
#main-title {
    font-size: 24px;
}
```
Применяет стиль к элементу с ID main-title. (ID должен быть уникальным на странице).
```
<h1 id="main-title">Главный заголовок</h1>
```
Универсальный селектор (Universal Selector):
```
* {
    margin: 0;
    padding: 0;
}
```
Применяет стиль ко всем элементам на странице. Используется для сброса стилей по умолчанию.
Селектор атрибутов (Attribute Selector):
```
a[href] {
    color: green;
}

input[type="text"] {
    border: 1px solid #ccc;
}
```
- a[href]: Выбирает все элементы <a> с атрибутом href.
- input[type="text"]: Выбирает все элементы <input> с атрибутом type, равным "text".
Селектор потомков (Descendant Selector):
```
ul li {
    list-style-type: square;
}
```
Выбирает все элементы <li>, которые являются потомками элемента <ul>.
Селектор дочерних элементов (Child Selector):
```
ul > li {
    border: 1px solid black;
}
```
Выбирает все элементы <li>, которые являются непосредственными дочерними элементами <ul>.
Селектор смежных элементов (Adjacent Sibling Selector):
```
h2 + p {
    font-style: italic;
}
```
Выбирает первый элемент <p>, который непосредственно следует за элементом <h2>.
Селектор общих элементов (General Sibling Selector):
```
h2 ~ p {
    color: red;
}
```
Выбирает все элементы <p>, которые являются общими братьями и сестрами элемента <h2> (то есть находятся на одном уровне и следуют после <h2>).
Псевдоклассы (Pseudo-classes):
- :hover: Стиль применяется при наведении курсора мыши на элемент.
```
a:hover {
    color: red;
}
```
- :active: Стиль применяется, когда элемент активирован (например, нажата кнопка).
```
button:active {
    background-color: #ccc;
}
```
- :focus: Стиль применяется, когда элемент в фокусе (например, текстовое поле).
```
input:focus {
    border: 2px solid blue;
}
```
- :visited: Стиль для посещенных ссылок.
```
a:visited {
   color: purple;
}
```
- :nth-child(n): Выбирает элемент, который является n-м потомком своего родителя
```
li:nth-child(odd) {
    background-color: #f2f2f2;
}

li:nth-child(even) {
    background-color: #ffffff;
}
```
Псевдоэлементы (Pseudo-elements):
- ::before: Вставляет контент перед элементом.
```
p::before {
    content: "Читать далее: ";
}
```
- ::after: Вставляет контент после элемента.
```
h1::after {
    content: " - Новый заголовок";
}
```
- ::first-line: Стилизует первую строку элемента.
```
p::first-line {
    font-weight: bold;
}
```
- ::first-letter: Стилизует первую букву элемента
```
p::first-letter {
    font-size: 200%;
    color: red;
}
```

Комбинирование селекторов

Селекторы можно комбинировать для создания более сложных правил:

/* Элемент <p> с классом "highlight" внутри элемента <div> с ID "content" */
#content div p.highlight {
  font-size: 16px;
}