Skip to content

Latest commit

 

History

History
410 lines (328 loc) · 25.2 KB

HTML.md

File metadata and controls

410 lines (328 loc) · 25.2 KB
Raw

Основы HTML

Теги

Тег, тэг (tag) — именованная метка, дескриптор.

HTML-страница состоит из элементов. Теги используются для указания типа этих элементов.

Большинство тегов — парные. Один — открывающий <tagName>, другой — закрывающий </tagName>. Между тегами распологается контент, который необходимо отобразить.

<div></div>
<p>Hello</p>

Некоторые элементы не могут содержать контент, поэтому их теги являются самозакрывающимися. <tagName />

<img />

Элементы могут содержать характерные им атрибуты в теге <tagName attribute="value">.

<div class="article"></div>

Одни элементы могут являться частью других элементов, поэтому определённые тэги могут быть вложенными.

<div class="note">
  <h1>Основы HTML</h1>
  <h2>Теги</h2>
  <p><b>Тег</b>, <b>тэг</b> (tag) — именованная метка, дескриптор.
</div>

Комментарий имеет следующую структуру.

<!-- comment -->

Типы HTML-тегов

Парные и одиночные теги

Парные теги имеют открывающий и закрывающий тег, перед именем закрывающиего ставится слэш /:

<div></div>
<p>text</p>
<span>inline</span>

Одиночные теги не имеют закрывающего тега:

<img> <!-- картинка -->
<input> <!-- поле ввода -->
<br> <!-- перенос строки -->

Блочные и строчные теги

Соотвуствуют блочным и строчным элементами.
Блочные элементы могут хранить другие блочные элементы (<p> не может хранить блочные), строчные элементы и текст. (<div>, <p>)

<div>
  <div></div>
</div>
<p>
  <span>text</span>
</p>

Строчные элементы обычно хранят только текст (текст, изображение), не могут содержать строчные и блочные элементы. (<span>, <img>)

<span>text</span>
<img src="/*...*/">

Блочные теги создают разрыв строки, строчные — не создают.

Теги верхнего уровня

Теги верхнего уровня отвечают за создание HTML-документа.

<!-- начало документа -->
<html>
  <!-- голова, заголовок документа -->
  <head></head>
  <!-- тело документа -->
  <body></body>
<!-- конец документа -->
</html>

Теги заголовка документа отвечают за настройки страницы (описание, подключение скриптов и стилей) и не видны пользователю (кроме title).

<link> <!-- подключение внешнего файла -->
<title></title> <!-- название страницы -->
<meta> <!-- метатеги, содежащие метаданные (данные о других данных) -->
<style></style> <!-- включение CSS-кода в документ -->
<script></script> <!-- JS-код или загруженный внешний JS-файл -->

Тело документа отвечает за содержательную часть документа, отображаемую в браузере.

Теги <html> и <body> считаются необязательными в коде, но их желательно писать всегда.

Семантические теги

Пользователь видит глазами блоки страницы, но браузеры слепы.

Семантические теги добавляют семантику (смысловое значение) содержимому страницы.
С помощью этих тегов барузерам проще индексировать страницу, отделить важный контент от дополнительной информации.

<nav></nav> <!-- навигация -->
<section></section> <!-- группирует тематическое содержимое и обычно содержит заголовок -->
<header></header> <!-- заголовок секции или страницы -->
<main></main> <!-- основное содержимое страницы, которое должно быть уникальным для сайта -->
<aside></aside> <!-- не является основной частью контента (удаление не влияет на понимание содержимого); обычно это боковая панель -->
<footer></footer> <!-- нижний колонтитул секции или страницы -->
<article></article> <!-- запись, публикация, статья -->
<address></address> <!-- контактная информация автора документа или статьи -->
<figure></figure> <!-- автономный контент (приложение), содержащий обычно краткие характеристики к фрагментам кода, картинкам, ... -->
<blockquote></blockquote> <!-- цитата -->
<mark></mark> <!-- важное содержимое (заметка), выделенное жёлтым цветом по умолчанию -->
<time datetime="YYYY-MM-DDTHH:MM"></time> <!-- время и дата по григорианскому календарю, T (time) в формате - разделяющий префикс -->

