跳到主要内容

HTML5 结构标签

HTML 标签是构成网页的基础，用于描述内容的结构和语义。下面按功能分类整理：

文档整体结构​

  • <html>：HTML 文档根元素
  • <head>：头部信息，包含元数据、样式、脚本等
  • <body>：页面主体内容
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

头部信息标签​

  • <title>：文档标题
  • <meta>：文档元信息（编码、描述、关键词等）
  • <link>：链接外部资源（如 CSS）
  • <style>：内部样式
  • <script>：脚本

文本与段落标签​

  • <h1> ~ <h6>：标题
  • <p>：段落
  • <br>：换行
  • <hr>：水平分割线
  • <blockquote>：引用块
  • <pre>：预格式化文本

文本格式标签​

  • <b>：粗体（无语义）
  • <strong>：强调（语义化粗体）
  • <i>：斜体（无语义）
  • <em>：强调（语义化斜体）
  • <u>：下划线
  • <mark>：高亮文本
  • <small>：小号文字
  • <sub>：下标
  • <sup>：上标

列表结构​

  • <ul>：无序列表
  • <ol>：有序列表
  • <li>：列表项
  • <dl>：定义列表
  • <dt>：定义术语
  • <dd>：定义描述

表格结构​

  • <table>：表格
  • <thead>：表头
  • <tbody>：表体
  • <tfoot>：表尾
  • <tr>：表格行
  • <th>：表头单元格
  • <td>：表格单元格
  • <caption>：表格标题

表单结构​

  • <form>：表单
  • <input>：输入框
  • <textarea>：多行文本框
  • <button>：按钮
  • <select>：下拉选择框
  • <option>：下拉选项
  • <label>：表单标签
  • <fieldset>：字段集
  • <legend>：字段集标题

多媒体与嵌入内容​

  • <img>：图像
  • <audio>：音频
  • <video>：视频
  • <source>：媒体源文件
  • <track>：视频字幕轨道
  • <canvas>：画布
  • <iframe>：内联框架
  • <figure>：图像或图表块
  • <figcaption>：图像说明

语义化布局标签​

  • <header>：页头
  • <footer>：页脚
  • <main>：主要内容
  • <section>：章节或主题块
  • <article>：独立文章内容
  • <nav>：导航栏
  • <aside>：侧边栏、附加内容

通用容器标签​

  • <div>：通用块级容器
  • <span>：通用行内容器

脚本与样式​

  • <script>：JavaScript 脚本
  • <noscript>：当脚本不可用时显示的内容
  • <style>：内部样式表
  • <link>：外部样式表链接

这些标签共同构成了 HTML 的语义化结构，帮助浏览器正确渲染页面、提高可访问性与搜索引擎优化效果。