Latest web development tutorials
×

HTML курс

HTML курс HTML Краткое введение HTML редактор HTML Фонд HTML элемент HTML свойство HTML заголовок HTML пункт HTML Форматирование текста HTML ссылка HTML руководитель HTML CSS HTML изображение HTML таблица HTML список HTML блок HTML раскладка HTML форма HTML рамка HTML цвет HTML название цвета HTML значения цвета HTML скрипт HTML символьные объекты HTML URL HTML Быстрый список HTML резюме XHTML Введение

HTML5

HTML5 курс HTML5 Поддержка браузеров HTML5 Новый элемент HTML5 Canvas HTML5 Инлайн SVG HTML5 MathML HTML5 Перетаскивание HTML5 Географическое положение HTML5 видео(Video) HTML5 аудиочастота(Audio) HTML5 Input тип HTML5 элементы формы HTML5 Свойства формы HTML5 Смысловые элементы HTML5 Web память HTML5 Web SQL HTML5 кэш приложений HTML5 Web Workers HTML5 SSE HTML5 WebSocket HTML5 викторина HTML(5)Спецификация Код

HTML средства массовой информации

HTML средства массовой информации(Media) HTML Виджет HTML аудиочастота(Audio) HTML видеоплеер(Videos) HTML примеров

HTML справочное руководство

HTML список Теги(в алфавитном порядке) HTML список Теги(функция сортировки) HTML свойство HTML событие HTML холст HTML аудиочастота/видео HTML эффективный DOCTYPES HTML название цвета HTML Выбор цвета HTML Набор символов HTML ASCII HTML ISO-8859-1 HTML символ HTML URL кодирование HTML таблица условных сигналов HTTP новости HTTP способ Сочетания клавиш

макет HTML

Макет страницы, чтобы улучшить внешний вид сайта очень важно.

Пожалуйста, тщательно разработать макет страницы.

примеров

Онлайн примеры

Макет страницы с помощью элемента <div>
Как использовать элемент <div> для компоновки.

Макет страницы Элемент <таблица>
Как использовать элемент <таблица> для компоновки.

макет сайта

Большинство сайтов будет довольствоваться на множество столбцов (например, журнала или газеты этого).

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

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

HTML Layout - Используя элемент <div>

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

В следующем примере используется пять Div элементов для создания макета нескольких столбцов:

примеров

<! DOCTYPE HTML> <HTML> <Head> <Meta Charset = "UTF-8"> <Title> В этом учебнике (w3big.com) </ title> </ Head> <Body> <Div ID = "контейнер" стиль = "ширина: 500px"> <Div ID = "заголовок" стиль = "цвет фона: # FFA500;"> <H1 стиль = "краю дна: 0 ;"> Основной заголовок страницы </ h1> </ DIV> <Div ID = "меню" стиль = "цвет фона: # FFD700; высота: 200px; ширина: 100px; флоат: слева;"> <B> Меню </ b> <br> HTML <br> CSS <br> JavaScript </ DIV> <Div ID = "содержание" стиль = "цвет фона: #eeeeee ; высота: 200px; ширина: 400px; флоат: слева;"> Текст здесь </ DIV> <Div ID = "сноска" стиль = "цвет фона: # FFA500; ясно: то и другое; выравнивания текста: центр;"> Copyright © w3big.com </ DIV> </ Div> </ Body> </ HTML>

Попробуйте »

Выше HTML-код дает следующие результаты:

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

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

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

лампа Даже если вы можете использовать HTML-таблицы, чтобы создать хороший макет, но цель состоит в том, чтобы представить табличные данные таблицы дизайн - не таблица инструментов макет!

В следующем примере используются три строки из двух таблиц - первая и последняя строка использует Colspan атрибут, чтобы охватить два:

примеров

<! DOCTYPE HTML> <HTML> <Head> <Meta Charset = "UTF-8"> <Title> В этом учебнике (w3big.com) </ title> </ Head> <Body> <Таблица ширина = "500" граница = "0"> <Tr> <Td Объединение столбцов = "2" стиль = "цвет фона: # FFA500;"> <H1> Основной заголовок страницы </ h1> </ TD> </ TR> <Tr> <Td стиль = "цвет фона: # FFD700; ширина: 100px;"> <B> Меню </ b> <br> HTML <br> CSS <br> JavaScript </ TD> <Td стиль = "цвет фона: #eeeeee ; высота: 200px; ширина: 400px;"> Текст здесь </ TD> </ TR> <Tr> <Td Объединение столбцов = "2" стиль = "цвет фона: # FFA500; выравнивания текста: центр;"> Copyright © w3big.com </ TD> </ TR> </ Table> </ Body> </ HTML>

Попробуйте »

Выше HTML-код дает следующие результаты:


HTML Layout - Полезные советы

Совет: самые большие преимущества использования CSS является то , что если код CSS сохраняется во внешней таблице стилей, то сайт будет легче поддерживать.Путем редактирования одного файла, вы можете изменить макет для всех страниц. Чтобы узнать больше о CSS, посетите наш CSS учебник .

Совет: Благодаря создавать передовые макет очень много времени, используя шаблон быстрый вариант.Через поисковую систему вы можете найти множество бесплатных шаблонов веб-сайтов (Вы можете использовать эти скомпилированную макет сайта, а также оптимизировать их).

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

标签描述
<div> 定义文档区块，块级(block-level)
<span> 定义 span，用来组合文档中的行内元素。