HTML

Начало работы

hello.html

``html

Или попробуйте это сделать в jsfiddle

Комментарий

``html



### Параграф

``html
<p>Я из CheatSheets.zip</p>
<p>Обмен быстрыми справочными шпаргалками.</p>

См: Элемент Paragraph

HTML-ссылка

``html Чит-листы Email Call Msg

---

| | | |
|---|----------|-----------------------------------------------------------------|
| | | `href` | URL, на который указывает гиперссылка |
| | | `rel` | Отношение к URL, на который указывает гиперссылка |
| | | `target` | Целевое местоположение ссылки: <br/> `_self`, `_blank`, `_top`, `_parent` |
{.left-text}

См: [Атрибуты \<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes)



### Тег изображения

``html {.wrap}
<img loading="lazy" src="https://xxx.png" alt="Опишите изображение здесь" width="400" height="400">
src
alt
width
height
loading
{.left-text}

См: Элемент Image Embed

Теги форматирования текста

``html Жирный текст Этот текст важен Италический текст Этот текст подчеркнут Подчеркнутый текст

Исходный код Удаленный текст Выделенный текст (HTML5) Вставленный текст Сделать текст надстрочным Сделать текст подстрочным Сделать текст меньше Ctrl

Заголовки

``html

Разделы раздела
<div></div> Раздел или секция содержимого страницы
<span></span> Раздел текста внутри другого содержания
<p></p> Абзац текста
<br> Разрыв строки
<hr>

Эти теги используются для разделения страницы на разделы

Inline Frame

``html {.wrap}

См: Элемент Inline Frame

JavaScript в HTML

``html



#### Внешний JavaScript

``html
<body>
    ...
    
    <script src="app.js"></script>.
</body>

CSS в HTML

``html


#### Внешняя таблица стилей

``html
<head>
...
<link rel="stylesheet" href="style.css"/>.
</head>

Теги HTML5

Документ

``html

Навигация по заголовку

``html

Теги HTML5
article Самостоятельный контент
aside Второстепенный контент
audio Вставка звука или аудиопотока
bdi Двунаправленный элемент изоляции
canvas Рисование графики с помощью JavaScript
data Машиночитаемое содержимое
datalist Набор предопределенных опций
details Дополнительная информация
dialog Диалоговое окно или подокно
embed Встраивание внешнего приложения
figcaption Надпись или легенда для рисунка
figure Рисунок с иллюстрацией
footer Нижний или наименее важный колонтитул
header Верхний колонтитул или важная информация
main Основное содержание документа
mark Текст, выделенный цветом
метр Скалярное значение в известном диапазоне
nav Раздел навигационных ссылок
output Результат вычисления
picture Контейнер для нескольких источников изображений
progress Ход выполнения задачи
rp Предоставляет обратную скобку
rt Определяет произношение символов
ruby Представляет собой рубиновую аннотацию
section Группа в серии связанных материалов
source Ресурсы для медиа-элементов
summary
template
time
track Текстовые дорожки для медиа-элементов
video Встраивает видео
wbr Возможность переноса строки

HTML5 Video

``html {.wrap} . Извините, ваш браузер не поддерживает встроенное видео. 

#### ↓ Предварительный просмотр
<video controls="" width="100%">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">.
    Извините, ваш браузер не поддерживает встроенное видео.
</video>


### HTML5 Audio
``html {.wrap}
<aуправление аудио
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
    Ваш браузер не поддерживает элемент audio.
</audio>

↓ Предварительный просмотр

Ваш браузер не поддерживает аудиоэлемент.

HTML5 Ruby

``html {.wrap} 汉 (hàn) 字 (zì) 

#### ↓ Предварительный просмотр
<ruby class="mt-4 text-center text-5xl">
  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>


### HTML5 kdi
``html
<ul>
 <li>Пользователь <bdi>hrefs</bdi>: 60 баллов</li>.
 <li>Пользователь <bdi>jdoe</bdi>: 80 баллов</li>
 <li>Пользователь <bdi>إيان</bdi>: 90 баллов</li>.
</ul>

↓ Предварительный просмотр

Прогресс HTML5

``html 

<progress value="50" max="100" class="w-full"></progress>


### Знак HTML5
``html
<p>Я люблю <mark>CheatSheets.zip</mark></p>

