Видео готово к автоматическому воспроизведению (в Google Chrome необходимо добавить звук без звука, чтобы решить проблему автозапуска)

Показать пользователю элементы управления воспроизведением

Установить ширину устройства вставки

Установить высоту игрока

Продолжать ли воспроизведение видео после воспроизведения, зацикливания

Указывает, следует ли предварительно загружать видео (если доступен автозапуск, этот атрибут игнорируется).

авто (предварительная загрузка видео)

нет (видео не должно загружаться)

URL-адрес видео

Загрузить изображение экрана ожидания

Играй тихо

Если этот атрибут присутствует, звук будет воспроизводиться, как только он будет готов.

Если присутствует, отображает пользователю элемент управления, например кнопку воспроизведения.

Если этот атрибут присутствует, воспроизведение возобновляется всякий раз, когда звук заканчивается.

URL-адрес аудио для воспроизведения.

Задает выравнивание таблицы относительно окружающих элементов.

Указывает, имеет ли ячейка таблицы границу. Значение по умолчанию — «», что означает отсутствие границы.

Указывает пространство между краем ячейки и ее содержимым, по умолчанию равно 1 пикселю.

Указывает пространство между ячейками, по умолчанию равное 2 пикселям.

Определяет ширину таблицы.

действие

метод

имя

стиль списка: нет;

тип

Другие объекты недвижимости

размер

несколько

выбрано

ссылка

а: посетил

а: наведите курсор

а: активный

Селектор псевдокласса :focus используется для выбора элемента формы, на котором находится фокус.

ввод: фокус { цвет фона: желтый; }

Вставьте содержимое спереди внутри элемента

Вставка содержимого после элемента

до и после создания элемента, но это встроенный элемент

Этот вновь созданный элемент невозможно найти в дереве документа, поэтому мы называем его псевдоэлементом.

Синтаксис: элемент:beforef

до и после должны иметь атрибуты контента

before создает элементы перед содержимым родительского элемента, а after вставляет элементы после содержимого родительского элемента.

Селекторы псевдоэлементов аналогичны селекторам меток и имеют вес 1.

Выберите элементы E с атрибутом att

Выбирает элементы E с атрибутом att, значение которого равно val.

Соответствует элементам E с атрибутом att, значение которого начинается с val.

Соответствует элементам E с атрибутом att, значение которого заканчивается на val.

Сопоставляет элементы E с атрибутом att и val в их значении.

Соответствует первому дочернему элементу E в родительском элементе.

Соответствует последнему элементу E в родительском элементе.

Соответствует n-му дочернему элементу E в родительском элементе.

n может быть числом, ключевым словом, формулой (2n) или (2n 1) и т. д.

n может быть ключевым словом: четное четное число, нечетное нечетное число

nth-child сортирует и выбирает всех дочерних элементов родительского элемента (порядковый номер фиксирован). Сначала найдите n-й дочерний элемент, а затем проверьте, соответствует ли он E.

указывает первый тип E

Указывает последний тип E

указывает n-й элемент типа E

nth-of-type сортирует и выбирает указанные дочерние элементы внутри родительского элемента. Сначала сопоставьте E, а затем найдите n-го дочернего элемента на основе E.

background-color: значение цвета по умолчанию — прозрачный (прозрачный)

фоновое изображение: нет l URL (ur1)

фоновое повторение: повторить

фоновая позиция: x y;

background-attachment: исправлена ​​прокрутка

Верхняя граница может быть определена для родительского элемента.

Верхнее дополнение может быть определено для родительских элементов.

Вы можете добавить переполнение: скрыто к родительскому элементу.

Необходимый. Положение горизонтальной тени. Допускаются отрицательные значения.

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

Необязательный. нечеткое расстояние

Необязательный. Размер тени.

Необязательный. Цвет тени. См. значения цветов CSS

Необязательный. Измените внешнюю тень (начало) на внутреннюю тень.

Необходимый. Положение горизонтальной тени. Допускаются отрицательные значения.

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

Необязательный. нечеткое расстояние

Необязательный. Цвет тени. См. значения цветов CSS

Элементы не плавают (по умолчанию)

Элемент плавает влево

Элемент плавает вправо

Дело 1

Случай 2

Случай 3

Случай 4

display/position/float/lear/visibility/overflow (рекомендуется сначала написать display, ведь это связано с режимом)

ширина/высота/поля/отступ/граница/фон

цвет/шрифт/текстовое оформление/выравнивание текста/вертикальное выравнивание/пробел/разрывное слово

контент/курсор/граница-радиус/бокс-тень/текст-тень/фон:линейный-градиент...

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

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

Относительное позиционирование означает, что когда элемент перемещается, он находится относительно своего исходного положения (нарциссический тип).

Характеристики взаимного расположения: (необходимо запомнить)

Абсолютное позиционирование означает, что когда элемент перемещается, он перемещается относительно своего родительского элемента (тип пин-папа).

Характеристики абсолютного позиционирования: (необходимо запомнить)

