HTML5给汉字加拼音收起展开组件的实现代码


Posted in HTML / CSS onApril 08, 2020

来看看 HTML 的历史和规范常识。HTML 规范是 W3C 与 WHATWG 合作共同产出的,HTML5 因此也不例外。其中:

  • W3C 指 World Wide Web Consortium
  • WHATWG 指 Web Hypertext Application Technology Working Group

说好听了是“合作产出”,但其实更像是“HTML5 有两套规范”。但话说天下大势合久必分,分久必合,如今(就在前几天,2018.5.29)它们又表示将会开发单一版本的 HTML 规范。

HTML5新增的标签和功能,常规的我相信大家都知道,这里就不??铝耍?饫锝樯芰礁龃蠹铱赡懿恢?赖墓δ埽?苁涤茫?/p>

给汉字加拼音

代码如下

<ruby>
  做工程师不做码农
  <rt>zuo gong cheng shi bu zuo ma nong</rt>
</ruby>

效果如下

HTML5给汉字加拼音收起展开组件的实现代码

展开收起组件

简单几行代码

<details>
  <summary>公众号《前端外文精选》</summary>
  欢迎大家关注我的公众号,专注大前端、全栈、程序员成长的公众号!如果对你有所启发和帮助,可以点个关注、收藏,也可以留言讨论,这是对作者的最大鼓励。
  作者简介:Web前端工程师,全栈开发工程师、持续学习者。
</details>

就可以实现如下效果

HTML5给汉字加拼音收起展开组件的实现代码

是不是很棒啊 ?

以往要实现这样的内容,我们都必须依靠 JavaScript 实现。现在来看,HTML 也变得更加具有“可交互性”。

原生进度条和度量

progress 标签显示进度:

HTML5给汉字加拼音收起展开组件的实现代码

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

meter 用来度量给定范围(gauge)内的数据:

<meter value="3" min="0" max="10"></meter> 十分之三<br>
<meter value="0.6"></meter> 60%

Chrome显示效果如下

HTML5给汉字加拼音收起展开组件的实现代码

本文示例效果和完整代码已放在我的博客小码页面。

HTML5给汉字加拼音收起展开组件的实现代码

总结

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

HTML / CSS 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 #HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 #HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 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
You might like
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
php微信开发之谷歌测距
2018/06/14 PHP
php压缩文件夹最新版
2018/07/18 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python实现移位加密和解密
2019/03/22 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
python hough变换检测直线的实现方法
2019/07/12 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
python实现自动打卡的示例代码
2020/10/10 Python
python中如何使用虚拟环境
2020/10/14 Python
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
应届毕业生如何写求职信
2014/02/16 职场文书
秋冬农业生产标语
2014/10/09 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
锅炉工岗位职责
2015/02/13 职场文书
农业项目合作意向书
2015/05/08 职场文书
无罪辩护词范文
2015/05/21 职场文书
消防宣传语大全
2015/07/13 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python