ChatGPT体验 AI绘画体验

html常用标签有哪些

提问人：ppw_crxis 时间：2025-12-25 公开状态：

好的，这是一个非常基础且重要的HTML入门问题，我来为你详细讲解一下。 HTML（超文本标记语言）是构建网页的基石，它使用一系列的“标签”来定义网页的结构和内容。下面我将常用标签分为几大类，方便你理解和记忆。 ### 一、文档结构标签（骨架标签）这些标签定义了HTML文档的基本骨架，一个标准的HTML5文档至少包含它们。 * `<!DOCTYPE html>`: **文档类型声明**，告诉浏览器这是HTML5文档。**必须放在第一行**。 * `<html>`: **根元素**，包裹整个HTML页面的所有内容。 * `<head>`: **头部容器**，包含一些不直接显示在网页上的元信息，如标题、字符集、引入CSS/JS文件等。 * `<meta>`: **元数据标签**，用于定义页面的字符集（如 `<meta charset="UTF-8">`）、关键词、描述等。 * `<title>`: **页面标题**，定义浏览器标签页上显示的标题，对SEO非常重要。 * `<body>`: **主体容器**，包含所有显示在网页上的可见内容，如文本、图片、视频等。 **示例：** ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body>  </body> </html> ``` ### 二、内容分区与文本标签（语义化标签） HTML5引入了一系列语义化标签，让网页结构更清晰，对搜索引擎和屏幕阅读器更友好。 * `<header>`: 定义页面的页眉（介绍性内容或导航链接的容器）。 * `<nav>`: 定义导航链接的部分。 * `<main>`: 定义文档的主要内容，一个页面只应有一个 `<main>`。 * `<article>`: 定义独立的自包含内容，如博客文章、新闻故事、论坛帖子等。 * `<section>`: 定义文档中的一个章节或区域。 * `<aside>`: 定义页面主要内容之外的内容，通常显示为侧边栏。 * `<footer>`: 定义页面的页脚，通常包含作者信息、版权信息等。 * `<h1>` 到 `<h6>`: **标题标签**，`<h1>` 级别最高，`<h6>` 级别最低。用于定义标题，重要性依次递减。 * `<p>`: **段落标签**，用于定义一段文本。 * `<div>`: **分区或节**，是一个通用的容器，没有特定语义，主要用于布局和样式化。 ### 三、文本格式化标签 * `<br>`: **换行标签**，强制文本换行（空标签，没有结束标签）。 * `<hr>`: **水平线标签**，在页面中创建一条水平分割线（空标签）。 * `<strong>`: **强调标签**，表示内容**非常重要**，通常以**粗体**显示。 * `<em>`: **强调标签**，表示内容需要**着重注意**，通常以*斜体*显示。 * `<span>`: **内联容器**，用于对文本中的一小部分进行样式化或脚本操作，本身没有特殊含义。 ### 四、媒体内容标签 * `<img>`: **图像标签**，用于嵌入图像。 * 重要属性：`src`（图片路径）、`alt`（替代文本，图片无法显示时显示，对无障碍和SEO至关重要）。 * 示例：`<img src="logo.png" alt="公司Logo">` * `<audio>`: **音频标签**，用于嵌入音频内容。 * 示例：`<audio controls src="music.mp3"></audio>` * `<video>`: **视频标签**，用于嵌入视频内容。 * 示例：`<video controls width="250" src="video.mp4"></video>` ### 五、超链接与列表标签 * `<a>`: **锚点标签/超链接**，用于创建指向其他页面、文件、位置或URL的链接。 * 核心属性：`href`（指定链接目标地址）。 * 示例：`<a href="https://www.example.com">访问示例网站</a>` * `<ul>`: **无序列表**，列表项默认以项目符号显示。 * `<ol>`: **有序列表**，列表项默认以数字或字母顺序显示。 * `<li>`: **列表项**，用于在 `<ul>` 或 `<ol>` 中定义每一个列表项目。 **示例：** ```html <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> <ol> <li>打开冰箱</li> <li>拿出牛奶</li> <li>关上冰箱</li> </ol> ``` ### 六、表格标签 * `<table>`: 定义表格。 * `<tr>`: 定义表格中的一行。 * `<td>`: 定义表格中的一个标准单元格。 * `<th>`: 定义表格内的表头单元格（通常加粗居中）。 * `<thead>`: 定义表格的页眉部分。 * `<tbody>`: 定义表格的主体部分。 * `<tfoot>`: 定义表格的页脚部分。 ### 七、表单标签表单用于收集用户输入，是网页交互的基础。 * `<form>`: **表单容器**，定义了一个用于用户输入的表单。 * 重要属性：`action`（提交表单时将数据发送到的URL）、`method`（提交方式，如GET或POST）。 * `<input>`: **输入字段**，用途最广泛的表单元素，根据 `type` 属性值不同，形态各异。 * 常见 `type` 值：`text`（文本）、`password`（密码）、`email`（邮箱）、`submit`（提交按钮）、`radio`（单选按钮）、`checkbox`（复选框）、`file`（文件上传）等。 * `<label>`: **标签**，为表单元素定义标注，提升可用性和无障碍访问。 * `<textarea>`: **文本区域**，定义多行文本输入框。 * `<select>`: **下拉选择列表**。 * `<option>`: 定义下拉列表中的一个选项（在 `<select>` 内部使用）。 * `<button>`: **可点击的按钮**。 **示例：** ```html <form action="/submit" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="登录"> </form> ``` ### 总结以上是HTML中最常用和核心的标签。学习HTML的关键在于理解每个标签的**语义**（它代表什么含义）和**用法**，而不仅仅是记住它的样子。多动手写代码，结合CSS和JavaScript，你就能逐渐掌握构建网页的技能。如果你对某个特定标签的用法有疑问，可以随时再问我！

如何获得每天提问次数？

在SSOJ参加周赛，每做对1题可获得1次提问机会。
举例：本周比赛做对5题，下周每天可以提问5次。

<<提问分享>>