Web

Конспект мови гіпертекстової розмітки HTML

Leave a comment

HTML: мова розмітки гіпертексту //webdoky.org
HTML Справочник всех тегов онлайн и примеры //html5css.ru
HTML с нуля ⚡ Лучший HTML учебник для начинающих и чайников //html5css.ru
Веб-технологии для разработчиков/HTML/Справка по HTML //developer.mozilla.org
Дока HTML //doka.guide
PLAYGROUND //developer.mozilla.org/en-US/play

 Free Online HTMLShell //toptal.com/developers/htmlshell

дальнейшее содержание публикации является черновиком!

Зміст ♻

Общая структура документа

//

Элемент <!doctype html>

Тег  !doctype должен начинать каждую страницу до тега <html>. Технически это - инструкция для браузера о том, как интерпретировать следующее дальше содержание. Указание html соответствует HTML 5.

Элемент <html> </html>

Открывает и закрывает все содержание документа.

Элемент <head> </head>

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

Метаданные HTML — это данные о HTML-документе. Метаданные определяют заголовок документа, набор символов, стили, скрипты и другую метаинформацию.

Элемент <title> </title>

Тег позволяет дать название документу, которое используется в нескольких случаях:

  • в браузере в верхней части окна
  • при печати документа
  • при сохранении страницы в Избранном
  • при отображении поисковыми системами
  • при отображении по ссылке другими сайтами

Элемент <meta>

//developer.mozilla.org/ru/docs/Web/HTML/Element/meta
Тег используется для хранения метаданных, которые не отображаются на странице, но могут быть использованы браузером или поисковой системой. Википедия //uk.wikipedia.org

