Шпаргалка по 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/" target="_blank"> 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>
Поделитесь с другими:

Если материал понравился Вам и оказался для Вас полезным, поделитесь им со своими друзьями!

Читать по теме
Интересные статьи