Главная страница   /   2.1. Основы HTML документа (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

2.1. Основы HTML документа

Лучше всего начать с просмотра HTML документа. Таким образом, вы увидите базовую структуру и иерархию, которой следуют все документы HTML. В листинге 2-1 представлен простой HTML документ. Я буду использовать этот документ на протяжении всей главы, чтобы показать основные принципы HTML.

Листинг 2-1: Простой документ HTML
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-1.7.js" type="text/javascript"></script>
<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>
</head>
<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>
</html>

Это небольшой и простой HTML документ, но он демонстрирует наиболее важные характеристики HTML. На рисунке 2-1 показано, как этот документ выглядит в браузере.

Рисунок 2-1: Вид в браузере приведенного в примере HTML документа