Auto | arch-x1: 2026-06-04 09:31:57
This commit is contained in:
Dmitry
@@ -398,10 +398,10 @@
|
||||
<section class="block" id="block-2">
|
||||
<h2>Блок 2. HTML</h2>
|
||||
<div class="cards">
|
||||
<article class="card" id="s-html-structure"><h3>Структура документа</h3><p>HTML5-документ начинается с `<!doctype html>`, затем `<html>`, внутри `<head>` с метаданными и `<body>` с видимым содержимым.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-html-comments"><h3>Комментарии в HTML</h3><p>Комментарий пишется как `<!-- текст -->`. Браузер его не отображает, но он виден в исходном коде.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-head"><h3>Теги внутри head</h3><p>В `<head>` обычно находятся `<title>`, `<meta>`, `<link>`, `<style>`, `<script>` и технические данные страницы.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-meta"><h3>Мета-теги и viewport</h3><p>`<meta charset="utf-8">` задаёт кодировку. `viewport` нужен адаптивной вёрстке: `width=device-width, initial-scale=1.0`.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-html-structure"><h3>Структура документа</h3><p>HTML5-документ начинается с <code><!doctype html></code>, затем <code><html></code>, внутри <code><head></code> с метаданными и <code><body></code> с видимым содержимым.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-html-comments"><h3>Комментарии в HTML</h3><p>Комментарий пишется как <code><!-- текст --></code>. Браузер его не отображает, но он виден в исходном коде.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-head"><h3>Теги внутри head</h3><p>В <code><head></code> обычно находятся <code><title></code>, <code><meta></code>, <code><link></code>, <code><style></code>, <code><script></code> и технические данные страницы.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-meta"><h3>Мета-теги и viewport</h3><p><code><meta charset="utf-8"></code> задаёт кодировку. <code>viewport</code> нужен адаптивной вёрстке: <code>width=device-width, initial-scale=1.0</code>.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-flow"><h3>Нормальный поток</h3><p>Нормальный поток — базовое расположение элементов без flex/grid/position: блочные идут сверху вниз, строчные текут внутри строки.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-block-inline"><h3>Блочные и строчные элементы</h3><p>Блочные занимают доступную ширину и начинаются с новой строки: `div`, `p`, `section`. Строчные занимают место по содержимому: `span`, `a`, `strong`.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-semantic"><h3>Семантические теги</h3><p>`header`, `nav`, `main`, `section`, `article`, `aside`, `footer` описывают смысл блоков. Это важно для доступности, SEO и читаемости кода.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
@@ -409,8 +409,8 @@
|
||||
<article class="card" id="s-class"><h3>Атрибут class</h3><p>`class` задаёт один или несколько CSS-классов. Один класс можно использовать на многих элементах.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-id"><h3>Идентификатор элемента</h3><p>`id` должен быть уникален на странице. Используется для якорей, JS и CSS-селектора `#id`.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-text-table"><h3>Заголовки, абзацы, списки, таблицы</h3><p>`h1-h6` задают структуру заголовков, `p` — абзац, `ul/ol/li` — списки, `table/tr/th/td` — табличные данные.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-img-link"><h3>Картинки и ссылки</h3><p>Ссылка: `<a href="...">`. Картинка: `<img src="..." alt="...">`; `alt` важен для доступности и случаев, когда изображение не загрузилось.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-whitespace"><h3>Переносы строк и пробелы</h3><p>В HTML последовательности пробелов схлопываются. Перенос строки в коде обычно не равен переносу на странице; для явного переноса есть `<br>`.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-img-link"><h3>Картинки и ссылки</h3><p>Ссылка: <code><a href="..."></code>. Картинка: <code><img src="..." alt="..."></code>; <code>alt</code> важен для доступности и случаев, когда изображение не загрузилось.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
<article class="card" id="s-whitespace"><h3>Переносы строк и пробелы</h3><p>В HTML последовательности пробелов схлопываются. Перенос строки в коде обычно не равен переносу на странице; для явного переноса есть <code><br></code>.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user