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.mzph.cn/news/732369.shtml

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

相关文章

Linux——权限的理解

Linux——权限的理解

Linux——权限的理解 文章目录 Linux——权限的理解一、shell命令以及运行原理二、Linux权限的概念切换用户对指令提权 三、Linux权限管理1. 文件访问者的分类&#xff08;人&#xff09;2. 文件类型和访问权限&#xff08;事物属性&#xff09;文件类型基本权限文件权限值的表…
阅读更多...
Linux系统安装及简单操作

Linux系统安装及简单操作

目录 一、Linux系统安装 二、Linux系统启动 三、Linux系统本地登录 四、Linux系统操作方式 五、Linux的七种运行级别&#xff08;runlevel&#xff09; 六、shell 七、命令 一、Linux系统安装 场景1&#xff1a;直接通过光盘安装到硬件上&#xff08;方法和Windows安装…
阅读更多...
小白跟做江科大51单片机之DS1302可调时钟

小白跟做江科大51单片机之DS1302可调时钟

原理部分 1.DS1302可调时钟介绍 单片机定时器主要占用CPU时间&#xff0c;掉电不能继续运行 图1 2.原理 图2 内部有寄存器&#xff0c;寄存的时候以时分秒寄存&#xff0c;以通信协议实现数据交互&#xff0c;就可以实现对数据进行访问和读写 3.主要寄存器定义 CE芯片使能…
阅读更多...
js对象 静态方法和实例方法

js对象 静态方法和实例方法

求下面代码的输出结果&#xff1a; 首先先分析一下上面各函数&#xff1a; Person.say function(){console.log("a")} 第一个say()方法是定义在Person函数身上的&#xff0c;我们如果想使用这个方法&#xff0c;可以通过Person().say()来调用 this.say function()…
阅读更多...
【Docker7】Docker安全及https安全认证

【Docker7】Docker安全及https安全认证

Docker安全及https安全认证一、Docker 容器与虚拟机的区别1、隔离与共享2、性能与损耗3、不同点 二、Docker 存在的安全问题1、Docker 自身漏洞2、Docker 源码问题 三、Docker 架构缺陷与安全机制1、容器之间的局域网攻击2、DDoS 攻击耗尽资源2.1 什么叫CC攻击&#xff1f;什么…
阅读更多...
Python实现汉诺塔演示程序

Python实现汉诺塔演示程序

Python实现汉诺塔演示程序 汉诺塔问题 一个板子上有三根柱子以及一些大小各不相同的圆盘。我们分别把这三根柱子叫做起始柱A、辅助柱B及目标柱C&#xff0c;汉诺塔移动圆盘的规则如下&#xff1a; 把起始柱A上所有的圆盘都移动到C柱&#xff0c;且在移动过程中始终保持圆盘从…
阅读更多...
先进电机技术 —— 伺服驱动器与变频器

先进电机技术 —— 伺服驱动器与变频器

一、变频器与伺服驱动器发展趋势 在近年来的技术发展中&#xff0c;变频器和伺服驱动器均呈现出显著的先进性提升和技术融合趋势&#xff0c;以下是一些主要的发展方向&#xff1a; ### 变频器的发展趋势&#xff1a; 1. **智能化与网络化**&#xff1a; - 高级变频器集成…
阅读更多...
【知识分享】自动化测试首选接口自动化？

【知识分享】自动化测试首选接口自动化？

在分层测试的“金字塔”模型中&#xff0c;接口测试属于第二层服务集成测试范畴。 相比UI自动化测试而言&#xff0c;接口自动化测试收益更大&#xff0c;且容易实现&#xff0c;维护成本低&#xff0c;有着更高的投入产出比。因此&#xff0c;项目开展自动化测试的首选一般为接…
阅读更多...
计算机网络(基础篇)复习笔记——体系结构/协议基础（持续更新中......)

计算机网络(基础篇)复习笔记——体系结构/协议基础（持续更新中......)

目录 1 计算机网络基础相关技术Rip 路由更新操作 2 体系结构(OSI 7层, TCP/IP4层)应用层运输层网络层IPv4无分类域间路由选择 CIDRIPV6 数据链路层循环冗余校验CRC协议设备 物理层传输媒体信道复用技术宽带接入技术数据通信 3 网络局域网(以太网Ethernet) 4 通信过程编码:信道极…
阅读更多...
vue router 解决路由带参数跳转时出现404问题

vue router 解决路由带参数跳转时出现404问题

我的页面是从一个vue页面router跳转到另一个vue页面&#xff0c;并且利用windows.open() 浏览器重新创建一个页签。但是不知道为什么有时候可以有时候又不行&#xff0c;经过反复测试与分析&#xff0c;最终发现是因为有一个参数的值里包含了小数点., 小数点是浏览器合法字符&a…
阅读更多...
Pytest测试中的临时目录与文件管理！

