Основной учебник HTML

Медиа HTML

Руководство по HTML

Основной курс HTML5

API HTML5

Медиа HTML5

Разметка HTML

Рациональное планирование страницы очень важно, оно не только определяет, будет ли страница красивой, но и влияет на опыт пользователя; плохой макет страницы приводит к плохому опыту пользователя и сложно удержать пользователя.

Способы реализации макета HTML

1、Можно использовать способ таблицы HTML для создания макета страницы, а затем заполнения содержимым.
2、Использование div, совместно с float или flex для макета страницы.

Пример простого макета таблицы

Пример

<!DOCTYPE html>
<html>
<head>
　　　　<meta　charset="UTF-8">
　　　　<title>表格</title>
</head>
<body>
　　<table　border="1"　cellspacing="1"　cellpadding="1"　align="center">
　　　　　　<tr>
　　　　　　　　　　<td　colspan="2"　align="center"　　style="background:　#0395e1">顶部导航</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td　style="background:　#f25807"　align="center"　height="300px"　width="100px">
　　　　　　　　　　　　　　Содержание<br> <br>Боковая панель
　　　　　　　　　　</td>
　　　　　　　　　　<td style="background: red" align="center" width="400px">
　　　　　　　　　　　　　　Основной контент
　　　　　　　　　　</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td colspan="2" style="background: darkorchid" align="center">Низ</td>
　　　　　　</tr>
　　</table>
</body>
</html>

тестировать看看 ‹/›

Более примеров онлайн

Веб-страница с компоновкой, используя элемент <div>.
Как добавить компоновку с помощью элемента <div>.

Веб-страница с компоновкой, используя элемент <table>.
Как добавить компоновку с помощью элемента <table>.

Компоновка веб-сайта

Большинство сайтов располагают содержимое в нескольких столбцах (как в журнале или газете).

Большинство сайтов могут использовать элементы <div> или <table> для создания многостолбцовой компоновки. CSS используется для позиционирования элементов или создания фона и насыщенного внешнего вида страницы.

Хотя мы можем использовать тег table HTML для создания красивой компоновки, тег table не рекомендуется использовать в качестве инструмента для компоновки - таблицы не являются инструментом для компоновки.

HTML-компоновка - использование элементов <div>

Элемент div является блочным элементом HTML, используемым для группировки HTML-элементов.

Пример использует пять элементов div для создания многостолбцовой компоновки:

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебник (oldtoolbag.com)</title>　
</head>
<body>
　
<div id="container" style="width:520px">
　
<div id="header" style="background-color:#FFA300;">
<h1 style="margin-bottom:0;">Основной заголовок веб-страницы H1</h1></div>
　
<div id="menu" style="background-color:#FF9a00;height:200px;width:120px;float:left;">
<b>Меню</b><br>
HTML<br>
CSS<br>
JavaScript</div>
　
<div id="content" style="background-color:#dddddd;height:200px;width:400px;float:left;">
Содержание здесь</div>
　
<div id="footer" style="background-color:#FFA300;clear:both;text-align:center;">
Авторские права © Основной учебник (oldtoolbag.com)</div>
　
</div>
　
</body>
</html>

тестировать看看 ‹/›

Приведенный выше код HTML produces следующий результат:

HTML разметка - использование таблиц

Использование тега HTML <table> - это простой способ создания макета.

Большинство сайтов могут использовать элементы <div> или <table> для создания многостолбцовых структур. CSS используется для позиционирования элементов или создания фона и насыщенного внешнего вида страницы.

Хотя можно использовать таблицы HTML для создания красивых макетов, их目的是 представить табличные данные - таблицы не являются инструментами для макета!

Ниже приведен пример таблицы с тремя строками и двумя столбцами - первые и последние строки используют атрибут colspan для перекрытия двух столбцов:

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебник (oldtoolbag.com)</title>　
</head>
<body>
　
<table width="520" border="0">
<tr>
<td colspan="2" style="background-color:#FFB500;">
<h1>Основные заголовки веб-страниц H1</h1>
</td>
</tr>
　
<tr>
<td style="background-color:#FFB700;width:120px;">
<b>Меню</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#DDDDDD;height:200px;width:400px;">
Содержание здесь</td>
</tr>
　
<tr>
<td colspan="2" style="background-color:#FFB500;text-align:center;">
Авторские права © Основной учебник (oldtoolbag.com)</td>
</tr>
</table>
　
</body>
</html>

тестировать看看 ‹/›

HTML разметка - необходимый CSS

Основное преимущество использования CSS заключается в том, что если CSS-коды хранятся в внешних таблицах стилей, то сайт становится легче обслуживать и предоставляет гибкость в определении стиля. Изменение файла таблицы стилей CSS позволяет изменить макет всех страниц. Если вы хотите узнать больше о CSS, пожалуйста, посетите нашCSS учебник.

Тэги HTML разметки

Тэг	Описание
<div>	Определение блока документа, блокового уровня (block-level)
<span>	Определение span, используемого для объединения инлайновых элементов документа.

Просмотр видео HTML (Video)Блоки HTML