「深入理解」HTML Meta标签：网页元信息的配置

「深入理解」HTML Meta标签：网页元信息的配置

HTML的<meta>元素用于提供关于HTML文档的元数据（metadata），这些信息对于浏览器和其他处理HTML文档的应用程序来说是非常有用的，如：<base>、<link>、<script>、<style> 或 <title>。

<meta>标签通常放置在文档的<head>部分，不直接向用户展示内容，而是提供给浏览器、搜索引擎和其他Web服务使用。

如：

在这里插入图片描述

<meta>元素必须包含至少一个name或http-equiv属性以及一个content属性。name属性用于非HTTP头元数据，而http-equiv用于模拟HTTP头部字段。

name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。 在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。

HTML5 规范定义了一系列标准的元数据名称，这些元数据通常通过<meta>标签的name属性来表达。以下是一些常用的元数据名称：

  1. charset: 定义文档的字符编码。
<meta charset="UTF-8">
  1. viewport: 控制视口的尺寸和缩放，对于响应式设计至关重要。
<meta name="viewport" content="width=device-width, initial-scale=1">
  1. author：作者的名字。
<meta name="author" content="会思想的苇草i">
  1. description：页面的描述。
<meta name="description" content="这是一个描述网页内容的简短摘要。">
  1. generator：生成页面的软件或工具。
<meta name="generator" content="WordPress 5.8.1">
  1. keywords：与页面内容相关的关键词列表。
<meta name="keywords" content="关键词1, 关键词2, 关键词3">
  1. referrer：控制是否发送referrer头到服务器。
<meta name="referrer" content="no-referrer">
  1. robots：指导搜索引擎机器人如何索引页面。
<!-- 告诉搜索引擎不要索引该页面或跟踪其链接 -->
<meta name="robots" content="noindex, nofollow">
  1. short-link：页面的短链接。
<meta name="shortlink" content="www.csdn.net">

除了上述标准元数据名称外，HTML5 规范还引入了http-equiv属性，它可以用于模仿HTTP头部信息。例如：

  • Content-Type：指定文档的MIME类型和字符集。通常被所替代。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  • Default-Style：指定首选的样式表。
<meta http-equiv="Default-Style" content="alternate stylesheet.css">
  • Pragma：用于缓存控制。比如告诉浏览器不要缓存页面：
<meta http-equiv="Pragma" content="no-cache">
  • Expires：指定文档过期的时间，通常用格林尼治时间表示：
<meta http-equiv="Expires" content="0">
  • Cache-Control：指示缓存机制如何处理页面。比如禁止缓存：
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  • Set-Cookie：设置cookie。
<!-- 这样做不推荐，也非标准 -->
<meta http-equiv="Set-Cookie" content="myCookie=myValue; expires=Thu, 01-Jan-2025 00:00:00 GMT; path=/">
  • X-UA-Compatible：控制Internet Explorer的渲染模式和文档模式。
<meta http-equiv="X-UA-Compatible" content="IE=edge">

除了这些标准元数据名称之外，还有一些非官方的但广泛接受的元数据名称，例如：

  • apple-mobile-web-app-capable：告诉Safari浏览器该页面可以作为一个全屏的Web应用程序运行。window.navigator.standalone 获取是否以全屏运行。
