CSS flex-wrap

   CSS свойство flex-wrap определяет будут ли flex-элементы выстраиваться в одну строку или многострочно.

   Если многострочное расположение разрешено, то свойство позволяет задавать направление расположения flex-элементов.

Синтаксис:

   в CSS:

flex-wrap: "nowrap | wrap | wrap-reverse | initial | inherit";

   в JavaScript:

object.style.flexWrap = "wrap"

Значения свойства:

nowrap

   Указывает, что флекс элементы выстраиваются в одну строку (является значением по умолчанию).

wrap

   Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов в случае переполнения. Флекс элементы размещаются слева направо при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr), а при значении rtl размещаются справа налево.

wrap-reverse

   Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов в случае переполнения, по аналогии со значением wrap, однако формирование строк идёт в обратном порядке.

initial

   Устанавливает свойство в значение по умолчанию.

inherit

   Указывает, что значение наследуется от родительского элемента.

 

Ресурсы для более глубокого изучения вопроса:

https://developer.mozilla.org/ru/docs/Web/CSS/flex-wrap#html

https://basicweb.ru/css/css_pr_flex-wrap.php

Что такое document.getElementById

 Синтаксис:

element = document.getElementById(id);


   document.getElementById() возвращает ссылку на элемент по его идентификатору (ID)

   ID является строкой, которая может быть использована для идентификации элемента, она может быть определена при помощи атрибута id в html или из скрипта.

   Если подобный элемент не будет найден, то метод возвратит значение null.


Пример:

<div id="moo">
</div>

<script>
  // получаем элемент
  let moo = document.getElementById('moo');

  // делаем его фон красным
  moo.style.background = 'red';
</script>



Источники для более глубокого изучения:

https://developer.mozilla.org/ru/docs/Web/API/Document/getElementById
https://learn.javascript.ru/searching-elements-dom

Script - defer и async. Что значат, в чём разница

   Если не указывать эти атрибуты для тега <script>, то такие скрипты будут отрисовываться в ходе отрисовки страницы в том порядке, и в то время, когда они будут встречены в html коде.

   То есть, пока скрипт не будет выполнен, выполнение кода, следующего за этим скриптом не будет происходить.

 

Defer

   Атрибут defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.

Async

   При наличии атрибута async браузер, при возможности, запускает скрипт асинхронно.

   То есть указанный в атрибуте src файл будет выполняться без ожидания загрузки и отображения веб-страницы (страница не ожидает результата выполнения скрипта, а продолжает загружаться как обычно)

 

Пример написания:

<script defer src="scripts/primer.js"></script>
<script async src="scripts/primer.js"></script>

CSS селекторы. Селектор типа, селектор id, селектор class

Селекторы - это имена стилей css, которые выбираются при обращении к ним. 

Селектор типа

   Селектор типа - это селектор, который задаёт стиль для всех элементов с данным именем. В стилях в качестве селектора в данном случае выступает имя тега.

   Например, если требуется сделать отступ у первой строки для всех абзацев или изменить цвет всех заголовков первого уровня.


   Пример css:

/*Задаём отступ первой строки для всех абзацев*/
p {text-indent: 25px;}
 
/*Изменяем цвет всех заголовков первого уровня на зелёный*/
h1 {color: green;}



Селектор id

   CSS селектор id (идентификатор) предназначен для применения стиля к уникальным элементам на веб-странице (т.е. используется на странице всего один раз).

   Каждый идентификатор может встречаться на странице только один раз, т.е. определенный id должен быть использован на странице только с тем тегом, для которого он предназначен. Если один и тот же идентификатор будет применен более, чем к одному элементу, во-первых HTML код не пройдет валидацию, во-вторых это может вызвать некорректную обработку кода браузером и вы можете увидеть не тот результат, которого ожидали.
   
   Для использования селектора id, нужно создать идентификатор (id), придумав ему уникальное имя, и прописать его в атрибуте id элемента, к которому будет применяться стиль. В CSS коде селектор id начинается с символа # сразу после которого идет имя идентификатора

Пример css:

      #para1 {
        text-align: center;
        color: red;
      }

Пример html:

  <div id="para1">
Содержание
  </div>


   Идентификаторы можно применять к конкретному тегу следующим образом:

   ИмяТега#Имя идентификатора { свойство1: значение; свойство2: значение; ... }



