Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
|
|
Основные элементы HTML
В таблице 5-1 приведен список часто используемых элементов HTML. Любые элементы не входящие в этот список нужно использовать с осторожностью. Каждый раз, при использовании того или иного HTML-элемента, необходимо задавать себе вопрос – «Подходит ли данный элемент для этого фрагмента страницы? Отражает ли он семантическую сущность объекта? Добавляет ли результирующий код ясности в документ, либо наоборот вносит неразбериху?». Обратите также внимание на атрибуты, которые используются в примерах. Как правило, эти атрибуты являются обязательными для элементов.
Таблица 5‑ 2 – Список основных элементов HTML
| Элемент | Пример | Описание |
| html | < html> …< /html> | Обозначает начало и конец HTML-документа |
| head | < head> …< /head> | Обозначает начало и конец заголовка HTML-документа |
| title | < title> …< /title> | Заголовок страницы, показываемый в заголовке окна |
| meta | < meta name=" …" content=" …" > | META-данные |
| style | < style type=" text/css" > …< /style> | Cтилевая разметка, внутренний CSS |
| link | < link type=" text/css" rel=" stylesheet" href=" #" /> | Подключение внешнего CSS |
| script | < script type=" text/javascript" > …< /script> | JavaScript внутри HTML |
| script | < script src=" js/script.js" type=" text/javascript" > < /script> | Подключение внешнего JavaScript |
| body | < body> …< /body> | Обозначает начало и конец тела HTML-документа |
| div | < div> …< /div> | Представляет собой блочный (по-умолчанию) элемент, который используется, чтобы отделить один фрагмент кода от другого. С его помощью позиционируют различные элементы страницы. Кроме разделения кода, никакого смысла этот элемент не несет. Его значение определяют стили CSS. Таким образом, этот элемент чаще всего выступает в роли контейнера для других элементов, с помощью которого веб-разработчик определяет их вид и позицию при отображении. |
| h1, h2, h3, h4, h5, h6 | < h1> …< /h1> < h2> …< /h2> < h3> …< /h3> < h4> …< /h4> < h5> …< /h5> < h6> …< /h6> | Заголовки первого-шестого уровня. Элементы блочного типа. |
| p | < p> …< /p> | Абзац текста (параграф). Элемент блочного типа, содержащий элементы строкового типа. |
| a | < a href=" #" > …< /a> | Ссылка. Строковый элемент. |
| strong | < strong> …< /strong> | Полужирное выделение части текста. По-умолчанию элемент строкового типа. Аналог < b>. |
| em | < em> …< /em> | Наклонный (italic). По-умолчанию элемент строкового типа. Аналог < i> |
| sub | < sub> …< /sub> | Нижний индекс. Строковый. |
| sup | < sup> …< /sup> | Верхний индекс. Строковый. |
| cite | < cite> …< /cite> | Цитата. Строковый. |
| blockquote | < blockquote cite=" #" > …< /blockquote> | Блок цитаты. Параметр cite – ссылка на источник цитаты, необязательный. Блочный. |
| abbr | < abbr title=" …" > …< /abbr> | Аббревиатура. В поле title промещается расшифровка. Строковый. |
| acronym | < acronym title=" …" > …< /acronym> | Акроним. В поле title промещается расшифровка. Строковый. |
| span | < span> …< /span> | Текстовый (по-умолчанию) блок. Так же, как и div не несет смысловой нагрузки и оформляется только через CSS. Является текстовым контейнером. Строковый. |
| br | < br/> | Принудительный перенос строки. |
| object | < object> …< /object> | Вставка объекта, как правило работающего через plugin. Блочный. |
| embed | < embed> …< /embed> | То же самое, что и object, но для некторых браузеров. Используется исключительно внутри object. Не валиден, но приходится использовать. Блочный. |
| img | < img alt=" " src=" #" /> | Изображение. По-умолчанию элемент строкового типа. |
| ul | < ul> …< /ul> | Обозначает начало и конец ненумерованного списка. Блочный. |
| ol | < ol> …< /ol> | Обозначает начало и конец нумерованного списка. Блочный. |
| li | < li> …< /li> | Элемент списка. Блочный. |
| dl | < dl> …< /dl> | Обозначает начало и конец списка определений. Блочный. |
| dt | < dt> …< /dt> | Определение. Элемент списка определений. Блочный |
| dd | < dd> …< /dd> | Содержание. Элемент списка определений. Блочный |
| table | < table> …< /table> | Обозначает начало и конец таблицы. Блочный. |
| tr | < tr> …< /tr> | Обозначает начало и конец строки таблицы. Не имеет типа. |
| td | < td> …< /td> | Ячейка таблицы. Табличный. |
| th | < th> …< /th> | Ячейка заголовка таблицы. Используется при отсутствии thead. Табличный. |
| thead | < thead> …< /thead> | Обозначает начало и конец заголвка таблицы. Невалиден без использования tbody. Обязан содержать tr. Не имеет типа блока. |
| tfoot | < tfoot> …< /tfoot> | Обозначает начало и конец футера таблицы. Невалиден без использования tbody. Обязан содержать tr. Не имеет типа блока. |
| tbody | < tbody> …< /tbody> | Обозначает начало и конец тела таблицы. При отсутствии thead и/или tfoot может быть не указан. Обязан содержать tr. Не имеет типа блока. |
| При использовании thead и/или tfoot порядок записи кода должен быть таким: < thead> …< /thead> < tbody> …< /tbody> или < tfoot> …< /tfoot> < tbody> …< /tbody> или < thead> …< /thead> < tfoot> …< /tfoot> < tbody> …< /tbody> | ||
| form | < form action=" " > …< /form> | Обозначает начало и конец формы. На него лучше не назначать CSS (см. 0). Блочный. |
| fieldset | < fieldset> …< /fieldset> | Обозначает начало и конец блока полей ввода. Блочный. |
| legend | < legend> …< /legend> | Заголовок блока полей ввода. Блочный. |
| label | < label for=" …" > …< /label> | Ярлык поля ввода. Указывает назначение поля ввода. При указании значения for определяет отношение к полю ввода с соответсвующим id. |
| input | < input type=" …" value=" …" /> | Поле ввода. Type опеределяет тип поля ввода: text – текстовое, password – текстовый пароль (введенный текст скрывается значками “*"), radio – переключатель, checkbox – флажок (галка), file – выбор файлов, hidden – скрытый элемент, image – изображение, reset – сброс всех полей в состояние по-умолчению, submit – кнопка передачи данных. Параметр value назначает предустановленный текст поля ввод. Строковый. |
| … | < input type=" text" value=" …" /> | Текстовое поле ввода. |
| … | < input type=" password" value=" …" /> | Текстовый пароль (введенный текст скрывается значками “*") |
| … | < input type=" radio" checked=" checked" /> | Переключатель. Параметр checked указывает на отмеченный элемент. |
| … | < input type=" checkbox" checked=" checked" /> | Флажок (галка). Параметр checked указывает на отмеченный элемент. |
| … | < input type=" file" /> | Выбор файлов. |
| … | < input type=" hidden" value=" …" /> | Скрытый элемент. |
| … | < input type=" image" src=" #" /> | Изображение (кнопка). |
| … | < input type=" reset" value=" …" /> | Кнопка сброса всех полей в состояние по-умолчанию. |
| … | < input type=" submit" value=" …" /> | Кнопка передачи данных. Строковый. |
| textarea | < textarea cols=" " rows=" " > …< /textarea> | Многострочное поле ввода (подробнее в 0). Строковый. |
| select | < select multiple=" multiple" > …< /select> | Обозначает начало и конец поля ввода типа " выпадающий список". Параметр multiple преобразует в невыпадающий список. Строковый. |
| option | < option selected=" selected" > …< /option> | Элемент выпадающего списка. Параметр selected указывавет предварительно выбранный элемент. Не имеет типа. |