<meta name="apple-mobile-web-app-capable" content="yes">
  • apple-mobile-web-app-status-bar-style：设置iOS设备上Safari浏览器的状态栏颜色。可以设置为black或black-translucent来改变状态栏文本和图标颜色，或者通过default恢复到系统默认颜色。
    • 为了使apple-mobile-web-app-status-bar-style元信息标签生效，首先需要在HTML头部声明apple-mobile-web-app-capable元信息标签，并将其值设为yes。这样设置表明您的网站可以作为一个“全屏”的Web应用程序运行，即当用户从主屏幕启动该网站时，它将在没有浏览器界面的状态下运行。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  • theme-color：设置Web应用的主题颜色，用于Android Chrome的工具栏颜色。
    • theme-color 元信息标签在Android设备上主要影响Chrome浏览器。它允许网站开发者指定一个颜色，当用户将网站添加到主屏幕后，作为web app启动时的背景颜色，以及在某些情况下，改变浏览器工具栏的颜色。从Android 5.0（Lollipop）开始，theme-color还会影响状态栏和导航栏的颜色。
    • 在iOS设备上，theme-color元信息标签的行为与Android有所不同。Apple在其Safari浏览器中实现了自己的一套机制来处理主题颜色。对于iOS，主要的控制点是通过apple-mobile-web-app-status-bar-style元信息标签来改变顶部状态栏的颜色，当用户将网站添加到主屏幕并以全屏模式启动时。
    • Safari在某些情况下可能也会受到theme-color元信息的影响，但这并不是官方文档明确支持的行为，可能是因为浏览器的实现细节或与其他元信息标签的交互导致的。因此，不能依赖theme-color在iOS上的一致行为，特别是在改变状态栏颜色方面，该操作不应被视为可靠的行为。
<meta name="theme-color" content="#ff0000">
  • 使用js改变系统菜单栏主题色（兼容性弱）
    // 创建并设置ios主题色meta标签let iosThemeColorMetaEle = document.createElement('meta');iosThemeColorMetaEle.name = 'theme-color';iosThemeColorMetaEle.content = '#fff';document.head.append(iosThemeColorMetaEle);
  • msapplication-TileColor：设置Windows任务栏图标和启动屏幕的背景颜色。
<meta name="msapplication-TileColor" content="#00bcd4">
  • msapplication-config：引用一个XML文件，其中包含了用于IE11的浏览器选项卡图标（favicon）和其他信息。
<meta name="msapplication-config" content="/browserconfig.xml">
  • og：用于社交分享时的元数据，如标题、描述、图片等。
<meta property="og:title" content="我的页面标题">
<meta property="og:description" content="这是页面的描述。">
<meta property="og:image" content="http://example.com/path/to/image.jpg">
  • twitter： 用于Twitter分享时的元数据。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:description" content="这是页面的描述。">
<meta name="twitter:image" content="http://example.com/path/to/image.jpg">

og:*（Open Graph协议）和twitter:*（Twitter Cards）元数据名称虽然不是HTML5标准的一部分，但它们被广泛用于社交媒体平台，用于控制页面在社交媒体上的显示方式。这些元数据名称使用property属性而不是name属性，并且它们的值通常通过content属性来指定。

<meta>标签应该位于HTML文档的<head>部分。每种类型的<meta>标签只能出现一次，除非它们有不同的content属性。例如，你可以有多个<meta name="description">标签，但它们的content属性必须不同，否则只有第一个会被解析。然而，通常情况下，每个类型只使用一次是最佳实践。

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

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

相关文章

【网络安全】服务基础第一阶段——第九节：Windows系统管理基础---- Windows_AD域

【网络安全】服务基础第一阶段——第九节：Windows系统管理基础---- Windows_AD域

目录 一、域与活动目录 1.1 工作组 1.2 域 1.2.1 域&#xff08;Domain&#xff09; 1.2.2 域控制器&#xff08;Domain Controller&#xff0c;DC&#xff09; 1.2.3 功能和角色 1.2.4 管理和监控 1.2 5 域结构 1.3 组织单元&#xff08;Organizational Unit&#xff…
阅读更多...
集成电路学习：什么是IP知识产权

集成电路学习：什么是IP知识产权

一、IP&#xff1a;知识产权 IP是Intellectual Property的缩写&#xff0c;即知识产权。知识产权是一种无形的财产权&#xff0c;也称智力成果权&#xff0c;它指的是通过智力创造性劳动所获得的成果&#xff0c;并且是由智力劳动者对成果依法享有的专有权利。这种权利包括人身…
阅读更多...
性能优化：自动化处理系统设计

性能优化：自动化处理系统设计

