一、mark 标记文本

　　<mark> 标签定义带有记号的文本，表示页面中需要突出显示或高亮显示的信息。

　　通常在引用原文的时候使用 mark 元素，目的是引起当前用户的注意。

　　语法格式：

<p>床前明月<mark>光</mark></p>

　　

二、progress 进度信息

　　<progress> 标签来标识任务的进度。这个进度可以 是不确定的，表示进度正在进行，不清楚还有多少进度没有完成，也可以用 0 到 某个最大数字（如100）之间的数字来表示进度完成情况。

　　语法：

<progress value="50" max="100"></progress>

　　有以下两个新增属性：

　　1、max：定义任务一共需要多少工作。可以不指定

　　2、value：定义以及完成多少任务。

　　Tips：value 的值必须大于0，小于或等于 max 的值，max的值必须大于0。

三、meter 刻度信息

　　<meter> 标签定义已知范围或分数值内的标量，进度。例如：磁盘用量，查询结果的相关性等。

　　语法：

<meter value="" min="" low="" high="" max="" optimum=""></meter>

　　常用属性如下：

属性名 说明
value   在元素中特别标示出来的实际值，默认为0，可以指定一个浮点小数值
min 设置规定范围时，允许使用的最小值，默认为0，设定的值不能小于0
max 设置规定范围时，允许使用的最大值。如果设定时，该属性值小于min属性的值，那么把min属性值视为最大值，默认为1
low 设置范围的下限值，必须小于或等于 hight 属性的值。同样，如果low 属性值小于 min属性的值，那么 把 min 属性的值视为 low 属性的值
high 设置范围的上限值，如果该属性值大于 max 的值，那么把max属性的值视为 hight 属性的值；如果该属性值小于 low 的值，那么把low 属性的值视为 hight 属性的值
optimum                  设置最佳值，必须在 min 属性和 max 属性值之间，可以大于 hight 属性值
form 设置 meter 元素所属的一个或多个表单

四、time 时间信息

　　<time> 标签定义公历的时间（24小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码。

　　语法：

<time datetime="2011-01-12">我的生日</time>

　　time 标签包含2个属性：

　　datetime：定义日期和时间，否则由元素的内容给定日期和时间。

　　pubdate：定义 time 标签中的日期和实际是文档或 <article> 标签的发布日期，为一个可选的布尔值属性。

　　 案例：

<time datetime="2011-01-12T20:00Z">我的生日</time>

<time datetime="2011-01-12T20:00+09:00">我的生日</time>

　　  datetime 属性中日期与时间之间要用 “T” 文字分隔，“T” 表示时间。

　　时间加上 Z 文字表示给机器编码时使用 UTC 标准时间，第二行加上了时差，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差。

五、 address 联系文本

　　<address> 标签定义文档或文章的作者、拥有者的练习信息。其包含文本通常显示为斜体。

　　语法：

<address>

　　<p></p>

　　<a href="" title=""></a>

</address>

　　  如果<address> 标签位于<body> 标签内，表示文档联系信息。

　　如果<address> 标签位于<article> 标签内，表示文章的联系信息。

　　<address> 还可以用来描述电子邮箱或真实地址，也可用来描述与文章相关的联系人的所有联系信息。

六、bdi 隔离文本

　　<bdi> 标签允许设置一段文本，使其脱离其父元素的文本方向设置。

　　语法：

<ul>

    <li>用户 <bdi>admin</bdi>:70分</li>

</ul>

　　Tips：目前，只有 Firefox 和 Chrome 浏览器支持此标签。

七、wbr 换行断点

　　<wbr> 标签定义在文本中的何处适合添加换行符。如果单词太长，或者担心浏览器会在错误的位置换行，那么可以使用此标签来添加单词换行点，避免浏览器随意换行。

　　语法：

<p>本站旧地址：<wbr>http://www.old_site.com/</wbr>,新地址为：<wbr>http://www.new_site.com/</wbr></p>

八、ruby 文本注释

