HTML 标签介绍

<!DOCTYPE> 声明用于定义文档类型，告知浏览器使用的 HTML 版本。

属性介绍:

无需属性。

html

<!DOCTYPE html>

<a> 标签用于定义超链接，允许用户点击链接跳转到其他页面或资源。

属性介绍:

href: 指定链接的目标 URL。
target: 指定链接打开方式（如 _blank、_self）。

html

<a href="https://example.com" target="_blank">访问示例网站</a>

访问示例网站

<abbr> 标签用于表示缩写或首字母缩写，通常在需要解释的情况下使用。

属性介绍:

title: 提供缩写的完整形式。

html

<abbr title="Hypertext Markup Language">HTML</abbr>

HTML

<address> 标签用于表示联系信息，通常包括作者或拥有者的地址信息。

属性介绍:

无需属性。

html

<address>
    1234 Example St.<br>
    Example City, EX 12345
</address>

1234 Example St.
Example City, EX 12345

<area> 标签用于定义图像映射中的可点击区域。

属性介绍:

shape: 定义区域形状（如 rect、circle、poly）。
coords: 定义区域的坐标。
href: 指定链接的目标 URL。

html

<img src="https://picsum.photos/200/300" usemap="#planmap">
<map name="planmap">
    <area shape="rect" coords="34,44,270,350" href="example.html" alt="示例区域">
</map>

<article> 标签用于表示独立的内容块，通常用于博客文章或新闻稿。

属性介绍:

无需属性。

html

<article>
    <h2>文章标题</h2>
    <p>这是文章的内容。</p>
</article>

文章标题

这是文章的内容。

<aside> 标签用于表示与主内容相关的附加内容，通常用于侧边栏。

属性介绍:

无需属性。

html

<aside>
    <h2>相关信息</h2>
    <p>这里是一些附加的内容。</p>
</aside>

<audio> 标签用于嵌入音频内容到网页中。

属性介绍:

controls: 显示音频控制面板。
autoplay: 自动播放音频。

html

<audio controls>
    <source src="http://music.163.com/song/media/outer/url?id=447925558.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>

<b> 标签用于加粗文本，表示重要性。

属性介绍:

无需属性。

html

<b>重要文本</b>

重要文本

<base> 标签用于指定文档中所有相对 URL 的基础 URL。

属性介绍:

href: 基础 URL。
target: 指定链接打开方式。

html

<base href="https://example.com/" target="_blank">

<bdi> 标签用于表示文本的独立方向，通常用于多语言文本。

属性介绍:

无需属性。

html

<bdi>Some text</bdi>

Some text

<bdo> 标签用于重写文本方向。

属性介绍:

dir: 指定文本方向（如 ltr、rtl）。

html

<bdo dir="rtl">从右到左的文本</bdo>

从右到左的文本

<blockquote> 标签用于表示引用的段落，通常用于引用多个句子。

属性介绍:

cite: 提供引用来源的 URL。

html

<blockquote cite="https://example.com">
    <p>这是一段引用的文本。</p>
</blockquote>

<body> 标签用于定义文档的主体，包含用户可见的内容。

属性介绍:

无需属性。

html

<body>
    <h1>页面标题</h1>
    <p>这是主体内容。</p>
</body>

页面标题

这是主体内容。

<br> 标签用于在文本中插入换行符。

属性介绍:

无需属性。

html

<p>第一行<br>第二行</p>

第一行
第二行

<button> 标签用于创建可点击的按钮。

属性介绍:

type: 指定按钮类型（如 button、submit、reset）。

html

<button type="button">点击我</button>

<canvas> 标签用于绘制图形，通常与 JavaScript 一起使用。

属性介绍:

width: 指定画布宽度。
height: 指定画布高度。

html

<canvas id="myCanvas" width="200" height="100"></canvas>

<caption> 标签用于为表格提供标题。

属性介绍:

无需属性。

html

<table>
    <caption>表格标题</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
</table>

表格标题
姓名	年龄

<cite> 标签用于引用书籍、文章或其他作品的标题。

属性介绍:

无需属性。

html

<cite>《了不起的盖茨比》</cite>

《了不起的盖茨比》

<code> 标签用于表示计算机代码。

属性介绍:

无需属性。

html

<code>console.log('Hello, World!');</code>

console.log('Hello, World!');

<col> 标签用于定义表格中列的属性。

属性介绍:

span: 指定该列跨度。
style: 应用样式。

html

<table>
    <col style="background-color: yellow;">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

