带代码示例的 HTML 标签实操手册

这份手册在“常用标签速查表”基础上，补充了高频场景的实操代码，每个示例都标注了核心要点，直接复制即可使用，适合边学边练。

一、结构布局类：搭建页面骨架

1. 语义化布局（完整页面结构示例）

核心场景：快速搭建博客、官网等通用页面框架，兼顾语义化和 SEO。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的博客</title>
</head>
<body>
  <!-- 页面头部：Logo + 导航 -->
  <header style="border-bottom: 1px solid #eee; padding: 10px 0;">
    <h1>我的技术博客</h1>
    <nav>
      <a href="/home" style="margin-right: 20px;">首页</a>
      <a href="/article" style="margin-right: 20px;">文章</a>
      <a href="/about">关于我</a>
    </nav>
  </header>

  <!-- 核心内容区：文章列表 + 侧边栏 -->
  <main style="display: flex; margin: 20px 0;">
    <!-- 文章列表（主体） -->
    <section style="width: 70%; margin-right: 30px;">
      <h2>最新文章</h2>
      <!-- 单篇文章（独立内容用 article） -->
      <article style="margin-bottom: 20px; padding: 15px; border: 1px solid #eee;">
        <h3>HTML 语义化标签用法</h3>
        <p>语义化标签能让代码更易读，还能提升 SEO...</p>
        <a href="/detail/1">阅读全文</a>
      </article>
    </section>

    <!-- 侧边栏（辅助内容） -->
    <aside style="width: 30%;">
      <h3>热门推荐</h3>
      <ul style="padding-left: 20px;">
        <li><a href="/detail/2">CSS 布局技巧</a></li>
        <li><a href="/detail/3">JavaScript 基础</a></li>
      </ul>
    </aside>
  </main>

  <!-- 页脚：版权信息 -->
  <footer style="border-top: 1px solid #eee; padding: 10px 0; text-align: center; color: #999;">
    © 2024 我的技术博客 - 转载请注明出处
  </footer>
</body>
</html>

要点：main 内用 flex 实现“主体+侧边栏”布局；article 包裹独立文章，语义更清晰。

2. 通用容器 <div>（灵活布局）

核心场景：划分非语义化的局部区域（如卡片、模块），配合 CSS 控制样式。

<!-- 用 div 实现 2 列卡片布局 -->
<div style="display: flex; gap: 20px; margin: 20px 0;">
  <!-- 卡片 1 -->
  <div style="width: 50%; padding: 20px; border: 1px solid #eee; border-radius: 8px;">
    <h3>卡片 1</h3>
    <p>这是用 div 包裹的卡片内容，可灵活调整样式。</p>
  </div>
  <!-- 卡片 2 -->
  <div style="width: 50%; padding: 20px; border: 1px solid #eee; border-radius: 8px;">
    <h3>卡片 2</h3>
    <p>两列卡片用 flex 布局，gap 控制间距。</p>
  </div>
</div>

要点：div 本身无语义，需通过 class 或内联样式定义外观，适合复杂局部布局。

二、文本内容类：优化文字展示

1. 标题与段落（基础排版）

核心场景：文章、文档的标题层级和正文排版，确保阅读逻辑清晰。

<!-- 标题层级：h1 到 h6，权重递减 -->
<h1>一级标题（页面唯一，如文章标题）</h1>
<h2>二级标题（大章节，如“一、引言”）</h2>
<h3>三级标题（小节，如“1.1 语义化定义”）</h3>

<!-- 段落：自动换行，上下留白 -->
<p>这是第一段正文，用 p 标签包裹，避免直接写纯文本。段落之间会自动产生间距，比用 br 分段更规范。</p>
<p>这是第二段正文，<strong>这里的文字会加粗</strong>（强调重要信息），<em>这里的文字会斜体</em>（强调语气）。</p>

<!-- 换行与分隔线 -->
<p>地址：北京市朝阳区XX路<br>邮编：100000</p> <!-- br 实现同段落内换行 -->
<hr> <!-- 水平线分隔不同内容块 -->
<p>下方是引用内容：</p>

2. 列表（有序/无序列表）

核心场景：展示并列内容（如步骤、选项、清单），提升内容规整度。

