HTML:lang属性作用

news2024/11/23 20:02:46

lang作用

  • 用法
  • 常见语言代码
  • 优点
  • 示例
    • 结构
    • 效果
    • 说明
    • 分析
      • HTML 基础结构
      • 导航栏
      • 内容部分
      • 总结
  • 扩展

用法

  1. HTML 文档级别:
    <html> 标签上使用 lang 属性,指定整个文档的语言。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example Page</title>
    </head>
    <body>
        <p>Hello, world!</p>
    </body>
    </html>
    
  2. 元素级别:
    可以在任何 HTML 元素上使用 lang 属性来指定该元素的语言。这样做可以覆盖文档级别的语言设置。

    <p lang="fr">Bonjour, tout le monde!</p>
    

常见语言代码

  • 英语: en
  • 简体中文: zh-CN
  • 繁体中文: zh-TW
  • 西班牙语: es
  • 法语: fr
  • 德语: de

优点

  1. 可访问性:
    屏幕阅读器和其他辅助技术可以根据 lang 属性调整发音和其他语言相关的设置,从而提高内容的可访问性。

  2. SEO(搜索引擎优化):
    搜索引擎可以根据 lang 属性更好地理解网页的语言,从而在相关语言的搜索结果中提供更好的排名。

  3. 翻译工具:
    在线翻译工具和浏览器内置的翻译功能可以根据 lang 属性识别内容的语言,从而提供更准确的翻译。

示例

结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Multilingual Example</title>
</head>
<body>
<header>
  <h1>Welcome to Our Multilingual Website</h1>
  <nav>
    <ul>
      <li><a href="#english" lang="en">English</a></li>
      <li><a href="#spanish" lang="es">Español</a></li>
      <li><a href="#french" lang="fr">Français</a></li>
      <li><a href="#chinese" lang="zh-CN">中文</a></li>
      <li><a href="#japanese" lang="ja">日本語</a></li>
      <li><a href="#german" lang="de">Deutsch</a></li>
    </ul>
  </nav>
</header>

<section id="english" lang="en">
  <h2>Hello, world!</h2>
  <p>Welcome to our website. We provide information in multiple languages for your convenience.</p>
</section>

<section id="spanish" lang="es">
  <h2>¡Hola, mundo!</h2>
  <p>Bienvenido a nuestro sitio web. Proporcionamos información en varios idiomas para su conveniencia.</p>
</section>

<section id="french" lang="fr">
  <h2>Bonjour, tout le monde!</h2>
  <p>Bienvenue sur notre site web. Nous fournissons des informations en plusieurs langues pour votre commodité.</p>
</section>

<section id="chinese" lang="zh-CN">
  <h2>你好,世界!</h2>
  <p>欢迎访问我们的网站。我们为您的方便提供多种语言的信息。</p>
</section>

<section id="japanese" lang="ja">
  <h2>こんにちは、世界!</h2>
  <p>私たちのウェブサイトへようこそ。私たちはあなたの利便性のために複数の言語で情報を提供しています。</p>
</section>

<section id="german" lang="de">
  <h2>Hallo, Welt!</h2>
  <p>Willkommen auf unserer Website. Wir bieten Informationen in mehreren Sprachen für Ihre Bequemlichkeit an.</p>
</section>

</body>
</html>

效果

在这里插入图片描述

说明

  1. 导航栏:
    使用 lang 属性为每个语言链接标记语言。这有助于屏幕阅读器用户正确发音并理解每个链接的内容。

  2. 内容部分:
    每个内容部分都有不同的语言标记,可以帮助浏览器、翻译工具和搜索引擎更好地处理和显示内容。

  3. 表单:
    表单中的标签和按钮也标记了语言,这对于多语言网站尤为重要。这样可以确保表单字段的标签和按钮的语言与用户期望的一致。

分析

HTML 基础结构

首先,定义了文档的基本结构,包括 <!DOCTYPE html> 声明和基本的 HTML 标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multilingual Example</title>
</head>
<body>
  • <!DOCTYPE html>: 声明文档类型为 HTML5。
  • <html lang="en">: lang="en" 指定整个文档的默认语言为英语。
  • <meta charset="UTF-8">: 定义字符编码为 UTF-8,确保网页能正确显示各种语言字符。
  • <title>: 设置网页的标题。

导航栏

<header>
    <h1>Welcome to Our Multilingual Website</h1>
    <nav>
        <ul>
            <li><a href="#english" lang="en">English</a></li>
            <li><a href="#spanish" lang="es">Español</a></li>
            <li><a href="#french" lang="fr">Français</a></li>
            <li><a href="#chinese" lang="zh-CN">中文</a></li>
            <li><a href="#japanese" lang="ja">日本語</a></li>
            <li><a href="#german" lang="de">Deutsch</a></li>
        </ul>
    </nav>
