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 相关文章推荐
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
angular5 httpclient的示例实战
2018/03/12 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
Python实现多线程抓取妹子图
2015/08/08 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
在python里面运用多继承方法详解
2019/07/01 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
大学生最常用的自我评价
2013/12/07 职场文书
市场部管理制度
2014/02/02 职场文书
最新离婚协议书范本
2014/08/19 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
Go语言编译原理之变量捕获
2022/08/05 Golang