Пример css:

   P {
    color: green; /* Зеленый цвет текста */
    font-style: italic; /* Курсивное начертание текста */
   }
   P#opa {
    color: red; /* Красный цвет текста */
    border: 1px solid #666; /* Параметры рамки */
    background: #eee; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
   }

Пример HTML:

   <p>Обычный параграф</p>
   <p id="opa">Параграф c особым стилем</p>



Селектор class

   CSS селектор class позволяет также как и селектор id стилизовать конкретный элемент страницы, но в отличие от id, селектор class позволяет применить свой стиль к нескольким элементам на веб-странице, а не только к одному.

   Для использования селектора class, нужно указать, к какому элементу на странице вы хотите его применить, для этого надо всего лишь добавить атрибут class к HTML тегу, который нужно стилизовать, и указать в качестве значения нужное имя класса.

Правила для имен классов:

    - в CSS коде все обозначения селекторов класс должны начинаться с точки, с ее помощью браузеры опознают селектор класс в таблице стилей CSS
    - в имени класса разрешается использовать только буквы, числа, дефис и знак подчеркивания
    - имя класса после точки всегда должно начинаться с буквы
    - имена классов чувствительны к регистру, например .Menu и .menu будут рассматриваться в CSS, как два разных класса

Пример css:
    
.menter {
  color: #33CCFF;
  font-family: sans-serif;
}

Пример html:

<h1 class="menter">Абзац будет выровнен по центру.</h1>


   Если атрибут class, с одним и тем же именем, добавлен к нескольких разным тегам, а вам нужно чтобы стиль применялся только к определенным тегам, то в селекторе перед обозначением класса нужно указать тег, к которому должен быть применён стиль:


Пример html:

    <style>
      p.centner { text-align: center; }
    </style>

<p class="centner">Абзац будет выровнен по центру</p>
<div class="centner">Для этого тега стиль не применится</div>


Ресурсы для более глубокого изучения:

https://puzzleweb.ru/css/2_css_id_class.php
http://htmlbook.ru/samcss/identifikatory

Тег link

 Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.
 
  Пример употребления:
    <link rel="stylesheet" href="style.css">
 
  Атрибуты

charset
    Кодировка связываемого документа.
href
    Путь к связываемому файлу.
media
    Определяет устройство, для которого следует применять стилевое оформление.
rel
    Определяет отношения между текущим документом и файлом, на который делается ссылка.
    Это необходимо, чтобы браузер знал, как использовать подключаемый документ.
    Значения:
      - alternate - ссылка на альтернативную версию документа
        (то есть страницы для печати, перевод или зеркало или, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей)
      - author - определяет ссылку страницу об авторе документа или на страницу с контактными данными автора.
      - canonical - позволяет пометить страницы с дублирующимся контентом, это значит что все страницы, имеющие одинаковое содержимое должны содержать тег <link> с атрибутом rel="canonical".

         Атрибут href, в этом случае, должен содержать ссылку на страницу с идентичным содержимым, которую поисковые системы должны считать основной:
         <link rel="canonical" href="httр://www.puzzleweb/html/tag_p.php">
      - first - указывает ссылку, ведущую на первый документ из последовательности документов.
      - help - ссылка на документ со справкой.
      - icon - определяет путь к иконке, которая будет использована для текущего документа.
      - last - указывает ссылку, ведущую на последний документ в последовательности документов.
      - licence - ссылка на сведения об авторских правах для документа.
      - next - указывает, что этот документ является частью серии, и что ссылка будет вести на следующий документ в этой серии.
      - prefetch - указывает, что следует заранее кэшировать файл, на который ведет ссылка.
      - prev - указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
      - search - ссылка на поиск для документа.
      - stylesheet Определяет, что подключаемый файл хранит таблицу стилей (CSS).

sizes
    Указывает размер иконок для визуального отображения.
type
    MIME-тип данных подключаемого файла.
 

 
Также для этого тега доступны универсальные атрибуты.
 

Ресурсы для более глкбокого изучения:
  https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

Адаптивный дизайн. meta name='viewport'

   Метатег viewport был разработан для того, чтобы указывать браузерам на то, в каком масштабе необходимо отображать пользователю видимую область веб-страницы.

   Viewport - это видимая пользователю область веб-страницы (то, что может увидеть пользователь, не прибегая к прокрутке).
   Размеры этой области определяются размером экрана устройства.



