带代码示例的 HTML 标签实操手册
带代码示例的 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 为补充）。