HTML 基本元素标记
系统掌握 HTML 常用标签，从文档结构到表单元素全面覆盖
一、HTML 文档基本结构
每个 HTML 文件都必须遵循以下基本结构：
<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html lang="zh-CN"> <!-- 根元素，lang指定语言 -->
<head> <!-- 头部：元信息区域 -->
<meta charset="UTF-8"> <!-- 字符编码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title> <!-- 浏览器标签页标题 -->
<link rel="stylesheet" href="style.css">
</head>
<body> <!-- 主体：可见内容区域 -->
<h1>Hello World</h1>
</body>
</html>HTML
| 标签 | 说明 | 必需 |
|---|
<!DOCTYPE html> | 文档类型声明，告诉浏览器使用 HTML5 标准 | 是 |
<html> | 根元素，包裹所有内容 | 是 |
<head> | 元信息区域（标题、编码、样式、脚本引用等） | 是 |
<meta> | 元数据标签（编码、视口、描述等） | 推荐 |
<title> | 页面标题，显示在浏览器标签页 | 是 |
<body> | 页面可见内容的容器 | 是 |
二、文本相关标签
标题标签 h1 ~ h6
<h1>一级标题（最大）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最小）</h6>HTML
段落与文本格式化
| 标签 | 说明 | 示例效果 |
|---|
<p> | 段落 | 自动前后换行，有间距 |
<br> | 换行（自闭合） | 强制换行 |
<hr> | 水平分割线（自闭合） | 一条横线 |
<strong> | 加粗（语义：重要） | 加粗文本 |
<em> | 斜体（语义：强调） | 斜体文本 |
<del> | 删除线 | 删除文本 |
<mark> | 高亮标记 | 高亮文本 |
<sub> | 下标 | H2O |
<sup> | 上标 | X2 |
<code> | 行内代码 | var x = 1; |
<pre> | 预格式化文本（保留空格换行） | 代码块展示 |
<blockquote> | 块引用 | 引用段落，缩进显示 |
链接标签
<!-- 基本链接 -->
<a href="https://www.xjinping.com">访问本站</a>
<!-- 新窗口打开 -->
<a href="https://www.xjinping.com" target="_blank">新窗口打开</a>
<!-- 页内锚点跳转 -->
<a href="#section1">跳转到章节1</a>
<h2 id="section1">章节1</h2>
<!-- 邮件链接 -->
<a href="mailto:admin@xjinping.com">发送邮件</a>HTML
三、列表标签
<!-- 无序列表 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一步：安装 JDK</li>
<li>第二步：安装 Tomcat</li>
<li>第三步：安装 Maven</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>HTML
| 标签 | 说明 |
|---|
<ul> | 无序列表（圆点标记） |
<ol> | 有序列表（数字标记） |
<li> | 列表项 |
<dl> | 定义列表 |
<dt> | 定义术语 |
<dd> | 定义描述 |
四、表格标签
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td rowspan="2">北京</td> <!-- 合并2行 -->
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</tbody>
</table>HTML
| 标签 | 说明 |
|---|
<table> | 表格容器 |
<thead> / <tbody> / <tfoot> | 表头 / 表体 / 表尾（语义分组） |
<tr> | 表格行（table row） |
<th> | 表头单元格（加粗居中） |
<td> | 普通单元格 |
colspan="n" | 横向合并 n 列 |
rowspan="n" | 纵向合并 n 行 |
五、表单标签
<form action="/submit" method="POST">
<!-- 文本输入 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<!-- 密码 -->
<input type="password" name="pwd">
<!-- 单选 -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<!-- 多选 -->
<input type="checkbox" name="hobby" value="code"> 编程
<!-- 下拉选择 -->
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<!-- 多行文本 -->
<textarea name="bio" rows="4" cols="50"></textarea>
<!-- 提交按钮 -->
<button type="submit">提交</button>
</form>HTML
常用 input type 类型
| type 值 | 说明 |
|---|
text | 单行文本 |
password | 密码（隐藏输入） |
email | 邮箱（自动验证格式） |
number | 数字输入 |
date | 日期选择器 |
file | 文件上传 |
hidden | 隐藏字段 |
submit | 提交按钮 |
reset | 重置按钮 |
六、图片与多媒体
<!-- 图片 -->
<img src="photo.jpg" alt="描述文字" width="300">
<!-- 音频 -->
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
<!-- 视频 -->
<video controls width="600">
<source src="video.mp4" type="video/mp4">
</video>
<!-- 内嵌框架 -->
<iframe src="https://example.com" width="100%" height="400"></iframe>HTML
| 标签 | 说明 | 关键属性 |
|---|
<img> | 图片（自闭合） | src, alt, width, height |
<audio> | 音频播放器 | controls, autoplay, loop |
<video> | 视频播放器 | controls, width, poster |
<iframe> | 内嵌网页框架 | src, width, height |
⚠ 注意：<img> 标签的 alt 属性是必需的，用于图片无法加载时显示替代文字，也有助于 SEO 和无障碍访问。
七、HTML5 语义化标签
语义化标签让页面结构更清晰，有利于 SEO 和无障碍访问。
<header> 页面/区块头部（导航栏、Logo） </header>
<nav> 导航链接区域 </nav>
<main> 页面主要内容（唯一） </main>
<article> 独立的文章/内容块 </article>
<section> 内容分区 </section>
<aside> 侧边栏/附属内容 </aside>
<footer> 页面/区块底部（版权、链接） </footer>
<figure> 图文组合容器 </figure>
<figcaption> 图文说明 </figcaption>HTML5
语义化 vs 非语义化对比
| 非语义化写法 | 语义化写法 | 好处 |
|---|
<div class="header"> | <header> | 结构清晰，搜索引擎可识别 |
<div class="nav"> | <nav> | 屏幕阅读器可直接跳转 |
<div class="content"> | <main> | 明确主体内容区域 |
<div class="footer"> | <footer> | 代码可读性更强 |
✅ 最佳实践：优先使用语义化标签，减少无意义的 <div> 嵌套。语义化不仅有利于 SEO，还能提升代码的可维护性。