|
|
@@ -0,0 +1,215 @@
|
|
|
+<!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>© 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>
|
