前端开发易错易忽略的 HTML 的 lang 属性

前言

本文主要记录:

前端开发中,

一个本人错了好几年,

看似无关紧要的小错误:

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语言属性值,表示页面内容使用中文。但是,为了更精确地指定中文的变体,通常建议使用更具体的值:

  1. lang="zh" - 通用中文
  2. lang="zh-CN" - 简体中文
  3. lang="zh-TW" - 繁体中文
  4. lang="zh-Hans" - 简体中文(使用语言标签的现代标准写法)
  5. 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 属性的默认值为“未知”,所以强烈建议在开发网页时明确设置该属性,以提升用户体验和网页的可访问性。

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

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

相关文章

【GD32】 GPIO 超详细总结 (江科大风格课件版)

GD32 GPIO 超详细总结 (江科大风格课件版)第一部分&#xff1a;GPIO 是什么&#xff1f; 名称&#xff1a;GPIO General Purpose Input/Output (通用输入输出口)作用&#xff1a;MCU与外部世界交互的桥梁。通过程序控制引脚输出高、低电平&#xff0c;或者读取引脚的电平状态。…

《嵌入式硬件(八):基于IMX6ULL的点灯操作》

一、IMX6ULL启动代码.global _start_start:ldr pc, _reset_handlerldr pc, _undefine_handlerldr pc, _svc_handlerldr pc, _prefetch_abort_handlerldr pc, _data_abort_handlerldr pc, _reserved_handlerldr pc, _irq_handlerldr pc, _fiq_handler_undefine_handler:ldr pc, …

Spring Boot 调度任务在分布式环境下的坑:任务重复执行与一致性保证

前言在实际业务开发中&#xff0c;调度任务&#xff08;Scheduled Task&#xff09; 扮演着重要角色&#xff0c;例如&#xff1a;定时同步第三方数据&#xff1b;定时清理过期缓存或日志&#xff1b;定时发送消息或报告。Spring Boot 提供了非常方便的 Scheduled 注解&#xf…

剖析ReAct:当大模型学会“边想边做”,智能体的进化之路

你是否曾惊叹于大语言模型&#xff08;LLM&#xff09;强大的推理能力&#xff0c;却又对其“纸上谈兵”、无法真正与世界交互而感到遗憾&#xff1f;你是否好奇&#xff0c;如何让AI不仅能“说”&#xff0c;更能“做”&#xff0c;并且在做的过程中不断思考和调整&#xff1f…

小型无人机传感器仿真模型MATLAB实现方案

一、系统架构设计 无人机传感器仿真模型需集成多物理场建模与数据融合模块&#xff0c;典型架构包含&#xff1a; 动力学模型&#xff1a;六自由度刚体运动方程传感器模型&#xff1a;IMU/GNSS/视觉/气压计数学建模数据融合层&#xff1a;卡尔曼滤波/EKF算法实现环境交互模块&a…

hadoop集群

ssh-keygen -t rsassh-copyid 用户名远程服务器地址start-dfs.sh chown [选项] 新所有者[:新所属组] 目标文件/目录常用选项&#xff1a;-R&#xff1a;递归修改目录下所有文件和子目录的所有者&#xff08;处理目录时常用&#xff09;-v&#xff1a;显示修改过程的详细信息-c&…

大模型入门实践指南

大模型入门教程:从概念到实践 大模型(Large Language Model, LLM)是当前人工智能领域的核心技术,其本质是通过大规模数据训练、具备复杂语言理解与生成能力的深度学习模型。本教程将从基础概念出发,带你理解大模型的核心逻辑,并通过可直接跑通的代码示例,快速上手大模型…

猫头虎开源AI分享:一款CSV to Chat AI工具,上传CSV文件提问,它可以即时返回统计结果和可视化图表

猫头虎开源AI分享&#xff1a;一款CSV to Chat AI工具&#xff0c;上传CSV文件提问&#xff0c;它可以即时返回统计结果和可视化图表 摘要 本文将详细介绍一款开源工具——CSV to Chat AI&#xff0c;它允许用户上传CSV文件并通过自然语言提问&#xff0c;系统会即时返回统计…

洛谷P9468 [EGOI 2023] Candy / 糖果题解

[EGOI 2023] Candy / 糖果 思路 NNN 这么小基本就是瞎打的 DP 了。 设 dpi,jdp_{i,j}dpi,j​ 为操作 jjj 次后前 iii 项的和最大是多少。 考虑转移&#xff0c;我们可以枚举 iii 并考虑将其移动到 ppp 位置&#xff0c;总共操作 kkk 次&#xff0c;那么就有 dpp,kmin⁡(dpp,…

AI智能体(Agent)大模型入门【3】--基于Chailit客服端实现页面AI对话