Фиксированное позиционирование — это когда элемент фиксируется в видимой области браузера. Основные сценарии использования: Положение элемента не будет меняться при прокрутке страницы браузера.

Характеристики фиксированного позиционирования: (необходимо запомнить)

Советы по фиксированному расположению: фиксировано в правой части центра страницы.

Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий липкий

Особенности липкого позиционирования:

При использовании макета позиционирования блоки могут перекрываться. В настоящее время вы можете использовать z-индекс для управления порядком полей (ось Z).

1. Значение может быть положительным целым числом, отрицательным целым числом или 0. По умолчанию установлено значение auto. Чем больше значение, тем выше находится поле.

2. Если значения атрибутов совпадают, следуйте порядку записи, причем последнее идет первым.

3. После номера нельзя добавлять единицы измерения.

4. Только позиционированные блоки имеют атрибуты z-index.

Блок с абсолютным позиционированием не может быть центрирован по горизонтали с помощью поляmargin:0auto, но его можно центрировать по горизонтали и вертикали с помощью следующих методов расчета.

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

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

Плавающие элементы и абсолютно позиционированные (фиксированные) элементы не вызовут проблемы слияния полей.

1. Плавающие элементы отличаются друг от друга. Они подавляют только стандартное поле потока под ним, но не подавляют текст (изображение) в стандартном поле потока ниже.

2. Абсолютное позиционирование (фиксированное позиционирование) подавит все содержимое стандартного потока ниже.

3. Причина, по которой плавание не подавляет текст, заключается в том, что изначально целью плавания является создание эффекта переноса текста. Текст будет обтекать плавающий элемент.

отображение: нет; скрыть объект

display:block ; Помимо преобразования в элементы уровня блока, это также означает отображение элементов.

После того, как display скрывает элемент, он больше не занимает исходное положение.

видимость: видимый элемент виден;

видимость: скрытый элемент скрыт;

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

видимый

скрытый

прокрутка

авто

Новичок по умолчанию

крошечная рука

двигаться

текст

запретить

1. Добавьте к изображению вертикальное выравнивание: среднее верхнее нижнее и т. д. (продвигается к использованию)

2. Преобразуйте изображение в элемент блочного уровня display:block;

/*1. Сначала заставьте текст отображаться в одну строку*/ (обычный автоматический перенос строк по умолчанию) white-space: nowrap;

/*2 Лишняя часть скрыта*/overflow: Hidden;

/*3. Замените лишний текст многоточием*/text-overflow: ellipsis;

/*.Скрыть лишнюю часть*/overflow: Hidden;

/*.Замените лишний текст многоточием*/text-overflow: ellipsis;

/*Отображение модели эластичного блока расширения*/display: -webkit-box;

/*Ограничить количество строк текста, отображаемых в элементе блока */webkit-line-clamp: 2;

/*Устанавливаем или получаем расположение дочерних элементов объекта гибкого блока */webkit-box-orient:vertical;

1. Переместите поле каждого поля влево на 1 пиксель, чтобы прижать границу поля.

2. Когда мышь проходит через определенное поле, просто увеличьте уровень текущего поля (если нет позиционирования, добавьте относительное позиционирование (сохраните положение), если есть позиционирование, добавьте z-index)

Автовоспроизведение

элементы управления

ширина

высота

петля

предварительная загрузка

источник

плакат

приглушенный

Автовоспроизведение

элементы управления

петля

источник

Ограничить ввод пользователя типом электронной почты

Ограничить ввод пользователя типом URL

Ограничить ввод пользователя типом даты

Ограничить ввод пользователя типом time

Ограничить ввод пользователя типом месяца

Ограничить ввод данных пользователем типом недели

Ограничить ввод данных пользователем числовым типом

номер телефона

панель поиска

Создать форму выбора цвета

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

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

Атрибут автофокуса: после загрузки страница автоматически фокусируется на указанной форме.

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

Он включен по умолчанию, например autocomplete="on", и autocomplete="off" необходимо поместить в форму, одновременно добавляется атрибут имени, и он успешно отправляется.

Вы можете выбрать несколько файлов для отправки

Выберите элементы E с атрибутом att

Выбирает элементы E с атрибутом att, значение которого равно val.

Соответствует элементам E с атрибутом att, значение которого начинается с val.

Соответствует элементам E с атрибутом att, значение которого заканчивается на val.

Сопоставляет элементы E с атрибутом att и val в их значении.

Соответствует первому дочернему элементу E в родительском элементе.

Соответствует последнему элементу E в родительском элементе.

Соответствует n-му дочернему элементу E в родительском элементе.

n может быть числом, ключевым словом, формулой (2n) или (2n 1) и т. д.

n может быть ключевым словом: четное четное число, нечетное нечетное число

nth-child сортирует и выбирает всех дочерних элементов родительского элемента (порядковый номер фиксирован). Сначала найдите n-й дочерний элемент, а затем проверьте, соответствует ли он E.

указывает первый тип E

Указывает последний тип E

указывает n-й элемент типа E

