HTML教程-HTML<bdi>标签

作者: 鱼丸

时间: 2023-06-07

分类: HTML教程

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>

输出

属性

标签特定属性：

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

全局属性：

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

事件属性：

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

<bdi> 和 <bdo> 的区别

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

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<bdi>	是	否	是	是	是