单元格1

单元格2

<colgroup> 标签用于定义表格中的列组。

属性介绍:

span: 指定列组的跨度。

html

<table>
    <colgroup span="2">
        <col style="background-color: lightblue;">
    </colgroup>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

单元格1

单元格2

<data> 标签用于将机器可读数据与文本内容关联。

属性介绍:

value: 指定数据的机器可读值。

html

<time datetime="2023-09-11">2023年9月11日</time>

2023年9月11日

<datalist> 标签用于指定输入框的预定义选项列表。

属性介绍:

无需属性。

html

<input list="browsers">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
</datalist>

<dd> 标签用于定义描述列表中的描述项。

属性介绍:

无需属性。

html

<dl>
    <dt>术语</dt>
    <dd>术语的定义。</dd>
</dl>

术语: 术语的定义。

<del> 标签用于表示被删除的文本，通常用作修订。

属性介绍:

cite: 提供更改来源的 URL。
datetime: 指定删除的日期和时间。

html

<p>这是一个<del>删除的文本</del>。</p>

这是一个~~删除的文本~~。

<details> 标签用于创建可展开的内容。

属性介绍:

open: 指定内容默认展开。

html

<details>
    <summary>点击展开</summary>
    <p>这是详细内容。</p>
</details>

点击展开

这是详细内容。

<dfn> 标签用于定义术语，通常用于首次出现的术语。

属性介绍:

无需属性。

html

<p><dfn>HTML</dfn> 是超文本标记语言。</p>

HTML 是超文本标记语言。

<div> 标签用于定义文档中的分区或节。

属性介绍:

无需属性。

html

<div>
    <h2>标题</h2>
    <p>这是一个段落。</p>
</div>

标题

这是一个段落。

<dl> 标签用于定义描述列表。

属性介绍:

无需属性。

html

<dl>
    <dt>术语</dt>
    <dd>术语的定义。</dd>
</dl>

术语: 术语的定义。

<dt> 标签用于描述列表中的术语。

属性介绍:

无需属性。

html

<dl>
    <dt>术语</dt>
    <dd>术语的定义。</dd>
</dl>

术语: 术语的定义。

<em> 标签用于强调文本，通常以斜体形式显示。

属性介绍:

无需属性。

html

<p>这是一个<em>强调</em>的文本。</p>

这是一个强调的文本。

<embed> 标签用于嵌入外部内容（如视频或音频）。

属性介绍:

src: 指定要嵌入的内容的 URL。
type: 指定内容类型。

html

<embed src="https://prod-streaming-video-msn-com.akamaized.net/a8c412fa-f696-4ff2-9c76-e8ed9cdffe0f/604a87fc-e7bc-463e-8d56-cde7e661d690.mp4" type="video/mp4">

<fieldset> 标签用于将表单元素分组。

属性介绍:

无需属性。

html

<fieldset>
    <legend>个人信息</legend>
    <input type="text" placeholder="姓名">
</fieldset>

个人信息

<figcaption> 标签用于为 <figure> 元素提供标题或说明。

属性介绍:

无需属性。

html

<figure>
    <img src="https://picsum.photos/200/300" alt="示例图">
    <figcaption>这是图像的说明。</figcaption>
</figure>

<figure> 标签用于表示独立的内容，通常与图像或图表相关。

属性介绍:

无需属性。

html

<figure>
    <img src="https://picsum.photos/200/300" alt="示例图">
    <figcaption>这是图像的说明。</figcaption>
</figure>

<footer> 标签用于定义文档或部分的页脚。

属性介绍:

无需属性。

html

<footer>
    <p>版权信息</p>
</footer>

<form> 标签用于创建交互式表单。

属性介绍:

action: 指定表单提交的目标 URL。
method: 指定表单提交的方法（如 GET、POST）。

html

<form action="/submit" method="post">
    <input type="text" name="name" placeholder="姓名">
    <input type="submit" value="提交">
</form>

<h1> 至 <h6> 标签用于定义标题，<h1> 为最高级标题。

属性介绍:

无需属性。

html

<h1>主标题</h1>
<h2>副标题</h2>

主标题

副标题

<head> 标签用于定义文档的头部，包含元数据和标题。

属性介绍:

无需属性。

html

<head>
    <title>文档标题</title>
</head>

文档标题

<header> 标签用于定义文档或部分的头部。

属性介绍:

无需属性。

html

<header>
    <h1>网站标题</h1>
</header>

网站标题

<hr> 标签用于在文档中插入水平线。

