HTML常用标签大全及用法
HTML是构建网页的基础语言,由各种标签组成。下面将分类介绍最常用的HTML标签及其用法。
基本结构标签
| 标签 | 描述 | 示例 |
|---|---|---|
<!DOCTYPE> |
定义文档类型 | <!DOCTYPE html> |
<html> |
HTML文档的根元素 | <html lang="en">...</html> |
<head> |
包含文档的元信息 | <head><title>页面标题</title></head> |
<title> |
定义文档标题 | <title>我的网页</title> |
<body> |
包含文档的可见内容 | <body><h1>标题</h1></body> |
<meta> |
定义文档元数据 | <meta charset="UTF-8"> |
文本格式化标签
| 标签 | 描述 | 示例 |
|---|---|---|
<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> |
下标文本 | H2O |
<sup> |
上标文本 | 102 |
<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的标题 | 如上例所示 |
列表标签
| 标签 | 描述 | 示例 |
|---|---|---|
<ul> |
无序列表 | <ul><li>项目1</li></ul> |
<ol> |
有序列表 | <ol><li>第一项</li></ol> |
<li> |
列表项 | 如上例所示 |
<dl> |
描述列表 | <dl><dt>术语</dt><dd>描述</dd></dl> |
<dt> |
描述列表的术语 | 如上例所示 |
<dd> |
描述列表的描述 | 如上例所示 |
表格标签
| 标签 | 描述 | 示例 |
|---|---|---|
<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"> |






这一切,似未曾拥有