Существует несколько видов тега <meta>, каждый из которых имеет свою цель:

  • <meta charset> указывает кодировку документа
  • http-equiv //
    • http-equiv="content-language"  дозволяє вказати мову, якою створено документ.
    • http-equiv="Content-Type" Визначає тип документа і його кодування.
    • http-equiv="Content-Style-Type" Вказівки мови таблиці стилів, за умовчанням значення — «text/css».
    • Content-Script-Type
      Мeтa-тег Content-Script-Type
      Визначає мову програмування сценаріїв. Якщо тег не прописаний, слід вказати мову програмування в кожному тезі <script>. Тег <script> має вищий пріоритет порівняно з Content-Script-Type
    • http-equiv="Expires" управляє кешуванням. Якщо зазначена в тезі дата пройшла, то браузер повинен зробити повторний мережевий запит, а не використовувати копію з кешу. Якщо в завантаженій сторінці вказана застаріла дата, то сторінка взагалі не буде кешуватися. Деякі пошукові роботи не індексують документи із застарілою датою.
      PICS-Label (від англ. Platform-Independent Content rating Scheme Label) — вказує рівень доступності сайту (у зв'язку з можливими тематиками sex і violence), однак використовується і в інших цілях
    • http-equiv="Pragma" Контроль кешування при сторінках, одержуваних шляхом роботи заданого скрипту
    • http-equiv="refresh" Затримка часу (в секундах) перед тим, як браузер оновить сторінку. Крім того, може використовуватися автоматичне завантаження іншої сторінки.

      важливо врахувати, що після url= лапок бути не повинно!
    • <meta http-equiv="X-UA-Compatible" content="IE=edge">
    • Set-Cookie Налаштування cookie браузера
    • Window-target Визначення вікна завантажуваної сторінки.
    • http-equiv="imagetoolbar" Вимикає Панелі управління зображеннями. Зазвичай використовують при виведенні банерів, фону зображення, карти зображення та ін., коли виведення цієї панелі небажане.
  • <meta name="meta name" content="content">  семейство описаний страницы для...
    • name="description" content будет содержать описание страницы для поисковых систем;
    • name="keywords" content будет содержать ключевые слова для поисковых систем;
    • name="author" content будет содержать автор страницы
    • robots используется для указания правил для поисковых роботов, например, инструкций для индексирования или игнорирования страницы

    • generator  используется для указания платформы-движка, которая создала страницу
    • copyright — авторские права
    • name="viewport" content будет содержать настройки масштабирования страницы на мобильных устройствах
      • width Controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is 100vw, or 100% of the viewport width. Minimum: 1. Maximum: 10000. Negative values: ignored.
      • height Controls the size of the viewport. It can be set to a specific number of pixels like height=400 or to the special value device-height, which is 100vh, or 100% of the viewport height. Minimum: 1. Maximum: 10000. Negative values: ignored.
      • initial-scale Controls the zoom level when the page is first loaded. Minimum: 0.1. Maximum: 10. Default: 1. Negative values: ignored.
      • minimum-scale Controls how much zoom out is allowed on the page. Minimum: 0.1. Maximum: 10. Default: 0.1. Negative values: ignored.
      • maximum-scale Controls how much zoom in is allowed on the page. Any value less than 3 fails accessibility. Minimum: 0.1. Maximum: 10. Default: 10. Negative values: ignored.
      • user-scalable Controls whether zoom in and zoom out actions are allowed on the page. Valid values: 0, 1, yes, or no. Default: 1, which is the same as yes. Setting the value to 0, which is the same as no, is against Web Content Accessibility Guidelines (WCAG).
      • interactive-widget Specifies the effect that interactive UI widgets, such as a virtual keyboard, have on the page's viewports. Valid values: resizes-visual, resizes-content, or overlays-content. Default: resizes-visual.
      • . //developer.mozilla.org
    • name="theme-color" content будет содержать цвет, который пользовательский агент может использовать для цветовой стилизации элементов интерфейса.
    • <meta name="awa-expId" content="vscwebsite_aaflight_treatment:42577;vscw_aaflight0306_treatment:42725;vscw_aaflight0501_treatment:49268;" />
    • <meta name="awa-env" content="prod" />
    • <meta name="google-site-verification" content="hNs7DXrTySP_X-0P_AC0WulAXvUwgSXEmgfcO2r79dw" />
    • <!-- Twitter and Facebook OpenGraph Metadata-->
    • <meta name="twitter:card" content="summary_large_image" />
    • <meta name="twitter:site" content="@code" />
    • <meta name="description" content="One of the great things in Visual Studio Code is debugging support. Set breakpoints, step-in, inspect variables and more." />
    • <meta name="keywords" content="" />
    • <meta name="ms.prod" content="vs-code" />
    • <meta name="ms.TOCTitle" content="Debugging" />
    • <meta name="ms.ContentId" content="4E9A74AA-D778-4D1C-B369-83763B3C340F" />
    • <meta name="ms.date" content="5/3/2023" />
    • <meta name="ms.topic" content="conceptual" />
    • <!-- Twitter and Facebook OpenGraph Metadata-->
    • <meta name="twitter:card" content="summary_large_image" />
    • <meta property="og:url" content="https://code.visualstudio.com/docs/editor/debugging" />
    • <meta property="og:type" content="article" />
    • <meta property="og:title" content="Debugging in Visual Studio Code" />
    • <meta property="og:description" content="One of the great things in Visual Studio Code is debugging support. Set breakpoints, step-in, inspect variables and more." />
    • <meta property="og:image" content="https://code.visualstudio.com/assets/docs/editor/debugging/Debugging.png" />

Внешние ресурсы <link>

Элемент <link> определяет связь документа с внешним ресурсом.

Существует несколько видов тега <link>, каждый из которых имеет свою цель:

  • rel="stylesheet" подключение CSS-стилей
  • rel="icon" указание иконки сайта
  • <link rel="shortcut icon" href="/favicon.ico" sizes="128x128" />
  • <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  • rel="preload" предзагрузка ресурсов
  • rel="canonical" указание канонического URL страницы
  • rel="alternate" указание альтернативных версий страницы на других языках
???

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="pingback" href="https://reks.biz/xmlrpc.php">
<link rel='icon' href='/favicon.svg' type='image/svg+xml'/>
<link rel="shortcut icon" href='http://www.reks.biz/favicon.ico' type='image/x-icon'/>
<link rel="stylesheet" id="admin-bar-css" href="https://reks.biz/wp-includes/css/admin-bar.min.css?ver=5.2.17" type="text/css" media="all">
<link rel="canonical" href="http://reks.biz/?p=3248">

  • rel — говорит браузеру, какую роль играет ссылка внутри тега. Иными словами, этот атрибут выражает отношения между вашей страницей и файлом, на который ведёт ссылка. Самое часто встречающееся значение — rel="stylesheet", оно означает, что ссылка внутри <link> ведёт на внешний файл с CSS-стилями. А для добавления фавиконки используется rel="icon". Также rel помогает определить, какую фавиконку на каком устройстве загружать, например: rel="apple-touch-icon-precomposed"
    • "canonical" указывает поисковым системам на канонический URL страницы. Канонический URL это предпочтительный URL страницы, который используется для идентификации и оценки ее содержимого. Поисковые системы используют эту информацию для избежания индексации дубликатов контента и правильного отображения релевантных результатов поиска
  • href — URL-ссылка на внешний файл. Ссылка может быть как полной или абсолютной http://localhost/sitename/css/style.css, так и неполной или относительной /sitename/css/style.css
  • sizes — устанавливает размер — ширину и высоту — фавиконки в пикселях, например sizes="114x114". А если написать sizes="any", то браузер сможет масштабировать иконку под любой размер. Так можно делать с иконками в векторном формате, например SVG.
  • media — в зависимости от того, на каком устройстве открывают вашу страницу, можно применять разные стили к тексту или показывать разные иконки. Атрибут media указывает устройство, на котором работает тот или иной стиль. Например, <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">.
    • Также атрибут media может определять, какая тема используется в ОС. Благодаря этому можно произвести небольшие оптимизации. Например, если у нас есть два разделённых CSS-файла, каждый из которых содержит стили для одной из тем, то приоритет при загрузке будет отдаваться именно тому файлу, который относится к выбранной системной теме:
  • as — позволяет указать тип загружаемого контента. Благодаря ему мы помогаем браузеру правильно расставлять приоритеты и планировать загрузку. as стоит применять, если указан атрибут rel="preload" или rel="prefetch".
  • crossorigin — указывает должен ли ресурс загружаться с помощью запроса CORS. Данный атрибут имеет два доступных значения:
    anonymous — Cross-origin запрос выполняется без отправки учётных данных;
    use-credentials — Cross-origin запрос выполняется с отправкой учётных данных.

Источник: //doka.guide/html/link/

Значок ярлыка / Favicon rel='icon'

Загруженная браузером страница может иметь стандартный значок, значок загруженный из файла ICO, PNG, GIF, JPEG или SVG.

  • <link rel='icon' href='/favicon.ico'>
  • <link rel='icon' href='/favicon.gif' type='image/x-icon'/>
  • <link rel='icon' href='/favicon.svg' type='image/svg+xml'/>
  • <link rel="shortcut icon" href='http://www.reks.biz/favicon.ico' type='image/x-icon'/>

Стиль <style>

Элемент <style> используется для определения информации о стилях элементов страницы.

Элемент <script> </script>

//

<script></script>

<script type="text/javascript" src="https://reks.biz/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp"></script>

<script type="application/ld+json"></script>

URL в атрибуте href

Элементы <link>, <style> и <script> для загрузки содержания из внешнего ресурса используют атрибут href, предназначенный для определения URL внешнего ресурса. Для значения атрибута href предусмотрено три нотации:

  • href="https://image.reks.biz/favicons/reks.svg" задает абсолютный URL ресурса
  • href="/css/reks.css" задает путь в домене открытого документа
  • href="../js/demo.js" задает путь относительно пути открытого документа

Элемент <body> </body>

//

Структурные элементы содержания

HTML Layout Elements //www.w3schools.com

Теги определяют структурные части в содержании тега <body>:

Элемент <main>

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

Элементы <header> и <footer>

Задают верхний и нижний колонтитулы сайта или раздела.

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

Нижний колонтитул (футер, подвал) обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на связанные документы.

Специальных атрибутов нет, только глобальные. Закрывающий тег обязателен. Эти теги рекомендовано использоваться только один раз на странице.

Элемент <nav> </nav>

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

Элемент <article>

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

Элемент <section>

Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один тег <section> внутрь другого. Для этого тега доступны глобальные атрибуты и события.

Элемент <aside>

Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель». Для этого тега доступны универсальные атрибуты. Закрывающий тег обязателен.

 

Стили

CSS

///

HTML

Стандарт предписывает размещать  определение <style> в заголовке <head>, тем не менее браузеры обрабатывают их и в <body>:

 

?Элементы и атрибуты html-тегов

Символы

Представление любого символа в HTML возможно несколькими способами, что чаще используется для не ASCII символов. Пример демонстрирует способы мнемонического и кодированого  представления unicode-символа «знак промилле» ‰ :

  • ‰ непосредственное представление
  • &permil; представление спецсимволом
  • &#8240; десятичным кодом
  • &#x2030; шестнадцатеричным hex-кодом
  • :after { content: '2030'; } шестнадцатеричным кодом (в CSS*)

Спецсимволы

Common HTML entities used for typography //www.w3.org/...

Символы применяемые в разметке HTML и функциональные символы в тексте заменяют спецсимволами, из которых наиболее часто используются:

  • неразрывный пробел &nbsp; (non-breaking space) или &#160;
    • пробел равной ширины &ensp; (en space)
    • пробел в две ширины &emsp; (em space)
    • узкий пробел &thinsp; (thin space)
  • < открывающая угловая скобка &lt; (less than, меньше) или &#60;
  • > закрывающая угловая скобка &gt; (greater than, больше) или &#62;
  • & амперсанд &amp; или &#38;
  • " прямая двойная кавычка &quot; &#34;
  • ' апостроф &apos; &#39;
  • « левая двойная угловая кавычка &laquo; &#171;
  • » правая двойная угловая кавычка &raquo; или &#187;
  • ≡ Тождественно &equiv; или &#8801;
  • • простой маркер &bull; или &#8226;
  • ○ круг не имеет спецсимвола и представляется только юникодом &#9675;
  • · средняя точка &middot; или &#183;
  • © копирайт &copy;
  • ™ Знак торговой марки &trade; или &#8482;

‎Комментарии

Комментарий в тексте HTML:

Комментарий в CSS может быть многострочным, но не допускает вложенности

 

Глобальные атрибуты

Глобальные атрибуты применимы во всех тэгах

Видимость visibility

Свойство visibility устанавливает отображение элемент на странице, при этом элемент сохраняет свои размеры и положение.

  • visible по умолчанию делает элемент видимым
  • hidden делает элемент невидимым, при этом элемент сохраняет свои размеры и положение
  • collapse
    • flex элементы и ruby аннотации делаются невидимыми и освобождают пространство
    • строки, колонки и группы строк и колонок в элементе <table> ... (как при display: none)
    • другие типы элементов ... как при hidden

Горячая клавиша accesskey

Устанавливает фокус на тэге при сочетании клавиш с заданным символом, тэг кнопки выполняется  нажатие. Браузеры по-разному реализуют сочетания, в частности Chrome реализует Alt+<accesskey>

Редактируемость contenteditable

Содержание элемента и вложенных элементов будет доступно для редактирования в браузере при установке значения свойства contenteditable:

 

data-* draggable id lang spellcheck style tabindex
Заголовок title

Значение атрибута title проявляется разными способами, что зависит от тэга. В текстовых тэгах отображается всплывающей подсказкой при остановке мыши над элементом. Может быть многострочным:

hidden
Перевод translate

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

class

Положение position :

  • absolute Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
  • fixed По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
  • relative Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
  • static Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
  • inherit Наследует значение родителя.

 

Компоновка

Атрибу clear

  • clear: none | left | right | both | inherit
    • none
    • Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
    • both Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
    • left Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
    • right Отменяет обтекание с правой стороны элемента.
    • inherit Устанавливает значение родителя.

Атрибут flex

///!!!

Элемент

//

Элемент <spacer>

  • <spacer height="<число>" width="<число>" size="<число>" type="{block | horizontal | vertical}" align="" ></spacer>
    • создает пустое пространство по вертикали или горизонтали.
    • Закрывающий тег не обязателен.
    • align Определяет выравнивание элемента относительно содержимого.
    • height Устанавливает высоту пустого пространства в пикселах.
    • size Число пикселов пустого пространства вставляемых горизонтально или вертикально, в зависимости от значения атрибута type — horizontal или vertical.
    • type Указывает тип элемента. Возможные значения block | horizontal | vertical.
    • width Устанавливает ширину пустого пространства в пикселах.

Элемент навигации <a>

Элемент реализует гиперссылку на объект, который может быть загружен браузером различными способами

  • href - URL объекта гиперссылки является главным свойством, остальные свойства выполняют вспомогательные функции
  • hreflang language_code Specifies the language of the linked document
  • download filename Specifies that the target will be downloaded when a user clicks on the hyperlink
  • target - where to open the linked document
    • _self - по умолчанию, ссылка будет открыта в текущем окне
    • _blank ссылка будет открыта в новом окне
    • _parent будет открыта в фрейме родителя, если фреймов нет, то в текущем окне
    • _top Specifies Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
  • rel Specifies the relationship between the current document and the linked document
    • alternate
    • author
    • bookmark
    • external
    • help
    • license
    • next
    • nofollow
    • noreferrer
    • noopener
    • prev
    • search
    • tag
  • type media_type Specifies the media type of the linked document
  • media media_query Specifies what media/device the linked document is optimized for
  • ping list_of_URLs Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.
  • referrerpolicy - Specifies which referrer information to send with the link
    • no-referrer
      no-referrer-when-downgrade
      origin
      origin-when-cross-origin
      same-origin
      strict-origin-when-cross-origin
      unsafe-url

<a href='#myanchor'>Hyperlink to my anchor</a>

Якорь

Элемент гиперссылки <a> без свойства href служит якорем

<a name='myanchor'></a>

 

Текстовые элементы

//

Параграф <p>

Отображаемые тексты можно размещать в тегах Параграф <p>...</p>, Раздел <div>...</div> и Диапазон <span>...</span>

Предварительно отформатированный /Preformatted <pre>

Элемент <pre> представляет текст, который должен быть представлен точно так, как написано. Текст обычно отображается с использованием непропорционального ("monospace") шрифта. Пробелы внутри этого элемента отображаются как записанные.

Код <code>

//

Описания <dl>, <dd>, <dt>

HTML-элемент <dl> (Description List) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов.

HTML-элемент <dt> (Description Term) который определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента <dl> . Обычно за ним следует элемент <dd>. Кроме того, несколько элементов <dt> идущие друг за другом будут содержать своё определение в следующем идущем за ним элементом<dd>.

HTML-элемент <dd> (Description Details) предоставляет подробности или определение предшествующего термина (<dt>) в списке определений (<dl>).

Дополнительная информация <details> <summary>

HTML-элемент <details> используется для раскрытия скрытой (дополнительной, спойлер) информации.

Кликни, чтобы узнать больше

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

Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия, с меткой рядом с треугольником. Если первый дочерний элемент элемента <details> является <summary>, содержимое элемента <summary> используется в качестве метки для виджета раскрытия.

Стилевые <b>, <em>, <i>, <small>, <strong>, <sub>, <sup>, <q>, <ins>, <del>, <mark>, <u>, <s>, <strike>, <samp>

Парные теги <b>, <i>, <u>, <s> реализуют стили начертания Bold, Italic, Underline, Strike, но применять их не рекомендуется, а <u>, <s> и аналог <strike> даже осуждается.

<b> полужирный текст
<i> текст курсивом
<em> подчеркнутый текст
<strong> выделенный важный текст
<small> уменьшенный текст
<sub> подстрочный текст (нижний индекс)
<sup> надстрочный текст (верхний индекс, степень)
<q> короткая встроенная цитата без разрыва абзаца
<ins> вставленный текст
<del> удаленный текст
<mark> выделенный текст
<u> подчеркнутый текст
<s> зачеркнутый текст
<samp> текст образца (например, для отображения результата)
<small> уменьшенный текст (например, в сноске)
<var> представление переменной или параметра
<dfn> элемент определения используется для указания термина, определяемого в контексте фразы или предложения
<kbd> "ввод с клавиатуры" представляет текст в форме кнопки

Цитата / Quotation <q>

Элемент <q> указывает, что заключенный в нем текст является короткой встроенной цитатой. Большинство современных браузеров реализуют это, заключая текст в кавычки. Этот элемент предназначен для коротких цитат, не требующих разрывов абзаца; для длинных цитат используйте элемент <blockquote>.

Цитата <blockquote>

Элемент HTML <blockquote> определяет раздел, который цитируется из другого источника. элемент <blockquote> (от англ. Block Quotation) указывает на то, что заключённый в нем текст является развёрнутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание (en-US), где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом <cite>.

Источник / Citation <cite>

Элемент <cite> представляет ссылку на источник цитаты. Он должен включать в себя название произведения или URL, который может быть в сокращённом виде в соответствии с правилами, используемых для добавления метаданных цитирования.

Аббревиатура / Abbreviation <abbr>

Элемент <abbr> представляет аббревиатуру или акроним, опционально, может показывать её расшифровку через атрибут title.

Контактные данные <address>

Элемент <address> может содержать произвольный текст с контактными данными для ближайшего родительского <article> или <body> ; В последнем случае применяется ко всему документу, визуально выделяется курсивом.

Атрибуты

Выравнивание

text-align: center | justify | left | right | start | end

  • center - Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
  • justify - Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
  • left - Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
  • right - Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
  • auto - Не изменяет положение элемента.
  • inherit - Наследует значение родителя.
  • start - Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
  • end - Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Текст и Фрагмент текста

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

Пробелы и переносы

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

  • normal - Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
  • nowrap - Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку.
  • pre - Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
  • pre-line - В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
  • pre-wrap - В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
  • inherit - Наследует значение родителя.
Отступы

Общую область элемента формируют четыре вложенные друг в друга области: содержание, внутренний отступ padding, рамка border, внешний отступ margin.

Пример параметров стиля абзаца: width или max-width задает максимум ширины содержания абзаца; min-height задает минимум высоты содержания; padding задает отступ от содержания до рамки; border задает толщину, вид и цвет рамки; margin задает отступ за рамкой; background задает фон внутри рамки.

Кроме основных размеров padding, border и margin, для каждого могут быть заданы дополнительные размеры:

  • {padding, border, margin}-left
  • {padding, border, margin}-right
  • {padding, border, margin}-top
  • {padding, border, margin}-bottom

Другим способом дополнительные размеры могут быть заданы при указании нескольких значений через пробел:

  • два значения задают размеры {...}-top/{...}-bottom, {...}-left/{...}-right
  • три значения задают размеры {...}-top, {...}-left/{...}-right, {...}-bottom
  • четыре значения задают размеры {...}-top, {...}-right, {...}-bottom, {...}-left
Выбор для копирования user-select

!!! Свойство CSS user-select не влияет на контент, но определяет может ли пользователь выбрать текст.

  • auto (начальное значение)
  • none
    Текст элемента и вложенных в него элементов не выбирается. Обратите внимание, что объект Selection может содержать эти элементы.
  • auto Вычисляемое значение, автоматически определяется следующим образом:
    • Для псевдо-элементов ::before и ::after вычисляемое значение - none
    • Если элемент является редактируемым, вычисляемое значение - contain
    • Иначе, если вычисляемое значение user-select для родителя этого элемента - all, вычисляемое значение - all
    • Иначе, если вычисляемое значение user-select для родителя этого элемента - none, вычисляемое значение - none
    • Иначе, вычисляемое значение - text
  • text Текст может быть выбран пользователем.
  • all В HTML-редакторе, если двойной клик или контекстный клик произошёл во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.
  • contain Позволяет начать выбор внутри элемента; однако, выбор будет содержаться внутри границ данного элемента.
  • elementNon-standard (IE-specific alias) Аналогичен contain. Поддерживается только в Internet Explorer.

Обтекание

<div style="width: 400px; float: left; margin-right: 20px; margin-bottom: 20px; padding: 20px; border: 4px solid #4682B4; background: #FFB958;">...

Если элементу страницы назначено стилевое свойство обтекания float, то определяемые следом за ним элементы будут пытаться использовать пространство не снизу, а с оставшейся свободной от элемента стороны справа или слева, в зависимости от значения: left или right. Заданное обтекание предполагает плотное прилегание, поэтому  необходимые отступы следует предусмотреть и назначить дополнительно.

Фон

<div style="width: 400px; float: right; margin-left: 20px; margin-bottom: 20px; padding: 20px; background: linear-gradient(60deg, #f88 0%, #fb8 15%, #ff8 25%, #8f8 40%, #8ff 50%, #88f 65%, #f8f 100%);">...

Линейная градиентная заливка реализуется в свойстве стиля background функцией linear-gradient(), которой необходимо указать хотя бы два цвета. Также существуют другие функции:

  • repeating-linear-gradient() повторяющийся линейный градиент
  • radial-gradient() концентрический градиент
  • repeating-radial-gradient() повторяющийся концентрический градиент
  • conic-gradient() конический градиент
  • repeating-conic-gradient() повторяющийся конический градиент
  • rgb() задает цвет в модели RGB
  • rgba() задает цвет в модели RGBA
  • var() задает цвет по значению свойства

Списки

Отступы в списках

Отступы содержания списка задаются в целом сочетанием свойств margin и paddin и в частности слева свойствами margin-left и paddin-left. Для изменения левого отступа в стиле тега <ul> или <ol> необходимо их переопределить

  • <ul style='margin-left: 100px;'>... - увеличивает левый отступ списка до 100px
    • вложенные списки наследуют установленный стиль и отступ
  • <ul style='padding: 0; margin-left: 100px;'>... - тоже с отменой действующего левого внутреннего отступа (рекомендуется, как более точный метод)
  • <li style='padding-left: 100px;'>... - устанавливает в отдельном элементе списка левый отступ текста от маркера
Тип маркера

Тег маркированного списка <ul> и тег нумерованного списка <ol> позволяют отображать в списке маркеры нестандартного типа при помощи свойства type, однако более  надежным является задание типа в стиле. Назначение типа маркера по сути стирают отличие между тэгами <ul> и <ol>. Тип маркера может быть переназначен любому отдельному элементу списка:

  • <ul type='circle'>... - задает тип маркера всему списку (может подавляться каскадными стилями и не работать)
  • <ul style='list-style-type: circle;'>... - задает всему списку тип маркера через стиль
    • <li style='list-style-type: square;'>... - задает маркер в виде квадрата для текущего элемента списка
    • <li style='list-style-type: none;'>... - отменяет маркер для текущего элемента списка

В качестве значения типа маркера type и list-style-type допустимы следующие варианты:

  • disc - в виде круга (по умолчанию для <ul>)
  • circle - в виде окружности
  • square - в виде квадрата
  • armenian - традиционная армянская нумерация
  • decimal - арабские числа (1, 2, 3, 4,... по умолчанию для <ol>)
  • decimal-leading-zero - арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...)
  • georgian - традиционная грузинская нумерация
  • lower-alpha - строчные латинские буквы (a, b, c, d,...)
  • lower-greek - строчные греческие буквы (α, β, γ, δ,...)
  • lower-latin - аналогично lower-alpha
  • lower-roman - римские числа в нижнем регистре (i, ii, iii, iv, v,...)
  • upper-alpha - заглавные латинские буквы (A, B, C, D,...)
  • upper-latin  - аналогично upper-alpha
  • upper-roman - Римские числа в верхнем регистре (I, II, III, IV, V,...)
  • none - отменяет маркеры для списка или элемента списка
  • inherit - устанавливает тип родительского списка