Все семантические теги можно использовать неоднократно.

Устаревшие тэги

Устаревшие тэги (obsolete) были ранее запрещены и удалены или могут быть удалены из браузеров в любой моменты (хотя некоторые браузеры до сих пор могут их поддерживать).

<marquee>text</marquee> <!-- бегущая строка -->
<frame></frame> <!-- фрейм -->

Фреймы и встроенные фреймы

Фреймы разделяли окно браузера на отдельные, расположенные рядом области, в каждую из которых загружалась самостоятельная веб-страница. Они устарели и не поддерживаются в HTML5.

Встроенные (плавающие) фреймы встраивают новый независимый HTML-документ в текущий.
Широко используются для вставок медиа (google-карты, аудио и видеоплееры, примеры кода), для аутентификации и платёжных транзакций, в большинстве остальных случаев лучше их не использовать.

Основным отличием фреймов и встроенных фреймов является то, что встроенные фреймы вставляются в страницу как есть, а в случае фреймов документ разбивает окно браузера на несколько маленьких панелей, в каждой из которых хранится отдельный документ.

Синтаксис фреймов (уже не поддерживается)

Устаревший синтаксис фреймов:

 <frameset rows="25%,75%">
   <frame src="header.html" name="HEADER" scrolling="no" noresize>
   <frameset cols="100,*">
     <frame src="menu.html" name="MENU">
     <frame src="content.html" name="CONTENT">
   </frameset>
 </frameset>

Синтаксис встроенных фреймов

Вставки видео из Youtube:

<iframe
  width="400px"
  height="400px"
  src="https://www.youtube.com/embed/M2kSJbLbIgQ"
  frameborder="0"
  allowfullscreen
  style="border: none;"
></iframe>

Встроенный фрейм можно использовать как место, где должна открыться гиперссылка, по которой переходит пользователь:

<iframe src="page.html" name="page-frame"></iframe>
<a href="https://www.tutorialrepublic.com" target="page-frame">Click here</a>

Преимущества и недостатки фреймов

Преимущества фреймов:

  • Встраиваемая веб-страница не зависит от родительсокго веб-документа, что наделяет <iframe> некоторой безопастностью.
  • Быстро и просто изменяются размеры размещённых веб-страниц (как размеры обычного блока).
  • Удобно встраивать контент с других сайтов.

Недостатки фреймов:

  • Фреймы скрывают адрес страницы и показывать только адрес сайта (пользователю не понятно, где он находится; нельзя добавить страницу в закладки или поделиться ссылкой).

Doctype

Элемент <!DOCTYPE> предназначен для указания типа документа, он не является HTML-тегом и должен находиться в начале файла.

Существует несколько версий HTML и XHTML. Чтобы браузер понимал, как правильно интерпретировать документ, необходимо указать его тип.

DTD

Document Type Definition (DTD, определение типа документа) — язык, использующийся для записи синтаксических правил SGML-подобных языков разметки (HTML, XML, SGML, GML).

DTD определяет структуру документа, список валидных элементов и их атрибутов.

Отрывок из DTD-файла для HTML 4.01

<!--=================== Generic Attributes ===============================-->

<!ENTITY % coreattrs
 "id          ID             #IMPLIED  -- document-wide unique id --
  class       CDATA          #IMPLIED  -- space-separated list of classes --
  style       %StyleSheet;   #IMPLIED  -- associated style info --
  title       %Text;         #IMPLIED  -- advisory title --"
  >

<!ENTITY % i18n
 "lang        %LanguageCode; #IMPLIED  -- language code --
  dir         (ltr|rtl)      #IMPLIED  -- direction for weak/neutral text --"
  >