</header>
  • <header>: 包含导航栏的头部区域。
  • <nav>: 包含导航链接的导航栏。
  • <ul>: 无序列表,用于列出导航链接。
  • <a href="#section" lang="xx">: 每个链接都使用了 lang 属性来指定该链接的语言,例如 lang="es" 表示链接文本是西班牙语。

内容部分

每个部分对应一种语言,并通过 idlang 属性标记。

<section id="english" lang="en">
    <h2>Hello, world!</h2>
    <p>Welcome to our website. We provide information in multiple languages for your convenience.</p>
</section>

<section id="spanish" lang="es">
    <h2>¡Hola, mundo!</h2>
    <p>Bienvenido a nuestro sitio web. Proporcionamos información en varios idiomas para su conveniencia.</p>
</section>

<section id="french" lang="fr">
    <h2>Bonjour, tout le monde!</h2>
    <p>Bienvenue sur notre site web. Nous fournissons des informations en plusieurs langues pour votre commodité.</p>
</section>

<section id="chinese" lang="zh-CN">
    <h2>你好,世界!</h2>
    <p>欢迎访问我们的网站。我们为您的方便提供多种语言的信息。</p>
</section>

<section id="japanese" lang="ja">
    <h2>こんにちは、世界!</h2>
    <p>私たちのウェブサイトへようこそ。私たちはあなたの利便性のために複数の言語で情報を提供しています。</p>
</section>

<section id="german" lang="de">
    <h2>Hallo, Welt!</h2>
    <p>Willkommen auf unserer Website. Wir bieten Informationen in mehreren Sprachen für Ihre Bequemlichkeit an.</p>
</section>
  • <section id="language" lang="xx">: 每个部分都使用 lang 属性来指定内容的语言,并使用 id 属性用于导航链接的锚点。
  • <h2><p>: 标题和段落,显示对应语言的内容。

总结

通过使用 lang 属性,可以提高网页的可访问性和用户体验。以下是一些关键点:

  1. 文档和元素的语言标记: lang 属性可以应用于整个文档或单个元素。
  2. 辅助工具支持: 屏幕阅读器和翻译工具可以根据 lang 属性正确处理内容。
  3. 多语言支持: 网站可以包含多种语言的内容,并通过导航链接方便用户切换。
  4. SEO 优化: 搜索引擎可以根据 lang 属性更好地理解和索引网页内容。

扩展

  • 语言切换功能: 实现动态语言切换功能,可以让用户选择语言,并即时加载相应语言的内容。
  • SEO: 在 <head> 部分添加 meta 标签,为搜索引擎提供更多语言信息。
<head>
    <meta charset="UTF-8">
    <title>Multilingual Example</title>
    <meta name="description" content="A multilingual website example in English, Spanish, French, Chinese, Japanese, and German.">
    <meta name="keywords" content="multilingual, website, example, English, Spanish, French, Chinese, Japanese, German">
</head>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1942328.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

(C++) 文件读写基础

文章目录 &#x1f5c2;️前言&#x1f4c4;ref&#x1f4c4;访问标记&#x1f5c3;️流打开模式类型 &#x1f5c2;️Code&#x1f4c4;demo&#x1f4c4;分点讲解&#x1f5c3;️打开/关闭&#x1f5c3;️写&#x1f5c3;️读&#x1f5c3;️状态函数 &#x1f5c2;️END&…

javascript 的执行上下文与作用域

目录 1. 初步了解 上下文&#xff08;context&#xff09;2. 全局上下文(global context)3. 上下文栈 (context stack)4. 作用域链( scope chain)5. 作用域(scope)6. 作用域链增强 1. 初步了解 上下文&#xff08;context&#xff09; 上下文(context) 全称 执行上下文 (execut…

linux中RocketMQ安装(单机版)及springboot中的使用

文章目录 一、安装1.1、下载RocketMQ1.2、将下载包上传到linux中&#xff0c;然后解压1.3、修改runserver.sh的jvm参数大小&#xff08;根据自己服务器配置来修改&#xff09;1.4、启动mqnamesrv &#xff08;类似于注册中心&#xff09;1.5、修改runbroker.sh的jvm参数大小&am…

【Linux】进程信号 --- 信号处理

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

el-table列的显示与隐藏

需求&#xff1a;实现 表字段的显示与隐藏。效果图 代码实现 写在前面 首先 我部分字段有自定义的排序逻辑&#xff0c;和默认值或者 数据的计算 所以是不能简单的使用 v-for 循环column 。然后 我需要默认展示一部分字段&#xff0c;并且 当表无数据时 提示不能 显示隐藏 …

HTTP 缓存

缓存 web缓存是可以自动保存常见的文档副本的HTTP设备&#xff0c;当web请求抵达缓存时&#xff0c;如果本地有已经缓存的副本&#xff0c;就可以从本地存储设备而不是从原始服务器中提取这个文档。使用缓存有如下的优先。 缓存减少了冗余的数据传输缓存环节了网络瓶颈的问题…

