html页面上显示拼音
生活随笔
收集整理的這篇文章主要介紹了
html页面上显示拼音
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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页面上显示拼音的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 常用的机器学习数据挖掘知识点【转】
- 下一篇： tomcat运行问题解决方法