# HTML 快速入门

作者：星苒鸭（xingranya）
发布日期：2026-02-02
更新时间：2026-02-02
原文：https://blog.xran.uk/html-quick-start/

HTML (HyperText Markup Language, 超文本标记语言) 是构建网页内容的骨架。无论多复杂的网站，其基础都是由 HTML 构成的。这篇笔记将带你快速了解 HTML 的基本结构和常用标签。

### HTML 的基本文档结构

每个 HTML 文档都有一个相似的基础结构，它告诉浏览器这是一个网页，并定义了内容的基本框架。

```html
<!DOCTYPE html>
<!-- 文档类型声明，告诉浏览器这是一个 HTML5 文档 -->
<html>
  <!-- HTML 文档的根元素 -->
  <head>
    <!-- head 部分包含文档的元数据，如标题、引用的样式表等，这部分内容不会显示在页面上 -->
    <meta charset="UTF-8" />
    <title>我的第一个网页</title>
  </head>
  <body>
    <!-- body 部分包含页面的所有可见内容，如文本、图片、链接等 -->
    <h1>你好，世界！</h1>
    <p>这是一个段落。</p>
  </body>
</html>
```

### 常用基础标签

掌握以下几个核心标签，你就可以开始构建简单的页面了。

- **标题标签 `<h1>` - `<h6>`**: 用于定义标题，`<h1>` 是最高级别的标题，`<h6>` 是最低级别的。
  ```html
  <h1>主标题</h1>
  <h2>副标题</h2>
  ```
- **段落标签 `<p>`**: 用于定义段落。
  ```html
  <p>这是第一个段落。</p>
  <p>这是第二个段落。</p>
  ```
- **链接标签 `<a>`**: 用于创建超链接。`href` 属性定义了链接的目标地址。
  ```html
  <a href="https://www.google.com">点击这里访问谷歌</a>
  ```
- **图片标签 `<img>`**: 用于在页面上嵌入图像。`src` 属性是图片的地址，`alt` 属性为图片提供替代文本（在图片无法显示时出现）。
  ```html
  <img src="image.jpg" alt="一张描述性的图片" />
  ```
- **列表标签 `<ul>` 和 `<ol>`**:
  - `<ul>`: 无序列表 (Unordered List)，项目前通常显示为圆点。
  - `<ol>`: 有序列表 (Ordered List)，项目前通常显示为数字。
  - `<li>`: 列表项 (List Item)。

  ```html
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
  </ul>

  <ol>
    <li>第一步</li>
    <li>第二步</li>
  </ol>
  ```

### 总结

HTML 负责定义网页的**结构和内容**。学习了这些基础后，你可以进一步探索 CSS（用于设计样式和布局）和 JavaScript（用于实现交互功能），从而构建出功能丰富、外观精美的现代网页。
