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 元素.
<p>Hello, world!</p>
<p>This is my first web page.</p>
| English | Chinese | Pinyin |
|---|---|---|
| HTML | 超文本标记语言 | chāo wén běn biāo jì yǔ yán |
| tag | 标签 | biāo qiān |
| element | 元素 | yuán sù |
Headings 标题 run from <h1> (biggest) down to <h6> (smallest). A paragraph 段落 is <p>. Use exactly one <h1> for the page's main title.
<h1>My Blog</h1>
<h2>About me</h2>
<p>I am learning to build web pages.</p>
| English | Chinese | Pinyin |
|---|---|---|
| heading | 标题 | biāo tí |
| paragraph | 段落 | duàn luò |
Make text bold 加粗 with <strong> and italic 斜体 with <em>. A line break 换行 is <br> — it has no closing tag.
<p><strong>Warning:</strong> read this carefully.</p>
<p>First line<br>second line</p>
<p>You can <em>emphasise</em> any word.</p>
Common mistakes
<p>...</p>. Forgetting the closing tag breaks the layout below it.<h1> (biggest) to <h6> — do not pick a heading just for its size.| English | Chinese | Pinyin |
|---|---|---|
| bold | 加粗 | jiā cū |
| italic | 斜体 | xié tǐ |
| line break | 换行 | huàn háng |
An unordered list 无序列表 <ul> shows bullets; an ordered list 有序列表 <ol> shows numbers. Each list item 列表项 is an <li>.
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
<ol>
<li>Wake up</li>
<li>Go to school</li>
</ol>
| English | Chinese | Pinyin |
|---|---|---|
| unordered list | 无序列表 | wú xù liè biǎo |
| ordered list | 有序列表 | yǒu xù liè biǎo |
| list item | 列表项 | liè biǎo xiàng |
A link 链接 is an anchor <a>. Its href attribute 属性 holds the address it points to.
<a href="https://example.com">Visit Example</a>
<br>
<a href="page2.html">Go to the next page</a>
target="_blank" to open the link in a new tab.| English | Chinese | Pinyin |
|---|---|---|
| link | 链接 | liàn jiē |
| attribute | 属性 | shǔ xìng |
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).
<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>
Common mistakes
src (the file) and alt (a description); a link needs href.<img> has no separate closing tag.src path shows nothing — check the file name and folder.| English | Chinese | Pinyin |
|---|---|---|
| image | 图片 | tú piàn |
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.
<!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>
<title> shows in the browser tab.<meta charset="utf-8"> lets the page show any language.| English | Chinese | Pinyin |
|---|---|---|
| skeleton | 骨架 | gǔ jià |
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.
<!-- a simple navigation bar -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
Common mistakes
<b><i>text</i></b>, never <b><i>text</b></i>.<html>, a <head> (for the title and links) and a <body> (for what you see).<!-- ... -->; the browser ignores it.| English | Chinese | Pinyin |
|---|---|---|
| comment | 注释 | zhù shì |
| nest | 嵌套 | qiàn tào |
| indent | 缩进 | suō jìn |
A table 表格 <table> is built from rows <tr>. A header cell 单元格 is <th> (bold, centred); a normal data cell is <td>.
<table border="1" cellpadding="6">
<tr><th>Name</th><th>Score</th></tr>
<tr><td>Mei</td><td>88</td></tr>
<tr><td>Sam</td><td>71</td></tr>
</table>
| English | Chinese | Pinyin |
|---|---|---|
| table | 表格 | biǎo gé |
| cell | 单元格 | dān yuán gé |
A form 表单 <form> collects input from the user. An <input> is a box; a <label> names it; a <button> submits 提交 it.
<form>
<label>Name: <input type="text"></label>
<br><br>
<label>Age: <input type="number"></label>
<br><br>
<button type="submit">Send</button>
</form>
<input> type values: text, number, email, password, checkbox.Common mistakes
<tr> holds the <td> cells.<label> so it is clear and accessible.type="button" if you do not want that.| English | Chinese | Pinyin |
|---|---|---|
| form | 表单 | biǎo dān |
| submit | 提交 | tí jiāo |
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.
<div>
<span>Price:</span> <span>$9.99</span>
</div>
<div>
<span>Stock:</span> <span>in stock</span>
</div>
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>.
<header><h1>My Site</h1></header>
<main>
<section>
<h2>News</h2>
<p>Today we launched the site.</p>
</section>
</main>
<footer>© 2026 My Site</footer>
Common mistakes
<div> is a block (starts a new line); <span> is inline (stays in the text).<header>, <nav> and <footer> where they fit, not <div> for everything.| English | Chinese | Pinyin |
|---|---|---|
| block | 块级 | kuài jí |
| inline | 行内 | xíng nèi |
| semantic | 语义 | yǔ yì |
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 声明.
<style>
p { color: blue; font-size: 18px; }
h1 { color: darkred; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is blue.</p>
| English | Chinese | Pinyin |
|---|---|---|
| CSS | 层叠样式表 | céng dié yàng shì biǎo |
| rule | 规则 | guī zé |
| selector | 选择器 | xuǎn zé qì |
| declaration | 声明 | shēng míng |
A class 类 styles many elements: add class="..." in HTML and write .name in CSS. An id 标识符 styles ONE element: id="..." and #name.
<style>
.note { color: green; }
#title { font-size: 24px; }
</style>
<h1 id="title">Welcome</h1>
<p class="note">First note.</p>
<p class="note">Second note.</p>
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
. and an id selector with #.<head>, or put rules inside a <style> block.| English | Chinese | Pinyin |
|---|---|---|
| class | 类 | lèi |
| id | 标识符 | biāo shí fú |
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>
| English | Chinese | Pinyin |
|---|---|---|
| background | 背景 | bèi jǐng |
| hex | 十六进制 | shí liù jìn zhì |
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.#rrggbb hex code, or rgb(...).; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.| English | Chinese | Pinyin |
|---|---|---|
| font | 字体 | zì tǐ |
| align | 对齐 | duì qí |
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).
<style>
.box { background: #dbeafe; border: 3px solid #2563eb;
padding: 16px; margin: 20px; }
</style>
<div class="box">content + padding + border + margin</div>
| English | Chinese | Pinyin |
|---|---|---|
| content | 内容 | nèi róng |
| padding | 内边距 | nèi biān jù |
| border | 边框 | biān kuāng |
| margin | 外边距 | wài biān jù |
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).
<style>
.a { background: #fde68a; padding: 4px; }
.b { background: #bbf7d0; padding: 20px; margin-top: 16px; }
</style>
<div class="a">tight padding</div>
<div class="b">roomy padding</div>
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).
<style>
.hidden { display: none; }
.chip { display: inline; background: #e0e7ff; padding: 2px 8px; border-radius: 6px; }
</style>
<p>Visible text. <span class="hidden">(secret)</span> <span class="chip">a chip</span></p>
Common mistakes
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.| English | Chinese | Pinyin |
|---|---|---|
| block | 块级 | kuài jí |
| inline | 行内 | xíng nèi |
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.
<style>
.page { width: 300px; margin: 0 auto; background: #e0e7ff;
padding: 16px; text-align: center; }
</style>
<div class="page">A centered, fixed-width page.</div>
| English | Chinese | Pinyin |
|---|---|---|
| centre | 居中 | jū zhōng |
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.
<style>
.row { display: flex; gap: 10px; }
.row div { background: #93c5fd; padding: 12px; flex: 1; text-align: center; }
</style>
<div class="row">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
| English | Chinese | Pinyin |
|---|---|---|
| Flexbox | 弹性布局 | tán xìng bù jú |
| container | 容器 | róng qì |
Combine boxes, colours, text and spacing into one small component 组件.
<style>
.card { width: 240px; margin: 0 auto; border: 1px solid #cbd5e1;
border-radius: 12px; padding: 16px; font-family: sans-serif; }
.card h2 { margin: 0; color: #1e3a8a; }
.card .role { color: #64748b; margin: 4px 0 8px; }
</style>
<div class="card">
<h2>Mei Chen</h2>
<p class="role">Student · Grade 11</p>
<p>Loves maths and building web pages.</p>
</div>
Common mistakes
margin: 0 auto.display: flex on the CONTAINER, not on the items.% is relative to the parent, so check the parent's width too.| English | Chinese | Pinyin |
|---|---|---|
| component | 组件 | zǔ jiàn |
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.
<style>
.btn { background: #2563eb; color: white; padding: 10px 18px;
border: none; border-radius: 8px; font-size: 16px;
transition: background 0.3s; }
.btn:hover { background: #16a34a; }
</style>
<button class="btn">Hover me</button>
:focus (an input the user clicked into) and :first-child.| English | Chinese | Pinyin |
|---|---|---|
| pseudo-class | 伪类 | wěi lèi |
| transition | 过渡 | guò dù |
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.
<style>
.card { position: relative; width: 260px; height: 90px;
background: #dbeafe; border-radius: 10px; padding: 12px; }
.badge { position: absolute; top: -10px; right: -10px;
background: #dc2626; color: white; padding: 4px 10px;
border-radius: 999px; font-size: 13px; }
</style>
<div class="card">
A product card
<span class="badge">NEW</span>
</div>
top, right, bottom, left say how far to move — they only work on positioned boxes.| English | Chinese | Pinyin |
|---|---|---|
| positioning | 定位 | dìng wèi |
| anchor | 锚点 | máo diǎn |
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.
<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: ...) rules for bigger screens.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.@media (max-width: 600px) { .a { ... } }.| English | Chinese | Pinyin |
|---|---|---|
| responsive | 响应式 | xiǎng yìng shì |
| media query | 媒体查询 | méi tǐ chá xún |
| mobile-first | 移动优先 | yí dòng yōu xiān |