Шпаргалка по HTML

Основы HTML

Пример программы

<!-- Пример программы -->
<!DOCTYPE html>
<html>
  <head>
    <title>Привет, мир!</title>
  </head>
  <body>
      <h1>Привет, мир! </h1>
      <р> Доброе утро!! </p>
  </body>
</html>

<!DOCTYPE html>> : Указывает тип документа, здесь это документ HTML5.
<html> : корневой элемент HTML-страницы.
<head> : содержит метаинформацию о HTML-странице.
<title> : указывает заголовок отображаемой HTML-страницы.
<body> : тело html-документа, которое содержит заголовки, абзацы, изображения, гиперссылки, таблицы, списки и т. д.
<h1> : определяет большой заголовок
<p> : определяет абзац
</body> : представляет конец тела
</html> : представляет конец html
 : комментарии

HTML-теги

HTML-теги	Описание	Пример
`<h1..h6>Заголовки </h1..h6>`	`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` — теги заголовков, где `<h1>` — самый важный заголовок и `<h6>` — наименее важный заголовок.	`<h1>МОЙ ПЕРВЫЙ БЛОГ</h1>`
`<div>..</div>`	`<div>` используется для переноса блока кода в один блок	`<div> Блок кода </div>`
`<span> … </span>`	Используется для вставки встроенных элементов, таких как изображение, значок и т. д., без нарушения форматирования страницы.	`<span> изображение значка </span>`
`<p> … </p>`	Содержит обычный текст, например абзац	`<p> многострочный текст </p>`
`<br/>`	разрыв строки, используемый для записи новой строки.	`<br/>`
`<hr/>`	Подобно разрыву строки, дополнительно рисует горизонтальную черту, чтобы указать конец раздела	`<hr/>`
`<meta/>`	Используется для предоставления метаданных, таких как описание веб-страницы	`<meta charset="utf-8"/>`
`<a>..</a>`	Используется для связи внешних веб-страниц с вашей веб-страницей	`<a href="https://onecompiler.com/"> OneCompiler</a>`
`<img />`	Используется для вставки изображения	`<img src="/sample.jpg" alt="образец изображения" width="100" height="50" longdesc="image" />`

Форматирование HTML

Элементы форматирования	Описание
`<i>..</i>`	Курсив
`<u>..</u>`	Подчеркнуть
`<b>..</b>`	Жирный
`<strong>..</strong>`	Важный текст
`<em>..</em>`	Выделенный текст
`<знак>..</знак>`	Выделенный текст
`<small>..</small>`	Меньший текст
`<del>..</del>`	Удаленный текст
`<ins>..</ins>`	Вставленный текст
`<sub>..</sub>`	Подстрочный текст
`<sup>..</sup>`	Надстрочный текст

Таблицы

Тег <table> используется для создания таблицы, тег <tr> используется для создания строк таблицы, а тег <td> используется для создания ячеек данных.

   <table border = "1">
         <tr>
            <td>Строка 1, столбец 1</td>
            <td>Ряд 1, столбец 2</td>
         </tr>

         <tr>
            <td>Ряд 2, столбец 1</td>
            <td>Ряд 2, столбец 2</td>
         </tr>

   </table>

Списки

1. Нумерованные списки

Нумерация элементов списка

<ol type = "1"> <!-- Числовая нумерация, регистр по умолчанию -->
<ol type = "I"> <!-- Прописные римские цифры-->
<ol type = "i"> <!-- Строчные римские цифры-->
<ol type = "A"> <!-- Прописные буквы-->
<ol type = "a"> <!-- Строчные буквы-->

    <ol type = "1">
        <li>элемент списка 1</li>
        <li>элемент списка 2</li>
        <li>элемент списка 3</li>
    </ol>

2. Ненумерованные списки

Элементы списка отображаются с помощью маркеров

<ul type = "disc"> <!-- случай по умолчанию-->
<ul type = "square">
<ul type = "circle">

<ul type= "circle">
    <li>элемент списка 1</li>
    <li>элемент списка 2</li>
    <li>элемент списка 3</li>
</ul>

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

Перечислите записи, как в словаре или энциклопедии.

<dl> : Начало списка определений
<dt> : Термин
<dd>: определение термина
</dl> : Конец списка определений

 <dl>
    <dt><b>ПР</b></dt>
    <dd>Упорядоченные списки</dd>
    <dt><b>UL</b></dt>
    <dd>Ненумерованные списки</dd>
    <dt><b>DL</b></dt>
    <dd>Списки определений</dd>
 </dl>

Формы

Элемент <form> используется для определения формы.

<form>
<!--элементы формы, такие как выбор ввода и т. д. -->
</form>

`<input>` элемент

Тип	Описание
`<input type="text">`	Чтобы определить однострочное поле ввода текста
`<input type="password">`	Чтобы определить однострочное поле ввода пароля
`<input type="radio">`	Чтобы определить переключатель
`<input type="submit">`	Чтобы определить кнопку отправки
`<input type= "checkbox">`	Чтобы установить флажок
`<input type= "file">`	Чтобы определить поле загрузки файла

 <form>
   ID : <input type = "text" name = "user-id" /> <br> <!-- Однострочный ввод текста-->
   Пароль: <input type = "password" name = "password" /> <br> <!-- Однострочный ввод пароля-->
 </form>

Шпаргалки Справочник Программирование Сайтостроение Основы Шпаргалка CheatSheet