<!ENTITY % events
 "onclick     %Script;       #IMPLIED  -- a pointer button was clicked --
  ondblclick  %Script;       #IMPLIED  -- a pointer button was double clicked--
  onmousedown %Script;       #IMPLIED  -- a pointer button was pressed down --
  onmouseup   %Script;       #IMPLIED  -- a pointer button was released --
  onmouseover %Script;       #IMPLIED  -- a pointer was moved onto --
  onmousemove %Script;       #IMPLIED  -- a pointer was moved within --
  onmouseout  %Script;       #IMPLIED  -- a pointer was moved away --
  onkeypress  %Script;       #IMPLIED  -- a key was pressed and released --
  onkeydown   %Script;       #IMPLIED  -- a key was pressed down --
  onkeyup     %Script;       #IMPLIED  -- a key was released --"
  >

<!ENTITY % attrs "%coreattrs; %i18n; %events;">

<!--================ Forms ===============================================-->
<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->
<!ATTLIST FORM
  %attrs;                              -- %coreattrs, %i18n, %events --
  action      %URI;          #REQUIRED -- server-side form handler --
  method      (GET|POST)     GET       -- HTTP method used to submit the form--
  enctype     %ContentType;  "application/x-www-form-urlencoded"
  accept      %ContentTypes; #IMPLIED  -- list of MIME types for file upload --
  name        CDATA          #IMPLIED  -- name of form for scripting --
  onsubmit    %Script;       #IMPLIED  -- the form was submitted --
  onreset     %Script;       #IMPLIED  -- the form was reset --
  accept-charset %Charsets;  #IMPLIED  -- list of supported charsets --
  >

HTML 4.01 базировался на SGML, поэтому его Doctype ссылался на DTD.

Разработчики HTML5 отказались от использования DTD, поскольку посчитали его слишком ограниченным инструментом как для валидации, так и для описания всех возможностей HTML5. Например, в DTD невозможно правильно описать пользовательские атрибуты (data-*), поскольку в DTD каждый атрибут должен быть описан отдельно. Бесконечное количество вариантов — бесконечное описание. В итоге разработчики решили использовать свои валидаторы.

Схема Doctype

<!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]"
  • Элемент верхнего уровня: в HTML — <html>, в SVG — <svg>.
  • Публичность: публичный ресурс — PUBLIC, системный локальный — SYSTEM. HTML, XHTML — всегда PUBLIC.
  • Регистрация: зарегистрирован ли разработчик текущего DTD в международной организации по стандартизации (ISO). + — да, - — нет. W3C не зарегистрирован.
  • Уникальное название организации, разработавшей используемый DTD.
  • Тип описываемого документа. DTD.
  • Уникальное имя описания документа в DTD.
  • Язык описания.
  • URL документа формата DTD.

Примеры Doctype

  • HTML 5. Воспринимает все типы документов, DTD не требуется. Рекомендуемый вариант.
<!DOCTYPE html>
  • HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • SVG
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  • MathML
<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/mathml2.dtd">

Режимы браузеров

На данный момент существует три режима браузеров

  • Режим совместимости (Quirks mode).
  • Режим стандартов (Standards mode).
  • Режим почти стандартов (Almost standards mode).

Режим может оказывать влияние на разметку (layout), парсинг и валидацию HTML и CSS, DOM API.

Введение режимов позволило решить следующие проблемы:

  • устаревшие сайты могут ещё достаточно долго поддерживаться, не переписывая кодовую базу под новые стандарты
  • разработчики, знающие свои целевые стандарты, могут сами выбрать режим, изменяя Doctype.

Для проверки текущего режима в браузерах имеется свойство document.compatMode, которое выдаёт CSS1Compat, если установлен режим стандартов или режим почти стандартов, и BackCompat, если установлен режим совместимости.

Режим совместимости

В случае отсутствия Doctype или невалидного Docktype все браузеры переходят в режим совместимости, режим "причуд" (Quirks Mode). Режим совместимости предназначен для отображения веб-страницы подобно старым браузерам (для которых html-страницы до введения Doctype). В этом случае каждый браузер заменяет современную функциональность своими заглушками и происходят различные причуды (quirks), варьирующиеся от "ничего не происходит" до "всё падает с ошибками".

Пример невалидного Doctype, переводящего браузер в режим совместимости.