Настройка meta viewport для адаптивных веб-страниц

 

   Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:

<meta name="viewport" content="width=device-width, initial-scale=1">

   Атрибут name предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить.
   Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.

   Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:

    width=device-width
    initial-scale=1


   Параметр (width=device-width) отвечает за то, чтобы ширина видимой области веб-страницы равнялась CSS ширине устройству (device-width). Данная ширина (CSS) - это не физическое разрешение экрана. Это некоторая величина независящая от разрешения экрана. Она предназначена для того, чтобы мобильный адаптивный дизайн сайта отображался на всех устройствах одинаково независимо от их плотности пикселей экрана.

   Параметр initial-scale устанавливает первоначальный масштаб веб-страницы. Значение 1 означает то, что масштаб равен 100%. 

   Ресурсы для более глубокого изучения:

https://metanit.com/web/html5/11.2.php

https://itchief.ru/lessons/html-and-css/meta-viewport-how-it-works

Тег Button

   HTML тег <button> создает кнопку, похожую на кнопку элемента <input> со значением submit, reset, button или image атрибута type.

   Но, в отличие от элемента <input>, элемент <button> не относится к пустым элементам - у него есть открывающий и закрывающий тег, между которыми можно расположить текст, изображения или другие HTML-элементы.

   Когда браузер отображает элемент <button> на веб-странице, то весь элемент со всем его содержимым становится одной активной кнопкой. По умолчанию он будет иметь такой же внешний вид, как и кнопка, созданная с помощью <input type="button">, но из-за возможности содержать другие HTML-элементы он имеет гораздо больше возможностей для применения к нему CSS стилей.

 

   Атрибуты:

accesskey
    Доступ к элементам формы с помощью горячих клавиш.
autofocus
    Устанавливает, что кнопка получает фокус после загрузки страницы.
disabled
    Блокирует доступ и изменение элемента.
form
    Связывает между собой форму и кнопку.
formaction
    Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
formenctype
    Способ кодирования данных формы.
formmethod
    Указывает метод пересылки данных формы.
formnovalidate
    Отменяет проверку формы на корректность.
formtarget
    Открывает результат отправки формы в новом окне или фрейме.
name
    Определяет уникальное имя кнопки.
type
    Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы.
value
    Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты и события.

 

   Ресурсы для более подробного изучения:

https://puzzleweb.ru/html/tag_button.php 

http://htmlbook.ru/html/button 

https://basicweb.ru/html/tag_button.php

Что такое vue.js

   Vue - это JavaScript-фреймворк для создания пользовательских интерфейсов.

   Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами.

   С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его совместно с современными инструментами и дополнительными библиотеками.

   В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения.

 

   Как подключить Vue.js:

<!-- версия для разработки, отображает полезные предупреждения в консоли -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

или:

<!-- production-версия, оптимизированная для размера и скорости -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

   Есть и другие варианты установки Vue.

 

 

Наведи на меня курсор на пару секунд, чтобы увидеть динамически связанное значение title!

События HTML

   События HTML - это специальные глобальные атрибуты, используемые в тегах для вызова обработчиков событий, написанных на различных языках сценариев таких, как JavaScript и вызываемых, когда на странице происходит какое-либо действие.

    События позволяют сделать страницу динамической.

 

Синтаксис: onblur="скрипт"

Атрибуты событий окна
События, вызываемые на объект окна (применяются с тегом <body>):

onafterprint        Скрипт срабатывает после того, как документ будет напечатан
onbeforeprint     Скрипт выполняется перед распечаткой документа
onbeforeunload  Скрипт срабатывает до загрузки документа
onerror              Скрипт срабатывает, при возникновении ошибки
onhashchange    Скрипт срабатывает при изменении в названии #якоря из текущего URL-адреса
onload               Скрипт запустится после завершения полной загрузки страницы
onmessage         Скрипт выполняется при срабатывании сообщения
onoffline             Скрипт срабатывает, когда браузер начинает работать в автономном режиме
ononline             Скрипт срабатывает, когда браузер начинает работать онлайн
onpagehide        Скрипт срабатывает, когда пользователь покидает страницу
onpageshow      Скрипт срабатывает, когда пользователь переходит на страницу
onpopstate        Скрипт срабатывает при изменении окна истории
onresize            Скрипт срабатывает, когда окно браузера изменяется
onstorage          Скрипт срабатывает, когда веб-хранилище данных обновляется
onunload           Скрипт срабатывает при выходе пользователя из документа

 