<!-- 无序列表：用于无顺序的并列内容（如兴趣爱好） -->
<h3>我的兴趣爱好</h3>
<ul style="list-style-type: circle;"> <!-- list-style-type 改列表符号（circle 为空心圆） -->
  <li>编程（HTML/CSS/JS）</li>
  <li>阅读（技术书籍）</li>
  <li>运动（跑步、篮球）</li>
</ul>

<!-- 有序列表：用于有顺序的内容（如步骤、排名） -->
<h3>HTML 学习步骤</h3>
<ol start="2" type="A"> <!-- start 设起始序号，type 设序号类型（A 为大写字母） -->
  <li>学习基础标签（如 p、h1-h6）</li>
  <li>掌握语义化布局（如 header、main）</li>
  <li>结合 CSS 美化页面</li>
</ol>

要点：ul/ol 的直接子标签必须是 li，不能嵌套其他标签；通过 list-style-type 自定义列表符号。

3. 超链接 <a>（跳转与锚点）

核心场景：页面跳转、打开邮件、锚点定位（同一页面内跳转）。

<!-- 1. 跳转外部页面：新窗口打开 -->
<a href="https://www.baidu.com" target="_blank">打开百度（新窗口）</a>

<!-- 2. 跳转内部页面（同一网站内） -->
<a href="/about.html">查看“关于我们”页面</a>

<!-- 3. 打开邮件客户端 -->
<a href="mailto:contact@example.com?subject=咨询问题">发送邮件（主题预设为“咨询问题”）</a>

<!-- 4. 锚点定位（同一页面内跳转到指定位置） -->
<!-- 第一步：定义锚点目标（给目标元素加 id） -->
<h3 id="section1">1. 第一部分内容</h3>
<p>这里是第一部分的详细内容...</p>
<br><br><br><br><br> <!-- 用多个 br 制造滚动空间 -->
<!-- 第二步：创建锚点链接（href 用 #+id） -->
<a href="#section1">回到“第一部分内容”</a>

要点：target="_blank" 确保新窗口打开，避免当前页面被替换；锚点需配合目标元素的 id 使用。

三、表单元素类：收集用户输入

1. 基础表单（登录/注册示例）

核心场景：收集用户账号密码、个人信息，实现前后端数据交互。

<!-- 表单：提交到 submit.php，用 post 方式（安全，适合敏感数据） -->
<form action="submit.php" method="post" style="max-width: 400px; margin: 0 auto;">
  <!-- 1. 文本输入框：用户名 -->
  <div style="margin-bottom: 15px;">
    <label for="username">用户名：</label> <!-- label 关联输入框，点击标签聚焦输入 -->
    <input type="text" id="username" name="username" required placeholder="请输入用户名">
    <!-- required：必填项，提交时浏览器会自动验证；placeholder：输入提示 -->
  </div>

  <!-- 2. 密码输入框：密码 -->
  <div style="margin-bottom: 15px;">
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required placeholder="请输入密码">
    <!-- type="password"：输入内容隐藏为圆点 -->
  </div>

  <!-- 3. 单选按钮：性别（name 相同实现“互斥选择”） -->
  <div style="margin-bottom: 15px;">
    <label>性别：</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
    <!-- checked：默认选中该选项 -->
  </div>

  <!-- 4. 下拉选择框：城市 -->
  <div style="margin-bottom: 15px;">
    <label for="city">所在城市：</label>
    <select id="city" name="city">
      <option value="">请选择</option> <!-- 空选项，提示用户选择 -->
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option> <!-- selected：默认选中 -->
      <option value="guangzhou">广州</option>
    </select>
  </div>

  <!-- 5. 多行文本框：备注 -->
  <div style="margin-bottom: 15px;">
    <label for="remark">备注：</label>
    <textarea id="remark" name="remark" rows="3" cols="30" placeholder="请输入备注（可选）"></textarea>
    <!-- rows：默认行数；cols：默认列数 -->
  </div>

  <!-- 6. 提交与重置按钮 -->
  <input type="submit" value="提交表单">
  <input type="reset" value="重置内容" style="margin-left: 10px;">
</form>

