HTML <bdi> 标签代表双向隔离元素(Bidirectional Isolate Element)。它用于告知浏览器隔离一段文字,该文字的格式可能与周围的文字方向相反。

这个标签是 HTML5 中的新标签,对于阿拉伯语或希伯来语等语言非常有用,或者当浏览器动态插入一些文字而不知道文字的方向性时。

注意:在 <bdi> 标签内部的内容的方向性不受周围内容的方向性影响。

语法

<bdi>内容</bdi>

以下是关于 <bdi> 标签的一些规范说明

显示行内
起始标签/结束标签同时具有起始和结束标签
用途语义化/文本处理

示例

<!DOCTYPE html>
<html>
<head>
<title>Bdi 标签</title>
<style>
bdi {
  font-size: 25px;
  color: red;
}
</style>
</head>
<body>
<h2>HTML bdi 标签示例</h2>
<p>This <bdi>???? ?????</bdi> Content is written in Arabic language</p>
</body>
</html>

输出
uTools_1686106026749.png

属性

标签特定属性:

<bdi> 标签不包含任何特定属性。

全局属性:

<bdi> 标签支持所有全局属性。

事件属性:

<bdi> 标签支持所有事件属性。

<bdi> 和 <bdo> 的区别

HTML <bdi> 标签是 HTML5 的新元素,与 HTML <bdo> 标签非常相似。但两者的主要区别在于,<bdi> 标签隔离内容与周围内容,而 <bdo> 标签反转方向。有时候 <bdo> 标签可能导致一些意外的呈现错误,因此如果需要可以尝试使用 <bdi> 标签。

支持的浏览器

元素chrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<bdi>

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML高级教程, HTML面试题, HTML笔试题, HTML编程思想