属性介绍:

无需属性。

html

<hr>

<html> 标签用于定义整个 HTML 文档。

属性介绍:

lang: 指定文档的语言。

html

<html lang="en">
    <head>
        <title>文档标题</title>
    </head>
</html>

文档标题

<i> 标签用于表示斜体文本，通常表示术语或强调。

属性介绍:

无需属性。

html

<i>斜体文本</i>

斜体文本

<iframe> 标签用于嵌入另一个文档。

属性介绍:

src: 指定嵌入文档的 URL。
width: 指定宽度。
height: 指定高度。

html

<iframe src="https://example.com" width="300" height="200"></iframe>

<img> 标签用于嵌入图像。

属性介绍:

src: 指定图像的 URL。
alt: 提供图像的替代文本。

html

<img src="https://picsum.photos/200/300" alt="示例图">

<input> 标签用于创建不同类型的输入控件。

属性介绍:

type: 指定输入类型（如 text、password、checkbox 等）。
placeholder: 提供输入框的占位符文本。

html

<input type="text" placeholder="请输入内容">

<ins> 标签用于表示新增的文本，通常用于修订。

属性介绍:

cite: 提供更改来源的 URL。
datetime: 指定新增的日期和时间。

html

<p>这是一个<ins>新增的文本</ins>。</p>

这是一个新增的文本。

<kbd> 标签用于表示用户输入的文本，通常用于键盘输入。

属性介绍:

无需属性。

html

<p>请按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制文本。</p>

请按 Ctrl + C 复制文本。

<label> 标签用于为表单控件提供标签。

属性介绍:

for: 指定与标签关联的表单控件的 ID。

html

<label for="name">姓名：</label>
<input type="text" id="name">

姓名：

<legend> 标签用于为 <fieldset> 提供标题。

属性介绍:

无需属性。

html

<fieldset>
    <legend>个人信息</legend>
    <input type="text" placeholder="姓名">
</fieldset>

个人信息

<li> 标签用于定义列表中的项。

属性介绍:

无需属性。

html

<ul>
    <li>项目一</li>
    <li>项目二</li>
</ul>

项目一
项目二

<link> 标签用于定义文档与外部资源的关系，通常用于链接样式表。

属性介绍:

rel: 指定与目标资源的关系（如 stylesheet）。
href: 指定外部资源的 URL。

html

<link rel="stylesheet" href="styles.css">

<main> 标签用于表示文档的主要内容。

属性介绍:

无需属性。

html

<main>
    <h1>主要内容</h1>
</main>

主要内容

<map> 标签用于定义图像映射。

属性介绍:

无需属性。

html

<map name="infographic">
  <area
    shape="poly"
    coords="130,147,200,107,254,219,130,228"
    href="https://developer.mozilla.org/docs/Web/HTML"
    target="_blank"
    alt="HTML" />
  <area
    shape="poly"
    coords="130,147,130,228,6,219,59,107"
    href="https://developer.mozilla.org/docs/Web/CSS"
    target="_blank"
    alt="CSS" />
  <area
    shape="poly"
    coords="130,147,200,107,130,4,59,107"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
</map>
<img usemap="#infographic" style="display: block;margin: 0 auto;width: 260px;height: 232px;" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info2.png" alt="MDN infographic" />

<mark> 标签用于标记文本，通常用于高亮显示。

属性介绍:

无需属性。

html

<p>这是一个<mark>高亮文本</mark>。</p>

这是一个高亮文本。

<meta> 标签用于提供文档的元数据。

属性介绍:

name: 指定元数据的名称（如 description）。
content: 指定元数据的值。

html

<meta name="description" content="这是一个示例网页。">

<meter> 标签用于表示度量数据的范围。

属性介绍:

min: 最小值。
max: 最大值。
value: 当前值。

html

<meter min="0" max="100" value="50">50%</meter>

50%

<nav> 标签用于定义导航链接的部分。

属性介绍:

无需属性。

html

<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
    </ul>
</nav>

<noscript> 标签用于在不支持脚本的情况下显示内容。

属性介绍:

无需属性。

html

<noscript>
    <p>您的浏览器不支持脚本。</p>
</noscript>

<object> 标签用于嵌入外部对象，如图像或音频。

属性介绍:

data: 指定要嵌入的对象的 URL。
type: 指定对象的 MIME 类型。

html

<object data="http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4" type="video/mp4">
    <p>您的浏览器不支持该视频。</p>
</object>

<ol> 标签用于定义有序列表。

