Это старая версия документа!
Содержание
Руководство по HTML5
Основы HTML
- index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Документ HTML5</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="script.js"></script> </head> <body> <div>Содержание документа HTML5</div> </body> </html>
| Структура HTML -документа | |
|---|---|
| Элемент | Описание |
<!DOCTYPE html> | Объявление формата документа (это документ html с использованием HTML5) |
<html> | Является корневым элементом документа (между и находиться все содержимое документа, выводимое в окне браузера) |
<head> | Техническая информация о документе (заголовок, описание, кодировку и т.д.). Введенная информация не отображается в браузере, но содержит данные, указывающие браузеру, как обрабатывать страницу. |
<title> | Наименование документа, которое отображается в строке заголовка веб-браузера |
<meta> | Определяет метаинформацию страницы. В данном случае с помощью атрибута charset=«utf-8» указываем кодировку utf-8. |
<style> | Задает стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. |
<link> | Определяет взаимосвязь между текущей страницей и другими документами. |
<script> | Позволяет присоединять к документу различные сценарии. Текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента. |
<body> | Предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body> |
<div> | Блок, предназначенный для группировки контента. |
HTML-элементы1.2
HTML-атрибуты1.3
HTML-текст1.4
Элементы для заголовков Элементы для форматирования текста Элементы для ввода «компьютерного» текста Элементы для оформления цитат и определений Абзацы, средства переноса текста
HTML-ссылки1.5
Структура ссылки Абсолютный и относительный путь Якорь Как сделать изображение-ссылку Как сделать ссылку на телефонный номер, скайп или адрес электронной почты Атрибуты ссылок
HTML-изображения1.6
Элемент <img> Адрес изображения Размеры изображения Форматы графических файлов Элемент <map> Элемент <area> Пример создания карты-изображения
HTML-таблицы1.7
Как создать таблицу Как создать строки (ряды) таблицы Как сделать ячейку заголовка столбца таблицы Как сделать ячейку тела таблицы Как добавить подпись (заголовок) к таблице Группирование строк и столбцов таблицы <colgroup> и <col> Группировка разделов таблицы <thead>, <tbody> и <tfoot> Как объединить ячейки таблицы Атрибуты элементов таблицы Пример создания таблицы
HTML-списки1.8
Маркированный список <ul> Нумерованный список <ol> Список определений <dl> Вложенный список Многоуровневый нумерованный список
Спецсимволы HTML1.9
Полезные знаки и символы Знаки пунктуации Стрелки Карточные масти Деньги Знаки зодиака
HTML-генераторы1.10
Семантические элементы HTML51.11
Элемент документа1.11.1
Метаданные документа1.11.2
Элемент <head> Элемент <title> Элемент <base> Элемент <link> Элемент <meta> Элемент <style>
Разделы документа1.11.3
Элемент <body> Элемент <article> Элемент <section> Элемент <nav> Элемент <aside> Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6> Элемент <header> Элемент <footer>
Группировка содержимого1.11.4
Элемент <p> Элемент <address> Элемент <hr> Элемент <pre> Элемент <blockquote> Элемент <ol> Элемент <ul> Элемент <li> Элемент <dl> Элемент <dt> Элемент <dd> Элемент <figure> Элемент <figcaption> Элемент <main> Элемент <div>
Семантика уровня текста1.11.5
Элемент <a> Элемент <em> Элемент <strong> Элемент <small> Элемент <s> Элемент <cite> Элемент <q> Элемент <dfn> Элемент <abbr> Элемент <ruby> Элемент <rb> Элемент <rt> Элемент <rtc> Элемент <rp> Элемент <data> Элемент <time> Элемент <code> Элемент <var> Элемент <samp> Элемент <kbd> Элементы <sub> и <sup> Элемент <i> Элемент <b> Элемент <u> Элемент <mark> Элемент <bdi> Элемент <bdo> Элемент <span> Элемент <br> Элемент <wbr>
Правки документа1.11.6
Элемент <ins>
Элемент
Атрибуты, общие для элементов <ins> и <del>
=====Встраиваемое содержимое1.11.7=====
Элемент <picture>
Элемент <source>
Элемент <img>
Элемент <iframe>
Элемент <embed>
Элемент <object>
Элемент <param>
Элемент <video>
Элемент <audio>
Элемент <track>
Элемент <map>
Элемент <area>
=====Ссылки1.11.8=====
Ссылки, созданные элементами <a> и <area>
Типы ссылок
Примеры ссылок
=====Табличные данные1.11.9=====
Элемент <table>
Элемент <caption>
Элемент <colgroup>
Элемент <col>
Элемент <tbody>
Элемент <thead>
Элемент <tfoot>
Элемент <tr>
Элемент <td>
Элемент <th>
=====Формы1.11.10=====
Элемент <form>
Элемент <label>
Элемент <input>
Элемент <button>
Элемент <select>
Элемент <datalist>
Элемент <optgroup>
Элемент <option>
Элемент <textarea>
Элемент <output>
Элемент <progress>
Элемент <meter>
Элемент <fieldset>
Элемент <legend>
Атрибут autocomplete
=====Интерактивные элементы1.11.11=====
Элемент <details>
Элемент <summary>
Элемент <dialog>
Скрипты1.11.12
Элемент <script>
Элемент <noscript>
Элемент <template>
Элемент <slot>
Элемент <canvas>
====HTML5-аудио1.12====
Элемент <audio>
Аудио кодеки
Альтернативные медиа-ресурсы <source>
Добавление субтитров и заголовков <track>
Стилизованный пример аудио плеера
====HTML5-видео1.13====
Элемент <video>
Встраиваемый интерактивный контент <embed>
Видеокодеки
Видеоконтейнеры
Альтернативные медиа-ресурсы <source>
Добавление субтитров и заголовков <track>
Пример: размещаем видео на сайте
Видеоконвертеры
Необязательные теги HTML5-разметки1.14
=====HTML5-формы1.15=====
Элемент <form>
Группировка элементов формы <fieldset>
Создание полей формы <input>
Текстовые поля ввода <textarea>
Раскрывающийся список <select>
Надписи к полям формы <label>
Кнопки <button>
Флажки и переключатели в формах
=====Контентная модель HTML51.16=====
Мета содержимое
Потоковое содержимое
Секционное содержимое
Заголовочное содержимое
Текстовое содержимое
Встроенное содержимое
Интерактивное содержимое
Явное содержимое
Элементы, поддерживающие скрипт
Корневое секционное содержимое
Прозрачная модель содержимого
2)
Read the syntax page1) again: «You can embed raw HTML code into your documents by using the HTML tags.»
So to embed HTML you need to enclose the HTML with <html></html> (for inline HTML) or <HTML></HTML> (for block HTML). A little example: <del>The above syntax page has examples of what block vs inline look like.
<html><strong>This is my bold text</strong></html>