Различия

Показаны различия между двумя версиями страницы.

--- software:development:ps_pycharm:html5:html5 [2023/08/11 00:14] – [Основы HTML] vladpolskiy
+++ software:development:ps_pycharm:html5:html5 [2024/02/04 11:28] (текущий) – vladpolskiy
@@ Строка 1: / Строка 1: @@
+{{description>Основы HTML HTML-элементы}}
 ======Руководство по HTML5======
-{{:software:development:ps_pycharm:html5:html_original_logo_icon.png?100|}}
+{{:software:development:ps_pycharm:html5:html_original_logo_icon.png?100 |}}HTML  — «язык гипертекстовой разметки» — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора. В HTML можно встроить программный код на языке программирования JavaScript, для управления поведением и содержанием веб-страниц. Также включение CSS в HTML позволяет задавать внешний вид и макет страницы.[[https://ru.wikipedia.org/wiki/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-теги, но используют их для интерпретации содержимого страницы.
 <file html index.html>
@@ Строка 19: / Строка 29: @@
 </file>
-Следующий пример синтаксиса сделает первую фиксированной и покажет около 2 других строк в прокручиваемом контейнере ниже. Это сделает первый столбец шириной 20 пикселей, а второй — 30 пикселей. Сам стол будет плавать вправо.
 {{tablelayout?colwidth="200px"}}
-^                      Структура HTML -документа     ^^
+^  Структура HTML -документа                                                                                                                                                                                                                                                              ||
-|Элемент                      |    Описание          |
+| Элемент                                |  Описание                                                                                                                                                                                                                                       |
-|''%% <!DOCTYPE html> %%''    |Объявление формата документа (это документ html с использованием HTML5)   |
+| ''%% <!DOCTYPE html> %%''              | Объявление формата документа (это документ html с использованием HTML5)                                                                                                                                                                         |
-| ''%% <html> %%'' |Является корневым элементом документа (между <html> и </html> находиться все содержимое документа, выводимое в окне браузера) |
+| ''%% <html> %%''  ''%% </html> %%''    | Является корневым элементом документа (между <html> и </html> находиться все содержимое документа, выводимое в окне браузера)                                                                                                                   |
-| ''%% <head> %%''   |Техническая информация о документе (заголовок, описание, кодировку и т.д.). Введенная  информация не отображается в браузере, но содержит данные, указывающие браузеру, как обрабатывать страницу. |
+| ''%% <head> %%''  ''%% </head> %%''    | Техническая информация о документе (заголовок, описание, кодировку и т.д.). Введенная  информация не отображается в браузере, но содержит данные, указывающие браузеру, как обрабатывать страницу.                                              |
-|''%% <title> %%''  |Наименование документа, которое отображается в строке заголовка веб-браузера |
+| ''%% <title> %%''  ''%% </title> %%''  | Наименование документа, которое отображается в строке заголовка веб-браузера                                                                                                                                                                    |
-| ''%% <meta> %%'' |Определяет метаинформацию страницы. В данном случае с помощью атрибута charset="utf-8" указываем кодировку utf-8. |
+| ''%% <meta> %%''                       | Определяет метаинформацию страницы. В данном случае с помощью атрибута charset="utf-8" указываем кодировку utf-8.                                                                                                                               |
-| ''%% <style> %%'' |Задает стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS.  |
+| ''%% <style> %%''                      | Задает стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS.                                                                                                                                      |
-| ''%% <link> %%'' |Определяет взаимосвязь между текущей страницей и другими документами.  |
+| ''%% <link> %%''                       | Определяет взаимосвязь между текущей страницей и другими документами.                                                                                                                                                                           |
-| ''%% <script> %%'' |Позволяет присоединять к документу различные сценарии. Текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента. |
+| ''%% <script> %%''                     | Позволяет присоединять к документу различные сценарии. Текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента.  |
-| ''%% <body> %%'' |Предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body> |
+| ''%% <body> %%''                       | Предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>                                              |
-| ''%% <div> %%'' |Блок, предназначенный для группировки контента. |
+| ''%% <div> %%''                        | Блок, предназначенный для группировки контента.                                                                                                                                                                                                 |
+<details>
+<summary>Элемент <meta></summary>
-=====HTML-элементы1.2=====
+<code>
+<meta name="description" content="Описание содержимого страницы">
+<meta name="keywords" content="Ключевые слова через запятую">
+</code>
+<code>
+<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">
+</code>
+  * **Поисковые машины**
+Индексация и переход по ссылкам разрешены:
+<code>
+<meta name="robots" content="index, follow">
+</code>
+Индексация разрешена, переход по ссылкам запрещен:
+<code>
+<meta name="robots" content="index, nofollow">
+</code>
+Индексация и переход по ссылкам запрещены:
+<code>
+<meta name="robots" content="noindex, nofollow">
+</code>
+я автоматической перезагрузки страницы через заданный промежуток времени (например, через 30 секунд) нужно воспользоваться значением refresh:
+<code>
+<meta http-equiv="refresh" content="30">
+</code>
+Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
+<code>
+<meta http-equiv="refresh" content="0; url=http://yandex.ru/">
+</code>
+{{tablelayout?colwidth="200px"}}
+^   ^   ^
+| 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, хотя ни одно из них еще не было официально принято. |
+</details>
 =====HTML-атрибуты1.3=====
 =====HTML-текст1.4=====
@@ Строка 87: / Строка 138: @@
 Деньги
 Знаки зодиака
-=====HTML-генераторы1.10=====
+=====HTML-генераторы=====
+<code>
+<details>
+<summary>Summary Text</summary>
+Details Text
+</details>
+</code>
+<details>
+<summary>Summary Text</summary>
+Details Text
+</details>
 =====Семантические элементы HTML51.11=====
 =====Элемент документа1.11.1=====