meta元数据元素

文章目录

  • 元数据Metadata
  • meta标签的四种使用方式
  • meta的属性
  • meta使用示例

HTML <meta> 元素表示那些不能由其他 HTML标签（ <style>、 <script>等）表示的元数据信息。

元数据Metadata

Metadata元数据，简单地来说就是描述数据的数据。
如，HTML文件是一种数据，但是也可以在HTML文件地<head>元素中描述该文档地元数据，如该文件的作者和概要。
HTML文件中的元数据使用<meta>标签来描述。

meta标签的四种使用方式

  • 设置name属性，<meta>元素提供的是文档级别的元数据, 应用于整个页面。

  • 设置http-equip属性，<meta>元素就是编译指令，提供的信息与类似命名的HTTP头相同。

  • 设置charset属性，声明了文档的字符串编码。如果存在该属性，则其值必须是字符串utf-8，因为UTF-8是HTML5文档的唯一有效编码。声明字符编码的 <meta> 元素必须完全位于文档的前 1024 个字节内。

  • 设置itemprop属性，<meta>元素提供用户定义的元数据

      当一个 <meta> 标签中，有 name、http-equiv 或者 charset 三者中任何一个属性时，itemprop 属性不能被使用。

meta的属性

  • charset：声明编码方式

  • content：包含http-equiv 或 name属性的值，取决于所使用的值。

  • http-equiv： 定义了一个编译指示指令。它的取值值都是特定HTTP标头的名称：

    • content-security-policy：允许页面作者定义当前页面的内容安全策略（即允许哪些资源加载）。内容策略通常用来指定允许的服务器源和脚本端点，有助于防止跨站点脚本攻击（XSS) 。

        内容安全策略（Content-Security-Policy）：HTTP响应头`Content-Security-Policy`允许站点管理者控制用户代理能够为指定的页面添加哪些资源。这有助于防止XSS攻击。同时内容安全策略也可以使用meta标签的 ` http-equiv="Content-Security-Policy" `属性指定如:

      <metahttp-equiv="Content-Security-Policy"content="default-src 'self'; img-src https://*; child-src 'none';" />

    • content-type： 声明mime类型和文档的字符编码。如果使用content-type属性，那么对应的content内容就是text/html;charst=utf-8。这相当于一个具有指定 charset 属性的 <meta> 元素

    • defalut-style：设置默认的css样式表的名称

    • x-ua-compatible：如果指定content属性必须具有值IE=edge。用户代理必须忽略此指示。

    • refresh属性：当content属性仅包含非负整数时，表示页面重新加载的秒数；当conent属性包含非负整数后跟字符串;url=和有效的url的时候，表示页面重定向到指定链接的秒数。

  • name： 以名-值的方式给文档提供元数据，其中name作为元数据的名称，content作为元数据的值。
    元数据名称的可选值：

    • application-name： 网页中所运行的应用程序的名称。

    • author：文档作者的名称

    • creator：当前文档的创建者，例如某个组织或者机构。如果有不止一个创建者，则应当使用多个名称为 creator 的 <meta> 元素。

    • description：页面内容的描述信息

    • generator：此页面软件的标识符

    • keywords：与页面内容相关的关键词，使用逗号分隔。

    • referrer：控制由当前文档发出的请求的HTTP的referer请求头（Referer 请求头包含了当前请求页面的来源页面的地址）
      referrer对应的content的可取值：

      属性值描述
      no-referrer不发送HTTPreferer请求头
      origin只发送当前文档的origin
      no-referrer-when-downgrade如果请求目标和当前页面一样安全或者更加安全则发送完整的URL；反之不发送referrer 默认行为
      origin-when-cross-origin同源请求才发送完整的URL，其他情况只发送origin
      same-origin同源请求下才发送完整的URL，其他情况请求不包含referer
      strict-origin如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送 origin；反之不发送referrer

    • theme-color：表示当前页面的建议颜色，此时content属性包含的是一个有效的CSS<color>值

    • color-scheme: 指定与当前文档兼容的一种或多种配色方案。浏览器将优先采用此元数据的值，然后再使用用户的浏览器或设备设置。
      color-scheme的content的可取值：

      属性值含义
      normal使用默认的配色行为
      [light dark]文档所支持的配色方案，如果指定多种配色方案则优先选择第一种
      only light文档仅支持浅色模式，onlydark时无效的
      <meta name="color-scheme" content="dark light" />

      表示文档偏好使用深色模式但是也支持浅色模式

    • viewport： 设置视口的初始大小，目前仅适用于移动设备，在电脑网页中原样展示。
      如果移动设备的宽度小于设定的视口的宽度，就会将视口中的内容等比例缩小以适应移动设备的宽度
      如果移动设备的宽度大于设定的是扣的宽度，就会将是口中的内容等比例放大以适应移动设备的宽度

        视口：代表一个可以看见的多边形区域，在浏览器范畴里代表的是浏览器中网页的可见部分。视口分为布局视口和视觉视口布局视口：表示网页的实际宽度，就是浏览器的宽度，根据不同的浏览器有不同的取值。视觉视口：表示我们实际看到的区域，和缩放网页有关，

      视口viewport的content取值：

      取值描述
      width表示视口的宽度，可以是正整数（单位是px）或字符串（device-width表示和设备的宽度一样）
      height表示是扣的高度，取值是正整数或字符串（device-height）
      initial-scale1-10之间的正整数，设置视觉视口和布局视口之间的缩放比例
      maximum-scale1-10之间的正整数，定义缩放的最大值
      minimum-scale1-10之间的正整数，定义缩放的最小值
      user-scalableyes或no，表示用户是否可以缩放页面
      viewport-fitauto、contain 或者 cover， 表示视口填充的缩放方式

      假设设置的视口720px，从电脑浏览器适应移动设备的适应方式是：
      先将页面内容渲染成width是720px的页面，该居中居中，该平移平移，获取一个渲染好的视觉视口。之后再根据移动设备的宽度，将该视觉视口放大或缩小以适应移动设备的布局视口。

      使用web开发移动设备的网页的时候我们比较习惯使用viewport的width设置视口的宽度。

    • googlebot：robots 的替代名称，只被 Googlebot（Google 的网页爬虫/索引搜寻器）使用。

    • publisher：当前文档的发布者/出版者。

    • robots：爬虫、协作搜寻器。是一个使用逗号分隔的、由下列值构成的列表：

      取值描述
      index该页面是否允许被机器人索引（默认值）
      noindex该页面不允许被机器人索引
      follow允许机器人跟随此页面上的链接
      nofollow不允许机器人跟随此页面上的链接
      all等价于index,follow ，仅适用于google爬虫
      none等价于noindex,nofollow ，仅适用于google爬虫
      noarchive/ nocache要求搜索引擎不缓存页面内容` ，适用于google、yahoo、bing爬虫
      nosnippet不在搜索引擎的结果中显示该网页的任何描述，仅适用于google、bing爬虫
      noimageindex请求此页面不显示为索引图像的引用页面，仅适用于google爬虫

    • format-detection：格式检测
      content的取值：

      取值含义
      telephone=no禁止自动拨号提示
      email=no禁止跳转邮箱
      address=no禁止跳转地图

    • msapplication-tap-highlight：链接高亮显示

      <meta name="msapplication-tap-highlight" content="no">

      禁止链接高亮显示

    • applicable-device： 告知浏览器本页面属于什么类型设备的页面，主要有PC电脑端页面和mobile手机移动端页面两种设备， content="pc,mobile"。

    • MobileOptimized：移动设备的宽度值，用于识别移动设备的一种方法。浏览器根据此属性的content值与屏幕宽度对比，屏幕宽度小于content值就使用移动设备的布局方式，屏幕宽度大于content值就使用常规的布局方式。

    • msapplication-TileImage：被微软用在Windows 8和Windows Phone中。这个标签用于定义网站在Windows 8的开始屏幕上的磁贴图像。当用户把网站固定在开始屏幕上时，这个图像会被显示出来。

  • property：用于定义元数据的名称/属性，与name属性的功能类似。property属性主要用于Facebook的Open Graph（开放图谱协议）协议和其他社交媒体网站。 例如我们希望我们的网站在社交媒体上共享时显示特定的标题、描述和图像，就可以使用property属性来定义这些信息。
    可取值

    • og:title ： 表示当该页面再社交媒体上被分享时，显示的标题信息

    • og:image： 表示当该页面再社交媒体上被分享时，显示的图像信息

    • og:url ： 当前网页地址的完整链接。

    • og:type： 为了在图形中表示你的对象，你需要指定其类型。

      在这里插入图片描述

meta使用示例

<meta charset="utf-8" /><!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />

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

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

相关文章

猫头虎分享已解决Bug || 批处理错误：BatchJobFailure, ProcessingDelay

猫头虎分享已解决Bug || 批处理错误：BatchJobFailure, ProcessingDelay

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …
阅读更多...
供应商评价与选择改进研究——21年数学建模国赛C题分析

供应商评价与选择改进研究——21年数学建模国赛C题分析

题目描述 问题一分析&#xff08;基于APH、PCA和TOPSIS的供应商评价与选择&#xff09; 问题一需要我们对附件一中的402家供应商的数据进行处理并量化分析&#xff0c;并构建数学模型选择当中最重要的50家供应商。 附件一&#xff1a; 部分订货量 部分供货量 注意&#xff…
阅读更多...
BUUCTF----[极客大挑战 2019]HardSQL

BUUCTF----[极客大挑战 2019]HardSQL

输入1’ 单引号闭合 进行永真式判断 竟然说我是臭弟弟----八嘎&#xff08;肯定是进行了过滤&#xff09; 经过手法判断&#xff0c;过滤了&#xff0c;空格&#xff0c;and等报错注入updatexml() 报错注入顾名思义就是&#xff0c;通过特殊函数错误使用并使其输出错误结果来获…
阅读更多...
Compose UI 之 MediumLarge TopAppBar

Compose UI 之 MediumLarge TopAppBar

Medium&Large TopAppBar 前面文章介绍了 Small 类型的 TopAppBar&#xff1a;TopAppBar CenterAlignedTopAppBar 。下来介绍 Medium 和 Large 类型的 TopAppBar&#xff1a;MediumTopAppBar LargeTopAppBar 。 MediumTopAppBar 上面介绍了Small 类型的 TopAppBar (TopAp…
阅读更多...
C语言指针从入门到基础详解（非常详细）

C语言指针从入门到基础详解（非常详细）

1.内存和地址 我们知道电脑中的CPU在处理数据的时候需要在内存中读取数据处理后的数据也会放在内存中。把内存划分为一个个的内存单元每个单元的大小是一个字节。每个字节都有它对应的编号也就是它的地址&#xff0c;以便CPU可以快速的找到一个内存空间。C语言中我们把地址叫做…
阅读更多...
【OpenGL手册13】 光照贴图

【OpenGL手册13】 光照贴图

目录 一、说明二、漫反射贴图三、镜面光贴图四、采样镜面光贴图练习 一、说明 在上一节中&#xff0c;我们讨论了让每个物体都拥有自己独特的材质从而对光照做出不同的反应的方法。这样子能够很容易在一个光照的场景中给每个物体一个独特的外观&#xff0c;但是这仍不能对一个…
阅读更多...
ORACLE RAC反应卡顿时enq: SV - contention和latch: row cache objects的分析

ORACLE RAC反应卡顿时enq: SV - contention和latch: row cache objects的分析

某客户数据库系统使用ORACLE RAC 11G版本&#xff0c;两个节点。在上午8点钟之后&#xff0c;业务开始大量进行时&#xff0c;出现严重的卡顿问题&#xff1b;在工程师分析后&#xff0c;发现当时出现了很多异常等待数据&#xff0c;如典型的enq: SV - contention 、enq: TX - …
阅读更多...
消息队列以及Kafka的使用

消息队列以及Kafka的使用

什么是消息队列 消息队列&#xff1a;一般我们会简称它为MQ(Message Queue)。其主要目的是通讯。 ps&#xff1a;消息队列是以日志的形式将数据顺序存储到磁盘当中。通常我们说从内存中IO读写数据的速度要快于从硬盘中IO读写的速度是对于随机的写入和读取。但是对于这种顺序存…
阅读更多...
【鸿蒙 HarmonyOS 4.0】多设备响应式布局

【鸿蒙 HarmonyOS 4.0】多设备响应式布局

一、背景 在渲染页面时&#xff0c;需要根据不同屏幕大小渲染出不同的效果&#xff0c;动态的判断设备屏幕大小&#xff0c;便需要采用多设备响应式布局。这种设计方法能够动态适配各种屏幕大小&#xff0c;确保网站在不同设备上都能呈现出最佳的效果。 二、媒体查询&#xf…
阅读更多...
【框架设计】MVC、MVP、MVVM对比图

【框架设计】MVC、MVP、MVVM对比图

1. MVC&#xff08;Model-View-Controller&#xff09; 2. MVP&#xff08;Model-View-Presenter&#xff09; 3. MVVM&#xff08;Model-View-ViewModel&#xff09;
阅读更多...
ChatGPT数据分析应用——热力图分析

ChatGPT数据分析应用——热力图分析

ChatGPT数据分析应用——热力图分析 ​ 热力图分析既可以算作一种可视化方法&#xff0c;也可以算作一种分析方法&#xff0c;主要用于直观地展示数据的分布情况。接下来我们让ChatGPT解释这个方法的概念并提供相应的案例。发送如下内容给ChatGPT。 ​ ChatGPT收到上述内容后&…
阅读更多...
1-LINUX--系统介绍

1-LINUX--系统介绍

1.目录结构 2.基本目录介绍 1.>/bin 存放常用命令&#xff08;即二进制可执行程序&#xff09; 2.>/etc 存放系统配置文件 3.>/home 所有普通用户的家目录 4.>/root 管理员用户的家目录 5.>/usr 存放系统应用程序及文档 6.>/dev 存放设备文件 7.>/lib 存…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023