События формы
   События срабатывают на действия внутри HTML формы (могут применяться почти ко всем элементам HTML, но чаще всего применяются к элементам формы)

 
onblur               Событие onblur возникает (скрипт срабатывает) при потере элемента фокуса. Это обычно происходит, если щелкнуть на другой элемент текущего документа. Событие onblur противоположно по своему действию событию onfocus.

onchange           Скрипт срабатывает при изменении значений элемента
oncontextmenu   Скрипт срабатывает при вызове контекстного меню
onfocus              Скрипт срабатывает, когда элемент получает фокус
oninput               Скрипт срабатывает, когда элемент получает ввод данных от пользователя
oninvalid             Скрипт срабатывает, когда элемент станет недействителен
onreset               Скрипт срабатывает при сбросе формы
onsearch            Скрипт срабатывает, когда пользователь пишет что-то в поле поиска (для <input="search">)
onselect             Скрипт срабатывает при выделении текста в элементе
onsubmit            Скрипт срабатывает при отправке формы
 

 

События клавиатуры 

События, вызываемые клавиатурой (могут применяться ко всем элементам HTML)

 
onkeydown         Скрипт срабатывает, когда пользователь нажимает на клавишу
onkeypress         Скрипт срабатывает после того, как пользователь нажал на клавишу
onkeyup             Скрипт срабатывает после того, как нажатая клавиша была отпущена

 

События мыши
События, вызываемые действиями мышкой или аналогичными действиями пользователя (могут применяться ко всем элементам HTML)

onclick              Скрипт срабатывает при клике левой кнопки мыши на элементе
ondblclick         Скрипт срабатывает после двойного клика мыши на элементе
ondrag              Скрипт срабатывает при перетаскивании элемента
ondragend        Скрипт срабатывает после операции перетаскивания
ondragenter      Скрипт срабатывает, когда элемент будет перенесен на заданную зону (цель для переноса)
ondragleave      Скрипт срабатывает, когда элемент выходит из допустимой зоны для переноса
ondragover       Скрипт срабатывает, когда элемент перемещают над допустимой зоной для переноса
ondragstart       Скрипт срабатывает, когда пользователь начинает перетаскивать элемент
ondrop             Скрипт срабатывает после того, как перетаскиваемый элемент опустился на объект перетаскивания
onmousedown    Скрипт срабатывает при нажатии кнопки мыши на элементе
onmousemove    Скрипт срабатывает, пока указатель мыши перемещается над элементом
onmouseout        Скрипт срабатывает, когда указатель мыши перемещается за пределы элемента
onmouseover      Скрипт срабатывает, когда указатель мыши начал перемещаться над элементом
onmouseup         Скрипт срабатывает при отпускании кнопки мыши с элемента
onscroll              Скрипт срабатывает во время прокручивания полосы прокрутки элемента
onwheel             Скрипт срабатывает при использовании колеса мыши на элементе

 

События буфера обмена

oncopy             Скрипт срабатывает, когда пользователь копирует содержимое элемента
oncut                Скрипт срабатывает, когда пользователь вырезает содержимое элемента
onpaste            Скрипт срабатывает, когда пользователь вставляет содержимое в элемент
 

 

События медиа-файлов
События, вызываемые для медиа файлов, таких как видео, изображения и аудио (могут применяться ко всем элементам HTML, но чаще всего применяются к таким элементам, как <audio>, <embed>, <img>, <object>, and <video>)

