人人都会AI编程

HTML基础

更新时间：2025-12-26

HTML超文本标记语言是构建网页和应用界面的基石，它通过一系列标签来定义网页的内容和结构。下面我为你梳理了它的核心概念、常用元素，并提供了两个实用的开发场景和AI指令，帮助你快速上手和运用。

📖 HTML 核心概念

可以把HTML理解为一座建筑的骨架和砖块。它负责定义网页的结构和内容，但不管美化（那是CSS的工作）或交互（那是JavaScript的工作）。

标签与元素：HTML文档由元素构成，每个元素通常由开始标签、内容和结束标签组成，例如一个段落：<p>这是一个段落</p>。有些元素是空元素，只有开始标签，如图片标签 <img>。

文档结构：一个标准的HTML5文档具有固定的基本结构，这确保了浏览器能正确解析和显示。

属性：标签可以拥有属性，为元素提供额外信息。例如，链接标签 <a>使用 href属性来指定目标网址：<a href="https://www.example.com">访问示例网站</a>。

🧱 常用HTML元素速览

| 元素类别 | 标签示例 | 说明 |
| --- | --- | --- |
| 文档结构​ | <!DOCTYPE html>, <html>, <head>, <body>, <meta> | 定义文档类型、根元素、元信息和主体内容。 |
| 内容标题​ | <h1>到 <h6> | 定义六级标题，<h1>级别最高。 |
| 文本内容​ | <p>, <br>, <strong>, <em> | 段落、换行、加粗强调、斜体强调。 |
| 媒体内容​ | <img>, <audio>, <video> | 嵌入图像、音频、视频。关键属性：src（资源路径）和 alt（替代文本，利于无障碍访问和SEO）。 |
| 列表​ | <ul>, <ol>, <li> | 无序列表（项目符号）、有序列表（数字序号）及其列表项。 |
| 表格​ | <table>, <tr>, <td>, <th> | 创建表格，包含行、标准单元格和表头单元格。 |
| 表单​ | <form>, <input>, <textarea>, <button>, <label> | 创建表单，包含输入框、文本域、按钮等，用于收集用户输入。 |
| 语义化标签​ | <header>, <nav>, <main>, <article>, <section>, <footer> | HTML5新增，使文档结构更清晰，利于SEO和无障碍访问。 |

💻 基础代码示例

下面是一个融合了上述元素的简单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>
        /* 简单的内部CSS样式 */
        body { font-family: Arial, sans-serif; margin: 20px; }
        header { background-color: #f0f0f0; padding: 10px; text-align: center; }
        nav a { margin: 0 10px; }
        .product { border: 1px solid #ccc; padding: 10px; margin: 10px 0; }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的小店</h1>
        <nav>
            <a href="#home">首页</a>
            <a href="#about">关于我们</a>
        </nav>
    </header>

    <main>
        <section id="home">
            <h2>热门产品</h2>
            <div class="product">
                <h3>优质咖啡豆</h3>
                <img src="images/coffee.jpg" alt="一袋烘焙好的咖啡豆" width="200">
                <p>来自哥伦比亚的阿拉比卡咖啡豆，风味浓郁。</p>
                <p><strong>价格：￥88.00</strong></p>
                <button>加入购物车</button>
            </div>
            <!-- 可以添加更多产品 -->
        </section>

        <section id="about">
            <h2>关于我们</h2>
            <p>我们是一家专注于提供优质产品的公司。</p>
            <ul>
                <li>成立于2020年</li>
                <li>致力于客户满意</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 我的小店. 版权所有.</p>
        <form>
            <label for="email">订阅 newsletter:</label>
            <input type="email" id="email" name="email" placeholder="请输入您的邮箱">
            <button type="submit">订阅</button>
        </form>
    </footer>
</body>
</html>

🚀 实际项目场景与AI实操Prompt

掌握基础后，关键在于应用。以下是两个典型的开发场景，并提供了可以直接用于AI编程助手的详细Prompt，让AI帮你生成代码框架。

场景一：创建个人简介页面

这是一个经典的入门项目，能让你实践大部分基础标签和页面结构。

AI实操Prompt：

请帮我生成一个个人简介页面的HTML代码。要求如下：

1. 页面结构：使用HTML5语义化标签，如 `<header>`, `<main>`, `<footer>`。
2. 内容模块：
   - 页头：包含页面主标题（我的简介）和一个简单的导航菜单（链接可设为#about, #skills, #contact）。
   - 主体部分包含：
     a. “关于我”模块：包含一张个人头像（请用占位图路径，如avatar.jpg）、姓名、一段简短的自我介绍。
     b. “我的技能”模块：用一个无序列表列出3-5项技能。
     c. “联系我”模块：创建一个表单，包含姓名（文本框）、邮箱（邮箱输入框）、留言（文本域）和一个提交按钮。
   - 页脚：包含版权信息。
3. 样式要求：请使用内嵌CSS（`<style>`标签）添加基础样式，例如：
   - 设置全局字体和背景色。
   - 让头像呈圆形。
   - 为技能列表项添加背景色和间距。
   - 设置表单输入框和按钮的基本样式。
4. 备注：代码注释请用中文。
请提供完整的HTML代码。

场景二：构建产品展示卡片

组件化开发是现代前端的基础，这个场景练习如何封装一个可复用的UI组件。

AI实操Prompt：

请生成一个展示单个产品信息的HTML结构代码，目标是成为一个可复用的组件。要求如下：

1. 使用`<div>`或`<article>`标签作为容器，并为其设置一个CSS类名，如`.product-card`。
2. 卡片内部结构从上到下依次包含：
   - 产品图片（使用占位图路径，如product-image.jpg），并设置合适的宽度和高度。
   - 产品名称（用标题标签，如`<h3>`）。
   - 产品描述（用段落标签`<p>`）。
   - 产品价格（用段落标签，并希望价格数字的字体颜色为红色）。
   - 一个“加入购物车”按钮。
3. 交互体验：请使用内联JavaScript（`onclick`事件）为按钮添加简单交互，点击时弹出提示框，显示“已添加 [产品名称] 到购物车”。
4. 样式要求：请使用内嵌CSS为卡片添加基础样式，例如：
   - 设置卡片宽度、边框、圆角、内边距。
   - 让图片宽度100%适应卡片宽度。
   - 设置按钮的背景色、文字颜色、无边框和圆角。
   - 当鼠标悬停在按钮上时，改变其背景色。
5. 备注：代码注释请用中文。
请提供完整的HTML代码，包含CSS和JavaScript部分。