Web-технологи Лекция2
реклама
• <тег атрибут1="значение" атрибут2="значение">
• <тег атрибут1="значение" атрибут2="значение">...</тег>
1. правильная разметка
2. неправильная разметка
•
•
•
•
•
•
•
•
Атрибуты должны находится в “ ”
Теги не чувствительны к регистру
Внутри тега допустимы переносы строк
Неизвестные теги и атрибуты игнорируются
Конкретная иерархия вложенности тегов
Последовательность не имеет значения
Парные теги должны быть закрыты
Порядок атрибутов не имеет значения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>Заголовок документа</title>
</head>
<body>
<p> Текст текст текст текст</p>
</body>
</html>
• Теги верхнего уровня;
• Теги заголовка документа;
• Блочные элементы;
• Встроенные элементы;
• Универсальные элементы;
• Cписки;
• Таблицы;
<html>
<head> ... </head>
<body> ... </body>
</html>
• <base target=“” href=“”/>
– target = “_blank|_self|_parent|_top”
• <basefont color=“” face=“” size=“”/>
• <bgsound/>
<link/>
Атрибуты:
charset = “кодировка связываемого документа”
href = “путь к связываемому файлу”
media = “устройство, для которого следует применять
стилевое оформление.”
rel = отношения между документом и файлом
type = MIME-тип данных подключаемого файла.
Пример:
<link rel="stylesheet" type="text/css" href=“ind.css“/>
<script></script>
Атрибуты:
language = “язык программирования”
src = “адрес скрипта из внешнего файла”
type = “тип содержимого”.
Пример:
<script type="text/javascript“ src=“ind.js”><script>
<style></style>
Атрибуты:
media = “устройство для оформления”
type = “MIME-тип содержимого”.
Пример:
<style type="text/css“>…CSS…</style>
• <title></title>
<meta/>
Атрибуты:
content - устанавливает значение параметра,
заданного с помощью name или http-equiv.
http-equiv - предназначен для
конвертирования метатега в заголовок
HTTP.
name - имя метатега, также косвенно
устанавливает его предназначение.
Список мета тегов группы NAME:
• Мета тег Author
• Мета тег Copyright
• Мета тег Description
• Мета тег Document-state
• Мета тег Generator
• Мета тег Keywords
• Мета тeг Resource-type
• Мета тeг Revisit
• Мeтa тeг Robots
• Мeтa тeг Subject
• Мeтa тeг URL
Список мета тегов группы HTTP-EQUIV:
• Мeтa тeг Content-Language
• Мeтa тeг Content-Script-Type
• Мeтa тeг Content-Style-Type
• Мeтa тeг Content-Type
• Мeтa тeг Expires
• Мeтa тeг PICS-Label
• Мeтa тeг Pragma
• Мeтa тeг Refresh
• Мeтa тeг Set-Cookie
• Мeтa тeг Window-target
•
•
•
•
•
<meta name=“description" content= ". . .“/>
<meta name=“document-state" content =“dynamic“/>
<meta name=“robots” content=“index, follow“/>
<meta http-equiv="Content-Language" content="ru“/>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8“/>
• <meta http-equiv="Content-Script-Type"
content="text/javascript">
• <meta http-equiv ="Expires" content="Wed, 26 Feb 1999
08:21:57 GMT">
• <div></div>
Тег <div> относится к универсальным блочным
контейнерам и применяется в тех случаях, где нужны
блочные элементы без дополнительных свойств.
• <h1>,...,<h6> </h1>,...,</h6>
Заголовки разного уровня, которые показывают
относительную важность секции, расположенной после
заголовка.
• <hr/>
• <blockquote></blockquote>
Предназначен для выделения длинных цитат внутри
документа.
• <p></p>
Определяет параграф (абзац) текста.
• <pre></pre>
Задает блок предварительно форматированного текста.
Следующие теги не должны размещаться внутри контейнера
<pre>: <big>, <img>, <small>, <sub> и <sup>.
• <a></a>
Тег <a> устанавливает ссылку или якорь.
<a href=“#second”>Якорь</a>
• <b></b> / <strong></strong>
Определяет жирное начертание шрифта.
• <big></big> / <small></small>
Тег <big> увеличивает размер шрифта на единицу по
сравнению с обычным текстом.
• <br/>
• <em></em>
Тег <em> предназначен для акцентирования текста.
Браузеры отображают такой текст курсивным
начертанием.
• <i></i>
Устанавливает курсивное начертание шрифта.
• <img/>
Тег <img> предназначен для отображения на веб-странице
изображений в графическом формате GIF, JPEG или PNG.
• <span></span>
Универсальный тег, предназначенный для определения
встроенного элемента внутри документа.
• <sub></sub> / <sup></sup>
Отображает шрифт в виде нижнего/верхнего индекса.
Текст при этом располагается ниже/выше базовой линии
остальных символов строки и уменьшенного размера —
H2O.
• Встроенные элементы не могут хранить блочные
элементы.
• Блочные элементы всегда начинаются с новой строки, а
встроенные таким способом не акцентируются.
• Блочные элементы занимают всю доступную ширину, а
ширина встроенных элементов равна их содержимому
плюс значения отступов, полей и границ.
• <ol></ol>
Тег <ol> устанавливает нумерованный список
• <ul></ul>
Устанавливает маркированный список.
• <li></li>
Тег <li> определяет отдельный элемент списка.
• <table>
Служит контейнером для элементов, определяющих
содержимое таблицы.
• <th>
Тег <th> предназначен для создания одной ячейки таблицы,
которая обозначается как заголовочная.
• <tr>
• Тег <tr> служит контейнером для создания строки таблицы.
• <td>
• Предназначен для создания одной ячейки таблицы.
<table width=“100%” height=“100%”>
<tr><td width=“20%”>id 1:1</td><td>id 1:2</td></tr>
<tr><td width=“20%”>id 2:1</td><td>id 2:2</td></tr>
<tr><td width=“20%”>id 3:1</td><td>id 3:2</td></tr>
…
</table>
• align
Задает выравнивание таблицы по краю окна
браузера.
• bgcolor
Устанавливает цвет фона таблицы.
• border
Устанавливает толщину границ в пикселях
• cellpadding
Определяет расстояние между границей ячейки и ее
содержимым.
• cellspacing
Задает расстояние между внешними границами ячеек.
Если установлен атрибут border, толщина границы
принимается в расчет и входит в общее значение.
• width
Задает ширину таблицы.
• height
Высота таблицы
• colspan
Устанавливает число ячеек, которые должны быть
объединены по горизонтали.
• rowspan
Устанавливает число ячеек, которые должны быть
объединены по вертикали.
• valign
Устанавливает вертикальное выравнивание содержимого
ячейки
• <frame></frame>
Тег <frame> определяет свойства отдельного фрейма, на
которые делится окно браузера.
• <frameset></frameset>
Тег <frameset> заменяет собой элемент <body> на вебстранице и формирует структуру фреймов.
• <iframe></iframe>
Тег <iframe> создает плавающий фрейм, который
находится внутри обычного документа
• <form></form>
Тег <form> устанавливает форму на веб-странице.
Формы должны быть независимы друг от друга.
Основные атрибуты:
1. method
2. action
3. name
• <input></input>
type=“radio” – переключатели
type=“checkbox” - флажки
type=“text” – текстовое поле
type=“password” – замаскированное текстовое поле
type=“file” – загрузка файлов на сервер
type=“button” – кнопка
type=“reset” – очистка данных формы
type=“hidden” – скрытое текстовое поле
type=“submit” – кнопка отправки данных
• <select></select>
Раскрывающийся список.
multiple – многовариантный список.
• <option value=“…”></option>
Элемент списка.
• <textarea></textarea>
Текстовый блок.
<form action="handler.php“ method=“POST”>
<input type="radio" name="answer" value="a1“/>V1<br/>
<input type="radio" name="answer” value="a2“/>V2<br/>
<input type="radio" name="answer" value="a3“/>V3<br/>
<input type=“text” name=“person” value=“”/>
<input type=“hidden” name=“mod” value=“1”/>
<textarea name=“wish”></textarea>
<input type="submit“ value=“Отправить”/>
</form>
• accesskey
Позволяет получить доступ к элементу с помощью
заданного сочетания клавиш.
• class
Определяет имя класса, которое позволяет связать тег со
стилевым оформлением.
• id
Указывает имя стилевого идентификатора.
• lang
Браузер использует значение параметра для правильного
отображения некоторых национальных символов.
• style
Применяется для определения стиля элемента с помощью
правил CSS.
• tabindex
Устанавливает порядок получения фокуса при переходе
между элементами с помощью клавиши Tab.
• title
Описывает содержимое элемента в виде всплывающей
подсказки.
• onblur
Потеря фокуса.
• onchange
Изменение значения элемента формы.
• onclick
Щелчок левой кнопкой мыши на элементе.
• ondblclick
Двойной щелчок левой кнопкой мыши на элементе.
• onfocus
Получение фокуса
• onkeydown
Клавиша нажата, но не отпущена.
• onkeypress
Клавиша нажата и отпущена.
• onkeyup
Клавиша отпущена.
• onload
Документ загружен.
• onmousedown
Нажата левая кнопка мыши.
• onmousemove
Перемещение курсора мыши.
• onmouseout
Курсор покидает элемент.
• onmouseover
Курсор наводится на элемент.
• onmouseup
Левая кнопка мыши отпущена.
• onreset
Форма очищена.
• onselect
Выделен текст в поле формы.
• onsubmit
Форма отправлена
• onunload
Закрытие окна.
• Любое количество идущих подряд пробелов
считается за один
• Нет расстановки переносов в тексте
• Текст занимает ширину родительского
элемента
• Все элементы должны быть закрыты.
• Булевы атрибуты записываются в развёрнутой форме.
• Имена тегов и атрибутов должны быть записаны
строчными буквами.
• XHTML гораздо строже относится к ошибкам в коде; <
и & везде, даже в URL, должны замещаться &lt; и
&amp; соответственно.
• Кодировкой по умолчанию является UTF-8 (в отличие
от HTML, где кодировкой по умолчанию является ISO
8859-1).
• Стилем или CSS (Cascading Style Sheets, каскадные
таблицы стилей) называется набор параметров
форматирования, который применяется к
элементам документа, чтобы изменить их
внешний вид.
Типы стилей:
• Стиль браузера
• Стиль автора
• Стиль пользователя
• Разграничение кода и оформления
• Расширенные по сравнению с HTML способы
оформления элементов
• Ускорение загрузки сайта (кеширование CSS)
• Единое стилевое оформление множества
документов
• <link>
• <style>
• @import url("style/header.css");
@import "/style/main.css" screen;
/* Стиль для вывода результата на монитор */
@import "/style/smart.css" print, handheld;
/* Стиль для печати и смартфона */
@media тип носителя 1
{
Описание стиля для типа носителя 1
}
@media тип носителя 2
{
Описание стиля для типа носителя 2
}
• all - Все типы.
• aural - Речевые синтезаторы и браузеры
• braille - Устройства, основанные на системе Брайля,
которые предназначены для слепых людей.
• handheld - Наладонные компьютеры и аналогичные
им аппараты.
• print - Печатающие устройства вроде принтера.
• projection - Проектор.
• screen - Экран монитора.
• Tv - Телевизор.
Селектор
{
свойство1: значение;
свойство2: значение;
}
• Для селектора допускается добавлять каждое
стилевое свойство и его значение по отдельности
• У каждого свойства может быть только
соответствующее его функции значение.
• Приоритетность
•
•
•
•
•
•
•
•
•
em - Размер шрифта текущего элемента
ex - Высота символа x
px - Пиксел
% - Процент
in - Дюйм (1 дюйм равен 2,54 см)
сm - Сантиметр
mm - Миллиметр
pt - Пункт (1 пункт равен 1/72 дюйма)
pc - Пика (1 пика равна 12 пунктам)
• RGB(249, 201, 16);
• По названию
• 16ричное значение
BODY { background-color: #3366CC; }
H1 { background-color: RGB(249, 201, 16); }
P{
background-color: gray;
color: white;
}
• body { background: url('http://site.ru/imgs/1.png') }
• div {
background: url(images/warning.png) no-repeat;
padding-left: 140px;
}
•
•
•
•
Теги
Классы
Идентификаторы
Контекстные селекторы
<Тег1> <Тег2> ... </Тег2> </Тег1>
• Соседние селекторы
Селектор 1 + Селектор 2 { Описание правил стиля }
• Дочерние селекторы
Селектор 1 > Селектор 2 { Описание правил стиля }
• Селектор атрибута
Селектор[атрибут] { Описание правил стиля }
A[title] { color: red; }
• Атрибут со значением
• Атрибут начинается со значения [ ^= ]
• Атрибут заканчивается значением [ $= ]
• Содержит указанный текст [ *= ]
• Одно из нескольких значений [ ~= ]
• Дефис в значении атрибута [ |= ]
• Универсальный селектор