Разрыв строки <br>

элемент <br> устанавливает перевод строки в тексте (возврат каретки).

Возможно установить значение line-height  чтобы увеличить расстояние между линиями в блоке, похожий результат дает атрибут margin, но последнее не рекомендуется.

Разрешенный разрыв слова <wbr>

Указывает возможность разрыва слова в позиции, где правила разрыва этого не предполагают.

Горизонтальная линия <hr>

Элемент <hr> служит для тематического разделения абзацев. Рисует горизонтальную прямую. Атрибуты:

  • align Deprecated Задаёт правило выравнивания.По умолчанию значение выставлено как left
  • color Non-standard Задаёт цвет линии
  • noshade Deprecated Sets the rule to have no shading.
  • size Deprecated Устанавливает высоту в px
  • width Deprecated Колонки Задаёт длину линии в px либо в %

Динамическое распределение содержания в несколько колонок задается для блочных элементов (кроме таблиц), ячеек и элементов, у которых display установлен как inline-block с помощью комбинации атрибутов:

  • column-count: <число> | auto устанавливает оптимальное число колонок
  • column-gap: : <значение> | normal ширина межколоночного интервала в единицах CSS (пикселах, процентах и пр)
  • column-width: <значение> | auto ширина колонки в абсолютных единицах CSS
  • column-rule: <border-width> || <border-style> || <цвет> устанавливает свойства разделительной линии в любом допустимом для CSS формате

