html页面上显示拼音

学习&实践爱好者

已于 2022-06-05 09:27:16 修改

阅读量2.5k

点赞数 1

分类专栏： HTML5与CSS3 前端开发文章标签： html sass vue.js

于 2022-06-02 21:17:15 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/125106963

版权

HTML5与CSS3 同时被 2 个专栏收录

87 篇文章 15 订阅

订阅专栏

前端开发

72 篇文章 4 订阅

订阅专栏

html页面上显示拼音

html页面上面可以用<ruby>标签显示拼音，源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示拼音示例1</title>
</head>
<body>
<h3>
<ruby>显示拼音<rt> xiǎnshìpīnyīn</rt></ruby>
</h3>
</body>
</html>

保存文件名为显示拼音1.html，保存位置，我这儿是：D:\测试文件夹3

用浏览器打开，效果如下：

让拼音和字对齐

拼音的长度是不固定的，要想和汉字一一对应，可以用“一字一拼法”，源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示拼音示例2</title>
</head>
<body>
<h3>
<ruby>显<rt> xiǎn</rt></ruby>
<ruby>示<rt> shì</rt></ruby>
<ruby>拼<rt>pīn</rt></ruby>
<ruby>音<rt> yīn</rt></ruby>
</h3>
</body>
</html>

保存文件名为显示拼音2.html，保存位置，我这儿是：D:\测试文件夹3

用浏览器打开，效果如下：

改进1，设置居中、字体颜色，源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示拼音示例3</title>
</head>
<body>
<h3 style ="text-align:center"> <!-- style ="text-align:center"用来文字居中 -->
<font color="#008252">  <!-- 设置字体颜色"#008252" -->
<ruby>显<rt> xiǎn</rt></ruby>
<ruby>示<rt> shì</rt></ruby>
<ruby>拼<rt>pīn</rt></ruby>
<ruby>音<rt> yīn</rt></ruby>
</h3>
</body>
</html>

保存文件名为显示拼音3.html，保存位置，我这儿是：D:\测试文件夹3

用浏览器打开，效果如下：

改进2、文字缩放效果，源码如下：

<!DOCTYPE>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>显示拼音4：文字自动缩放</title>
</head>
<body>
	<div style="margin: 100px 0 0 -100px;; padding:0; left:50%; top:10%; position: absolute;  border-radius: 20px">
	<p id="box" style="color:blue; "><ruby>显示拼音<rt> xiǎn shì pīn yīn</rt></ruby></p>
	</div>
 
	<script>
		var width=document.body.clientWidth;
		var height=document.body.clientheight;
		var bornX=Math.floor(Math.random()*width+1);
		var bornY=Math.floor(Math.random()*height+1);
		var reachSign;
 
		var box=document.getElementById("box");
 
		var num=0,max=15;
		var direction=true;
		var size;
		function fun(){
 
			if(num>=max){
				direction=!direction;
				num=0;
			}
 
			if(direction==true){
				size = 16+num;
			}else{
				size = 16 + max - num;
			}
			num+=1;
			if(size>=0)
				box.style.fontSize = size + 'px';
			setTimeout(fun,100);
		}
		setTimeout(fun,100);
	</script>
</body>
</html>

保存文件名为显示拼音4：文字缩放效果.html，保存位置，我这儿是：D:\测试文件夹3

用浏览器打开，效果如下：

改进2b、文字缩放效果，源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示拼音4b：文字自动缩放</title>
</head>
<style>
#bigbox{
text-align: center;
}
.font1
{
animation:bian 5s infinite;
-webkit-animation:bian 0.3s infinite;/*Safari and Chrome*/

animation-direction:alternate;   
font-weight: 900;
/* background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); */
background-image:-webkit-linear-gradient(,,,);
-webkit-background-clip:text;
-webkit-text-fill-color:blue;
}
@keyframes bian
{
from{font-size:40px;}
to{font-size:52px;}
}
  @-webkit-keyframes bian /*Safari and Chrome*/
{
from{font-size:40px;}
to{font-size:52px;}
}
</style>
<body>
<div id="bigbox"   style="margin: 100px 0 0 -100px;; padding:0; left:50%; top:10%; position: absolute;  border-radius: 20px">
<span class="font1"> <ruby>显示拼音<rt> xiǎn shì pīn yīn</rt></ruby></span>
</div>
</body>
</html>

保存文件名为显示拼音4b：文字缩放效果.html，保存位置，我这儿是：D:\测试文件夹3

用浏览器打开，效果和上图差不多。