html5文本内容_动力节点Java学院整理


Posted in HTML / CSS onJuly 11, 2017

文本内容方面的语义元素,通常用于描述特殊的内容片段。可使用这些语义元素标注出重要信息,如:名称、评价、注意事项、日期等。

包含的元素有:<bdi>、<details>、<summary>、<mark>、<output> 、<ruby>、<rt>、<rp>、<time>、<wbr>等。

<bdi> :标注一段脱离父元素的文本方向的内容,采用系统默认的文本方向。

<details>:用于描述文档细节的部分。

<summary> :标注 <details> 元素的标题。

<mark> :标注突显的文本。

<output> :标注一个将来会被填充内容的区域。

<ruby> :标注注释(中文注音或字符)。

<rt> :在 <ruby> 元素中使用,定义字符(中文注音或字符)的解释或发音。

<rp> :在<ruby> 元素中使用,定义不支持 ruby 元素的浏览器所显示的内容。

<time> :标注日期或时间。

<wbr>:标注一个单词在后续空间无法全部容下时进行换行。

分类

IE浏览器各版本对这些元素支持情况各不相同,这里分为IE支持的和不支持的来介绍:

IE支持的:<mark>、<output>、<ruby>、<rt>、<rp>、<time>。

IE不支持的:<bdi>、<details>、<summary>、<wbr>。

IE支持的

IE浏览器支持的元素,在Chrome浏览器也得到了支持。

包含: <mark>、<output>、<ruby>、<rt>、<rp>、<time>。

<mark>:标注突显的文本

浏览器最低版本:IE 9、Chrome 26

使用场景:重要的内容。

示例:

<p>中国的首都是<mark>北京</mark></p>

html5文本内容_动力节点Java学院整理

<output> :标注一个将来会被填充内容的区域

浏览器最低版本:IE 9、Chrome 33

使用场景:显示计算结果、JavaScript返回值等的一个区域。

属性:

for :关联的元素ID。若有多个,以空格分隔。

form :关联的表单ID。若在一个form表单里,可不用赋值此属性。

示例:

<form id="form" oninput="result.value=userName.value">
    <input type="text" name="userName"/>
    <output name="result"></output>
</form>

html5文本内容_动力节点Java学院整理

<ruby>、<rt>、<rp> :标注注释(中文注音或字符)

<ruby> :标注注释(中文注音或字符)。

<rt> :在 <ruby> 元素中使用,定义字符(中文注音或字符)的解释或发音。

<rp> :在<ruby> 元素中使用,定义不支持 ruby 元素的浏览器所显示的内容。

浏览器最低版本:IE 5、Chrome 5

使用场景:中文拼音、日文假名。

示例:

<h5>中文拼音</h5>
<p>
    <ruby>中<rt>zhong</rt>国<rt>guo</rt></ruby>
</p>
<h5>日文假名</h5>
<p>
    <ruby>?h<rt>かん</rt>字<rt>じ</rt></ruby>
</p>

html5文本内容_动力节点Java学院整理

<time>:标注日期或时间

浏览器最低版本:IE 9、Chrome 33

使用场景:新闻、博客的发表日期。

示例:

创建日期:<time datetime="2016-04-15T12:30" >2016/04/15 12:30</time>

属性:

datetime {datetime} :设定此元素的日期和时间。<time>元素显示日期时间的格式有可能多样,同样的一个时间,有些显示的文本为X分钟前、有些为英文月份,但实际的日期时间只需保存此属性里。

示例:

<p>创建日期:<time datetime="2016-04-15 12:30" >2016/04/15 12:30</time></p>
<p>创建日期:<time datetime="2016-04-15 12:30" >30分钟前</time></p>
<p>创建日期:<time datetime="2016-04-15 12:30" >April 15</time></p>

html5文本内容_动力节点Java学院整理

IE不支持的

IE浏览器不支持的元素,在Chrome浏览器也得到了支持。

包含:<bdi>、<details>、<summary>、<wbr>。

<bdi>:标注一段脱离父元素文本方向的内容,采用系统的默认文本方向

浏览器最低版本:IE 不支持、Chrome 16

使用场景:阿拉伯语、波斯语等从右往左读的文字。

<p>div显示文字方向:rtl</p>
<div dir="rtl">
    <p>中国首都是北京!</p>
    <p><bdi>中国首都是北京!</bdi></p>
</div>

html5文本内容_动力节点Java学院整理

<summary>、<details> :标注可展开、闭合的内容块

<details>:用于描述文档细节的部分。

<summary>:表示包含 <details> 元素的标题。

浏览器最低版本:IE 不支持、Chrome 12

使用场景:商品详情、文档细节。

示例:

<summary>
    2016-04-18天气情况
    <details>
        <p>晴转多云</p>
        <p>13~25°</p>
    </details>
</summary>

html5文本内容_动力节点Java学院整理

<wbr>:标注一个单词在后续空间无法全部容下时进行换行

浏览器最低版本:IE 不支持、Chrome 1

使用场景:比较长的英文单词。

示例:

<h5>不含有wbr元素:</h5>
<p>Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。</p>
<h5>含有wbr元素:</h5>
<p>Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为Java<wbr>Script。</p>

html5文本内容_动力节点Java学院整理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 #HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 #HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 #HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 #HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 #HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 #HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 #HTML / CSS
You might like
十天学会php之第十天
2006/10/09 PHP
php 表单验证实现代码
2009/03/10 PHP
php解决约瑟夫环示例
2014/04/09 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
javascript操作cookie
2017/01/17 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
详解python之简单主机批量管理工具
2017/01/27 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Keras loss函数剖析
2020/07/06 Python
高考考python编程是真的吗
2020/07/20 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
护士思想汇报
2014/01/12 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
招聘专员岗位职责
2014/03/07 职场文书
程序员求职信
2014/04/16 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2015年党员自评材料
2014/12/17 职场文书
小学生交通安全寄语
2015/02/27 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
七年级英语教学反思
2016/02/15 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技