onabort                    Скрипт срабатывает при прерывании
oncanplay                Скрипт срабатывает, когда файл будет готов, чтобы начать проигрывание (когда будет достаточно буферизирован, чтобы начать)
oncanplaythrough     Скрипт срабатывает, когда файл может быть воспроизведен полностью (от начала до конца), не останавливаясь для буферизации
oncuechange            Скрипт, который будет запускаться, когда изменения метки в элементе <track>
ondurationchange     Скрипт срабатывает при изменении длины продолжительности медиа файла
onemptied                Скрипт срабатывает, когда произошла какая-то неполадка и файл стал недоступен (например при разрыве связи с интернетом)
onended                  Скрипт срабатывает, когда аудио/видео файл дойдет до конца (например для вывода сообщения: спасибо за прослушивание/просмотр)
onerror                   Скрипт срабатывает, если возникнет ошибка при загрузке файла
onloadeddata          Скрипт срабатывает при загрузке данных медиа файла
onloadedmetadata   Скрипт срабатывает, когда загружены мета-данные (например размер и продолжительность)
onloadstart              Скрипт срабатывает при загрузке файла прежде, чем начнет загружаться на самом деле
onpause                  Скрипт срабатывает, если воспроизведение файла приостановлено (нажали паузу) пользователем или программно
onplay                    Script to be run when the media is ready to start playing
onplaying               Скрипт срабатывает, когда файл готов начать воспроизводиться
onprogress            Скрипт срабатывает, когда браузер находится в процессе получения данных медиа файла
onratechange         Скрипт срабатывает, каждый раз, при изменении режима воспроизведения (например, когда пользователь переключается на медленное воспроизведение или режим быстрой перемотки)
onseeked               Скрипт запускается, когда атрибут seeked у тегов audio или video имеет значение "false", т.е.текущая позиция воспроизведения найдена
onseeking              Скрипт запускается, когда атрибут seeking у тегов audio или video имеет значение "true", т.е. текущая позиция воспроизведения перемещается
onstalled                Скрипт срабатывает, когда браузер не может получить данные медиа файла по любой причине
onsuspend             Скрипт срабатывает, когда получение данных медиа файла прекращается, до окончания полной загрузки по любой причине
ontimeupdate        Скрипт срабатывает, когда позиция воспроизведения изменилась (например, когда пользователь выбрал другую точку воспроизведения)
onvolumechange   Скрипт срабатывает каждый раз при изменении значения громкости звука (включая полное отключение звука)
onwaiting             Скрипт срабатывает, когда медиа файл остановлен, но ожидается возобновление запуска (например, когда файл делает паузу для буферизации оставшихся данных)
 

 

Прочие события

onerror         Скрипт срабатывает, когда происходит ошибка во время загрузки внешнего файла
onshow        Скрипт срабатывает, когда элемент <menu>
отображается как контекстное меню
ontoggle       Скрипт срабатывает, когда пользователь открывает или закрывает элемент <details>

 

Ресурсы для более подробного изучения:

https://wm-school.ru/tags/ref_eventattributes.html

https://puzzleweb.ru/html/eventattributes.php

https://html5css.ru/tags/ref_eventattributes.php

Тег input и его основные атрибуты

  Тег <input> позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем.

   Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

   Элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа или если данные обрабатываются с помощью клиентских приложений, например, скриптов на языке JavaScript, то указывать <form> обязательно.

 

   Закрывающий тег не требуется

 

Пример: <input type="radio" name="browser" value="ie"> Internet Explorer<Br>

Атрибуты:

   type

   type - основной атрибут тега <input>, определяющий вид элемента (формы).

   Может принимать значения:

      button - кнопка

      checkbox - флажок

      color - виджет для выбора цвета

      date - поле для ввода календарной даты (год, месяц, день)

      datetime - поле для ввода даты и времени

      datetime-local - поле для ввода даты и местного времени

      email - поле для ввода адреса электронной почты

      file - поле для ввода имени файла, который пересылается на сервер

      hidden - скрытое поле (не отображается на странице)

      image - графическая кнопка отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src, чтобы определить адрес изображения и атрибут alt для определения альтернативного текста. Можно также задать атрибуты width и height, чтобы определить размер изображения в пикселях.

      month – Поле для ввода месяца и года
      number – Поле для ввода чисел.
      password – Поле для ввода пароля.
      radio – Переключатели (радио-кнопки).
      range – Ползунок для ввода чисел в указанном диапазоне.
      reset – Кнопка сброса данных формы в первоначальное состояние.
      search – Поле для ввода строки поиска.
      submit – Кнопка для отправки данных формы на сервер.
      tel – Поле для ввода номера телефона.
      text – Текстовое поле.
      time – Поле для ввода времени.
      url – Поле для ввода Web-адреса.
      week – Поле для ввода номера недели и года.

 

