HTML5中的新国际化标签及属性_html标签里的标签文字资源国际化-CSDN博客

本文链接：https://blog.csdn.net/spring1208/article/details/70174392

本文探讨了HTML5和CSS3中与国际化相关的标签及其使用情况，包括`lang`、`charset`、`bdi`等，并分析了它们带来的潜在风险。同时介绍了CSS3在字体加载、文本换行等方面的新特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5问世其实也有很长一段时间了，时至今日，大部分浏览器都号称对其进行了支持，但效果如何呢？随便找个前端问问，标准答案一般会是——呵呵~~~虽然H5对视频、音频、图象、动画，以及同电脑的交互都已经标准化，但要论及完美，不得不说H5还有很长的路要走。

闲言少叙，本文就来谈谈HTML5 + CSS3中的新国际化标签及其使用情况，以及可能带来的风险分析吧。

<lang>

一定会有人惊呼，lang一直都有啊！对！不过写法略有不同，参考如下示意代码。更加简洁，不是么？

<!DOCTYPEHTML>
<htmllang="zh-cn">
<head>
<metacharset="utf-8">
</head>
<body>
<p>表ポあA中Œé鷗停B逍Üßàùªñ</p>
<p>这是一个测试！</p>
</body>
</html>

反复切换lang为zh-cn，en-us，ja-jp，ko-kr，发现除了字体发生了些许变化外，没有其他效果。莫非该标签也属于尸位素餐型的？其实不然，部分浏览器会根据这个属性来提供自动翻译建议，也会自行判断网页语言搜索。特别是网页中包含其他语言的内容，例如比如在某个标签中引用了一段西班牙语内容，或是在网页中插入了一段其他语言的音频、视频，则应该在这些单独的标签上再单独使用lang注明内容使用的语言，从而确保用户接收到本地化的音频或视频。

<charset>

这也不是新标签啊！……确实，不过相比于之前拖沓冗长，如今的写法确实清爽。

<head>
<metacharset="utf-8">
</head>

而html文档中指定charset也只有当HTTP头部中未包含编码信息时才有效，如果HTTP头部中包含了编码信息，则优先使用HTTP头部指定的编码而忽略HTML文档中指定的编码（如果两者不同的话）。另外的利好消息是H5中的默认charset即utf-8，再也不用担心明示charset问题了！所以用H5再也不会出现乱码了，对不对？呃……好傻好天真哦，你把当前html另存为ANSI再试试。

<bdi>

<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置，这点在Clarity一文中已经提到过啦。

<number>

该标签强制用户输入数字，但对于千分位以及小数点显示仍不提供原生支持。

Date Pickers

目前只有Chrome对该标签集提供支持，在前段直接显示localtime，FF，IE无任何效果。

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间（小时和分钟）

datetime - 选取时间、日、月、年（UTC 时间）

datetime-local -选取时间、日、月、年（本地时间）

<label>date日月年：<input type="date" name="user_date"/></label>
<label>month月，年：<input type="month"name="user_month"></label>
<label>time小时，分钟：<input type="time"name="user_time"></label>
<label>datetime时间，日，月，年（UTC时间）<inputtype="datetime" name="user_datetime"></label>

另外，H5还用CSS代替了不少标签，另外废除了一些只有个别浏览器支持的标签，例如marquee这样的走马灯效果，考虑到都是纯功能涉及，本文就不多累述。

捎带脚，我们也一并来看看通常与H5配套使用的CSS3，虽然其新增的特性也够写一本书了，但与国际化相关的内容不外乎以下几点。

Font-face

通过加载字体样式，它还能够加载服务器端的字体文件，让客户端显示并未安装的字体。

Word-wrap

设置word-wrap: break-word的话，在单词换行的情况下，用来保持单词的完整性。一定程度上可以减少L10n测试中的truncation问题。

Text-overflow

与 word-wrap 是协同合作，word-wrap设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示。我们在父容器设置overflow: hidden, 然后设置“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。"clip"表示直接切割，"ellipsis"表示用省略号代替。而一旦涉及文本溢出，国际化字符的截断问题又势必将会扎堆出现。

据笔者个人观察，静态页面部分大抵就是如此了，动态的JS则会在后续文章中慢慢跟大家聊。