Главная страница   /   2.6. Структура документа (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

2.6. Структура документа

В любом HTML документе есть ключевые элементы, которые определяют его базовую структуру. Этими элементами являются DOCTYPE, html, head, и bodyЛистинг 2-6 демонстрирует связь между этими элементами (без контекста).

Листинг 2-6: Базовая структура HTML документа
<!DOCTYPE html>
<html>
<head>
...head content...
</head>
<body>
...body content...
</body>
</html>

Каждый из этих элементов играет в документе HTML свою конкретную роль. Первый элемент, DOCTYPE, говорит браузеру, что это документ HTML, а если конкретнее, то документ HTML5. Более ранние версии HTML требовали дополнительной информации. Например, вот элемент DOCTYPE для документа HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Элемент html определяет границы содержания HTML документа. Этот элемент всегда содержит еще два ключевых структурных элемента -- head и body. Как я говорил в начале этой главы, я не собираюсь углубляться в особенности элементов HTML. Их великое множество и полное описание каждого из них для HTML5 заняло у меня более тысячи страниц моей книги по HTML5. Поэтому я кратко опишу элементы, которые я использую, чтобы вы четко понимали работу этого HTML документа. В таблице 2-1 вы видите сводку использованных в примере элементов, некоторые из них я немного подробнее опишу далее в этой главе.

Таблица 2-1: Элементы HTML, используемые в примере
ЭлементОписание
DOCTYPEОпределяет тип содержания документа
bodyОпределяет область HTML документа, где содержится контекст данного документа
buttonОбозначает кнопку; часто используется для отправки form на сервер
divКлассовый элемент; часто используется для структурирования документа и придания ему хорошего вида
formОбозначает HTML форму, которая позволяет вам забирать данные у пользователя и отправлять их серверу для обработки
h1Обозначает заголовок
headОбозначает область документа, где расположены метаданные
htmlОпределяет область документа, где содержится HTML (как правило, это весь документ)
imgОбозначает рисунок
inputОбозначает поле ввода, предназначенное для сбора отдельных данных от пользователя, обычно является частью HTML формы
scriptОбозначает скрипт, обычно JavaScript, который должен быть выполнен в документе
styleОбозначает область с настройками CSS (каскадной таблицы стилей); см. главу 3
titleОбозначает название документа; используется браузером для отображения названия страницы или во вкладке, отображающей содержимое документа

Элементы Metadata (метаданные)

Элемент head содержит метаданные документа, другими словами, один или более элементов, которые описывают или взаимодействуют с содержимым документа, но напрямую не отображены в браузере. Элемент head в примере документа содержит три элемента метаданных: title, script, и style. Элемент title является одним из базовых элементов. Содержание этого элемента используется браузером, чтобы дать название окну или вкладке, и все документы HTML должны иметь элемент title. Другие же два элемента важны для данной книги, как я поясню в следующих разделах.

Элемент script

Элемент script позволяет вам включить JavaScript в ваш код. Это тот элемент, с которым вы очень плотно будете работать, как только я начну досконально разбирать jQuery. В нашем примере есть один скриптовый элемент, как показано в листинге 2-7.

Листинг 2-7: Пример элемента script
<script src="jquery-1.7.js" type="text/javascript"></script>

Если для скриптового элемента вы определяете атрибут src, вы говорите браузеру, что хотите загрузить JavaScript, содержащийся в другом файле. В данном случае это основная библиотека jQuery, которую браузер найдет в файле jquery-1.7.js. Отдельный HTML документ может содержать более одного элемента script, а также, если захотите, вы можете включить JavaScript код между открывающим и закрывающим тегами прямо в теле документа, как показано в листинге 2-8.

Листинг 2-8: Использование элемента script для определения встроенного JavaScript кода
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#mainheader").css("color", "red");
});
</script>
</head>
<body>
<h1 id="mainheader" class="header">Welcome to Jacqui"s Flower Shop</h1>
<h2 class="header info">We are open 10am-6pm, 7 days a week</h2>
<h3 class="info">(closed on national holidays)</h3>
</body>
</html>

