HTML 快速入门

HTML 快速入门

星苒鸭 Lv4
  2026-02-02 19:43 2026-02-02 19:43 创建   2026-03-05 19:20:55 2026-03-05 19:20:55 更新      678 字  2 分钟  

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

HTML 的基本文档结构

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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> 是最低级别的。

    1
    2
    <h1>主标题</h1>
    <h2>副标题</h2>

  • 段落标签 <p>: 用于定义段落。

    1
    2
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>

  • 链接标签 <a>: 用于创建超链接。href 属性定义了链接的目标地址。

    1
    <a href="https://www.google.com">点击这里访问谷歌</a>

  • 图片标签 <img>: 用于在页面上嵌入图像。src 属性是图片的地址，alt 属性为图片提供替代文本（在图片无法显示时出现）。

    1
    <img src="image.jpg" alt="一张描述性的图片" />

  • 列表标签 <ul> 和 <ol>:

    • <ul>: 无序列表 (Unordered List)，项目前通常显示为圆点。
    • <ol>: 有序列表 (Ordered List)，项目前通常显示为数字。
    • <li>: 列表项 (List Item)。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>

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

总结

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

  • 标题: HTML 快速入门
  • 作者: 星苒鸭
  • 创建于 : 2026-02-02 19:43:00
  • 更新于 : 2026-03-05 19:20:55
  • 链接: https://xingranya.cn/html-quick-start/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
HTML 快速入门
  1. HTML 的基本文档结构
  2. 常用基础标签
  3. 总结