html5手机字体怎么设置(html5给汉字加拼音加进度条的实现代码)
类别:Web前端 浏览量:1482
时间:2021-10-11 00:23:15 html5手机字体怎么设置
html5给汉字加拼音加进度条的实现代码小编项目上最近设计有个新需求,要给汉纸加拼音,类似于加英文底部小标题类似,毕竟现在咱们中文之博大,大家都在学习和使用中文。下面就让我们学习一下吧,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>
拼音自动的居中,站汉字的平分位置。
假如我们删掉其中几个拼音,会是怎么样呢,请看效果:
是不是很智能、很方便呢!!!
二、进度条
progress进度条:
话不多说,直接上代码:
<!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>
小编认为确实不够美观,如需更加美观,需要自己添加颜色 样式。这里暂时提供一些小的demo.想要了解更多前端知识,关注小编不迷路,哈哈哈哈哈哈!!!
到此这篇关于html5给汉字加拼音加进度条的实现代码的文章就介绍到这了,更多相关html5加拼音加进度条内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5支持video的视频格式(解决html5中的video标签ios系统中无法播放使用的问题)
- html5弹出窗口(Html5页面上如何禁止手机虚拟键盘弹出)
- html5带图标下拉菜单(html5小程序飞入购物车抛物线绘制运动轨迹点)
- html5播放视频的元素(HTML5在手机端实现视频全屏展示方法)
- html5的canvas图形绘制技术(导出HTML5 Canvas图片并上传服务器功能)
- html5元素列表(HTML5触摸事件touchstart、touchmove和touchend的实现)
- html5按钮点击跳转(HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题)
- html5列表与布局(HTML5逐步分析实现拖放功能的方法)
- html5 布局设计(Html5导航栏吸顶方案原理与对比实现)
- html5炫酷代码(HTML5超炫酷粒子效果的进度条的实现示例)
- html5自动静音(html5录音功能实战示例)
- html5 canvas 特效(JavaScript canvas实现流星特效)
- Html5中的<section>标签
- html5canvas动画(html5 canvas 实现光线沿不规则路径运动)
- html5单选项怎么调选项间距(html5实现输入框fixed定位在屏幕最底部兼容性)
- html5底部组件(HTML5 Blob对象的具体使用)
- 大事件 合肥四中火了(大事件合肥四中火了)
- 翼龙贷组织出借人调研 感受鄱阳 借 来的致富路(翼龙贷组织出借人调研)
- 2023新国风戏曲教育寒假集训班汇报演出《戏娃闹元宵》图文报道(2023新国风戏曲教育寒假集训班汇报演出戏娃闹元宵图文报道)
- 九儿《狐踪谍影》出演热血女特警,戏份杀青受关注(九儿狐踪谍影出演热血女特警)
- 红色代表什么(红色代表什么寓意)
- 蓝天代表什么(蓝天代表什么生肖)
热门推荐
- docker查看挂载目录(docker-修改容器挂载目录的3种方法小结)
- 面试时如何回答对工作的期望
- 数据库常见的索引结构(数据库索引知识点整理)
- sqlserver数据库基本操作(SQL Server四个系统表的知识讲解)
- 织梦怎么添加图片(织梦怎么去掉上传图片的水印改为自己设计的水印)
- vue用于动态切换组件的内置组件(Vue 可拖拽组件Vue Smooth DnD的使用详解)
- iis安全包括哪些方面(使用华盾IIS备份还原工具备份还原IIS站点图解)
- css怎么设置div边框(div+css实现带箭头的面包屑导航栏)
- sql server中策略管理
- sqlserver查看表和存储过程的架构(SQL Server 远程更新目标表数据的存储过程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9