nth-of-type сортирует и выбирает указанные дочерние элементы внутри родительского элемента. Сначала сопоставьте E, а затем найдите n-го дочернего элемента на основе E.

Вставьте содержимое спереди внутри элемента

Вставка содержимого после элемента

до и после создания элемента, но это встроенный элемент

Этот вновь созданный элемент невозможно найти в дереве документа, поэтому мы называем его псевдоэлементом.

Синтаксис: элемент:beforef

до и после должны иметь атрибуты контента

before создает элементы перед содержимым родительского элемента, а after вставляет элементы после содержимого родительского элемента.

Селекторы псевдоэлементов аналогичны селекторам меток и имеют вес 1.

Свойство CSS filter применяет к элементам графические эффекты, такие как размытие или сдвиг цвета.

filter: function(); например: filter: Blur(5px); Чем больше значение, тем размытее.

Calc0 Эта функция CSS позволяет выполнять некоторые вычисления при объявлении значений свойств CSS.

ширина: расчет (100% -80 пикселей);

Вы можете использовать -*/ внутри скобок для выполнения вычислений.

Переходы — это одна из революционных функций CSS3, позволяющая нам добавлять эффекты к элементам при их переходе из одного стиля в другой без использования Flash-анимации или JavaScript. Анимация перехода: это постепенный переход из одного состояния в другое, благодаря которому наша страница может выглядеть лучше и динамичнее. Хотя она не поддерживается браузерами более ранних версий (версии ниже e9), она не влияет на макет страницы. Теперь мы часто используем его вместе с :hover

переход: переход к свойству требует времени, и кривая движения начинается, когда

Transform: Translate(x,y) или напишите их отдельно

Определите движение в 2D-трансформации, перемещая элементы вдоль оси Y.

Самое большое преимущество перевода: оно не повлияет на положение других элементов.

Процентная единица перевода задается относительно собственного элемента перевода: (50%,50%)

Не влияет на встроенные теги

преобразование: поворот (градус)

Rotate содержит градус, а единица измерения — град. Например, rdate(45deg.

) Когда угол положительный, то по часовой стрелке; когда отрицательный, против часовой стрелки.

Центральной точкой вращения по умолчанию является центральная точка элемента.

преобразование-происхождение: x y;

Обратите внимание, что следующие параметры x и y разделены пробелами.

Центральной точкой преобразования xy по умолчанию является центральная точка элемента (50% 50%).

Вы также можете установить пиксели или существительные положения для x y (вверху внизу слева справа по центру)

преобразование: масштаб (х, у);

Обратите внимание, что x и y разделены запятыми.

Transform:scale(1,1): Ширина и высота удваиваются по сравнению с отсутствием увеличения.

Transform:scale(2,2): ширина и высота увеличиваются в 2 раза.

Transform:scale(2): Запишите только один параметр, второй параметр такой же, как первый параметр, что эквивалентно масштабу(2,2).

преобразование: масштаб (0,5,0,5): уменьшить

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

1. Используйте несколько преобразований одновременно в формате: Transform:translate0rotate(scale0.etc.

2. Его порядок влияет на эффект конверсии. (Первое вращение изменит направление оси координат)

3. Когда у нас есть смещение и другие атрибуты одновременно, не забудьте поставить смещение первым.

Базовое использование анимации

Определите анимацию с помощью ключевых кадров (аналогично определению селекторов классов)

Общие свойства анимации

Сокращенные свойства анимации

5.4 Детали кривой скорости

Transform:translate3d(x,y,z): где x, y и Z соответственно относятся к расстоянию в направлении перемещаемой оси.

Создавайте близкие, большие и очень маленькие визуальные стереоскопические эффекты на 2D-плоскости, но эффект является только двухмерным.

Если вы хотите создать 3D-эффект на веб-странице, вам нужна перспектива (под которой понимается 3D-объект, проецируемый в 2D-плоскость).

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

Перспективу еще называют расстоянием просмотра: расстояние просмотра — это расстояние от человеческого глаза до экрана.

Чем ближе к зрительной точке, тем больше будет изображение в компьютерной плоскости, а чем дальше, тем меньше изображение.

Единица перспективы — пиксели.

Перспектива, записанная в родительском блоке наблюдаемого элемента.

Трехмерное вращение означает, что элемент можно вращать вдоль осей X, Y, Z или произвольной оси в трехмерной плоскости.

Transform:rotateX(45deg): поворот на 45 градусов в положительном направлении оси X.

Transform:rotateY(45deg): поворот на 45 градусов в положительном направлении оси Y.

Transform:rotateZ(45deg): поворот на 45 градусов в положительном направлении оси Z.

Transform:rotate3d(x,y,z,deg): Повернуть градусы на угол вдоль пользовательской оси (просто поймите это)

Определяет, включает ли дочерний элемент трехмерную среду. .

Подэлемент Transform-style: Flat по умолчанию не включает трехмерное пространство.

Transform-style: дочерние элементы save-3d обеспечивают трехмерное пространство;

Код записывается в родительский блок, но влияет на дочерний блок.

Этот атрибут очень важен и будет использоваться позже.