Содержание
Руководство по HTML5
HTML — «язык гипертекстовой разметки» — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора. В HTML можно встроить программный код на языке программирования JavaScript, для управления поведением и содержанием веб-страниц. Также включение CSS в HTML позволяет задавать внешний вид и макет страницы.Wikipedia
Основы HTML
HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных. В этом случае обычно не указывается закрывающий тег (например, тег переноса строки <br> — одиночный и закрывать его не нужно) . Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, атрибут href=« у ссылки). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:
<strong>Текст между двумя тегами — открывающим и закрывающим.</strong><a href=«http://www.example.com»>Здесь элемент содержит атрибут href, то есть гиперссылку.</a>А вот пример пустого элемента: <br>
Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML).
HTML-элементы
Элементы HTML являются строительными блоками HTML страниц. С помощью HTML разные конструкции, изображения и другие объекты, такие как интерактивная веб-форма, могут быть встроены в отображаемую страницу. HTML предоставляет средства для создания заголовков, абзацев, списков, ссылок, цитат и других элементов. Элементы HTML выделяются тегами, записанными с использованием угловых скобок. Такие теги, как <img /> и <input />, напрямую вводят контент на страницу. Другие теги, такие как <p>, окружают и оформляют текст внутри себя и могут включать другие теги в качестве подэлементов. Браузеры не отображают 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> </html> | Является корневым элементом документа (между и находиться все содержимое документа, выводимое в окне браузера) |
<head> </head> | Техническая информация о документе (заголовок, описание, кодировку и т.д.). Введенная информация не отображается в браузере, но содержит данные, указывающие браузеру, как обрабатывать страницу. |
<title> </title> | Наименование документа, которое отображается в строке заголовка веб-браузера |
<meta> | Определяет метаинформацию страницы. В данном случае с помощью атрибута charset=«utf-8» указываем кодировку utf-8. |
<style> | Задает стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. |
<link> | Определяет взаимосвязь между текущей страницей и другими документами. |
<script> | Позволяет присоединять к документу различные сценарии. Текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента. |
<body> | Предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body> |
<div> | Блок, предназначенный для группировки контента. |
Элемент <meta>
<meta name="description" content="Описание содержимого страницы"> <meta name="keywords" content="Ключевые слова через запятую">
<meta name="description" lang="ru" content="Описание содержимого страницы на русском"> <meta name="description" lang="en" content="Description"> <meta name="keywords" lang="ru" content="Ключевые слова через запятую"> <meta name="keywords" lang="en" content="Keywords">
- Поисковые машины
Индексация и переход по ссылкам разрешены:
<meta name="robots" content="index, follow">
Индексация разрешена, переход по ссылкам запрещен:
<meta name="robots" content="index, nofollow">
Индексация и переход по ссылкам запрещены:
<meta name="robots" content="noindex, nofollow">
я автоматической перезагрузки страницы через заданный промежуток времени (например, через 30 секунд) нужно воспользоваться значением refresh:
<meta http-equiv="refresh" content="30">
Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
<meta http-equiv="refresh" content="0; url=http://yandex.ru/">
| charset | Указывает кодировку символов для текущего HTML-документа: <meta charset=«UTF-8»> |
| content | Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения. |
| http-equiv | Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «url=адрес_страницы». Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<meta http-equiv=«refresh» content=«30»> Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url: <meta http-equiv=«refresh» content=«0; url=http://mail.ru/»> |
| name | Ассоциируется со значением, содержащемся в атрибуте content. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop. application-name указывает название веб-приложения, используемого на странице. author указывает имя автора документа в свободном формате. description определяет краткое описание к содержимому страницы, например: <meta name=«description» content=«Описание содержимого страницы»> generator указывает один из пакетов программного обеспечения, используемого для создания документа, например: <meta name=«generator» content=«WordPress 4.0»>. keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: <meta name=«keywords» content=«Ключевые слова через запятую»>. Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator, googlebot, publisher, robots, slurp, viewport, хотя ни одно из них еще не было официально принято. |
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-генераторы
<details> <summary>Summary Text</summary> Details Text </details>
Summary Text
Details Text
Семантические элементы 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>
Обсуждение