HTML基础入门教程

🌐 网页开发 · 零基础入门

HTML（超文本标记语言）是构建所有网页的基础语言。本教程将带你从零开始学习HTML，理解网页的基本结构和常用标签。

🎯教程目标

理解HTML的基本概念和作用
掌握HTML文档的基本结构
学会使用常用HTML标签
能够创建简单的网页页面

📋前置知识

本教程完全面向零基础学习者，无需任何编程经验。只需要一台电脑和一个文本编辑器（如记事本、VS Code等）即可开始学习！

🌐什么是HTML？

HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言[1,2](@ref)。它不是编程语言，而是一种标记语言，通过使用标签来描述网页的内容结构[4](@ref)。

HTML的全称含义

超文本（HyperText）：指网页具有超链接功能，可以通过点击链接跳转到其他页面或资源[1](@ref)
标记语言（Markup Language）：通过标签来定义文档结构和内容[2](@ref)
语言（Language）：一种计算机能够理解和解释的语法规则[3](@ref)

简单来说： HTML就像是网页的"骨架"，它定义了网页有什么内容（文字、图片、链接等），但不关心这些内容的具体外观（颜色、大小等），外观由CSS负责[4](@ref)。

📖HTML的发展历史

HTML由英国计算机科学家蒂姆·伯纳斯-李（Tim Berners-Lee）于1990年在欧洲核子研究中心（CERN）创立，最初是为了方便研究人员共享文档[1](@ref)。经过多年发展，HTML经历了多个版本迭代[4](@ref)：

HTML版本演进时间线

1991年：HTML首个公开描述出现
1995年：HTML 2.0发布，支持表单和表格
1997年：HTML 3.2和4.0发布，增加样式表和脚本支持
1999年：HTML 4.01发布，成为广泛应用的标准
2014年：HTML5正式定稿，增加多媒体和语义化标签[4](@ref)

💻第一个HTML页面

让我们创建一个最简单的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>这是我的第一个HTML页面。</p>
    <p>HTML让网页创建变得简单有趣！</p>
</body>
</html>

代码解释： <!DOCTYPE html> 声明文档类型为HTML5。<html> 是根元素，<head> 包含元数据，<body> 包含可见内容[6,7](@ref)。

📖HTML基本概念详解

1. 标签（Tags）

HTML标签是尖括号包围的关键词，用于定义不同的网页元素。标签通常是成对出现的，包括开始标签和结束标签[7](@ref)。

<!-- 成对标签示例 -->
<h1>这是一个标题</h1>
<p>这是一个段落</p>

<!-- 单标签（自闭合标签）示例 -->
<br />
<img src="image.jpg" alt="图片" />

2. 元素（Elements）

HTML元素由开始标签、内容和结束标签组成。元素是网页的基本构建块[4](@ref)。

<!-- HTML元素结构 -->
<p>这是一个段落元素</p>
<!-- 开始标签: <p> -->
<!-- 内容: 这是一个段落元素 -->
<!-- 结束标签: </p> -->

3. 属性（Attributes）

属性为HTML元素提供附加信息，总是出现在开始标签中，以名称/值对的形式出现[4](@ref)。

<!-- 属性示例 -->
<a href="https://www.example.com" target="_blank">访问示例网站</a>
<img src="photo.jpg" alt="描述文字" width="200" height="100" />
<p class="important" id="main-paragraph">重要段落</p>

🔗常用HTML标签介绍

以下是HTML中最常用的一些标签，它们是构建网页的基础[9,10](@ref)。

文本内容标签

<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<!-- 段落标签 -->
<p>这是一个段落文本</p>

<!-- 强调文本 -->
<strong>加粗文本</strong>
<em>斜体文本</em>
<span>行内文本容器</span>

链接和媒体标签

<!-- 超链接 -->
<a href="https://www.example.com">访问网站</a>
<a href="page.html">内部页面链接</a>

<!-- 图像 -->
<img src="image.jpg" alt="图片描述" />

<!-- 音频和视频（HTML5） -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>
<video controls width="250">
    <source src="video.mp4" type="video/mp4">
</video>

结构组织标签

<!-- 列表 -->
<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
</ul>
<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
</ol>

<!-- 表格 -->
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>