qw
/
soilgd


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>完整HTML模板设计与功能说明</title>
    <link rel="stylesheet" href="完整HTML模板设计与功能说明.css">
</head>

<body>
    <!--页头区域-->
    <header>
        <div class="container header-content">
            <div class="logo">HTML模板</div>

            <!--主导航-->
            <nav>
                <ul>
                    <li><a href="#home">首页</a></li>
                    <li><a href="#about">关于</a></li>
                    <li><a href="#services">服务</a></li>
                    <li><a href="#portfolio">项目</a></li>
                    <li><a href="#contact">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主内容容器 -->
    <div class="container">
        <!-- 主内容区域 -->
        <main>
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <h3>侧边栏</h3>
                <p>这是一个侧边栏区域，通常用于显示额外信息、导航或广告。</p>

                <h3>快速链接</h3>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>

                <h3>最新动态</h3>
                <div class="card">
                    <h4>更新日志</h4>
                    <p><small>2023-11-15</small></p>
                    <p>发布了新版本的HTML模板，增加了响应式设计。</p>
                </div>

                <div class="card mt-2">
                    <h4>功能增强</h4>
                    <p><small>2023-11-10</small></p>
                    <p>添加了新的UI组件和样式。</p>
                </div>
            </aside>
            <!-- 主内容区域 -->
            <div class="content">
                <div class="card">
                    <h1>完整HTML模板（带详细注释）</h1>
                    <p>这是一个包含完整HTML结构和详细注释的模板，适合作为任何网页项目的起点。</p>

                    <!-- 信息提示框 -->
                    <div class="alert alert-info">
                        此模板包含：页头、导航、主要内容区、侧边栏、页脚以及各种UI组件
                    </div>

                    <!-- 基础文本元素示例 -->
                    <div>
                        <h2>HTML基础元素</h2>
                        <p>下面展示了HTML中常用的文本元素：</p>
                        <p>这是一个<strong>强调文本</strong>，<em>斜体文本</em>，以及<u>带下划线</u>的文本。</p>
                        <p>超链接示例：<a href="#">点击这里</a></p>
                    </div>

                    <!-- 按钮样式示例 -->
                    <div>
                        <h2>按钮样式</h2>
                        <div class="flex">
                            <button class="btn">主要按钮</button>
                            <button class="btn btn-success">成功按钮</button>
                            <button class="btn btn-warning">警告按钮</button>
                            <button class="btn btn-danger">危险按钮</button>
                        </div>
                    </div>

                    <!-- 表单元素示例 -->
                    <div>
                        <h2>表单元素</h2>
                        <form action="">
                            <!-- 文本输入框 -->
                            <div class="form-group">
                                <label for="name">姓名</label>
                                <input type="text" id="name" placeholder="请输入您的姓名">
                            </div>

                            <!-- 邮箱输入框 -->
                            <div class="form-group">
                                <label for="email">邮箱</label>
                                <input type="email" id="email" placeholder="请输入您的邮箱">
                            </div>

                            <!-- 下拉选择框 -->
                            <div class="form-group">
                                <div for="country">
                                    <label for="country">国家</label>
                                    <select name="" id="">
                                        <option value="">选择国家</option>
                                        <option value="china">中国</option>
                                        <option value="usa">美国</option>
                                        <option value="uk">英国</option>
                                        <option value="japan">日本</option>
                                    </select>
                                </div>
                            </div>

                            <!-- 文本区域 -->
                            <div class="form-group">
                                <label for="message">留言</label>
                                <textarea name="message" id="message" rows="5" placeholder="请输入您的留言"></textarea>
                            </div>

                            <div class="form-group">
                                <label>
                                    <input type="checkbox" checked> <a href="#">我同意条款和条件</a>
                                </label>
                            </div>

                            <!-- 提交按钮 -->
                            <div>
                                <button type="submit">提交表单</button>
                            </div>
                        </form>

                        <!-- 表格示例 -->
                        <div>
                            <h2>表格示例</h2>
                            <table>
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>姓名</th>
                                        <th>邮箱</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>张三</td>
                                        <td>zhangsan@example.com</td>
                                        <td>活跃</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>李四</td>
                                        <td>lisi@example.com</td>
                                        <td>活跃</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>王五</td>
                                        <td>wangwu@example.com</td>
                                        <td>未激活</td>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 卡片网格布局 -->
                    <div>
                        <h2>卡片网格布局</h2>
                        <div class="grid">
                            <div class="card">
                                <h3>卡片1</h3>
                                <p>这是一个卡片的内容示例，可以用于展示产品、服务或其他信息。</p>
                            </div>
                            <div class="card">
                                <h3>卡片2</h3>
                                <p>这是一个卡片的内容示例，可以用于展示产品、服务或其他信息。</p>
                            </div>
                            <div class="card">
                                <h3>卡片3</h3>
                                <p>这是一个卡片的内容示例，可以用于展示产品、服务或其他信息。</p>
                            </div>
                            <div class="card">
                                <h3>卡片4</h3>
                                <p>这是一个卡片的内容示例，可以用于展示产品、服务或其他信息。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 页脚区域 -->
    <footer>
        <div class="container">
            <p>&copy; 2023 HTML模板 - 完整HTML结构示例</p>
            <p>本页面仅用于演示目的，包含HTML5的所有基本元素</p>
            <div class="mt-2">
                <a href="#" class="btn">隐私政策</a>
                <a href="#" class="btn">使用条款</a>
                <a href="#" class="btn">联系我们</a>
            </div>
        </div>
    </footer>
</body>

</html>