<ruby>标签属性详解,HTML中ruby标签的作用
<ruby>标签属性详解,HTML中ruby标签的作用
我们讲解了html5中一个新标签,html5ruby标签,尽管不算是新的,但也是在html5里新的标签,html5ruby标签的界说和具体的用法实例都在这篇文章中,期望我们认真阅览
html5ruby标签的界说和用法:
标签界说ruby注释(中文注音或字符)。
在东亚运用,显现的是东亚字符的发音。
与以及标签一同运用:
ruby元素由一个或多个字符(需要一个解说/发音)和一个提供该信息的rt元素组成,还包含可选的rp元素,界说当浏览器不支撑"ruby"元素时显现的内容。
HTML5标签实例
一个ruby注释:
漢(ㄏㄢˋ)
html5ruby标签的运用(不同浏览器下的兼容性)
由于需要在网页中显现日语的注音,所以运用了该标签.
标签在ruby注释中运用,以界说不支撑ruby元素的浏览器所显现的内容。
HTML5:漢(ㄏㄢˋ)
HTML4:none
标签界说字符(中文注音或字符)的解说或发音。
HTML5:漢ㄏㄢˋ
HTML4:none
标签界说ruby注释(中文注音或字符)。
HTML5:漢(ㄏㄢˋ)
HTML4:none
但是有的浏览器对该标签的支撑不行,原以为低版本的IE下该标签会失效,谁知道从IE6-9都支撑该标签,
另我意想不到的是firefox居然不支撑该标签,chrome下尽管支撑,但也有问题,就是得去掉rp标签,如果
加上则注音不呈现在文字的头部.最终没办法,在页面加载完后,再利用js去掉rp标签.
判别chrome浏览器,替换掉rp标签,但是在chrome浏览器下,字体总有一个固定的最小字体大小,通往后两句脚本能够解决这个问题if(window.navigator.userAgent.indexOf("Chrome")!=-1){
$("ruby").each(
function(i,o){
$(o).html($(o).html().replace(/(.?)(.?)/gmi,"$1"));
});
}
$("html").css("-webkit-text-size-adjust","none");
$("rubyrt").css("font-size","9px");
HTML5注释标签:
今日的HTML5中的ruby标签,觉得挺风趣的,来记载一下。
ruby能够作注释标签,内部有rp和rt标签。
标记界说注释或音标。
告诉那些不支撑ruby元素的浏览器该怎么显现。
标记界说对ruby注释的内容文本。
学完这个标签的榜首反响就是,我有方法给那些不会读的日语单词做假名注释啦!!!
代码如下,来给一句日语做个小注释:
ruby注释标签
p{
text-align:center;
}
月明(つきあ)かり昇る頃
灯る赤提灯(あかちょうちん)
html5ruby标签的效果如下:
还有一些浏览器不能支撑标签,这个时候标签就显得尤其重要,我理解为“人品”的意思。人品好的浏览器就以在上面注释的方式显现出来,就如上图,而人品不好的就需要标签来补充注释。
里边的文本会在浏览器兼容的时候不显现出来,只有里边的文本以在上面注释的方式呈现。而不兼容的状况,里边注释的文本会在后边显现,就如下图,这个时候里边包裹的内容就能够显现出来。
html5ruby标签的效果如下:
提示:支撑"ruby"元素的浏览器不会显现"rp"元素的内容。
HTML4.01与HTML5之间的差异
标签是HTML5的新标签。
浏览器支撑
IE9、Firefox、Opera、Chrome和Safari支撑标签。
注释:IE8或更早版本的IE浏览器不支撑标签。
优秀作品:
最新作品:
评论列表(共64人参与)参与讨论或分享设计作品获得视觉癖积分奖励
业规划的中注册会员
2021-08-09 1:53:7
工大学规划艺术学院 无锡轻工大学规划学院 湖南大学工业规划系 武汉理工大学艺术ash;细微课): 这张图上面是详细的绘画学习递进思路,细微课这个
回复.想和你注册会员
2021-08-09 11:39:5
用户在不习惯游客
2021-08-09 6:4:9
游客93391:<ruby>标签他。 4.左右切割型 画册规划整个版面切割为左右两部分,分别装备文字和图片。假如将切割线虚化处理,或用文字左右重复穿插,左右图与文
回复大学是多注册会员
2021-08-09 17:12:24
iv> ruby元素由一个或多个字符(需要一个解说/发音)和一个提供该信息的rt元素组成,还承受的条件,不能挑选过于重的植物,在设计的时分,应该挑选一些低矮的灌木或者草本植物,这样不仅便于植物的运送,还是也便于打理。
回复