属性介绍:

type: 指定列表项标记的类型（如 1、A、a）。
start: 指定列表的起始编号。

html

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

第一项
第二项

<optgroup> 标签用于为 <select> 中的选项分组。

属性介绍:

label: 指定分组的标签。

html

<select>
    <optgroup label="水果">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
    </optgroup>
</select>

<option> 标签用于定义 <select> 中的选项。

属性介绍:

value: 指定选项的值。
selected: 指定选项是否默认被选中。

html

<select>
    <option value="1">选项一</option>
    <option value="2" selected>选项二</option>
</select>

<output> 标签用于表示计算结果。

属性介绍:

for: 指定与结果相关的表单控件的 ID。
name: 指定输出的名称。

html

<output for="input" name="result">结果</output>

结果

<p> 标签用于定义段落。

属性介绍:

无需属性。

html

<p>这是一个段落。</p>

这是一个段落。

<param> 标签用于为 <object> 元素提供参数。

属性介绍:

name: 指定参数名称。
value: 指定参数值。

html

<object data="http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4" type="video/mp4">
    <param name="autoplay" value="true">
</object>

<picture> 标签用于提供多个图像源，适应不同的显示条件。

属性介绍:

无需属性。

html

<picture>
    <source srcset="https://picsum.photos/" type="image/webp">
    <img src="https://picsum.photos/200/300" alt="示例图">
</picture>

<pre> 标签用于表示预格式化的文本，保留空格和换行。

属性介绍:

无需属性。

html

<pre>
这是    预格式化的
    文本。
</pre>

这是    预格式化的
    文本。

<progress> 标签用于表示任务的进度。

属性介绍:

value: 当前值。
max: 最大值。

html

<progress value="50" max="100">50%</progress>

50%

<q> 标签用于表示短引用，通常会自动加上引号。

属性介绍:

cite: 提供引用来源的 URL。

html

<q cite="https://example.com">这是引用的内容。</q>

这是引用的内容。

<rp> 标签用于在使用 <ruby> 标签时提供括号。

属性介绍:

无需属性。

html

<ruby>
    漢<rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>

漢(かん)

<rt> 标签用于表示 <ruby> 标签中注解的文本。

属性介绍:

无需属性。

html

<ruby>
    漢<rt>かん</rt>
</ruby>

漢かん

<ruby> 标签用于表示汉字及其读音的注解。

属性介绍:

无需属性。

html

<ruby>
    漢<rt>かん</rt>
</ruby>

漢かん

<s> 标签用于表示已删除的文本，通常用作修订。

属性介绍:

无需属性。

html

<p>这是一个<s>删除的文本</s>。</p>

这是一个~~删除的文本~~。

<samp> 标签用于表示计算机程序的输出。

属性介绍:

无需属性。

html

<p>输出结果是 <samp>成功</samp>。</p>

输出结果是 成功。

<script> 标签用于嵌入或引用 JavaScript 代码。

属性介绍:

src: 指定外部脚本的 URL。
async: 指定脚本是否异步加载。
defer: 指定脚本在文档解析完成后执行。

html

<script src="script.js"></script>

<section> 标签用于定义文档中的节。

属性介绍:

无需属性。

html

<section>
    <h2>节标题</h2>
    <p>这是节的内容。</p>
</section>

节标题

这是节的内容。

<select> 标签用于创建下拉列表。

属性介绍:

multiple: 允许多选。
size: 指定可见选项的数量。

html

<select>
    <option value="1">选项一</option>
    <option value="2">选项二</option>
</select>

<small> 标签用于表示小号文本，通常用于附加信息。

属性介绍:

无需属性。

html

<p><small>附加信息</small></p>

附加信息

<source> 标签用于指定媒体元素的多个资源。

属性介绍:

src: 指定媒体文件的 URL。
type: 指定媒体文件的 MIME 类型。

html

<video controls>
    <source src="http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4" type="video/mp4">
</video>

<span> 标签用于定义行内元素，通常用于样式化部分文本。

属性介绍:

无需属性。

html

<p>这是一个<span style="color: red;">红色文本</span>。</p>

这是一个红色文本。

<strong> 标签用于表示强调文本，通常以粗体形式显示。

属性介绍:

无需属性。

html

<p>这是一个<strong>强调的文本</strong>。</p>

这是一个强调的文本。

<style> 标签用于定义文档内的样式。

属性介绍:

type: 指定样式表的类型（如 text/css）。

html

<style>
    p { color: blue; }
</style>

