-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
182 lines (173 loc) · 21.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Web-дизайн: основы HTML, учебные материалы и ссылки">
<link rel="shortcut icon" href="../favicon.png" type="image/png">
<title>HTML: теги</title>
<link rel="stylesheet" href="../compact.css">
<link rel="stylesheet" href="../github.css">
<script src="../highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<nav class="menu">
<ul>
<li><a href="../">Web-дизайн</a></li>
<li><a href="#template">Шаблон</a></li>
<li><a href="#attributes">Атрибуты</a></li>
<li><a href="#tags">Теги</a></li>
<li><a href="#entity">Спецсимволы</a></li>
<li><a href="#lorem">Lorem ipsum</a></li>
</ul>
</nav>
<h1>Как устроен HTML</h1>
<div class="container">
<div class="blocks">
<ul class="txt">
<li>HTML – Язык <a href="https://ru.wikipedia.org/wiki/%D0%93%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82" target="_blank" rel="noopener noreferrer"> гипертекстовой</a> разметки, <a href="https://ru.wikipedia.org/wiki/HTML" target="_blank" rel="noopener noreferrer">HyperText Markup Language</a>. Как у любого языка, у HTML есть <i>грамматика и словарь</i>. Слова этого словаря записываются в <угловых> скобках и называются элементами, или тегами.</li>
<li>Теги используются для указания начала и конца элемента разметки, то есть, обычно <b>теги используются парами</b>.
К конечному элементу пары тегов добавляют «/». Так отмечают начало и конец параграфа, или абзаца: <b><p></b>Текст параграфа<b></p></b>. Парный тег – это <b>контейнер</b>.
Если начало и конец элемента совпадают, используют <b>одиночные теги</b>. Примеры одиночных тегов: <br>, <img>.</li>
<li>Для парных тегов работает <b>принцип вложенности</b>: вложенный тег (потомок) должен целиком находиться внутри тега предка, наподобие матрешки.
Ситуация типа <i><b></i></b> недопустима!</li>
<li>У любой HTML-страницы есть <b>основные теги</b>, задающие структуру, «скелет» всего документа.
Это <b><html></b>, <b><head></b>, <b><body></b>.
Если их нет в html-файле, браузер автоматически добавит недостающие элементы базовой разметки.</li>
<li>Теги HTML-документа выстраиваются в дерево зависимостей – <b><a href="https://ru.wikipedia.org/wiki/Document_Object_Model" target="_blank" rel="noopener noreferrer">Document Object Model</a>, DOM</b>. К положению элемента в DOM привязываются <i>стили</i> (CSS) и <i>скрипты</i> (JavaScript).</li>
</ul>
</div>
<div class="blocks">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/DOM-model.svg/464px-DOM-model.svg.png" alt="">
</div>
</div>
<h2 id="template">Шаблон HTML-страницы (сокращение Emmet «!»)</h2>
<pre><code><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Заголовок</title>
</head>
<body>
<!-- Основное содержимое -->
</body>
</html>
</code></pre>
<h2>Обязательные теги HTML-страницы</h2>
<pre><code><!DOCTYPE html>
<html lang="ru">
<meta charset="UTF-8">
<title>Заголовок</title>
</code></pre>
<h2 id="attributes">Атрибуты</h2>
<ul class="txt">
<li>У тегов могут быть <i>атрибуты</i> для управления содержимым. Они записываются внутри угловых скобок тега через пробел. Значение атрибута всегда заключается в кавычки ("")</li>
<li>У атрибутов есть <b>типы</b>: текст, число, путь к файлу и т.д.</li>
<li>Некоторые атрибуты тегов заданы в стандарте HTML по умолчанию.</li>
<li>Порядок следования атрибутов не важен</li>
</ul>
<p>Пример: одиночный тег <b><img></b> имеет <b>обязательные</b> атрибуты <b>src</b> типа "путь к файлу" и <b>alt</b> типа "текст"</p>
<pre><code><b><img src="path/to/example.jpg" alt="Alternate text"></b></code></pre>
<p>Существуют <b>глобальные атрибуты</b>, их можно применять ко всем тегам: <a href="https://www.w3schools.com/tags/ref_standardattributes.asp" target="_blank" rel="noopener noreferrer">список глобальных атрибутов</a>.</p>
<p><b>Некоторые глобальные атрибуты</b>:</p>
<ul>
<li><b>class</b> определяет класс, значение – имена классов;</li>
<li><b>id</b> – идентификатор, значение – <b>уникальный</b> идентификатор;</li>
<li><b>style</b> – стили, значение – код CSS;</li>
<li><b>hidden</b> – скрывает элемент, но не удаляет его из DOM. Аналогично применению стиля <b>display: none</b>;</li>
<li><b>title</b> – дополнительная информация в виде всплывающей подсказки, значение – текст.</li>
</ul>
<h2 id="tags">Основные теги</h2>
<ol>
<li><b>Структура и инструкции для построения HTML-документа:</b>
<ul>
<li><b><a href="https://developer.mozilla.org/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Doctype" target="_blank" rel="noopener noreferrer"><!DOCTYPE></a></b>. Указывается в первой строке документа и означает: <b>«Этот документ написан на HTML5». Не представлен в дереве документа DOM. Обязателен для корректного применения CSS</b>.</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/html" target="_blank" rel="noopener noreferrer">html</a>. Главный тег, сообщает браузеру, что это HTML-документ. Находится в основании дерева DOM и он – <b>корневой элемент</b>, или элемент верхнего уровня.</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/head" target="_blank" rel="noopener noreferrer">head</a>. Не всю информацию надо показывать на странице. Служебная информация – в «голове» документа.</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/title" target="_blank" rel="noopener noreferrer">title</a>,
<a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0" target="_blank" rel="noopener noreferrer">link</a>. Служебная информация: краткий заголовок и ссылки на внешние файлы (иконка, стилевой файл). Определяются в head.</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/meta" target="_blank" rel="noopener noreferrer">meta</a>. Любая информация о мета-данных, которая не может быть представлена другими, ориентированными на мета-данные, HTML элементами. Например, кодировка страницы.</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/body" target="_blank" rel="noopener noreferrer">body</a>. Все видимое в окне, вкладке браузера содержимое – в «теле» страницы.</li>
<li><a href="https://www.w3schools.com/tags/tag_comment.asp" target="_blank" rel="noopener noreferrer">комментарии</a>: <!-- игнорируются при построении страницы -->.</li>
</ul>
</li><li><b>Основная разметка</b>
<ul>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/Heading_Elements" target="_blank" rel="noopener noreferrer">Заголовки h1-h6</a>. Заголовки и подзаголовки улучшают читаемость текста.</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/p" target="_blank" rel="noopener noreferrer">p</a> и
<a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/br" target="_blank" rel="noopener noreferrer">br</a>. Параграф и принудительный перенос на новую строку. Заголовки <u>нельзя</u> вкладывать в параграфы!</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/hr" target="_blank" rel="noopener noreferrer">hr</a>. Разделитель содержимого, горизонтальная линия (display: block).</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/img" target="_blank" rel="noopener noreferrer">img</a>. Картинка, изображение (display: inline-block). В обязательном атрибуте src указывается путь к файлу или его URL. Распространенные форматы изображений: jpeg, png, svg, <a href="https://ru.wikipedia.org/wiki/WebP" target="_blank" rel="noopener noreferrer">webp</a>
(<a href="https://upload.wikimedia.org/wikipedia/commons/b/b2/Vulphere_WebP_OTAGROOVE_demonstration_2.webp" target="_blank" rel="noopener noreferrer">пример webp</a>):<br>
<a href="https://jpeg.org/" target="_blank" rel="noopener noreferrer"><img src="https://jpeg.org/images/jpeg-logo.png" height="90" alt=""></a>
<a href="https://www.w3.org/Graphics/SVG/" target="_blank" rel="noopener noreferrer"><img src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" height="90" alt=""></a>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/WebPLogo.svg" height="90" alt="">
</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/ul" target="_blank" rel="noopener noreferrer">ul</a> и
<a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/ol" target="_blank" rel="noopener noreferrer">ol</a>,
<a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/li" target="_blank" rel="noopener noreferrer">li</a>: ненумерованный и нумерованный списки, элемент списка (display: list-item).</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/a" target="_blank" rel="noopener noreferrer">a</a>. Ссылка. Атрибуты download, href, target и т.д.<br>
<b>Якорь</b> — это название после символа #, который указывает на элемент (идентификатор, ID) на текущей странице.</li>
<li>Стилистически выделенные строчные элементы:<br>
<a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/b" target="_blank" rel="noopener noreferrer">b</a> (<b>полужирный</b>, font-weight: bold),<br>
i (<i>курсив</i>, font-style: italic),<br>
<a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/u" target="_blank" rel="noopener noreferrer">u</a> (<u>подчеркнутый</u>, text-decoration: underline),<br>
s (<s>перечеркнутый</s>, text-decoration: line-through).
</li>
<li>sub (vertical-align: sub; font-size: smaller;), sup (vertical-align: super; font-size: smaller).</li>
</ul>
</li><li><b>Семантическая разметка</b>
<ul>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/header" target="_blank" rel="noopener noreferrer">header</a>. «Шапка» страницы. <b>Не путать с head!</b></li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/footer" target="_blank" rel="noopener noreferrer">footer</a> «Подвал» страницы.</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/main" target="_blank" rel="noopener noreferrer">main</a>. Основное содержимое страницы.</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/section" target="_blank" rel="noopener noreferrer">section</a>. Раздел, секция.</li>
<li><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/article" target="_blank" rel="noopener noreferrer">article</a>. Статья.</li>
</ul>
<p>Семантические теги по свойствам повторяют тег <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/div" target="_blank" rel="noopener noreferrer">div</a>.</p>
<p><a href="../examples/structure.html">Структура страницы с семантической разметкой</a></p>
</li>
</ol>
<h2>Сколько всего тегов HTML?</h2>
<p>Их 115–120, примерно как в <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%B5%D1%80%D0%B8%D0%BE%D0%B4%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D1%85%D0%B8%D0%BC%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2" target="_blank" rel="noopener noreferrer">периодической системе химических элементов</a> – таблице Менделеева:</p>
<img src="periodic-table-html-tags.png" alt=""><br>
<p>Источник: <a href="https://www.templatemonster.com/blog/periodic-table-of-html-tags-infographics/" target="_blank" rel="noopener noreferrer">templatemonster.com</a>,
<a href="https://www.templatemonster.com/blog/longreads/wp-content/uploads/2017/05/html-tags-infographics-mobile.jpg" target="_blank" rel="noopener noreferrer">версия для мобильных устройств</a>.</p>
<p><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">С описанием на русском языке</a>. Серым цветом отмечены устаревшие теги. Еще: <a href="https://eastmanreference.com/complete-list-of-html-tags" target="_blank" rel="noopener noreferrer">Полный список тегов HTML</a>.</p>
<h2 id="entity">Спецсимволы HTML</h2>
<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%BD%D0%B5%D0%BC%D0%BE%D0%BD%D0%B8%D0%BA%D0%B8_%D0%B2_HTML" target="_blank" rel="noopener noreferrer">Спецсимволы</a> – запоминающиеся (мнемонические) обозначения символов вида <b>&слово;</b>. Они входят в стандарт HTML.</p>
<p>Когда использование спецсимволов – единственная возможность отобразить символ на web-странице:</p>
<ul>
<li>Знак меньше: <, мнемоника <b>&lt;</b> Потому что с него начинаются теги.</li>
<li><a href="https://ru.wikipedia.org/wiki/%D0%9D%D0%B5%D1%80%D0%B0%D0%B7%D1%80%D1%8B%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB" target="_blank" rel="noopener noreferrer">неразрывный пробел</a>, мнемоника <b>&nbsp;</b>. Потому что в коде HTML игнорируется более одного пробела подряд.</li>
</ul>
<p>Другие часто используемые спецсимволы:</p>
<ul>
<li>Знак больше >: <b>&gt;</b></li>
<li>короткое – тире <b>&ndash;</b> и длинное — тире <b>&mdash;</b></li>
<li>двойные угловые <a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D0%B2%D1%8B%D1%87%D0%BA%D0%B8" target="_blank" rel="noopener noreferrer">кавычки</a>, или французские кавычки, или «ёлочки»: <b>&laquo;</b> и <b>&raquo;</b></li>
<li><a href="https://ru.wikipedia.org/wiki/%D0%90%D0%BC%D0%BF%D0%B5%D1%80%D1%81%D0%B0%D0%BD%D0%B4" target="_blank" rel="noopener noreferrer">амперсанд</a> &: <b>&amp;</b></li>
<li><a href="https://ru.wikipedia.org/wiki/%D0%97%D0%BD%D0%B0%D0%BA_%D0%BA%D0%BE%D0%BF%D0%B8%D1%80%D0%B0%D0%B9%D1%82%D0%B0" target="_blank" rel="noopener noreferrer">копирайт</a> ©: <b>&copy;</b></li>
</ul>
<h2 id="lorem">Чем заполняют макеты?</h2>
<p>Текстом <a href="https://ru.wikipedia.org/wiki/Lorem_ipsum" target="_blank" rel="noopener noreferrer">Lorem ipsum</a>, который не имеет перевода. Слово «lorem» получилось из-за переноса «dolorem» на новую страницу после первого слога.<br>
Фраза «dolorem ipsum» встречается в философском трактате Цицерона «О пределах добра и зла», написанном в 45 году до н.э. на латинском языке.</p>
<ul>
<li>В оригинале: <i>«Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit ...»</i></li>
<li>Перевод: <i>«Нет никого, кто любил бы свою боль, кто искал бы ее и хотел бы чтобы она была у него. Потому что это боль...»</i></li>
</ul>
<p>Первые 100 слов, вызываются сокращением <a href="../tools/#workflow">Emmet</a> <b>lorem100</b>:</p>
<p style="max-width:900px; text-align: justify">Lorem ipsum, <em>dolor</em>
sit amet consectetur adipisicing elit. Optio animi alias porro ipsam illum exercitationem odit cum perspiciatis quidem, a perferendis eum minus ea sapiente corporis libero quos ullam, debitis assumenda? Corrupti, culpa! Ut fuga corrupti culpa eligendi voluptas, molestiae aliquid quod soluta, nostrum doloribus maxime numquam illo facilis obcaecati excepturi expedita pariatur ullam necessitatibus ex eius odit, similique saepe omnis officiis. Maiores facilis ullam architecto numquam non tempore magni quae deleniti? Corrupti aspernatur officia qui recusandae quis mollitia facere illum corporis cum id harum, odit maxime repellat tempore deleniti exercitationem iste ullam suscipit provident delectus, sed necessitatibus doloremque. Excepturi?</p>
<h2>Альтернативы HTML?</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/68/XML.svg" height="90" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/35/SGML.svg" height="90" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg" height="90" alt="">
<p>Языков разметки много, и HTML – всего один из множества, хотя сегодня и самый популярный. Существует <a href="https://ru.wikipedia.org/wiki/SGML" target="_blank" rel="noopener noreferrer">SGML</a> (Standard Generalized Markup Language), стандартный обобщённый язык разметки.</p>
<p>Языки HTML и XML произошли от SGML. HTML был приложением SGML, а XML – это подмножество SGML, разработанное для упрощения процесса машинного разбора документа.
В 2000-х годах у консорциума W3C было серьезное намерение перевести веб на XML. К счастью, этого не случилось.</p>
<p><a href="https://ru.wikipedia.org/wiki/Markdown" target="_blank" rel="noopener noreferrer">Markdown</a> – <a href="https://en.wikipedia.org/wiki/Lightweight_markup_language" target="_blank" rel="noopener noreferrer">облегчённый язык разметки</a>, созданный с целью написания легко читаемого и удобного для правки текста, но пригодного для преобразования в другие форматы (например, HTML). <b>Подходит для самых простых страниц, но требует конвертации в HTML</b>.</p>
<p><a href="https://ru.wikipedia.org/wiki/%D0%A1%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D1%8F%D0%B7%D1%8B%D0%BA%D0%BE%D0%B2_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2" target="_blank" rel="noopener noreferrer">Сравнение языков разметки документов</a>.</p>
</body>
</html>