参考资料

1. HTML DOM 返回当前的文件和链接的文档之间的关系
2. HTML DOM 返回表单中的enctype属性的值
3. HTML DOM 改变image的src
4. HTML DOM 返回图像映射的某个区域的shape 实例
5. HTML DOM 方法
6. HTML DOM 返回图像映射某个区域的坐标实例
7. HTML DOM 哪个事件发生了？
8. HTML DOM 获取第一个链接ID的实例

HTML DOM hreflang 属性

简介

hreflang 属性用于指定链接文档的语言代码，帮助浏览器和搜索引擎理解目标页面的语言。

标签

主要用于 <a> 和 <link> 标签：

<a href="example.html" hreflang="en">English Version</a>
<link rel="alternate" hreflang="es" href="es/example.html">

用法

// 获取 hreflang 属性值
var lang = document.getElementById("myLink").hreflang;

// 设置 hreflang 属性值
document.getElementById("myLink").hreflang = "fr";

实例

<a id="myLink" href="french.html" hreflang="fr">Version Française</a>

<script>
  // 获取当前 hreflang
  console.log(document.getElementById("myLink").hreflang); // 输出: fr
  
  // 修改 hreflang
  document.getElementById("myLink").hreflang = "de";
</script>

功能

1. 指定链接文档的语言

2. 帮助搜索引擎提供正确的语言版本

3. 改善网站的多语言支持

CSS 扩展

可以通过属性选择器为不同语言的链接添加样式：

/* 为法语链接添加样式 */
a[hreflang="fr"] {
  color: blue;
  font-style: italic;
}

/* 为德语链接添加样式 */
a[hreflang="de"] {
  color: black;
  font-weight: bold;
}