那些不常用却很实用的HTML标签

空城皆是旧梦

已于 2024-07-18 13:32:39 修改

阅读量637

点赞数 17

文章标签： html 前端

于 2024-07-16 14:08:33 首次发布

本文链接：https://blog.csdn.net/qq_36012563/article/details/140436157

版权

文章目录

作为一名开发人员，我们往往习惯于使用常见的HTML标签，如 <div>、 <span>、 <p>等。然而，HTML中还有许多不常用但功能强大的标签，可以帮助我们创建更具特色和功能丰富的网页。本文将介绍20个不常用的HTML标签及其具体应用。

一：增强语义化

1. center: 水平居中

<center>实现水平居中，这个标签自带了 text-align: center 的样式

2. address: 地址

<address> 标签用于定义联系信息，通常用于作者或拥有者的联系信息。

<address>
    联系人: John Doe<br>
    邮箱: john.doe@example.com<br>
    地址: 1234 Elm Street, Some City, Some Country
</address>

3. article: 文章

<article> 标签表示文档中的独立内容，如博客文章、新闻报道等。

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

4. header，footer，main，aside，

<header>: 定义页面或区块的页眉部分。
<footer>: 定义页面或区块的页脚部分。
<main>: 定义页面的主要内容。
<aside> 标签表示与主要内容相关的辅助内容，如侧边栏、广告等。

<header>
  <h1>这里是主页标题</h1>
</header>
<aside>
    <h2>相关内容</h2>
    <p>这是一些辅助信息。</p>
</aside>
<main>这是主要内容</main>
<footer>
  这是底部内容
</footer>

5. nav: 导航链接

<nav>: 定义导航链接的部分。

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/python/">Python</a>
</nav>

6. details 和 summary: 详情和摘要

<details> 标签用于创建可折叠的内容区域，<summary> 标签用于定义其标题。

<details>
    <summary>点击查看详细信息</summary>
    <p>这里是隐藏的详细信息。</p>
</details>

7. figcaption 和 figure: 图例和图

<figure> 标签用于包含独立的内容（如图像），<figcaption> 标签用于为其添加标题。

<figure>
    <img src="example.jpg" alt="示例图片">
    <figcaption>这是一个示例图片的标题。</figcaption>
</figure>

8. mark: 标记文本

<mark> 标签用于标记高亮文本。

<p>这是一段文字，其中包含 <mark>高亮</mark> 部分。</p>

9. time: 时间

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

<p>会议时间是 <time datetime="2023-07-20T19:30">7月20日晚上7点半</time>。</p>

10. progress: 进度条

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

<label for="file">文件上传进度:</label>
<progress id="file" value="32" max="100">32%</progress>

11. code: 代码

<code> 标签用于表示代码片段。

<p>使用 <code>document.getElementById()</code> 方法来访问DOM元素。</p>

12. small, big: 小号/大号字体

<small>标记小号字体的文本。
<big>标记大号字体的文本。

<p>这个文本是正常的。</p>
<p><small>这个文本比较小。</small></p>
<p><big>这个文本比较大。</big></p>

13. strong, b: 重要文本

<strong>标记重要文本，文本加粗。
<b> 标签定义粗体的文本。

<p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p>
	
<p>这是一个普通的文本- <strong>这是一个加粗文本</strong>。</p>

14. hr: 水平线

<hr> 标签定义 HTML 页面中的主题分隔（例如，话题的转变）。显示为水平线，用于在 HTML 页面中分隔内容，或定义内容上的变化。

<h1>Web 的主要语言</h1>

<p>HTML 是创建 Web 页面的标准标记语言。HTML 描述了 Web 页面的结构，由一系列元素组成......</p>
<hr>
<p>CSS 是一种描述 HTML 元素在屏幕、纸张或其他媒体上显示方式的语言......</p>
<hr>
<p>JavaScript 是 HTML 和 Web 的编程语言。JavaScript 可以更改 HTML 内容和属性值......</p>

二、多媒体和数据展示

1. audio, video, source: 音频

<audio> 标签用于嵌入音频内容。
<video>: 插入视频内容
<source>: 为 <audio> 或 <video> 元素指定多个媒体资源

<audio controls>
    <source src="audiofile.mp3" type="audio/mpeg">
    您的浏览器不支持音频标签。
</audio>

