前言
本文主要記錄：
前端開發中，
一個本人錯了好幾年，
看似無關緊要的小錯誤：
HTML 的 lang 屬性設置。
正文
HTML 的 lang 屬性
在HTML中，lang屬性用于指定文檔的語言。
這對于搜索引擎優化（SEO）、屏幕閱讀器和其他輔助技術非常重要。
lang屬性通常只設置在<html>標簽上，也可以設置在特定的元素上以覆蓋全局語言設置。
以下是幾種常見的語言代碼示例：
中文簡體: zh-CN
中文繁體: zh-TW
英語: en
法語: fr
德語: de
日語: ja
如果你的頁面主要是用中文簡體編寫的，你應該使用zh-CN；如果是英文，則使用en。
錯誤原因
剛開始學習 HTML 的時候，
壓根就沒注意到 HTML 的 lang 屬性。
后面使用編輯器自動生成的HTML模板文件中，
要么也沒有給 HTML 標簽寫 lang 屬性，
要么就默認 lang="en"，
現在翻一下使用的Vue框架，
里面為數不多的HTML文件中，
lang屬性也是缺失的。
后面又測試了3個瀏覽器，
發現這的確是一個易錯易忽略的前端開發問題，
所以來記錄一下。
至于怎么發現這個問題的，
還得是Deepseek，
Deepseek生成的源碼中，
html標簽中攜帶了?lang="zh-CN"，
看到的時候我還納悶了，
平時不都是?lang="en" 嗎，
好在沒有偷懶，
沒有因為沒有bug就不去了解，
才發現問題。
測試
Microsoft Edge 瀏覽器
百度首頁
測試結果：html 標簽 lang 屬性未設置。
夸克瀏覽器
瀏覽器首頁
lang="en"
測試結果：html 標簽 lang 屬性設置錯誤。
谷歌瀏覽器
瀏覽器首頁
lang="zh"
測試結果：html 標簽 lang 屬性設置正確。
通義靈碼的解釋
lang="zh"?屬性值是正確的，但可以更加具體。
讓我解釋一下：
lang="zh"?是一個有效的HTML語言屬性值，表示頁面內容使用中文。但是，為了更精確地指定中文的變體，通常建議使用更具體的值：
lang="zh"?- 通用中文lang="zh-CN"?- 簡體中文lang="zh-TW"?- 繁體中文lang="zh-Hans"?- 簡體中文（使用語言標簽的現代標準寫法）lang="zh-Hant"?- 繁體中文（使用語言標簽的現代標準寫法）
在大多數情況下，如果您的網站主要面向中國大陸用戶，使用?lang="zh-CN"?會更加準確和專業。
深入理解HTML 的?lang?屬性
HTML 的?lang?屬性沒有固定的默認值（其默認狀態為“未知”）。這意味著：
- 全局影響：如果未在?
<html>?根元素上指定?lang?屬性，整個文檔的語言將被視為未知。 - 局部影響：對于單個元素（如?
<p>?或?<span>），若未設置?lang?屬性，則其語言由父元素繼承。如果父元素也未指定，則該元素的語言同樣為未知。
對網頁的影響
lang?屬性雖小，卻對網頁的用戶體驗和功能有重要影響：
- 搜索引擎優化（SEO）：搜索引擎依賴?
lang?屬性識別頁面語言。若未設置或設置錯誤，可能影響頁面在搜索結果中的排名。 - 輔助技術：屏幕閱讀器根據?
lang?屬性選擇正確的發音引擎。缺失或錯誤的?lang?值會導致視障用戶獲取信息困難。 - 瀏覽器功能：瀏覽器可能因?
lang?屬性缺失而無法正確判斷頁面語言，從而影響翻譯提示等功能。
最佳實踐
- 明確聲明語言：始終在?
<html>?標簽上設置?lang?屬性，例如?<html lang="zh-CN">。 - 局部語言覆蓋：當頁面包含多語言內容時，在相應元素上設置?
lang?屬性以覆蓋全局設置，例如?<p lang="en">The web is for everyone.</p>。
綜上所述，因為?lang?屬性的默認值為“未知”，所以強烈建議在開發網頁時明確設置該屬性，以提升用戶體驗和網頁的可訪問性。
)
![洛谷P9468 [EGOI 2023] Candy / 糖果題解](http://pic.xiahunao.cn/洛谷P9468 [EGOI 2023] Candy / 糖果題解)
