HTML语法

一、HTML 基本语法元素的示例网页

通过完成一个网页学习非常直观，示例 HTML 文件，它包括：

文档结构：<!DOCTYPE html>, <html>, <head>, <body>
元信息：<title>, <meta>
文本标签：<h1>~<h6>, <p>, <strong>, <em>, <blockquote>
列表：<ul>, <ol>, <li>
链接与图片：<a>, <img>
表格：<table>, <tr>, <th>, <td>
表单：<form>, <input>, <textarea>, <select>, <button>
嵌入元素：<iframe>, <video>, <audio>
语义元素：<header>, <nav>, <section>, <article>, <footer>
样式与脚本：内联 <style> 与 <script>

<!-- 1. 文档声明与根标签：指定文档类型为 HTML5，定义网页语言为英文（en） -->
<!DOCTYPE html>
<html lang="en">

<!-- 2. 头部区域（head）：存放网页元信息、样式、标题等（不直接显示在页面上） -->
<head>
    <!-- 字符编码设置：指定网页使用 UTF-8 编码，支持所有中英文及特殊字符 -->
    <meta charset="UTF-8">
    <!-- 响应式配置：让网页在手机、电脑等不同设备上自适应显示（视口宽度=设备宽度，初始缩放比例1.0） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题：显示在浏览器标签栏上的文字 -->
    <title>HTML 全标签示例</title>

    <!-- 3. 内部样式表（style）：定义网页元素的外观（颜色、大小、布局等） -->
    <style>
        /* 全局样式：给 body 标签设置基础样式，作用于整个页面内容 */
        body { 
            font-family: Arial, sans-serif; /* 字体：优先用 Arial，无则用系统默认无衬线字体 */
            margin: 20px; /* 页面边距：上下左右各留 20px 空白，避免内容贴边 */
        }

        /* 语义化区块样式：给 header/nav/section 等标签加边框和内边距，增强视觉区分 */
        header, nav, section, article, footer { 
            border: 1px solid #ccc; /* 灰色边框（#ccc 是浅灰色） */
            padding: 10px; /* 内部空白：标签内内容与边框的距离 */
            margin-bottom: 10px; /* 外部下边距：标签与下方元素的间距，避免重叠 */
        }

        /* 表格样式：统一表格外观，避免默认杂乱样式 */
        table { 
            border-collapse: collapse; /* 合并表格边框（默认分开显示，合并后更整洁） */
            width: 100%; /* 表格宽度：占满父容器（此处是 section 标签） */
            margin-bottom: 10px; /* 与下方元素留间距 */
        }

        /* 表格单元格样式：给表头（th）和单元格（td）加边框和内边距 */
        th, td { 
            border: 1px solid #000; /* 黑色边框（#000 是纯黑色） */
            padding: 5px; /* 单元格内边距：文字与边框的距离 */
            text-align: center; /* 文字居中对齐 */
        }

        /* 列表样式：给无序列表（ul）和有序列表（ol）加下边距 */
        ul, ol { 
            margin-bottom: 10px; /* 与下方元素留间距 */
        }

        /* 链接样式：统一超链接颜色 */
        a { 
            color: blue; /* 链接文字设为蓝色（默认是紫色，点击后变紫色） */
        }
    </style>
</head>

<!-- 4. 主体区域（body）：网页所有可见内容都放在这里 -->
<body>

    <!-- 头部区块（header）：通常放网页标题、logo 等顶层信息 -->
    <header>
        <h1>HTML 全标签示例网页</h1> <!-- 一级标题：页面主标题（最重要的标题） -->
    </header>

    <!-- 导航栏（nav）：存放页面内导航链接，实现“锚点跳转”（点击跳转到页面指定位置） -->
    <nav>
        <!-- href="#text" 是锚点：# + 目标元素的 id，点击跳转到 id 为 text 的 section -->
        <a href="#text">文本标签</a> | <!-- | 是纯文本分隔符，仅用于视觉区分 -->
        <a href="#list">列表</a> |
        <a href="#link">链接与图片</a> |
        <a href="#table">表格</a> |
        <a href="#form">表单</a> |
        <a href="#media">媒体</a>
    </nav>

    <!-- 文本标签演示区（section）：用 id="text" 与导航锚点对应，存放文本相关标签 -->
    <section id="text">
        <h2>文本标签</h2> <!-- 二级标题：区域子标题 -->
        <!-- p 标签：段落文本，自动换行且与其他元素有间距 -->
        <p>这是一个段落 <strong>加粗文本</strong> <em>斜体文本</em></p>
        <!-- blockquote 标签：引用文本，默认会有左缩进，表示“引用他人内容” -->
        <blockquote>引用文本示例</blockquote>
        <!-- 三级到六级标题：级别越低，字体越小（h1 最大，h6 最小） -->
        <h3>标题 H3</h3>
        <h4>标题 H4</h4>
        <h5>标题 H5</h5>
        <h6>标题 H6</h6>
    </section>

    <!-- 列表演示区（section）：id="list" 与导航对应，存放列表标签 -->
    <section id="list">
        <h2>列表</h2>
        <!-- ul 标签：无序列表，默认用“圆点”标记列表项 -->
        <ul>
            <li>无序列表项 1</li> <!-- li 标签：列表项（必须放在 ul/ol 内部） -->
            <li>无序列表项 2</li>
        </ul>
        <!-- ol 标签：有序列表，默认用“数字”标记列表项（1、2、3...） -->
        <ol>
            <li>有序列表项 1</li>
            <li>有序列表项 2</li>
        </ol>
    </section>

    <!-- 链接与图片演示区（section）：id="link" 与导航对应 -->
    <section id="link">
        <h2>链接与图片</h2>
        <!-- a 标签：超链接，href 是目标地址，target="_blank" 表示“新窗口打开链接” -->
        <a href="https://www.example.com" target="_blank">访问示例网站</a><br>
        <!-- br 标签：强制换行（单标签，不需要闭合） -->
        
        <!-- img 标签：插入图片，src 是图片地址，alt 是“图片加载失败时显示的文字”（无障碍必需） -->
        <img src="https://via.placeholder.com/150" alt="示例图片">
    </section>

    <!-- 表格演示区（section）：id="table" 与导航对应，存放表格标签 -->
    <section id="table">
        <h2>表格</h2>
        <!-- table 标签：表格容器，内部需配合 tr/th/td 使用 -->
        <table>
            <!-- tr 标签：表格的“行”（每一个 tr 代表一行） -->
            <tr>
                <!-- th 标签：表格的“表头单元格”（默认文字加粗居中，用于列标题） -->
                <th>序号</th>
                <th>姓名</th>
                <th>分数</th>
            </tr>
            <!-- 表格内容行 -->
            <tr>
                <!-- td 标签：表格的“普通单元格”（存放数据） -->
                <td>1</td>
                <td>Alice</td>
                <td>95</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Bob</td>
                <td>88</td>
            </tr>
        </table>
    </section>

    <!-- 表单演示区（section）：id="form" 与导航对应，存放用户交互表单 -->
    <section id="form">
        <h2>表单</h2>
        <!-- form 标签：表单容器，用于收集用户输入（如登录、注册） -->
        <!-- action="#"：表单提交的目标地址（# 表示“暂不提交到实际地址”） -->
        <!-- method="post"：表单提交方式（post 是隐式提交，数据不显示在地址栏；get 是显式提交） -->
        <form action="#" method="post">
            <!-- label 标签：绑定表单元素（for 属性值 = 输入框的 id），点击文字也能激活输入框（提升体验） -->
            <!-- for="name"：让 “姓名：” 文字和输入框 “绑定” ，要和页面里 id 等于某个值的输入框绑定”-->
            <label for="name">姓名:</label>
            <!-- input 标签：单行输入框，type="text" 表示“普通文本输入” -->
            <!-- id="name"：与 label 绑定，id="name"，给输入框一个 “唯一身份证号”，给页面用（让 label 找到它） -->
            <!-- name="name"：给输入框的内容 “起个变量名”，name 是给后端 “认数据” 的，后端收到 name: "李四"，提交数据时的 “键名”；placeholder：输入提示文字 -->
            <input type="text" id="name" name="name" placeholder="输入姓名"><br><br>

            <label for="email">邮箱:</label>
            <!-- type="email"：邮箱专用输入框，会自动验证格式（如必须包含 @） -->
            <input type="email" id="email" name="email" placeholder="输入邮箱"><br><br>

            <label for="message">留言:</label><br>
            <!-- textarea 标签：多行文本输入框（用于大段文字，如留言、评论） -->
            <!-- rows="3"：默认显示 3 行高度；cols="30"：默认显示 30 个字符宽度 -->
            <textarea id="message" name="message" rows="3" cols="30"></textarea><br><br>

            <label for="gender">性别:</label>
            <!-- select 标签：下拉选择框，用于“固定选项”的选择 -->
            <select id="gender" name="gender">
                <!-- option 标签：下拉选项，value 是提交时的“值”，标签内文字是显示给用户的 -->
                <option value="male">男</option>
                <option value="female">女</option>
            </select><br><br>

            <!-- button 标签：提交按钮，type="submit" 表示“点击后提交表单” -->
            <button type="submit">提交</button>
        </form>
    </section>

    <!-- 媒体元素演示区（section）：id="media" 与导航对应，存放视频、音频、iframe -->
    <section id="media">
        <h2>媒体元素</h2>
        <!-- video 标签：视频播放容器，controls 表示“显示播放控制栏”（暂停、音量等） -->
        <!-- width="320"：视频宽度；source 标签：指定视频源（src 是视频地址，type 是视频格式） -->
        <!-- 标签内文字：当浏览器不支持 video 标签时显示（兼容性提示） -->
        <video controls width="320">
            <source src="sample.mp4" type="video/mp4">
            您的浏览器不支持视频播放
        </video>
        <br>

        <!-- audio 标签：音频播放容器，controls 表示“显示音频控制栏” -->
        <!-- source 标签：指定音频源（src 是音频地址，type 是音频格式） -->
        <audio controls>
            <source src="sample.mp3" type="audio/mpeg">
            您的浏览器不支持音频播放
        </audio> <!-- 注：原代码此处多了一个多余的“<”，已修正为正确闭合 -->
        <br>

        <!-- iframe 标签：内嵌框架，用于在当前网页中“嵌入另一个网页”（如嵌入地图、文档） -->
        <!-- src 是嵌入网页的地址；width/height 是框架的宽高 -->
        <iframe src="https://www.example.com" width="320" height="200"></iframe>
    </section>

    <!-- 文章区块（article）：语义化标签，用于存放“独立完整的内容”（如新闻、博客文章） -->
    <article>
        <h2>文章内容示例</h2>
        <p>这里是文章段落示例，可以放置文章正文内容。</p>
    </article>

    <!-- 页脚区块（footer）：语义化标签，通常放版权信息、联系方式、网站声明等 -->
    <footer>
        <p>© 2025 HTML 示例网页</p> <!-- © 是版权符号，通过 HTML 实体或直接输入 -->
    </footer>

    <!-- 脚本区域（script）：存放 JavaScript 代码，用于实现网页交互逻辑 -->
    <script>
        // console.log：在浏览器控制台打印信息（用于调试，用户看不到）
        console.log("这是一个简单的 JS 示例！");
    </script>