2. picture: 图片

根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素。

<picture>
  <source media="(min-width:650px)" srcset="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1091405991,859863778&fm=26&gp=0.jpg">
  <source media="(min-width:465px)" srcset="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=137628589,3436980029&fm=26&gp=0.jpg">
  <img alt="Flowers" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3791918726,2864900975&fm=26&gp=0.jpg" style="width:auto;">
</picture>

3. embed: 嵌入外部资源，如插件或媒体

<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）。

<!-- 嵌入视频 -->
<embed type="video/webm" src="video.mp4" width="400" height="300">
<!-- 嵌入 HTML 页面 -->
<embed type="text/html" src="snippet.html" width="500" height="200">
<!-- 嵌入图片 -->
<embed type="image/jpg" src="https://static.jyshare.com/images/runoob-logo.png" width="258" height="39">

4. iframe: 嵌入另一个HTML页面

<iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

<iframe src="https://www.runoob.com"></iframe>

三、数据与表单

1. data: 数据

<data> 标签链接内容与机器可读的翻译。

<p>售价：<data value="39.99">四十美元</data></p>

2. meter: 计量器

<meter> 标签表示某个范围内的标量测量值或分数值。

<label for="diskUsage">磁盘使用率:</label>
<meter id="diskUsage" value="2" min="0" max="10">2 out of 10</meter>

四、文本格式化和显示

3. abbr: 缩写

<abbr> 标签表示缩写词或缩略语，并可以为其提供完整的说明。

<p><abbr title="Hypertext Markup Language">HTML</abbr> 是一种用于创建网页的标准标记语言。</p>

4. acronym: 缩写

<acronym> 是一种定义或更多解释一组文字的方法。当你用鼠标放到使用<acronym>标签的文字时，一个显示title标签的内容的框框将会出现在下边。

微博客网站<acronym title="Founded in 2006"> Twitter</acronym> 最近常常宕机。

5. sub,sup: 上下标

sup：上标
sub：下标

H<sub>2</sub>O、O<sub>2</sub>、2<sup>32</sup>

6. bdi: 双向隔离文本

<bdi> 标签用于隔离一部分文本，以防止其方向性被周围文本影响。

<p>用户名：<bdi>راشد</bdi></p>

7. bdo: 双向覆盖文本

<bdo> 标签用于覆盖文本的默认方向。

<p><bdo dir="rtl">这段文字将从右到左显示。</bdo></p>

8. cite: 引用

<cite> 标签用于引用作品的标题。

<p><cite>《哈利波特》</cite> 是一部很受欢迎的小说。</p>

9. ruby, rt 和 rp: 拼音注释

这些标签用于表示东亚字符的拼音注释。

<ruby>
    漢 <rt>hàn</rt> 字 <rt>zì</rt>
</ruby>

10. ins: 高亮内容

<ins> 用下划线高亮显示添加进来的内容

John <del>likes</del> <ins>LOVES</ins> his new iPod.

11. del: 删除线

<del> 用删除线显示被移除的信息。

John <del>likes</del> <ins>LOVES</ins> his new iPod.

12. q: 标记短的引用或内联引用

<q> 标签定义一个短的引用。

<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

13. blockquote: 定义摘自另一个源的块引用

浏览器通常会对 <blockquote> 元素进行缩进。

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

14. em, dfn, samp, kbd, var: 短语标签

<em>标签是一个短语标签，用来呈现为被强调的文本。
<dfn> 标签用于定义术语。
<samp> 标签用于表示计算机程序的输出。
<kbd> 标签表示用户输入的文本，通常是键盘输入。
<var>是一个短语标签，用来定义变量``。

<em>强调文本</em><br>
<dfn>定义项目</dfn><br>
<samp>计算机样本</samp><br>
<p>请按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制文本。</p>
<var>变量</var>

15. pre: 预格式化的文本

<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>

16. wbr: 软断行

<wbr>这个标签算是一个软断行，允许你在某一行内指定一个断行点，表明在该点处可以断行，但是不是一定会断行，仅仅是在有需要断行的时候才会断行。

<div style="width:200px;border:1px solid #00f;">
NoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbr<br />
HavaWbr<wbr>HavaWbr<wbr>HavaWbrHavaWbrHavaWbrHavaWbrHavaWbr<wbr>HavaWbr
</div>