学习大数据DAY21 Linux基本指令2

目录 思维导图 搜索查看查找类 find 从指定目录查找文件 head 与 tail 查看行 cat 查看内容 more 查看大内容 grep 过滤查找 history 查看已经执行过的历史命令 wc 统计文件 du 查看空间 管道符号 | 配合命令使用 上机练习 4 解压安装类 zip unzip 压缩解压 tar …

google 浏览器插件开发简单学习案例:TodoList

参考&#xff1a; google插件支持&#xff1a; https://blog.csdn.net/weixin_42357472/article/details/140412993 这里是把前面做的TodoList做成google插件&#xff0c;具体网页可以参考下面链接 TodoList网页&#xff1a; https://blog.csdn.net/weixin_42357472/article/de…

Web前端:HTML篇(一)

HTML简介&#xff1a; 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点&#xff0c;HTML 运行在浏览器上&#xff0c;由浏览器…

android studio中svn的使用

第一步&#xff0c;建立一个项目。 第二步&#xff0c;share project。 第三步&#xff0c;选择存放的位置&#xff0c;然后添加提交信息&#xff0c;最后点击share。这样就可以在svn上面看到一个空的项目名称。 第四步&#xff0c;看到文件变成了绿色&#xff0c;点击commit图…

驾驭云原生日志洪流:高效分析与管理的策略集

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《未来已来&#xff1a;云原生之旅》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、日志管理在云原生架构中的重要性 2、云原生环境的特…

Open-TeleVision复现及机器人迁移

相关信息 标题 Open-TeleVision: Teleoperation with Immersive Active Visual Feedback作者 Xuxin Cheng1 Jialong Li1 Shiqi Yang1 Ge Yang2 Xiaolong Wang1 UC San Diego1 MIT2主页 https://robot-tv.github.io/链接 https://robot-tv.github.io/resources/television.pdf代…

Java | Leetcode Java题解之第273题整数转换英文表示

题目&#xff1a; 题解&#xff1a; class Solution {String[] singles {"", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"};String[] t…

Linux下安装Redis(超简单)

1.下载 选着自己需要下载的版本后&#xff0c;右击选择复制链接&#xff0c;然后利用命令进行下载&#xff0c;进入Xshell控制台&#xff0c;输入wget将复制的链接粘帖上&#xff0c;这里我选择的是6.0.6版本。 命令如下&#xff1a; wget https://download.redis.io…

QML学习——Qt Quick Controls 1 Examples Calendar/FileSystemBrowser(九)

02 File System Browser Show: Notes: 使用了自定义的继承自QFileSystemModel的类&#xff0c;在原有的基础上新加了角色(role)&#xff0c;并且重写了QFileSystemModel中的data函数、及角色和字符串描述对应的哈希表&#xff1b; 使用系统的文件资源管理器打开该文件的链接&…

资产拆分、资产分割的操作,事务代码ABUMN

在公司常见的业务运行中可能会有这样的场景&#xff1a;资产A 需要拆分成资产B 和 C。这个时候就需要使用到资产分割或者资产转移的操作 &#xff0c;事务代码ABUMN。 我司的实际业务场景是这样的&#xff0c;当初想分别入账给A和B的资产。一年之后发现&#xff0c;当时操作错误…

高清录屏无压力,这四款软件助你轻松搞定

现在不论是教育、娱乐还是工作电脑怎么录屏都成为这些领域里不可或缺的一部分。掌握录屏软件&#xff0c;也能成为个人的软实力之一哦&#xff0c;下面我介绍几款可以快速上手的录屏软件来为你增加实力。 1、福晰REC大师 这款软件我是觉得他是我最快上手的一个工具&#xff0…

Unity UGUI 之 Dropdown

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 1.Dropdown是什么 下拉列表 2.重要参数 首先这些参数和Button差不多&#xff0c;不过多…

昇思MindSpore学习入门-格式转换

MindSpore中可以把用于训练网络模型的数据集&#xff0c;转换为MindSpore特定的格式数据&#xff08;MindSpore Record格式&#xff09;&#xff0c;从而更加方便地保存和加载数据。其目标是归一化用户的数据集&#xff0c;并进一步通过MindDataset接口实现数据的读取&#xff…

基于微信小程序+SpringBoot+Vue的校园自助打印系统(带1w+文档)

基于微信小程序SpringBootVue的校园自助打印系统(带1w文档) 基于微信小程序SpringBootVue的校园自助打印系统(带1w文档) 管理信息可以处理复杂的信息从而提高用户的工作效率&#xff0c;减少失误。所以本基于Vue和微信小程序的校园自助打印系统的开发非常有意义&#xff0c;本系…