h5 给汉字加拼音 加进度条

小编项目上最近设计有个新需求，要给汉纸加拼音，类似于加英文底部小标题类似，毕竟现在咱们中文之博大，大家都在学习和使用中文。下面就让我们学习一下吧，h5现在已经很强大足以应付很多需求。

一、给汉字加拼音
demo一眼便知：

    
        
        
    
    
        
         我们都是优秀的人
          wo men dou shi you xiu de ren
        
    

拼音自动的居中，站汉字的平分位置。

假如我们删掉其中几个拼音，会是怎么样呢，请看效果：

是不是很智能、很方便呢！！！

二、进度条

progress进度条:

话不多说，直接上代码：

    
        
        
    
    
        
         我们都是优秀的人
          wo men dou          
        
        

        

        

        

        修仙进度：
    

是不是很简单很方便呢！

但是呢注意一点：
progress不适合用来表示度量衡，如果想表示度量衡，我们应该使用meter标签代替。

    
        
        
    
    
        
         我们都是优秀的人
          wo men dou          
        
        

        

        

        

        修仙进度：
        

        

         百分之八十
        

        

        

         10%
    

小编认为确实不够美观，如需更加美观，需要自己添加颜色 样式。这里暂时提供一些小的demo.想要了解更多前端知识，关注小编不迷路，哈哈哈哈哈哈！！！

小编不易，如有收获，微信赏小编喝杯娃哈哈

单身狗的 葵花宝典，撩妹必备 敬请关注！