目录 前言 安装chailint 创建中文语言环境 创建chailint页面客户端 前言 本篇章将会基chailit框架实现页面进行AI对话。 若没有自己的本地模型对话&#xff0c;需要查看专栏内的文章&#xff0c;或者点击链接进行学习部署 AI智能体&#xff08;Agent&#xff09;大模型入…

【高并发内存池——项目】定长内存池——开胃小菜

提示&#xff1a;高并发内存池完整项目代码&#xff0c;在主页专栏项目中 文章目录 提示&#xff1a;高并发内存池完整项目代码&#xff0c;在主页专栏项目中 先设计一个定长的内存池 一、为什么需要定长内存池&#xff1f; &#x1f3e2; 传统内存分配的痛点 &#x1f3ed; 内…

6-获取磁盘分区信息

观察文件 获取server端电脑里面存在哪些盘符 int MakeDriveInfo() { //1>A 2>B &#xff08;原本属于软盘的 &#xff09;3>C ... 26>Zstd::string result;for (int i 1; i < 26; i) { //让其循环if (_chdrive(i) 0) //改变当前的驱动,_chdrive函数(c和c中)应…

每天认识一个电子器件之LED灯

LED选型核心参数一览表参数类别关键参数说明 & 为什么重要基本电气参数正向电压 (Vf)LED正常发光时两端的电压降。必须匹配您的电路电压。红/黄光约1.8-2.2V&#xff0c;蓝/绿/白光约2.8-3.6V。正向电流 (If)LED正常发光时所需的电流。决定了LED的亮度&#xff0c;必须用电…

Spring Boot 集成 Flowable 7.1.0 完整教程

一、引言 在企业级应用开发中&#xff0c;工作流管理是不可或缺的一部分。从简单的请假审批到复杂的业务流程&#xff0c;工作流引擎能够显著提升系统的灵活性和可维护性。​​Flowable​​ 作为一个轻量级、基于 Java 的开源工作流引擎&#xff0c;完美支持 ​​BPMN 2.0​​…

uniapp离线打包安卓apk详细教程,从HbuilderX新建项目到Android Studio详细配置(一)

目录 一、基础离线打包&#xff0c;无引入模块&#xff0c;无原生插件 1. HbuilderX新建项目&#xff0c;开发者后台申请证书和离线key 2.HbuilderX生成本地包 二、Android Studio配置 1.下载离线SDK&#xff0c;解压&#xff0c;SDK版本需要和HbuilderX 版本一致&#xf…

蓝牙鼠标频繁卡顿?一招解决 Win10/11 的 USB 省电机制干扰问题

蓝牙鼠标频繁卡顿&#xff1f;一招解决 Win10/11 的 USB 省电机制干扰问题 问题背景 在使用蓝牙鼠标时&#xff0c;很多用户会遇到以下问题&#xff1a; 鼠标移动卡顿、延迟明显偶尔断连&#xff0c;需重新配对尤其在笔记本合盖或待机后恢复时更明显 这些问题在 Windows 10/11 …

领码方案|Spring Boot 异步请求深度剖析:从原理到 AI 驱动的吞吐量优化

摘要 本文以“领码方案”为核心&#xff0c;深入剖析 Spring Boot 异步请求的底层原理、线程模型、三种常用实现方式&#xff08;Callable、WebAsyncTask、DeferredResult&#xff09;的运行机制与性能特征&#xff0c;并结合 AI 驱动的自适应线程池调优、云原生架构下的弹性伸…

C++基础(13)——list类的模拟实现

目录 一、接口函数和类总览 二、节点结构体的实现 构造函数 三、迭代器结构体的实现 迭代器模版参数 构造函数 重载运算符 重载--运算符 重载运算符 重载*运算符 重载->运算符 四、list的模拟实现 默认成员函数 构造函数 拷贝构造函数 赋值运算符重载函数 …

从 APP 界面设计到用户体验优化:如何让你的应用脱颖而出?

作为一个经验丰富的设计师&#xff0c;在产品优化方面我踩过不少坑&#xff0c;也见过很多团队在界面设计和用户体验上的误区。APP 的外观决定了用户的第一印象&#xff0c;但能不能留住用户、让他们愿意持续使用&#xff0c;最终还是看体验。今天就结合自己的经验&#xff0c;…

Kafka如何配置生产者拦截器和消费者拦截器

Kafka 的生产者拦截器和消费者拦截器允许你在消息发送前后以及消息消费前后嵌入自定义逻辑&#xff0c;用于实现监控、审计、消息修改等功能。本文我们就用一个最常见的传递TraceId的案例来说明下这两类拦截器如何来使用。 生产者发送拦截器 生产者拦截器需要实现 org.apache.k…