　　<ruby> 标签可以定义 ruby 注释，即中文注音或字符。<ruby> 需要与 <rt> 标签或 <rp> 标签一同使用，<rt> 标签和 <rp> 标签必须位于 <ruby> 标签内。

　　案例：

<ruby>

	少<rt>shao</rt> 小 <rt>xiao</rt> 离 <rt>li</rt> 家 <rt>jia</rt> 老 <rt>lao</rt> 大 <rt>da</rt> 回 <rt>hui</rt>

</ruby>

　　<rt> 标签定义字符（中文注音或字符）的解释或发音。

　 <rp> 标签定义当浏览器不支持 ruby 元素的显示内容。

HTML5 新增文本标签的更多相关文章

  1. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  2. HTML5新增及移除的元素

    HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程.为了更好的处理现在的互联网应用,HTML5新增了图形绘制.多媒体播放.页面结构.应用程序存储.网络工作等新元素.http://hove ...

  3. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  4. 过段时间逐步使用HTML5新增的web worker等内容

    想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...

  5. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  6. 【原】HTML5 新增的结构元素——能用并不代表对了

    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...

  7. HTML5新增的属性

    关于html5新增的属性: HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储loca ...

  8. html5新增及废除属性

    html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定au ...

  9. html5新增及删除标签

    一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签, ...

随机推荐

  1. 访问阿里云 vue项目的 127.0.0.1:+ip

    vue 127.0.0.1 将  localhost 改为 0.0.0.0 原理看下面链接 参考: https://www.cnblogs.com/sddai/p/9281189.html

  2. Iptables不适用与socks协议吗？

    需求描述   现有一个台多公网IP服务器,用作于内网网关,通过NAT访问公网使用,要求不同的内网地址访问公网时使用不同的公网IP.可以简单理解为内网与公网IP进行一对一访问外网的映射. 服务器名称 I ...

  3. vue watch 深度监听

    watch 是vue 里非常有用的回调函数,监听数据变化,非常方便好用,但是,当监听的数据是个复杂型的数据里,里面的数据变化时普通的监听方式是监听不到的,必须使用深度监听: data() { retu ...

  4. Windbg Assembly Code(反汇编)窗口的使用

    在WinDbg中,可以通过输入命令(u, ub, uu (Unassemble))或使用反汇编窗口查看程序汇编代码. 如何打开 DissAssembly Code窗口 通过菜单View-->Di ...

  5. ESA2GJK1DH1K基础篇: 来吧! 彻底了解一下MQTT

    首先你需要知道MQTT并不是什么高大上的事物,它只是一个软件,对就是一个软件.其实就是个TCP服务器 一,既然是TCP服务器,这个TCP服务器和咱平时做的有什么不一样呢. 首先,平时的时候咱做的TCP ...

  6. Python实现网络图形化界面多人聊天室 - Linux

    网络图形化界面多人聊天室 - Linux Windows版本:https://www.cnblogs.com/noonjuan/p/12078524.html 在Python实现网络多人聊天室基础上, ...

  7. C++ CGI报“资源访问错误”问题分析

    一线上CGI偶发性会报“资源访问错误”,经过分析得出是因为CgiHost没有读取到CGI的任务输出,即CGI运行完成后连HTTP头都没有一点输出. 然而实际上,不可能没有任何输出,因为CGI至少有无条 ...

  8. ASP.NET Core 简介

    .NET Core 是 .NET Framework 的新一代版本,是微软开发的第一个具有跨平台 ( Windows.Mac OSX .Linux ) 能力的应用程序开发框 ASP.NET Core ...

  9. PATA1062 Talent and Virtue

    技术要点就是,一个是cmp函数的书写,首先应该分清楚排序关系,然后按照顺序依次排下去. 还有这里有一个巧妙点就是,在结构体中加入了类别这个标签. 学会抽象分类解决,排序比较函数cmp本质工作就是比较结 ...

  10. 前端,DJ

    Vue模块 1.Vue都有哪些指令,简单说说? """ Vue里面常见指令有文本指令:v-text.v-html,属性指令:v-bind,方法指令:v-on,条件指令:v ...