代码

 1 
<!
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
>


 2 
<
html 
xmlns
=”http://www.w3.org/1999/xhtml”
>


 3 


 4 
<
head
>


 5 
<
meta 
content
=”text/html; charset=utf-8″
 http-equiv
=”Content-Type”
 
/>


 6 
<
title
>
css 汉字注音，日本语片假名
</
title
>


 7 
<
meta 
name
=”description”
 content
=”涂聚文,缔友计算机信息技术有限公司,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin　Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.”
/>


 8 
<
meta 
name
=”description”
 content
=”Study,Communicate。 “
/>


 9 
<
meta 
name
=”Robots”
 content
=”all index follow “
/>


10 
<
meta 
name
=”Author”
 content
=”涂聚文”
 
/>


11 
<
meta 
name
=”keywords”
 content
=”Chinea,Guangdong Province,Shenzhen city,Nanshan District,Hi-teach industry Park, geoVI studio,Geovin Du,Systems Solution.勝利は仕事部屋である貴方にご光来を賜ることを歓迎,the original affiliation, Jiangxi Province, the  Ji’an city, YongFeng coutry, Ouyang’s hometown.  Discussion forum, friend reason person, English, Japanese language, Korean language…  The music appreciation, Wan Nian calendar, the English  salon, the trade market, the information, the telecommunication  electron, the electric appliance, the currency foreign exchange, the  news, the book, by talk, the fable, the fairy tale, the novel, the  sketch philosophy, the philosophy, the national studies, the poem, the word, the prose, the tune, manages the creativity, the software  technology, sound, the picture, the image data warehouse, C++, C.NET,  WEB,JAVA, J2EE XML, the HTML, software engineering, the physiological,  keeping in good health, the traveling, lives,geocVi のスタジオはgeovindu, 中国のGuangdong の地 域,Shenzhen のNanShan 地区すなわち高く新しい技術的な企業の 開発の地帯すなわち元の加入すなわちJiangxi の地域すなわち Ji’an 都市, 故郷coutry YongFeng Ouyang’s のへ, あな たを歓迎する。議論のフォーラムすなわち友人の理由人,  英語す なわち日本語の言語すなわち韓国語の言語は… 音楽感謝すなわ ちNian の弱々しいカレンダーすなわち英国の大広間すなわち貿易 市場すなわち情報すなわちテレコミュニケーションの電子すなわ ち電気電気器具すなわち通貨の外国為替すなわちニュースすなわ ち本, 話によって, fable のおとぎ話すなわち小説すなわちスケ ッチの哲学すなわち哲学は, 国民調査する, 詩すなわち単語すな わち散文すなわち調子, 管理する創造性すなわちソフトウェア技 術すなわち音すなわち映像すなわちイメージ?データの倉庫 , C++, C.NET  の網, ジャワ, J2EE XML, html のよい健康すなわ ち移動, 生命で保つソフトウエア工学すなわち生理学を,®geoVI ? ? ™?? geocVi ????? geovindu, ?? ?  Guangdong ??, Shenzhen ? NanShan ??, ?? ??? ?? ?? ?? ?? ??, ?? affiliation, Jiangxi ?? , Ji’an ??, coutry  YongFeng, Ouyang’s?, ?? ? ???.  ?? ????, ?? ?? ??, ??, ?? ??, ? ? ???…  ?? ??, Nian ??? ??, ?? ??, ??  ??, ??, ??? ?? ??, ????, ?? ?? ??, ? ?, ?, ??????,fable ? ???? ??, ??, ???  ??,  ???, ?? ????, ?, ??, ??, ?,  ????  ???, ????? ??, ??, ??,?? ?? ?? , C++, C.NET ? ??, ??, J2EE  XML, HTML ? ??, ??,  ???? ??? ????? ????, ???”
>


12 
        
<
link 
rel
=”stylesheet”
 href
=”css/style.css”
 type
=”text/css”
/>


13 
        
<
link 
rel
=”stylesheet”
 href
=”css/shadow.css”
 type
=”text/css”
/>


14 
<
link 
rel
=”shortcut icon”
 href
=”favicon.ico”
 type
=”image/x-icon”
 
/>


15 
<
link 
rel
=”icon”
 href
=”favicon.ico”
 type
=”image/ico”
 
/>


16 
<
link 
rel
=”bookmark”
 href
=”favicon.ico”
/>
 

17 


18 
<
style 
type
=”text/css”
>


19 


20 


21 


22 


23 
</
style
>


24 


25 
</
head
>


26 


27 
<
body
>


28 
<
ruby
>
中国人民万万岁
<
rt
>
zhōng guó rén mín wàn wàn suì 
</
rt
><
br
/>


29 
缔友计算机信息技术有限公司,締友計算機信息技術有限公司
<
rt
>
dì yǒu jì suàn jī xìn xī jì shù yǒu xiàn gōng sī ,dì yǒu jì suàn jī xìn xī jì shù yǒu xiàn gōng
</
rt
>
    

30 
</
ruby
>


31 
<
ruby
>


32 
<
rbc
><
rb
>
林
</
rb
>
 
<
rb
>
和
</
rb
>
 
