1.0.0
All Documents
This commit is contained in:
Dvurechensky
parent
04367523ac
commit
0053fd518d
BIN
Media/Pump.mp4
Normal file
BIN
Media/Pump.mp4
Normal file
Binary file not shown.
BIN
Media/ambience_bar_ground_larger.wav
Normal file
BIN
Media/ambience_bar_ground_larger.wav
Normal file
Binary file not shown.
BIN
Media/image_crib.png
Normal file
BIN
Media/image_crib.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
640
README.md
640
README.md
@ -1,2 +1,640 @@
|
||||
# CribHtml
|
||||
## 👥 Синтаксис HTML и Селекторы CSS 👥
|
||||
|
||||
<p align="center"><h1 align="center"> ☀️ Базовая Структура HTML ☀️ </h1></p>
|
||||
|
||||
```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 Теги 👥
|
||||
|
||||
<p align="center"><h1 align="center"> ⭐ Структурные теги ⭐ </h1></p>
|
||||
|
||||
* `<header></header>`: Шапка сайта или раздела.
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Название сайта</h1>
|
||||
<nav>...</nav>
|
||||
</header>
|
||||
```
|
||||
* `<nav></nav>`: Навигационная панель.
|
||||
|
||||
```html
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Главная</a></li>
|
||||
<li><a href="#">О нас</a></li>
|
||||
<li><a href="#">Контакты</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
```
|
||||
* `<main></main>`: Основное содержимое страницы.
|
||||
|
||||
```html
|
||||
<main>
|
||||
<article>...</article>
|
||||
<aside>...</aside>
|
||||
</main>
|
||||
```
|
||||
|
||||
* `<article></article>`: Самостоятельная часть контента (статья, пост в блоге).
|
||||
|
||||
```html
|
||||
<article>
|
||||
<h2>Заголовок статьи</h2>
|
||||
<p>Текст статьи...</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
* `<aside></aside>`: Дополнительная информация (боковая панель).
|
||||
|
||||
```html
|
||||
<aside>
|
||||
<h3>Реклама</h3>
|
||||
<p>Рекламный текст...</p>
|
||||
</aside>
|
||||
```
|
||||
|
||||
* `<footer></footer>`: Подвал сайта или раздела.
|
||||
|
||||
```html
|
||||
<footer>
|
||||
<p>© 2023 Все права защищены</p>
|
||||
</footer>
|
||||
```
|
||||
|
||||
* `<section></section>`: Раздел содержимого.
|
||||
|
||||
```html
|
||||
<section>
|
||||
<h2>Заголовок раздела</h2>
|
||||
<p>Текст раздела...</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
* `<div></div>`: Универсальный контейнер (не имеет семантического значения).
|
||||
|
||||
```html
|
||||
<div>
|
||||
<p>Содержимое внутри div.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
<p align="center"><h1 align="center"> ⭐ Текст ⭐ </h1></p>
|
||||
|
||||
* `<h1></h1>` - `<h6></h6>`: Заголовки разных уровней.
|
||||
|
||||
```html
|
||||
<h1>Заголовок первого уровня</h1>
|
||||
<h2>Заголовок второго уровня</h2>
|
||||
<h3>Заголовок третьего уровня</h3>
|
||||
```
|
||||
<h1>Заголовок первого уровня</h1>
|
||||
<h2>Заголовок второго уровня</h2>
|
||||
<h3>Заголовок третьего уровня</h3>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<p></p>`: Параграф (абзац).
|
||||
|
||||
```html
|
||||
<p>Это текст параграфа.</p>
|
||||
```
|
||||
<p>Это текст параграфа.</p>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<br>`: Перенос строки (без закрывающего тега).
|
||||
|
||||
```html
|
||||
Это строка текста.<br>
|
||||
Это новая строка.
|
||||
```
|
||||
Это строка текста.<br>
|
||||
Это новая строка.
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<hr>`: Горизонтальная линия (без закрывающего тега).
|
||||
|
||||
```html
|
||||
<p>Текст над линией.</p>
|
||||
<hr>
|
||||
<p>Текст под линией.</p>
|
||||
```
|
||||
<p>Текст над линией.</p>
|
||||
<hr>
|
||||
<p>Текст под линией.</p>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<a></a>`: Ссылка (анкор).
|
||||
|
||||
```html
|
||||
<a href="https://www.example.com">Ссылка на example.com</a>
|
||||
```
|
||||
<a href="https://www.example.com">Ссылка на example.com</a>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
|
||||
* `<span></span>`: Строчный контейнер (не имеет семантического значения).
|
||||
|
||||
```html
|
||||
<p>Это <span>часть</span> текста.</p>
|
||||
```
|
||||
<p>Это <span>часть</span> текста.</p>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<strong></strong>`: Важный текст (обычно отображается жирным шрифтом).
|
||||
|
||||
```html
|
||||
<p>Это <strong>важный</strong> текст.</p>
|
||||
```
|
||||
<p>Это <strong>важный</strong> текст.</p>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<em></em>`: Выделенный текст (обычно отображается курсивом).
|
||||
|
||||
```html
|
||||
<p>Это <em>выделенный</em> текст.</p>
|
||||
```
|
||||
<p>Это <em>выделенный</em> текст.</p>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<code></code>`: Код.
|
||||
|
||||
```html
|
||||
<code>
|
||||
let x = 5;
|
||||
</code>
|
||||
```
|
||||
<code>
|
||||
let x = 5;
|
||||
</code>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<pre></pre>`: Форматированный текст (сохраняет пробелы и переносы строк).
|
||||
|
||||
```html
|
||||
<pre>
|
||||
Это текст,
|
||||
сохраненный с форматированием.
|
||||
</pre>
|
||||
```
|
||||
<pre>
|
||||
Это текст,
|
||||
сохраненный с форматированием.
|
||||
</pre>
|
||||
|
||||
|
||||
<p align="center"><h1 align="center"> ⭐ Списки ⭐ </h1></p>
|
||||
|
||||
* `<ul></ul>`: Неупорядоченный список.
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>Элемент списка 1</li>
|
||||
<li>Элемент списка 2</li>
|
||||
<li>Элемент списка 3</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
<ul>
|
||||
<li>Элемент списка 1</li>
|
||||
<li>Элемент списка 2</li>
|
||||
<li>Элемент списка 3</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<ol></ol>`: Упорядоченный список.
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Элемент списка 1</li>
|
||||
<li>Элемент списка 2</li>
|
||||
<li>Элемент списка 3</li>
|
||||
</ol>
|
||||
```
|
||||
- `<li></li>`: Элемент списка.
|
||||
|
||||
<ol>
|
||||
<li>Элемент списка 1</li>
|
||||
<li>Элемент списка 2</li>
|
||||
<li>Элемент списка 3</li>
|
||||
</ol>
|
||||
|
||||
<p align="center"><h1 align="center"> ⭐ Изображения и мультимедиа ⭐ </h1></p>
|
||||
|
||||
* `<img>`: Изображение (без закрывающего тега).
|
||||
|
||||
```html
|
||||
<img src="" alt="Описание изображения">
|
||||
```
|
||||
|
||||
<img src="Media/image_crib.png" alt="Описание изображения">
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<video></video>`: Видео.
|
||||
|
||||
```html
|
||||
<video width="320" height="240" controls>
|
||||
<source src="movie.mp4" type="video/mp4">
|
||||
Ваш браузер не поддерживает тег video.
|
||||
</video>
|
||||
```
|
||||
|
||||
<video width="320" height="240" controls>
|
||||
<source src="Media/Pump.mp4" type="video/mp4">
|
||||
Ваш браузер не поддерживает тег video.
|
||||
</video>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<audio></audio>`: Аудио.
|
||||
|
||||
```html
|
||||
<audio controls>
|
||||
<source src="audio.mp3" type="audio/mpeg">
|
||||
Ваш браузер не поддерживает тег audio.
|
||||
</audio>
|
||||
```
|
||||
<audio controls>
|
||||
<source src="Media/ambience_bar_ground_larger.wav" type="audio/mpeg">
|
||||
Ваш браузер не поддерживает тег audio.
|
||||
</audio>
|
||||
|
||||
<p align="center"><h1 align="center"> ⭐ Формы ⭐ </h1></p>
|
||||
|
||||
* `<form></form>`: Форма.
|
||||
|
||||
```html
|
||||
<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"`: Кнопка сброса формы.
|
||||
|
||||
<form action="/submit" method="post">
|
||||
<label for="name">Имя:</label>
|
||||
<input type="text" id="name" name="name"><br><br>
|
||||
<input type="submit" value="Отправить">
|
||||
</form>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<textarea></textarea>`: Многострочное текстовое поле.
|
||||
|
||||
```html
|
||||
<textarea rows="4" cols="50">Введите текст...</textarea>
|
||||
```
|
||||
|
||||
<textarea rows="4" cols="50">Введите текст...</textarea>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<select></select>`: Выпадающий список.
|
||||
|
||||
```html
|
||||
<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>`: Элемент выпадающего списка.
|
||||
|
||||
<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>
|
||||
|
||||
<br>
|
||||
<hr style="border: 1px solid aqua;">
|
||||
<br>
|
||||
|
||||
* `<button></button>`: Кнопка.
|
||||
|
||||
```html
|
||||
<button type="button">Нажми меня</button>
|
||||
```
|
||||
|
||||
<button type="button">Нажми меня</button>
|
||||
|
||||
<p align="center"><h1 align="center"> ⭐ Таблицы ⭐ </h1></p>
|
||||
|
||||
* `<table></table>`: Таблица.
|
||||
* `<tr></tr>`: Строка таблицы.
|
||||
* `<th></th>`: Заголовочная ячейка таблицы.
|
||||
* `<td></td>`: Ячейка данных таблицы.
|
||||
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<th>Имя</th>
|
||||
<th>Возраст</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Иван</td>
|
||||
<td>30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Мария</td>
|
||||
<td>25</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Имя</th>
|
||||
<th>Возраст</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Иван</td>
|
||||
<td>30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Мария</td>
|
||||
<td>25</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p align="center"><h1 align="center"> ⭐ Встраиваемые элементы ⭐ </h1></p>
|
||||
|
||||
* `<iframe></iframe>`: Встраиваемый фрейм (для вставки контента с другого сайта).
|
||||
|
||||
```html
|
||||
<iframe src="https://rutube.ru/channel/44085490/" width="600" height="400"></iframe>
|
||||
```
|
||||
|
||||
<iframe src="https://rutube.ru/channel/44085490/" width="600" height="400"></iframe>
|
||||
|
||||
<p align="center"><h1 align="center"> ⭐ Селекторы CSS ⭐ </h1></p>
|
||||
|
||||
**`CSS`** (Cascading Style Sheets) используется для стилизации HTML-элементов. Селекторы **`CSS`** определяют, к каким элементам применяются стили.
|
||||
|
||||
* **Селектор по тегу (Type Selector):**
|
||||
|
||||
```css
|
||||
p {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
Применяет стиль ко всем элементам `<p>`.
|
||||
|
||||
* **Селектор по классу (Class Selector):**
|
||||
|
||||
```css
|
||||
.highlight {
|
||||
background-color: yellow;
|
||||
}
|
||||
```
|
||||
|
||||
Применяет стиль ко всем элементам с классом `highlight`.
|
||||
|
||||
```html
|
||||
<p class="highlight">Этот текст будет выделен.</p>
|
||||
```
|
||||
|
||||
* **Селектор по ID (ID Selector):**
|
||||
|
||||
```css
|
||||
#main-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
```
|
||||
|
||||
Применяет стиль к элементу с ID `main-title`. (ID должен быть уникальным на странице).
|
||||
|
||||
```html
|
||||
<h1 id="main-title">Главный заголовок</h1>
|
||||
```
|
||||
|
||||
* **Универсальный селектор (Universal Selector):**
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
Применяет стиль ко всем элементам на странице. Используется для сброса стилей по умолчанию.
|
||||
|
||||
* **Селектор атрибутов (Attribute Selector):**
|
||||
|
||||
```css
|
||||
a[href] {
|
||||
color: green;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
```
|
||||
|
||||
* `a[href]`: Выбирает все элементы `<a>` с атрибутом `href`.
|
||||
* `input[type="text"]`: Выбирает все элементы `<input>` с атрибутом `type`, равным "text".
|
||||
|
||||
* **Селектор потомков (Descendant Selector):**
|
||||
|
||||
```css
|
||||
ul li {
|
||||
list-style-type: square;
|
||||
}
|
||||
```
|
||||
|
||||
Выбирает все элементы `<li>`, которые являются потомками элемента `<ul>`.
|
||||
|
||||
* **Селектор дочерних элементов (Child Selector):**
|
||||
|
||||
```css
|
||||
ul > li {
|
||||
border: 1px solid black;
|
||||
}
|
||||
```
|
||||
|
||||
Выбирает все элементы `<li>`, которые являются *непосредственными* дочерними элементами `<ul>`.
|
||||
|
||||
* **Селектор смежных элементов (Adjacent Sibling Selector):**
|
||||
|
||||
```css
|
||||
h2 + p {
|
||||
font-style: italic;
|
||||
}
|
||||
```
|
||||
|
||||
Выбирает первый элемент `<p>`, который непосредственно следует за элементом `<h2>`.
|
||||
|
||||
* **Селектор общих элементов (General Sibling Selector):**
|
||||
|
||||
```css
|
||||
h2 ~ p {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
Выбирает все элементы `<p>`, которые являются общими братьями и сестрами элемента `<h2>` (то есть находятся на одном уровне и следуют после `<h2>`).
|
||||
|
||||
* **Псевдоклассы (Pseudo-classes):**
|
||||
|
||||
* `:hover`: Стиль применяется при наведении курсора мыши на элемент.
|
||||
|
||||
```css
|
||||
a:hover {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
* `:active`: Стиль применяется, когда элемент активирован (например, нажата кнопка).
|
||||
|
||||
```css
|
||||
button:active {
|
||||
background-color: #ccc;
|
||||
}
|
||||
```
|
||||
|
||||
* `:focus`: Стиль применяется, когда элемент в фокусе (например, текстовое поле).
|
||||
|
||||
```css
|
||||
input:focus {
|
||||
border: 2px solid blue;
|
||||
}
|
||||
```
|
||||
|
||||
* `:visited`: Стиль для посещенных ссылок.
|
||||
|
||||
```css
|
||||
a:visited {
|
||||
color: purple;
|
||||
}
|
||||
```
|
||||
|
||||
* `:nth-child(n)`: Выбирает элемент, который является n-м потомком своего родителя
|
||||
|
||||
```css
|
||||
li:nth-child(odd) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
li:nth-child(even) {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
```
|
||||
|
||||
* **Псевдоэлементы (Pseudo-elements):**
|
||||
|
||||
* `::before`: Вставляет контент *перед* элементом.
|
||||
|
||||
```css
|
||||
p::before {
|
||||
content: "Читать далее: ";
|
||||
}
|
||||
```
|
||||
|
||||
* `::after`: Вставляет контент *после* элемента.
|
||||
|
||||
```css
|
||||
h1::after {
|
||||
content: " - Новый заголовок";
|
||||
}
|
||||
```
|
||||
* `::first-line`: Стилизует первую строку элемента.
|
||||
|
||||
```css
|
||||
p::first-line {
|
||||
font-weight: bold;
|
||||
}
|
||||
```
|
||||
|
||||
* `::first-letter`: Стилизует первую букву элемента
|
||||
|
||||
```css
|
||||
p::first-letter {
|
||||
font-size: 200%;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
#### Комбинирование селекторов
|
||||
|
||||
Селекторы можно комбинировать для создания более сложных правил:
|
||||
|
||||
```css
|
||||
/* Элемент <p> с классом "highlight" внутри элемента <div> с ID "content" */
|
||||
#content div p.highlight {
|
||||
font-size: 16px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user