В этом примере два элемента script. Первый добавляет в документ библиотеку jQuery, а второй является простым скриптом, который использует некоторый базовый функционал jQuery. На данный момент не обращайте внимания на то, что делает второй скрипт. Более подробное изучение jQuery мы начнем с пятой главы. В HTML документе элемент script может быть включен в элементы head или body. В этой книге я, как правило, добавляю скрипты только в элемент head, но это лишь мои личные предпочтения.

Заметка

Порядок расположения элементовscript является важным моментом. Сначала вам необходимо импортировать библиотеку jQuery, а потом уже ее использовать.

Элемент style

Использование элемента style – одна из возможностей представления в вашем документе свойств CSS (каскадного списка стилей). Вкратце, вы можете использовать CSS для того, чтобы управлять внешним видом вашего документа, как он предстанет перед конечным пользователем в браузере. В листинге 2-9 показан элемент style из нашего примера и его содержание.

Листинг 2-9: Использование элемента style
<style>
h1
{
width: 700px;
border: thick double black;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: x-large;
padding: .5em;
color: darkgreen;
background-image: url("border.png");
background-size: contain;
margin-top: 0;
}
.dtable
{
display: table;
}
.drow
{
display: table-row;
}
.dcell
{
display: table-cell;
padding: 10px;
}
.dcell > *
{
vertical-align: middle;
}
input
{
width: 2em;
text-align: right;
border: thin solid black;
padding: 2px;
}
label
{
width: 5em;
padding-left: .5em;
display: inline-block;
}
#buttonDiv
{
text-align: center;
}
#oblock
{
display: block;
margin-left: auto;
margin-right: auto;
width: 700px;
}
</style>

Браузер поддерживает целый комплекс свойств, значения которых используются для того, чтобы придать определенный внешний вид каждому элементу. Элемент style позволяет выбирать элемент и менять значения одного или нескольких его свойств. Более детально мы поговорим об этом в главе 3.

Элемент style, также как и элемент script, могут находиться в элементах head и body. Но в этой книге вы увидите, что я размещаю их только в элементе head (как и в нашем примере). Просто тут дело в моем личном предпочтении: в моей работе мне нравится отделять стили от контекста.

Контекстные элементы

В HTML документе элемент body содержит контекст. Это те данные, которые браузер отобразит пользователю и с которыми работают элементы-метаданные, такие как script и style.

Семантико-презентационное деление

Одно из главных изменений в HTML5 довольно философское: разделение семантического значения элемента и его влияния на подачу содержания. Это довольно рациональная и разумная идея. Вы используете HTML для того, чтобы придать содержанию структуру и смысл, а потом управляете представлением и внешним видом материала, применяя к элементам стили CSS. Не для всех пользователей HTML документов их внешний вид имеет значение (поскольку такими HTML-"пользователями" могут быть автоматизированные программы), и если вы разделите семантику и внешний вид документа, то такой HTML будет гораздо быстрее обрабатываться и распознаваться.

У каждого HTML элемента есть свое конкретное значение. Например, элемент article используется для обозначения самостоятельного куска контекста, подходящего для синдикации, а элемент h1 используется для обозначения заголовка определенного раздела.

Эта идея является сердцем HTML. Элементы используются для того, чтобы обозначить, с каким типом содержания ведется работа. Люди очень хорошо определяют значимость того или иного контекста. Вы сразу же поймете, что заголовок этого раздела подчинен предыдущему заголовку, потому что он написан более мелким шрифтом (и потому что это парадигма, которая используется в большинстве научно-технической литературы). Компьютеры же этого совершенно не умеют делать, поэтому вы и применяете элементы, чтобы показать, как отдельные разделы соотносятся друг с другом. В листинге 2-10 показан пример документа, в котором элементы использованы для придания структуры и расположены по иерархии.

Листинг 2-10: Использование HTML элементов для создания структуры и определения содержания
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<article>
<header>
<hgroup>
<h1>New Delivery Service</h1>
<h2>Color and Beauty to Your Door</h2>
</hgroup>
</header>
<section>
We are pleased to announce that we are starting a home delivery service for
your flower needs. We will deliver within a 20 mile radius of the store
for free and $1/mile thereafter. All flowers are satisfaction-guaranteed and
we offer free phone-based consultation.
</section>
<section>
Our new service starts on <b>Wednesaday</b> and there is a $10 discount
for the first 50 customers.
</section>
<footer>
<nav>
More Information:
<a href="http://jacquisflowershop.com">Learn More About Fruit</a>
</nav>
</footer>
</article>
</body>
</html>