<
rb
>
代
</
rb
></
rbc
>


33 
<
rtc
>
 
<
rt
>
はやし
</
rt
><
rt
>
かず
</
rt
><
rt
>
よ
</
rt
>
 
</
rtc
>


34 
</
ruby
>


35 
<
ruby
>


36 
<
rbc
><
rb
>
民政局
</
rb
></
rbc
>


37 
<
rtc
><
rt
>
みんせいきょく
</
rt
></
rtc
>


38 
<
rtc
><
rt
>
ガバメント?セクシヨン
</
rt
></
rtc
>


39 
</
ruby
>


40 
<
ruby 
style
=”ruby-align: 
right; ruby-position: above; ruby-overhang: whitespace”
>
Ruby base content
<
rt
>
Ruby text
</
rt
></
ruby
>


41 
    
<
ruby
>


42 
    
<
span 
style
=”font-family:Verdana; font-size:14pt”
>
This is the base text.
</
span
>


43 
    
<
rt
>


44 
    
<
span 
style
=”font-family:Times New Roman; font-size: 8pt; color:red”
>


45 
    This is the ruby text
</
span
>


46 
    
</
ruby
>


47 
    

48 
    
<
ruby
>


49 
  
<
rbc
>


50 
    
<
rb
>
10
</
rb
>


51 
    
<
rb
>
31
</
rb
>


52 
    
<
rb
>
2002
</
rb
>


53 
  
</
rbc
>


54 
  
<
rtc
>


55 
    
<
rt
>
Month
</
rt
>


56 
    
<
rt
>
Day
</
rt
>


57 
    
<
rt
>
Year
</
rt
>


58 
  
</
rtc
>


59 
  
<
rtc
>


60 
    
<
rt 
rbspan
=”3″
>
Expiration Date
</
rt
>


61 
  
</
rtc
>


62 
</
ruby
><
ruby
><
rb
>
你
</
rb
><
rp
>
(
</
rp
><
rt
>
nǐ
</
rt
><
rp
>
)
</
rp
></
ruby
>
 

63 
<
ruby
><
rb
>
我
</
rb
><
rp
>
(
</
rp
><
rt
>
wǒ
</
rt
><
rp
>
)
</
rp
></
ruby
>


64 
<
br
/>


65 
参考网址：

66 
http://www.w3.org/International/articles/ruby/#Slide0140

67 
http://www.w3.org/International/tutorials/ruby/en/all.html

68 
http://www.css3.com/css-ruby-align/

69 
http://www.css3.com/css-ruby-overhang/comment-page-1/#comment-15977

70 
http://www.w3.org/TR/css3-ruby/

71 
http://htmlruby.codeplex.com/

72 


73 
 firefox浏览器下载附件：HTML Ruby或是 XHTML Ruby Support

74 
</
body
>


75 


76 
</
html
>


77 

 

实例效果：http://geovindu.blog.163.com/blog/static/9827808201002485624350/

摘于《中国历代咏月诗词全集》河南文艺出版社 邓国光 曲奉先编

秋风清 李白 (qiū fēng qīng lǐ bái)

秋风清，秋月明。落叶聚还散，寒鸦栖复惊。相思相见知何日，此时此夜难为情 (qiū fēng qīng ，qiū yuè míng 。luò yè jù hái sàn ，hán yā qī fù jīng 。xiàng sī xiàng jiàn zhī hé rì ，cǐ shí cǐ yè nán wéi qíng 。)

虞美人 李煜 ( yú měi rén lǐ yù )

春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中。 ( chūn huā qiū yuè hé shí le ，wǎng shì zhī duō shǎo 。xiǎo lóu zuó yè yòu dōng fēng ，gù guó bú kān huí shǒu yuè míng zhōng 。)

雕阑玉砌应犹在，只是朱颜改。问君能有几多愁，恰似一江春水向东流。 ( diāo lán yù qì yīng yóu zài ，zhī shì zhū yán gǎi 。wèn jun1 néng yǒu jǐ duō chóu ，qià sì yī jiāng chūn shuǐ xiàng dōng liú 。)

乌夜啼 李煜 ( wū yè tí lǐ yù )

无言独上西楼，月如钩。寂寞梧桐深院、锁深秋。 ( wú yán dú shàng xī lóu ，yuè rú gōu 。jì mò wú tóng shēn yuàn 、suǒ shēn qiū 。)

剪不断，理还乱，是离愁。别是一般滋味、在心头。 ( jiǎn bú duàn ，lǐ hái luàn ，shì lí chóu 。bié shì yī bān zī wèi 、zài xīn tóu 。)

虞美人 晏几道 ( yú měi rén yàn jǐ dào )

曲阑干外天如水，昨夜还曾倚。初将明月比佳期。长向月圆时候、望人归 ( qǔ lán gàn wài tiān rú shuǐ ，zuó yè hái céng yǐ 。chū jiāng míng yuè bǐ jiā qī 。zhǎng xiàng yuè yuán shí hòu 、wàng rén guī)

