Flexbox
Объявление типа документа
<!DOCTYPE HTML>
Кодировка символов
<meta charset="UTF-8">
Новые элементы
<article>,<aside>,<audio>, <canvas>, <datalist>, <footer>, <header>, <nav>, <progress>, <section>, <video> и др.
Новые возможности
Формы:
Спецификация Web Forms 2.0 расширила функциональные возможности форм:
- добавлены элементы выбора даты, цвета, NumericStepper
- новые поля для ввода: электронная почта, поиск и URL-адрес
Новые возможности
Встроенные API (Application Programming Interfaces, интерфейсы программирования приложений):
- функция «перетащи и отпусти»
- проигрывание аудио- и видеофайлов
- автономные веб-приложения
- история
- локальное хранилище
- геолокация
- веб-сообщения
Теги расположения
<header> - «шапка» сайта или раздел
<nav> - навигация по сайту
<main> - предназначен для основного содержимого документа
<footer> - «подвал» сайта или раздел
<section> - раздел документа, который может включать в себя заголовки, шапку, подвал и текст
<aside> - для размещения рубрик, ссылок на архив, меток и др. информации
Теги содержания
<article> - новости, статьи, записи блога, форума
<figure> - используется для группировки любых элементов, например, изображений и подписей к ним
<video> - добавляет, воспроизводит и управляет настройками видеоролика на странице
<audio> - добавляет, воспроизводит и управляет настройками аудиозаписи на странице
Специальные теги
<time> - помечает текст внутри тега как дата и/или время
<canvas> - создает область в которой при помощи JavaScript можно рисовать
<source> - вставляет звуковой или видеофайл внутри тегов <audio> и <video>
Типы тегов
Эти элементы отображаются как прямоугольники, идущие друг за другом сверху вниз.
Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
Это такие элементы документа, которые являются непосредственной частью строки.
Эти элементы располагаются друг за другом в одной строке, если не помещаются, то переносится на другую строку.
Блочные
Строчные
К блочным элементам относятся
<article> - статья, новость и др.
<aside> - контент в стороне от содержимого страницы
<address> - определяет контактную информацию автора документа/статьи
<div> - раздел документа
<header> - задает "шапку" сайта или раздела
<footer> - нижняя часть документа
<form> - форма
<h1> - <h6> - заголовки
<ul> - маркированный список
<li> - элемент списка
<nav> - группу ссылок для навигации
<p> - параграф / абзац
<section> - разделы документа
К строчным элементам относятся
<a> - создания ссылок
<b> - устанавливает жирное начертание шрифта
<i> - устанавливает курсивное начертание шрифта
<label> - элемент формы, создаёт связь с элементом формы
<span> - универсальный строчный элемент
... и многие другие
К строчно-блочным относятся
<img> - определяет изображение
<input> - элемент формы, может являться кнопкой, текстовым полем
<select> - создает раскрывающийся список
<textarea> - элемент формы, создает поле для многострочного текста
<button> - создает кнопку
...и какие-то еще
Свойства блочных элементов
{display: block;}
- блоки располагаются по вертикали друг под другом
- у блочных тегов можно управлять шириной и высотой: width, height
- у блочных тегов можно управлять CSS-свойством margin-top и margin-bottom (внешние отступы)
- блочные теги занимают всю ширину, например если задать им фон, то фон займет всю ширину родительского элемента.
- так как блочные теги занимают всю ширину родительского элемента, то объектами находящимися внутри блочного тега, можно управлять с помощью горизонтального выравнивания: left, right, center, justify
- внутри блочных тегов можно размещать другие блочные теги, а также строчные теги (<p> не позволяет вставлять внутрь себя блочные элементы)
- на блочные элементы не действуют свойства, предназначенные для строчных элементов, например как vertical-align.
Свойства строчных элементов
{display: inline;}
- внутрь строчных элементов разрешено вставлять текст или другие строчные элементы.
- в строчные элементы запрещено вставлять блочные элементы (в HTML5 можно) ((но ненужно)).
- свойство height не применяется
- ширина равна содержимому (если есть отступы и бордеры - они добавляются к ширине)
- элементы располагаются друг за другом в одной строке, при необходимости строка переносится
- на строчные элементы действуют свойства vertical-align.
Свойства строчно-блочных тегов
{display: inline-блок;}
- внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
- высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
- ширина равна содержимому плюс значения отступов, полей и границ.
- несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
- можно выравнивать контент по вертикали с помощью свойства vertical-align.
- разрешено задавать ширину и высоту.
- эффект схлопывания отступов не действует.
Адаптивный дизайн
By olgamardvilko