Иллюстрация <figure>, <figcaption>

<figure> представляет автономное содержание, потенциально с дополнительной подписью, которая указана с помощью

<figcaption> представляет подпись или остальную часть описания легенды содержания ее родителя <figure> элемент.

Внедренное содержание <embed>

<embed type="video/webm" src="/media/cc0-videos/flower.mp4" width="250" height="200" />

Внедренное видео <video>

<video controls width="250">
<source src="/media/cc0-videos/flower.webm" type="video/webm" />
<source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
<a href="/media/cc0-videos/flower.webm">WEBM</a>
<a href="/media/cc0-videos/flower.mp4">MP4</a>
</video>

Картинка <picture>

<picture> содержит нуль или больше <source> элементы и один <img> элемент для предложения альтернативных версий изображения для различных сценариев дисплея/устройства.

Изображение <img>

<img src="pict.webp" width="250" height="200" />

Скрытое изображение

Изображение можно отобразить на странице так, что браузер не будет считать его изображением и не предложит пользователю скопировать или сохранить. Для этого изображение следует разместить в фоне тега <img>, а в качестве источника назначить пустое или прозрачное изображение:

Аналогичного маскирования изображения на странице можно добиться, если разместить изображение в фоне пустого тега <div>:

Приведенные способы маскировки усложняют сохранение изображения, но не предотвращают его полностью. Опытный web-дазайнер путем анализа html-кода страницы в любом случае сможет найти url изображения и загрузить файл.