罗衣著破前香在，旧意谁教改。一春离恨懒调弦。犹有两行闲泪、宝筝前。 ( luó yī zhe pò qián xiāng zài ，jiù yì shuí jiāo gǎi 。yī chūn lí hèn lǎn diào xián 。yóu yǒu liǎng háng xián lèi 、bǎo zhēng qián 。)

前调 晏几道 ( qián diào yàn jǐ dào )

当时月下分处，依旧凄凉。也会思量。不道孤眠夜更长。 ( dāng shí yuè xià fèn chù ，yī jiù qī liáng 。yě huì sī liàng 。bú dào gū mián yè gèng zhǎng 。)

泪痕搵遍鸳鸯枕，重绕回廊。月上东窗。长到如今欲断肠。 ( lèi hén wèn biàn yuān yāng zhěn ，zhòng rào huí láng 。yuè shàng dōng chuāng 。zhǎng dào rú jīn yù duàn cháng 。)

阳关曲 苏轼 ( yáng guān qǔ sū shì)

暮云收尽溢清寒，银汉无声转玉盘。此生此夜不长好，明月明年何处看。 ( mù yún shōu jìn yì qīng hán ，yín hàn wú shēng zhuǎn yù pán 。cǐ shēng cǐ yè bú zhǎng hǎo ，míng yuè míng nián hé chù kàn 。)

减字木兰花 春月 苏轼 ( jiǎn zì mù lán huā chūn yuè sū shì)

春庭月午，摇荡香醪光欲舞。步转回首廊，半落梅花婉娩香。 ( chūn tíng yuè wǔ ，yáo dàng xiāng láo guāng yù wǔ 。bù zhuǎn huí shǒu láng ，bàn luò méi huā wǎn miǎn xiāng 。)

轻云薄雾，总是少年行乐处。不似秋光，只与离人照断肠。 ( qīng yún báo wù ，zǒng shì shǎo nián háng lè chù 。bú sì qiū guāng ，zhī yǔ lí rén zhào duàn cháng 。)

虞美人 苏轼 ( yú měi rén sū shì)

持杯遥劝天边月：愿月圆无缺。持杯复更劝花枝：愿花枝长在、莫离披。 ( chí bēi yáo quàn tiān biān yuè ：yuàn yuè yuán wú quē 。chí bēi fù gèng quàn huā zhī ：yuàn huā zhī zhǎng zài 、mò lí pī 。)

持杯月下花前醉，休问荣枯事。此欢能有几人知？对酒逢花不饮、待何时。 ( chí bēi yuè xià huā qián zuì ，xiū wèn róng kū shì 。cǐ huān néng yǒu jǐ rén zhī ？duì jiǔ féng huā bú yǐn 、dài hé shí 。)

水调歌头 丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由 苏轼 ( shuǐ diào gē tóu bǐng chén zhōng qiū ，huān yǐn dá dàn ，dà zuì ，zuò cǐ piān ，jiān huái zǐ yóu sū shì )

明月几时有，把酒问青天。不知天上宫阙，今夕是何年。 ( míng yuè jǐ shí yǒu ，bǎ jiǔ wèn qīng tiān 。bú zhī tiān shàng gōng què ，jīn xī shì hé nián 。)

我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。 (wǒ yù chéng fēng guī qù ，yòu kǒng qióng lóu yù yǔ ，gāo chù bú shèng hán 。qǐ wǔ nòng qīng yǐng ，hé sì zài rén jiān 。 )

转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？ ( zhuǎn zhū gé ，dī qǐ hù ，zhào wú mián 。bú yīng yǒu hèn ，hé shì zhǎng xiàng bié shí yuán ？)

人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。 (rén yǒu bēi huān lí hé ，yuè yǒu yīn qíng yuán quē ，cǐ shì gǔ nán quán 。dàn yuàn rén zhǎng jiǔ ，qiān lǐ gòng chán juān 。 )

菩萨蛮 新月 苏轼 ( pú sà mán xīn yuè sū shì)

画檐初挂弯弯月，孤光未满先忧缺。遥认玉帘钩，天孙梳洗楼。 ( huà yán chū guà wān wān yuè ，gū guāng wèi mǎn xiān yōu quē 。yáo rèn yù lián gōu ，tiān sūn shū xǐ lóu 。)

佳人言语好，不愿新巧。此恨固应知，愿人无别离。 (jiā rén yán yǔ hǎo ，bú yuàn xīn qiǎo 。cǐ hèn gù yīng zhī ，yuàn rén wú bié lí 。 )

Firefox浏览器没有注音效果，请添加附件：HTML Ruby或是 XHTML Ruby Support

看不清拼音可以：按住Ctrl键，转动鼠标中间滑动键，它会自动变大缩小字体，

每个浏览器基本都有这个快捷键。

 

 

charts for tonal pinyin in Unicode Web pages

 

a

ā ā

á á

ǎ ǎ

à à

e

ē ē

é é

ě ě

è è

i

ī ī

í í

ǐ ǐ

ì ì

o

ō ō

ó ó

ǒ ǒ

ò ò

u

ū ū

ú ú

ǔ ǔ

ù ù

ü

ǖ ǖ

ǘ ǘ

ǚ ǚ

ǜ ǜ