Четких правил, определяющих, когда и как будут использованы элементы section или article, нет, но я рекомендую вам использовать их последовательно в вашем документе. Такие элементы как section и article не дают браузеру информацию о том, как должен выглядеть контекст, который они содержат. Это и является сердцем семантико-презентационного разделения. В браузерах есть стили по умолчанию для большинства элементов HTML, которые определяют, как они будут отображаться без использования CSS. Но суть в том, что вы свободно можете использовать CSS, чтобы придать вашему документу тот внешний вид, который хотите. Это то, что вы можете сделать, используя элемент style, а также jQuery проделывает все это легко и просто в элементе script.

Некоторые элементы, которые существуют в HTML4, были созданы тогда, когда и в помине не было идеи разделять представление и содержание, и это ставит нас в затруднительную ситуацию. Отличным примером этого является элемент b. До HTML5 элемент b использовался для того, чтобы говорить браузеру, что контекст, расположенный между его открывающим и закрывающим тегами, нужно выделять жирным шрифтом. Поскольку в HTML5 мы не хотим, чтобы элементы были лишь для представления, нам предлагается новое определение. Вот оно:

Элемент b предназначен для выделения области текста, к которому нужно привлечь внимание, но который не является чем-то очень важными не имеет экспрессивного оттенка. В печатном варианте такой текст выделяется жирным шрифтом. Например, для отображения ключевых слов в выжимках документов или для обозначения наименований товаров в обзорах.

—HTML: The Markup Language, w3c.org

Эта очень витиеватая фраза обозначает, что элемент b говорит браузеру выделить содержание жирным шрифтом. Элемент b не имеет никакого семантического значения, исключительно и только презентационное. И это запутанное объяснение может сказать нам кое-что важное об HTML5: мы живем в период перемен. Мы хотели бы, чтобы было полное разделение между элементами и их представлением, но реальность такова, что мы также хотим поддерживать совместимость с бесчисленным числом тех документов, которые были созданы в более ранних версиях HTML, и поэтому мы вынуждены идти в этом вопросе на компромисс.

Формы и поля ввода

Одним из наиболее интересных элементов в теле нашего документа-примера является элемент form. Это механизм, благодаря которому вы можете забирать данные от пользователя и затем отправлять их серверу. Как вы увидите в главе 13, в jQuery есть отличные возможности для работы с формами, как напрямую через базовую библиотеку, так и через широко используемые плагины. Листинг 2-11 показывает элемент body нашего примера с его содержанием, элемент form выделен жирным шрифтом.

Листинг 2-11: Контекстные элементы в примере документа
<body>
<h1>Jacqui"s Flower Shop</h1>
<form method="post">
<div id="oblock">
<div class="dtable">
<div class="drow">
<div class="dcell">
<img src="astor.png" /><label for="astor">Astor:</label>
<input name="astor" value="0" required>
</div>
<div class="dcell">
<img src="daffodil.png" /><label for="daffodil">Daffodil:</label>
<input name="daffodil" value="0" required>
</div>
<div class="dcell">
<img src="rose.png" /><label for="rose">Rose:</label>
<input name="rose" value="0" required>
</div>
</div>
<div class="drow">
<div class="dcell">
<img src="peony.png" /><label for="peony">Peony:</label>
<input name="peony" value="0" required>
</div>
<div class="dcell">
<img src="primula.png" /><label for="primula">Primula:</label>
<input name="primula" value="0" required>
</div>
<div class="dcell">
<img src="snowdrop.png" /><label for="snowdrop">Snowdrop:</label>
<input name="snowdrop" value="0" required>
</div>
</div>
</div>
</div>
<div id="buttonDiv"><button type="submit">Place Order</button></div>
</form>
</body>

Если в документе есть элемент form, элемент input находится обычно где-то неподалеку. Это тот элемент, который вы используете, чтобы получить конкретный кусок информации от пользователя. Листинг 2-12 показывает пример элемента input в документе.

Листинг 2-12: Использование элемента input
<input name="snowdrop" value="0" required>

