元素用于隔离文本的一小部分,该文本的格式可设置成与周围的文本方向相反。当具有从右到左方向性的语言(例如阿拉伯语或希伯来语)与左到右语言内联使用时,此功能很有用。

双向文本是既可以包含从左到右(LTR)排列的字符序列又可以从右到左(RTL)排列的字符序列的文本。浏览器通过Unicode双向算法来处理此问题。在此算法中,字符被赋予了隐式的方向性:例如,拉丁字符被视为LTR,而阿拉伯字符被视为RTL。其他一些字符(例如空格和标点符号)被视为中性,并根据其周围字符的方向性分配了方向性。

通常,双向算法会自行设定文字方向,无需提供任何特殊的参数。 有两种工作方式:

  • 嵌入文本的方向性 不会影响周围文本的方向性。

  • 嵌入文本的方向性 不受周围文本方向性的影响


定义与用法

  • bdi 指的是 bidi 隔离(Bi-directional Isolation)。

  • 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。

  • 在发布用户评论或其他您无法完全控制的内容时,该标签很有用。

  • 标签是 HTML5 中的新标签。


语法格式

……


示例代码

<ul><li>用户 <bdi>小张bdi>: 60 分li><li>用户 <bdi>小李bdi>: 80 分li><li>用户 <bdi>小王bdi>: 90 分li>ul>

效果展示:

  • 用户 小张: 60 分

  • 用户 小李: 80 分

  • 用户 小王: 90 分


浏览器支持

IE Firefox Chrome Safari Opera

IE不支持 标签。


全局属性

标签支持 HTML 的全局属性。


事件属性

标签支持 HTML 的事件属性。


更多示例

让我们看看不同语言的展示效果,不熟悉语义顺序的语言可以使用此标签:

<p>中文中的网站是:<bdi>网站bdi>p><p>阿拉伯语中的网站是:<bdi>موقع الكترونيbdi>p><p>希伯来语中的网站是:<bdi>אֲתַר אִינטֶרנֶטbdi>.p>

效果展示:

中文中的网站是:网站

阿拉伯语中的网站是:موقع الكتروني

希伯来语中的网站是:אֲתַר אִינטֶרנֶט.

li标签横向排列_lt;bdigt; | HTML5 双向隔离标签相关推荐

  1. css样式中关于li的横向排列

    在css样式中关于li的横向排列的方法大致有两种: 第一种 :直接在<li>里面设置样式 <ul style="list-style:none;"> < ...

  2. html li标签横向排列_Html笔记lt;1gt;

    一. HTML概念: Hyper Text Markup Language 超文本标记语言.超文本: 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.标记语言:1.由标签构成的语 ...

  3. div内li标签间距_CSS中li标签横向排列出现间距问题

    HTML代码块: 导航项目1 导航项目2 导航项目3 导航项目4 导航项目5 导航项目6 导航项目7 导航项目8 CSS代码块: html,body,.wall { margin: 0; border ...

  4. html li标签横向排列_HTML简易的常用标签

    介绍一下常用的HTML标签,mdn里面有但是都很拗口,今天就介绍几个常用的吧. 1 首先最最最常用的div标签,这个标签就是一个空的标签,是一个闭合标签.什么是闭合标签就是一对的. 例子//<d ...

  5. html5点击事件_lt;detailsgt; | HTML5 详细内容标签

    定义与用法 标签用于描述文档或文档某个部分的细节. 标签规定了用户可见的或者隐藏的补充内容. 标签用来供用户开启关闭的交互式控件.任何形式的内容都能被放在 标签里边. 元素的内容默认对用户是不可见的, ...

  6. html5标签依附,以下不是 HTML5 新增的标签的是:

    [单选题]下面关于弹性的论述中,错误的是()? [单选题] [单选题]Flash动画的主要特点除了文件数据量小外,不包括( ). [判断题]介词是依附是实词或短语后面共同构成"介词短语&qu ...

  7. HTML5新增的video标签,HTML5中video标签的使用方法

    HTML5中video标签的使用方法 发布时间:2020-08-27 11:33:56 来源:亿速云 阅读:100 作者:小新 这篇文章将为大家详细讲解有关HTML5中video标签的使用方法,小编觉 ...

  8. html5才有的标签是什么意思,html5header标签是什么意思?html5header标签的用法详解(附实例)-...

    本篇文章主要的向大家介绍了关于html5 header标签的元素的基本介绍,和header标签的用法实例解析.下面就让我们一起来看看这篇关于html5 header标签的文章吧 一.首先我们来说说ht ...

  9. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

最新文章

  1. 建议收藏!耗时3个月收集的机器学习+深度学习+Python资料教程~免费分享了
  2. 2017.4.2号总结
  3. 非常不错的MySQL优化的8条经验
  4. 关于vc6 在mfc ClassWizard中无法添加成员变量
  5. vs文件上传失败--超过最大字符限制
  6. java构建内存池队列_池化技术(线程池、连接池、内存池等)
  7. 十万服务器秒级管控 腾讯云如何将AIOps用于日常管理?
  8. PAT练习题:D进制的A+B(C++)
  9. 绒毛动物探测器:通过TensorFlow.js中的迁移学习识别浏览器中的自定义对象
  10. 轻量级数据库sqlite的编译
  11. Web前端精髓年终总结
  12. 一线互联网公司中,Java开发的招聘标准
  13. 解决 jersey 单jar包 IME media type text/plain was not found.
  14. PAT之STL:vector、set、map、stack、queue
  15. 第三方SDK:SMSSDK
  16. Microsoft JScript 运行时错误: Automation 服务器不能创建对象
  17. Hindsight Experience Replay(HER)技术
  18. 【蓝桥杯单片机组】备赛实战问题记录
  19. hosts文件如何修改?已解决
  20. ORC 之 C++ 之 Reader

热门文章

  1. 机械考计算机三级,机器人等级考试三级知识点汇总-20210706222922.pdf-原创力文档...
  2. 3层vni vxlan_什么是VXLAN 三层网络搭建二层网络的设计方案
  3. cuda cudnn tensorflow对应_Ubuntu18.04下安装Tensorflow+cuda+cudnn+pytorch
  4. mysql解压版怎么添加服务_Windows系统下MySQL添加到系统服务方法(mysql解压版)
  5. 怎么用deveco studio升级鸿蒙,华为鸿蒙DevEco studio2.0的安装和hello world运行教程
  6. corelab mysql_ALinq 让Mysql变得如此简单_MySQL
  7. Ceph (1) - 安装Ceph集群方法 1:使用ceph-deploy安装Nautilus版Ceph集群
  8. 深度操作系统 Deepin 20 BETA 发布
  9. OSI 认证的开源 License 有哪些?
  10. 《计算机网络基础》第一套作业,东财在线21春《计算机网络基础》第一套作业【标准答案】...