Другие атрибуты:

accept
    Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
accesskey
    Переход к элементу с помощью комбинации клавиш.
align
    Определяет выравнивание изображения.
alt
    Альтернативный текст для кнопки с изображением.
autocomplete
    Включает или отключает автозаполнение.
autofocus
    Устанавливает фокус в поле формы.
border
    Толщина рамки вокруг изображения.
checked
    Предварительно активированный переключатель или флажок.
disabled
    Блокирует доступ и изменение элемента.
form
    Связывает поле с формой по её идентификатору.
formaction
    Определяет адрес обработчика формы.
formenctype
    Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod
    Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate
    Отменяет встроенную проверку данных на корректность.
formtarget
    Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list
    Указывает на список вариантов, которые можно выбирать при вводе текста.
max
    Верхнее значение для ввода числа или даты.
maxlength
    Максимальное количество символов разрешенных в тексте.
min
    Нижнее значение для ввода числа или даты.
multiple
    Позволяет загрузить несколько файлов одновременно.
name
    Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern
    Устанавливает шаблон ввода.
placeholder
    Выводит подсказывающий текст.
readonly
    Устанавливает, что поле не может изменяться пользователем.
required
    Обязательное для заполнения поле.
size
    Ширина текстового поля.
src
    Адрес графического файла для поля с изображением.
step
    Шаг приращения для числовых полей.
tabindex
    Определяет порядок перехода между элементами с помощью клавиши Tab.
type
    Сообщает браузеру, к какому типу относится элемент формы.
value
    Значение элемента.

Также для этого тега доступны универсальные атрибуты и события.

Ресурсы для более глубокого изучения:

http://htmlbook.ru/html/input 

https://htmlweb.ru/html/form/input.php 

https://guruweba.com/html/teg-input-html-pole-dlya-vvoda-knopka/

Тег Script и его основные атрибуты

    HTML тег <script>  используется для встраивания или подключения JavaScript кода (сценариев) (скриптов) - т.е. может содержать ссылку на скрипт  или его код.


   <script> может располагаться как в заголовке, так и в теле HTML-документа в неограниченном количестве.

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

Синтаксис:
<script>
  ...
</script>
<script src="ссылка"></script>



Атрибуты тега Script

async
    Загружает скрипт асинхронно.
Это означает, что указанный в атрибуте src файл будет выполняться без ожидания загрузки и отображения веб-страницы. В то же время и страница не ожидает результата выполнения скрипта, а продолжает загружаться как обычно.
   Обычно браузеры загружают <script> синхронно во время разбора документа, (т.е. async="false").

defer
    Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Работает только при наличии атрибута src.
    Скрипты с атрибутом defer будут предотвращать запуск события DOMContentLoaded до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.

*Если задано сразу два атрибута — async и defer, то атрибут async игнорируется.

src
    Адрес скрипта из внешнего файла для импорта в текущий документ

type
    Определяет тип содержимого <script>.
      
      Примеры:
      
    text/javascript — Для языка программирования JavaScript.
    text/vbscript — Для языка VBScript.
    Значение по умолчанию - text/javascript.
          
      

Ссылки для более глубокого изучения:
      
      http://htmlbook.ru/html/script
      
      https://xsltdev.ru/html/script/
     
      https://developer.mozilla.org/ru/docs/Web/HTML/Element/script

Метатеги META

   HTML элемент <meta> представляет такие метаданные, которые не могут быть представлены другими HTML-метатегами, такими как <base>, <link>, <script>, <style> или <title>.

   Примеры использования:

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

       или

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="keywords" content="HTML, META, метатег, тег, поисковая система">

 

    Данный тег может иметь следующие атрибуты:

Атрибут name

   Устанавливает идентификатор метатега для пары «имя=значение». Одновременно использовать атрибуты name и http-equiv не допускается.

   Отвечает за текстовую информацию о странице, её авторе, содержит рекомендации для поисковых систем.

   О значении viewport можно прочитать здесь: https://proscriptjava.blogspot.com/2021/03/meta-name-viewport.html

Атрибут content

   Его основная задача заключается в том, чтобы задать значения, связанное с атрибутами name и http-equiv, в зависимости от контекста.

   Атрибут content может содержать более одного значения, в этом случае они разделяются запятыми или точкой с запятой.

