零基础入门：超文本标记语言（HTML）完全指南

十一月 20, 2025 / 樱羽雨奈 / 16阅读 / 0评论

欢迎来到网页设计的奇妙世界！如果您梦想拥有自己的网站，那么学习 HTML (HyperText Markup Language) 就是您迈出的第一步。它不仅是构建网页的基础，而且非常容易学习！

这篇文章将带您快速了解 HTML 的核心概念，并指导您创建您的第一个网页。

🚀 HTML 是什么？

简单来说，超文本标记语言 (HTML) 是一种用于创建网页的标准标记语言。

创建网站的基石： 您可以使用 HTML 来构建自己的 WEB 站点。
运行环境： HTML 文件在您的浏览器上运行，并由浏览器进行解析和展示。

✨ HTML 很容易学习！

别担心复杂的编程概念。HTML 使用简单、直观的标签来组织内容（比如标题、段落、图片等）。只要掌握了这些标签的用法，您就能快速上手。

📚 实例是最好的老师

本指南（以及各种优秀的教程）都包含大量的 HTML 实例。最好的学习方法就是动手实践！

💡 小贴士： 许多在线编辑器允许您轻松地在线修改 HTML 代码，并即时查看运行结果。这将大大加快您的学习进度！

🌐 创建一个 HTML 网页的结构

所有标准的 HTML 网页都遵循一个基本结构。下面是一个完整的最小示例，我们来逐行解析它：

HTML 实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

代码结构解析

代码行	标签 / 声明	作用描述
`<!DOCTYPE html>`	文档类型声明	声明文档是 HTML5 标准，告诉浏览器如何解析页面。
`<html>`	根元素	整个 HTML 文档的根元素，所有内容都在此标签内。
`<head>`	头部	包含关于文档的元数据，如字符集、页面标题等，不会显示在网页主体中。
`<meta charset="utf-8">`	字符集	【重要】声明文档的字符编码，确保中文字符正常显示，避免乱码。
`<title>`	页面标题	定义浏览器标签页上显示的文本。
`<body>`	网页主体	包含文档的所有可见内容，如标题、段落、图片、链接等。
`<h1>`	标题	定义一个一级标题。HTML 提供了 $h1$ 到 $h6$ 六个级别的标题。
`<p>`	段落	定义一个段落。

⚠️ 重要提醒：中文网页编码

如果您创建的网页包含中文字符，字符编码的设置至关重要！

标准设置：对于绝大多数中文网页，推荐使用：
<meta charset="utf-8">
UTF-8 是目前最通用的国际化编码，可以兼容各种语言。
特定情况：有些旧浏览器或特定环境（如早期的 360 浏览器）可能默认使用 GBK 编码。如果遇到乱码问题，您可能需要将其设置为：
<meta charset="gbk">

#HTML(9)

文章作者：樱羽雨奈

文章链接：https://www.xiyung.cn/archives/html-1

樱羽雨奈の小屋