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 相关文章推荐
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
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
php4的session功能评述(三)
2006/10/09 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
Python生成随机数的方法
2014/01/14 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
python文件排序的方法总结
2020/09/13 Python
python中添加模块导入路径的方法
2021/02/03 Python
新员工试用期自我鉴定
2014/04/17 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
详解Redis复制原理
2021/06/04 Redis