Различия

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

--- software:development:web:docs:learn:html:introduction_to_html:getting_started [2023/09/16 13:35] – [Добавление функций в HTML-документ] vladpolskiy
+++ software:development:web:docs:learn:html:introduction_to_html:getting_started [2025/02/01 09:41] (текущий) – внешнее изменение 127.0.0.1
@@ Строка 1: / Строка 1: @@
-======Начало работы с HTML======
+=====Начало работы с HTML======
 В этой статье мы рассмотрим абсолютные основы HTML. Для начала в этой статье даны определения элементов, атрибутов и всех других важных терминов, которые вы, возможно, слышали. Также объясняется, где они вписываются в HTML. Вы узнаете, как структурированы элементы HTML, как структурирована типичная страница HTML и другие важные базовые функции языка. Попутно будет возможность поиграть и с HTML!
 =====Что такое HTML?=====
@@ Строка 159: / Строка 160: @@
 <a href="https://www.mozilla.org/" title='The Mozilla homepage'>Ссылка на сайт#2 </a>
 </code>
-Убедитесь, что вы не смешиваете одинарные и двойные кавычки для одного атрибута. Этот пример (ниже) показывает своего рода смешение кавычек, которое может пойти не так (вместо ссылки https://www.mozilla.org/ получим <color #ed1c24>https://www.mozilla.org/'title=</color>):
+Убедитесь, что вы не смешиваете одинарные и двойные кавычки для одного атрибута. Этот пример (ниже) показывает своего рода смешение кавычек, которое может пойти не так (вместо ссылки https://www.mozilla.org/ получим <fc #ed1c24>https://www.mozilla.org/'title=</fc>):
 <code html HTML>
 <!-- не правильный синтаксис (с разными кавычками) -->
@@ Строка 183: / Строка 184: @@
 </code>
-Пример неправильного использования кавычек внутри других кавычек значения атрибута (отредактируйте строку ниже в области ввода в окне редактора **<color #ed1c24>"</color><color #22b14c>no the</color><color #ed1c24>"</color>** на **<color #ed1c24>&quot;</color><color #22b14c>no the</color><color #ed1c24>&quot;</color>** и вы сможете увидеть свои изменения в режиме реального времени в области «Вывод»). Если вы допустили ошибку, вы всегда можете сбросить ее с помощью кнопки Reset:
+Пример неправильного использования кавычек внутри других кавычек значения атрибута (отредактируйте строку ниже в области ввода в окне редактора **<fc #ed1c24>"</fc><fc #22b14c>no the</fc><fc #ed1c24>"</fc>** на **<fc #ed1c24>&quot;</fc><fc #22b14c>no the</fc><fc #ed1c24>&quot;</fc>** и вы сможете увидеть свои изменения в режиме реального времени в области «Вывод»). Если вы допустили ошибку, вы всегда можете сбросить ее с помощью кнопки Reset:
 <code html HTML>
 <!-- использование сущности html &quot;  -->
@@ Строка 259: / Строка 260: @@
 <p id="noWhitespace">Dogs are silly.</p>
-<p id="whitespace">Dogs
+<p id="whitespace">Kats
     are
@@ Строка 276: / Строка 277: @@
 </iframe>
 </html>
+<WRAP left round box 100%>
+:!: **Примечание.** При доступе к [[software:development:web:docs:Web:API:Element:innerHTML|внутреннему коду HTML]] элементов из JavaScript все пробелы останутся нетронутыми. Это может привести к неожиданным результатам, если пробелы обрезаны браузером.
+</WRAP>
+<code javascript JS>
+let a = document.getElementById("noWhitespace").innerHTML;
+document.getElementById("demo_a").innerHTML = a;
+// "Dogs are silly."
+let b = document.getElementById("whitespace").innerHTML;
+document.getElementById("demo_b").innerHTML = b;
+// "Kats
+//    are
+//        silly."
+</code>
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_whitespace_2.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+=====Ссылки на сущности: включение специальных символов в HTML.=====
+В HTML символы ''<'', ''>'', ''"'', ''%%'%%'' и ''&''являются специальными символами. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.
+Вы делаете это с помощью ссылок на персонажей. Это специальные коды, обозначающие символы, которые следует использовать именно в этих обстоятельствах. Каждая ссылка на символ начинается с амперсанда (&) и заканчивается точкой с запятой (;).
+{{tablelayout?colwidth="100px"}}
+|Символ|Эквивалент ссылки на символ|
+|<|&lt; |
+|>|&gt; |
+|"|&quot; |
+|'|&apos; |
+|&|&amp; |
+Эквивалент ссылки на символ можно легко запомнить, поскольку текст, который он использует, можно рассматривать как меньший, чем для '<', кавычка для ' " ' и то же самое для других. Дополнительные сведения о ссылках на сущности см. в разделе [[https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references|Список ссылок на символьные сущности XML и HTML]] (Википедия).
+В примере ниже есть два абзаца:
+<code html HTML>
+<p>In HTML, you define a paragraph using the <p> element.</p>
+<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>
+</code>
+На живом выводе ниже вы можете видеть, что первый абзац пошёл не так. Браузер интерпретирует второй экземпляр <p>как начало нового абзаца. Второй абзац выглядит нормально, поскольку в нем есть угловые скобки со ссылками на символы.
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_essence_1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+<WRAP left round box 100%>
+:!: **Примечание.** Вам не нужно использовать ссылки на сущности для каких-либо других символов, поскольку современные браузеры прекрасно обрабатывают фактические символы, если для [[https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding|кодировки символов вашего HTML установлено значение UTF-8]].
+</WRAP>
+=====HTML-комментарии=====
+В HTML есть механизм записи комментариев в коде. Браузеры игнорируют комментарии, фактически делая комментарии невидимыми для пользователя. Цель комментариев — позволить вам включать в код примечания для объяснения вашей логики или кода. Это очень полезно, если вы вернетесь к базе кода после того, как отсутствовали достаточно долго и не полностью ее помните. Аналогично, комментарии неоценимы, поскольку разные люди вносят изменения и обновления.
+Чтобы написать комментарий HTML, оберните его специальными маркерами ''<!--'' и ''-->''. Например:
+<code html HTML>
+<p>I'm not inside a comment</p>
+<!-- <p>I am!</p> -->
+</code>
+Как вы можете видеть ниже, в реальном выводе отображается только первый абзац.
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_comment_1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+=====Заключение=====
+Вы дочитали статью до конца! Мы надеемся, что вам понравился экскурс по основам HTML.
+На этом этапе вы должны понимать, как выглядит HTML и как он работает на базовом уровне. Вы также должны уметь написать несколько элементов и атрибутов. Последующие статьи этого модуля развивают некоторые темы, представленные здесь, а также представляют другие концепции языка.
+Когда вы начнете больше изучать HTML, подумайте об изучении основ CSS (каскадных таблиц стилей). [[software:development:web:docs:Learn:CSS|CSS]] — это язык, используемый для стилизации веб-страниц, например изменения шрифтов или цветов или изменения макета страницы. Как вы вскоре обнаружите, HTML и CSS хорошо работают вместе.