HTML5 新增文本标签
一、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 新增文本标签的更多相关文章
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5新增及移除的元素
HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程.为了更好的处理现在的互联网应用,HTML5新增了图形绘制.多媒体播放.页面结构.应用程序存储.网络工作等新元素.http://hove ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- 过段时间逐步使用HTML5新增的web worker等内容
想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...
- HTML5新增标签与属性
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- 【原】HTML5 新增的结构元素——能用并不代表对了
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...
- HTML5新增的属性
关于html5新增的属性: HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储loca ...
- html5新增及废除属性
html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定au ...
- html5新增及删除标签
一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签, ...
随机推荐
- [Algorithm] 53. Maximum Subarray
Given an integer array nums, find the contiguous subarray (containing at least one number) which has ...
- [教程]Ubuntu16.04安装QQ,Tim,微信,百度网盘等
[教程]Ubuntu16.04安装QQ,Tim,微信,百度网盘等 本文参考这篇blog step 1 先安装 deep-win环境. 戳这里下载压缩包 解压后在文件夹里打开终端,输入 sudo sh ...
- [RN] 全国城市列表选择 (包含定位城市、热门城市、全国城市)
全国城市列表选择 (包含定位城市.热门城市.全国城市) 用ScrollView 实现,解决 SectionList 实现的卡顿问题 实现效果如图: 代码实现如图: 主逻辑文件 cityList.js ...
- [RN] Android 设备adb连接后unauthorized解决方法
Android 设备adb连接后unauthorized解决方法 安卓设备usb或者adbwireless连接后输入adb device后都是未授权状态 相信很多同学都会遇到这种情况,除了一直重复开关 ...
- uiView获取指定子view
判断对象类型 -(BOOL) isKindOfClass: classObj判断是否是这个类或者这个类的子类的实例 -(BOOL) isMemberOfClass: classObj 判断是否是这个类 ...
- Android Studio 之 Navigation【1.页面之间的切换】
1.创建 2个 Fragment ,下面两个include 不要勾 2.创建好 Fragment 后,打开layout中的 fragment.xml 文件,将里面默认的 textView 控件删除掉 ...
- SQL2008R2下数据库修复一例
某天访问某个数据库的时候,系统报错.连上去看了一下,服务器是SQL2008R2.由于有上次修复的经验,先使用DBCC查看数据库情况. DBCC的返回: XXXXXXXXXXX发生异常数据库 ID 7, ...
- k8s 相关的命令
查看node信息 kubectl describe node k8s-node- 查看dashboard token kubectl describe pod kubernetes-dashboard ...
- 树莓派4B基本配置
一.系统安装 官网下载好系统解压,使用SD Card Formatter格式化内存卡 # 查看内存卡状态,通过内存卡大小判断是哪个 df -lh # 卸载内存卡 diskutil unmount /d ...
- 洛谷P5017:摆渡车——题解
https://www.luogu.org/problem/P5017 参考:https://www.luogu.org/blog/ztyluogucpp/solution-p5017 我想我大概是废 ...