HTML 教程

纯干货教学，从零开始学习 HTML

欢迎学习 HTML

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。本教程将为您提供 HTML 的全面指导，从基础到高级，帮助您快速掌握 HTML 技能。

🎯 开始您的 HTML 学习之旅

无论您是完全的初学者还是有经验的开发者，本教程都将帮助您掌握 HTML 的核心概念和实践技能。

📚 学习路径

基础入门

适合完全的初学者，从最基础的概念开始学习

开始学习

进阶技巧

适合有一定基础的学习者，学习更高级的 HTML 特性

查看内容

实用工具

使用我们的实用工具，加速您的学习和开发过程

探索工具

什么是 HTML？

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它使用一系列标签来描述网页的内容，如标题、段落、图像、链接等。

HTML 文档由 HTML 元素组成，这些元素由开始标签、内容和结束标签构成。

<!DOCTYPE html> 
<html> 
<head> 
    <title>页面标题</title> 
</head> 
<body> 
    <h1>这是一个标题</h1> 
    <p>这是一个段落</p> 
</body> 
</html>

HTML 的历史发展

HTML 由蒂姆·伯纳斯-李（Tim Berners-Lee）在 1991 年发明，最初是为了帮助科学家在 CERN（欧洲核子研究组织）之间共享研究文档。随着互联网的发展，HTML 也在不断演进：

  • HTML 1.0（1993）：第一个官方版本，包含基本的文本格式化和链接功能
  • HTML 2.0（1995）：添加了表单和表格功能
  • HTML 3.2（1997）：添加了更多样式和布局功能
  • HTML 4.01（1999）：添加了更多语义化标签和样式控制
  • XHTML 1.0（2000）：基于 XML 的严格版本
  • HTML5（2014）：添加了大量新功能，如语义化标签、音频/视频支持、Canvas 绘图等

HTML 的版本演变

HTML5 是目前最新的稳定版本，它引入了许多新特性，使网页开发更加灵活和强大：

  • 语义化标签：<header>、<nav>、<section>、<article>、<footer> 等
  • 多媒体支持：<audio> 和 <video> 标签
  • Canvas 绘图：用于动态图形和动画
  • 本地存储：localStorage 和 sessionStorage
  • 地理定位：获取用户位置信息
  • 拖放 API：实现元素的拖放功能
  • 表单增强：新的输入类型和验证功能

为什么学习 HTML？

  • HTML 是 Web 开发的基础：所有网页都是基于 HTML 构建的，学习 HTML 是进入 Web 开发领域的第一步
  • 了解 HTML 有助于理解如何构建网站：掌握 HTML 可以帮助你理解网页的结构和工作原理
  • HTML 与 CSS 和 JavaScript 一起使用，创建交互式网页：HTML 提供结构，CSS 提供样式，JavaScript 提供交互功能
  • HTML 是前端开发的必备技能：无论是成为前端开发者、全栈开发者还是内容创作者，HTML 都是必备的基础知识
  • HTML 易于学习：相比其他编程语言，HTML 的语法简单直观，容易上手
  • HTML 有广泛的应用场景：除了网站开发，HTML 还用于电子邮件模板、移动应用界面、电子书等领域
  • HTML 是开源标准：由 W3C（万维网联盟）维护，免费使用，不受任何公司控制

HTML 的应用场景

  • 网站开发：创建个人网站、企业网站、电子商务网站等
  • 移动应用：使用 HTML5 构建跨平台的移动应用
  • 电子邮件模板：创建格式化的电子邮件内容
  • 电子书：使用 HTML 构建交互式电子书
  • 游戏开发：使用 HTML5 Canvas 和 JavaScript 开发网页游戏
  • 数据可视化：使用 HTML 和相关技术创建交互式数据图表

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>我的第一个 HTML 页面</title> 
    <style> 
        body { 
            font-family: Arial, sans-serif; /* 设置字体系列为 Arial 或无衬线字体 */
            line-height: 1.6; /* 设置行高为 1.6 倍字体大小 */
            color: #333; /* 设置文本颜色为深灰色 */
            max-width: 800px; /* 设置最大宽度为 800 像素 */
            margin: 0 auto; /* 上下外边距为 0，左右自动居中 */
            padding: 20px; /* 设置内边距为 20 像素 */
        }
        h1 { 
            color: #2c3e50; /* 设置文本颜色为深蓝色 */
        }
        img { 
            max-width: 100%; /* 设置最大宽度为 100%，确保图像适应容器 */
            height: auto; /* 设置高度为自动，保持图像比例 */
        }
        table { 
            width: 100%; /* 设置宽度为 100%，适应容器 */
            border-collapse: collapse; /* 合并表格边框 */
            margin: 20px 0; /* 设置上下外边距为 20 像素，左右为 0 */
        }
        th, td { 
            border: 1px solid #ddd; /* 设置边框为 1 像素实线，颜色为浅灰色 */
            padding: 8px; /* 设置内边距为 8 像素 */
            text-align: left; /* 设置文本对齐方式为左对齐 */
        }
        th { 
            background-color: #f2f2f2; /* 设置背景颜色为浅灰色 */
        }
    </style> 
