小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter

发布时间:2020-12-26 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ruby标签实现给汉字加拼音

ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

<ruby> 、<rt>、<rp> 标签一同使用,代码如下:

<ruby>
    这是一个汉字
    rp>(zhe shi yi ge han zi)</>
    rt>zhe shi yi ge han zi>
>

当浏览器不支持ruby标签会显示rp中的内容,支持就不会显示rp中的内容。

实现效果,如图:

小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter

参考地址:《w3school:HTML 5 <ruby> 标签》

details标签实现折叠面板

<details> 标签用于描述文档或文档某个部分的细节。

示例代码如下:

details>
  summary>ruby标签介绍
  ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
>

闭合效果如图:

 

小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter

展开效果图:

小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter

浏览器支持情况:

小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter

目前只有 Chrome 和 Safari 6 支持 <details> 标签。

参考地址:《HTML <details> 标签》

原生进度条progress和度量meter

<progress> 标签表示任务的进度(进程)。

progress标签显示进度条:

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

效果如图所示:

小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter

浏览器的支持情况:

小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter

Internet Explorer 10,Firefox,Opera,Chrome 以及 Safari 6 支持 <progress> 标签。

注释:Internet Explorer 9 以及更早的版本不支持 <progress> 标签。

 参考地址:《HTML <progress> 标签》

值得一提的是:progress 不适合用来表示度量衡,如果想表示度量衡,我们应该使用 meter 标签代替。

示例代码:

meter ="3" min="0"="10">3/10meter><br="0.6">60%>

chrome效果如图所示:

小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter

注释:必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。Internet Explorer 不支持 meter 标签。

属性:

属性 描述
high number 定义度量的值位于哪个点,被界定为高的值。
low number 定义度量的值位于哪个点,被界定为低的值。
max number 定义最大值。默认值是 1。
min number 定义最小值。默认值是 0。
optimum number

定义什么样的度量值是最佳的值。

如果该值高于 "high" 属性,则意味着值越高越好。

如果该值低于 "low" 属性的值,则意味着值越低越好。

value number 定义度量的值。

其中min(最小值)、max(最大值)、low、high把整个进度划分为了三个区间。

示例:

<!--当value和optimum值在一个区间时,它就会呈现出绿色-->
="5" optimum="6" low="2" high="8">5/10/>

当optimum在high和max之间的时候,value在low和high之间,它就会呈现出黄色="9"当optimum在low和high之间的时候,value值在min和low之间,在high和max之间的时候就会呈现出黄色="1">1/10/>
>9/10当optimum在min和low之间的时候,value值在low和high之间会呈现出黄色当optimum在high和max之间的时候,value值在min和low之间时就会呈现出红色当optimum在min和low之间的时候,value在high和max之间就会呈现出红色/>

效果如图:

小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter

总结:

  • 当optimum在绿色区域的时候,value也在绿色区域的时候,整个就会呈现出绿色
  • 当optimum在绿色区域的时候,value值在黄色区域的时候,整个就会呈现出黄色
  • 当optimum在绿色区域的时候,value值在红色区域的时候,整个就会呈现出红色

小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter

  • 当optimum在绿色区域的时候,valu值在中间绿色区域是为绿色
  • 当optimum在绿色区域的时候,value值在min和low之间和在high和max之间时都呈现出黄色

小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter

  • 当optimum在绿色区域的时候,value也在绿色区域的时候,整个就会呈现出绿色
  • 当optimum在绿色区域的时候,value值在黄色区域的时候,整个就会呈现出黄色
  • 当optimum在绿色区域的时候,value值在红色区域的时候,整个就会呈现出红色

小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter

参考地址:《HTML 5 <meter> 标签》《html5中的meter标签度量衡如何改变颜色》

文章参考地址:《HTML5:给汉字加拼音?收起展开组件?让我秀给你看》

总结


以上是前端之家为你收集整理的小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter全部内容,希望文章能够帮你解决小tips:HTML5的ruby标签实现给汉字加拼音、details标签实现折叠面板、原生进度条progress和度量meter所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。