Изображение с внедренным data:URI

Двоичный код содержания изображения может быть включен в html-код страницы, что будет выглядеть довольно громоздко и исключит возможность кэширования изображения браузером, однако в ряде случаев для небольших и уникальных изображений это может оказаться полезным. Для внедрения исходный код изображения преобразуют в код base64 и вставляют в специальную форму свойства src:

Пример внедренного изображения GIF 16x16

Для data:URI предусмотрен формат:

<MIME-type> поддерживает форматы GIF, PNG, JPEG,

///

Область

элемент <area> определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Тег <area> задает форму области, ее размеры, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ. Этот тег всегда располагается в контейнере <map>, который связывает координаты областей с изображением.

  • accesskey Переход к области с помощью комбинации клавиш.
  • alt Альтернативный текст для области изображения.
  • coords Координаты активной области.
  • href Задает адрес документа, на который следует перейти.
  • hreflang Указывает язык документа, на который ведет ссылка.
  • nohref Область без ссылки на другой документ.
  • shape Форма области.
  • tabindex Задает последовательность перехода между элементами с помощью клавиши Tab.
  • target Имя окна или фрейма, куда браузер будет загружать документ.
  • type Устанавливает MIME-тип документа, на который ведёт ссылка.

Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.

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

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

Индикаторы <meter>, <progress>

