Основные теги html
Post on 16-Jun-2015
670 views
DESCRIPTION
Немного об HTMLTRANSCRIPT
Основные теги HTML
Основные тегиОсновные теги <html></html><html></html> Указывает Указывает
программе просмотра страниц что программе просмотра страниц что это HTML документ. это HTML документ.
<head></head><head></head> Определяет место, Определяет место, где помещается различная где помещается различная информация не отображаемая в теле информация не отображаемая в теле документа. Здесь располагается тег документа. Здесь располагается тег названия документа и теги для названия документа и теги для поисковых машин. поисковых машин.
<body></body><body></body> Определяет Определяет видимую часть документавидимую часть документа
Теги оглавленияТеги оглавления
<base href="www.?"><base href="www.?"> Указание браузеру от Указание браузеру от какого базового адреса все ссылки (кроме какого базового адреса все ссылки (кроме ссылок явно прописанных полностью)ссылок явно прописанных полностью)
<base target="?"><base target="?"> Указание браузеру от Указание браузеру от какого базового окна в котором открываются какого базового окна в котором открываются все ссылки (кроме ссылок с отдельным все ссылки (кроме ссылок с отдельным указанием данного параметра)указанием данного параметра)
<meta name="allow-search" content="?"><meta name="allow-search" content="?"> Указание для поисковых роботов как следует Указание для поисковых роботов как следует сканировать данную страницу сканировать данную страницу
<meta http-equiv="distribution" content="?"><meta http-equiv="distribution" content="?"> Указание для поисковых роботов относится ли Указание для поисковых роботов относится ли данная страница к мировым данная страница к мировым
<meta name="robots" content="?"><meta name="robots" content="?"> Указание Указание для поисковых роботов как следует для поисковых роботов как следует сканировать данную страницу сканировать данную страницу
<meta name="author" content="?"><meta name="author" content="?"> УказаниеУказание автораавтора страничкистранички <meta <meta
namename="="keywordskeywords" " contentcontent="?">="?"> Описание Описание содержащийся информации (для поисковых содержащийся информации (для поисковых машин)машин)
<meta http-eguiv="content-type" <meta http-eguiv="content-type" content="text/plain;churset="?">content="text/plain;churset="?"> Указание Указание браузеру в какой кодировке следует подгружать браузеру в какой кодировке следует подгружать страницу (Window-1251, KOI8-R, KOI8-U, ISO-8859-страницу (Window-1251, KOI8-R, KOI8-U, ISO-8859-5, UTF-8, UTF-16 и д.р.)5, UTF-8, UTF-16 и д.р.)Некоторые хостинги (восновном иностранные) Некоторые хостинги (восновном иностранные) автоматически перекодируют страници автоматически перекодируют страници получаемые сервером в определенную получаемые сервером в определенную кодировку. Поэтому уточняйте передпостановкой кодировку. Поэтому уточняйте передпостановкой этого тега у поставщиков хостинга этот вопрос.этого тега у поставщиков хостинга этот вопрос.
<meta name="description" content="?"><meta name="description" content="?"> Ключевые слова странички (для поисковых Ключевые слова странички (для поисковых машин)машин)
<title></title><title></title> Помещает название документа в Помещает название документа в оглавление программы просмотра страницоглавление программы просмотра страниц
Атрибуты тела документаАтрибуты тела документа
<body bgcolor="?"><body bgcolor="?"> Устанавливает цвет фона Устанавливает цвет фона документа, используя значение цвета в виде документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.RRGGBB - пример: FF0000 - красный цвет.
<body text="?"><body text="?"> Устанавливает цвет текста Устанавливает цвет текста документа, используя значение цвета в виде документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет. RRGGBB - пример: 000000 - черный цвет.
<body link="?"><body link="?"> Устанавливает цвет Устанавливает цвет гиперссылок, используя значение цвета в гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.виде RRGGBB - пример: 00FF00 - зеленый цвет.
<body vlink="?"><body vlink="?"> Устанавливает цвет Устанавливает цвет гиперссылок, на которых вы уже побывали, гиперссылок, на которых вы уже побывали, используя значение цвета в виде RRGGBB - используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.пример: 333333 - серый цвет.
<body alink="?"><body alink="?"> Устанавливает цвет Устанавливает цвет гиперссылок при нажатии.гиперссылок при нажатии.
Теги форматирования текстаТеги форматирования текста
<pre></pre><pre></pre> Обрамляет предварительно Обрамляет предварительно отформатированный текст. отформатированный текст.
<h1></h1><h1></h1> Создает самый большой заголовок Создает самый большой заголовок <h2></h2>, <h3>, </h3><h4></h4>, <h5>, <h2></h2>, <h3>, </h3><h4></h4>, <h5>,
</h5></h5> Создает заголовоки промежуточных Создает заголовоки промежуточных размеров размеров
<h6></h6><h6></h6> Создает самый маленький Создает самый маленький заголовок заголовок
<b></b><b></b> Создает жирый текст Создает жирый текст (нерекомендованный) (нерекомендованный)
<i></i><i></i> Создает наклонный текст Создает наклонный текст (нерекомендованный) (нерекомендованный)
<tt></tt><tt></tt> Создает текст - имитирующий стиль Создает текст - имитирующий стиль печатной машинки. (нерекомендованный)печатной машинки. (нерекомендованный)
<kbd></kbd><kbd></kbd> Создает текст - имитирующий Создает текст - имитирующий стиль печатной машинки. (рекомендованный) стиль печатной машинки. (рекомендованный)
<var></var><var></var> Название переменных Название переменных отображается курсивом отображается курсивом
<cite></cite><cite></cite> Выделение цитат курсивом Выделение цитат курсивом
<address></address><address></address> Отображается Отображается курсивом в виде отдельного абзацакурсивом в виде отдельного абзаца
<em></em><em></em> Наклонный текст Наклонный текст (воспринимается посковыми роботами (воспринимается посковыми роботами как выделение) как выделение)
<strong></strong><strong></strong> Жирный текст Жирный текст (воспринимается посковыми роботами, (воспринимается посковыми роботами, как особо сильное выделение) как особо сильное выделение)
<font size="?"></font><font size="?"></font> Устанавливает Устанавливает размер текста в пределах от 1 до 7. размер текста в пределах от 1 до 7.
<font color="?"></font><font color="?"></font> Устанавливает Устанавливает цвет текста, используя значение цвета цвет текста, используя значение цвета в виде RRGGBB в виде RRGGBB
ГиперссылкиГиперссылки
<a href="URL"></a><a href="URL"></a> Создает гиперссылку на Создает гиперссылку на другие сайты. другие сайты.
<atarget="?"></a><atarget="?"></a> Указывает в каком окне Указывает в каком окне открывать открывать гиперссылки.Пгиперссылки.ПараметрыЗначениеараметрыЗначение__BlankBlankЗагрузЗагрузка содержимого страницы, заданной ссылкой, в ка содержимого страницы, заданной ссылкой, в новое пустое окно_новое пустое окно_ParentParentЗагрузка содержимого Загрузка содержимого страницы, заданной ссылкой, в окно, которое страницы, заданной ссылкой, в окно, которое содержит ссылку_содержит ссылку_SelfSelfЗагрузка содержимого Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя страницы, заданной ссылкой, в окно, игнорируя используемые фреймыиспользуемые фреймы_Top_TopЗагрузка Загрузка содержимого страницы, заданной ссылкой, в содержимого страницы, заданной ссылкой, в окно, игнорируя использованные фреймы окно, игнорируя использованные фреймы При использовании фреймов и вложенных При использовании фреймов и вложенных фреймов значением может выступать имя фреймов значением может выступать имя фрейма или вложенной сетки фреймов, приэтом фрейма или вложенной сетки фреймов, приэтом страница откроется в указаной части окна.страница откроется в указаной части окна.
<a href="NAME"></a><a href="NAME"></a> Создает гиперссылку на Создает гиперссылку на другую страницу. другую страницу.
<a href="mailto:EMAIL"></a><a href="mailto:EMAIL"></a> Создает гиперссылку вызова Создает гиперссылку вызова почтовой программы для написания почтовой программы для написания письма по указанному адресу. письма по указанному адресу.
<a href="#name"></a><a href="#name"></a> Создает Создает гиперссылку на метку текущей гиперссылку на метку текущей страници. страници.
<a name="name"></a><a name="name"></a> Отмечает Отмечает часть текста, как метку для часть текста, как метку для гипперссылок на странице. гипперссылок на странице.
<a href="NAME#name"></a><a href="NAME#name"></a> Создает гиперссылку на метку Создает гиперссылку на метку другой страници.другой страници.
ФорматированиеФорматирование
<p></p><p></p> Создает новый параграф Создает новый параграф <p align="?"></p><p align="?"></p> Выравнивает Выравнивает
параграф относительно одной из параграф относительно одной из сторон документа, значения: left, right, сторон документа, значения: left, right, justify или center justify или center
<nobr><nobr> Запрещает перевод строки. Запрещает перевод строки. <wbr><wbr> Указывает где разбивать строку Указывает где разбивать строку
для переноса при необходимости. для переноса при необходимости. <br><br> Вставляет перевод строки. Вставляет перевод строки. <blockquote></blockquote><blockquote></blockquote> Создает Создает
отступы с обеих сторон текста. отступы с обеих сторон текста. <dl></dl><dl></dl> Создает список определений. Создает список определений.
<dt><dt> Определяет каждый из терминов Определяет каждый из терминов спискасписка
<dd><dd> Описывает каждое определение Описывает каждое определение <ol></ol><ol></ol> Создает нумерованный список Создает нумерованный список <li><li> Определяет каждый элемент списка Определяет каждый элемент списка
и присваивает номер и присваивает номер <ul></ul><ul></ul> Создает ненумерованный Создает ненумерованный
списоксписок <li><li> Предваряет каждый элемент списка Предваряет каждый элемент списка
и добавляет кружок или квадратик.и добавляет кружок или квадратик. <div align="?"></div><div align="?"></div> Важный тег Важный тег
используемый для форматирования используемый для форматирования больших блоков текста HTML документа, больших блоков текста HTML документа, также используется в таблицах стилейтакже используется в таблицах стилей
Графические элементыГрафические элементы
<img src="name"><img src="name"> Добавляет Добавляет изображение в HTML документ изображение в HTML документ
<img src="name" align="?"><img src="name" align="?"> Выравнивает изображение к одной из Выравнивает изображение к одной из сторон документа, принимает значения: сторон документа, принимает значения: left, right, center; bottom, top, middleleft, right, center; bottom, top, middle
<img src="name" border="?"><img src="name" border="?"> Устанавливает толщину рамки вокруг Устанавливает толщину рамки вокруг изображения изображения
<img src="name" vspase="?"><img src="name" vspase="?"> Устанавливает поля сверху и снизу Устанавливает поля сверху и снизу
<img src="name" hspase="?"><img src="name" hspase="?"> Устанавливает поля сбоков Устанавливает поля сбоков
<img src="name" alt="?"><img src="name" alt="?"> Всплывающая Всплывающая подсказка при наведении на имеджподсказка при наведении на имедж
<hr><hr> Добавляет в HTML документ Добавляет в HTML документ горизонтальную линию. горизонтальную линию.
<hr size="?"><hr size="?"> Устанавливает высоту Устанавливает высоту (толщину) линии(толщину) линии
<hr width="?"><hr width="?"> Устанавливает ширину Устанавливает ширину линии, можно указать ширину в линии, можно указать ширину в пикселах или процентах. пикселах или процентах.
<hr noshade><hr noshade> Создает линию без тени. Создает линию без тени. <hr color="?"><hr color="?"> Задает линии Задает линии
определенный цвет. Значение RRGGBB.определенный цвет. Значение RRGGBB.
ТаблицыТаблицы
<table></table><table></table> Создает таблицу. Создает таблицу. <tr></tr><tr></tr> Определяет строку в Определяет строку в
таблице. таблице. <td></td><td></td> Определяет отдельную Определяет отдельную
ячейку в таблице. ячейку в таблице. <th></th><th></th> Определяет заголовок Определяет заголовок
таблицы (нормальная ячейка с таблицы (нормальная ячейка с отцентрованным жирным текстом)отцентрованным жирным текстом)
<caption></caption><caption></caption> Определяет Определяет подпись таблицы подпись таблицы
Атрибуты таблицыАтрибуты таблицы
<table border="#"><table border="#"> Задает толщину рамки Задает толщину рамки таблицы. таблицы.
<table cellspacing="#"><table cellspacing="#"> Задает расстояние между Задает расстояние между ячейками таблицы.ячейками таблицы.
<table cellpadding="#"><table cellpadding="#"> Задает расстояние между Задает расстояние между содержимым ячейки и ее рамкой. содержимым ячейки и ее рамкой.
<table width="#"><table width="#"> Устанавливает ширину таблицы Устанавливает ширину таблицы в пикселах или процентах от ширины документа.в пикселах или процентах от ширины документа.
<table height="#"><table height="#"> Устанавливает высоту таблицы Устанавливает высоту таблицы в пикселах или процентах от высоты документа.в пикселах или процентах от высоты документа.
<tr align="?"><tr align="?"> илиили <td align="?"> <td align="?"> Устанавливает Устанавливает выравнивание ячеек в таблице, принимает выравнивание ячеек в таблице, принимает значения: left, center, или right.значения: left, center, или right.
<tr valign="?"> <tr valign="?"> илиили <td valign="?"> <td valign="?"> Устанавливает Устанавливает вертикальное выравнивание для ячеек таблицы, вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.принимает значения : top, middle, или bottom.
<td colspan="#"><td colspan="#"> Указывает кол-во столбцев, Указывает кол-во столбцев, которое объединено в одной ячейке. (по которое объединено в одной ячейке. (по умолчанию=1) умолчанию=1)
<td rowspan="#"><td rowspan="#"> Указывает кол-во строк, Указывает кол-во строк, которое объединено в одной ячейке. (по которое объединено в одной ячейке. (по умолчанию=1) умолчанию=1)
<td nowrap><td nowrap> Не позволяет программе Не позволяет программе просмотра делать перевод строки в ячейке просмотра делать перевод строки в ячейке таблицы.таблицы.
<td width="#"><td width="#"> Устанавливает ширину ячейки Устанавливает ширину ячейки в пикселах или процентах от ширины таблицы в пикселах или процентах от ширины таблицы (ячейки одного столбца не могут иметь разную (ячейки одного столбца не могут иметь разную ширину). ширину).
<td height="#"><td height="#"> Устанавливает высоту ячейки Устанавливает высоту ячейки в пикселах или процентах от высоты таблици в пикселах или процентах от высоты таблици (ячейки одной строки не могут иметь разную (ячейки одной строки не могут иметь разную высоту). высоту).
<frameset></frameset><frameset></frameset> Предваряет тег <body> Предваряет тег <body> в документе, содержащем фреймыв документе, содержащем фреймы
<frameset rows="value,value"><frameset rows="value,value"> Определяет Определяет строки в таблице фреймов, высота которых строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов. соотношении к высоте таблицы фреймов.
<frameset cols="value,value"><frameset cols="value,value"> Определяет Определяет столбцы в таблице фреймов, ширина которых столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймовсоотношении к ширине таблицы фреймов
. <frame>. <frame> Определяет единичный фрейм или Определяет единичный фрейм или область в таблице фреймов. область в таблице фреймов.
<noframes></noframes><noframes></noframes> Определяет, что будет Определяет, что будет показано в окне браузера, если он не показано в окне браузера, если он не поддерживает фреймы.поддерживает фреймы.
Атрибуты фреймовАтрибуты фреймов
<frame src="URL"><frame src="URL"> Определяет какой из HTML Определяет какой из HTML документов будет показан во фрейме. документов будет показан во фрейме.
<frame name="name"><frame name="name"> Указывает Имя фрейма Указывает Имя фрейма или области, что позволяет перенаправлять или области, что позволяет перенаправлять информацию в этот фрейм или область из других информацию в этот фрейм или область из других фреймов. фреймов.
<frame marginwidth="#"><frame marginwidth="#"> Определяет величину Определяет величину отступов по левому и правому краям в нутрь отступов по левому и правому краям в нутрь фрейма; должно быть равно или больше 1.фрейма; должно быть равно или больше 1.
<frame marginheight="#"><frame marginheight="#"> Определяет величину Определяет величину отступов по верхнему и нижнему краям в нутрь отступов по верхнему и нижнему краям в нутрь фрейма; должно быть равно или больше 1.фрейма; должно быть равно или больше 1.
<frame scrolling=VALUE><frame scrolling=VALUE> Указывает будет-ли Указывает будет-ли выводится линейка прокрутки во фрейме; выводится линейка прокрутки во фрейме; значение value может быть "yes," "no," или "auto". значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов Значение по умолчанию для обычных документов - auto. - auto.
<frame noresize><frame noresize> Препятствует изменению Препятствует изменению размеров фрейма пользователем.размеров фрейма пользователем.
Ифрейм и его атрибутыИфрейм и его атрибуты
<iframe></iframe><iframe></iframe> Создает контейнер, Создает контейнер, который может содержать любые который может содержать любые элементы. Остальные элементы элементы. Остальные элементы обтекают этот контейнер. обтекают этот контейнер.
<iframe src="URL"><iframe src="URL"> Определяет какой из Определяет какой из HTML документов будет показан в HTML документов будет показан в ифрейме. ифрейме.
<iframe name="name"><iframe name="name"> Указывает Имя Указывает Имя ифрейма, что позволяет перенаправлять ифрейма, что позволяет перенаправлять информацию в этот ифрейм . информацию в этот ифрейм .
<iframe vspase="?"><iframe vspase="?"> Устанавливает поля Устанавливает поля сверху и снизу с наружи от ифрейма сверху и снизу с наружи от ифрейма
<iframe hspase="?"><iframe hspase="?"> Устанавливает поля Устанавливает поля сбоков с наружи от ифрейма сбоков с наружи от ифрейма
<iframe marginwidth="#"><iframe marginwidth="#"> Определяет величину Определяет величину отступов по левому и правому краям в нутрь отступов по левому и правому краям в нутрь ифрейма; должно быть равно или больше 1. ифрейма; должно быть равно или больше 1.
<iframe marginheight="#"><iframe marginheight="#"> Определяет величину Определяет величину отступов по верхнему и нижнему краям в нутрь отступов по верхнему и нижнему краям в нутрь ифрейма; должно быть равно или больше 1. ифрейма; должно быть равно или больше 1.
<iframe scrolling=VALUE><iframe scrolling=VALUE> Указывает будет-ли Указывает будет-ли выводится линейка прокрутки в ифрейме; выводится линейка прокрутки в ифрейме; значение value может быть "yes," "no," или "auto". значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - Значение по умолчанию для обычных документов - auto. auto.
<iframe width="#"><iframe width="#"> Определяет ширину ифрейма Определяет ширину ифрейма <iframe height="#"><iframe height="#"> Определяет высоту ифрейма; Определяет высоту ифрейма; <iframe title="?"><iframe title="?"> Текст всплывающей подсказки Текст всплывающей подсказки
ФормыФормы
<form></form><form></form> СоздаетСоздает формыформы <select multiple name="NAME" size="?"></select><select multiple name="NAME" size="?"></select>
СоздаетСоздает скролируемоескролируемое менюменю. . Size устанавливает Size устанавливает кол-во пунктов меню, которое будет показано на кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при экране, остальные будут доступны при использовании прокрутки. <option> Указывает использовании прокрутки. <option> Указывает каждый отдельный элемент меню каждый отдельный элемент меню
<select name="NAME"></select><select name="NAME"></select> СоздаетСоздает ниспадающеениспадающее менюменю
<option><option> Указывает каждый отдельный элемент Указывает каждый отдельный элемент менюменю
<textarea name="NAME" cols=40 <textarea name="NAME" cols=40 rows=8></textarea>rows=8></textarea> СоздаетСоздает окноокно длядля вводаввода текстатекста. Columns . Columns указываетуказывает ширинуширину окнаокна; rows ; rows указываетуказывает егоего высотувысоту. .
<input type="checkbox" name="NAME"><input type="checkbox" name="NAME"> СоздаетСоздает checkbox. checkbox.
<input type="radio" name="NAME" <input type="radio" name="NAME" value="x">value="x"> СоздаетСоздает radio radio кнопкукнопку. .
<input type=text name="foo" size=20><input type=text name="foo" size=20> Создает строку для ввода текста. Создает строку для ввода текста. Параметром Size указывается длина в Параметром Size указывается длина в символах. символах.
<input type="submit" value="NAME"><input type="submit" value="NAME"> Создает кнопку "Отправить" Создает кнопку "Отправить"
<input type="image" border="0" <input type="image" border="0" name="NAME" src="name.gif">name="NAME" src="name.gif"> Создает Создает кнопку "Отправить" - для этого кнопку "Отправить" - для этого используется изображениеиспользуется изображение
<input type="reset"><input type="reset"> Создает кнопку Создает кнопку "Очистить""Очистить"