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

2024-09-04 18:12

本文主要是介绍「深入理解」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属性必须不同,否则只有第一个会被解析。然而,通常情况下,每个类型只使用一次是最佳实践。

这篇关于「深入理解」HTML Meta标签:网页元信息的配置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1136662

相关文章

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

CentOS7更改默认SSH端口与配置指南

《CentOS7更改默认SSH端口与配置指南》SSH是Linux服务器远程管理的核心工具,其默认监听端口为22,由于端口22众所周知,这也使得服务器容易受到自动化扫描和暴力破解攻击,本文将系统性地介绍... 目录引言为什么要更改 SSH 默认端口?步骤详解:如何更改 Centos 7 的 SSH 默认端口1

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

SpringBoot多数据源配置完整指南

《SpringBoot多数据源配置完整指南》在复杂的企业应用中,经常需要连接多个数据库,SpringBoot提供了灵活的多数据源配置方式,以下是详细的实现方案,需要的朋友可以参考下... 目录一、基础多数据源配置1. 添加依赖2. 配置多个数据源3. 配置数据源Bean二、JPA多数据源配置1. 配置主数据

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Spring 基于XML配置 bean管理 Bean-IOC的方法

《Spring基于XML配置bean管理Bean-IOC的方法》:本文主要介绍Spring基于XML配置bean管理Bean-IOC的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录一. spring学习的核心内容二. 基于 XML 配置 bean1. 通过类型来获取 bean2. 通过

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文