Главная » HTML

HTML — Начало работы с HTML

На чтение 7 мин. Просмотров 29 Опубликовано

Содержание
  1. Начало работы с HTML
  2. Что такое HTML?
  3. Анатомия элемента HTML
  4. Блочные и встроенные элементы
  5. Пустые элементы
  6. Атрибуты
  7. Анатомия HTML-документа
  8. Пробельные символы в HTML
  9. Ссылки на сущности: Включение специальных символов в HTML
  10. HTML-комментарии

Начало работы с HTML

Что такое HTML?

HTML (Hypertext Markup Language) — это язык разметки, который указывает веб-браузерам, как структурировать посещенные вами веб-страницы. Окружающие элементы tag могут превращать содержимое в гиперссылку для перехода на другую страницу (a), выделять слова курсивом (i em) и так далее.

Анатомия элемента HTML

HTML элемент = Открывающий тег + Содержание + Закрывающий тег.

<p>My cat is very cute</p>
Вход в полноэкранный режим Выход из полноэкранного режима

Примечание
Теги в HTML не чувствительны к регистру. Это означает, что они могут быть написаны в верхнем или нижнем регистре. Например, тег <title> может быть написан как <Title> или <TiTlE> и т.д. Однако для единообразия и удобочитаемости лучше всего писать все теги в нижнем регистре.

Блочные и встроенные элементы

  • Блочные элементы: Элементы блочного уровня для видимого блока на странице. Элемент блочного уровня появляется на новой строке после предшествующего ему содержимого. Любое содержимое, следующее за элементом блочного уровня, также появляется на новой строке.
  <address> <article> <aside> <blockquote> <canvas>
  <dd> <div> <dl> <dt> <fieldset>
  <figcaption> <figure> <footer> <form> <h1>-<h6>
  <header> <hr> <li> <main> <nav>
  <noscript> <ol> <p> <pre> <section>
  <table> <tfoot> <ul> <video>
Вход в полноэкранный режим Выход из полноэкранного режима
  • Встраиваемые элементы: Встроенные элементы содержатся внутри элементов блочного уровня и окружают только небольшие части содержимого документа (не целые параграфы или группы содержимого, например, em a и т.д.). Элемент inline не приводит к появлению новой строки в документе.
  <a> <abbr> <acronym> <b> <bdo>
  <big> <br> <button> <cite> <code>
  <dfn> <em> <i> <img> <input>
  <kbd> <label> <map> <object> <output>
  <q> <samp> <script> <select> <small>
  <span> <strong> <sub> <sup> <textarea>
  <time> <tt> <var>
Вход в полноэкранный режим Выход из полноэкранного режима

Элементы блочного уровня & Инлайн-элементы — W3Schools

Пустые элементы

Элементы без содержимого называются пустыми элементами. Общая структура пустых элементов может быть такой: Пустые элементы = Открывающий тег + Атрибуты в открывающем теге. Некоторые элементы состоят из одного тега, который обычно используется для вставки/встраивания чего-либо в документ. Например, элемент <img> вставляет файл изображения на страницу.

<img
  src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
/>
Вход в полноэкранный режим Выход из полноэкранного режима

Пустые элементы иногда называют элементами пустоты.
Примечание: В HTML не требуется добавлять / в конце тега пустого элемента, например: <img src="images/cat.jpg" />. Однако это также допустимый синтаксис, и вы можете сделать это, когда хотите, чтобы ваш HTML был допустимым XML.

Атрибуты

Атрибуты содержат дополнительную информацию об элементе, которая не отображается в содержимом. Атрибут должен иметь:

  • пробел между ним и именем элемента. (Для элемента с более чем одним атрибутом атрибуты также должны быть разделены пробелами).

  • Имя атрибута, за которым следует знак равенства.

  • Значение атрибута, заключенное в открывающую и закрывающую кавычки.

