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图片动画制作(HTML5 3D旋转相册的实现示例)
- html5新增特性(总结html5自定义属性有哪些)
- html5页面传值表(html5的pushstate以及监听浏览器返回事件的实现)
- html5显示中心代码(HTML5中的Web Notification桌面通知功能的实现方法)
- html5的文件类型声明(浅析HTML5中的download属性使用)
- html5功能讲解(Html5定位终极解决方案)
- html5自动静音(html5录音功能实战示例)
- html5 spellcheck属性
- html5标签怎么做(html5用video标签流式加载的实现)
- html5中table属性(Html5之自定义属性data-,dataset)
- html5长按动画效果(HTML5自定义元素播放焦点图动画的实现)
- html5 data属性
- html语法规范解释(浅析HTML5 Landmark)
- css弹出遮罩层页面不可滑动(Html5页面点击遮罩层背景关闭遮罩层)
- h5页面强制关注微信公众号(Html5页面获取微信公众号的openid的方法)
- html5基本结构图(HTML5中的网络存储实现方式)
- 美国倒掉数十万加仑牛奶 上热搜第一,这一幕似曾相识(美国倒掉数十万加仑牛奶)
- 深度 倒牛奶 这一幕为何又在美国上演(深度倒牛奶)
- 美国数十万加仑牛奶倒下水道怎么回事 原因曝光令人心痛(美国数十万加仑牛奶倒下水道怎么回事)
- 探索中国神秘文字(探索中国神秘文字)
- 重温《蜗居》 宋思明选中海藻为红颜知己,纯属巧合,与爱无关(宋思明选中海藻为红颜知己)
- 越南旅游攻略(越南旅游攻略自由行)
热门推荐
- vue做个人页面(vue简易记事本开发详解)
- javascript 自带格式化时间(JavaScript内置日期、时间格式化时间实例代码)
- docker容器关闭后怎么启动(docker批量启动关闭所有容器的操作)
- sql语句查询所有成绩(SQL查询排名函数实例)
- mysql8.0.19.0正确安装图解(MySQL 8.0.23 主要更新一览新特征解读)
- laravel请求耗时(Laravel统计一段时间间隔的数据方法)
- 动画用css3还是js(前端制作动画的几种方式css3,js)
- 什么是iis连接数
- python怎么从数组中取内容(python调用c++ ctype list传数组或者返回数组的方法)
- laravel使用队列(基于laravel where的高级使用方法)