САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу HTML Глава HTML Макет HTML Адаптивный HTML Компьютерный код HTML Объекты HTML Символы HTML Кодировка HTML URL Кодирование HTML XHTML

HTML Формы

HTML Формы HTML Элементы формы HTML Тип ввода HTML Атрибуты ввода

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые Элементы HTML5 Семантика HTML5 Миграция HTML5 Синтасис

HTML Графика

HTML Canvas HTML SVG HTML Google Карта

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Объекты HTML YouTube

HTML API

HTML Геолокация HTML Перетаскивание HTML Веб Хранилище HTML Веб Работник HTML СОС

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Заключение HTML Возможности

HTML Справочники

HTML Список Тегов HTML Атрибуты HTML Глобальные HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Декларации HTML Набор Кодировок HTML URL Код HTML Коды языка HTML Коды стран HTTP Сообщения HTTP Методы Ковертер PX в EM Клавишные комбинации

HTML Макет



Пример Макета HTML

Лондон

Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.

Стоя на берегу реки Темзы, Лондон был крупным поселением на протяжении двух тысячелетий, за его историю, уходящую своего основания римлянами, которые назвали его Londinium.

Редактор кода »

Элементы Макета HTML

Сайты часто отображает контент в несколько колонок (подобно журналу или газете).

Спецификация HTML5 предлагает новые семантические элементы, которые определяют разные части веб-страницы:

HTML5 семантические элементы
  • <header> - Определяет заголовок документа или раздела
  • <nav> - Определяет контейнер для навигационных ссылок
  • <section> - Определяет раздел в документе
  • <article> - Определяет независимые самодостаточные статьи
  • <aside> - Определяет содержание кроме содержания (такие как боковая панель)
  • <footer> - Определяет нижний колонтитул в документе или разделе
  • <details> - Определяет дополнительную информацию
  • <summary> -Определяет заголовок для элемента <details>

Макеты Компоновки HTML

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

  • Модель table HTML
  • Модель float CSS
  • Модель framework CSS
  • Модель flexbox CSS

Какой выбрать?

Модель table HTML

Элемент <table> не был разработан, для инструмента макет! Задача элемента <table> отображать табличные данные. Так что лучше, не нужно использовать таблицы для разметки макета! Они внесут беспорядок в коде. И представьте, как трудно будет перестроить свой сайт через пару месяцев.

Совет: Не используйте таблицы для разметки макета!


Модель framework CSS

Если вы хотите создать свой макет быстро, вы можете использовать фреймворк, как W3.CSS или Bootstrap.


Модель float CSS

Он является общим, чтобы сделать весь веб-макетов, используя CSS свойства float.

Поплавок легко изучить - нужно просто вспомнить, как работают свойства float и clear. Недостатки: Плавающие элементы привязаны к документообороту, который может нанести вред гибкости.

Подробнее о float в нашей главе CSS Float и Clear.

Пример Макета Float

Лондон

Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.

Стоя на берегу реки Темзы, Лондон был крупным поселением на протяжении двух тысячелетий, за его историю, уходящую своего основания римлянами, которые назвали его Londinium.

Редактор кода »

Модель flexbox CSS

Модель flexbox - новый режим макета в CSS3.

Использование flexbox гарантирует, что элементы ведут себя предсказуемо, когда макет страницы должен вмещать разные размеры экрана и различных устройств отображения. Недостатки: Не работает в IE10 и ранних версиях.

Узнать больше о спецификации flexbox в нашей главе CSS Flexbox.

Пример Макета Flexbox

Городская Галерея

Лондон

Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.

Стоя на берегу реки Темзы, Лондон был крупным поселением на протяжении двух тысячелетий, за его историю, уходящую своего основания римлянами, которые назвали его Londinium.

Copyright © SchoolsW3.com
Редактор кода »