<form action="self.php">
<p><input type="text"></p>
<p><input type="submit" disabled></p>
</form>
Парные:
<div></div>
<header></header>
<a></a>
…
Не парные:
<br/>
<img/>
<input/>
<link/>
<meta/>
Для атрибутов тегов используются значения по умолчанию, а так же существую атрибуты без значений.
<form action="self.php">
<p><input type="text"></p>
<p><input type="submit" disabled></p>
</form>
В данном примере используется атрибут disabled
, у которого явно не задано значение. Подобная запись называется сокращенный атрибут тега
.
Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет.
Форматы атрибутов:
Текст
Число
Ссылка
<img src="images/html.png" width="189" height="255" alt="HTML">
<link rel="stylesheet" href="style.css">
Атрибуты могут располагаться как в одну строку, так и в несколько. Главное условие - наличие разделительного символа.
<img src="images/girl.png" width="189" height="255" alt="boy">
<img src="images/girl.png"
width="189"
height="255"
alt="boy">
<!DOCTYPE html> (1)
<html>
<head> (2)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> (6)
<title>Пример веб-страницы</title> (4)
</head>
<body> (3)
<h1>Заголовок</h1>
<!-- Комментарий -->
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</body>
</html>
<a href="https://rakovets.by">Visit rakovets.by!</a>
https://rakovets.by
- это адрес (URI/URL)
Адреса (URI) бывают:
относительные
абсолютные
https://
- protocol
rakovets.by
- domain name for host
/catalog
- path
Текущий адрес | Адрес в ссылке | Преобразуется в |
| ||
| ||
|
Tag | Description |
---|---|
| название таблицы |
| таблица |
| заголовки таблицы |
| содержимое таблицы |
| table row, строка |
| table header, заголовок столбца |
| table data, ячейка в строке |
<table>
<tr>
<td>1 строка 1 ячейка</td>
<td>1 строка 2 ячейка</td>
</tr>
<tr>
<td>2 строка 1 ячейка</td>
<td>2 строка 2 ячейка</td>
</tr>
</table>
CSS-property | Description |
---|---|
| Схлопывание границ ячеек |
| «Расклеивание» границ ячеек |
| Отступы между ячейками |
Attribute | Description |
---|---|
| объединяет ячейки по горизонтали |
| объединяет ячейки по вертикали |
<form>
<form action="https://rakovets.com/login" method="get">
поля формы
</form>
action
- задает адрес (URL) отправки формы
method
- задает метод отправки формы
<label>
Связывает текст (подпись) и поле ввода.
<label>
Подпись<input type="text" name="username">
</label>
<input>
<form action="https://rakovets.com/registr" method="get">
<input type="${type}" name="${name}">
</form>
type
- задает тип поля
name
- задает имя поля
type
type
(HTML5)type
(HTML5) support<input type="text" hidden>
<input type="text" name="hide" value="15135" hidden>
<input type="checkbox">
<input type="checkbox" checked>
Работает как выбор: ДА или НЕТ. checked
– по умолчанию установить
<input type="radio">
<input type="radio" name="question-tag" value="p">
<input type="radio" name="question-tag" value="b" checked>
Работает как выбор ОДНОГО из вариантов. checked
- значение по умолчанию
<input type="submit">
<input type="submit" value="text">
<input type="file">
<form action="https://rakovets.com/file" method="get" enctype="multipart/form-data">
<input type="file" name="upload-file">
</form>
<textarea>
<textarea rows="45" cols="32"> text </textarea>
<select>
<select name="year">
<option value="2000">2000 год</option>
<option value="2005">2005 год</option>
<option value="2010">2010 год</option>
<option value="2015">2015 год</option>
</select>
Работает как выбор ОДНОГО из вариантов.
<select multiple>
<select name="years" size="2" multiple>
<option value="2000" selected>2000 год</option>
<option value="2005">2005 год</option>
<option value="2010">2010 год</option>
<option value="2015">2015 год</option>
</select>
multiple
- мультиселект
size
- высота мультиселекта
selected
- выбор вариантов по умолчанию