跳到主要内容

HTML 教程

欢迎学习 HTML！本教程将带你从零基础开始，逐步掌握 HTML 的核心知识和技能。

什么是 HTML？​

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，用于描述网页的结构和内容。

HTML 的核心概念​

1. 标记语言​

HTML 使用"标签"来标记网页中的内容。标签由尖括号 <> 包裹，通常成对出现：

<标签名>内容</标签名>

例如：

<p>这是一个段落</p>
<h1>这是一级标题</h1>

2. 元素和标签的区别​

  • 标签（Tag）：标记的开始和结束，如 <p> 和 </p>
  • 元素（Element）：包含开始标签、内容和结束标签的完整结构
<p>这是段落元素</p>
<!-- 
  <p> 是开始标签
  "这是段落元素" 是内容
  </p> 是结束标签
-->

3. HTML 文档结构​

一个基本的 HTML 文档包含以下部分：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <h1>欢迎学习 HTML</h1>
    <p>这是网页的主要内容</p>
</body>
</html>

各部分说明：

部分说明
<!DOCTYPE html>声明文档类型，告诉浏览器使用 HTML5 标准
<html>根元素，包含所有 HTML 内容
<head>头部信息，不显示在页面中
<body>主体内容，显示在页面中

HTML 能做什么？​

  1. 创建网页结构：定义标题、段落、列表、图片等元素
  2. 嵌入多媒体：添加图片、音频、视频
  3. 创建表单：收集用户输入
  4. 建立链接：连接其他网页
  5. 语义化标记：使用语义化标签提高可访问性和 SEO

为什么学习 HTML？​

  1. 网页基础：所有网站都基于 HTML 构建
  2. 入门简单：语法直观，容易上手
  3. 必备技能：前端开发的必学内容
  4. 结合 CSS/JS：可以创建完整的网页应用

教程目录​

HTML 基础​

HTML 进阶​

CSS 基础​

CSS 进阶​

学习建议​

  1. 动手实践：每学一个标签，都要亲自编写代码测试
  2. 使用开发者工具：浏览器 F12 打开开发者工具，查看页面结构
  3. 循序渐进：从简单标签开始，逐步深入
  4. 参考文档：遇到问题查阅 MDN Web Docs

参考资源​

准备好开始学习了吗？点击下一章开始你的 HTML 学习之旅！