Элемент input забирает от пользователя значение элемента данных с названием snowdrop, начальное значение которого равно нулю. Элемент required говорит браузеру о том, что у пользователя не должно быть возможности отправить форму на сервер, пока эти данные не будут внесены. Это новая особенность HTML5, которая называется валидацией формы. Но честно говоря, вы можете добиться гораздо лучшей валидации, используя jQuery, как я покажу в главе 13.

С формами тесно связан и элемент button, который часто используется для отправки формы на сервер (также может использоваться для возвращения формы к ее исходному виду). В листинге 2-13 показан элемент button из нашего примера.

Листинг 2-13: Использование элемента button
<button type="submit">Place Order</button>

Значение submit атрибута type говорит браузеру о том, что я хочу, чтобы форма была отправлена при нажатии кнопки. Содержание элемента button является надписью на кнопке в браузере, как вы можете увидеть на рисунке 2-3.

Рисунок 2-3: Содержание элемента button
 

Структурные элементы

Вы, наверное, заметили, что в нашем примере имеется довольно много элементов div в теле example документа. Это элемент, который не имеет конкретного семантического значения, он часто используется для верстки документов. В случае с нашим примером, я использовал элемент div для создания табличной верстки. Поэтому те элементы, которые входят в элемент div, представлены пользователям в виде таблицы. Стили элемента div определены CSS, которая входит в состав элемента style. Я буду использовать CSS на протяжении всей книги, а краткое описание CSS я дам в главе 3.

Элементы, связанные с внешними источниками

Некоторые элементы позволяют связывать ваш документ со внешними источниками. Великолепным примером этого является элемент img, который используется для внесения в документ рисунков. В нашем примере я использовал элемент img, чтобы отобразить рисунки с различными цветами, выставленными на продажу. Это показано в листинге 2-14.

Листинг 2-14: Использование элемента img для обращения ко внешнему источнику (рисунку)
<img src="snowdrop.png"/>

Элемент src используется для обозначения нужного рисунка. Я использовал рисунок snowdrop.png. Это пример относительной ссылки. Это обозначает, что браузер будет использовать путь текущего документа для работы со ссылкой на рисунок, который мне нужен.

Альтернативой относительной ссылки является абсолютная ссылка (также известная как полный URL). Это ссылка, в которой определен полный путь к ресурсу, как показано на рисунке 2-4. (На рисунке вы увидите номер порта, но если этот компонент упущен, браузер будет использовать порт по умолчанию для определенного протокола. Для http протокола это порт 80.)

Рисунок 2-4: Полная структура URL

Это довольно утомительно везде в документе использовать абсолютный ссылки, поэтому относительные ссылки так широко используются. Когда я определял значение snowdrop.png для атрибута src элемента img, я говорил браузеру, что он может найти нужный рисунок в том же самом месте, где и документ, содержащий элемент img. В таблице 2-2 показаны различные виды относительных ссылок, а также абсолютные ссылки, соответствующие им. Предполагается, что документ был загружен с http://www.jacquisflowershop.com/jquery/example.html.

Таблица 2-2: Форматы относительных ссылок
Относительная ссылка Эквивалент
snowdrop.png http://www.jacquisflowershop.com/jquery/snowdrop.png
/snowdrop.png http://www.jacquisflowershop.com/snowdrop.png
/ http://www.jacquisflowershop.com/jquery/
//www.mydomain.com/index.html http://www.mydomain.com/index.html

Последний пример используется крайне редко, однако он может быть полезным, чтобы убедиться, что требуемые ресурсы используют тот же порт, который был использован при получении основного документа. Это помогает избежать проблемы, где некая часть содержания запрашивается по зашифрованному соединению (используя https протокол), а другая часть запрашивается по незашифрованному соединению (http протокол). Некоторые браузеры, особенно IE, не любят смешанного зашифрованного и незашифрованного содержания и предупреждают пользователей, когда это происходит.

Внимание

Вы можете использовать две точки (..), чтобы обратиться к директории на веб сервере, которая содержит основной HTML документ. Я рекомендую избегать этой техники, не в последнюю очередь потому, что многие веб сервера будут отклонять запросы, содержащие такую комбинацию символов, по соображениям безопасности.