</body>
</html>

二、HTML 互动示例网页

在这个网页里你可以：

点击按钮显示/隐藏文本
表单提交后显示输入值
列表可以动态添加和删除项
简单的计数器交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 字符编码设置为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; }
        /* 页面整体字体为Arial，外边距20px */
        section { border: 1px solid #ccc; padding: 10px; margin-bottom: 15px; }
        /* 每个功能区块设置边框、内边距和底部外边距 */
        button { margin-top: 5px; }
        /* 按钮顶部外边距5px */
        ul { list-style-type: disc; padding-left: 20px; }
        /* 无序列表样式：圆盘标记，左内边距20px */
    </style>
</head>
<body>

<header>
    <h1>HTML 互动示例网页</h1>
    <!-- 页面头部标题 -->
</header>

<!-- 1. 显示/隐藏文本功能区块 -->
<section id="toggle-text">
    <h2>1. 显示/隐藏文本</h2>
    <p id="text" style="display:none;">这是隐藏的文本，点击按钮可以显示或隐藏它。</p>
    <!-- 初始状态隐藏的文本段落 -->
    <button onclick="toggleText()">切换显示/隐藏</button>
    <!-- 点击触发toggleText()函数的按钮 -->
</section>

<!-- 2. 表单提交功能区块 -->
<section id="form-display">
    <h2>2. 表单提交显示输入</h2>
    <form id="myForm">
        <label for="name">姓名:</label>
        <!-- 与输入框关联的标签 -->
        <input type="text" id="name" placeholder="输入姓名" required>
        <!-- 文本输入框，required表示必填项 -->
        <button type="submit">提交</button>
        <!-- 表单提交按钮 -->
    </form>
    <p id="formResult"></p>
    <!-- 用于显示表单提交结果的段落 -->
</section>

<!-- 3. 动态列表功能区块 -->
<section id="dynamic-list">
    <h2>3. 动态列表</h2>
    <input type="text" id="itemInput" placeholder="输入列表项">
    <!-- 用于输入列表项的文本框 -->
    <button onclick="addItem()">添加项</button>
    <!-- 点击触发addItem()函数的按钮 -->
     <!-- ul（Unordered List）是 “无序列表容器” -->
    <ul id="myList">
        <!-- 无序列表容器 -->
        <!-- li（List Item）是 “列表项内容单元” -->
        <li>示例项 1 <button onclick="removeItem(this)">删除</button></li>
        <li>示例项 2 <button onclick="removeItem(this)">删除</button></li>
        <!-- 初始列表项，包含删除按钮 -->
    </ul>
</section>

<!-- 4. 计数器功能区块 -->
<section id="counter">
    <h2>4. 简单计数器</h2>
    <!-- <span> 是 HTML 中的行内标签，用于包裹文档中的一小部分内容，<span>不会独占一行，而是在文本流中保持行内显示，
        示例中 <span id="count">0</span> 用于单独标记计数器的数字，方便 JavaScript 精准控制这个数字的显示 -->
    <p>当前计数: <span id="count">0</span></p>
    <!-- 显示计数的段落，使用span标签包裹数字 -->
    <button onclick="increment()">增加</button>
    <!-- 点击触发increment()函数的按钮 -->
    <button onclick="decrement()">减少</button>
    <!-- 点击触发decrement()函数的按钮 -->
</section>

<footer>
    <p>© 2025 HTML 互动示例网页</p>
    <!-- 页脚信息 -->
</footer>

<!-- <script> 和 </script> 是 HTML 标签，用于在网页中嵌入 JavaScript 代码或引入外部 JavaScript 文件。这对标签之间的内容会被浏览器识别为 JavaScript 代码并执行 -->
<script>
    // JavaScript代码区域，实现网页交互功能

    // 1. 显示/隐藏文本功能
    function toggleText() {
        // 获取id为"text"的元素
        // document 是 JavaScript 中的一个内置对象，属于浏览器提供的DOM（文档对象模型） 的核心对象之一。它代表当前加载的 HTML 文档，提供了一系列方法（如getElementById()）和属性，让开发者可以通过 JavaScript 操作网页中的元素（如创建、修改、删除元素）。简单说，document 是浏览器自动创建的，用于连接 JavaScript 和网页内容的 "桥梁"。
        const text = document.getElementById("text");
        // 检查元素当前显示状态
        if(text.style.display === "none") {
            text.style.display = "block"; // 如果隐藏则显示
        } else {
            text.style.display = "none"; // 如果显示则隐藏
        }
    }

    // 2. 表单提交处理
    document.getElementById("myForm").addEventListener("submit", function(e){
        e.preventDefault(); // 阻止表单默认提交行为（防止页面刷新）
        const name = document.getElementById("name").value; // 获取输入框的值
        // 在结果区域显示输入的姓名
        document.getElementById("formResult").textContent = `你输入的姓名是: ${name}`;
    });

    // 3. 动态列表添加删除功能
    function addItem() {
        const input = document.getElementById("itemInput"); // 获取输入框元素
        const value = input.value.trim(); // 获取并去除输入值前后空格
        if(value === "") return; // 如果输入为空则不执行后续操作
        
        const ul = document.getElementById("myList"); // 获取列表容器
        const li = document.createElement("li"); // 创建新的列表项元素
        // 设置列表项内容，包含输入的值和删除按钮
        li.innerHTML = `${value} <button onclick="removeItem(this)">删除</button>`;
        ul.appendChild(li); // 将新列表项添加到列表中
        input.value = ""; // 清空输入框
    }

    function removeItem(button) {
        const li = button.parentElement; // 获取按钮的父元素（列表项）
        li.parentElement.removeChild(li); // 从列表中移除该列表项
    }

    // 4. 计数器功能
    let count = 0; // 计数变量初始化
    function increment() {
        count++; // 计数加1
        // 更新页面上显示的计数
        document.getElementById("count").textContent = count;
    }
    function decrement() {
        count--; // 计数减1
        // 更新页面上显示的计数
        document.getElementById("count").textContent = count;
    }
</script>

</body>
</html>

三、高级互动示例网页

Tab 切换
模态弹窗
图片轮播
表单验证和提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 字符编码设置为UTF-8，支持多语言显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 视口设置，确保在移动设备上正确显示（宽度适配设备，初始缩放1.0） -->
    <title>高级互动示例网页</title>
    <!-- 网页标题，显示在浏览器标签页 -->
    <style>
        /* 全局样式设置 */
        body { 
            font-family: Arial, sans-serif; /* 页面默认字体 */
            margin: 20px; /* 页面整体外边距 */
        }
        header { 
            text-align: center; /* 头部内容居中对齐 */
            margin-bottom: 20px; /* 头部底部外边距 */
        }
        section { 
            margin-bottom: 30px; /* 每个功能区块底部外边距，分隔不同功能 */
        }

        /* Tab切换组件样式 */
        /* “点（.）” 在 CSS 里是类选择器（Class Selector） 的标志，作用是：精准选中 HTML 中所有class="XXX"的元素 */
        .tab { 
            overflow: hidden; /* 清除浮动影响 */
            border: 1px solid #ccc; /* 边框样式 */
        }
        /* .tab button → 选中class="tab"元素内部的所有<button>（对应 HTML 里 Tab 容器内的 3 个按钮） */
        .tab button { 
            background-color: #f1f1f1; /* 按钮默认背景色（浅灰） */
            float: left; /* 按钮左浮动，横向排列 */
            border: none; /* 去除按钮默认边框 */
            outline: none; /* 去除点击按钮时的蓝色轮廓 */
            padding: 10px 20px; /* 按钮内边距（上下10px，左右20px），控制按钮大小 */
            cursor: pointer; /* 鼠标移到按钮上显示“手型光标”，提示可点击 */
        }
        .tab button.active { 
            background-color: #ccc; /* 激活状态的按钮背景色（当前选中的Tab） */
        }
        /* .tabcontent → 选中所有class="tabcontent"的元素（对应 HTML 里 3 个 Tab 的内容区） */
        .tabcontent { 
            display: none; /* 默认隐藏Tab内容 */
            padding: 10px; /* 内容区域内边距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-top: none; /* 去除顶部边框（与Tab按钮的边框合并） */
        }

        /* 模态弹窗样式 */
        .modal { 
            display: none; /* 默认隐藏弹窗 */
            position: fixed; /* 固定定位，不随页面滚动 */
            z-index: 1; /* 层级设置，确保弹窗在最上层 */
            left: 0; 
            top: 0; 
            width: 100%; /* 全屏宽度 */
            height: 100%; /* 全屏高度 */
            overflow: auto; /* 内容超出时可滚动 */
            background-color: rgba(0,0,0,0.5); /* 半透明黑色背景（遮罩层） */
        }
        .modal-content { 
            background-color: #fff; /* 弹窗内容背景色 */
            margin: 15% auto; /* 上下边距15%，水平居中 */
            padding: 20px; /* 内边距 */
            width: 80%; /* 宽度占屏幕80% */
            max-width: 400px; /* 最大宽度限制 */
            border-radius: 5px; /* 圆角边框 */
        }
        .close { 
            float: right; /* 右浮动，靠右上角显示 */
            cursor: pointer; /* 手型光标 */
            font-weight: bold; /* 粗体显示 */
        }

        /* 图片轮播样式 */
        .carousel { 
            position: relative; /* 相对定位，作为图片的父容器 */
            max-width: 400px; /* 最大宽度限制 */
            margin: auto; /* 水平居中 */
        }
        .carousel img { 
            width: 100%; /* 图片宽度占满容器 */
            display: none; /* 默认隐藏所有图片 */
        }
</style>
</head>
<body>

<header>
    <h1>HTML 高级互动示例网页</h1>
    <!-- 页面主标题 -->
</header>

<!-- 1. Tab切换功能区块 -->
<!-- <section> 是 HTML5 新增的语义化标签，它的核心作用是：  划分网页中一个 “独立的功能区块”，告诉浏览器和开发者 “这里是一个完整的功能单元” -->
<section>
    <h2>1. Tab 切换</h2>
    <!-- <div> 是 HTML 中最基础的通用容器标签，核心作用是：纯粹用来 “包裹元素、划分布局”，本身没有任何语义 -->
    <!-- class 是 HTML 元素的核心属性，全称是 “class name”（类名），核心作用是：给多个元素贴 “相同的标签”，让它们能被 CSS 统一设置样式、被 JavaScript 统一控制行为
     可以把 class 理解成 “学生的班级”—— 同一个班级的学生（同一个 class 的元素），会被统一安排上课（统一样式）、统一组织活动（统一行为） -->
    <div class="tab">
        <!-- Tab按钮组，点击切换不同内容 -->
        <!-- class="tablinks active" 中的 active 也是一个 class，专门表示 “当前激活的状态”—— 第一个按钮加了 active，是为了在 CSS 中给它设置 “激活样式”-->
        <button class="tablinks active" onclick="openTab(event, 'Tab1')">Tab 1</button>
        <button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button>
        <button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button>
    </div>
    <!-- Tab内容区域，默认只显示第一个Tab -->
    <div id="Tab1" class="tabcontent" style="display:block;">这是 Tab 1 内容</div>
    <div id="Tab2" class="tabcontent">这是 Tab 2 内容</div>
    <div id="Tab3" class="tabcontent">这是 Tab 3 内容</div>
</section>

<!-- 2. 模态弹窗功能区块 -->
<section>
    <h2>2. 模态弹窗</h2>
    <button onclick="openModal()">打开弹窗</button>
    <!-- 弹窗容器（默认隐藏） -->
    <div id="myModal" class="modal">
        <!-- 弹窗内容 -->
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span> <!-- 关闭按钮（×符号） -->
            <p>这是一个模态弹窗示例！</p> <!-- 弹窗内容文本 -->
        </div>
    </div>
</section>

<!-- 3. 图片轮播功能区块 -->
<section>
    <h2>3. 图片轮播</h2>
    <div class="carousel">
        <!-- 轮播图片（使用占位图服务） -->
        <img src="https://via.placeholder.com/400x200?text=Slide+1" class="carousel-item">
        <img src="https://via.placeholder.com/400x200?text=Slide+2" class="carousel-item">
        <img src="https://via.placeholder.com/400x200?text=Slide+3" class="carousel-item">
    </div>
</section>

<!-- 4. 表单验证功能区块 -->
<section>
    <h2>4. 表单验证</h2>
    <form id="signupForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" required><br><br> <!-- required表示必填项 -->
        <label for="email">邮箱:</label>
        <input type="email" id="email" required><br><br> <!-- type="email"自带邮箱格式验证 -->
        <button type="submit">提交</button>
    </form>
    <p id="formMessage"></p> <!-- 用于显示表单提交结果或错误信息 -->
</section>

<script>
    // 1. Tab切换功能实现
    function openTab(evt, tabName) {
        // 获取所有Tab内容元素
        const tabcontent = document.getElementsByClassName("tabcontent");
        // 隐藏所有Tab内容
        for(let i = 0; i < tabcontent.length; i++){ 
            tabcontent[i].style.display = "none"; 
        }

        // 获取所有Tab按钮元素
        const tablinks = document.getElementsByClassName("tablinks");
        // 移除所有按钮的"active"类（取消激活状态样式）
        for(let i = 0; i < tablinks.length; i++){ 
            tablinks[i].className = tablinks[i].className.replace(" active", ""); 
        }

        // 显示当前选中的Tab内容
        document.getElementById(tabName).style.display = "block";
        // 给当前点击的按钮添加"active"类（设置激活状态样式）
        evt.currentTarget.className += " active";
    }

    // 2. 模态弹窗功能实现
    // 打开弹窗
    function openModal() { 
        document.getElementById("myModal").style.display = "block"; 
    }
    // 关闭弹窗
    function closeModal() { 
        document.getElementById("myModal").style.display = "none"; 
    }
    // 点击弹窗外部的遮罩层时关闭弹窗
    window.onclick = function(event) { 
        // 如果点击的是遮罩层（.modal元素），则关闭弹窗
        if(event.target == document.getElementById("myModal")) { 
            closeModal(); 
        }
    }

    // 3. 图片轮播功能实现
    let slideIndex = 0; // 记录当前显示的图片索引（初始为0）
    showSlides(); // 页面加载后立即执行轮播函数

    function showSlides() {
        // 获取所有轮播图片
        let slides = document.getElementsByClassName("carousel-item");
        // 隐藏所有图片
        for(let i = 0; i < slides.length; i++){ 
            slides[i].style.display = "none"; 
        }
        // 索引自增（切换到下一张）
        slideIndex++;
        // 如果索引超出图片总数，重置为1（循环播放）
        if(slideIndex > slides.length) { 
            slideIndex = 1; 
        }
        // 显示当前索引对应的图片（数组索引从0开始，所以减1）
        slides[slideIndex - 1].style.display = "block";
        // 2秒（2000毫秒）后再次调用自身，实现自动轮播
        setTimeout(showSlides, 2000); 
    }

    // 4. 表单验证功能实现
    document.getElementById("signupForm").addEventListener("submit", function(e) {
        e.preventDefault(); // 阻止表单默认提交行为（避免页面刷新）
        
        // 获取用户名和邮箱输入框的值（去除前后空格）
        const username = document.getElementById("username").value.trim();
        const email = document.getElementById("email").value.trim();
        
        // 简单验证：检查用户名和邮箱是否都有值
        if(username && email) {
            // 验证通过，显示成功信息
            document.getElementById("formMessage").textContent = `提交成功！用户名: ${username}, 邮箱: ${email}`;
        } else {
            // 验证失败，显示提示信息
            document.getElementById("formMessage").textContent = "请完整填写表单。";
        }
    });
</script>

</body>
</html>

四、增强版互动网页

Tab 切换 + 动画效果（淡入淡出）
模态弹窗 + 弹出动画
图片轮播 + 淡入淡出过渡效果
表单验证 + 动态提示
拖拽排序列表 + 动态添加/删除项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 字符编码设置为UTF-8，支持多语言显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 视口设置，确保在移动设备上正确显示 -->
    <title>增强版互动网页</title>
    <!-- 网页标题 -->
    <style>
        /* 全局基础样式 */
        body { font-family: Arial, sans-serif; margin: 20px; }
        header { text-align: center; margin-bottom: 20px; }
        section { margin-bottom: 30px; } /* 各功能区块之间的间距 */

        /* Tab切换组件样式（带动画） */
        .tab { overflow: hidden; border: 1px solid #ccc; } /* Tab按钮容器 */
        .tab button {
            background-color: #f1f1f1; /* 默认背景色 */
            float: left; /* 横向排列 */
            border: none; outline: none; /* 去除默认边框和点击轮廓 */
            padding: 10px 20px; /* 按钮大小 */
            cursor: pointer; /* 手型光标 */
            transition: 0.3s; /* 按钮状态变化时的过渡动画（0.3秒完成） */
        }
        .tab button.active { background-color: #ccc; } /* 激活状态按钮样式 */
        .tabcontent {
            display: none; /* 默认隐藏 */
            padding: 10px; border: 1px solid #ccc; border-top: none;
            opacity: 0; /* 初始透明度为0（完全透明） */
            transition: opacity 0.5s; /* 透明度变化的过渡动画（0.5秒） */
        }
        .tabcontent.show { /* 显示状态的样式 */
            display: block; /* 显示内容 */
            opacity: 1; /* 完全不透明（配合过渡动画实现淡入效果） */
        }

        /* 模态弹窗样式（带动画） */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; z-index: 1; left: 0; top: 0;
            width: 100%; height: 100%; overflow: auto;
            background-color: rgba(0,0,0,0.5); /* 半透明遮罩 */
            animation: fadeIn 0.3s; /* 遮罩层淡入动画（0.3秒） */
        }
        .modal-content {
            background-color: #fff; /* 弹窗内容背景 */
            margin: 15% auto; padding: 20px;
            width: 80%; max-width: 400px; border-radius: 5px;
            transform: scale(0.7); /* 初始缩放为70%（小尺寸） */
            transition: transform 0.3s; /* 缩放变化的过渡动画（0.3秒） */
        }
        .modal.show .modal-content { /* 弹窗显示时的样式 */
            transform: scale(1); /* 恢复到100%大小（配合过渡实现弹出效果） */
        }
        .close { float: right; cursor: pointer; font-weight: bold; } /* 关闭按钮 */

        @keyframes fadeIn { /* 定义淡入动画关键帧 */
            from {opacity:0} /* 开始时完全透明 */
            to {opacity:1}   /* 结束时完全不透明 */
        }

        /* 图片轮播样式（带淡入淡出） */
        .carousel { position: relative; max-width: 400px; margin: auto; } /* 轮播容器 */
        .carousel img {
            width: 100%; display: none; /* 默认隐藏 */
            position: absolute; top:0; left:0; /* 所有图片重叠在同一位置 */
            transition: opacity 1s; /* 透明度过渡动画（1秒，实现淡入淡出） */
        }
        .carousel img.show { /* 显示状态的图片 */
            display:block; opacity:1; /* 显示并完全不透明 */
        }

        /* 可拖拽列表样式 */
        #dragList li { /* 列表项样式 */
            margin:5px 0; padding:5px; border:1px solid #ccc;
            cursor:move; /* 鼠标悬停时显示“移动”光标 */
            background-color:#f9f9f9;
        }
</style>
</head>
<body>

<header>
    <h1>HTML 增强版互动网页</h1>
    <!-- 页面主标题 -->
</header>

<!-- 1. Tab切换（带动画） -->
<section>
    <h2>1. Tab 切换 + 动画</h2>
    <div class="tab"> <!-- Tab按钮容器 -->
        <button class="tablinks active" onclick="openTab(event,'Tab1')">Tab 1</button>
        <button class="tablinks" onclick="openTab(event,'Tab2')">Tab 2</button>
        <button class="tablinks" onclick="openTab(event,'Tab3')">Tab 3</button>
    </div>
    <!-- Tab内容区：默认通过show类显示第一个Tab -->
    <div id="Tab1" class="tabcontent show">这是 Tab 1 内容</div>
    <div id="Tab2" class="tabcontent">这是 Tab 2 内容</div>
    <div id="Tab3" class="tabcontent">这是 Tab 3 内容</div>
</section>

<!-- 2. 模态弹窗（带动画） -->
<section>
    <h2>2. 模态弹窗 + 动画</h2>
    <button onclick="openModal()">打开弹窗</button>
    <div id="myModal" class="modal"> <!-- 弹窗容器（默认隐藏） -->
        <div class="modal-content"> <!-- 弹窗内容区 -->
            <span class="close" onclick="closeModal()">&times;</span> <!-- 关闭按钮（×符号） -->
            <p>这是一个模态弹窗示例，带弹出动画！</p>
        </div>
    </div>
</section>

<!-- 3. 图片轮播（带淡入淡出） -->
<section>
    <h2>3. 图片轮播 + 淡入淡出</h2>
    <div class="carousel"> <!-- 轮播容器 -->
        <!-- 轮播图片：默认通过show类显示第一张 -->
        <img src="https://via.placeholder.com/400x200?text=Slide+1" class="carousel-item show">
        <img src="https://via.placeholder.com/400x200?text=Slide+2" class="carousel-item">
        <img src="https://via.placeholder.com/400x200?text=Slide+3" class="carousel-item">
    </div>
</section>

<!-- 4. 表单验证（带动态提示） -->
<section>
    <h2>4. 表单验证 + 动态提示</h2>
    <form id="signupForm">
        <label>用户名:</label>
        <input type="text" id="username" required><br><br> <!-- required：必填项 -->
        <label>邮箱:</label>
        <input type="email" id="email" required><br><br> <!-- type="email"：自带邮箱格式验证 -->
        <button type="submit">提交</button>
    </form>
    <p id="formMessage"></p> <!-- 显示提交结果或错误提示 -->
</section>

<!-- 5. 拖拽排序列表（带添加/删除） -->
<section>
    <h2>5. 拖拽排序列表 + 添加/删除项</h2>
    <input type="text" id="itemInput" placeholder="输入列表项"> <!-- 输入新列表项 -->
    <button onclick="addItem()">添加项</button> <!-- 添加按钮 -->
    <ul id="dragList"> <!-- 可拖拽列表容器 -->
        <!-- draggable="true"：设置列表项可拖拽 -->
        <li draggable="true">示例项 1 <button onclick="removeItem(this)">删除</button></li>
        <li draggable="true">示例项 2 <button onclick="removeItem(this)">删除</button></li>
    </ul>
</section>

<script>
    // 1. Tab切换 + 动画实现
    function openTab(evt, tabName){
        // 获取所有Tab内容
        let tabcontent = document.getElementsByClassName("tabcontent");
        // 移除所有内容的"show"类（隐藏并取消动画）
        for(let i=0;i<tabcontent.length;i++){
            tabcontent[i].classList.remove("show");
        }

        // 获取所有Tab按钮
        let tablinks = document.getElementsByClassName("tablinks");
        // 移除所有按钮的"active"类（取消激活样式）
        for(let i=0;i<tablinks.length;i++){
            tablinks[i].className = tablinks[i].className.replace(" active","");
        }

        // 给当前选中的Tab内容添加"show"类（触发显示和淡入动画）
        document.getElementById(tabName).classList.add("show");
        // 给当前点击的按钮添加"active"类（设置激活样式）
        evt.currentTarget.className += " active";
    }

    // 2. 模态弹窗 + 动画实现
    function openModal(){
        const modal = document.getElementById("myModal");
        modal.style.display = "block"; // 显示弹窗容器
        modal.classList.add("show"); // 添加"show"类，触发弹窗缩放动画
    }
    function closeModal(){
        const modal = document.getElementById("myModal");
        modal.style.display = "none"; // 隐藏弹窗容器
        modal.classList.remove("show"); // 移除"show"类，重置样式
    }
    // 点击弹窗外部遮罩层时关闭弹窗
    window.onclick = function(e){
        if(e.target == document.getElementById("myModal")) {
            closeModal();
        }
    }

    // 3. 图片轮播 + 淡入淡出实现
    let slideIndex = 0; // 当前显示的图片索引
    const slides = document.getElementsByClassName("carousel-item"); // 获取所有轮播图片

    function showSlides(){
        // 移除所有图片的"show"类（隐藏并取消淡入效果）
        for(let i=0;i<slides.length;i++){
            slides[i].classList.remove("show");
        }
        slideIndex++; // 索引自增（切换到下一张）
        // 如果索引超出图片总数，重置为1（循环播放）
        if(slideIndex > slides.length){
            slideIndex = 1;
        }
        // 给当前索引的图片添加"show"类（触发显示和淡入动画）
        slides[slideIndex-1].classList.add("show");
        setTimeout(showSlides, 3000); // 3秒后自动切换下一张
    }
    showSlides(); // 页面加载后立即启动轮播

    // 4. 表单验证 + 动态提示实现
    document.getElementById("signupForm").addEventListener("submit", function(e){
        e.preventDefault(); // 阻止表单默认提交（避免页面刷新）

        // 获取输入值并去除前后空格
        const username = document.getElementById("username").value.trim();
        const email = document.getElementById("email").value.trim();

        // 验证逻辑：检查用户名和邮箱是否填写
        if(username && email){
            // 验证通过：显示成功信息
            document.getElementById("formMessage").textContent = `提交成功！用户名: ${username}, 邮箱: ${email}`;
        } else {
            // 验证失败：显示提示信息
            document.getElementById("formMessage").textContent = "请完整填写表单。";
        }
    });

    // 5. 拖拽排序列表 + 添加/删除功能实现
    const dragList = document.getElementById("dragList"); // 获取列表容器
    let dragged; // 存储被拖拽的元素

    // 监听拖拽开始事件
    dragList.addEventListener("dragstart", function(e){
        dragged = e.target; // 记录被拖拽的元素（当前列表项）
        e.dataTransfer.effectAllowed = "move"; // 声明拖拽效果为"移动"
    });

    // 监听拖拽经过事件（必须阻止默认行为，否则无法触发drop）
    dragList.addEventListener("dragover", function(e){
        e.preventDefault();
    });

    // 监听拖拽释放事件（放置元素）
    dragList.addEventListener("drop", function(e){
        e.preventDefault(); // 阻止默认行为
        // 如果释放位置是列表项（LI），则将被拖拽元素放到该列表项后面
        if(e.target.tagName == "LI"){
            dragList.insertBefore(dragged, e.target.nextSibling);
        }
    });

    // 添加列表项功能
    function addItem(){
        const val = document.getElementById("itemInput").value.trim(); // 获取输入值
        if(!val) return; // 输入为空则不执行

        const li = document.createElement("li"); // 创建新列表项
        li.draggable = "true"; // 设置新项可拖拽
        li.innerHTML = `${val} <button onclick="removeItem(this)">删除</button>`; // 设置内容
        dragList.appendChild(li); // 添加到列表末尾
        document.getElementById("itemInput").value = ""; // 清空输入框
    }

    // 删除列表项功能
    function removeItem(btn){
        btn.parentElement.remove(); // 移除按钮的父元素（当前列表项）
    }
</script>

</body>
</html>

五、完整前端小网站示例

完整导航菜单（顶部导航，可点击跳转不同页面内容）
多页切换（使用单页布局 + 隐藏/显示不同 section）
响应式布局（手机、平板、桌面自适应）
交互组件：
- Tab 切换
- 模态弹窗
- 图片轮播
- 表单验证
- 动态列表拖拽
简单动画效果：淡入淡出、缩放、hover 效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <!-- 字符编码设置：确保中文等多语言正常显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- 视口适配：移动端宽度=设备宽度，初始无缩放，避免页面变形 -->
    <title>完整前端示例网站</title>
    <!-- 网页标题：显示在浏览器标签页，直观体现网站用途 -->
    <style>
        /* ====================== 全局基础样式 ====================== */
        /* 重置body默认边距，统一字体，设置页面背景和文字颜色，保证基础视觉一致性 */
        body { margin:0; font-family: Arial, sans-serif; background:#fafafa; color:#222; }
        
        /* 页面头部：绿色背景+白色文字，居中对齐，内边距控制高度和间距，突出标题 */
        header { background:#4CAF50; color:white; padding:14px 20px; text-align:center; }
        
        /* 导航栏：黑色背景，清除浮动（避免子元素浮动导致容器高度塌陷） */
        nav { background:#333; overflow:hidden; }
        /* 导航链接：左浮动实现横向排列，白色文字，内边距扩大点击区域，去除下划线 */
        nav a { 
            float:left; display:block; color:white; 
            text-align:center; padding:14px 16px; 
            text-decoration:none; transition:0.25s; /*  hover时背景色过渡，提升交互感 */
        }
        /* 导航交互状态：hover（鼠标悬停）和active（当前选中）时变灰底黑字，明确当前位置 */
        nav a:hover, nav a.active { background-color:#ddd; color:black; }
        
        /* 主内容区：内边距控制间距，最小高度60vh（确保内容过少时，底部footer不向上偏移） */
        main { padding:20px; min-height:60vh; }

        /* ====================== 页面功能区块（section）样式 ====================== */
        /* 所有功能区块默认隐藏（通过show类控制显示），内边距控制内部间距 */
        section { display:none; padding:20px 10px; }
        /* 显示状态的区块：添加淡入动画（从下往上+透明到不透明），提升切换流畅度 */
        section.show { 
            display:block; 
            animation:fadeIn 0.35s ease; /* 调用fadeIn关键帧，0.35秒完成，缓动效果更自然 */
        }

        /* ====================== Tab切换组件样式 ====================== */
        /* Tab按钮容器：底部边框分隔内容，底部间距避免与内容重叠 */
        .tab { overflow:hidden; border-bottom:1px solid #ccc; margin-bottom:10px; }
        /* Tab按钮：浅灰背景，无边框，内边距控制大小，右侧间距分隔按钮，手型光标提示可点击 */
        .tab button { 
            background-color:#f1f1f1; border:none; outline:none; 
            padding:10px 18px; margin-right:6px; cursor:pointer; 
            transition:0.2s; /* 背景色变化过渡，增强交互反馈 */
        }
        /* 激活状态的Tab按钮：深灰背景，明确当前选中的Tab */
        .tab button.active { background-color:#ccc; }

        /* ====================== Tab内容区样式 ====================== */
        /* Tab内容默认隐藏，通过show类控制显示 */
        .tabcontent { display:none; padding:10px 0; }
        /* 显示状态的Tab内容：block显示，与隐藏状态形成切换 */
        .tabcontent.show { display:block; }

        /* ====================== 模态弹窗（Modal）样式 ====================== */
        /* 弹窗遮罩层：默认隐藏，固定定位全屏覆盖，层级1000（确保在所有元素之上），半透明黑背景 */
        .modal { 
            display:none; position:fixed; z-index:1000; 
            left:0; top:0; width:100%; height:100%; 
            background:rgba(0,0,0,0.45); /* 半透明遮罩，突出弹窗 */
        }
        /* 弹窗内容区：白色背景，水平居中（10%上下边距），最大宽度限制，圆角优化视觉，初始缩放0.85 */
        .modal-content { 
            background:white; margin:10% auto; padding:18px; 
            max-width:420px; border-radius:8px; /* 圆角减少尖锐感 */
            transform:scale(0.85); /* 初始小尺寸，为弹出动画做准备 */
            transition:transform 0.25s ease; /* 缩放过渡，实现弹出效果 */
        }
        /* 弹窗显示时：内容区恢复原尺寸（1.0），完成弹出动画 */
        .modal.show .modal-content { transform:scale(1); }
        /* 弹窗关闭按钮：右浮动，粗体，手型光标，方便用户识别和点击 */
        .close { float:right; font-weight:bold; cursor:pointer; }

        /* ====================== 图片轮播（Carousel）样式 ====================== */
        /* 轮播容器：相对定位（作为图片绝对定位的父容器），最大宽度限制，固定高度，溢出隐藏（裁剪超出部分） */
        .carousel { 
            position:relative; max-width:600px; margin:12px auto; 
            height:200px; overflow:hidden; border-radius:8px; 
            background:#ddd; /* 加载时显示浅灰背景，避免空白 */
        }
        /* 轮播图片：绝对定位（所有图片重叠在同一位置），宽高100%，object-fit:cover（填满容器且不拉伸变形） */
        .carousel img { 
            width:100%; height:100%; object-fit:cover; 
            display:block; position:absolute; top:0; left:0; 
            opacity:0; /* 初始透明，为淡入淡出做准备 */
            transition:opacity 0.8s ease; /* 透明度过渡，实现平滑切换 */
        }
        /* 显示状态的图片：完全不透明，层级2（确保在其他图片之上） */
        .carousel img.show { opacity:1; z-index:2; }

        /* ====================== 拖拽列表（Drag List）样式 ====================== */
        /* 列表容器：清除默认列表样式（无项目符号、无左内边距），最大宽度限制 */
        #dragList { list-style:none; padding-left:0; max-width:600px; }
        /* 列表项：上下间距，内边距，边框，白色背景，手型光标（提示可拖拽），弹性布局（内容左、按钮右） */
        #dragList li { 
            margin:6px 0; padding:10px; border:1px solid #ccc; 
            background:#fff; cursor:move; /* 移动光标，明确可拖拽 */
            display:flex; justify-content:space-between; align-items:center; 
            border-radius:6px; /* 圆角优化 */
        }
        /* 列表项中的删除按钮：左侧间距，避免与文字挤在一起 */
        #dragList button { margin-left:8px; }

        /* ====================== 表单（Form）样式 ====================== */
        /* 表单元素统一样式：内边距，顶部间距，宽度100%（自适应容器），box-sizing:border-box（padding不撑大宽度） */
        input, select, textarea, button { 
            padding:8px; margin-top:6px; width:100%; 
            box-sizing:border-box; /* 确保元素宽度不超出容器 */
        }
        /* 表单标签：块级显示（独占一行），顶部间距，粗体，提升可读性 */
        label { display:block; margin-top:10px; font-weight:600; }

        /* ====================== 页脚（Footer）样式 ====================== */
        /* 页脚：黑色背景，白色文字，居中对齐，内边距，顶部间距（与主内容区分隔） */
        footer { 
            background:#333; color:#fff; text-align:center; 
            padding:12px; margin-top:20px; 
        }

        /* ====================== 动画关键帧定义 ====================== */
        /* 淡入动画：从透明（opacity:0）+ 向下偏移6px，到不透明（opacity:1）+ 无偏移，实现自然过渡 */
        @keyframes fadeIn { 
            from {opacity:0; transform:translateY(6px);} 
            to {opacity:1; transform:none;} 
        }

        /* ====================== 响应式设计（适配移动端） ====================== */
        /* 屏幕宽度≤600px时（手机等小屏设备）执行以下样式 */
        @media screen and (max-width:600px) {
            /* 导航链接：取消浮动，宽度100%（独占一行），文字左对齐，左侧内边距（优化点击体验） */
            nav a { float:none; width:100%; text-align:left; padding-left:14px; }
            /* 轮播容器：高度减小（适配小屏，避免图片过高） */
            .carousel { height:160px; }
        }
    </style>
</head>
<body>

<!-- 页面头部：展示网站主标题，强化品牌感 -->
<header>
    <h1>完整前端示例网站</h1>
</header>

<!-- 导航栏：单页切换入口，data-target属性关联目标功能区块的id -->
<nav>
    <a href="#" class="nav-link active" data-target="home">首页</a>
    <a href="#" class="nav-link" data-target="tab">Tab 示例</a>
    <a href="#" class="nav-link" data-target="modal">弹窗示例</a>
    <a href="#" class="nav-link" data-target="carousel">轮播示例</a>
    <a href="#" class="nav-link" data-target="form">表单示例</a>
    <a href="#" class="nav-link" data-target="list">拖拽列表</a>
</nav>

<!-- 主内容区：包含所有功能模块，默认仅显示首页（加show类） -->
<main>
    <!-- 1. 首页区块：网站介绍，默认显示 -->
    <section id="home" class="show">
        <h2>首页</h2>
        <p>欢迎来到完整前端示例网站。使用顶部导航即可切换不同示例页面，下面是一些交互组件演示。</p>
    </section>

    <!-- 2. Tab切换区块：展示多内容切换功能，默认隐藏 -->
    <section id="tab">
        <h2>Tab 切换</h2>
        <!-- Tab按钮容器：存放3个切换按钮 -->
        <div class="tab">
            <button class="tablinks active" onclick="openTab(event,'Tab1')">Tab 1</button>
            <button class="tablinks" onclick="openTab(event,'Tab2')">Tab 2</button>
            <button class="tablinks" onclick="openTab(event,'Tab3')">Tab 3</button>
        </div>
        <!-- Tab内容区：3个内容面板，默认显示Tab1（加show类） -->
        <div id="Tab1" class="tabcontent show"><p>这是 Tab 1 的内容示例。</p></div>
        <div id="Tab2" class="tabcontent"><p>这是 Tab 2 的内容示例。</p></div>
        <div id="Tab3" class="tabcontent"><p>这是 Tab 3 的内容示例。</p></div>
    </section>

    <!-- 3. 模态弹窗区块：展示弹窗交互，默认隐藏 -->
    <section id="modal">
        <h2>模态弹窗</h2>
        <button onclick="openModal()">打开弹窗</button>
        <!-- 弹窗容器：默认隐藏，aria-hidden="true"（无障碍属性：告知屏幕阅读器当前元素隐藏） -->
        <div id="myModal" class="modal" aria-hidden="true">
            <div class="modal-content">
                <!-- 关闭按钮：aria-label="关闭"（无障碍：给屏幕阅读器提示按钮功能） -->
                <span class="close" onclick="closeModal()" aria-label="关闭">&times;</span>
                <h3>示例弹窗</h3>
                <p>这是一个带动画的模态弹窗示例。点击空白处或 × 可关闭。</p>
            </div>
        </div>
    </section>

    <!-- 4. 图片轮播区块：展示自动切换图片功能，默认隐藏 -->
    <section id="carousel">
        <h2>图片轮播</h2>
        <!-- 轮播容器：aria-live="polite"（无障碍：内容变化时，屏幕阅读器会主动播报） -->
        <div class="carousel" aria-live="polite">
            <!-- 轮播图片：alt属性（无障碍：描述图片内容，图片加载失败时也能理解含义） -->
            <img src="https://via.placeholder.com/800x400?text=Slide+1" class="carousel-item show" alt="幻灯片1">
            <img src="https://via.placeholder.com/800x400?text=Slide+2" class="carousel-item" alt="幻灯片2">
            <img src="https://via.placeholder.com/800x400?text=Slide+3" class="carousel-item" alt="幻灯片3">
        </div>
    </section>

    <!-- 5. 表单示例区块：展示表单验证与提交，默认隐藏；novalidate（关闭浏览器默认验证，用自定义逻辑） -->
    <section id="form">
        <h2>表单示例</h2>
        <form id="signupForm" novalidate>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" required placeholder="请输入用户名">

            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" required placeholder="输入邮箱地址">

            <label for="message">留言：</label>
            <textarea id="message" name="message" rows="4" placeholder="写点什么..."></textarea>

            <button type="submit" style="margin-top:12px;">提交</button>
        </form>
        <!-- 表单结果提示：默认绿色文字，用于显示成功/失败信息 -->
        <p id="formMessage" style="margin-top:10px;color:green;"></p>
    </section>

    <!-- 6. 拖拽列表区块：展示拖拽排序、添加/删除功能，默认隐藏 -->
    <section id="list">
        <h2>拖拽列表（可添加/删除/拖动排序）</h2>
        <div style="max-width:600px;">
            <!-- 列表项输入框：用于输入新的列表内容 -->
            <input type="text" id="itemInput" placeholder="输入列表项">
            <!-- 添加按钮：触发添加列表项的逻辑 -->
            <button onclick="addItem()" style="margin-top:8px;">添加项</button>
            <!-- 拖拽列表容器：aria-label="可拖拽列表"（无障碍：描述列表功能） -->
            <ul id="dragList" aria-label="可拖拽列表" style="margin-top:12px;">
                <!-- 初始列表项：draggable="true"（开启拖拽功能） -->
                <li draggable="true">示例项 1 <button onclick="removeItem(this)">删除</button></li>
                <li draggable="true">示例项 2 <button onclick="removeItem(this)">删除</button></li>
            </ul>
        </div>
        <!-- 操作提示：浅灰色文字，告知用户可拖拽排序 -->
        <p style="margin-top:8px;color:#666;">提示：按住某项并拖动以更改顺序。</p>
    </section>
</main>

<!-- 页脚：展示版权信息，固定在页面底部 -->
<footer>
    <p>© 2025 完整前端示例网站</p>
</footer>

<script>
    /* ====================== 1. 单页导航切换（核心：点击导航显示对应区块） ====================== */
    // 获取所有导航链接（class="nav-link"）
    const navLinks = document.getElementsByClassName('nav-link');
    // 遍历每个导航链接，为其绑定点击事件
    for (let link of navLinks) {
        link.addEventListener('click', function(e) {
            // 阻止a标签默认跳转行为（默认会跳转到#对应的页面顶部，这里需要自定义切换逻辑）
            e.preventDefault();
            
            // 步骤1：重置所有导航链接的active状态（取消所有选中样式）
            for (let l of navLinks) l.classList.remove('active');
            // 步骤2：给当前点击的导航链接添加active状态（标记为当前选中）
            this.classList.add('active');

            // 步骤3：获取目标功能区块的id（从data-target属性中读取，如"home"、"tab"）
            const target = this.dataset.target;
            // 步骤4：获取所有功能区块（section标签）
            const sections = document.getElementsByTagName('section');
            // 步骤5：重置所有区块的show状态（隐藏所有区块）
            for (let s of sections) s.classList.remove('show');
            // 步骤6：显示目标区块（给目标section添加show类，触发显示和淡入动画）
            const targetSection = document.getElementById(target);
            if (targetSection) targetSection.classList.add('show');

            // 可选优化：切换区块时，平滑滚动到页面顶部（提升用户体验）
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    }

    /* ====================== 2. Tab切换功能 ====================== */
    // evt：点击事件对象（包含点击相关信息）；tabName：目标Tab内容的id（如"Tab1"）
    function openTab(evt, tabName) {
        // 步骤1：隐藏所有Tab内容（移除所有tabcontent的show类）
        const allTabContents = document.getElementsByClassName('tabcontent');
        for (let tabContent of allTabContents) {
            tabContent.classList.remove('show');
        }

        // 步骤2：重置所有Tab按钮的active状态（取消所有按钮的选中样式）
        // 获取当前点击按钮的父容器（.tab），再找到容器内所有按钮
        const tabButtonParent = evt.currentTarget.parentElement;
        const allTabButtons = tabButtonParent.getElementsByTagName('button');
        for (let button of allTabButtons) {
            button.classList.remove('active');
        }

        // 步骤3：显示目标Tab内容（给目标tabcontent添加show类）
        const targetTabContent = document.getElementById(tabName);
        if (targetTabContent) targetTabContent.classList.add('show');
        // 步骤4：给当前点击的Tab按钮添加active状态（标记为选中）
        evt.currentTarget.classList.add('active');
    }

    /* ====================== 3. 模态弹窗功能 ====================== */
    // 打开弹窗
    function openModal() {
        const modal = document.getElementById('myModal');
        modal.style.display = 'block'; // 显示遮罩层
        modal.classList.add('show'); // 添加show类，触发弹窗弹出动画
        modal.setAttribute('aria-hidden', 'false'); // 无障碍：告知屏幕阅读器弹窗已显示
    }

    // 关闭弹窗
    function closeModal() {
        const modal = document.getElementById('myModal');
        modal.classList.remove('show'); // 移除show类，取消弹出状态
        modal.style.display = 'none'; // 隐藏遮罩层
        modal.setAttribute('aria-hidden', 'true'); // 无障碍：告知屏幕阅读器弹窗已隐藏
    }

    // 点击弹窗外部遮罩层时关闭弹窗
    window.addEventListener('click', function(e) {
        const modal = document.getElementById('myModal');
        // 若点击的是遮罩层本身（而非弹窗内容），则关闭弹窗
        if (e.target === modal) {
            closeModal();
        }
    });

    /* ====================== 4. 图片轮播功能 ====================== */
    let slideIndex = 0; // 记录当前显示的图片索引（初始为0）
    const slides = document.getElementsByClassName('carousel-item'); // 获取所有轮播图片

    // 轮播核心函数：切换并显示图片
    function showSlides() {
        // 步骤1：隐藏所有图片（移除所有图片的show类）
        for (let slide of slides) {
            slide.classList.remove('show');
        }

        // 步骤2：更新图片索引（切换到下一张）
        slideIndex++;
        // 若索引超出图片总数，重置为1（实现循环播放）
        if (slideIndex > slides.length) {
            slideIndex = 1;
        }

        // 步骤3：显示当前索引对应的图片（给目标图片添加show类，触发淡入效果）
        // 注意：数组索引从0开始，slideIndex从1开始，需减1匹配
        slides[slideIndex - 1].classList.add('show');

        // 步骤4：设置定时器，3秒后调用自身，实现自动轮播
        setTimeout(showSlides, 3000);
    }

    // 页面加载后立即启动轮播
    showSlides();

    /* ====================== 5. 表单验证与提交功能 ====================== */
    // 给表单绑定submit事件（表单提交时触发）
    document.getElementById('signupForm').addEventListener('submit', function(e) {
        e.preventDefault(); // 阻止表单默认提交（避免页面刷新）

        // 获取输入值并去除前后空格（避免空字符导致的无效提交）
        const username = document.getElementById('username').value.trim();
        const email = document.getElementById('email').value.trim();
        const formMessage = document.getElementById('formMessage'); // 结果提示元素

        // 简单验证逻辑：检查用户名和邮箱是否为空
        if (!username) {
            formMessage.style.color = 'red'; // 错误信息用红色
            formMessage.textContent = '请填写用户名。'; // 提示用户补全信息
            return; // 验证失败，终止后续逻辑
        }
        if (!email) {
            formMessage.style.color = 'red';
            formMessage.textContent = '请填写邮箱。';
            return;
        }

        // 验证通过：显示成功信息
        formMessage.style.color = 'green'; // 成功信息用绿色
        formMessage.textContent = `提交成功！用户名: ${username}，邮箱: ${email}`;

        // 可选：验证通过后清空表单（按需启用）
        // this.reset();
    });

    /* ====================== 6. 拖拽列表功能（添加/删除/排序） ====================== */
    const dragList = document.getElementById('dragList'); // 获取拖拽列表容器
    let draggedItem = null; // 存储被拖拽的列表项（初始为null）

    // 1. 拖拽开始事件（用户按住列表项开始拖动时触发）
    dragList.addEventListener('dragstart', function(e) {
        // 找到被拖拽的列表项（若点击的是按钮等子元素，需向上找到最近的li）
        let targetItem = e.target;
        while (targetItem && targetItem.tagName !== 'LI') {
            targetItem = targetItem.parentElement;
        }
        // 若找到有效的li，记录为被拖拽项
        if (targetItem && targetItem.tagName === 'LI') {
            draggedItem = targetItem;
            // 部分浏览器需要设置dataTransfer数据才能正常触发拖拽（兼容处理）
            try {
                e.dataTransfer.setData('text/plain', 'dragging');
            } catch (err) {
                console.log('拖拽数据设置失败：', err);
            }
        }
    });

    // 2. 拖拽经过事件（拖拽过程中鼠标经过列表时触发）
    dragList.addEventListener('dragover', function(e) {
        e.preventDefault(); // 必须阻止默认行为，否则无法触发drop事件（拖拽释放）
    });

    // 3. 拖拽释放事件（用户松开鼠标，完成拖拽时触发）
    dragList.addEventListener('drop', function(e) {
        e.preventDefault(); // 阻止默认行为（避免浏览器打开链接等意外操作）
        if (!draggedItem) return; // 若没有被拖拽项，直接返回

        // 找到释放位置对应的目标列表项（若点击的是子元素，向上找到最近的li）
        let targetItem = e.target;
        while (targetItem && targetItem !== dragList && targetItem.tagName !== 'LI') {
            targetItem = targetItem.parentElement;
        }

        // 处理不同释放位置：
        if (!targetItem || targetItem === dragList) {
            // 情况1：释放到列表空白处 → 把被拖拽项放到列表末尾
            dragList.appendChild(draggedItem);
        } else if (targetItem.tagName === 'LI' && targetItem !== draggedItem) {
            // 情况2：释放到另一个列表项上 → 把被拖拽项插入到目标项后面
            dragList.insertBefore(draggedItem, targetItem.nextSibling);
        }

        // 重置被拖拽项（完成一次拖拽后清空记录）
        draggedItem = null;
    });

    // 4. 删除列表项功能（btn：被点击的删除按钮）
    function removeItem(btn) {
        if (!btn) return;
        // 找到按钮的父元素（即要删除的列表项），并移除
        const itemToRemove = btn.closest('li'); // closest：向上找到最近的li
        if (itemToRemove) itemToRemove.remove();
    }

    // 5. 添加列表项功能
    function addItem() {
        // 获取输入值并去除前后空格（避免空项）
        const inputValue = document.getElementById('itemInput').value.trim();
        if (!inputValue) return; // 输入为空，直接返回

        // 步骤1：创建新的列表项（li元素）
        const newListItem = document.createElement('li');
        newListItem.setAttribute('draggable', 'true'); // 开启新项的拖拽功能

        // 步骤2：创建列表项内容（文本+删除按钮）
        const textSpan = document.createElement('span');
        textSpan.textContent = inputValue; // 文本内容为输入值

        const deleteBtn = document.createElement('button');
        deleteBtn.type = 'button';
        deleteBtn.textContent = '删除';
        // 给删除按钮绑定点击事件（点击时删除当前列表项）
        deleteBtn.addEventListener('click', function() {
            newListItem.remove();
        });

        // 步骤3：将文本和按钮添加到新列表项中
        newListItem.appendChild(textSpan);
        newListItem.appendChild(deleteBtn);

        // 步骤4：将新列表项添加到列表末尾
        dragList.appendChild(newListItem);

        // 步骤5：清空输入框（方便用户继续添加）
        document.getElementById('itemInput').value = '';
    }

    /* ====================== 无障碍兼容：页面加载完成后的初始化 ====================== */
    // 确保页面DOM完全加载后执行（避免元素未加载导致的错误）
    document.addEventListener('DOMContentLoaded', function() {
        // 此处主要为兼容：确保初始列表项的删除按钮能正常工作（因初始按钮用了onclick="removeItem(this)"）
        // 无需额外代码，因removeItem函数已全局定义，onclick可直接调用
    });
</script>

</body>
</html>

总结

HTML 语法是前端基础。