网页如何做标签-菜鸟科技网

导航标签页：点击不同的标签，切换显示不同的内容区域，比如浏览器设置页、代码编辑器等。
标签：为文章或内容添加关键词标签，方便分类和检索，JavaScript”、“前端”、“教程”。
输入框标签：用于描述输入框功能的文本，用户名”、“邮箱”。

下面我将分别详细介绍这几种“标签”的制作方法,从简单到复杂。

（图片来源网络，侵删）

导航标签页

这是最常见的一种，通常由 HTML 结构、CSS 样式和 JavaScript 交互三部分组成。

使用原生 HTML、CSS 和 JavaScript（最经典）

这是理解其工作原理的最佳方式。

HTML 结构

我们需要一个容器来包裹所有内容,里面包含两部分：

（图片来源网络，侵删）

列表对应一个内容区域。
内容区域列表区域都有一个唯一的 ID，与标签标题的 href 属性对应。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">导航标签页示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="tabs-container">
        <!-- 标签标题 -->
        <div class="tab-headers">
            <button class="tab-header active" data-tab="tab1">首页</button>
            <button class="tab-header" data-tab="tab2">产品</button>
            <button class="tab-header" data-tab="tab3">关于我们</button>
        </div>
        <!-- 标签内容 -->
        <div class="tab-content">
            <div id="tab1" class="tab-pane active">
                <h2>欢迎来到首页</h2>
                <p>这里是首页的内容。</p>
            </div>
            <div id="tab2" class="tab-pane">
                <h2>我们的产品</h2>
                <p>这里是产品介绍的内容。</p>
            </div>
            <div id="tab3" class="tab-pane">
                <h2>关于我们</h2>
                <p>这里是关于我们的内容。</p>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式

CSS 的作用是让标签看起来像标签,并控制内容的显示与隐藏。

/* style.css */
.tabs-container {
    width: 500px;
    margin: 50px auto;
    font-family: sans-serif;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden; /* 确保圆角生效 */
}
.tab-headers {
    display: flex;
    background-color: #f1f1f1;
}
.tab-header {
    flex: 1; /* 让每个标签平均分配宽度 */
    padding: 12px 20px;
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}
/* 鼠标悬停效果 */
.tab-header:hover {
    background-color: #ddd;
}
/* 当前激活的标签 */
.tab-header.active {
    background-color: #fff;
    border-bottom: 2px solid #007bff;
}
.tab-content {
    padding: 20px;
}
.tab-pane {
    display: none; /* 默认隐藏所有内容 */
}
/* 默认显示第一个内容 */
.tab-pane.active {
    display: block;
}

JavaScript 交互

JS 负责监听点击事件，并切换 active 类。

（图片来源网络，侵删）

// script.js
document.addEventListener('DOMContentLoaded', () => {
    // 获取所有标签标题和内容区域
    const tabHeaders = document.querySelectorAll('.tab-header');
    const tabPanes = document.querySelectorAll('.tab-pane');
    // 为每个标签标题添加点击事件
    tabHeaders.forEach(header => {
        header.addEventListener('click', () => {
            // 1. 移除所有标题的 active 类
            tabHeaders.forEach(h => h.classList.remove('active'));
            // 2. 为当前点击的标题添加 active 类
            header.classList.add('active');
            // 3. 找到对应的内容区域（通过 data-tab 属性）
            const targetId = header.getAttribute('data-tab');
            const targetPane = document.getElementById(targetId);
            // 4. 移除所有内容的 active 类
            tabPanes.forEach(pane => pane.classList.remove('active'));
            // 5. 为目标内容区域添加 active 类
            targetPane.classList.add('active');
        });
    });
});

使用框架（如 Bootstrap）

现代前端框架提供了现成的组件,可以大大简化开发。

使用 Bootstrap

Bootstrap 的标签组件非常简单，只需要按照它的结构来写 HTML，并引入它的 CSS 和 JS 即可。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Bootstrap 标签页示例</title>
    <!-- 1. 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">产品</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">关于我们</button>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <h2>欢迎来到首页</h2>
                <p>这里是首页的内容。</p>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <h2>我们的产品</h2>
                <p>这里是产品介绍的内容。</p>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <h2>关于我们</h2>
                <p>这里是关于我们的内容。</p>
            </div>
        </div>
    </div>
    <!-- 2. 引入 Bootstrap JS (Popper.js is required for Bootstrap) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap 通过 data-bs-toggle="tab" 和 data-bs-target 属性以及内部的 JS 自动处理了所有的交互逻辑，你只需要写好 HTML 结构即可。

