上一篇
html网页常用标签有哪些？html标签大全及用法详解
HTML（超文本标记语言）是构建网页结构的基石，它通过一系列预定义的标签来告诉浏览器如何显示内容，以下是对 HTML 常用标签的详细分类解析，涵盖了从文档结构到表单交互的核心元素。
文档基本结构标签
任何标准的 HTML5 文档都必须包含以下基础标签，它们定义了页面的元数据和根元素。
| 描述 | 示例/用法 | |
|---|---|---|
| <!DOCTYPE html> | 文档类型声明，告知浏览器使用 HTML5 标准解析。 | 必须放在第一行。 |
| <html> | 根元素，包裹整个 HTML 文档的所有内容。 | <html lang="zh-CN"> |
| <head> | 头部区域，包含元数据、标题、样式表链接等，不直接显示在页面正文中。 | 包含 <title>, <meta>, <link> 等。 |
| <body> | 主体区域，包含所有在浏览器窗口中可见的内容。 | 包含文本、图片、链接等。 |
文本与语义化标签
HTML5 引入了许多语义化标签，旨在让搜索引擎和辅助技术（如屏幕阅读器）更好地理解内容结构。
通用文本标签
- <h1> 到 <h6>标签，<h1> 为最大标题，<h6> 为最小标题，建议页面中只使用一个 <h1>。
- <p>：段落标签，用于包裹一段文本。
- <span>器，通常用于对部分文本应用样式，无默认样式。
- <br>：换行标签，自闭合标签。
- <hr>：水平线标签，用于主题之间的分隔。
HTML5 语义化标签
| 描述 | 适用场景 | |
|---|---|---|
| <header> | 页面或节的头部区域，通常包含 Logo、导航或标题。 | 页面顶部或文章开头。 |
| <nav> | 导航链接部分。 | 主菜单、侧边栏链接。 |
| <main> | 文档的主要内容区域，一个页面应只有一个 <main>。 | 核心业务内容。 |
| <section> | 文档中的一个独立章节，通常带有标题。 | 博客文章的不同部分。 |
| <article> | 独立的、完整的内容块，可以独立分发。 | 新闻文章、博客帖子。 |
| <aside> | 间接相关的内容，如侧边栏、广告。 | 推荐阅读、标签云。 |
| <footer> | 页面或节的底部，通常包含版权信息、联系方式。 | 页面底部。 |
链接与媒体标签
超链接
- <a>：锚点标签，用于创建超链接。
- href 属性：指定链接目标 URL。
- target="_blank"：在新标签页中打开链接。
- title 属性：鼠标悬停时显示的提示文本。
图像
- <img>：嵌入图像，自闭合标签。
- src 属性：图像的路径或 URL。
- alt 属性：图像无法显示时的替代文本，对 SEO 和无障碍访问至关重要。
- width / height 属性：指定图像的宽度和高度。
多媒体
- <video>：嵌入视频文件，支持 controls（显示播放控件）、autoplay（自动播放）、muted（静音）等属性。
- <audio>：嵌入音频文件，属性与 <video> 类似。
- <iframe>：内联框架，用于在当前 HTML 页面中嵌入另一个 HTML 页面（如嵌入地图、YouTube 视频）。
列表标签
HTML 提供了三种主要列表类型，用于组织信息。
| 描述 | 示例结构 | |
|---|---|---|
| <ul> | 无序列表，项目符号默认为圆点。 | <ul><li>项目1</li><li>项目2</li></ul> |
| <ol> | 有序列表，项目符号默认为数字。 | <ol><li>第一步</li><li>第二步</li></ol> |
| <dl> | 定义列表，用于术语和定义。 | <dl><dt>术语</dt><dd>定义</dd></dl> |
- <li>：列表项，必须嵌套在 <ul>、<ol> 或 <menu> 中。
- <dt>：定义列表中的术语（Definition Term）。
- <dd>：定义列表中的定义（Definition Description）。
表格标签
表格用于展示结构化数据,而非页面布局。
| 描述 | 备注 | |
|---|---|---|
| <table> | 定义表格。 | 表格的根容器。 |
| <caption> | 定义表格标题。 | 通常放在 <table> 内部的第一行。 |
| <thead> | 定义表格的表头部分。 | 包含 <tr>。 |
| <tbody> | 定义表格的主体部分。 | 包含数据行 <tr>。 |
| <tfoot> | 定义表格的表尾部分。 | 通常包含汇总信息。 |
| <tr> | 定义表格行（Table Row）。 | 嵌套在 <thead>, <tbody>, <tfoot> 中。 |
| <th> | 定义表头单元格（Table Header）。 | 文本默认加粗居中。 |
| <td> | 定义标准单元格（Table Data）。 | 文本默认左对齐。 |
示例结构：
<table> <caption>员工信息表</caption> <thead> <tr> <th>姓名</th> <th>职位</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>工程师</td> </tr> </tbody> </table>
表单与输入标签
表单用于收集用户输入,是网页交互的核心。
- <form>：定义表单容器。
- action：规定当提交表单时向何处发送表单数据。
- method：规定如何发送表单数据（GET 或 POST）。
- <input>：最常用的输入控件，通过 type 属性决定行为。
- type="text"：单行文本输入。
- type="password"：密码输入（字符隐藏）。
- type="email"：电子邮件输入，浏览器会进行基本验证。
- type="number"：数字输入。
- type="checkbox"：复选框，允许选择多个选项。
- type="radio"：单选按钮，同一组中只能选一个。
- type="submit"：提交按钮。
- type="file"：文件上传。
- <label>：定义输入字段的描述，通过 for 属性关联 <input> 的 id，点击标签即可聚焦输入框，提升用户体验。
- <textarea>：多行文本输入区域。
- <select> 和 <option>：下拉选择菜单。
相关问题与解答
问题 1：为什么推荐使用语义化标签（如 <header>, <article>）而不是全部使用 <div>？
解答：
使用语义化标签主要有以下三个优势：
- SEO 优化：搜索引擎爬虫更容易理解页面的内容结构，爬虫知道 <h1> 是主要标题，<article> 是主要内容，从而更准确地索引页面，提升搜索排名。
- 无障碍访问（Accessibility）：屏幕阅读器等辅助技术可以利用语义标签快速导航，用户可以直接跳转到 <nav> 区域或 <main> 内容，而无需阅读所有 <div> 的文本，极大地提升了视障用户的体验。
- 代码可读性与维护性：语义化标签使代码更具自解释性，其他开发者阅读代码时，能一眼看出 <footer> 是页脚，而 <div class="footer"> 则需要额外查看 CSS 或上下文才能确认其用途，降低了维护成本。
问题 2：在 HTML 表单中，<input type="submit"> 和 <button type="submit"> 有什么区别？应该如何选择？
解答：
虽然两者在功能上都能提交表单，但存在以下区别：
- 内容灵活性：<input> 是自闭合标签，其显示文本只能通过 value 属性设置，且只能是纯文本，而 <button> 可以包含 HTML 内容，如图片、图标（例如使用 <i class="icon">）或富文本，因此可以设计出更美观、更复杂的按钮。
- 默认行为差异：在某些旧版浏览器或特定配置下，<button> 的默认类型可能是 button（仅触发点击事件而不提交），必须显式指定 type="submit" 才能提交表单，而 <input type="submit"> 默认行为就是提交。
- 选择建议：如果只需要一个简单的文本按钮，两者皆可，<input> 更简洁，如果需要按钮包含图标、复杂样式或动态内容，应优先选择 <button type="submit">，因为它提供了更大的设计自由度和更好的语义表达能力。
