ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML учебник

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts


HTML Макеты


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

Лондон

Лондон является столицей Англии. Это самый густонаселенный город в Великобритании, население столицы 13 000 000 жителей.

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


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

Веб-сайты часто отображают содержимое в нескольких столбцах (например, журнал или газета).

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

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

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

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

  • Таблицы HTML
  • CSS плавающее свойство
  • Структура CSS
  • CSS Flexbox


Какой из них выбрать?

Таблицы HTML

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

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


CSS плавает

Он является общим для всех веб-макетов с помощью CSS float свойство. Float легко научиться-вам просто нужно помнить, как поплавок и очистить свойства работы. Недостатки: плавающие элементы привязаны к потоку документов, что может нанести вред гибкости. Узнайте больше о float в нашей CSS float и Clear главе.

Пример с плавающей запятой

Лондон

Лондон является столицей Англии. Это самый густонаселенный город в Великобритании, население столицы 13 000 000 жителей.

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


CSS Flexbox

Flexbox это новый режим макета в CSS3.

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

Узнайте больше о Flexbox в нашем CSS Flexbox глава.

Пример Flexbox

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

Лондон

Лондон является столицей Англии. Это самый густонаселенный город в Великобритании, население столицы 13 000 000 жителей.

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

Copyright © html5css.ru