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

最新推荐文章于 2024-09-03 23:03:56 发布
最新推荐文章于 2024-09-03 23:03:56 发布
阅读量284 收藏 5
点赞数 4
分类专栏： 前端 文章标签： html 前端 meta 兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ASHIYI66/article/details/140939122
版权

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

会思想的苇草i
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML head 头标签详细介绍
12-13
接着，<meta>标签是中常见的元素，用于设置文档的元信息，如字符编码、页面描述、关键词等。例如，`<meta charset="utf-8">`定义了文档的字符编码为UTF-8，确保网页内容能正确显示各种语言。在HTML5中，推荐使用`...
网页元信息
09-17
在这里，我们将深入探讨网页元信息的概念、种类及其在JSP页面中的应用。 首先，让我们理解什么是元信息。元信息（Metadata）是关于数据的数据，它可以提供关于网页内容、作者、创建日期、关键字等信息。在HTML和JSP...
深入理解HTML基础【代码审计实战指南】
2301_80064376的博客
07-19 1395
本文主要讲述HTML的基础使用，标签及其语法
HTML meta标签小白学习记录！
idwenwen的博客
02-24 1255
meta标签小白学习记录，内容是同时新手可以看一看，大神请饶道，姿势作为自我学习的一个记录而已。
HTML基础-元信息与字符集设置
zevjay的博客
06-06 306
元信息是关于HTML文档自身而非文档内容的数据，通常包含在标签中。元信息用于描述网页的主题、作者、关键词、版权信息等，对搜索引擎理解和索引网页内容有直接影响。正确设置HTML的元信息和字符集是创建有效网页的关键步骤。通过理解这些概念，遵循最佳实践，我们可以确保网页内容的正确显示，提高搜索引擎可见性，为用户提供更好的浏览体验。始终关注网页的语义化和可访问性，是每个前端开发者的基本素养。
探寻爬虫世界01：HTML页面结构
howard2005的专栏
01-14 1225
本文旨在通过爬取51job网站数据解决实际用户需求，首先探讨了51job的网页结构，分析其整体布局与关键元素设计。随后深入解读HTML基础结构，详解表格、列表、超链接及容器等核心标签的使用，并结合51job实例剖析页面HTML构成。在明确了实战目标后，制定了针对性的数据抓取策略。总结而言，文章以理论与实践相结合的方式，详细阐述了从理解网页结构到制定数据抓取方案的过程，为后续的数据分析与应用奠定了坚实基础。
深入学习和理解Django视图层：处理请求与响应
05-04 855
Django是一个高级的Python Web框架，它鼓励快速开发和干净、实用的设计。它由Wall Street Journal的程序员在2005年开发，用于他们的新闻网站。自那时起，Django已经成为全球范围内广泛使用的Web框架之一。快速开发：Django提供了一套丰富的功能，如内置的admin界面、模板引擎和数据库迁移系统，这些功能可以帮助开发者快速构建复杂的应用程序。稳健的防御。
前端必知：1.探索HTML中 ＜head＞ 标签的作用和常用元素
qq_52799985的博客
07-04 654
“在这篇文章中，我们将深入解析HTML头部文件，这是构成网页结构的重要组成部分。我们将一起探索 、 标签的作用以及如何优化头部文件以提升网页性能和SEO。无论您是初学者还是经验丰富的前端开发者，本文将为您提供实用的技巧和最佳实践。通过理解字符编码、正确使用描述和关键词标签、引入外部资源等，您将能够创建出更优雅、高效的网页。点击阅读全文，了解如何使用HTML头部文件来优化您的网页并提升用户体验。” 当然，您可以根据您的具体文章内容和风格进行修改和调整。希望这对您有帮助！
深入Spring Boot (七)：静态资源使用详解
热门推荐
伟仔的小天地
03-22 2万+
Web应用经常需要使用大量的静态资源，如图片、css、js等，Spring Boot对这些静态资源的使用提供了默认配置。本篇将详细介绍如何使用默认配置和如何修改这些默认配置，主要包含以下5部分内容： 1.静态资源存储路径； 2.静态资源访问路径； 3.最佳实践； 4.应用欢迎页； 5.应用图标。 1.静态资源存储路径 默认配置下，使用Spring Boot可以将静态资源存储在/s...
HTML meta viewport属性详细说明
09-28
在移动设备的网页开发中，`<meta name="viewport">`标签扮演着至关重要的角色，它允许开发者控制网页在移动设备浏览器中的展示方式。Viewport并非仅限于iOS设备，而是Android和Windows Phone等平台普遍采用的一种...
viewports:测试不同的元视口标签
06-16
通过这样的测试，我们可以深入理解每个元视口属性如何影响页面的响应式设计，并根据实际需求选择最佳的设置。对于开发者来说，掌握元视口的正确使用至关重要，因为它直接影响到移动设备上的网页性能和用户体验。在...
META标签详解、解决JSP页面显示乱码问题
08-08
通过对META标签的深入理解与合理运用，不仅可以提升网页的用户体验，还能有效改善搜索引擎排名，增加网站流量。特别是对于关键词和描述的设置，是SEO优化中的关键环节，不容忽视。同时，在开发多语言或多字符集的Web...
HTML 实现炫酷选项卡效果
qq_69304031的博客
09-02 645
在前端开发中，创造出吸引人的交互效果能够极大地提升用户体验。今天，我将分享一段使用 HTML 和 CSS 实现的炫酷选项卡代码，并详细介绍其实现过程。
HTML ＜template＞ 标签的基本技巧
ufrontend的博客
08-30 1215
HTML中的标记是 Web 开发中一个功能强大但经常未得到充分利用的元素。它允许你定义可重复使用的内容，这些内容可以克隆并插入 DOM 中而无需最初渲染。此功能对于创建动态、交互式 Web 应用程序特别有用。在本文中，我们将探讨有效使用 标记的 10 个基本技巧，帮助你在项目中充分发挥其潜力。1. 了解 标记的基础知识 标记是一个 HTML 元素，它包含页面加载时不会渲染的客户端内容。
word文档转html(只支持段落和表格)
m0_63159822的博客
08-30 561
/ 这里简单地将单元格中的文本内容添加到HTML中。// 注意：单元格可能包含多个段落，需要遍历它们。// 辅助方法，用于获取段落中的文本内容。
vue点击导航滚动到相应位置，鼠标滚动到相应位置对应导航名称高亮
Z18834071903的博客
09-03 347
vue点击导航滚动到相应位置，鼠标滚动到相应位置对应导航名称高亮
音乐播放器javaweb项目近日总结，用js，css，HTML，servlet，mybatis来写注册登录忘记密码（还没写好）
最新发布
2302_80637450的博客
09-03 298
这几天学了js，css，HTML，servlet，mybatis，还有axios，目前axios还没有用到，学的比较慢因为那个servlet，axios我看不懂，可能看懂了然后不会用，之后给我们上了一节课，感觉每一个东西单独拆开好像学过，但是放在一起听的很懵，今天我就到处翻博客反复看了点代码，终于知道了一点前后端交互就赶紧写了点。因为是小白所以写的有些感觉没必要写的比较详细方便自己记忆。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会思想的苇草i

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值