「深入理解」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域

目录 一、域与活动目录 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&#xff1a;知识产权 IP是Intellectual Property的缩写&#xff0c;即知识产权。知识产权是一种无形的财产权&#xff0c;也称智力成果权&#xff0c;它指的是通过智力创造性劳动所获得的成果&#xff0c;并且是由智力劳动者对成果依法享有的专有权利。这种权利包括人身…

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

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

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

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

差分传输与单端传输

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

React 入门第九天:与后端API的集成与数据管理

在React学习的第九天&#xff0c;我集中学习了如何与后端API进行集成。这一步是将静态的React应用转变为动态、可交互的关键。通过与后端通信&#xff0c;我们可以从服务器获取数据、发送用户输入以及处理复杂的业务逻辑。 1. 使用fetch进行数据请求 React没有内置的HTTP库&a…

Assembly 跨域通信AppDomain

Assembly 怎么实现跨域通信 在 .NET Framework 中&#xff0c;AppDomain 是一种用于隔离应用程序的机制&#xff0c;可以在单个进程内创建多个应用程序域&#xff08;AppDomain&#xff09;。每个应用程序域都有自己的程序集、资源和内存空间。通过使用 AppDomain&#xff0c;…

Linux 搭建 Java 部署环境:安装 JDK 和 MySQL 的教程

目录 一、apt 二、JDK 2.1 更新软件包 2.2 安装openjdk 三、MySQL 3.1 使用apt安装MySQL 3.2 查看MySQL的状态 3.3 MySQL 安装安全设置 3.4 设置密码 一、apt apt(Advanced Packaging Tool), Linux软件包管理工具&#xff0c;用于在Ubuntu、Debian和相关Linux发行版上…

OcrLiteNcnn:Windows环境打包及Java调用

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

OpenCV入门12.2:SURF与SIFT比较及SURF示例

SIFT (Scale-Invariant Feature Transform): 提出时间: 1999年&#xff0c;由David Lowe提出。关键特点: 能够检测和描述图像中的关键点&#xff0c;这些关键点对旋转、缩放和部分亮度变化具有不变性。计算复杂度: 相对较高&#xff0c;因为SIFT使用了高斯差分核来检测关键点&…

小程序面试题二

一、微信小程序的开发原理是什么&#xff1f; 微信小程序的开发原理主要基于Web规范&#xff0c;采用HTML、CSS和JavaScript等前端技术&#xff0c;并结合微信官方提供的特定框架和API进行开发。以下是小程序开发原理的详细解析&#xff1a; 1. 开发框架与语言 WXML&#xff…

全局安装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 …

解释 JVM 的内存模型(堆、栈、方法区等),并简述如何通过调整 JVM 参数来优化应用程序的性能?

JVM&#xff08;Java Virtual Machine&#xff09;的内存模型是 Java 程序运行的基础&#xff0c;理解它的各个组成部分对于优化应用程序的性能至关重要。 JVM 的内存模型主要包括以下几个部分&#xff1a; 堆&#xff08;Heap&#xff09;栈&#xff08;Stack&#xff09;方…

数据结构(1)数据结构基础(单向链表)

一、什么是数据结构 数据结构是一组用来保存一种或多种特定关系的数据的集合。其主要目的是组织和存储数据&#xff0c;以便于高效的访问和修改。在程序设计中&#xff0c;将大量而复杂的问题以特定的数据类型和特定的存储结构存储在内存中&#xff0c;并在此基础上实现某个特定…

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…

Java-用户线程与守护线程

在Java中&#xff0c;线程分为用户线程和守护线程。用户线程是程序的主要线程&#xff0c;而守护线程则是为用户线程提供支持的后台线程。以下是对这两种线程的详细解释以及示例代码。 用户线程与守护线程的区别 用户线程&#xff1a; 用户线程是应用程序中执行的主要线程&…

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

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

《第三十四章 高级主题 - 动画效果》

在 Android 应用开发中&#xff0c;动画效果能够显著提升用户体验&#xff0c;使应用更加生动和吸引人。本章将深入探讨 Android 中的动画效果&#xff0c;包括属性动画、帧动画以及 ViewPager 动画。 一、属性动画 &#xff08;一&#xff09;属性动画简介 属性动画是 Android…

bash反弹shell分析

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

Git如何安装和配置

一、Git 的安装 1、Git 的官网 Git (git-scm.com) 2、下载 Git for Windows 在官网下载好 Git 的安装文件后&#xff0c;接下来就可以进行安装了。 3、安装 Git 以管理员身份运行你下载的安装文件&#xff1a; 然后就可以进入安装向导了。 4、验证是否安装成功 当安装向…