文章标题
这是文章的内容。
<!DOCTYPE>
声明用于定义文档类型,告知浏览器使用的 HTML 版本。属性介绍:
<!DOCTYPE html>
<a>
标签用于定义超链接,允许用户点击链接跳转到其他页面或资源。属性介绍:
href
: 指定链接的目标 URL。target
: 指定链接打开方式(如 _blank
、_self
)。<a href="https://example.com" target="_blank">访问示例网站</a>
预览:
<abbr>
标签用于表示缩写或首字母缩写,通常在需要解释的情况下使用。属性介绍:
title
: 提供缩写的完整形式。<abbr title="Hypertext Markup Language">HTML</abbr>
预览:
<address>
标签用于表示联系信息,通常包括作者或拥有者的地址信息。属性介绍:
<address>
1234 Example St.<br>
Example City, EX 12345
</address>
预览:
<area>
标签用于定义图像映射中的可点击区域。属性介绍:
shape
: 定义区域形状(如 rect
、circle
、poly
)。coords
: 定义区域的坐标。href
: 指定链接的目标 URL。<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>
标签用于表示独立的内容块,通常用于博客文章或新闻稿。属性介绍:
<article>
<h2>文章标题</h2>
<p>这是文章的内容。</p>
</article>
预览:
这是文章的内容。
<aside>
标签用于表示与主内容相关的附加内容,通常用于侧边栏。属性介绍:
<aside>
<h2>相关信息</h2>
<p>这里是一些附加的内容。</p>
</aside>
预览:
<audio>
标签用于嵌入音频内容到网页中。属性介绍:
controls
: 显示音频控制面板。autoplay
: 自动播放音频。<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>
标签用于加粗文本,表示重要性。属性介绍:
<b>重要文本</b>
预览:
<base>
标签用于指定文档中所有相对 URL 的基础 URL。属性介绍:
href
: 基础 URL。target
: 指定链接打开方式。<base href="https://example.com/" target="_blank">
<bdi>
标签用于表示文本的独立方向,通常用于多语言文本。属性介绍:
<bdi>Some text</bdi>
预览:
<bdo>
标签用于重写文本方向。属性介绍:
dir
: 指定文本方向(如 ltr
、rtl
)。<bdo dir="rtl">从右到左的文本</bdo>
预览:
<blockquote>
标签用于表示引用的段落,通常用于引用多个句子。属性介绍:
cite
: 提供引用来源的 URL。<blockquote cite="https://example.com">
<p>这是一段引用的文本。</p>
</blockquote>
预览:
这是一段引用的文本。
<body>
标签用于定义文档的主体,包含用户可见的内容。属性介绍:
<body>
<h1>页面标题</h1>
<p>这是主体内容。</p>
</body>
预览:
这是主体内容。
<br>
标签用于在文本中插入换行符。属性介绍:
<p>第一行<br>第二行</p>
预览:
第一行
第二行
<button>
标签用于创建可点击的按钮。属性介绍:
type
: 指定按钮类型(如 button
、submit
、reset
)。<button type="button">点击我</button>
预览:
<canvas>
标签用于绘制图形,通常与 JavaScript 一起使用。属性介绍:
width
: 指定画布宽度。height
: 指定画布高度。<canvas id="myCanvas" width="200" height="100"></canvas>
预览:
<caption>
标签用于为表格提供标题。属性介绍:
<table>
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
预览:
姓名 | 年龄 |
---|
<cite>
标签用于引用书籍、文章或其他作品的标题。属性介绍:
<cite>《了不起的盖茨比》</cite>
预览:
<code>
标签用于表示计算机代码。属性介绍:
<code>console.log('Hello, World!');</code>
预览:
console.log('Hello, World!');
<col>
标签用于定义表格中列的属性。属性介绍:
span
: 指定该列跨度。style
: 应用样式。<table>
<col style="background-color: yellow;">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
预览:
单元格1 | 单元格2 |
<colgroup>
标签用于定义表格中的列组。属性介绍:
span
: 指定列组的跨度。<table>
<colgroup span="2">
<col style="background-color: lightblue;">
</colgroup>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
预览:
单元格1 | 单元格2 |
<data>
标签用于将机器可读数据与文本内容关联。属性介绍:
value
: 指定数据的机器可读值。<time datetime="2023-09-11">2023年9月11日</time>
预览:
<datalist>
标签用于指定输入框的预定义选项列表。属性介绍:
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
预览:
<dd>
标签用于定义描述列表中的描述项。属性介绍:
<dl>
<dt>术语</dt>
<dd>术语的定义。</dd>
</dl>
预览:
<del>
标签用于表示被删除的文本,通常用作修订。属性介绍:
cite
: 提供更改来源的 URL。datetime
: 指定删除的日期和时间。<p>这是一个<del>删除的文本</del>。</p>
预览:
这是一个删除的文本。
<details>
标签用于创建可展开的内容。属性介绍:
open
: 指定内容默认展开。<details>
<summary>点击展开</summary>
<p>这是详细内容。</p>
</details>
预览:
这是详细内容。
<dfn>
标签用于定义术语,通常用于首次出现的术语。属性介绍:
<p><dfn>HTML</dfn> 是超文本标记语言。</p>
预览:
HTML 是超文本标记语言。
<div>
标签用于定义文档中的分区或节。属性介绍:
<div>
<h2>标题</h2>
<p>这是一个段落。</p>
</div>
预览:
这是一个段落。
<dl>
标签用于定义描述列表。属性介绍:
<dl>
<dt>术语</dt>
<dd>术语的定义。</dd>
</dl>
预览:
<dt>
标签用于描述列表中的术语。属性介绍:
<dl>
<dt>术语</dt>
<dd>术语的定义。</dd>
</dl>
预览:
<em>
标签用于强调文本,通常以斜体形式显示。属性介绍:
<p>这是一个<em>强调</em>的文本。</p>
预览:
这是一个强调的文本。
<embed>
标签用于嵌入外部内容(如视频或音频)。属性介绍:
src
: 指定要嵌入的内容的 URL。type
: 指定内容类型。<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>
标签用于将表单元素分组。属性介绍:
<fieldset>
<legend>个人信息</legend>
<input type="text" placeholder="姓名">
</fieldset>
预览:
<figcaption>
标签用于为 <figure>
元素提供标题或说明。属性介绍:
<figure>
<img src="https://picsum.photos/200/300" alt="示例图">
<figcaption>这是图像的说明。</figcaption>
</figure>
预览:
<figure>
标签用于表示独立的内容,通常与图像或图表相关。属性介绍:
<figure>
<img src="https://picsum.photos/200/300" alt="示例图">
<figcaption>这是图像的说明。</figcaption>
</figure>
预览:
<footer>
标签用于定义文档或部分的页脚。属性介绍:
<footer>
<p>版权信息</p>
</footer>
预览:
<form>
标签用于创建交互式表单。属性介绍:
action
: 指定表单提交的目标 URL。method
: 指定表单提交的方法(如 GET
、POST
)。<form action="/submit" method="post">
<input type="text" name="name" placeholder="姓名">
<input type="submit" value="提交">
</form>
预览:
<h1>
至 <h6>
标签用于定义标题,<h1>
为最高级标题。属性介绍:
<h1>主标题</h1>
<h2>副标题</h2>
预览:
<head>
标签用于定义文档的头部,包含元数据和标题。属性介绍:
<head>
<title>文档标题</title>
</head>
预览:
<header>
标签用于定义文档或部分的头部。属性介绍:
<header>
<h1>网站标题</h1>
</header>
预览:
<hr>
标签用于在文档中插入水平线。属性介绍:
<hr>
预览:
<html>
标签用于定义整个 HTML 文档。属性介绍:
lang
: 指定文档的语言。<html lang="en">
<head>
<title>文档标题</title>
</head>
</html>
预览:
<i>
标签用于表示斜体文本,通常表示术语或强调。属性介绍:
<i>斜体文本</i>
预览:
<iframe>
标签用于嵌入另一个文档。属性介绍:
src
: 指定嵌入文档的 URL。width
: 指定宽度。height
: 指定高度。<iframe src="https://example.com" width="300" height="200"></iframe>
预览:
<img>
标签用于嵌入图像。属性介绍:
src
: 指定图像的 URL。alt
: 提供图像的替代文本。<img src="https://picsum.photos/200/300" alt="示例图">
预览:
<input>
标签用于创建不同类型的输入控件。属性介绍:
type
: 指定输入类型(如 text
、password
、checkbox
等)。placeholder
: 提供输入框的占位符文本。<input type="text" placeholder="请输入内容">
预览:
<ins>
标签用于表示新增的文本,通常用于修订。属性介绍:
cite
: 提供更改来源的 URL。datetime
: 指定新增的日期和时间。<p>这是一个<ins>新增的文本</ins>。</p>
预览:
这是一个新增的文本。
<kbd>
标签用于表示用户输入的文本,通常用于键盘输入。属性介绍:
<p>请按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制文本。</p>
预览:
请按 Ctrl + C 复制文本。
<label>
标签用于为表单控件提供标签。属性介绍:
for
: 指定与标签关联的表单控件的 ID。<label for="name">姓名:</label>
<input type="text" id="name">
预览:
<legend>
标签用于为 <fieldset>
提供标题。属性介绍:
<fieldset>
<legend>个人信息</legend>
<input type="text" placeholder="姓名">
</fieldset>
预览:
<li>
标签用于定义列表中的项。属性介绍:
<ul>
<li>项目一</li>
<li>项目二</li>
</ul>
预览:
<link>
标签用于定义文档与外部资源的关系,通常用于链接样式表。属性介绍:
rel
: 指定与目标资源的关系(如 stylesheet
)。href
: 指定外部资源的 URL。<link rel="stylesheet" href="styles.css">
预览:
<main>
标签用于表示文档的主要内容。属性介绍:
<main>
<h1>主要内容</h1>
</main>
预览:
<map>
标签用于定义图像映射。属性介绍:
<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>
标签用于标记文本,通常用于高亮显示。属性介绍:
<p>这是一个<mark>高亮文本</mark>。</p>
预览:
这是一个高亮文本。
<meta>
标签用于提供文档的元数据。属性介绍:
name
: 指定元数据的名称(如 description
)。content
: 指定元数据的值。<meta name="description" content="这是一个示例网页。">
<meter>
标签用于表示度量数据的范围。属性介绍:
min
: 最小值。max
: 最大值。value
: 当前值。<meter min="0" max="100" value="50">50%</meter>
预览:
<nav>
标签用于定义导航链接的部分。属性介绍:
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
</ul>
</nav>
预览:
<noscript>
标签用于在不支持脚本的情况下显示内容。属性介绍:
<noscript>
<p>您的浏览器不支持脚本。</p>
</noscript>
预览:
<object>
标签用于嵌入外部对象,如图像或音频。属性介绍:
data
: 指定要嵌入的对象的 URL。type
: 指定对象的 MIME 类型。<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
: 指定列表的起始编号。<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
预览:
<optgroup>
标签用于为 <select>
中的选项分组。属性介绍:
label
: 指定分组的标签。<select>
<optgroup label="水果">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</optgroup>
</select>
预览:
<option>
标签用于定义 <select>
中的选项。属性介绍:
value
: 指定选项的值。selected
: 指定选项是否默认被选中。<select>
<option value="1">选项一</option>
<option value="2" selected>选项二</option>
</select>
预览:
<output>
标签用于表示计算结果。属性介绍:
for
: 指定与结果相关的表单控件的 ID。name
: 指定输出的名称。<output for="input" name="result">结果</output>
预览:
<p>
标签用于定义段落。属性介绍:
<p>这是一个段落。</p>
预览:
这是一个段落。
<param>
标签用于为 <object>
元素提供参数。属性介绍:
name
: 指定参数名称。value
: 指定参数值。<object data="http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4" type="video/mp4">
<param name="autoplay" value="true">
</object>
预览:
<picture>
标签用于提供多个图像源,适应不同的显示条件。属性介绍:
<picture>
<source srcset="https://picsum.photos/" type="image/webp">
<img src="https://picsum.photos/200/300" alt="示例图">
</picture>
预览:
<pre>
标签用于表示预格式化的文本,保留空格和换行。属性介绍:
<pre>
这是 预格式化的
文本。
</pre>
预览:
这是 预格式化的 文本。
<progress>
标签用于表示任务的进度。属性介绍:
value
: 当前值。max
: 最大值。<progress value="50" max="100">50%</progress>
预览:
<q>
标签用于表示短引用,通常会自动加上引号。属性介绍:
cite
: 提供引用来源的 URL。<q cite="https://example.com">这是引用的内容。</q>
预览:
这是引用的内容。
<rp>
标签用于在使用 <ruby>
标签时提供括号。属性介绍:
<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>
预览:
<rt>
标签用于表示 <ruby>
标签中注解的文本。属性介绍:
<ruby>
漢<rt>かん</rt>
</ruby>
预览:
<ruby>
标签用于表示汉字及其读音的注解。属性介绍:
<ruby>
漢<rt>かん</rt>
</ruby>
预览:
<s>
标签用于表示已删除的文本,通常用作修订。属性介绍:
<p>这是一个<s>删除的文本</s>。</p>
预览:
这是一个删除的文本。
<samp>
标签用于表示计算机程序的输出。属性介绍:
<p>输出结果是 <samp>成功</samp>。</p>
预览:
输出结果是 成功。
<script>
标签用于嵌入或引用 JavaScript 代码。属性介绍:
src
: 指定外部脚本的 URL。async
: 指定脚本是否异步加载。defer
: 指定脚本在文档解析完成后执行。<script src="script.js"></script>
<section>
标签用于定义文档中的节。属性介绍:
<section>
<h2>节标题</h2>
<p>这是节的内容。</p>
</section>
预览:
这是节的内容。
<select>
标签用于创建下拉列表。属性介绍:
multiple
: 允许多选。size
: 指定可见选项的数量。<select>
<option value="1">选项一</option>
<option value="2">选项二</option>
</select>
预览:
<small>
标签用于表示小号文本,通常用于附加信息。属性介绍:
<p><small>附加信息</small></p>
预览:
附加信息
<source>
标签用于指定媒体元素的多个资源。属性介绍:
src
: 指定媒体文件的 URL。type
: 指定媒体文件的 MIME 类型。<video controls>
<source src="http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4" type="video/mp4">
</video>
预览:
<span>
标签用于定义行内元素,通常用于样式化部分文本。属性介绍:
<p>这是一个<span style="color: red;">红色文本</span>。</p>
预览:
这是一个红色文本。
<strong>
标签用于表示强调文本,通常以粗体形式显示。属性介绍:
<p>这是一个<strong>强调的文本</strong>。</p>
预览:
这是一个强调的文本。
<style>
标签用于定义文档内的样式。属性介绍:
type
: 指定样式表的类型(如 text/css
)。<style>
p { color: blue; }
</style>
<sub>
标签用于表示下标文本。属性介绍:
<p>H<sub>2</sub>O</p>
预览:
H2O
<summary>
标签用于为 <details>
提供标题。属性介绍:
<details>
<summary>点击展开</summary>
<p>这是详细内容。</p>
</details>
预览:
这是详细内容。
<sup>
标签用于表示上标文本。属性介绍:
<p>E = mc<sup>2</sup></p>
预览:
E = mc2
<table>
标签用于定义表格。属性介绍:
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</table>
预览:
标题1 | 标题2 |
---|
<tbody>
标签用于定义表格主体。属性介绍:
<table>
<tbody>
<tr>
<td>行1,单元格1</td>
<td>行1,单元格2</td>
</tr>
</tbody>
</table>
预览:
行1,单元格1 | 行1,单元格2 |
<td>
标签用于定义表格中的单元格。属性介绍:
colspan
: 指定单元格跨越的列数。rowspan
: 指定单元格跨越的行数。<table>
<tr>
<td>单元格1</td>
<td colspan="2">单元格2(跨越两列)</td>
</tr>
</table>
预览:
单元格1 | 单元格2(跨越两列) |
<template>
标签用于定义可重用的 HTML 模板。属性介绍:
<template>
<p>这是一个模板内容。</p>
</template>
<textarea>
标签用于创建多行文本输入框。属性介绍:
rows
: 指定可见行数。cols
: 指定可见列数。<textarea rows="4" cols="50">输入文本...</textarea>
预览:
<tfoot>
标签用于定义表格的脚注。属性介绍:
<table>
<tfoot>
<tr>
<td>脚注内容</td>
</tr>
</tfoot>
</table>
预览:
脚注内容 |
<th>
标签用于定义表格中的表头单元格。属性介绍:
colspan
: 指定表头单元格跨越的列数。rowspan
: 指定表头单元格跨越的行数。<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</table>
预览:
表头1 | 表头2 |
---|
<thead>
标签用于定义表格的表头。属性介绍:
<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
</table>
预览:
表头1 | 表头2 |
---|
<time>
标签用于表示时间或日期。属性介绍:
datetime
: 指定机器可读的日期和时间格式。<time datetime="2023-09-11">2023年9月11日</time>
预览:
<title>
标签用于定义文档的标题。属性介绍:
<title>文档标题</title>
预览:
<tr>
标签用于定义表格中的行。属性介绍:
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
预览:
单元格1 | 单元格2 |
<track>
标签用于为 <video>
和 <audio>
提供文本轨道。属性介绍:
kind
: 指定轨道类型(如 subtitles
、captions
)。src
: 指定轨道文件的 URL。srclang
: 指定轨道的语言。<video controls>
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
</video>
预览:
<u>
标签用于表示下划线文本。属性介绍:
<p>这是<u>下划线文本</u>。</p>
预览:
这是下划线文本。
<ul>
标签用于定义一个无序列表,列表项通常用圆点标记。属性介绍:
type
: 指定列表项目的标记类型(如 disc, circle, square)。<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
预览:
<var>
标签用于表示变量,通常在数学或编程上下文中使用。它会以斜体形式显示。属性介绍:
<p>计算结果为 <var>x</var> + <var>y</var>.</p>
预览:
计算结果为 x + y.
<video>
标签用于嵌入视频内容到网页中。可以控制视频的播放、暂停、音量等。属性介绍:
controls
: 显示视频控制面板。autoplay
: 视频自动播放。loop
: 视频循环播放。muted
: 默认静音播放。<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 的适当位置插入换行符。属性介绍:
<p>这是一个很长的单词:Supercalifragilisticexpialidocious<wbr>,你可以在这里换行。</p>
预览:
这是一个很长的单词:Supercalifragilisticexpialidocious