<progress> отображает индикатор, показывающий прогресс завершения задачи, обычно отображенной как индикатор выполнения.

 

 

Координаты

Компоновка элементов и графические события html-страницы отображаемой в окне браузера на экране компьютера представляются в прямоугольных системах координат с одинаковым масштабом, но различными точками отсчета:

  • screenX, screenY
  • pageX, pageY
  • clientX, clientY
    • scrollLeft, scrollTop
  • offsetX, offsetY

Манифест

Для того, чтобы браузер мог считать сайт приложением можно использовать JSON-манифест, который должен размещаться в отдельном файле, указанном в коде HTML-страницы следующим образом:

Спецификация JSON-файла манифеста позволяет гибко назначить параметры представления ярлыка и окна приложения:

Источник: Манифест? А? Что? Зачем? //medium.com

//

Таблицы

//developer.mozilla.org/en-US/docs/Web/HTML/Element/table

//

  • <table></table> элемент размечает табличные данные в виде двумерной таблицы из строк и столбцов с ячейками
    • <caption></caption> элемент размечает подпись таблицы
    • <colgroup></colgroup> размечает группу столбцов в таблице
      • <col></col> размечает столбец в таблице и используется для определения общей семантики для всех общих ячеек
    • <thead></thead> элемент размечает набор строк заголовка таблицы, который выводится в начале таблицы и в случае переноса таблицы на каждой следующей странице
    • <tbody></tbody> элемент размечает набор основных строк таблицы
    • <tfooty><tfooty> элемент размечает набор строк подвала таблицы, который выводится в конце таблицы и в конце страницы в случае переноса
    • <tr></tr> размечает строку таблицы, чаще в тегах <tbody>, <thead> и <tfooty>, но допускается и непосредственная разметка в <table>
      • <th></th> размечает заголовочную ячейку таблицы
      • <td></td> размечает обычную ячейку таблицы

Навигация

!!! tabindex Глобальный атрибут tabindex - целое число, определяющее должен ли данный элемент участвовать в последовательной навигации по всей странице с помощью клавиатуры, в каком порядке. Содержит одно из нескольких видов значений:

  • если представлено отрицательное значение – элемент может быть выделен, однако не участвует в последовательной навигации;
  • если представлен 0 – элемент может быть выделен и достигнут с помощью последовательной навигации, однако порядок навигации определён платформой;
  • если представлено положительное целое значение – элемент будет достигнут (и выделен) с помощью последовательной навигации, а порядок навигации определён этим самым значением.
  • В случае, если несколько элементов содержат одно и то же значение tabindex, их порядок навигации определён относительным расположением в документе (DOM).
  • Максимальное значение для tabindex не должно превышать 32767 (W3C 17.11.1)

Источники

  • Самоучитель и Справочник по HTML, XHTML, HTML5, CSS + блоги и форум  //htmlbook.ru
  • Tutorials, References, Exercises for HTML, CSS, JavaScript, SQL, Python, PHP... //www.w3schools.com
  •  Базовая структура HTML-документа с объяснением каждой строчки //habr.com (4 May 2021)

Leave a Reply