单标签(空标签)
-
<br>
- 描述: 换行标签,用于在文本中插入一个换行。
- 案例:
<p>这是第一行<br>这是第二行</p>
-
<hr>
- 描述: 水平线标签,用于在页面中插入一条水平线。
- 案例:
<p>这是第一段</p> <hr> <p>这是第二段</p>
-
<img>
- 描述: 图像标签,用于在页面中插入图像。
- 案例:
<img src="image.jpg" alt="描述图片的文字">
-
<input>
- 描述: 输入标签,用于创建各种输入控件(如文本框、按钮等)。
- 案例:
<input type="text" placeholder="请输入文本">
-
<meta>
- 描述: 元数据标签,用于提供页面的元数据,如字符集、描述等。
- 案例:
<meta charset="UTF-8">
-
<link>
- 描述: 链接标签,用于链接外部资源,如CSS文件。
- 案例:
<link rel="stylesheet" href="styles.css">
-
<base>
- 描述: 基底标签,用于指定页面中所有相对URL的基地址。
- 案例:
<base href="https://www.example.com/">
-
<col>
- 描述: 列标签,用于为表格中的列定义属性。
- 案例:
<table> <colgroup> <col style="background-color:yellow"> </colgroup> <tr><td>列1</td><td>列2</td></tr> </table>
-
<source>
- 描述: 资源标签,用于为
<audio>
或<video>
标签指定媒体资源。 - 案例:
<audio controls> <source src="audio.mp3" type="audio/mpeg"> </audio>
- 描述: 资源标签,用于为
-
<track>
- 描述: 轨道标签,用于为
<audio>
或<video>
标签指定字幕或标题。 - 案例:
<video controls> <source src="video.mp4" type="video/mp4"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> </video>
- 描述: 轨道标签,用于为
双标签(开始标签和结束标签)
-
<html>
- 描述: HTML文档的根元素。
- 案例:
<html> <head>...</head> <body>...</body> </html>
-
<head>
- 描述: 文档的头部,包含元数据和外部资源的链接。
- 案例:
<head> <title>页面标题</title> <meta charset="UTF-8"> </head>
-
<title>
- 描述: 文档的标题,显示在浏览器的标题栏或标签页上。
- 案例:
<title>我的网页</title>
-
<body>
- 描述: 文档的主体,包含所有可见的内容。
- 案例:
<body> <h1>欢迎来到我的网页</h1> <p>这是我的第一个段落。</p> </body>
-
<h1>
到<h6>
- 描述: 标题标签,用于定义不同级别的标题。
- 案例:
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3>
-
<p>
- 描述: 段落标签,用于定义文本段落。
- 案例:
<p>这是一个段落。</p>
-
<a>
- 描述: 锚标签,用于创建超链接。
- 案例:
<a href="https://www.example.com">访问示例网站</a>
-
<div>
- 描述: 块级容器标签,用于组织和布局内容。
- 案例:
<div style="background-color:lightblue; padding:10px;"> <p>这是一个div容器中的段落。</p> </div>
-
<span>
- 描述: 行内容器标签,用于对文本的一部分进行样式化。
- 案例:
<p>这是一段包含<span style="color:red;">红色</span>文字的段落。</p>
-
<ul>
- 描述: 无序列表标签,用于创建项目符号列表。
- 案例:
<ul> <li>项目1</li> <li>项目2</li> </ul>
-
<ol>
- 描述: 有序列表标签,用于创建编号列表。
- 案例:
<ol> <li>第一项</li> <li>第二项</li> </ol>
-
<li>
- 描述: 列表项标签,用于定义列表中的项目。
- 案例:
<ul> <li>苹果</li> <li>香蕉</li> </ul>
-
<table>
- 描述: 表格标签,用于创建表格。
- 案例:
<table border="1"> <tr><th>姓名</th><th>年龄</th></tr> <tr><td>张三</td><td>25</td></tr> </table>
-
<tr>
- 描述: 表格行标签,用于定义表格中的一行。
- 案例:
<table> <tr><td>第一行第一列</td><td>第一行第二列</td></tr> </table>
-
<td>
- 描述: 表格数据标签,用于定义表格中的单元格。
- 案例:
<table> <tr><td>单元格1</td><td>单元格2</td></tr> </table>
-
<th>
- 描述: 表格标题标签,用于定义表格中的表头单元格。
- 案例:
<table> <tr><th>表头1</th><th>表头2</th></tr> </table>
-
<form>
- 描述: 表单标签,用于创建用户输入的表单。
- 案例:
<form action="/submit" method="post"> <input type="text" name="username"> <input type="submit" value="提交"> </form>
-
<button>
- 描述: 按钮标签,用于创建可点击的按钮。
- 案例:
<button type="button">点击我</button>
-
<textarea>
- 描述: 文本区域标签,用于创建多行文本输入框。
- 案例:
<textarea rows="4" cols="50">请输入文本</textarea>
-
<select>
- 描述: 选择标签,用于创建下拉列表。
- 案例:
<select> <option value="option1">选项1</option> <option value="option2">选项2</option> </select>
-
<option>
- 描述: 选项标签,用于定义下拉列表中的选项。
- 案例:
<select> <option value="apple">苹果</option> <option value="banana">香蕉</option> </select>
-
<label>
- 描述: 标签标签,用于为表单控件提供标签。
- 案例:
<label for="username">用户名:</label> <input type="text" id="username" name="username">
-
<fieldset>
- 描述: 字段集标签,用于对表单中的相关元素进行分组。
- 案例:
<form> <fieldset> <legend>个人信息</legend> <label for="name">姓名:</label> <input type="text" id="name" name="name"> </fieldset> </form>
-
<legend>
- 描述: 图例标签,用于为
<fieldset>
元素提供标题。 - 案例:
<fieldset> <legend>登录信息</legend> <label for="username">用户名:</label> <input type="text" id="username" name="username"> </fieldset>
- 描述: 图例标签,用于为
-
<header>
- 描述: 头部标签,用于定义文档或节的头部。
- 案例:
<header> <h1>网站标题</h1> <nav>...</nav> </header>
-
<footer>
- 描述: 页脚标签,用于定义文档或节的页脚。
- 案例:
<footer> <p>版权所有 © 2023</p> </footer>
-
<nav>
- 描述: 导航标签,用于定义导航链接。
- 案例:
<nav> <a href="/home">首页</a> | <a href="/about">关于我们</a> </nav>
-
<section>
- 描述: 节标签,用于定义文档中的节或部分。
- 案例:
<section> <h2>关于我们</h2> <p>这是关于我们的信息。</p> </section>
-
<article>
- 描述: 文章标签,用于定义独立的内容块。
- 案例:
<article> <h2>文章标题</h2> <p>这是文章的内容。</p> </article>
-
<aside>
- 描述: 侧边栏标签,用于定义与主要内容相关的侧边内容。
- 案例:
<aside> <h3>相关链接</h3> <ul> <li><a href="/link1">链接1</a></li> <li><a href="/link2">链接2</a></li> </ul> </aside>
-
<main>
- 描述: 主要内容标签,用于定义文档的主要内容。
- 案例:
<main> <h1>主要内容标题</h1> <p>这是主要内容。</p> </main>
-
<figure>
- 描述: 图形标签,用于定义自包含的内容(如图表、图像等)。
- 案例:
<figure> <img src="image.jpg" alt="描述图片的文字"> <figcaption>图片标题</figcaption> </figure>
-
<figcaption>
- 描述: 图形标题标签,用于为
<figure>
元素提供标题。 - 案例:
<figure> <img src="image.jpg" alt="描述图片的文字"> <figcaption>图片标题</figcaption> </figure>
- 描述: 图形标题标签,用于为
-
<audio>
- 描述: 音频标签,用于嵌入音频内容。
- 案例:
<audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持音频标签。 </audio>
-
<video>
- 描述: 视频标签,用于嵌入视频内容。
- 案例:
<video controls width="320" height="240"> <source src="video.mp4" type="video/mp4"> 您的浏览器不支持视频标签。 </video>
-
<iframe>
- 描述: 内嵌框架标签,用于嵌入另一个网页或媒体内容。
- 案例:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
-
<blockquote>
- 描述: 块引用标签,用于定义从其他来源引用的内容。
- 案例:
<blockquote cite="https://www.example.com"> <p>这是一个引用段落。</p> </blockquote>
-
<q>
- 描述: 短引用标签,用于定义短的行内引用。
- 案例:
<p>他说:<q>这是一个短引用。</q></p>
-
<cite>
- 描述: 引用标签,用于定义作品的标题(如书籍、电影等)。
- 案例:
<p><cite>《哈利·波特》</cite>是一本非常受欢迎的书。</p>
-
<code>
- 描述: 代码标签,用于定义计算机代码片段。
- 案例:
<p>使用<code>console.log()</code>函数来输出信息。</p>
-
<pre>
- 描述: 预格式化文本标签,用于保留文本中的空格和换行。
- 案例:
<pre> 这是预格式化的文本。 它保留了所有的空格和换行。 </pre>
-
<em>
- 描述: 强调标签,用于强调文本。
- 案例:
<p>这是<em>强调</em>的文本。</p>
-
<strong>
- 描述: 重要标签,用于定义重要的文本。
- 案例:
<p>这是<strong>重要</strong>的文本。</p>
-
<small>
- 描述: 小号文本标签,用于定义小号文本。
- 案例:
<p>这是正常文本<small>这是小号文本</small></p>
-
<mark>
- 描述: 标记标签,用于高亮显示文本。
- 案例:
<p>这是<mark>高亮</mark>的文本。</p>
-
<sub>
- 描述: 下标标签,用于定义下标文本。
- 案例:
<p>水的化学式是H<sub>2</sub>O。</p>
-
<sup>
- 描述: 上标标签,用于定义上标文本。
- 案例:
<p>2<sup>3</sup>等于8。</p>
-
<del>
- 描述: 删除标签,用于定义被删除的文本。
- 案例:
<p>这是<del>删除</del>的文本。</p>
-
<ins>
- 描述: 插入标签,用于定义被插入的文本。
- 案例:
<p>这是<ins>插入</ins>的文本。</p>
-
<address>
- 描述: 地址标签,用于定义文档或文章的联系信息。
- 案例:
<address> 联系我们:<a href="mailto:info@example.com">info@example.com</a> </address>
-
<time>
- 描述: 时间标签,用于定义日期和时间。
- 案例:
<p>活动开始时间:<time datetime="2023-10-15T19:00">10月15日晚上7点</time></p>
-
<abbr>
- 描述: 缩写标签,用于定义缩写词。
- 案例:
<p>HTML代表<abbr title="超文本标记语言">超文本标记语言</abbr>。</p>
-
<dfn>
- 描述: 定义标签,用于定义术语。
- 案例:
<p><dfn>HTML</dfn>是一种用于创建网页的标准标记语言。</p>
-
<kbd>
- 描述: 键盘输入标签,用于定义键盘输入。
- 案例:
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>复制文本。</p>
-
<samp>
- 描述: 样本输出标签,用于定义计算机程序的样本输出。
- 案例:
<p>程序输出:<samp>Hello, World!</samp></p>
-
<var>
- 描述: 变量标签,用于定义数学变量或编程变量。
- 案例:
<p>设<var>x</var>为未知数。</p>
-
<bdo>
- 描述: 双向文本覆盖标签,用于覆盖文本的方向。
- 案例:
<bdo dir="rtl">这是从右到左的文本。</bdo>
-
<bdi>
- 描述: 双向隔离标签,用于隔离可能具有不同方向性的文本。
- 案例:
<p>他说:<bdi>مرحبا</bdi>(你好)。</p>
-
<ruby>
- 描述: 注音标签,用于定义注音符号。
- 案例:
<ruby> 漢 <rt>ㄏㄢˋ</rt> </ruby>
-
<rt>
- 描述: 注音文本标签,用于定义注音符号的文本。
- 案例:
<ruby> 漢 <rt>ㄏㄢˋ</rt> </ruby>
-
<rp>
- 描述: 注音括号标签,用于在不支持注音符号的浏览器中显示括号。
- 案例:
<ruby> 漢 <rt>ㄏㄢˋ</rt> <rp>(</rp><rt>han</rt><rp>)</rp> </ruby>
-
<canvas>
- 描述: 画布标签,用于通过脚本绘制图形。
- 案例:
<canvas id="myCanvas" width="200" height="100"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#FF0000'; ctx.fillRect(0, 0, 150, 75); </script>
-
<svg>
- 描述: 可缩放矢量图形标签,用于嵌入SVG图形。
- 案例:
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>
-
<math>
- 描述: 数学标签,用于嵌入数学表达式。
- 案例:
<math> <mrow> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> <mo>=</mo> <msup><mi>c</mi><mn>2</mn></msup> </mrow> </math>
-
<noscript>
- 描述: 无脚本标签,用于在不支持脚本的浏览器中显示内容。
- 案例:
<noscript> <p>您的浏览器不支持JavaScript。</p> </noscript>
-
<template>
- 描述: 模板标签,用于定义可重复使用的HTML模板。
- 案例:
<template id="myTemplate"> <p>这是一个模板内容。</p> </template> <script> var template = document.getElementById('myTemplate').content; document.body.appendChild(template.cloneNode(true)); </script>
-
<script>
- 描述: 脚本标签,用于嵌入或引用JavaScript代码。
- 案例:
<script> alert('Hello, World!'); </script>
-
<style>
- 描述: 样式标签,用于嵌入CSS样式。
- 案例:
<style> body { background-color: lightblue; } </style>
-
<details>
- 描述: 详细信息标签,用于创建可展开和折叠的内容。
- 案例:
<details> <summary>点击查看详细信息</summary> <p>这是详细信息内容。</p> </details>
-
<summary>
- 描述: 摘要标签,用于定义
<details>
元素的可见标题。 - 案例:
<details> <summary>点击查看详细信息</summary> <p>这是详细信息内容。</p> </details>
- 描述: 摘要标签,用于定义
-
<dialog>
- 描述: 对话框标签,用于创建对话框或弹出窗口。
- 案例:
<dialog open> <p>这是一个对话框。</p> </dialog>
-
<meter>
- 描述: 度量标签,用于显示已知范围内的标量测量值。
- 案例:
<meter value="7" min="0" max="10">7 out of 10</meter>
-
<progress>
- 描述: 进度条标签,用于显示任务的进度。
- 案例:
<progress value="70" max="100">70%</progress>
-
<output>
- 描述: 输出标签,用于显示计算结果。
- 案例:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" id="a" value="50"> + <input type="number" id="b" value="50"> = <output name="result" for="a b">100</output> </form>
-
<map>
- 描述: 图像映射标签,用于定义图像映射。
- 案例:
<img src="image.jpg" usemap="#map1" alt="图像映射"> <map name="map1"> <area shape="rect" coords="0,0,100,100" href="page1.html" alt="区域1"> <area shape="circle" coords="150,150,50" href="page2.html" alt="区域2"> </map>
-
<area>
- 描述: 区域标签,用于定义图像映射中的可点击区域。
- 案例:
<img src="image.jpg" usemap="#map1" alt="图像映射"> <map name="map1"> <area shape="rect" coords="0,0,100,100" href="page1.html" alt="区域1"> </map>
-
<object>
- 描述: 对象标签,用于嵌入多媒体内容(如Flash、PDF等)。
- 案例:
<object data="movie.swf" type="application/x-shockwave-flash"> <param name="movie" value="movie.swf"> </object>
-
<param>
- 描述: 参数标签,用于为
<object>
元素定义参数。 - 案例:
<object data="movie.swf" type="application/x-shockwave-flash"> <param name="movie" value="movie.swf"> </object>
- 描述: 参数标签,用于为
-
<embed>
- 描述: 嵌入标签,用于嵌入外部应用程序或交互内容。
- 案例:
<embed src="movie.swf" type="application/x-shockwave-flash">
-
<picture>
- 描述: 图片标签,用于定义多个图像源以适应不同的设备或屏幕尺寸。
- 案例:
<picture> <source media="(min-width: 650px)" srcset="image-large.jpg"> <source media="(min-width: 465px)" srcset="image-medium.jpg"> <img src="image-small.jpg" alt="图片"> </picture>
-
<source>
- 描述: 资源标签,用于为
<picture>
、<audio>
或<video>
标签指定媒体资源。 - 案例:
<picture> <source media="(min-width: 650px)" srcset="image-large.jpg"> <img src="image-small.jpg" alt="图片"> </picture>
- 描述: 资源标签,用于为
-
<track>
- 描述: 轨道标签,用于为
<audio>
或<video>
标签指定字幕或标题。 - 案例:
<video controls> <source src="video.mp4" type="video/mp4"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> </video>
- 描述: 轨道标签,用于为
-
<wbr>
- 描述: 换行机会标签,用于定义文本中的换行机会。
- 案例:
<p>这是一个非常长的单词,浏览器会自动换行,但您可以使用<wbr>标签来定义换行机会。</p>
-
<data>
- 描述: 数据标签,用于将内容与机器可读的翻译关联起来。
- 案例:
<ul> <li><data value="21053">Cherry Tomato</data></li> <li><data value="21054">Beef Tomato</data></li> </ul>
-
<datalist>
- 描述: 数据列表标签,用于为输入控件提供预定义选项。
- 案例:
<input list="browsers" name="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Edge"> </datalist>
-
<optgroup>
- 描述: 选项组标签,用于对
<select>
元素中的选项进行分组。 - 案例:
<select> <optgroup label="浏览器"> <option value="chrome">Chrome</option> <option value="firefox">Firefox</option> </optgroup> <optgroup label="操作系统"> <option value="windows">Windows</option> <option value="mac">Mac</option> </optgroup> </select>
- 描述: 选项组标签,用于对
-
<menu>
- 描述: 菜单标签,用于定义命令菜单。
- 案例:
<menu> <li><button onclick="copy()">复制</button></li> <li><button onclick="paste()">粘贴</button></li> </menu>
-
<menuitem>
- 描述: 菜单项标签,用于定义命令菜单中的项目。
- 案例:
<menu> <menuitem label="复制" onclick="copy()"></menuitem> <menuitem label="粘贴" onclick="paste()"></menuitem> </menu>
-
<summary>
- 描述: 摘要标签,用于定义
<details>
元素的可见标题。 - 案例:
<details> <summary>点击查看详细信息</summary> <p>这是详细信息内容。</p> </details>
- 描述: 摘要标签,用于定义
-
<dialog>
- 描述: 对话框标签,用于创建对话框或弹出窗口。
- 案例:
<dialog open> <p>这是一个对话框。</p> </dialog>
-
<meter>
- 描述: 度量标签,用于显示已知范围内的标量测量值。
- 案例:
<meter value="7" min="0" max="10">7 out of 10</meter>
-
<progress>
- 描述: 进度条标签,用于显示任务的进度。
- 案例:
<progress value="70" max="100">70%</progress>
-
<output>
- 描述: 输出标签,用于显示计算结果。
- 案例:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" id="a" value="50"> + <input type="number" id="b" value="50"> = <output name="result" for="a b">100</output> </form>
-
<map>
- 描述: 图像映射标签,用于定义图像映射。
- 案例:
<img src="image.jpg"