Глобальные атрибуты |
14 |
|
Атрибуты, которые могут быть у любого тега.
–class
–accesskey
–contenteditable
–contextmenu
–dir
–draggable
–dropzone
–hidden
–id
–lang
–spellcheck
–style
–tabindex
–title
–translate
–атрибуты для обработки событий
–data-атрибуты
15
Атрибут class
–Описывает один или несколько классов (группа предметов или явлений, обладающих общими признаками), к которым принадлежит элемент.
–Помогает уточнить смысл и предназначение каждого тега.
–Множественные классы перечисляются через пробел.
–Наш лучший друг при разметке!
Как делать разметку
16
Что такое разметка
Когда все содержательные сущности документа размечены подходящими по смыслу тегами.
Декоративные (не содержательные) сущности в разметку входить не должны. Кроме тех случаев, когда без них никак.
Подходы к разметке
–Страница как документ
–Страница как интерфейс
–Верстка дивами
18
Страница как документ
–Задача — восстановить из макета первоначальную логическую структуру документа.
–Можно добавлять то, чего не видно на макете.
–В разметку попадает не всё, что есть на макете.
19
Алгоритм разметки
1.Выделяем повторяющиеся на каждой странице блоки (шапка и подвал) и основное содержание.
2.В этих блоках размечаем крупные смысловые разделы.
3.В документе, и в каждом смысловом разделе выделяем заголовки (если их нет в макете, то позже прячем с помощью стилей).
4.Размечаем оставшиеся мелкие элементы в каждом смысловом разделе методом исключения:
1.Получилось найти самый подходящий тег – используем его.
2.Нужно разметить потоковый контейнер – <div>.
3.Нужно сгруппировать мелкие фразовые элементы – <p>.
4.Нужно выделить сам мелкий фразовый элемент (слово или фразу) – <span>.
При разметке добавляем всем тегам понятные имена классов. Теги без классов допустимы, если из контекста понятно их назначение.
При дальнейшей вёрстке разметка может меняться, если это необходимо для стилизации.
Чаще всего добавляются обёртки с помощью <div>.
Как назвать классы? |
20 |
|
Имя класса должно отражать назначение элемента, а не рассказывать о его внешнем виде.
Воздержитесь от транслита.
Типовые имена классовhttps://github.com/yoksel/common-words
Пространство имен |
21 |
|
22
Пространства имён
–Упрощают именование классов.
–Разбивают код на относительно независимые блоки.
–Предотвращают нежелательное перемешивание стилей.
–Ускоряют разработку и упрощают поддержку.
23
Признаки хорошей разметки
–Простота
–Соблюдение стиля кодирования
–Отсутствие лишних элементов
–Работоспособность
24
Простота
–Использовано минимально необходимое количество тегов.
–Имена классов рассказывают о назначении элементов.
–Есть чёткие границы смысловых блоков, легко понять к какому блоку принадлежит тег.