HTML常用标签大全及用法

HTML是构建网页的基础语言，由各种标签组成。下面将分类介绍最常用的HTML标签及其用法。

基本结构标签

标签	描述	示例
`<h1>`-`<h6>`	定义标题级别	`<h1>主标题</h1>`
`<p>`	定义段落	`<p>这是一个段落</p>`
`<br>`	插入换行符	`第一行<br>第二行`
`<hr>`	创建水平线	`<hr>`
`<b>`	粗体文本	`<b>粗体字</b>`
`<strong>`	重要文本(语义化)	`<strong>重要内容</strong>`
`<i>`	斜体文本	`<i>斜体字</i>`
`<em>`	强调文本(语义化)	`<em>强调内容</em>`
`<u>`	下划线文本	`<u>下划线</u>`
`<s>`	删除线文本	`<s>原价100</s>`
`<del>`	删除的文本(语义化)	`<del>删除内容</del>`
`<ins>`	插入的文本	`<ins>新增内容</ins>`
`<sub>`	下标文本	H₂O
`<sup>`	上标文本	10²
`<small>`	小号文本	`<small>小字</small>`
`<mark>`	标记/高亮文本	`<mark>重点</mark>`
`<pre>`	预格式化文本	`<pre>保留空格和换行</pre>`
`<code>`	计算机代码	`<code>print()</code>`
`<kbd>`	键盘输入	按`Ctrl`+`S`保存
`<var>`	变量	`<var>x</var> = 5`
`<samp>`	程序输出	`<samp>Error 404</samp>`
`<abbr>`	缩写	`<abbr title="World Wide Web">WWW</abbr>`
`<address>`	联系信息	`<address>作者:张三</address>`
`<blockquote>`	长引用	`<blockquote cite="url">引用内容</blockquote>`
`<q>`	短引用	`<q>短引用内容</q>`
`<cite>`	作品标题	`<cite>红楼梦</cite>`
`<dfn>`	定义项目	`<dfn>HTML</dfn>是标记语言`
`<time>`	日期/时间	`<time datetime="2023-01-01">元旦</time>`

标签	描述	示例
`<a>`	超链接	`<a href="https://example.com">链接</a>`
`<img>`	图像	`<img src="image.jpg" alt="描述">`
`<map>`	图像映射	`<map name="workmap">...</map>`
`<area>`	图像映射区域	`<area shape="rect" coords="0,0,50,50" href="a.html">`
`<picture>`	响应式图像容器	`<picture><source media="(min-width:650px)" srcset="img_pink_flowers.jpg"></picture>`
`<figure>`	自包含内容	`<figure><img src="img.jpg"><figcaption>图1</figcaption></figure>`
`<figcaption>`	figure的标题	如上例所示

标签	描述	示例
`<table>`	定义表格	`<table>...</table>`
`<caption>`	表格标题	`<caption>月度报表</caption>`
`<tr>`	表格行	`<tr><td>单元格</td></tr>`
`<th>`	表头单元格	`<th>姓名</th>`
`<td>`	表格数据单元格	`<td>张三</td>`
`<thead>`	表格头部	`<thead><tr><th>标题</th></tr></thead>`
`<tbody>`	表格主体	`<tbody><tr><td>数据</td></tr></tbody>`
`<tfoot>`	表格页脚	`<tfoot><tr><td>总计</td></tr></tfoot>`
`<colgroup>`	表格列组	`<colgroup><col span="2" style="background-color:red"></colgroup>`
`<col>`	表格列属性	如上例所示

标签	描述	示例
`<form>`	表单容器	`<form action="/submit" method="post">...</form>`
`<input>`	输入控件	`<input type="text" name="username">`
`<textarea>`	多行文本输入	`<textarea name="comment"></textarea>`
`<button>`	可点击按钮	`<button type="submit">提交</button>`
`<select>`	下拉列表	`<select name="cars"><option value="volvo">Volvo</option></select>`
`<option>`	下拉选项	如上例所示
`<optgroup>`	选项分组	`<optgroup label="Swedish Cars"><option>Volvo</option></optgroup>`
`<label>`	输入标签	`<label for="name">姓名:</label>`
`<fieldset>`	表单分组	`<fieldset><legend>个人信息</legend>...</fieldset>`
`<legend>`	fieldset标题	如上例所示
`<datalist>`	输入选项列表	`<input list="browsers"><datalist id="browsers"><option value="Chrome"></datalist>`
`<output>`	计算结果	`<output name="result">0</output>`
`<progress>`	进度条	`<progress value="70" max="100">70%</progress>`
`<meter>`	标量测量	`<meter value="2" min="0" max="10">2/10</meter>`

标签	描述	示例
`<iframe>`	内联框架	`<iframe src="demo.html"></iframe>`
`<frame>`	框架(HTML5不支持)	`<frame src="frame_a.html">`
`<frameset>`	框架集(HTML5不支持)	`<frameset cols="25%,75%"><frame src="frame_a.html"></frameset>`
`<noframes>`	不支持框架的替代内容	`<noframes>您的浏览器不支持框架</noframes>`

标签	描述	示例
`<audio>`	音频内容	`<audio controls><source src="horse.mp3"></audio>`
`<video>`	视频内容	`<video width="320" controls><source src="movie.mp4"></video>`
`<source>`	多媒体资源	如上例所示
`<track>`	多媒体文本轨道	`<track src="subtitles_en.vtt" kind="subtitles" srclang="en">`
`<embed>`	嵌入外部内容	`<embed type="video/webm" src="video.mp4">`
`<object>`	嵌入对象	`<object data="flash.swf"></object>`
`<param>`	对象参数	`<param name="autoplay" value="true">`