Атрибут charset

    Этот атрибут задает кодировку символов, используемую на странице. Он должен содержать стандартное имя IANA MIME для кодировки символов.

 

   Хотя стандарт не требует определенной кодировки, он рекомендует, например:

        Авторам рекомендуется использовать UTF-8.
        Не следует использовать ASCII-несовместимые кодировки, чтобы избежать угроз безопасности: браузеры, не поддерживающие их, могут интерпретировать вредоносный контент как HTML. Это относится к семейству кодировок JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB и EBCDIC.

    Примечание: ASCII-несовместимые кодировки - это те, которые не преобразуют 8-битные коды точек 0x20,0x7E, 0x0020, 0x007E в коды Unicode точек.

        Авторы не должны использовать CESU-8, UTF-7, BOCU-1 и/или SCSU, так как есть примеры атак межсайтового скриптинга использующих данные кодировки.
        Авторам не следует использовать кодировку UTF-32, потому что не все алгоритмы кодирования HTML5 могут отличить её от UTF-16.

 

Атрибут http-equiv

   Атрибут http-equiv формирует гипертекстовый заголовок страницы и определяет его обработку.

   Браузеры преобразовывают значение атрибута http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.

   META-теги с атрибутом http-equiv эквивалентны HTTP-заголовкам: теги такой формы могут дать такой же эффект, что и HTTP-заголовки и на некоторых серверах автоматически могут быть переведены в настоящие HTTP-заголовки.

   Обычно они управляют действиями браузеров и могут быть использованы для совершенствования информации, выдаваемой обычными заголовками.

   Некоторые генерируемые сервером поля заголовков не могут быть подменены значениями из META-тегов (в частности Date), другие подменяются только при ненормальном статус-коде (<>200). Когда заголовок не понятен, то значение HTTP-заголовка превалирует над значением META-тегов.

   Для более глубокого изучения:

https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D0%B5%D0%B3%D0%B8

https://basicweb.ru/html/tag_meta.php

https://developer.mozilla.org/ru/docs/Web/HTML/Element/meta

https://habr.com/ru/post/72141

http://htmlbook.ru/html/meta

Атрибут lang

   Атрибут lang определяет язык содержимого элемента. 

   Текст документа может быть набран как на одном языке, так и содержать вставки на других языках, которые могут различаться по своим правилам оформления текста.

   Чтобы указать язык, на котором написан текст внутри текущего элемента и применяется атрибут lang: браузер использует его значение для правильного отображения некоторых символов.

   Например, для русского, немецкого и английского языка характерны разные кавычки, в которые берется цитата.

 
   Синтаксис:

lang="код языка"

   ISO 639-1 Определяет аббревиатуры для языков.

   Первые две буквы указывают код языка, если есть диалект, то используют еще две буквы, указанные через дефис (например, США: lang =“en-us”). 

   Применяется к тегам:

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

   Пример использования:

      <html lang="en">

   Для более глубокого изучения:

http://htmlbook.ru/html/attr/lang

https://basicweb.ru/html/global_att_lang.php

https://html5css.ru/tags/ref_language_codes.php

Элемент !DOCTYPE

   Элемент <!DOCTYPE> предназначен для указания типа текущего документа (document type definition).

 

   Пример использования: <!DOCTYPE html>

 

   Этот тег должен всегда находиться в первой строке каждой страницы.

 

   Он необходим, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, так как HTML существует в нескольких версиях, а также имеется XHTML (Extensible HyperText Markup Language, расширенный язык разметки гипертекста).

   Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы.

 

  Тег DOCTYPE, в атрибутах которого указывается полный URI (полный web-адрес), сообщает броузерам, что страницу нужно вывести с соблюдением определенного стандарта или подвида этого стандарта.

   Если не использовать тег DOCTYPE или написать его содержимое неправильно, браузер перейдет в quirk режим и будет исходить из предположения, что код страницы написан с ошибками и с отступами от стандартов.
   В этом режиме браузер попытается разобрать страницу по правилам обратной совместимости и выведет на экран некорректно (например так, как его вывел бы Internet Explorer 4-ой версии).

 

    Ссылки для более глубокого изучения:    

http://htmlbook.ru/html/%21doctype

https://habr.com/ru/post/71364

https://htmlacademy.ru/blog/boost/frontend/doctype