HTML5中的新國際化標籤及屬性

2021-07-30 13:45:11 字數 1605 閱讀 7439

閒言少敘,本文就來談談html5 + css3中的新國際化標籤及其使用情況,以及可能帶來的風險分析吧。

一定會有人驚呼,lang一直都有啊!對!不過寫法略有不同,參考如下示意**。更加簡潔,不是麼?

表ポあa中œé鷗停b逍üßàùªñ

這是乙個測試!

這也不是新標籤啊!……確實,不過相比於之前拖沓冗長,如今的寫法確實清爽。

而html文件中指定charset也只有當http頭部中未包含編碼資訊時才有效,如果http頭部中包含了編碼資訊,則優先使用http頭部指定的編碼而忽略html文件中指定的編碼(如果兩者不同的話)。另外的利好訊息是h5中的預設charset即utf-8,再也不用擔心明示charset問題了!所以用h5再也不會出現亂碼了,對不對?呃……好傻好天真哦,你把當前html另存為ansi再試試。

標籤允許您設定一段文字,使其脫離其父元素的文字方向設定,這點在clarity一文中已經提到過啦。

該標籤強制使用者輸入數字,但對於千分位以及小數點顯示仍不提供原生支援。

數字:目前只有chrome對該標籤集提供支援,在前段直接顯示localtime,ff,ie無任何效果。

date - 選取日、月、年

month - 選取月、年

week - 選取周和年

time - 選取時間(小時和分鐘)

datetime - 選取時間、日、月、年(utc 時間)

datetime-local -選取時間、日、月、年(本地時間)

date日月年:

month月,年:

time小時,分鐘:

datetime時間,日,月,年(utc時間)

另外,h5還用css代替了不少標籤,另外廢除了一些只有個別瀏覽器支援的標籤,例如marquee這樣的走馬燈效果,考慮到都是純功能涉及,本文就不多累述。

捎帶腳,我們也一併來看看通常與h5配套使用的css3,雖然其新增的特性也夠寫一本書了,但與國際化相關的內容不外乎以下幾點。

通重載入字型樣式,它還能夠載入伺服器端的字型檔案,讓客戶端顯示並未安裝的字型。

設定word-wrap: break-word的話,在單詞換行的情況下,用來保持單詞的完整性。一定程度上可以減少l10n測試中的truncation問題。

與 word-wrap 是協同合作,word-wrap設定或檢索當當前行超過指定容器的邊界時是否斷開轉行,而 text-overflow 則設定或檢索當當前行超過指定容器的邊界時如何顯示。我們在父容器設定overflow: hidden, 然後設定「text-overflow」屬性,有「clip」和「ellipsis」兩種可供選擇。"clip"表示直接切割,"ellipsis"表示用省略號代替。而一旦涉及文字溢位,國際化字元的截斷問題又勢必將會扎堆出現。

據筆者個人觀察,靜態頁面部分大抵就是如此了,動態的js則會在後續文章中慢慢跟大家聊。

HTML5新標籤及屬性

html5以進入實際應用,它的強大之處早有耳聞,下面來看一下html5中的新標籤和屬性。html5中的新標籤 定義article 定義頁面內容之外的內容 定義聲音內容 定義圖形 定義命令按鈕 定義列表 定義元素的細節 定義外部互動內容或外掛程式 定義 figure 元素的標題 定義媒介內容的分組,以...

談HTML5和CSS3的國際化支援

html5 css3在國際化支援,解決跨文化和語言問題上有了更大的進步,很好的體現了人性化的設計理念。一 padding start padding end css3的屬性padding start,padding end,用於解決跨語言書寫習慣的padding問題。當排版是從左到右時,paddin...

談HTML5和CSS3的國際化支援

html5 css3在國際化支援,解決跨文化和語言問題上有了更大的進步,很好的體現了人性化的設計理念。一 padding start padding end css3的屬性padding start,padding end,用於解決跨語言書寫習慣的padding問題。當排版是從左到右時,paddin...