.article-tags {
    margin-top: 20px;
}
.tag {
    display: inline-block;
    padding: 5px 12px;
    margin-right: 8px;
    margin-bottom: 8px;
    background-color: #e9ecef;
    color: #495057;
    border-radius: 15px; /* 圆角，形成胶囊状 */
    font-size: 14px;
    border: 1px solid #dee2e6;
}
.tag:hover {
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

动态渲染（例如使用 JavaScript 和数组）

如果标签是从数据库或 API 获取的，你需要用 JS 动态生成。

HTML

<div id="tags-container"></div>

JavaScript

const tags = ['JavaScript', 'CSS', '前端开发', '教程', '响应式设计'];
const container = document.getElementById('tags-container');
tags.forEach(tagText => {
    // 创建标签元素
    const tagElement = document.createElement('span');
    tagElement.className = 'tag';
    tagElement.textContent = tagText;
    // 添加点击事件
    tagElement.addEventListener('click', () => {
        console.log(`你点击了标签: ${tagText}`);
        // 这里可以添加点击后的逻辑，比如跳转到搜索页面
    });
    // 将标签添加到容器中
    container.appendChild(tagElement);
});

这种方式更灵活,适合内容管理系统或动态网站。

输入框标签

这是最简单的标签，通常使用 HTML 的 <label>

HTML


<!-- 方式一：关联 input 的 id -->
<div class="form-group">
    <label for="username">用户名</label>
    <input type="text" id="username" name="username">
</div>
<!-- 方式二：直接包裹 input (更简洁) -->
<div class="form-group">
    <label>
        邮箱
        <input type="email" name="email">
    </label>
</div>
CSS (可选，用于美化)
.form-group label {
    display: block; /* 让标签独占一行 */
    margin-bottom: 5px;
    font-weight: bold;
}
.form-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box; /* 让 padding 不影响总宽度 */
}
为什么使用 <label>？

可访问性：屏幕阅读器可以读出标签,让视障用户知道输入框是做什么的。
可用性：点击标签文字，浏览器会自动聚焦到对应的输入框,提升了用户体验。





标签类型
核心技术
关键点
适用场景




导航标签页
HTML + CSS + JS / 框架
通过 JS 切换内容的显示/隐藏，常用 active 类
选项卡、设置面板、多步骤表单


输入框标签
HTML <label>
关联 for 属性或包裹 input，提升可访问性
表单设计



对于初学者，强烈建议从第一种“导航标签页”的原生实现开始，它能让你深刻理解前端交互的基本原理，当你熟悉了之后,再使用框架来提高开发效率。

网页如何做标签

导航标签页

使用原生 HTML、CSS 和 JavaScript（最经典）

使用框架（如 Bootstrap）

标签

静态 HTML + CSS

动态渲染（例如使用 JavaScript 和数组）

输入框标签

99ANYc3cd6

网上商城总体建设方案应如何规划才能兼顾用户体验与系统安全性？

微软的招聘要求究竟藏着哪些行业不传的秘诀，为何总能精准锁定顶尖人才？

济南网站建设靠谱公司怎么选？哪家企业案例多且售后有保障？

debug命令实例，如何通过具体操作步骤快速定位并解决常见系统故障？

2025外贸新变局下，企业如何突破传统模式、抓住新兴市场机遇实现逆势增长？

ipad如何创建网页连接不上，iPad创建网页为何连接不上？

临沂企业网站建设制作，如何提升企业线上竞争力？

网页如何降低等保成本与风险？

无锡数据机房建设公司哪家好？

珠海网站建设公司哪家靠谱？

客户如何准备网站资料

Linux sa命令具体如何使用？

花都有网站建设吗？

aix 6.1命令有哪些常用操作及技巧？

如何查看网站使用什么程序？

理科精读文本，到底该抓哪些核心？

标签类型	核心技术	关键点	适用场景
导航标签页	HTML + CSS + JS / 框架	通过 JS 切换内容的显示/隐藏，常用 `active` 类	选项卡、设置面板、多步骤表单
输入框标签	HTML `<label>`	关联 `for` 属性或包裹 `input`，提升可访问性	表单设计

网页如何做标签

导航标签页

使用原生 HTML、CSS 和 JavaScript（最经典）

使用框架（如 Bootstrap）

标签

静态 HTML + CSS

动态渲染（例如使用 JavaScript 和数组）

输入框标签

相关推荐

ipad如何创建网页连接不上，iPad创建网页为何连接不上？