HTML常用标签对照表｜HTML标签速查手册
HTML（HyperText Markup Language）是构建网页的核心语言，标签则是定义网页结构与内容的基础单元。奥德彪学习网按「功能场景」分类，整合文档结构、文本排版、链接导航、列表表格、表单、多媒体、布局语义化等 8 大核心模块，收录 50 + 常用 HTML 标签及实用拓展标签，详细标注每个标签的作用、常用属性与实操示例，同时补充块级 / 行内元素区分、全局属性、事件属性、实体符号等关键知识点，搭配 HTML5 语义化结构示例，帮助前端开发新手、学习者快速查阅、灵活运用，高效完成网页结构搭建。
一、HTML 标签基础认知
1. 核心概念
- HTML 标签用于描述网页的结构与内容，由
<tagname>开始、</tagname>结束（单标签可自闭合，如<img />）。 - 属性写在开始标签内，格式为「属性名 ="属性值"」，用于扩展标签功能（如
<a href="url">中href为属性）。
2. 关键分类
- 块级元素：独占一行，如
<div><p><h1>~<h6>，可嵌套其他元素。 - 行内元素：不独占一行，如
<span><a><strong>，仅包裹内容。 - 空元素（单标签）：无需闭合，如
<br><img><input>，直接完成功能。
二、HTML 标签详细对照表（按功能分类）
1. 文档结构标签（网页基础框架）
| 标签 | 核心作用 | 常用属性 | 实操示例 |
|---|---|---|---|
<!DOCTYPE html> |
声明 HTML 文档类型 | — | <!DOCTYPE html>（文档首行） |
<html> |
网页根元素 | lang（语言） |
<html lang="zh-CN">（中文网页） |
<head> |
存放头部信息（元数据、样式等） | — | <head><meta charset="UTF-8"></head> |
<meta> |
定义元数据（字符集、视口等） | charset name content |
<meta name="viewport" content="width=device-width"> |
<title> |
网页标题（浏览器标签显示） | — | <title>我的网站</title> |
<body> |
网页主体内容容器 | — | <body>页面内容...</body> |
2. 文本与排版标签（内容格式化）
| 标签 | 核心作用 | 常用属性 | 实操示例 |
|---|---|---|---|
<h1>~<h6> |
标题（1 级最大，6 级最小） | — | <h1>主标题</h1> <h3>三级标题</h3> |
<p> |
定义段落 | — | <p>这是一段正文内容。</p> |
<br> |
强制换行（单标签） | — | 文本<br>换行显示 |
<hr> |
水平分割线（单标签） | — | <p>内容1</p><hr><p>内容2</p> |
<strong> |
语义化加粗（强调重要性） | — | <strong>重要内容</strong> |
<b> |
纯样式加粗（无语义） | — | <b>加粗文本</b> |
<em> |
语义化斜体（强调语气） | — | <em>强调内容</em> |
<i> |
纯样式斜体（无语义） | — | <i>斜体文本</i> |
<u> |
下划线文本 | — | <u>带下划线</u> |
<span> |
行内无语义容器（样式包裹） | class style |
<span class="red">红色文本</span> |
<div> |
块级无语义容器（布局分组） | class style |
<div class="container">内容块</div> |
<pre> |
保留原始格式（空格 / 换行） | — | <pre> 代码 格式</pre> |
<code> |
标记代码片段 | — | <code>console.log("Hello")</code> |
3. 链接与导航标签（页面跳转 / 导航）
| 标签 | 核心作用 | 常用属性 | 实操示例 |
|---|---|---|---|
<a> |
超链接（页面跳转） | href（目标地址） target（打开方式） title（提示） |
<a href="https://example.com" target="_blank">外部链接</a> |
<nav> |
导航区域（语义化） | — | <nav><a href="/home">首页</a></nav> |
4. 列表标签（有序 / 无序 / 定义列表）
| 标签 | 核心作用 | 常用属性 | 实操示例 |
|---|---|---|---|
<ul> |
无序列表（项目前带符号） | — | <ul><li>项目1</li><li>项目2</li></ul> |
<ol> |
有序列表（项目前带编号） | type（编号类型） start（起始值） |
<ol type="A" start="2"><li>第二项</li></ol> |
<li> |
列表项（嵌套在 ul/ol 内） | — | 同上（ul/ol 的子元素） |
<dl> |
定义列表（术语 + 解释） | — | <dl><dt>HTML</dt><dd>网页标记语言</dd></dl> |
<dt> |
定义术语（dl 的子元素） | — | 同上（dl 的子元素） |
<dd> |
术语解释（dl 的子元素） | — | 同上（dl 的子元素） |
5. 表格标签（数据结构化展示）
| 标签 | 核心作用 | 常用属性 | 实操示例 |
|---|---|---|---|
<table> |
表格容器 | border（边框） width（宽度） |
<table border="1" width="80%"> |
<tr> |
表格行（table 的子元素） | — | <tr><th>姓名</th><td>张三</td></tr> |
<th> |
表头单元格（加粗居中） | scope（作用域） |
<th scope="col">年龄</th> |
<td> |
数据单元格（tr 的子元素） | colspan（合并列） rowspan（合并行） |
<td colspan="2">合并两列</td> |
<caption> |
表格标题（table 的子元素） | — | <table><caption>学生成绩表</caption></table> |
<thead> |
表头分组（语义化） | — | <thead><tr><th>姓名</th></tr></thead> |
<tbody> |
表格主体分组（语义化） | — | <tbody><tr><td>李四</td></tr></tbody> |
<tfoot> |
表脚分组（语义化） | — | <tfoot><tr><td>总计</td></tr></tfoot> |
6. 表单标签（用户交互输入）
| 标签 | 核心作用 | 常用属性 | 实操示例 |
|---|---|---|---|
<form> |
表单容器（数据提交） | action（提交地址） method（提交方式） |
<form action="/login" method="post"> |
<input> |
输入控件（多种类型） | type name value placeholder |
<input type="text" name="username" placeholder="请输入用户名"> |
<textarea> |
多行文本框 | rows（行数） cols（列数） placeholder |
<textarea rows="4" cols="30" placeholder="请输入备注"></textarea> |
<select> |
下拉列表容器 | name |
<select name="city"><option>北京</option></select> |
<option> |
下拉列表选项 | value selected（默认选中） |
<option value="sh" selected>上海</option> |
<button> |
按钮 | type（submit/reset/button） |
<button type="submit">提交</button> |
<label> |
表单标签关联（提升可访问性） | for（绑定 input 的 id） |
<label for="email">邮箱：</label><input id="email" type="email"> |
<fieldset> |
表单分组 | — | <fieldset><legend>个人信息</legend></fieldset> |
<legend> |
表单分组标题（fieldset 子元素） | — | 同上（fieldset 的子元素） |
Input 常用 type 值说明：
text：单行文本输入password：密码输入（隐藏显示）email：邮箱格式验证number：数字输入date：日期选择器checkbox：复选框（多选）radio：单选按钮（多选一）file：文件上传submit：表单提交按钮reset：表单重置按钮
7. 多媒体标签（音视频 / 嵌入内容）
| 标签 | 核心作用 | 常用属性 | 实操示例 |
|---|---|---|---|
<img> |
插入图片（单标签） | src（图片地址） alt（替代文本） width height |
<img src="pic.jpg" alt="风景图" width="300"> |
| `` | 音频播放 | src controls（显示控件） autoplay（自动播放） |
<audio src="music.mp3" controls> |
<video> |
视频播放 | src controls width height |
<video src="movie.mp4" controls width="600"></video> |
<source> |
多格式媒体支持（适配不同浏览器） | src type |
<video controls><source src="vid.webm" type="video/webm"></video> |
<iframe> |
嵌入外部页面（如地图、视频） | src width height frameborder（边框） |
<iframe src="https://example.com" width="800" frameborder="0"></iframe> |
8. 布局与语义化标签（HTML5 新增，优化结构）
| 标签 | 核心作用 | 说明（使用场景） |
|---|---|---|
<header> |
页眉 / 区块头部 | 网站 logo、页面标题、导航栏 |
<footer> |
页脚 | 版权信息、联系方式、友情链接 |
<main> |
页面主体内容（唯一） | 网页核心内容，不包含侧边栏 / 页眉页脚 |
<section> |
章节 / 主题区块 | 有明确主题的内容组（如 “产品介绍”） |
<article> |
独立文章 / 内容块 | 博客文章、新闻、论坛帖子 |
<aside> |
侧边栏 / 附加内容 | 广告、相关链接、作者简介 |
<figure> |
插图 / 图表容器 | 搭配<figcaption>使用 |
<figcaption> |
插图标题 / 说明（figure 子元素） | 图片下方的描述文字 |
9. 其他常用标签（工具类 / 资源引入）
| 标签 | 核心作用 | 常用属性 | 实操示例 |
|---|---|---|---|
<script> |
引入 / 编写 JavaScript 代码 | src（外部 JS 地址） |
<script src="app.js"></script> |
<style> |
内嵌 CSS 样式 | — | <style>body{color:#333;}</style> |
<link> |
链接外部资源（如 CSS） | rel（关系） href（资源地址） |
<link rel="stylesheet" href="style.css"> |
<!-- 注释 --> |
文档注释（不显示在页面） | — | <!-- 这是一段注释 --> |
三、实用拓展标签（不常见但高效）
| 标签 | 核心作用 | 常用属性 | 实操示例 |
|---|---|---|---|
<abbr> |
缩写提示（鼠标悬停显示全称） | title |
<abbr title="HyperText Markup Language">HTML</abbr> |
<address> |
联系信息（语义化） | — | <address>联系电话：123456</address> |
<blockquote> |
长引用块（语义化） | cite（引用来源） |
<blockquote cite="https://xxx">引用内容</blockquote> |
<mark> |
文本高亮 | — | <mark>重点高亮内容</mark> |
<time> |
机器可读时间 / 日期 | datetime |
<time datetime="2024-10-01">2024年10月1日</time> |
<progress> |
进度条 | value（当前值） max（最大值） |
<progress value="75" max="100"></progress> |
<details> |
可折叠详情框 | — | <details><summary>点击展开</summary>隐藏内容</details> |
<dialog> |
对话框（弹窗） | open（默认显示） |
<dialog open>弹窗内容</dialog> |
四、核心辅助知识点
1. 全局属性（所有 HTML 元素通用）
| 属性 | 核心作用 | 实操示例 |
|---|---|---|
id |
元素唯一标识符（不可重复） | <div id="header"></div> |
class |
CSS 类名（可多个，用空格分隔） | <p class="text red">红色文本</p> |
style |
内联 CSS 样式 | <p style="font-size:16px;">16号字</p> |
title |
鼠标悬停提示文本 | <img src="pic.jpg" title="风景"> |
lang |
元素内容语言 | <p lang="en">Hello World</p> |
data-* |
自定义数据属性（JS 读取） | <div data-id="123">数据项</div> |
hidden |
隐藏元素（不显示） | <p hidden>隐藏内容</p> |
contenteditable |
允许用户编辑元素内容 | <div contenteditable="true">可编辑</div> |
2. 常见事件属性（触发 JavaScript 动作）
| 属性 | 触发时机 | 实操示例 |
|---|---|---|
onclick |
鼠标单击元素 | <button onclick="alert('点击了')">点击我</button> |
onmouseover |
鼠标移入元素 | <div onmouseover="changeColor()">移入变色</div> |
onkeydown |
键盘按下时（输入框等） | <input onkeydown="handleKey()"> |
onsubmit |
表单提交时 | <form onsubmit="return checkForm()"> |
onchange |
表单元素值改变时 | <select onchange="updateInfo()"> |
3. 常用 HTML 实体符号（特殊字符）
| 显示符号 | 实体名称 | 实体编号 | 说明 |
|---|---|---|---|
< |
< |
< |
小于号（避免被解析为标签） |
> |
> |
> |
大于号 |
& |
& |
& |
与号 |
" |
" |
" |
双引号 |
© |
© |
© |
版权符号 |
¥ |
¥ |
¥ |
人民币符号 |
° |
° |
° |
度（如 25°） |
4. HTML5 语义化结构完整示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语义化页面示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>奥德彪学习网</h1>
<nav>
<a href="/home">首页</a>
<a href="/article">文章</a>
</nav>
</header>
<main>
<article>
<h2>HTML语义化的重要性</h2>
<section>
<p>语义化标签让网页结构更清晰，有利于SEO和可访问性...</p>
</section>
</article>
<aside>
<h3>相关推荐</h3>
<ul>
<li><a href="/xxx">CSS布局技巧</a></li>
</ul>
</aside>
</main>
<footer>
<p>版权 © 2024 奥德彪学习网 保留所有权利</p>
</footer>
</body>
</html>阅读剩余
网站声明
本站内容可能存在水印或引流等信息，请擦亮眼睛自行鉴别；以免上当受骗；
本站提供的内容仅限用于学习和研究目的，不得将本站内容用于商业或者非法用途；
相关推荐
