(DHTML, HTML5)

Виды HTML-элементов

Блочные элементы

div, p, h1 …

• располагаются один над другим
• занимают всю ширину экрана
• можно явно указать их ширину и высоту

display: block

Инлайн-элементы

a, span …

• располагаются последовательно в одной строке
• ширина и высота определяются содержимым (изменить нельзя)
• содержимое может переноситься на другую строку

display: inline

Элементы inline-block

• располагаются в строке, но…
• можно задать ширину и высоту

display: inline-block

Табличные элементы

Таблица, строка таблицы, ячейка таблицы

• размер – по содержимому ячейки и соседних ячеек
• «умное» вертикальное центрирование

display: table

display: table-row

display: table-cell

…

Существуют и другие виды элементов (списки и др.)

Позиционирование элементов

Статическое позиционирование

position: static

• позиционирование по умолчанию
• соответствует правилам блочных, инлановых и др. элементов

Относительное позиционирование

position: relative

• обычное расположение элементов
• можно сдвигать элемент относительно обычного расположения

top / bottom
left / right

Абсолютное позиционирование

position: absolute

• элемент извлекается из основного потока (остальные элементы «не знают», что этот элемент был)
• положение элемента – относительно ближайшего элемента с относительным или абсолютным позиционированием
• ширина элемента – по содержимому

Всплывающие элементы

Свойство float – управление взаимным положением элементов

float: left
float: right

• элемент вынимается из потока, сдвигается вверх и в сторону до тех пор, пока это возможно
• размеры элемента – по содержимому
• строковые элементы «уступают место» float-элементу (обтекают по краям)

«Отмена» float

сlear: both

Отступы по краям элементов

margin
padding

На общий размер элемента влияет также рамка – border

Управление «видимостью» элементов

display: none (block, inline или др.)

visibility: hidden (visible)

Подробнее…

Подробнее про управление элементами HTML:

http://learn.javascript.ru/css-for-js

Примеры:

http://edu.vspu.ru/doc/user/2/2080/sample-lec3.zip

Работа с формами

Элементы форм – текстовые поля, кнопки, переключатели и др.

<input type="тип" name="имя" value="значение" …>

Типы элементов форм:

text
button
checkbox
radio
submit
password
file

Другие возможные элементы:

<textarea name="имя">

</textarea>

<select>

<option>Элемент 1</option>

<option>Элемент 2</option>

</select>

Оформление формы

<form name="имя" action="адрес" method="GET или POST">

элементы формы

</form>

Контрольная работа по предыдущей лекции

Вопрос: Какие свойства HTML-элементов можно изменять из сценариев JavaScript?