This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Эта страница требует современного браузера (с поддержкой SharedArrayBuffer). Пожалуйста, обновите Chrome, Edge, Firefox или Safari до последней версии.
HTML 超文本标记语言 describes a web page with tags 标签. A tag is a word in angle brackets, like <p>. Most come in pairs — an opening tag <p> and a closing tag </p> wrap some content. A tag plus its content is an element 元素.
The browser draws whatever is between the tags.
A tag you forget to close, or spell wrong, may not show correctly.
Русский
HTML описывает веб-страницу с помощью тегов. Тег — это слово в угловых скобках, например <p>. Большинство из них парные — открывающий тег <p> и закрывающий тег </p> оборачивают какой-то контент. Тег вместе с его контентом образует элемент.
<p>Hello, world!</p>
<p>This is my first web page.</p>
Браузер отображает всё, что находится между тегами.
Тег, который вы забыли закрыть или написали неверно, может отобразиться неправильно.
Один элемент = открывающий тег + контент + закрывающий тег
1.2
Заголовки и абзацы
English
Headings 标题 run from <h1> (biggest) down to <h6> (smallest). A paragraph 段落 is <p>. Use exactly one <h1> for the page's main title.
Русский
Заголовки идут от <h1> (самый крупный) до <h6> (самый мелкий). Абзац — это <p>. Используйте ровно один <h1> для главного заголовка страницы.
<h1>My Blog</h1>
<h2>About me</h2>
<p>I am learning to build web pages.</p>
1.3
Форматирование текста
English
Make text bold 加粗 with <strong> and italic 斜体 with <em>. A line break 换行 is <br> — it has no closing tag.
Common mistakes
Most tags come in pairs — <p>...</p>. Forgetting the closing tag breaks the layout below it.
The tag goes in angle brackets; the text you see goes between the opening and closing tags.
Headings run <h1> (biggest) to <h6> — do not pick a heading just for its size.
Русский
Сделайте текст жирным с помощью <strong> и курсивом с помощью <em>. Перенос строки — это <br> — у него нет закрывающего тега.
<p><strong>Warning:</strong> read this carefully.</p>
<p>First line<br>second line</p>
<p>You can <em>emphasise</em> any word.</p>
A link 链接 is an anchor <a>. Its href attribute 属性 holds the address it points to.
Add target="_blank" to open the link in a new tab.
Русский
Ссылка — это якорь <a>. Его атрибут href содержит адрес, на который она ведет.
<a href="https://example.com">Visit Example</a>
<br>
<a href="page2.html">Go to the next page</a>
Добавьте target="_blank", чтобы открыть ссылку во вкладке.
2.3
Изображения
English
An image 图片 is <img> — it has no closing tag. src is the picture's address; alt is text shown if the image cannot load (and read aloud to blind users).
Common mistakes
An image needs src (the file) and alt (a description); a link needs href.
<img> has no separate closing tag.
A broken src path shows nothing — check the file name and folder.
Русский
Изображение обозначается тегом <img> — у него нет закрывающего тега. src — адрес картинки; alt — текст, отображаемый при невозможности загрузки изображения (а также читаемый вслух для слабовидящих пользователей).
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/120px-Bitmap_VS_SVG.svg.png"
alt="bitmap versus vector" width="120">
<p>If the picture is missing, the alt text shows instead.</p>
Распространенные ошибки
Изображению необходимы src (файл) и alt (описание); для ссылки требуется href.
<img> не имеет отдельного закрывающего тега.
Неправильный путь к src не отобразит ничего — проверьте имя файла и папку.
A real page has a fixed skeleton 骨架. <!DOCTYPE html> says it is HTML5. Everything sits inside <html>. The <head> holds information about the page; the <body> holds what you see.
The <title> shows in the browser tab.
<meta charset="utf-8"> lets the page show any language.
Русский
Реальная страница имеет фиксированную структуру. Тег <!DOCTYPE html> указывает, что это HTML-страница 5. Всё размещается внутри <html>. Секция <head> содержит информацию о странице; секция <body> — то, что вы видите.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a complete page.</p>
</body>
</html>
Страница — это дерево: head описывает страницу, body содержит то, что вы видите
Содержимое тега <title> отображается на вкладке браузера.
Тег <meta charset="utf-8"> позволяет странице отображать любой язык.
3.2
Комментарии и вложенность
English
A comment 注释<!-- ... --> is a note the browser ignores. Tags nest 嵌套 inside one another; indent 缩进 each level so the structure stays clear. Close tags in the reverse order you opened them.
Common mistakes
Tags must nest, not overlap: <b><i>text</i></b>, never <b><i>text</b></i>.
A page needs <html>, a <head> (for the title and links) and a <body> (for what you see).
A comment is <!-- ... -->; the browser ignores it.
Русский
Комментарий <!-- ... --> — это заметка, которую браузер игнорирует. Теги вкладываются друг в друга; каждый уровень должен быть отступлен, чтобы структура оставалась понятной. Закрывающие теги должны идти в обратном порядке по отношению к открывающим.
<!-- a simple navigation bar -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
Распространенные ошибки
Теги должны быть вложенными, а не перекрывающимися: ⟨<b><i>text</i></b>⟩, никогда не ⟨<b><i>text</b></i>⟩.
Странице требуются: <html>, блок <head> (для заголовка и ссылок) и блок <body> (для содержимого).
Комментарий обозначается как <!-- ... -->; браузер его игнорирует.
A <div> is a generic block 块级 box that groups content on its own lines. A <span> is a generic inline 行内 box inside a line of text. You use them to group things so you can style or position them.
Semantic 语义 tags describe their role, which helps screen readers and search engines. Prefer them over plain <div> where they fit: <header>, <nav>, <main>, <section>, <article>, <footer>.
Common mistakes
<div> is a block (starts a new line); <span> is inline (stays in the text).
Use semantic tags like <header>, <nav> and <footer> where they fit, not <div> for everything.
Do not use a tag just for its default look — style it with CSS instead.
Русский
Элемент <div> — это универсальный блочный блок, группирующий контент на отдельных строках. Элемент <span> — это универсальный строчный блок внутри строки текста. Используйте их для группировки элементов, чтобы стилизовать или позиционировать их.
Семантические теги описывают свою роль, что помогает скринридерам и поисковым системам. Предпочитайте их обычным <div> там, где это уместно: <header>, <nav>, <main>, <section>, <article>, <footer>.
CSS 层叠样式表 styles HTML. The simplest way is a <style> block in the <head> (a bigger site uses a separate .css file with <link>). A CSS rule 规则 has a selector 选择器, then { property: value; } pairs called declarations 声明.
Русский
CSS стилизует HTML. Самый простой способ — блок <style> в <head> (на более крупном сайте используется отдельный файл .css со стилями <link>). Правило CSS имеет селектор, за которым следуют пары объявлений { property: value; }.
<style>
p { color: blue; font-size: 18px; }
h1 { color: darkred; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is blue.</p>
Подключите таблицу стилей, чтобы правила CSS стилизовали элементы HTML
6.2
Селекторы: класс и id
English
A class 类 styles many elements: add class="..." in HTML and write .name in CSS. An id 标识符 styles ONE element: id="..." and #name.
The selectors you will meet most, in one place:
Selector
Chooses
p
every <p> element
.note
everything with class="note"
#title
the one element with id="title"
h1, h2
several selectors at once
nav a
every <a> inside a <nav>
.btn:hover
one state of an element (see topic 10)
Common mistakes
A class selector starts with . and an id selector with #.
Link the stylesheet in the <head>, or put rules inside a <style> block.
A class can be reused on many elements; an id should appear once per page.
Русский
Класс стилизует множество элементов: добавьте class="..." в HTML и напишите .name в CSS. ID стилизует ОДИН элемент: id="..." и #name.
Set the text colour with color and the background 背景 with background-color. A colour can be a name (red), a hex 十六进制 code (#ff0000), or rgb(255, 0, 0).
Русский
Set the text colour with color and the background 背景 with background-color. A colour can be a name (red), a hex 十六进制 code (#ff0000), or rgb(255, 0, 0).
<style>
body { background-color: #f0f4ff; }
.card { background-color: white; color: #1e3a8a; padding: 12px; }
</style>
<div class="card">A card with its own colours.</div>
CSS colours: named, hex, and rgb()
7.2
Styling text
English
Common text properties: font-size, font-weight (e.g. bold), font-family 字体, text-align 对齐 (left / center / right), and line-height for spacing.
Common mistakes
color sets the text colour; background-color sets the background.
A colour can be a name, a #rrggbb hex code, or rgb(...).
End each declaration inside the braces with a semicolon ; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.
Русский
Common text properties: font-size, font-weight (e.g. bold), font-family 字体, text-align 对齐 (left / center / right), and line-height for spacing.
<style>
h1 { font-family: Arial, sans-serif; text-align: center; }
p { font-size: 18px; line-height: 1.6; }
</style>
<h1>Centered title</h1>
<p>Readable paragraph text with comfortable line spacing.</p>
Common mistakes
color sets the text colour; background-color sets the background.
A colour can be a name, a #rrggbb hex code, or rgb(...).
End each declaration inside the braces with a semicolon ; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.
Every element is a box with four layers, from inside out: the content 内容, the padding 内边距 (space inside the border), the border 边框, and the margin 外边距 (space outside the border).
Русский
Каждый элемент представляет собой блок с четырьмя слоями, от внутреннего к внешнему: содержимое, внутренняя обводка (отступ внутри рамки), рамка и внешний отступ (пространство снаружи рамки).
*Блочная модель: содержимое, затем внутренняя обводка, затем рамка, затем внешний отступ
8.2
Внешний и внутренний отступы
English
padding adds space inside the border, pushing the content inwards. margin adds space outside, pushing other boxes away. Give one value for all sides, or four (top right bottom left).
Русский
padding добавляет пространство внутри рамки, отодвигая содержимое внутрь. margin добавляет пространство снаружи, отодвигая другие блоки. Укажите одно значение для всех сторон или четыре (верх, право, низ, лево).
The display property sets how a box flows. block 块级 takes a whole line; inline 行内 sits within a line of text; none removes the box completely; flex lays the children in a row (next topic).
Common mistakes
Padding is inside the border; margin is the space outside it.
box-sizing: border-box makes the set width include padding and border — often what you want.
display: none hides an element completely; visibility: hidden leaves its space.
Русский
Свойство display определяет, как течёт блок. block занимает целую строку; inline располагается внутри строки текста; none полностью убирает блок; flex выстраивает дочерние элементы в ряд (следующая тема).
Set a box's width. To centre 居中 a block, give it a width and margin: 0 auto — auto shares the leftover space equally on the left and right.
Русский
Установите ширину блока через width. Чтобы отцентрировать блочный элемент, задайте ему ширину и margin: 0 auto — auto равномерно распределяет оставшееся пространство слева и справа.
Flexbox 弹性布局 lays children out in a row (or a column). Set display: flex on the parent — the container 容器. gap adds space between children; flex: 1 makes them share the width.
Русский
Flexbox располагает дочерние элементы в строку (или столбец). Задайте свойство display: flex родительскому элементу — контейнеру. Свойство gap добавляет пространство между детьми; свойство flex: 1 заставляет их делить ширину поровну.
A pseudo-class 伪类 styles an element in one particular state. :hover applies while the mouse is over the element. Add transition 过渡 so the change happens smoothly instead of jumping.
Other useful pseudo-classes: :focus (an input the user clicked into) and :first-child.
Русский
Псевдокласс стилизует элемент в определенном состоянии. :hover применяется, пока курсор мыши находится над элементом. Добавьте transition, чтобы изменение происходило плавно, а не скачкообразно.
Другие полезные псевдоклассы: :focus (поле ввода, на которое нажал пользователь) и :first-child.
*:hover стилизует элемент, пока указатель находится над ним
10.2
Позиционирование
English
Positioning 定位 moves a box away from its normal place. relative nudges the box (and makes it the anchor 锚点 for its children); absolute places a box exactly, measured from the nearest positioned parent; fixed pins it to the screen even when the page scrolls.
top, right, bottom, left say how far to move — they only work on positioned boxes.
Русский
Позиционирование смещает блок из его нормального положения. relative сдвигает блок (и делает его якорем для дочерних элементов); absolute размещает блок точно, измеряя расстояние от ближайшего позиционированного родителя; fixed закрепляет его на экране даже при прокрутке страницы.
top, right, bottom, left определяют, насколько далеко переместить элемент — они работают только на позиционированных блоках.
10.3
Медиа-запросы и адаптивный дизайн
English
A responsive 响应式 page adapts to the screen size. A media query 媒体查询 applies its rules only while a condition about the screen holds, such as max-width.
Design mobile-first 移动优先: write the phone styles first, then add @media (min-width: ...) rules for bigger screens.
Percent widths and max-width let boxes shrink with the screen.
Common mistakes
:hover sticks to its selector with no space: .btn:hover, not .btn :hover.
position: absolute is measured from the nearest positioned parent — give that parent position: relative.
A media query wraps whole rules: @media (max-width: 600px) { .a { ... } }.
Русский
Адаптивная страница подстраивается под размер экрана. Медиа-запрос применяет свои правила только до тех пор, пока выполняется условие о размере экрана, например, max-width.
<style>
.banner { background: #2563eb; color: white; padding: 16px; }
@media (max-width: 600px) {
.banner { background: #16a34a; } /* narrow screens turn green */
}
</style>
<div class="banner">Resize the window: blue when wide, green when narrow.</div>
Проектируйте сначала для мобильных устройств: пишите стили для телефона первыми, затем добавляйте правила @media (min-width: ...) для экранов побольше.
Процентные ширины и свойство max-width позволяют блокам уменьшаться вместе с экраном.
Распространенные ошибки
:hover прилипает к своему селектору без пробела: .btn:hover, а не .btn :hover.
position: absolute вычисляется от ближайшего позиционированного родителя — передайте этому родителю position: relative.
Pick one and the site follows you — notes, papers, videos and practice all open on it. · Выберите один, и сайт будет вести вас — конспекты, работы, видео и практика откроются там.
Type to search notes, lessons, code, vocabulary and past-paper questions across every subject. · Введите запрос для поиска заметок, уроков, кода, словаря и вопросов с реальных экзаменов по всем предметам.
