Структура языка html кратко

semyonnaumov / gist:b5a0631b2f34437f7928093c52fafa46

Данный конспект содержит основную информацию о языке разметки HTML: что такое HTML, зачем он нужен, как используется. Также кратко описана струтктура HTML-документа, список основных тегов с описанием их назначения, перечень параметров данных тегов.

HTML, он же HyperText Markup Languge — язык разметки гипертекста, используется для описания структуры содержимого веб-страниц, а именно, расположения элементов друг относительно друга, их внешнего представлния, их функций. Элементами веб-страницы могут быть заголовок, боковое меню, окошко поиска, странички с контентом, встроенное видео и т.д. HTML Определяет, как они будут отображаться (шрифт, размер, используемые стили), как они будут расположены на странице, как они будут взаимодействовать (ссылки, выпадающие списки, зависимые поля). Для красивого отображения элементов в HTML и страницы в целом обычно используеттся CSS (Cascading Style Sheets) — документ описания стилей. Также в веб-страницы можно встраивать динамические элементы, например, браузерные игры, перемещаемые пользовалелем окошки, кнопки со сложным поведением и т.д. Все это становится возможным благодаря использованию скриптов, написанных на JavaScript, которые также явно указываются в HTML-документе.

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

Обычно HTML-разметка страницы содержится в файле index.html .

HTML документ состоит из тегов. HTML не чувствителен к регистру в имени тегов!

Теги бывают с содержимым: Содержимое и пустыми:
. Теги можно вкладывать друг в друга:

html> head> Информация в head head> head>

Внутри тега можно задавать параметры или, что то же самое, атрибуты:

Каждый HTML документ начинается с тега-декларации . Таким образом браузер понимает, что он читает именно HTML. Далее идет корневой тег , в который вложены все остальные теги — . В нем находятся два тега и . Первый нужен для хранения метаинформации, которая не отображается на странице: заголовка, скриптов, стилей и т.д.. Второй используется для описания видимых частей страницы.

> html> head> Информация в head head> body> Информация в body body> html>

Тег	С содержимым	Описание
	нет	Тег-декларация документа
	да	Корневой тег
	да	Тег для метаинформанции
	да	Определяет тело документа (видимую область)

Тег используется для описания метаинформации о веб странице (информация об информации). Эта информация не видна пользователю, а используется браузерами и поисковыми движками.

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

meta charset pl-s">UTF-8"> meta name pl-s">description" content pl-s">Free Web tutorials"> meta name pl-s">keywords" content pl-s">HTML,CSS,XML,JavaScript"> meta name pl-s">author" content pl-s">John Doe">

Для того, чтобы сделать веб-страницу адаптивной, т.е. чтобы она подстраивалась под разменры экрана устройства, нужно использовать viewport . Этот параметр обязательно надо добавлять для всех страниц (если конечно хотите сделать веб-страницу пригодной для использования в 2019+ году :-)).

meta name pl-s">viewport" content pl-s">width=device-width, initial-scale=1.0">

Внутри можно задавать внутрениие стили для документа:

style> header < text-allign: center; > style>

link rel pl-s">stylesheet" href pl-s">mystyle.css">

Также внутри обычно указываются срипты:

script> function myFunction  document.getElementById("demo").innerHTML = "Hello JavaScript!"; > script>

Еще один тег — — используется для указания основного URL страницы, относительно которого разрешаются все остальные URL на странице:

base href pl-s">https://www.w3schools.com/images/" target pl-s">_blank">

HTML5 предоставляет набор тегов для удобной разметки стандартной структуры большинства страниц

body> header> nav> Navigation nav> header> section> main> article> Article article> article> Article article> main> aside> Aside element aside> section> footer> Footer footer> body>

Текст в HTML обычно помещают в заголовках:

h1> Заголовок первого уровня h1> h6> Заголовок шестого уровня h6>

p> Какая-нибудь статья p> pre> Какая-нибудь статья с сохранением переносов строк и пробелов pre>

blockquote site pl-s">http://twitter.com"> "Самое трудное в жизни - засунуть одеяло в пододеяльник" - Джейсон Стетхем blockquote>

Для форматирования используется следующий набор тегов:

Тег	Описание
	Ссылка куда-нибудь — подчеркивание и другой цвет
	Bold
	Italics
	Italics with emphasis
	Bold with emphasis
	Bold with emphasis
	Переход на другую строку
Кавычки

table class pl-s">styled"> tr> th colspan pl-s">3">Spanning 3 Columnsth> tr> tr> td rowspan pl-s">3">Table Datatd> td>Table Datatd> td>Table Datatd> tr> tr> td>Table Datatd> td>Table Datatd> tr> tr> td>Table Datatd> td>Table Datatd> tr> table>

table class pl-s">styled"> colgroup> col style pl-s">background-color: blueviolet;"> colgroup> colgroup> col style pl-s">background-color: #f4e767;" span pl-s">2"> colgroup> thead> tr> th>First Nameth> th>Last Nameth> th>Emailth> tr> thead> tbody> tr> td>Johntd> td>Doetd> td>Johnny.doe@gmail.comtd> tr> tr> td>Janetd> td>Doetd> td>i_heart_johnny@gmail.comtd> tr> tbody> table>

Более детальное описание структуры HTML

Тег	Самые важные атрибуты	Описание
—	?	Заголовки разных уровней
	style (CSS cстиль), title (заголовок параграфа)	Параграф
style (CSS cстиль), title (заголовок параграфа)	Аналог параграфа, сохраняет пробелы и переносы строк
	href (куда ссылается)	Ссылка куда-нибудь
	src, alt (альтернатива картинке, напр. текстовое описание), width, heigth	Картинка
	?	Кнопка
	?	Unordered list
	?	Ordered list
	?	List item
	?	Переход на другую строку
	?	Horizontal row (разделитель текста)

Источник