html标签中的lang属性

本文详细介绍了HTML中的lang属性,解释了其在不同上下文中如何声明页面或元素的语言类型,包括适用于不同语言和方言的代码规范。

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

写在html标签中的lang属性作用:声明当前页面的语言类型。

如:

 <html lang='en'></html> //英文

 <html lang='zh'></html> //中文
 <html lang='ja'></html> //日文
 <html lang='en-us'></html> //美式英文
注意:lang属性中的语言代码不区分大小写
 <html lang='en-us'></html> //英文
 <html lang='en-US'></html> //英文
上面的两行代码一样的效果。

另外,lang属性也可以加到普通标签上。

如:

<div lang='en'>this is English .</div>


lang 属性 -- HTML语言声明属性


示例

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
  • en定义语言为英语
  • zh-CN定义语言为中文

说明:

  • 如果网页定义为XHTML1.1或者XML格式,那么可以使用xml:lang属性(因为xml:lang属性是在XML中确定语言信息的标准用法).
  • 如果网页使用HTML格式,那么应该同时使用xml:lang和lang属性.

定义和用法

lang 属性规定元素内容的语言。


HTML 4.01 与 HTML5之间的差异

在 HTML5 中, lang 属性可用于任何的 HTML 元素 (它会验证任何HTML元素。但不一定是有用)。

在 HTML 4.01 中, lang 属性不能用于: <base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, 和 <script>。


语法

<element lang="language_code">



关于网页头部lang属性:单一的cn和zh-CN均属于废弃用法。


问题是:zh已经不是语言code,而是macrolang,能作为语言code的是:cmn(国语)、yue(粤语)、wuu(吴语)等,建议写成zh-cmn而不是只写cmn,主要考虑兼容性(至少可以匹配zh)。

zh-Hans/zh-Hant表示简体和繁体。
zh-cmn-Hans表示简体中文书写的国语。

如何标记的例子

1,简体中文页面:html lang=zh-cmn-Hans
2,繁体中文页面:html lang=zh-cmn-Hant
3,英语页面:htm lang=en

4,音频—国语演唱:audio lang=zh-cmn
5,音频—粤语演唱:audio lang=zh-yue
注意4,5为音频,不应加上Hans/Hant标记

需要加地区代码的情况比较少,除非为了强调不同地区汉语使用差异,如:

zh-cmn-Hans-CN 普通话 (简体, 中国大陆) 

zh-cmn-Hant-TW 普通话 (繁体, 台湾)
<p lang="zh-cmn-Hans">
             <b lang="zh-cmn-Hans-CN">菠萝</b>
             <b lang="zh-cmn-Hant-TW">鳳梨</b>
</p>




### HTML `lang` 属性详解 #### 定义与作用 `lang` 属性规定文档或元素的自然语言。这有助于浏览器解析内容并正确显示文本,对于屏幕阅读器和其他辅助技术也非常重要。通过指定语言,搜索引擎可以更好地索引页面,从而提高SEO效果[^1]。 #### 基本语法 该属性可以直接应用于 `<html>` 标签来定义整个文档的语言,也可以应用到任何其他HTML元素上以覆盖特定部分的语言设置。其基本形式如下: ```html <html lang="language-code"> ... </html> ``` 其中 `language-code` 是ISO 639-1中的两个字母组成的语言代码,如 `"en"` 表示英语;还可以加上地区子码形成更具体的方言表示方式,比如 `"zh-CN"` 表示简体中文(中国)。 #### 实际案例展示 下面是一个完整的HTML实例,展示了如何利用 `lang` 属性以及配合CSS样式表实现不同语言文字的不同颜色渲染[^2]: ```html <!DOCTYPE html> <html> <head> <title>Lang Attribute Example</title> <meta charset="UTF-8"> <style type="text/css"> /* 设置英文链接的颜色 */ a:lang(en-US), a:lang(en-GB) { color: blue; } /* 设置中文链接的颜色 */ a:lang(zh-CN) { color: red; } </style> </head> <body> <!-- 英美地区的超链接 --> <p><a lang="en-US" href="#">This is an English (US) link.</a></p> <p><a lang="en-GB" href="#">This is an English (UK) link.</a></p> <!-- 中文地区的超链接 --> <p><a lang="zh-CN" href="#">这是一个中文链接。</a></p> </body> </html> ``` 在这个例子中,不仅设置了不同的语言环境下的链接颜色,还体现了多国语言支持的能力。当访问者浏览此网页时,会看到根据不同语言设定而变化的文字呈现风格。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值