这个模板是静态的，意味着数据是硬编码的，但它为你提供了一个完整的结构和样式基础，你可以轻松地用JavaScript（如Vue.js, React）或后端语言（如PHP, Java）来动态替换数据。

淘宝商品详情页面html模板
（图片来源网络，侵删）

模板特点

  1. 模块化结构：使用清晰的HTML注释划分每个模块，易于理解和修改。
  2. 响应式设计：使用媒体查询 (@media)，确保页面在PC和移动设备上都有良好的显示效果。
  3. 现代UI风格：模拟了淘宝、天猫等主流电商平台的视觉风格，包括渐变按钮、卡片式布局、悬浮效果等。
  4. 丰富的交互：包含了选项卡切换、数量选择、加入购物车等基本交互功能。
  5. 完整的模块：涵盖了从商品信息、规格参数、图文详情到用户评价等所有核心部分。

最终预览效果

在开始之前,你可以想象一个典型的淘宝详情页，它包含：

  • 顶部的导航栏
  • 左侧的商品图片和视频
  • 右侧的商品信息、价格、规格、购买按钮
  • 中间的商品规格参数
  • 商品图文详情（多标签切换）
  • 用户评价
  • 相关推荐

完整HTML代码

你可以直接复制以下所有代码到一个 .html 文件中，然后用浏览器打开即可看到效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Apple iPhone 15 Pro Max 256GB 钛金属 - 淘宝商品详情页模板</title>
    <style>
        /* --- 全局样式重置和基础设置 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        body {
            background-color: #f4f4f4;
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        /* --- 顶部导航栏 --- */
        .top-nav {
            background-color: #f5f5f5;
            border-bottom: 1px solid #eaeaea;
            padding: 8px 0;
        }
        .nav-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        .nav-links a {
            color: #6c6c6c;
            text-decoration: none;
            margin-left: 15px;
            font-size: 13px;
        }
        .nav-links a:hover {
            color: #ff6700;
        }
        /* --- 主要内容区 --- */
        .main-content {
            display: flex;
            min-height: 600px;
        }
        /* --- 左侧图片区 --- */
        .product-gallery {
            flex: 1;
            padding: 20px;
            border-right: 1px solid #f0f0f0;
        }
        .main-image {
            width: 100%;
            height: 500px;
            background-color: #f9f9f9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #999;
            margin-bottom: 10px;
            border: 1px solid #eee;
        }
        .thumbnail-list {
            display: flex;
            gap: 10px;
        }
        .thumbnail {
            width: 80px;
            height: 80px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #999;
            transition: border-color 0.3s;
        }
        .thumbnail:hover, .thumbnail.active {
            border-color: #ff6700;
        }
        /* --- 右侧商品信息区 --- */
        .product-info {
            flex: 1;
            padding: 20px;
        }
        .product-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
            line-height: 1.4;
        }
        .product-subtitle {
            color: #999;
            font-size: 14px;
            margin-bottom: 20px;
        }
        .product-price-box {
            background-color: #fff8e7;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .price-label {
            font-size: 14px;
            color: #999;
        }
        .price {
            font-size: 32px;
            color: #ff6700;
            font-weight: bold;
            margin-top: 5px;
        }
        .sold-count {
            font-size: 14px;
            color: #999;
            margin-top: 5px;
        }
        /* --- 规格选择 --- */
        .specs-section {
            margin-bottom: 20px;
        }
        .spec-title {
            font-size: 14px;
            margin-bottom: 10px;
        }
        .spec-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .spec-option {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        .spec-option:hover {
            border-color: #ff6700;
        }
        .spec-option.selected {
            border-color: #ff6700;
            background-color: #fff8e7;
            color: #ff6700;
        }
        /* --- 数量选择 --- */
        .quantity-section {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        .quantity-title {
            font-size: 14px;
            margin-right: 15px;
        }
        .quantity-selector {
            display: flex;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
        }
        .quantity-btn {
            width: 36px;
            height: 36px;
            border: none;
            background-color: #f4f4f4;
            cursor: pointer;
            font-size: 18px;
            transition: background-color 0.3s;
        }
        .quantity-btn:hover {
            background-color: #e8e8e8;
        }
        .quantity-input {
            width: 60px;
            height: 36px;
            border: none;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            text-align: center;
            font-size: 14px;
        }
        /* --- 购买按钮 --- */
        .action-buttons {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }
        .buy-button, .add-cart-button {
            flex: 1;
            height: 54px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: opacity 0.3s;
        }
        .buy-button {
            background-color: #ff6700;
            color: white;
        }
        .buy-button:hover {
            opacity: 0.9;
        }
        .add-cart-button {
            background-color: #ffe4e1;
            color: #ff6700;
        }
        .add-cart-button:hover {
            opacity: 0.9;
        }
        /* --- 商品详情标签页 --- */
        .detail-tabs {
            margin-top: 40px;
            border-bottom: 1px solid #f0f0f0;
        }
        .tab-list {
            display: flex;
            list-style: none;
        }
        .tab-item {
            padding: 15px 30px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
        }
        .tab-item:hover {
            color: #ff6700;
        }
        .tab-item.active {
            color: #ff6700;
            border-bottom-color: #ff6700;
        }
        .tab-content {
            padding: 30px;
            display: none; /* 默认隐藏 */
        }
        .tab-content.active {
            display: block; /* 激活的标签页显示 */
        }
        .detail-image {
            width: 100%;
            margin-bottom: 20px;
        }
        /* --- 参数表 --- */
        .params-table {
            width: 100%;
            border-collapse: collapse;
        }
        .params-table td {
            padding: 10px 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        .params-table td:first-child {
            background-color: #f9f9f9;
            font-weight: bold;
            width: 30%;
        }
        /* --- 评价区 --- */
        .review-section {
            padding: 30px;
        }
        .review-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .review-item {
            padding: 20px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .review-user {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ddd;
            margin-right: 10px;
        }
        .review-content {
            margin-bottom: 10px;
        }
        .review-date {
            font-size: 12px;
            color: #999;
        }
        /* --- 底部推荐 --- */
        .recommendations {
            padding: 30px;
            background-color: #f9f9f9;
        }
        .recommend-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .recommend-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
        }
        .recommend-item {
            text-align: center;
            cursor: pointer;
            transition: transform 0.3s;
        }
        .recommend-item:hover {
            transform: translateY(-5px);
        }
        .recommend-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            background-color: #eee;
            margin-bottom: 10px;
        }
        .recommend-item-name {
            font-size: 12px;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .recommend-item-price {
            color: #ff6700;
            font-weight: bold;
        }
        /* --- 响应式设计 --- */
        @media (max-width: 968px) {
            .main-content {
                flex-direction: column;
            }
            .product-gallery {
                border-right: none;
                border-bottom: 1px solid #f0f0f0;
            }
            .recommend-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="top-nav">
        <div class="nav-content">
            <div>欢迎来到淘宝模板商店</div>
            <div class="nav-links">
                <a href="#">首页</a>
                <a href="#">购物车</a>
                <a href="#">我的订单</a>
                <a href="#">个人中心</a>
            </div>
        </div>
    </div>
    <div class="container">
        <!-- 主要内容区 -->
        <div class="main-content">
            <!-- 左侧图片区 -->
            <div class="product-gallery">
                <div class="main-image">
                    <img src="https://via.placeholder.com/500x500.png?text=Main+Product+Image" alt="主图">
                </div>
                <div class="thumbnail-list">
                    <div class="thumbnail active">1</div>
                    <div class="thumbnail">2</div>
                    <div class="thumbnail">3</div>
                    <div class="thumbnail">4</div>
                    <div class="thumbnail">5</div>
                </div>
            </div>
            <!-- 右侧商品信息区 -->
            <div class="product-info">
                <h1 class="product-title">Apple iPhone 15 Pro Max 256GB 钛金属 - 全新设计，超强性能，专业级摄像系统</h1>
                <p class="product-subtitle">官方正品，顺丰包邮，一年质保，支持分期</p>
                <div class="product-price-box">
                    <div class="price-label">价格</div>
                    <div class="price">¥ 9,999.00</div>
                    <div class="sold-count">月销 2.3万+ 评价 5.8万+</div>
                </div>
                <!-- 规格选择 -->
                <div class="specs-section">
                    <div class="spec-title">选择颜色</div>
                    <div class="spec-options">
                        <div class="spec-option selected">钛原色</div>
                        <div class="spec-option">蓝色钛金属</div>
                        <div class="spec-option">白色钛金属</div>
                        <div class="spec-option">黑色钛金属</div>
                    </div>
                </div>
                <div class="specs-section">
                    <div class="spec-title">选择容量</div>
                    <div class="spec-options">
                        <div class="spec-option">128GB</div>
                        <div class="spec-option selected">256GB</div>
                        <div class="spec-option">512GB</div>
                        <div class="spec-option">1TB</div>
                    </div>
                </div>
                <!-- 数量选择 -->
                <div class="quantity-section">
                    <span class="quantity-title">数量</span>
                    <div class="quantity-selector">
                        <button class="quantity-btn">-</button>
                        <input type="text" class="quantity-input" value="1">
                        <button class="quantity-btn">+</button>
                    </div>
                </div>
                <!-- 购买按钮 -->
                <div class="action-buttons">
                    <button class="buy-button">立即购买</button>
                    <button class="add-cart-button">加入购物车</button>
                </div>
            </div>
        </div>
        <!-- 商品详情标签页 -->
        <div class="detail-tabs">
            <ul class="tab-list">
                <li class="tab-item active" data-tab="detail">商品详情</li>
                <li class="tab-item" data-tab="specs">规格参数</li>
                <li class="tab-item" data-tab="reviews">用户评价(5.8万+)</li>
            </ul>
            <div id="detail" class="tab-content active">
                <img class="detail-image" src="https://via.placeholder.com/1000x500.png?text=Product+Detail+Image+1" alt="详情图">
                <img class="detail-image" src="https://via.placeholder.com/1000x500.png?text=Product+Detail+Image+2" alt="详情图">
            </div>
            <div id="specs" class="tab-content">
                <table class="params-table">
                    <tr>
                        <td>品牌</td>
                        <td>Apple/苹果</td>
                    </tr>
                    <tr>
                        <td>型号</td>
                        <td>iPhone 15 Pro Max</td>
                    </tr>
                    <tr>
                        <td>上市年份</td>
                        <td>2025年09月</td>
                    </tr>
                    <tr>
                        <td>机身颜色</td>
                        <td>钛金属系列</td>
                    </tr>
                    <tr>
                        <td>操作系统</td>
                        <td>iOS 17</td>
                    </tr>
                    <tr>
                        <td>CPU型号</td>
                        <td>A17 Pro Pro芯片</td>
                    </tr>
                    <tr>
                        <td>屏幕尺寸</td>
                        <td>6.7英寸</td>
                    </tr>
                </table>
            </div>
            <div id="reviews" class="tab-content">
                <div class="review-header">
                    <h3>精选评价</h3>
                    <a href="#">查看全部 ></a>
                </div>
                <div class="review-item">
                    <div class="review-user">
                        <div class="user-avatar"></div>
                        <div>
                            <strong>张***三</strong>
                            <span style="color: #ff6700; margin-left: 10px;">★★★★★</span>
                        </div>
                    </div>
                    <div class="review-content">
                        手机非常棒！钛金属质感一流，拍照效果惊艳，系统流畅，物流也很快，包装完好，强烈推荐！
                    </div>
                    <div class="review-date">2025-10-25</div>
                </div>
                <div class="review-item">
                    <div class="review-user">
                        <div class="user-avatar"></div>
                        <div>
                            <strong>李***四</strong>
                            <span style="color: #ff6700; margin-left: 10px;">★★★★☆</span>
                        </div>
                    </div>
                    <div class="review-content">
                        整体不错，就是价格有点贵，不过一分钱一分货，体验确实比上一代好很多。
                    </div>
                    <div class="review-date">2025-10-24</div>
                </div>
            </div>
        </div>
        <!-- 底部推荐 -->
        <div class="recommendations">
            <h3 class="recommend-title">猜你喜欢</h3>
            <div class="recommend-grid">
                <div class="recommend-item">
                    <img src="https://via.placeholder.com/200x150.png?text=Rec+1" alt="推荐商品">
                    <div class="recommend-item-name">Apple AirPods Pro (第2代)</div>
                    <div class="recommend-item-price">¥ 1,899.00</div>
                </div>
                <div class="recommend-item">
                    <img src="https://via.placeholder.com/200x150.png?text=Rec+2" alt="推荐商品">
                    <div class="recommend-item-name">Apple Watch Series 9 GPS</div>
                    <div class="recommend-item-price">¥ 2,999.00</div>
                </div>
                <div class="recommend-item">
                    <img src="https://via.placeholder.com/200x150.png?text=Rec+3" alt="推荐商品">
                    <div class="recommend-item-name">MacBook Air M2 13英寸</div>
                    <div class="recommend-item-price">¥ 8,999.00</div>
                </div>
                <div class="recommend-item">
                    <img src="https://via.placeholder.com/200x150.png?text=Rec+4" alt="推荐商品">
                    <div class="recommend-item-name">iPad Air 第5代</div>
                    <div class="recommend-item-price">¥ 4,399.00</div>
                </div>
                <div class="recommend-item">
                    <img src="https://via.placeholder.com/200x150.png?text=Rec+5" alt="推荐商品">
                    <div class="recommend-item-name">Magic Mouse 2</div>
                    <div class="recommend-item-price">¥ 649.00</div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // --- 标签页切换功能 ---
        document.addEventListener('DOMContentLoaded', function() {
            const tabItems = document.querySelectorAll('.tab-item');
            const tabContents = document.querySelectorAll('.tab-content');
            tabItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有active类
                    tabItems.forEach(t => t.classList.remove('active'));
                    tabContents.forEach(c => c.classList.remove('active'));
                    // 给当前点击的标签和内容添加active类
                    item.classList.add('active');
                    const tabId = item.getAttribute('data-tab');
                    document.getElementById(tabId).classList.add('active');
                });
            });
            // --- 规格选择功能 ---
            const specOptions = document.querySelectorAll('.spec-option');
            specOptions.forEach(option => {
                option.addEventListener('click', () => {
                    // 获取同组的所有选项
                    const parent = option.parentElement;
                    const siblings = parent.querySelectorAll('.spec-option');
                    // 移除同组所有选项的selected类
                    siblings.forEach(s => s.classList.remove('selected'));
                    // 给当前点击的选项添加selected类
                    option.classList.add('selected');
                });
            });
            // --- 数量选择功能 ---
            const quantityInput = document.querySelector('.quantity-input');
            const minusBtn = document.querySelector('.quantity-btn:first-child');
            const plusBtn = document.querySelector('.quantity-btn:last-child');
            minusBtn.addEventListener('click', () => {
                let value = parseInt(quantityInput.value);
                if (value > 1) {
                    quantityInput.value = value - 1;
                }
            });
            plusBtn.addEventListener('click', () => {
                let value = parseInt(quantityInput.value);
                quantityInput.value = value + 1;
            });
            // --- 按钮点击提示 ---
            document.querySelector('.buy-button').addEventListener('click', () => {
                alert('跳转到结算页面...');
            });
            document.querySelector('.add-cart-button').addEventListener('click', () => {
                alert('已成功加入购物车！');
            });
            // --- 缩略图点击切换主图 (模拟) ---
            const thumbnails = document.querySelectorAll('.thumbnail');
            const mainImage = document.querySelector('.main-image img');
            const imageUrls = [
                'https://via.placeholder.com/500x500.png?text=Main+Product+Image',
                'https://via.placeholder.com/500x500.png?text=Image+2',
                'https://via.placeholder.com/500x500.png?text=Image+3',
                'https://via.placeholder.com/500x500.png?text=Image+4',
                'https://via.placeholder.com/500x500.png?text=Image+5'
            ];
            thumbnails.forEach((thumb, index) => {
                thumb.addEventListener('click', () => {
                    // 更新缩略图active状态
                    thumbnails.forEach(t => t.classList.remove('active'));
                    thumb.classList.add('active');
                    // 更新主图 (这里只是更换了placeholder的文本，实际项目中应替换src)
                    mainImage.src = imageUrls[index];
                });
            });
        });
    </script>
</body>
</html>

如何使用和扩展这个模板

  1. 替换图片：将所有 src="https://via.placeholder.com/..." 替换成你自己的商品图片URL。
  2. 修改文本内容：直接在HTML中修改标题、价格、描述等文本内容。
  3. 动态化数据：
    • 后端渲染：使用PHP, Java, Python等后端语言，从数据库中获取商品数据，然后动态生成HTML。
    • 前端框架：使用Vue.js或React等前端框架，将数据存储在组件的data或state中，通过v-for或.map()等方法循环渲染列表（如规格、评价、推荐商品等）。
  4. 增强交互：
    • 加入购物车：当前只是alert提示，实际应用中，应该通过AJAX请求将商品ID、规格、数量发送到后端API。
    • SKU选择：当用户选择不同颜色和容量时，价格和库存可能会变化，这需要前端根据选择的SKU（Stock Keeping Unit）去后端查询对应信息并更新页面。
    • 图片放大：可以添加一个功能，当鼠标悬停在主图上时，显示一个可以拖动的放大镜效果。

这个模板为你提供了一个坚实的起点,你可以根据具体业务需求进行裁剪和扩展。

淘宝商品详情页面html模板
（图片来源网络，侵删）