Таблицы HTML

Пример таблицы

``html

Теги HTML-таблицы

Tag Description
<table> Определяет таблицу
<th> Определяет ячейку заголовка в таблице
<tr> Определяет строку в таблице
<td> Определяет ячейку в таблице
<caption> Определяет надпись в таблице
<colgroup> Определяет группу столбцов
<col> Определяет столбец в таблице
<thead> Группирует содержимое заголовка
<tbody> Группирует содержимое заголовка
<tfoot> Группирует содержимое нижнего колонтитула

<td> Атрибуты

Атрибут Описание
colspan Количество столбцов, которые должна охватывать ячейка
headers Одна или несколько ячеек заголовка, с которыми связана ячейка
rowspan Количество строк, которые должна охватывать ячейка

См: td#Атрибуты

<th>Атрибуты

Атрибут Описание
colspan Количество столбцов, которые должна охватывать ячейка
headers Одна или несколько ячеек заголовка, с которыми связана ячейка
rowspan Количество строк, которые должна охватывать ячейка
abbr Описание содержимого ячейки
scope Элемент заголовка, к которому относится ячейка

См: th#Attributes

Списки HTML

Неупорядоченный список

``html

Упорядоченный список

``html

Список определений

``html

HTML-формы

Теги формы

``html

↓ Предварительный просмотр

Элемент HTML <form> используется для сбора и отправки информации во внешний источник.

Атрибут формы

Атрибут Описание
name Имя формы для скриптинга
action URL скрипта формы
method
enctype Тип носителя, см. enctype
onsubmit
onreset

Теги ярлыков

``html

Нажмите на меня 

---
``html
<!-- Атрибут 'for' -->
<label for="user">Нажмите на меня</label>
<input id="user" type="text" name="name"/>

for в метке ссылается на атрибут id входа

Входные теги

``html Имя: 

#### ↓ Предварительный просмотр
<form style="padding: 20px;">
    <label for="username">Имя пользователя:</label>
    <input type="text" name="username" id="username" class="border border-slate-400">
</form>

