Please enable JavaScript.

Coggle requires JavaScript to display documents.

HTML, CSS, JS (Штуки на покопаться (http://vonix.lark.ru/landing…

- - - - }
      - font
        
        font-family: "Arial", sans-serif; ("Tahoma") - семейство шрифта.
        Тип шрифта:
        
        serif — шрифт с засечками;
        
        sans-serif — шрифт без засечек.
        Обычно задают список шрифтов. В начале самый редкий, затем похожий, но более распространенный, а в конце — желаемый тип шрифта.
        
        font-weight: bold; (полужирный, normal - обычный) - толщина начертания.
        
        font-style: italic; (курсив, normal - обычное) - начертание, стиль шрифта
        
        font-size: 16px; - размер шрифта (px / pt - абсолютные ед. изм. / % / em - относительные)
        
        ссылка на шрифт
        
        font-face {
        font-family: Terminus;
        src: url(fonts/terminus.ttf); }
      - text
        
        text-decoration:
        
        underline; - подчеркнутый;
        
        overline - черта сверху;
        
        line-through; - зачеркнутый текст;
        
        none - убирает вышеперечисленные эффекты
        
        можно одновременно применить несколько эффектов, если перечислить значения через пробел
        
        text-shadow: 2px 2px 0 #cccccc;
        text-shadow: смещениеВправо смещениеВниз размытие цвет;
        для свечения: 0px 0px 6px #000;
        
        text-transform: регистр
        
        lowercase - все строчные;
        
        uppercase - все прописные;
        
        capitalize — каждое слово начинается с прописной;
        
        none — отменяет изменение регистра.
        
        text-align: left/ right /center / justify (по ширине) /.. выравнивание по горизонтали
        vertical-align: middle;
      - line-height: 20px; - высота строки (межстрочный интервал)
      - border
        
        border-radius: 3px; - скругление углов
        
        Для таблиц
        
        border-spacing: отступы между ячейками в таблице
        
        border-collapse: collapse; - схлопывает рамки таблицы и ячеек
        (separate по умолчанию)
        
        border-top:
        
        border-right:
        
        border-bottom:
        
        border-left:
        
        border-color: может иметь несколько значений для каждой из сторон как и border-width
        
        border-width
        может иметь до четырех значений
        (указать border-style: double | solid)
        
        1 значение: для всех сторон
        
        2 значения: верхняя-и-нижняя правая-и-левая
        
        3 значения: верхняя боковые нижняя
        
        4 значения: верхняя правая нижняя левая
        
        border-style: solid - непрерывная, dashed - пунктирная, dotted - точками
        
        Так тоже можно:
        
        border: 2px solid lightgray - ширина стиль и цвет
        
        border-image: url() 20;
        border-image: border-image-source border-image-slice border-image-repeat
        border-image: градиент
        border-image-slice: 1; - чтобы заполнить пространство между уголками
      - margin
        внешний отступ
        
        Вертикальные отступы между объектами "схлопываются" - чей больше, тому и быть.
        Горизонтальные складываются.
        
        margin: 0 auto - отцентрует по горизонтали
      - padding
        внутренний отступ
      - caption-side: top (над)/ bottom(под) заголовок таблицы
      - Выранивание
        
        vertical-align:
        
        top/ middle /bottom / baseline (по базовой линии, значение по умолчанию) /.. выравнивание по вертикали
        
        sub или super аналогичные тегам <sub> и <sup>
        
        text-align: left/ right /center / justify (по ширине) /.. выравнивание по горизонтали
      - width: auto (min-width)
        
        height: auto (min-height)
      - position:
        позиционирование;
        
        top, right, bottom, left
        
        z-index управляет порядком слоёв.
        
        absolute; - абсолютно позиционированные элементы исключаются из потока. Другие элементы как бы перестают их замечать и то место, где располагается абсолютно позиционированный элемент, считают пустым. (отсчитывает px от родителя)
        
        relative (отсчитывает px от своего местоположения)
      - outline: 2px solid rgba(0, 0, 0, 0.1); - стиль внешней границы элемента. В отличие от border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение
        outline-color || outline-style || outline-width
      - box-shadow: 3px 3px 4px #cccccc; - тень элемента
      - cursor: pointer; - стиль курсора
        https://html5css.ru/cssref/pr_class_cursor.php
      - list-style-type: square; - квадратные маркеры у списка
      - white-space
        пробелы
        
        nowrap - текст одной строкой без переносов;
        
        pre — сохраняет пробелы и переносы как в исходном коде;
        
        pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не помещается в контейнер;
        
        normal — режим по умолчанию.
      - background
        
        background-image: url("фоновое изображение"); [bi]
        
        background-color: brown; - цвет фона [bc]
        
        background-repeat: [br]
        
        repeat — повторять во всех направлениях. Значение по умолчанию.
        
        repeat-x — повторять только по горизонтали.
        
        repeat-y — повторять только по вертикали.
        
        no-repeat — не повторять.
        
        background-position: x y [bp]
        
        x: left, center, right, %, px, 1, -1
        
        y: top, center, bottom, %, px, 1, -1
        
        background-attachment: [ba]
        
        scroll — фон прокручивается вместе с содержимым. Это значение по умолчанию.
        
        fixed — фон не прокручивается, зафиксирован на одном месте.
        
        Так тоже можно:
        
        background: #e74c3c url("cat_eyes.png") no-repeat 10px 5px;
        .......................................................................
        
        background:
        url("img1.png") no-repeat 0 0,
        url("img2.png") repeat-x 50% 50%,
        url("img3.png"); множественные фоновые изображения
      - img
        
        Форматы изображений
        
        PNG-8 по характеристикам схож с форматом GIF. Он хорошо подходит для схем, чертежей, графиков и текста, а также изображений, где мало цветов. Максимальное количество цветов — 256.
        
        PNG-24 — отличнейший формат. Он хорошо подходит и для схем-чертежей-графиков-текста, и для сложных многоцветных изображений, так как поддерживает практически неограниченное количество цветов.
        
        JPEG хорошо подходит для фотографий и картин и плохо подходит для схем, чертежей, текста и графики.
        
        pointer-events: none; - картинки не будут выделяться
        mix-blende-mode: screen; - смешивание цветов при наложении изображений
        object-fit: cover
        filter:
      - display:
        
        block - блочный элемент
        
        inline - строчный
        
        inline-block - блочно-строчный элемент
        
        table - задает элементу тип таблица
        table-row - строка,
        table-cell - ячейка.
        
        none - скрытый элемент не занимает места на странице
        
        Блочные
        <p>, <div>, <ol>, <ul>, <li>, <h1> - <h6>, <pre>, <hr> и т.д.
        
        До и после блочного элемента существует перенос строки.
        
        Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы.
        
        По умолчанию занимают всю доступную ширину, которая равна ширине родительского контейнера или окна браузера.
        
        Высота по умолчанию зависит от содержимого.
        
        Предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания сетки.
        
        Строчные
        <b>, <i>, <br>, <a>, <img>, <cite>, <code>, <em>, <strong>, <span> и т.д.
        
        До и после строчного элемента отсутствуют переносы строки.
        
        Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя.
        
        Можно задавать только горизонтальные отступы.
        
        предназначены для оформления текста на уровне небольших фраз и отдельных слов.
        
        Блочно-строчные
        
        им можно задавать размеры, рамки и отступы, как и блочным элементам;
        
        их ширина по умолчанию зависит от содержания, а не растягивается на всю ширину контейнера;
        
        они не порождают принудительных переносов строк, поэтому могут располагаться на одной строке, пока помещаются в родительский контейнер;
        
        элементы в одной строке выравниваются вертикально подобно строчным элементам.
        
        Табличные
        
        можно задавать ширину, высоту, рамки, отступы;
        
        по умолчанию ширина зависит от содержания;
        
        переносы строки до и после элемента.
        
        display: flex; - задает “flex-контекст”
        (не применяется к вложенным элементам).
        Только после создания контекста можно прописывать следующие команды:
        
        flex-direction: column | row | row-reverse | column-reverse - направление оси (main (главная) слева-направо или crossсверху-вниз)
        
        в row justify-content влияет на вертикальное выравнивание, а align-items на горизонтальное
        
        в reverse начало (start) и конец (end) тоже меняются местами.
        
        justify-content: - выравнивание по горизонтали (main axis)
        
        flex-start; - сдвигает влево
        
        flex-end; - вправо
        
        center;
        
        space-between; - одинаковые отступы между элементами
        
        space-around. - одинаковые отступы вокруг элементов
        
        align-items: - выравнивание по вертикали
        
        flex-start; | flex-end; | center;
        
        stretch; - растягивает элементы по высоте, высота квадратов должна быть равна auto;
        
        center - по центрам
        
        baseline - по нижним граням.
        
        https://tproger.ru/translations/how-css-flexbox-works/
        
        Переставить конкретный элемент(ы)
        (например по селектору класса)
        
        order: - указывает порядок flex-элемента. По умолчанию у всех элементов 0
        
        align-self - принимает те же значения, что и align-items.
        
        flex-wrap:
        
        nowrap - размеры элементов устанавливаются автоматически, чтоб они поместились в один ряд.
        
        wrap: Элементы автоматически переносятся на новую строку.
        
        wrap-reverse
        
        flex-flow: row wrap; - комбинированиe flex-direction и flex-wrap
        
        align-content: расстояние между рядами
        
        flex-start - группирует в самом верху
        
        flex-end | center | space-between | space-around | stretch
      - box-sizing:
        
        content-box — значение по умолчанию, соответствует стандартной блочной модели.
        
        border-box — изменяет режим расчета ширины, свойство width задает не ширину содержания, а общую ширину.
        
        http://simonenko.su/32197993404/use-css3-box-sizing
      - visibility: hidden. элемент становится невидимым, но занимает место на странице.
      - ::selection {background: #A6459C; color: #fff;} - выделение текста
      - overflow:
        Отображение содержания блочного элемента
        
        overflow-x / overflow-y: auto | hidden | scroll | visible
        
        visible - отображается все содержание элемента, даже за пределами установленной высоты и ширины.
        
        hidden - отображается только область внутри элемента.
        
        scroll - всегда добавляются полосы прокрутки.
        
        auto - полосы прокрутки добавляются только при необходимости.
        
        inherit - наследует значение родителя.
      - word-break - перенос слов
        
        normal - Строки не переносятся или переносятся там, где явно задан перенос (по умолчанию).
        
        break-all - Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.
      - Flexbox
        
        родитель
        display: flex
        flex-direction
        justifu-content
        align-items
        
        флекс-элемент
        align-self - выравнивание по поперечной (как будто align-items для одного элемента)
        flex-grow - рост (по умолчанию 0)
        flex-shrink - уменьшение (по умолчанию 1 - сжимается)
        flex-basis - размер по главной оси (ширина в row, высота в column)
        flex: <flex-grow>, <flex-shrink>, <flex-basis>
        margin-top/margin-left - прижать к низу/к правой стороне
        min-width: 0; - элемент может быть уже, чем содержимое внутри него (по умолчанию auto - не может быть уже)
        https://habr.com/ru/post/329820/
        
        колонки одинаковой ширины
        .container { display: flex; gap: 1em; }
        .container > * { width: 100%; }
      - user-select: возможность выделить текст/элемент
      - transition: свойство эффект время;
        transition: color ease-in 0.4s;
      - GRID
        
        grid-template-rows:
        grid-template-columns:
        template-areas:
        
        Укороченный вариант:
        grid: <...>; (сбрасывает свойства, управляющие неявной сеткой)
        grid-template: <...>; (оставляет свойства без изменений)
        
        grid-template-rows: 5em auto 200px; / 3 строки /
        grid-template-columns: [row1-start] 25% [row1-end] 100px [first-name second-name] auto [last-line]; / 3 столбца /
        grid-template-columns: repeat(3, 20px [col-start]) 5%; / повторить три раза /
        ==grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
        
        grid-template-columns: <размер пространства> ... | <название линии> <размер пространства> ...;
        grid-template-rows: <размер пространства> ... | <название линии> <размер пространства> ...;
        /по умолчанию названия линий - 1, 2, 3 .../
        
        grid-column-gap: 10px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-columns: repeat(4, 25%); / сначала рассчитается ширина колонок, затем добавится ширина линий -- колонки выйдут за пределы контейнера «нужно установить для каждого столбца значение 25% от ширины области просмотра и расстояние в 10px между ними»./
        grid-template-columns: 1fr auto; / auto зависит от контента /
        grid-template-columns: 1fr 2fr ; / c auto так не сделать /
        
        display: grid | inline-grid | subgrid;
      - Gradient
        background-image/background:
        
        linear-gradient()
        linear-gradient(угол, цвет, цвет)
        
        Угол
        
        to top, to right, to bottom, to left (соответствуют углам 0deg, 90deg, 180deg и 270deg)
        
        можно сочетать: to top left, to top right (45deg) и.т.
        
        Color stops. Точки остановки для неравномерного распределения цветов указывается начальная позиция каждого цвета. Задаются в %, где 0% — начальная точка, 100% — конечная точка
        background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);
        
        radial-gradient([форма] / [размер] / [позиция центра], начальный-цвет, конечный-цвет)
        
        Форма: circle/ellipse, по умолчанию ellipse
        
        Размер: ширина высота или keyword
        keywords:
        
        closest-side
        
        closest-corner
        
        farthest-side
        
        farthest-corner
        
        Позиция центра: (background-position)
        
        at center (default), at
      - mix-blend-mode - смешиваний цветов
      - color: black;
        background-color: currentcolor; - позволяет к элементам применять цвет. указанный в color.
      - Выравнивание
        
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        
        margin: 0 auto;
        
        width: 100%;
        text-align: center;
      - aspect-ratio: соотношение сторон
        пример:
        video {width: 100%; aspect-ratio: 16/9;}
      - Variable
        :root { --variable-name: value;}
        selector { : var(--variable-name);}
    - - Соседний селектор селектор1 + селектор2.
        Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент, подходящий под селектор1.
        (первый сосед)
      - Дочерний селектор p > strong.<p><strong>сработает</strong></p><p><em><strong>нет</strong></em></p>
        (все дети первого поколения)
      - Псевдоклассы
        
        для ссылок:
        
        :link - выбирает ещё не посещённые ссылки
        
        :visited - выбирает посещённые ссылки
        
        :hover - наведен курсор
        
        :active - выбирает активные ссылки (кнопка мыши зажата на ссылке)
        Если их расположить по-другому, то некоторые могут не сработать.
        
        input[checked] { ... }
        
        input[type="text"] { ... }
        
        селектор:псевдокласс
        
        :first-child - выбирает первый дочерний элемент родителя,
        
        :last-child - выбирает последний дочерний элемент.
        
        :nth-child(выражение) - можно выбрать теги по порядковому номеру. (2n) выберет все четные элементы.
        even (четные элементы)
        odd (нечетные элементы)
        
        :hover - выбирает элемент, когда на него наведён курсор мыши
        
        :focus - выбрает элемент, который в данный момент в фокусе.
        
        для input:
        
        :focus – клик внутри поля,
        
        :checked – применяется к checkbox и radio, когда они выбраны,
        
        :empty – пустой элемент, например <span></span>,
        
        :invalid – применяется к полям формы, когда вводимые данные не валидны,
        
        :valid – если валидация была успешна.
      - #some-id
        Использование селекторов по id считается плохой практикой. Редкие исключения из правила - оживлении слайдера на чистом CSS.
      - Контекстные (вложенные) селекторы селектор1 селектор2
        Все селекторы1 внутри селекторов2 (даже обернутые в другие теги):
        p strong { ... } - все теги strong внутри p
        (все дети)
      - http://codeharmony.ru/materials/42
      - Родственные селекторы селектор1 ~ селектор2
        Стили применятся ко всем селекторам2, идущим после селектора1 (должен быть общий родитель)
        <h1/><p/><p/><p/> - h1~p применится ко всем тегам <p>
        (все соседи)
      - псевдоэлементы
        по умолчанию display: inline
        https://habr.com/ru/post/154319/
        
        :first-letter
        
        :first-line
        
        :before
        
        :after
        
        ::selection
        
        В CSS3 используется двойное двоеточие для отличия от псевдоклассов.
        Internet Explorer 8 воспринимает только одно двоеточие (сейчас уже есть IE 11)
  - - - Использование специального тега <style> внутри <head>
      - Используют не так часто, например, для оптимизации скорости загрузки страницы.
      - Атрибут style="свойство: значение;" в теге html
    - - Подключение внешнего файла с расширением .css. с помощью тега <link>
- - - - внешние ресурсы кешируются браузером, что позволяет ускорить загрузку страниц.
  - - - document.write('<p id="new"> some text </p>');
      - document.getElementById('new').style.color='#aaa';
- - - - <title>Заголовок страницы</title>
        отображается в левом верхнем углу браузера, а также во вкладках.
      - </head>
      - <link>
        связанные ресурсы
        
        <link rel="stylesheet" href="адрес файла.css">
        styleshee - говорит о том, что подключаем стили
        
        <link href="../favicon.ico" rel="shortcut icon"> - иконка<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico" />
        
        <link rel="canonical" href="https://example.com/a"/>
        
        rel="next" и rel="prev" - атрибуты пагинации
      - предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую.
      - <meta>
        
        content
        неотъемлемый атрибут тега meta
        
        scheme
        
        <meta charset="utf-8"> кодировка страницы
        
        Технические мета-теги:
        Expires — дата устаревания документа.
        Pragma — запрет на использование кэшированных данных, информация должная подгружаться с сервера.
        Content-Type — тип контента и кодировка.
        Content-language — языка страницы/сайта.
        Cache-Control — устанавливает кэшируется ли документ или нет, и если да, то каким образом.
        Robots — отвечает за индексацию отдельных страниц.
        document-state — частота индексации.
        
        <meta name="format-detection" content="telephone=no">
      - Технические метатеги
        
        NAME- для предоставления информации общего назначения
        
        <meta name="robots" content="">
        
        content=""
        
        all – индексировать всё содержимое страницы;
        
        noindex – запретить страницу к показу в результатах выдачи;
        
        nofollow – не переходить по ссылкам на странице;
        
        noarchive – запретить к кешированию и показу ссылки на копию в результатах поиска;
        
        nosnippet – запретить отображать расширенное описание этой веб-страницы в результатах поиска;
        
        notranslate – не предлагать перевод страницы в результатах поиска;
        
        noimageindex – не добавлять в индекс изображения на странице;
        
        unavailable_after:[RFC-850 date/time] – не отображать эту страницу в результатах поиска после указанного времени/даты.
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        корректное отображение на смартфонах
        
        <meta name="description" content="краткое описание страницы">
        
        <meta name="keywords" content="разные, ключевые, слова">
        
        <meta name="**author**" content="Имя" /><meta name="**copyright**" lang="ru" content="Наименование" />
        
        Как правило, не используются одновременно.
        
        В настоящий момент имеют крайне низкую актуальность.
        
        Могут содержать атрибут lang
        
        HTTP-EQUIV — для указания в теле страницы эквивалентов заголовков протокола HTTP
      - <style> CSS-код </style>
      - <script> JavaScript-код </script>
        
        атрибут src="путь" (можно относительный)
        
        доп. атрибуты:
        
        charset=" " если кодировка отличается от кодировки документа html
        
        async загрузка вместе с осн. страницей
        
        type="text/javascript" (по умолчанию всегда javascript)
        
        <script src="external.js"></script> - внешний
        подключение
        При указании атрибута src содержимое тега игнорируется.
      - атрибут lang="en" какой предложить перевод
      - <base href="content/"> - базовый адрес для относительных ссылок внутри документа
      - <noscript>показывает содержимое, если браузер не поддерживает работу со скриптами или их поддержка отключена пользователем. В остальных случаях браузер игнорирует этот тег</noscript>
    - - </body>
      - <h1>Заголовок 1 уровня</h1> (6 ур., блочный тег)
      - <p>Абзац</p> (блочный тег)
      - Выделение текста
        
        <code></code>
        
        Цитаты
        
        <blockquote> длинные цитаты, которые могут состоять из нескольких абзацев</blockquote>
        
        <q> короткие цитаты в предложениях. Текст внутри этого тега автоматически обрамляется кавычками.</q>
        
        <cite>источник цитаты, название произведения или автора цитаты</cite>
        
        Формулы
        
        <sup> верхний индекс </sup>
        
        <sub> нижнего индекс </sub>
        
        Если нужно вставить очень сложную формулу в HTML-документ, лучше воспользоваться специальным языком разметки MathML.
        
        <del>~~текст, который был удалён в новой версии документа.~~</del>
        
        <ins>текст, который был добавлен в новой версии документа, подчеркнутый</ins>
        
        Оба тега имеют атрибут datetime="гггг-мм-дд"
        
        <pre>«предварительно отформатированный текст»</pre> сохраняет пробелы и переносы как в исходном коде
        
        <em>курсив</em> - особый акцент, меняющий смысл предложения.
        
        <i></i> (курсив. не озвучивается) - названия, термины, иностранные слова.
        
        <strong>жирный</strong> - определяет важность отмеченного текста.
        
        <b></b> (жирный. не озвучивается)
        
        <mark>выделенный цветом текст</mark>
        
        <address></address>
        
        <s></s><strike></strike> зачеркнутый текст
      - <br> - перенос
        
        <hr> - разделитель (линия). атрибут noshade
      - 　
        
        <img src="source" alt=""> - изображение
        
        height="100" (если самостоятельно задать и ширину, и высоту, то браузер может нарушить пропорции исходного изображения)
        
        width="100" (в px) или width="50%"
        
        alt="Альтернативный текст"
      - 　
        
        <a href="адрес ссылки">текст-ссылка</a>
        
        target="_blank" - откроет ссылку в новой вкладке
        
        https://habr.com/ru/post/282880/
        
        rel="nofollow"
        
        href="#id_любого_тега" (или #name) - прокрутка к якорю
        
        href="www.abc.ru#id_любого_тега" - якорь
        
        name заместо href - создает якорь. некликабельная (устаревший)
        
        href="mailto://nuggetnuggetson@gmail.com"
      - <div>блок, прямоугольный контейнер</div>
      - предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.
      - <script>JavaScript-код</script> - внутренний<noscript>то, что будет выводиться, если скрипт не заработает</noscript>
      - <script src="external.js"></script> - внешний
      - Списки
        
        Неупорядоченные (маркированные)
        порядок неважен.
        
        <ul> (блочный тег)
        　<li>List Item (элемент списка)</li>
        </ul>
        
        Упорядоченные (ordered)
        нумеруются.
        
        <ol>
        　<li>Элемент списка</li>
        </ol>
        
        <ol start="3"> <li> ...
        изменение начала нумерации
        
        start: с чего начинать
        
        Списки определений
        
        <dl> - Definition List, список определений;<dt> - Definition Term, термин;<dd> - Definition Definition, определение термина.
        
        Многоуровневые
        
        При вложении списков, новый список вкладывается в элемент списка предшествующего уровня <ul> <li> <ul></ul> </li> </ul>
        
        list-style-type: square; - квадратные маркеры | none (или просто type:)
      - Атрибуты
        всех тегов
        
        class="external"
        
        title="Всплывающая подсказка"
        
        id="атрибут тега" для использования в ссылках с якорем (<a href="#glava1"></a>) - уникален для всей страницы
      - <a href=""> <img src="" alt="Изображение-ссылка"> </a>
      - Таблицы
        <table>
        
        </table>
        
        <thead> </thead><tbody> </tbody>
        
        <tr>Table Row (строка таблицы) </tr>
        
        <th> Table header </th>
        
        <td> Table Data (ячейка) </td>
        
        border: 3px solid lightgray;
        
        border-top: 2px solid lightgray;
        
        border-right;
        
        border-bottom;
        
        border-left;
        
        padding: 5px отступ внутри ячеек
        
        padding-top,
        
        padding-right,
        
        padding-bottom,
        
        padding-left.
        
        colspan="2" объединение ячеек по горизонтали
        (2-кол-во ячеек в право)
        
        rowspan="2" объединение ячеек по вертикали
        
        vertical-align: top/ middle /bottom /... выравнивание по вертикали
        
        text-align: left/ right /center /... выравнивание по горизонтали
        
        valign="" выравнивание по вертикали
        
        </tr>
        
        border="0" ширина рамки (0 по умолчанию)
        
        border: 3px solid black;
        
        border-collapse: collapse; - схлопывает рамки таблицы и ячеек
        (separate по умолчанию)
        
        border-spacing: отступы между ячейками
        
        cellpadding="2" отступ внутри ячеек
        
        padding: внутренний отступ от рамки
        
        padding-top,
        
        padding-right,
        
        padding-bottom,
        
        padding-left.
        
        cellspacing: отступ между ячейками
        
        <caption>Заголовок таблицы</caption>
        
        caption-side: top (над)/ bottom(под) по вертикали
        
        text-align: left/ right /center выравнивание по горизонтали
        
        width: px / % / auto
        height: px / auto
        При % размеры таблицы будут вычисляться с учётом размеров родительского элемента. Auto включает расчёт размеров по умолчанию.
      - Форма
        <form action=" " method=" ">
        
        </form>
        
        action задаёт адрес, URL, отправки формы;
        
        method="get"(по умолчанию)/ post - задаёт метод отправки формы.
        
        get позволяет получить ссылку на результаты поиска и передать её кому-то (поисковые формы)
        
        post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна (при редактировании личного профиля)
        
        <label>
        связывает текст и поле ввода логически
        
        <input type=" " name=" ">
        
        id - не передается на сервер. использовать отличный от name
        
        value="значение поля ввода по умолчанию" или надпись для кнопки.
        
        type=""
        
        text по умолчанию - текстовое поле
        
        password - скрывает звездочками
        
        submit - кнопка (name необязательно. стоит сделать, когда в форме кнопок несколько)
        
        ="checkbox" checked - value необязателен (если галочки нет не посылается ничего)
        
        radio - переключатель (одинаковые name(!), id уникальный для каждого значения)
        
        file - поле для загрузки файла (enctype="multipart/form-data" в <form>!)
        
        hidden - скрытое поле для отправки служебных данных
        
        tel - для номера телефона, через атр. pattern="" можно настраивать шаблон ввода (Safari не поддерживает такое поле)
        
        number
        
        reset - сбросить данные в форме
        
        name нужно, чтобы правильно обработать данные на сервере. Обычно, имя поля должно быть уникальным в пределах формы, хотя есть исключения.
        
        placeholder="текст, который при нажатии исчезает из поля ввода"
        
        autocomplete="off" отключает запоминание браузером того, что вводилось в поле
        
        autofocus
        
        onClick="event.preventDefault();"
        
        <input type="submit"> , желательно, использовать только в форме, <button> - в любом месте на странице
        
        </label>
        
        for="id поля ввода"
        
        <textarea name="" id="">
        многострочное текстовое поле
        
        </textarea>
        
        rows принимает целочисленное значение и задаёт высоту многострочного поля в строках
        
        cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина»
        
        ~~value~~ значение по умолчанию задаётся внутри тега >тут<
        
        <select name="" id="">
        раскрывающийся список
        
        <option value="значение" *selected*>Вариант ответа(подпись)</option>
        
        </select>
        
        multiple - мультиселект (выбор нескольких вариантов)
        
        size="" - высота списка
        
        enctype="multipart/form-data" обязательный атрибут для отправки файла на сервер
      - <span>Текстовый блок</span> никак не изменяет отображение текста, строчный тег
      - <button type="button" onclick="myJavaScriptFunction()">Кнопка</button>
      - <embed> вставка (например FLASH)
      - <iframe src="lib/hello.html" width="200" height="200" ></iframe> - маленькое окошко с другим файлом (такое же используется для вставки на сайтах) - включает содержание другого html файла
      - <canvas id="" width="" height="">область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения</canvas>
      - <svg width="100" height="100"></svg> - SVG инлайн для добавления svg изображений (внутрь тега можно вставить код из файла svg)