<!DOCTYPE html PUBLIC>

Пример валидного Doctype, переводящего браузер в режим совместимости (слишком старая версия HTML).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Пример того, что может происходить в режиме совместимости.

Режим стандартов

Наличие валидного Doctype последних версий выступает гарантией того, что современные браузеры обработают документ одинаково: в режиме стандартов (Standards mode).

Использование режима стандартов важно для поддержки современных возможностей браузеров по типу <video> и <canvas>.

Пример Doctype, переводящего браузер в режим стандартов с использованием нового браузерного валидатора.

<!DOCTYPE html>

Пример Doctype, переводящего браузер в режим стандартов с использованием старого валидатора, опирающегося на DTD-файл.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Режим почти стандартов

Режим почти стандартов (Almost standards mode) очень похож на режим стандартов, но имеет один quirk, касающийся случаев, когда картинка является единственным контентом какого-то блока (например, клетки таблицы (table cells)). Такие картинки в режиме стандартов являются встроенными элементами (inline), что создаёт дополнительный странный отступ снизу, зарезервированный для специальных символов, которых нет у картинок. Этот отстут можно было убрать только сделав картинку блочным элементов. Это не понравилось некоторым создателям браузеров и они решили ввести режим почти стандартов, исправляющий этот баг.

Пример Doctype, переводящего браузер в режим почти стандартов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Шаблонизаторы

HTML сам по себе не является полноценным языком программирования, поскольку в нём нет условных операторов, переменных циклов и других возможностей, характерных другим языкам. HTML-разметка является не более, чем простым текстом (строкой).

В наши дни веб-страницы являются достаточно динамичными, что достигается посредством изменения HTML на клиенте. Этой задачей занимается JavaScript, который работает с DOM (древовидным представлением HTML). Каждому HTML-элементу ставится в соответствие DOM-элемент. В DOM имеется множество методов, позволяющих искать, добавлять и удалять DOM-элементы, получать и изменять их атрибуты, стили, подписываться на события и делать многие другие вещи.

Если на сервере появляется необходимость работать с HTML, то чаще всего подразумевается генерация HTML (строки) для передачи на клиент, который в дальнейшем будет манипулировать ей при помощи JavaScript. В таком случае нет необходимости в методах, которые предлагает DOM API.

Генерируемый на сервере HTML обычно зависит от некоторых переменным.

В простейшем случае можно воспользоваться шаблонными строками, которые позволяют использовать переменные.

const generateHelloHtml = (name, styles = '') => `
  <!DOCTYPE html>
  <html>
    <head>
      <title>Hello</title>
      <style>${styles}</style>
    </head>
    <body>
      <p>Hello, ${name}</p>
    </body>
  </html>
`;

Тем не менее, такие "строки" могут сильно разрастаться: много переменных, условных операторов и строк кода в целом. Работать с ними становится затруднительно.

На помощь приходят шаблонизаторы (Template Engines). Они позволяют эффективно работать с HTML как со строкой, предоставляя возможности использования переменных, условий, циклов и многого другого. Достигается это посредством использования специального синтаксиса внутри строки, который распознаётся шаблонизатором и заменяется на обычные символы.

Самыми популярными на данный момент шаблонизаторами являются Handlebars и Mystache

Пример шаблона, написанного при помощи Hanblebars.

<!-- ./templates/hello.hbs -->
<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <style>{{styles}}</style>
  </head>
  <body>
    {{!-- комментарий, который не попадёт в сгенерированный HTML --}}
    <p>Hello, {{name}}</p>
  </body>
</html>

Использование

/* Node.js */
const fs = require('fs');
const handlebars = require('handlebars');

/* считываем данные из файла, в котором хранится шаблон */
const source = fs.readFileSync('./templates/hello.hbs', 'utf-8');

/* создаём шаблон */
const htmlTemplate = Handlebars.compile(source);

/* заполняем шаблон данными */
const styles = 'p { color: "red" }';

const html = helloHtmlTemplate({
  name: 'Notes',
  styles,
});
console.log(html); // "<!DOCTYPE html>..."