1、首先我们先新建一个html文档，注意这里用的是html5，如下图所示
2、接下来很多人的做法肯定是声明两个div，一行放拼音，一行放文字，如下图所示
3、上面的做法是可以的，但是如果汉字很多的话就会出现了问题，如下图所示
4、运行页面程序以后我们可以看到拼音和汉字不对齐了，如下图所示
5、接下来我们可以运用ruby标签来实现了，如下图所示，注意嵌套的写法
6、运行页面程序以后我们就可以看到如下图所示的效果了，这个时候汉字和拼音都是对齐的了，如下图所示
7、综上所述，在HTMl中给汉字添加拼音还是主要用ruby标签去实现，不过要注意兼容性