性能优化&#xff1a;自动化处理系统设计 前言需求分析系统设计1. 调度中心2. 任务执行器3. 错误处理机制4. 通知系统5. 报表生成器6. 日志记录器 技术实现结语 前言 在当今这个信息爆炸、技术日新月异的时代&#xff0c;企业面临着前所未有的挑战和机遇。随着业务量的不断增长…
阅读更多...
基于Yolov5_6.1、LPRNet、PySide6开发的车牌识别系统

基于Yolov5_6.1、LPRNet、PySide6开发的车牌识别系统

项目概述 项目背景 随着车辆数量的不断增加&#xff0c;车牌识别系统在交通管理、停车场自动化等领域变得越来越重要。本项目利用先进的深度学习技术和现代图形用户界面框架来实现高效的车牌识别功能。 项目特点 高效识别&#xff1a;采用 YOLOv5_6.1 进行车牌定位&#xff…
阅读更多...
差分传输与单端传输

差分传输与单端传输

差分与单端传输 本页讨论模拟信号传输中的两个概念&#xff1a;“单端”和“差分”。模拟信号用于将模拟仪器的输出传送到数字转换器。虽然数字信号对干扰的容忍度相对较高&#xff0c;但模拟信号却可能受到环境中电磁波的干扰和改变。本文档将解释这一问题&#xff0c;并描述…
阅读更多...
OcrLiteNcnn：Windows环境打包及Java调用

OcrLiteNcnn：Windows环境打包及Java调用

目录结构 前言cmake安装源码下载说明Windows源码编译执行“cmake -DCMAKE_BUILD_TYPE=Release ..”执行“cmake --build . --config Release -- -m:6”编译完成识别图片命令行调用Java调用前言 Java实现OCR识别图片中的文字，小编先前整理过一篇在Linux环境中基于“ChineseOcr…
阅读更多...
全局安装react

全局安装react

1、首先安装react脚手架 npm install -g create-react-app2、创建react项目 create-react-app my-app3、 PS D:\桌面\papers\subject> create-react-app my-react-appCreating a new React app in D:\桌面\papers\subject\my-react-app.Installing packages. This might …
阅读更多...
Docker安装Neo4j图数据库和APOC插件

Docker安装Neo4j图数据库和APOC插件

文章目录 一、前言二、安装Neo4j三、测试Neo4j四、安装APOC插件五、测试APOC插件 一、前言 官方文档&#xff1a;https://neo4j.com/docs/operations-manual/current/docker/introduction/ 二、安装Neo4j 我这里以 5.23.0 版的 Neo4j 为例 拉取镜像 docker pull neo4j:5.23.0…
阅读更多...
HarmonyOS NEXT 应用运行异常记录与解决（持续整理版）

HarmonyOS NEXT 应用运行异常记录与解决（持续整理版）

问题一 App Launch Failed to get the device apiVersion. 解决方案 进入到设备管理&#xff0c;点击对应开启的模拟器设备&#xff0c;先将模拟器关闭&#xff0c;然后点击查出掉用户数据&#xff0c;再重启。 重启之后&#xff0c;一般能解决。如果遇到还是显示拿不到apiVer…
阅读更多...
bash反弹shell分析

bash反弹shell分析

目录 介绍步骤 介绍 与目标主机建立连接的原理是利用漏洞执行ShellCode。 GetShell的实质是&#xff1a;执行ShellCode&#xff0c;将目标主机的Shell重定向到攻击机。拿到Shell利于后续的渗透。 所谓的反弹Shell是指GetShell的过程由目标主机主动发起&#xff08;反向连接&a…
阅读更多...
Git如何安装和配置

Git如何安装和配置

一、Git 的安装 1、Git 的官网 Git (git-scm.com) 2、下载 Git for Windows 在官网下载好 Git 的安装文件后&#xff0c;接下来就可以进行安装了。 3、安装 Git 以管理员身份运行你下载的安装文件&#xff1a; 然后就可以进入安装向导了。 4、验证是否安装成功 当安装向…
阅读更多...
【数据结构】--初始集合框架

【数据结构】--初始集合框架

