我常用HTML标签讲解加HTML全标签速查手册（分类详解）
2025-05-18 07:18:53
一、HTML 基础概念
HTML全标签速查手册在下面
1. 什么是HTML？
定义：超文本标记语言（HyperText Markup Language），用于定义网页内容结构。
核心功能：
描述文本、图片、链接等内容的排列方式
通过标签（Tags）标识不同内容类型
与CSS（样式）、JavaScript（交互）共同构成现代网页
2. HTML文档基本结构
我的第一个网页
关键元素解释：
：必须放在第一行，声明HTML5标准
：适配移动端屏幕
：影响搜索引擎优化（SEO）</p>
<p>三、常用HTML标签详解</p>
<p>1. 文本与标题标签</p>
<p><h1>主标题</h1> <!-- 一个页面建议只用一个h1 --></p>
<p><h2>次级标题</h2></p>
<p><p>这是一个段落，用于展示文本内容。</p></p>
<p><strong>强调文本（默认加粗）</strong></p>
<p><em>斜体强调文本</em></p>
<p><br> <!-- 换行（空标签，无闭合） --></p>
<p><hr> <!-- 水平分割线 --></p>
<p>注意事项：</p>
<p><h1>到<h6>表示标题级别，层级需清晰</p>
<p><strong>和<em>具有语义，优于<b>和<i></p>
<p>2. 列表标签</p>
<p>无序列表（项目符号）</p>
<p><ul></p>
<p><li>苹果</li></p>
<p><li>香蕉</li></p>
<p><li>橘子</li></p>
<p></ul></p>
<p>有序列表（数字编号）</p>
<p><ol></p>
<p><li>第一步：学习HTML</li></p>
<p><li>第二步：学习CSS</li></p>
<p><li>第三步：学习JavaScript</li></p>
<p></ol></p>
<p>3. 链接与图片</p>
<p><!-- 绝对路径链接 --></p>
<p><a href="https://www.example.com" target="_blank">访问示例网站</a></p>
<p><!-- 相对路径链接（跳转到同一网站的其他页面） --></p>
<p><a href="about.html">关于我们</a></p>
<p><!-- 图片 --></p>
<p><img src="images/logo.png" alt="公司Logo" width="200" height="100"></p>
<p>关键属性：</p>
<p>target="_blank"：在新标签页打开链接</p>
<p>alt：图片加载失败时显示的替代文本（对SEO和可访问性至关重要）</p>
<p>4. 表格标签</p>
<p><table border="1"></p>
<p><caption>学生成绩表</caption></p>
<p><tr> <!-- 表行 --></p>
<p><th>姓名</th> <!-- 表头单元格 --></p>
<p><th>数学</th></p>
<p><th>语文</th></p>
<p></tr></p>
<p><tr></p>
<p><td>张三</td> <!-- 标准单元格 --></p>
<p><td>90</td></p>
<p><td>85</td></p>
<p></tr></p>
<p></table></p>
<p>常用属性：</p>
<p>colspan：横向合并单元格</p>
<p>rowspan：纵向合并单元格</p>
<p>HTML全标签速查手册（分类详解）</p>
<p>以下按功能分类，详细说明每个标签的作用、格式及典型应用场景。</p>
<p>1. 基础结构标签</p>
<p>标签</p>
<p>作用与格式</p>
<p><!DOCTYPE></p>
<p>声明文档类型：必须是HTML文档的第一行<!DOCTYPE html></p>
<p><html></p>
<p>根元素：包裹所有HTML内容<html lang="zh-CN">...</html>（lang属性对SEO/无障碍访问至关重要）</p>
<p><head></p>
<p>元信息容器：包含<title>、<meta>、<link>等非可视内容<head>...</head></p>
<p><body></p>
<p>页面主体：所有可见内容放置区域<body>...</body></p>
<p>2. 文本内容标签</p>
<p>标签</p>
<p>作用与格式</p>
<p><h1>-<h6></p>
<p>标题：层级递减，<h1>每个页面唯一<h1>主标题</h1></p>
<p><p></p>
<p>段落：默认上下边距<p>这是一个段落</p></p>
<p><span></p>
<p>行内容器：无语义，用于样式控制<span class="highlight">文本</span></p>
<p><br></p>
<p>换行：空标签第一行<br>第二行</p>
<p><hr></p>
<p>水平分割线：空标签<hr>（常用于内容分隔）</p>
<p><pre></p>
<p>预格式化文本：保留空格/换行<pre>Hello World</pre></p>
<p><blockquote></p>
<p>长引用：需搭配cite属性<blockquote cite="来源URL">引用内容</blockquote></p>
<p>3. 列表标签</p>
<p>标签</p>
<p>作用与格式</p>
<p><ul></p>
<p>无序列表：默认实心圆点<ul><li>项目1</li></ul></p>
<p><ol></p>
<p>有序列表：支持start/reversed属性<ol start="5"><li>步骤</li></ol></p>
<p><li></p>
<p>列表项：必须嵌套在<ul>/<ol>中<li>内容</li></p>
<p><dl></p>
<p>定义列表：用于术语解释<dl><dt>HTML</dt><dd>超文本标记语言</dd></dl></p>
<p><dt></p>
<p>定义术语：必须与<dd>配对使用</p>
<p><dd></p>
<p>术语描述：缩进显示</p>
<p>4. 链接与媒体标签</p>
<p>标签</p>
<p>作用与格式</p>
<p><a></p>
<p>超链接：target="_blank"新标签页打开<a href="url">链接文字</a></p>
<p><img></p>
<p>图片：必须含alt属性<img src="logo.png" alt="网站Logo" loading="lazy"></p>
<p><video></p>
<p>视频播放器：支持多种格式<video controls><source src="video.mp4"></video></p>
<p><audio></p>
<p>音频播放器：<audio controls><source src="audio.mp3"></audio></p>
<p><iframe></p>
<p>嵌入外部内容：需注意同源策略<iframe src="https://example.com"></iframe></p>
<p><picture></p>
<p>响应式图片：适配不同屏幕<picture><source media="(min-width:800px)" srcset="large.jpg"><img src="small.jpg"></picture></p>
<p><source></p>
<p>媒体源：指定多种格式<source src="image.webp" type="image/webp"></p>
<p>5. 表格标签</p>
<p>标签</p>
<p>作用与格式</p>
<p><table></p>
<p>表格容器：border属性定义边框<table border="1">...</table></p>
<p><tr></p>
<p>表格行：包裹单元格<tr><td>内容</td></tr></p>
<p><td></p>
<p>标准单元格：普通数据<td>数据</td></p>
<p><th></p>
<p>表头单元格：默认加粗居中<th>姓名</th></p>
<p><thead></p>
<p>表头区：包裹标题行<thead><tr><th>标题</th></tr></thead></p>
<p><tbody></p>
<p>表体区：包裹数据行</p>
<p><tfoot></p>
<p>表脚区：包裹汇总行</p>
<p>6. 表单标签</p>
<p>标签</p>
<p>作用与格式</p>
<p><form></p>
<p>表单容器：action定义提交地址<form action="/submit" method="POST">...</form></p>
<p><input></p>
<p>输入控件：type支持20+种类型<input type="email" required></p>
<p><select></p>
<p>下拉菜单：需配合<option><select><option>选项</option></select></p>
<p><option></p>
<p>下拉选项：selected默认选中<option value="1" selected>选项1</option></p>
<p><textarea></p>
<p>多行文本输入：rows/cols定义尺寸<textarea rows="4"></textarea></p>
<p><label></p>
<p>标签：提升可访问性<label for="name">姓名：</label><input id="name"></p>
<p><datalist></p>
<p>输入建议列表：需绑定<input><input list="colors"><datalist id="colors"><option value="red"></datalist></p>
<p>7. 语义化标签（HTML5）</p>
<p>标签</p>
<p>作用与格式</p>
<p><header></p>
<p>页眉：通常包含LOGO/导航<header><nav>...</nav></header></p>
<p><footer></p>
<p>页脚：版权/联系方式<footer>© 2023 公司名称</footer></p>
<p><article></p>
<p>独立内容区块：如博客文章<article><h2>标题</h2>...</article></p>
<p><section></p>
<p>内容分组：需搭配标题<section><h3>子标题</h3>...</section></p>
<p><nav></p>
<p>导航栏：主要链接集合<nav><a href="/">首页</a></nav></p>
<p><aside></p>
<p>侧边栏：附加内容<aside>相关推荐...</aside></p>
<p>8. 高级交互标签</p>
<p>标签</p>
<p>作用与格式</p>
<p><canvas></p>
<p>绘图画布：需JavaScript操作<canvas id="myCanvas"></canvas></p>
<p><svg></p>
<p>矢量图形：XML格式<svg width="100" height="100"><circle cx="50" cy="50" r="40"/></svg></p>
<p><progress></p>
<p>进度条：显示任务进度<progress value="70" max="100"></progress></p>
<p><meter></p>
<p>度量条：表示范围值<meter min="0" max="100" value="75"></meter></p>
<p><dialog></p>
<p>模态对话框：需JavaScript控制<dialog open><p>提示内容</p></dialog></p>
<p><details></p>
<p>折叠内容：默认隐藏<details><summary>查看详情</summary>内容</details></p>
<p>使用示例</p>
<p><!-- 语义化页面示例 --></p>
<p><!DOCTYPE html></p>
<p><html lang="zh-CN"></p>
<p><head></p>
<p><meta charset="UTF-8"></p>
<p><title>现代网页示例
网站标题
首页
新闻
文章标题
章节一
正文内容...
联系方式：contact@example.com