html5给汉字加拼音加进度条的实现代码


Posted in HTML / CSS onApril 07, 2020

小编项目上最近设计有个新需求,要给汉纸加拼音,类似于加英文底部小标题类似,毕竟现在咱们中文之博大,大家都在学习和使用中文。下面就让我们学习一下吧,h5现在已经很强大足以应付很多需求。

一、给汉字加拼音 <ruby><rt>

demo一眼便知:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body style="position: relative;margin: 0 auto; margin-top: 100px;text-align: center;">
        <ruby>
         我们都是优秀的人
          <rt>wo men dou shi you xiu de ren</rt>
        </ruby>
    </body>
</html>

html5给汉字加拼音加进度条的实现代码

拼音自动的居中,站汉字的平分位置。

假如我们删掉其中几个拼音,会是怎么样呢,请看效果:

html5给汉字加拼音加进度条的实现代码

是不是很智能、很方便呢!!!

二、进度条

progress进度条:

html5给汉字加拼音加进度条的实现代码

话不多说,直接上代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body style="position: relative;margin: 0 auto; margin-top: 100px;text-align: center;">
        <ruby>
         我们都是优秀的人
          <rt>wo men dou </rt>         
        </ruby>
        <br>
        <br>
        <br>
        <br>
        修仙进度:<progress value="36" max="100"></progress>
    </body>
</html>

是不是很简单很方便呢!

但是呢注意一点:
progress不适合用来表示度量衡,如果想表示度量衡,我们应该使用meter标签代替。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body style="position: relative;margin: 0 auto; margin-top: 100px;text-align: center;">
        <ruby>
         我们都是优秀的人
          <rt>wo men dou </rt>         
        </ruby>
        <br>
        <br>
        <br>
        <br>
        修仙进度:<progress value="36" max="100"></progress>
        <br>
        <br>
        <meter value="80" min="0" max="100"></meter> 百分之八十
        <br>
        <br>
        <br>
        <meter value="0.1"></meter> 10%
    </body>
</html>

html5给汉字加拼音加进度条的实现代码

小编认为确实不够美观,如需更加美观,需要自己添加颜色 样式。这里暂时提供一些小的demo.想要了解更多前端知识,关注小编不迷路,哈哈哈哈哈哈!!!

到此这篇关于html5给汉字加拼音加进度条的实现代码的文章就介绍到这了,更多相关html5加拼音加进度条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 #HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 #HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 #HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 #HTML / CSS
总结html5自定义属性有哪些
Apr 01 #HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 #HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 #HTML / CSS
You might like
php实现的递归提成方案实例
2015/11/14 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
python自动格式化json文件的方法
2015/03/11 Python
用C++封装MySQL的API的教程
2015/05/06 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python实现祝福弹窗效果
2019/04/07 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
内容编辑个人求职信
2013/12/10 职场文书
采购助理岗位职责
2014/02/16 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
大连导游词
2015/02/12 职场文书
教师创先争优承诺书
2015/04/27 职场文书
毕业典礼主持词
2015/06/29 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python