1. 什么是集合框架 集合框架:Java中已经实现好的集合类&#xff08;一些已经由Java实现好的数据结构&#xff09;。Java的数据结构和C语言的数据结构是没有什么区别的&#xff0c;里面的区别就只是实现的语言不一样。不可能出现Java的单链表和C语言实现的单链表是两个不同的东…
阅读更多...
idea配置svn发现安装的svn中的bin目录下没有svn.exe文件

idea配置svn发现安装的svn中的bin目录下没有svn.exe文件

问题描述 使用idea配置svn时&#xff0c;发现安装的svn没有svn.exe文件 解决方法 1、双击svn安装包&#xff0c;找到【modify】 2、默认安装时&#xff0c;没有安装command line client tools&#xff0c;里面是有svn.exe 3、选择will be installed on local hard drive 4、…
阅读更多...
idea中使用git提交代码报错husky ＞ pre-commit

idea中使用git提交代码报错husky ＞ pre-commit

1、原因&#xff1a; 本地项目中的.git下的一个文件导致的提交失败&#xff0c;这个文件是pre-commit文件。由于预提交钩子pre-commit导致的提交失败&#xff0c;通过删除.git/hooks/pre-commit文件可以解决 2、解决步骤&#xff1a; 1、找到项目中的.git文件夹&#xff0c;…
阅读更多...
公园智能厕所引导大屏，清楚显示厕位有无人状态

公园智能厕所引导大屏，清楚显示厕位有无人状态

在科技飞速发展的今天&#xff0c;公园的设施也在不断与时俱进。其中&#xff0c;公园智能厕所引导大屏的出现&#xff0c;为游客带来了全新的如厕体验。 走进公园的智能厕所区域&#xff0c;首先映入眼帘的便是那醒目的引导大屏。屏幕上清晰地显示着各个厕位的有无人状态&…
阅读更多...
4款电脑数据恢复软件分享，告别天价恢复！

4款电脑数据恢复软件分享，告别天价恢复！

大家应该都经历过数据丢失吧&#xff0c;这不&#xff0c;前两天&#xff0c;我那电脑不知怎的&#xff0c;突然就把我辛苦整理的文件夹给“咔嚓”一声删掉了。这下可好&#xff0c;我那里面可是有我好几个月的心血啊&#xff01;好在&#xff0c;我之前也发生过类似的事情&…
阅读更多...
【通俗理解】最优控制之旅——强化学习中的策略优化

【通俗理解】最优控制之旅——强化学习中的策略优化

【通俗理解】最优控制之旅——强化学习中的策略优化 关键词提炼 #最优控制 #强化学习 #状态值函数 #奖励函数 #折扣因子 #贝尔曼方程 #策略迭代 #值迭代 #动态规划 #马尔可夫决策过程 第一节&#xff1a;最优控制的类比与核心概念 1.1 最优控制的类比 最优控制就像是一位精…
阅读更多...
视联动力数字科技新成果闪耀2024数博会

视联动力数字科技新成果闪耀2024数博会

在2024年的8月28日至30日&#xff0c;贵阳举办的中国国际大数据产业博览会上&#xff0c;视联动力带来了一系列引人注目的技术和创新应用。 这场为期三天的展览会展示了公司在数字经济发展领域的最新成就&#xff0c;特别是国产通信协议技术方面的进展。 视联动力重点展出了算…
阅读更多...
QGraphicsview相关学习

QGraphicsview相关学习

文章学习自&#xff1a; Qt_绘图框架_QGraphicsview实现缩放移动图片_Livy0123的博客-CSDN博客 这里进行一些自己的分析和理解。 (1) 自定义类MyGraphicsView继承自QGraphicsView 核心是重定义的滚轮事件。 [virtual protected] void QGraphicsView::wheelEvent(QWheelEve…
阅读更多...
《python语言程序设计》第8章第11题将反向字符串 编写一个函数反向一个字符串,reverse(s)

《python语言程序设计》第8章第11题将反向字符串 编写一个函数反向一个字符串,reverse(s)

def reverse(text_arrange):len_text len(text_arrange)dec_text ""for i in range(1, len_text 1):# print(i)dec_text text_arrange[-i]print(f"反向输出{dec_text}")reverse("12345678") reverse("abcdefg")
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023