Pytest测试中的临时目录与文件管理！

在Pytest测试框架中&#xff0c;使用临时目录与文件是一种有效的测试管理方式&#xff0c;它能够确保测试的独立性和可重复性。在本文中&#xff0c;我们将深入探讨如何在Pytest中利用临时目录与文件进行测试&#xff0c;并通过案例演示实际应用。 为什么需要临时目录与文件&a…
阅读更多...
#KEIL使用

#KEIL使用

关于在调试时&#xff0c;有些局部变量值无法在窗口中查看报错“not in scope"&#xff0c;是被优化掉了&#xff0c;降低优化等级即可。 参考博客&#xff1a; KeilMDK 开发过程中遇到一些奇怪问题记录_keil遇到了不正当的冲突-CSDN博客
阅读更多...
全国保护性耕作/常规耕作农田分类数据集

全国保护性耕作/常规耕作农田分类数据集

基于Sentinel-2遥感产品&#xff0c;使用来自文献调研和目视解译产生的保护性/常规耕作样本点&#xff0c;通过交叉验证方法训练随机森林分类器&#xff0c;生成了2016-2020年全国保护性耕作/常规耕作农田分类数据集。分类代码&#xff1a;0值代表非农田&#xff0c;1值表示第一…
阅读更多...
“轻松入门Electron：一步步构建梦想中的桌面软件

“轻松入门Electron：一步步构建梦想中的桌面软件

在数字化的浪潮中&#xff0c;桌面应用依旧占据着其独特而重要的位置&#xff0c;不论是在企业解决方案、专业工具软件还是个性化应用领域中都是如此。随着技术的演进&#xff0c;创建这些应用的过程已经变得更为简单和可行&#xff0c;尤其是随着Electron等框架的出现。Electr…
阅读更多...
【异常处理】sbt构建Chisel库时出现extracting structure failed:build status:error的解决办法

【异常处理】sbt构建Chisel库时出现extracting structure failed:build status:error的解决办法

文章目录 报错背景&#xff1a;解决思路&#xff1a;①IDEA中配置本地的SBT进行下载②更改下载源为华为的镜像站1. 修改sbtconfig.txt2. 增加repositories文件 ③查看报错信息 总结整理的Scala-Chisel-Chiseltest版本信息对应表 报错背景&#xff1a; 最近在写Chisel时&#x…
阅读更多...
K8s-MySQL主从集群

K8s-MySQL主从集群

K8s-MySQL主从集群 引言 该案例代码均可从https://github.com/WeiXiao-Hyy/k8s_example 获取&#xff0c;欢迎Star&#xff01; 需求 一个“主从复制”的MySQL集群有一个主节点Master有多个从节点Slave从节点需要能水平扩展所以写操作只能在主节点上执行读操作可以在所有节点…
阅读更多...
Navicat Premium：掌控数据库的强大工具

Navicat Premium：掌控数据库的强大工具

在当今数字化的时代&#xff0c;数据管理变得越来越重要。无论您是数据库管理员、开发人员还是普通用户&#xff0c;找到一个高效、易用的数据库管理工具是至关重要的。Navicat Premium for Mac/Win 就是这样一款强大的多协议数据库管理工具&#xff0c;它将为您的数据库管理体…
阅读更多...
HPE ProLiant MicroServer Gen8 RAID 1 扩容、故障恢复探索

HPE ProLiant MicroServer Gen8 RAID 1 扩容、故障恢复探索

声明&#xff1a;本探索只针对HP Microserver Gen8 Smart Array B120i板载阵列卡组建RAID 1&#xff08;不是RAID 10&#xff09;&#xff0c;不同阵列卡结果可能会不同&#xff0c;请谨慎操作&#xff0c;本人不对你操作后导致的任何数据丢失或者损失承担任何责任&#xff0c;…
阅读更多...
Java SE入门及基础（29）

Java SE入门及基础（29）

第三节 访问修饰符 1. 概念 访问修饰符就是控制访问权限的修饰符号 2. 类的访问修饰符 类的访问修饰符只有两种&#xff1a;public 修饰符和默认修饰符&#xff08;不写修饰符就是默认&#xff09; public 修饰符修饰类表示类可以公开访问。默认修饰符修饰类表示该类只能…
阅读更多...
融资项目——网关微服务

融资项目——网关微服务

1. 网关的路由转发功能 在前后端分离的项目中&#xff0c;网关服务可以将前端的相关请求转发到相应的后端微服务中。 2. 网关微服务的配置 首先需要创建一个网关微服务&#xff0c;并添加依赖。 <!-- 网关 --><dependency><groupId>org.springframework.cl…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023