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

2024-09-04 18:12
文章标签 meta 配置 网页 深入 理解 html 信息 frontend 标签

本文主要是介绍「深入理解」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。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
Zookeeper安装和配置说明

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种，单机模式和集群模式以及伪集群模式。 ■ 单机模式：Zookeeper只运行在一台服务器上，适合测试环境； ■ 伪集群模式：就是在一台物理机上运行多个Zookeeper 实例； ■ 集群模式：Zookeeper运行于一个集群上，适合生产环境，这个计算机集群被称为一个“集合体”（ensemble） Zookeeper通过复制来实现
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
CentOS7安装配置mysql5.7 tar免安装版

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
hadoop开启回收站配置

hadoop开启回收站配置

开启回收站功能，可以将删除的文件在不超时的情况下，恢复原数据，起到防止误删除、备份等作用。 开启回收站功能参数说明 （1）默认值fs.trash.interval = 0，0表示禁用回收站；其他值表示设置文件的存活时间。 （2）默认值fs.trash.checkpoint.interval = 0，检查回收站的间隔时间。如果该值为0，则该值设置和fs.trash.interval的参数值相等。
阅读更多...
NameNode内存生产配置

NameNode内存生产配置

Hadoop2.x 系列，配置 NameNode 内存 NameNode 内存默认 2000m ，如果服务器内存 4G ， NameNode 内存可以配置 3g 。在 hadoop-env.sh 文件中配置如下。 HADOOP_NAMENODE_OPTS=-Xmx3072m Hadoop3.x 系列，配置 Nam
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
认识、理解、分类——acm之搜索

认识、理解、分类——acm之搜索

普通搜索方法有两种：1、广度优先搜索；2、深度优先搜索； 更多搜索方法： 3、双向广度优先搜索； 4、启发式搜索（包括A*算法等）； 搜索通常会用到的知识点：状态压缩（位压缩，利用hash思想压缩）。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2