<!-- class is the attribute name and editor-note is the attribute value -->
<p class="editor-note">My cat is very cute</p>
Вход в полноэкранный режим Выйти из полноэкранного режима

Булевы атрибуты
Иногда встречаются атрибуты без значений. Это вполне допустимо. Такие атрибуты называются булевыми. Булевы атрибуты могут иметь только одно значение, которое обычно совпадает с именем атрибута. Например,

<input type="text" disabled="disabled" /> <input type="text" disabled />
Войти в полноэкранный режим Выйти из полноэкранного режима

Анатомия HTML-документа

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима
  1. Все документы HTML должны начинаться с объявления <!DOCTYPE>. Декларация не является тегом HTML. Это «информация» для браузера о том, какой тип документа следует ожидать. В HTML5 декларация выглядит просто.: DOCTYPE — W3Schools
   <!DOCTYPE html>
Вход в полноэкранный режим Выход из полноэкранного режима

  1. <html></html>: Элемент <html>. Этот элемент оборачивает все содержимое страницы. Иногда его называют корневым элементом.

  2. <head></head>: Элемент <head>. Этот элемент действует как контейнер для всего, что вы хотите включить в HTML-страницу, но не является содержимым страницы, которое будет показано зрителям. Сюда входят ключевые слова и описание страницы, которые будут отображаться в результатах поиска, CSS для стилизации содержимого, объявления набора символов и многое другое.

  3. <meta charset="utf-8">: Элемент <meta>. Этот тег определяет метаданные о документе HTML. Метаданные — это данные (информация) о данных. Теги <meta> всегда находятся внутри

    и обычно используются для указания набора символов, описания страницы, ключевых слов, автора документа и настроек области просмотра. Метаданные не отображаются на странице, но могут быть обработаны машиной. Метаданные используются браузерами (как отобразить содержимое или перезагрузить страницу), поисковыми системами (ключевые слова) и другими веб-службами. Атрибут charset устанавливает набор символов для вашего документа в UTF-8, который включает большинство символов из подавляющего большинства человеческих письменных языков. С помощью этой настройки страница может обрабатывать любое текстовое содержимое, которое она может содержать. meta — W3Schools

  4. <title></title>: Элемент <title>. Он задает заголовок страницы, который отображается на вкладке браузера, в котором загружена страница. Заголовок страницы также используется для описания страницы при добавлении ее в закладки.

  5. <body></body>: Элемент <body>. Он содержит все содержимое, которое отображается на странице, включая текст, изображения, видео, игры, воспроизводимые аудиотреки или что-либо еще.

Пробельные символы в HTML

Независимо от того, сколько пробельных символов вы используете внутри содержимого HTML-элементов (которые могут включать один или несколько пробелов, а также переносы строк), HTML-парсер сокращает каждую последовательность пробелов до одного пробела при рендеринге кода. Вы будете использовать пробельные символы, чтобы сделать код более читабельным. Например, если вам нужно вложить элемент:

<p>
  My cat is
  <b>very cute</b>
</p>
Войти в полноэкранный режим Выйти из полноэкранного режима

Ссылки на сущности: Включение специальных символов в HTML

В HTML символы <, >, ", ' и & являются специальными символами. Они являются частью синтаксиса HTML. Они используются в ссылках на символы. Каждая ссылка на символ начинается с амперсанда (&) и заканчивается точкой с запятой.

<   &lt;
>   &gt;
"   &quot;
'   &apos;
&   &amp;
Вход в полноэкранный режим Выход из полноэкранного режима

См. подробнее в Список ссылок на символьные сущности XML и HTML — Википедия

HTML-комментарии

Чтобы написать комментарий HTML, оберните его в специальные маркеры <!-- и -->. Например:

<!-- I am a comment -->
Войти в полноэкранный режим Выход из полноэкранного режима

Рекомендуем почитать:

Оцените статью
Procodings.ru
Добавить комментарий