<sub> 标签用于表示下标文本。

属性介绍:

无需属性。

html

<p>H<sub>2</sub>O</p>

H₂O

<summary> 标签用于为 <details> 提供标题。

属性介绍:

无需属性。

html

<details>
    <summary>点击展开</summary>
    <p>这是详细内容。</p>
</details>

点击展开

这是详细内容。

<sup> 标签用于表示上标文本。

属性介绍:

无需属性。

html

<p>E = mc<sup>2</sup></p>

E = mc²

<table> 标签用于定义表格。

属性介绍:

无需属性。

html

<table>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
    </tr>
</table>

标题1	标题2

<tbody> 标签用于定义表格主体。

属性介绍:

无需属性。

html

<table>
    <tbody>
        <tr>
            <td>行1，单元格1</td>
            <td>行1，单元格2</td>
        </tr>
    </tbody>
</table>

行1，单元格1

行1，单元格2

<td> 标签用于定义表格中的单元格。

属性介绍:

colspan: 指定单元格跨越的列数。
rowspan: 指定单元格跨越的行数。

html

<table>
    <tr>
        <td>单元格1</td>
        <td colspan="2">单元格2（跨越两列）</td>
    </tr>
</table>

单元格1

单元格2（跨越两列）

<template> 标签用于定义可重用的 HTML 模板。

属性介绍:

无需属性。

html

<template>
    <p>这是一个模板内容。</p>
</template>

<textarea> 标签用于创建多行文本输入框。

属性介绍:

rows: 指定可见行数。
cols: 指定可见列数。

html

<textarea rows="4" cols="50">输入文本...</textarea>

<tfoot> 标签用于定义表格的脚注。

属性介绍:

无需属性。

html

<table>
    <tfoot>
        <tr>
            <td>脚注内容</td>
        </tr>
    </tfoot>
</table>

脚注内容

<th> 标签用于定义表格中的表头单元格。

属性介绍:

colspan: 指定表头单元格跨越的列数。
rowspan: 指定表头单元格跨越的行数。

html

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
</table>

表头1	表头2

<thead> 标签用于定义表格的表头。

属性介绍:

无需属性。

html

<table>
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
    </thead>
</table>

表头1	表头2

<time> 标签用于表示时间或日期。

属性介绍:

datetime: 指定机器可读的日期和时间格式。

html

<time datetime="2023-09-11">2023年9月11日</time>

2023年9月11日

<title> 标签用于定义文档的标题。

属性介绍:

无需属性。

html

<title>文档标题</title>

文档标题

<tr> 标签用于定义表格中的行。

属性介绍:

无需属性。

html

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

单元格1

单元格2

<track> 标签用于为 <video> 和 <audio> 提供文本轨道。

属性介绍:

kind: 指定轨道类型（如 subtitles、captions）。
src: 指定轨道文件的 URL。
srclang: 指定轨道的语言。

html

<video controls>
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
</video>

<u> 标签用于表示下划线文本。

属性介绍:

无需属性。

html

<p>这是<u>下划线文本</u>。</p>

这是下划线文本。

<ul> 标签用于定义一个无序列表，列表项通常用圆点标记。

属性介绍:

type: 指定列表项目的标记类型（如 disc, circle, square）。

html

<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

项目一
项目二
项目三

<var> 标签用于表示变量，通常在数学或编程上下文中使用。它会以斜体形式显示。

属性介绍:

该标签没有特定的全局属性，但可以使用 CSS 来样式化。

html

<p>计算结果为 <var>x</var> + <var>y</var>.</p>

计算结果为 x + y.

<video> 标签用于嵌入视频内容到网页中。可以控制视频的播放、暂停、音量等。

属性介绍:

controls: 显示视频控制面板。
autoplay: 视频自动播放。
loop: 视频循环播放。
muted: 默认静音播放。

html

<video width="320" height="240" controls>
    <source src="http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4" type="video/mp4">
    <source src="http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4" type="video/ogg">
    Your browser does not support the video tag.
</video>

<wbr> 标签表示“可换行位置”，用于在长单词或 URL 的适当位置插入换行符。

属性介绍:

该标签没有任何属性。

html

<p>这是一个很长的单词：Supercalifragilisticexpialidocious<wbr>，你可以在这里换行。</p>

这是一个很长的单词：Supercalifragilisticexpialidocious，你可以在这里换行。

HTML 标签介绍 ​

文章标题

页面标题

标题

主标题

副标题

主要内容

节标题

HTML 标签介绍