HTML5中的新国际化标签及属性

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

 

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

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

表ポあA中Œé鷗停B逍Üßàùªñ
这是一个测试！

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

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

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

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

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

数字：

Date Pickers

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

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

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

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

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

date日月年：
month月，年：
time小时，分钟：
datetime时间，日，月，年（UTC时间）

 

另外，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则会在后续文章中慢慢跟大家聊。