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

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

html页面上显示拼音相关推荐

[html] 如何在页面上显示Emoji表情？
[html] 如何在页面上显示Emoji表情? 如果客户端发送了一个带条件的GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个304状态码. ...
python网页提交表单_Html表单——使用python在web页面上显示用户提交的数据
这个例子展示了如何使用Python完成同样的事情--在web页面上显示提交的数据. 环境配置: win10.Anaconda3 问题: 1.在安装Anaconda3的时候出现了很多问题,经建议安装旧版 ...
php怎么显示gif图片,如何让伪进度条在页面上显示成gif图像
在工作中为了方便,我们需要加上一些效果,这篇文章就和大家讲讲伪进度条如何在页面上显示gif图像,感兴趣的朋友可以参考一下,希望可以帮助到你. 最近做的一个项目中,点击某个操作后,由于后台做的事情比较多 ...
ASP.NET 用 FlexPaper 在页面上显示 PDF 文件
必要条件演示 ASP.NET 用 FlexPaper 在页面上显示 PDF 文件软件环境解决方案结构简单显示 SWF 文件上传并显示 PDF 文件常见问题参考资料其实,虽说是显示 PD ...
jsp 图片上传到oracle,jsp上传图片到数据库(oracle),并能在页面上显示解决办法
jsp上传图片到数据库(oracle),并能在页面上显示解决办法 jsp上传图片到数据库(oracle),并能在页面上显示解决办法日期:2014-05-18 浏览次数:20341 次 jsp上传图片 ...
杜威分类法的分类规则_如何在父分类法的存档页面上显示子分类法
杜威分类法的分类规则 In the past we have shown you how to display subcategories on category pages in WordPress ...
php 导出csv文件bom,php 读取 csv 文件后, uft8bom 导致在页面上显示出现问题的解决方法...
php 读取 csv 文件后, uft8bom 导致在页面上显示出现问题的解决方法 date.csv: "ID""NAME""EMAIL" ...
csv乱码 ftp_php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
date.csv:"ID" "NAME" "EMAIL" "1" "小明" "xm@163 ...
html输出计算结果到文本框,在文本框中输入两个操作数和选择运算符后，在页面上显示输出结果...
需求说明: 在文本框中输入两个操作数和选择运算符后,在页面上显示输出结果实现思路: 单击"计算"按钮后,删除两个文本框左右两边的空格,删除空格后,判断输入框中是否都输入了内容,只 ...
Shopify如何在产品页面上显示SKU
SKU(库存单位)是数字,通常是字母数字,用于帮助识别产品和跟踪库存.如果商店使用SKU,则会为每个单独的产品变型分配一个唯一的编号.您可以通过编辑主题代码在产品页面上显示变体的SKU编号. 在添加任 ...

html页面上显示拼音

html页面上显示拼音

html页面上显示拼音相关推荐

最新文章

热门文章