См: [HTML-теги ввода](/html#html-input-tags)


### Теги текстовой области
``html {.wrap}
<textarea rows="2" cols="30" name="адрес" id="адрес"></textarea>

↓ Предварительный просмотр

Textarea - это элемент управления многострочным вводом текста

Радиокнопки

``html Мужчина женщина

#### ↓ Предварительный просмотр
<form style="padding: 20px;">
    <input type="radio" name="gender" id="m">
    <label for="m">Мужчина</label>
    <input type="radio" name="gender" id="f">
    <label for="f">женщина</label>.
</form>

Радиокнопки используются для того, чтобы пользователь мог выбрать только один вариант



### Чекбоксы
``html
<input type="checkbox" name="s" id="soc">
<label for="soc">Футбол</label>
<input type="checkbox" name="s" id="bas">
<label for="bas">Бейсбол</label>

↓ Предварительный просмотр

Флажки позволяют пользователю выбрать один или несколько вариантов

Выберите теги

``html Город: Сидней Мельбурн Кромвель. 


#### ↓ Предварительный просмотр
<form style="padding: 20px">
    <label for="city">Город:</label>
    <select name="city" id="city" class="border border-slate-400">
        <option value="1">Сидней</option>
        <option value="2">Мельбурн</option>
        <option value="3">Кромвель</option>.
    </select>
</form>

Поле выбора представляет собой выпадающий список вариантов



### Теги полей
``html
<fieldset>
    <legend>Ваш любимый монстр</legend>
    <input type="radio" id="kra" name="m">
    <label for="kraken">Кракен</label><br/>
    <input type="radio" id="sas" name="m">
    <label for="sas">Сасквотч</label>.
</fieldset>

↓ Предварительный просмотр

Теги Datalist(HTML5)

``html Выберите браузер:

↓ Предварительный просмотр

Кнопки отправки и сброса

``html

Отправить данные на сервер; Сбросить значения по умолчанию

Теги ввода HTML

Атрибуты ввода

Тег input представляет собой пустой элемент, определяющий конкретный тип информации о поле, которую необходимо получить от пользователя. ``html {.wrap} 


----

| - | | |
|---|-------------------------|-------------------------------------------------------------------------------------------------------------------------------|
| | | `type="..."` | Тип вводимых данных |
| | | `value="..."` | Значение по умолчанию |
| | | `name="..."` | Используется для описания этих данных в HTTP-запросе |
| | | `id="..."` | Уникальный идентификатор, который используется другими элементами HTML |
| | | `readonly` | Запрещает пользователю изменять данные |
| | | `disabled` | Прекращает любое взаимодействие |
| | | `checked` | Радио- или чекбокс выбирается или нет |
| | | `required` | Быть обязательным, См. [required](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required#example)|
| | | `placeholder="..."` | Добавляет временный, См. [::placeholder](https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#examples)|
| | | `autocomplete="off"` | Отключить автозавершение |
| | | `autocapitalize="none"` | Отключить автоматическую капитализацию |
| | | `inputmode="..."` | Отображение определенной клавиатуры, см. [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) |
| | | `list="..."` | Идентификатор связанного [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) |
| | | `maxlength="..."` | Максимальное количество символов |
| | | `minlength="..."` | Минимальное количество символов |
| | | `min="..."` | Минимальное числовое значение диапазона и числа |
| | | `max="..."` | Максимальное числовое значение диапазона и числа |
| | | `step="..."` | Как будет увеличиваться число в диапазоне & number |
| | | `pattern="..."` | Задает [регулярное выражение](/regex), см. [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) |
| | | `автофокус` | Быть сфокусированным |
| | | `spellcheck` | Выполнить проверку правописания |
| | | `multiple` | Разрешать ли значения [multiple](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple) |
| | | `accept=""` | Ожидаемый тип файла в элементах управления загрузкой [file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) |
{.left-text}

Также см: [Атрибуты для элемента \<input>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)


### Типы ввода

| | |
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------|
| `type="checkbox"` | <input type="checkbox" class="border border-slate-400"> | `type="checkbox"` | <input type="checkbox" class="border border-slate-400">.
| `type="radio"` | <input type="radio" class="border border-slate-400"> |
| `type="file"` | <input type="file" class="border border-slate-400"> |
| `type="hidden"` | <input type="hidden" class="border border-slate-400"> |
| `type="text"` | <input type="text" class="border border-slate-400"> |
| `type="password"` | <input type="password" class="border border-slate-400"> |
| `type="image"` | <input type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" width="70"> |
| `type="reset"` | <input type="reset" class="border border-slate-400"> |
| `type="button"` | <input type="button" class="border border-slate-400">Кнопка</input> |
| `type="submit"` | <input type="submit" class="border border-slate-400"> |

#### Новые типы ввода в HTML5
| | |
|-------------------------|---------------------------------------------------------------------|
| `type="color"` | <input type="color" value="#0FB881" class="border border-slate-400"> | | `type="color"` | <input type="color" value="#0FB881" class="border border-slate-400">.
| `type="date"` | <input type="date" class="border border-slate-400"> |
| `type="time"` | <input type="time" class="border border-slate-400"> |
| `type="month"` | <input type="month" class="border border-slate-400"> | |
| `type="datetime-local"` | <input type="datetime-local" class="border border-slate-400"> |
| `type="week"` | <input type="week" class="border border-slate-400"> |
| `type="email"` | <input type="email" class="border border-slate-400"> |
| `type="tel"` | <input type="tel" class="border border-slate-400"> |
| `type="url"` | <input type="url" class="border border-slate-400"> |
| `type="number"` | <input type="number" class="border border-slate-400"> |
| `type="search"` | <input type="search" class="border border-slate-400"> |
| `type="range"` | <input type="range" class="border border-slate-400"> |


### Входные CSS-селекторы

| | |
|---------------|---------------------------|
| `input:focus` | Когда клавиатура сфокусирована |
См: [Псевдоклассы ввода](/css#input-pseudo-classes)


Мета-теги HTML {.cols-2}
-----------

### Мета-теги {.row-span-3}

Мета-тег описывает метаданные в HTML-документе. Он поясняет дополнительные сведения о HTML.


``html
<meta charset="utf-8">

``html

``html

``html

``html

``html

``html

Open Graph

``html

Twitter Cards

``html

Геотаггинг

``html

Также см.