Оглавление

HTML5 - язык гипертекстовой разметки

---

Общие вводные:

• W3C validator - проверка на соответствие стандартам (валидация, и исправление верстки)
• DOM-дерево
• Exicibility (доступность и удобство работы)
• <meta viewport (респонсив-дизайн) user-scalable=no (запрещает зумить страницу)
• IE-eage (для IE)
• Тэги бывают блочными и строчными, по расположению, по содержимому.
• Семантиические тэги (тэг со смысловым предназначением) - определяет глобальную стркутуру.
  

  <header> шапка сайта
  <nav> навигацию по сайту
  <main> основное содержимое <section> блок чего-то <article> содержимое блока информации	<aside> дополнительное содержимое
  <footer> подвал сайта

• h1-h6; hr; p; br
• adress (инфа об авторе); g; blockquote
• b; i; s; tt; code; strong; em; big; small (частисное увеличение)
• time datetime = ""
• <time>
• s; del; ins; sub; sup
• Списки
  • ul->li не нумерованны список
  • ol->li нумерованный список
  • dl (список определений)-> dt (содержит термины) || dd (содержит определение, поясняющщий текст)
• Картинка
  • <img>
  • <picture><sourse media="" srcset=""></picture> (респонсив - сет картинок)
  • <figure> <img> <figcaption>...</figure> (связь картинок с контентом, для СЕО, для читалок)
• Таблицы
  • <caption> Заголовок
  • <thead> -> <th> vs <td> - 1 строка
  • <tbody> - данные
  • <tfoot> - 1 строка
  • rowspan объединение по вертикали
  • collspan объединение по горизонтали
• Ссылки href="tel: skype: mail: #id (якорь для перемещения по странице)"
• Специальные тэги
  • <abbrtitle="---Расшифровка---">HTML</abbrtitle>
  • <input list="list"><datalist id="list><option value=""></datalist>
  • <progress>/ <meter>
  • <noscript>
  • <mark> (выделяет текст желтым)
  • <canvas> (холст-область для рисования)
• Формы
  • <form name=""> (можно указать имя формы, если на странице 2 и более форм)
  • <fieldset><legend> группировка форм, легенда
  • <input> + <label>
  • <input>
    • text/password/number/search
    • tel/email/url (для телефонов будет показана соответствующая клавиатура для ввода данных) 
    • range
    • date/datetime-local/month/time/week
    • color
    • hidden
    • file
    • radio/checkbox
    • submit/image/reset
• <video>/<audio> во всех браузерах поддерживается .mp4
• Атрибуты
  • class связывание со стилем
  • title добавление подсказки
  • contendeditable="true"
  • spellcheck проверка орфографии
  • hidden
  • tabindex="1" фокус через таб
  • dir="rtl" lang="ru" языки и направление текста

Методология БЭМ (как правильно писать код): БЛОК - ЭЛЕМЕНТ - МОДИФИКАТОР

Верстка на основе технических блоков

Инструменты для адаптивной верстки (todo)

---

---

---

---

Добавить комментарий