</head> 
<body> 
    <header> 
        <h1>欢迎来到我的网站</h1> 
        <p>这是一个使用 HTML 构建的网页示例</p> 
    </header> 
    
    <nav> 
        <ul> 
            <li><a href="#home">首页</a></li> 
            <li><a href="#about">关于我们</a></li> 
            <li><a href="#contact">联系我们</a></li> 
        </ul> 
    </nav> 
    
    <main> 
        <section id="home"> 
            <h2>首页内容</h2> 
            <p>这是首页的内容部分。HTML 允许我们使用各种标签来组织和格式化内容。</p> 
            <div style="width: 100%; max-width: 600px; height: 300px; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; margin: 20px 0;"> 
                <span style="font-size: 1.2rem; color: #666;">示例图片区域</span> 
            </div> 
        </section> 
        
        <section id="about"> 
            <h2>关于我们</h2> 
            <p>我们是一家专注于 Web 开发的公司，提供高质量的网站设计和开发服务。</p> 
            <h3>我们的服务</h3> 
            <ul> 
                <li>网站设计与开发</li> 
                <li>移动应用开发</li> 
                <li>电子商务解决方案</li> 
                <li>SEO 优化</li> 
            </ul> 
        </section> 
        
        <section id="contact"> 
            <h2>联系我们</h2> 
            <p>如果您有任何问题或需求，请随时联系我们。</p> 
            <table> 
                <tr> 
                    <th>联系方式</th> 
                    <th>详细信息</th> 
                </tr> 
                <tr> 
                    <td>电话</td> 
                    <td>13800138000</td> 
                </tr> 
                <tr> 
                    <td>电子邮件</td> 
                    <td>info@example.com</td> 
                </tr> 
                <tr> 
                    <td>地址</td> 
                    <td>北京市朝阳区某某大厦 1001 室</td> 
                </tr> 
            </table> 
        </section> 
    </main> 
    
    <footer> 
        <p>&copy; 2026 我的网站. 保留所有权利.</p> 
    </footer> 
</body> 
</html>

HTML 常用标签

标签 描述 示例
<html> HTML 文档的根元素 <html>...</html>
<head> 文档头部，包含元数据 <head>...</head>
<body> 文档主体，包含可见内容 <body>...</body>
<h1> 到 <h6> 标题标签，级别从 1 到 6 <h1>标题</h1>
<p> 段落标签 <p>段落内容</p>
<a> 链接标签 <a href="https://example.com">链接文本</a>
<img> 图像标签 <img src="image.jpg" alt="图像描述">
<ul> 无序列表 <ul><li>项目</li></ul>
<ol> 有序列表 <ol><li>项目</li></ol>
<table> 表格标签 <table>...</table>

HTML 最佳实践

编写高质量 HTML 代码的建议

  • 使用语义化标签：选择合适的语义化标签来描述内容的结构和含义，如 <header>、<nav>、<section>、<article>、<footer> 等
  • 保持代码整洁：使用缩进和换行来保持代码的可读性，避免一行代码过长
  • 使用小写标签和属性：虽然 HTML 不区分大小写，但使用小写可以提高代码的一致性和可读性
  • 为图像添加 alt 属性：alt 属性可以提高网页的可访问性，对于屏幕阅读器用户和图像无法加载的情况非常重要
  • 使用适当的标题层级：按照从 <h1> 到 <h6> 的顺序使用标题标签，不要跳过层级
  • 避免使用内联样式：尽量使用外部 CSS 文件来管理样式，保持 HTML 代码的简洁性
  • 使用注释：为复杂的代码部分添加注释，提高代码的可维护性
  • 验证 HTML 代码：使用 W3C 验证器来检查 HTML 代码的有效性，确保代码符合标准
  • 优化图像：使用适当大小和格式的图像，减少页面加载时间
  • 考虑响应式设计：使用媒体查询和弹性布局，确保网页在各种设备上都能正常显示

HTML 常见错误及避免方法

  • 缺少 DOCTYPE 声明：每个 HTML 文档都应该以 <!DOCTYPE html> 开头
  • 未闭合的标签：确保所有标签都有对应的结束标签
  • 嵌套错误：确保标签的嵌套顺序正确，不要交叉嵌套
  • 使用已废弃的标签：避免使用 HTML5 中已废弃的标签，如 <font>、<center> 等
  • 缺少必要的属性：如 <img> 标签的 alt 属性，<a> 标签的 href 属性等
  • 使用内联事件处理器：避免在 HTML 中直接使用 onclick 等内联事件处理器，应使用外部 JavaScript 文件
  • 过度使用 <div> 标签：尽量使用语义化标签，减少不必要的 <div> 标签

HTML 与其他技术的关系

HTML、CSS 和 JavaScript 的关系

HTML、CSS 和 JavaScript 是构建现代网页的三大核心技术，它们各自负责不同的功能：

技术 功能 作用
HTML 超文本标记语言 提供网页的结构和内容
CSS 层叠样式表 控制网页的外观和样式
JavaScript 脚本语言 添加交互功能和动态效果

HTML 与 CSS 的结合

CSS 可以通过以下三种方式与 HTML 结合：

  • 内联样式：使用元素的 style 属性直接添加样式
  • 内部样式表：在 <head> 部分使用 <style> 标签定义样式
  • 外部样式表：使用 <link> 标签链接外部 CSS 文件

推荐使用外部样式表，这样可以：

  • 保持 HTML 代码的简洁性
  • 实现样式的复用
  • 便于维护和更新
  • 提高页面加载速度（通过浏览器缓存）

HTML 与 JavaScript 的结合

JavaScript 可以通过以下三种方式与 HTML 结合：

  • 内联脚本：在 HTML 元素中使用事件属性，如 onclick="function()"
  • 内部脚本：在 <head> 或 <body> 部分使用 <script> 标签编写脚本
  • 外部脚本：使用 <script> 标签链接外部 JavaScript 文件

推荐使用外部脚本，这样可以：

  • 保持 HTML 代码的简洁性
  • 实现脚本的复用
  • 便于维护和更新
  • 提高页面加载速度（通过浏览器缓存）

教程目录