要点：

  • 所有输入元素需加 name 属性，后端通过 name 获取值（如 username 对应用户名）；
  • required 实现前端基础验证，减少无效提交；
  • 单选按钮需同 name 才能互斥，下拉框用 option 定义选项。

2. 特殊表单元素（文件上传、复选框）

核心场景：让用户上传文件（如头像、简历），或选择多个选项（如兴趣标签）。

<form action="upload.php" method="post" enctype="multipart/form-data">
  <!-- 1. 文件上传：必须加 enctype="multipart/form-data"（表单属性） -->
  <div style="margin-bottom: 15px;">
    <label for="avatar">上传头像：</label>
    <input type="file" id="avatar" name="avatar" accept="image/*">
    <!-- accept="image/*"：仅允许上传图片文件（过滤非图片类型） -->
  </div>

  <!-- 2. 复选框：多选兴趣（name 加 [] 表示数组，后端接收多个值） -->
  <div style="margin-bottom: 15px;">
    <label>兴趣标签（可多选）：</label>
    <input type="checkbox" id="tech" name="hobby[]" value="tech">
    <label for="tech">技术</label>
    <input type="checkbox" id="music" name="hobby[]" value="music">
    <label for="music">音乐</label>
    <input type="checkbox" id="movie" name="hobby[]" value="movie" checked>
    <label for="movie">电影</label>
  </div>

  <input type="submit" value="上传并提交">
</form>

要点：文件上传必须在 <form> 加 enctype="multipart/form-data"，否则后端无法接收文件；多选框 name 需加 []，后端用数组接收多个选中值。

四、媒体元素类：嵌入多媒体

1. 图片 <img>（基础与自适应）

核心场景：展示头像、封面图、配图，确保图片加载失败时有提示。

<!-- 1. 基础用法：本地图片（路径需正确） -->
<img src="images/avatar.jpg" alt="用户头像" class="avatar" style="width: 150px; height: 150px; border-radius: 50%;">
<!-- src：图片路径（本地图片放 images 文件夹，网络图片用完整 URL）；alt：加载失败时显示的文字 -->

<!-- 2. 网络图片：直接用 URL -->
<img src="https://picsum.photos/400/200" alt="示例图片" style="max-width: 100%; height: auto;">
<!-- max-width: 100% + height: auto：实现图片自适应（缩小到容器宽度，不拉伸变形） -->

<!-- 3. 图片链接：点击图片跳转 -->
<a href="https://www.example.com" target="_blank">
  <img src="images/banner.jpg" alt=" banner 图" style="width: 100%;">
</a>

要点：alt 属性必写（助于无障碍和 SEO）；用 max-width: 100% 避免图片超出容器（适配移动端）。

2. 视频 <video>（基础播放）

核心场景：在页面嵌入视频（如教程、宣传视频），支持播放控制。

<!-- 视频播放：支持多种格式（兼容不同浏览器） -->
<video 
  src="videos/intro.mp4" 
  poster="images/video-cover.jpg" 
  controls 
  width="800"
  style="display: block; margin: 20px auto;"
>
  <!-- 浏览器不支持 video 标签时显示的文字 -->
  您的浏览器不支持视频播放，请升级浏览器。
  <!-- 可选：添加其他格式视频，提高兼容性 -->
  <source src="videos/intro.webm" type="video/webm">
  <source src="videos/intro.ogg" type="video/ogg">
</video>

要点：

  • controls：显示播放、暂停、音量等控件；
  • poster：视频加载前显示的封面图；
  • 加多个 <source> 标签适配不同浏览器（MP4 兼容性最好，WebM/OGG 为补充）。
# html # 前端
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

git项目多分支协同开发提交以及更新代码的方法

在GitLab/GitHub等平台创建合并请求（Merge Request/Pull Request），将功能分支合并到develop分支。采用Git Flow或类似的分支模型，明确分支用途。主分支（main/master）用于生产环境，开发分支（develop）用于集成测试，功能分支（feature/团队成员审查代码后，通过平台工具将功能分支合并到develop分支。合并后删除远程功能分支，保持

avatar 2048 AI社区
cover

【C++闯关笔记】map与set的使用

avatar 2048 AI社区
cover

MySQL-TrinityCore异步连接池的学习(七)

avatar 2048 AI社区