meta元数据元素

news2024/10/5 17:21:30

文章目录

  • 元数据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" `属性指定
  如:

      <meta
  http-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.coloradmin.cn/o/1511185.html

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

相关文章

基岩多点位移计分体安装法的应用与技巧

基岩多点位移计分体安装法的应用与技巧

在基岩多点位移计的安装过程中&#xff0c;当测杆过长或工作场地受限时&#xff0c;分体安装法成为了一种高效且实用的选择。这种安装方法能够确保位移计在复杂环境下仍能准确测量&#xff0c;为工程安全提供有力保障。 在分体安装法的实施过程中&#xff0c;需先将最深测点的测…
阅读更多...
QPSK_NDATED_DDPED学习

QPSK_NDATED_DDPED学习

该QPSK系统框图如下所示&#xff1a; 首先产生随机的四位整数&#xff0c;经过QPSK Modulator Baseband 进行星座图映射&#xff0c;然后经过脉冲整形和调制后发送到高斯带通信道中&#xff0c;在接收端首先进行解调&#xff0c;将带通信号转化为基带信号&#xff0c;再经过符号…
阅读更多...
mysql中 多表查询介绍

mysql中 多表查询介绍

在 MySQL 中&#xff0c;多表查询是 SQL 语句的重要组成部分&#xff0c;用于从两个或多个表中检索数据。多表查询可以帮助我们更灵活地处理复杂的数据关系&#xff0c;并从中获取所需的信息。以下是 MySQL 中常见的多表查询及其特点、区别和应用场景。 常见多表查询 1. **内连…
阅读更多...
springboot264基于JAVA的民族婚纱预定系统的设计与实现

springboot264基于JAVA的民族婚纱预定系统的设计与实现

民族婚纱预定系统 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本民族婚纱预定系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理…
阅读更多...
Lesson 6 Convolutional Neural Network(CNN)

Lesson 6 Convolutional Neural Network(CNN)

听课&#xff08;李宏毅老师的&#xff09;笔记&#xff0c;方便梳理框架&#xff0c;以作复习之用。本节课主要讲了CNN的适用范围&#xff0c;整体架构与工作流程&#xff0c;CNN的应用&#xff0c;CNN的缺点以及解决方法。 1. CNN的输入与输出 CNN是专门为了图像而设计的一…
阅读更多...
allegro PCB设计心得笔记(二) -- ERROR(SPMHUT-144): Illegal arc specification

allegro PCB设计心得笔记(二) -- ERROR(SPMHUT-144): Illegal arc specification

使用Allegro PCB Editor设计PCB&#xff0c;其中使用了中文丝印&#xff0c;设计完成后&#xff0c;进行Tools -> Database Check&#xff0c;提示如下错误&#xff1a; 对PCB文件进行反复检查&#xff0c;也没有找到具体问题&#xff0c;但是删除中文丝印封装后&#xff0c…
阅读更多...
算法---滑动窗口练习-1（长度最小的子数组）

算法---滑动窗口练习-1（长度最小的子数组）

长度最小的子数组 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址&#xff1a;长度最小的子数组 2. 讲解算法原理 首先&#xff0c;定义变量n为数组nums的长度&#xff0c;sum为当前子数组的和&#xff0c;len为最短子数组的长度&#xff0c;初始值为INT_MAX&am…
阅读更多...
Rust入门：C++和Rust动态库（dll）的相互调用

Rust入门：C++和Rust动态库（dll）的相互调用

无论是C调用Rust动态库还是Rust调用C动态库&#xff0c;其操作基本都是一样地简单&#xff0c;基本和C调用C的动态库没什么区别&#xff0c;只需要列出所需要导入的函数&#xff0c;并链接到相应的lib文件即可。 这里&#xff0c;在windows中&#xff0c;我们以dll动态库为例说…
阅读更多...
初窥机器学习

初窥机器学习

人工智能 近几年来&#xff0c;人工智能&#xff08;AI&#xff09;已成为家喻户晓的术语&#xff0c;我们在游戏、电影&#xff08;还记得J.A.R.V.I.S吗&#xff1f;&#xff09;和书籍中经常看到它的提及和描绘&#xff0c;但人工智能究竟是什么呢&#xff1f; 人工智能简单…
阅读更多...
考察1学生学籍系统winform .net6 sqlserver

考察1学生学籍系统winform .net6 sqlserver

考察1学生学籍系统winform .net6 sqlserver 下载地址: 考察1学生学籍系统winform .net6 sqlserver winform(.net6)sqlserver数据库 只有数据库的表结构需要自己建表 启动程序 登录失败 进入主界面 项目获取&#xff1a; 项目获取&#xff1a;typora: typora/img (gitee.com…
阅读更多...
【Docker】容器的生态系统

【Docker】容器的生态系统

Docker提供了一整套技术支持&#xff0c;包括核心技术、平台技术、支持技术。 核心技术 容器核心技术是指能让Container&#xff08;容器&#xff09;在host&#xff08;集群、主机&#xff09;上运行起来的那些技术。 1&#xff09;容器规范&#xff1a;OCI&#xff08;runt…
阅读更多...
Twitter广告投放技巧

Twitter广告投放技巧

明确目标受众&#xff1a; 确定你的目标受众&#xff0c;包括他们的兴趣、地理位置、年龄等。Twitter提供了广告定位选项&#xff0c;确保你的广告被展示给最相关的用户。 使用吸引人的图像和视频&#xff1a; 在Twitter上&#xff0c;图像和视频是引起关注的关键。确保你的广…
阅读更多...
数据结构与算法第五套大题

数据结构与算法第五套大题

1.图的最小生成树&#xff0c;各边权值之和&#xff1a; E{(1,5),(5,2),(5,3),(3,4)},W10 2.平均查找长度&#xff1a; 方法论&#xff1a; 直接将其变成一颗二叉树&#xff0c;然后计算每个节点的数学期望*比较次数之和/7 比如&#xff1a; 15为1/7&#xff0c;只需要比较一次…
阅读更多...
数据库系统概念（第一周）

数据库系统概念（第一周）

⚽前言 &#x1f3d0;四个基本概念 一、数据 定义 种类 特点 二、数据库 三、数据库管理系统&#xff08;DBMS&#xff09; 四、 数据库系统&#xff08;DBS&#xff09; &#x1f3c0;数据库系统和文件系统对比 文件系统的弊端 &#x1f94e;数据视图 数据抽象 …
阅读更多...
【阿里云系列】-基于云效构建部署NodeJS项目到ACK

【阿里云系列】-基于云效构建部署NodeJS项目到ACK

准备工作 01、编写Dockerfile文件可以根据不同的环境&#xff0c;新建不同的Dockerfile文件&#xff0c;比如Dockerfile-PROD # Deliver the dist folder with NginxFROM nginx:stable-alpine ENV LANGC.UTF-8 ENV TZAsia/ShanghaiCOPY dist/ /usr/share/nginx/html COPY ngi…
阅读更多...
5.BOM-操作浏览器(BOM、插件、本地存储)

5.BOM-操作浏览器(BOM、插件、本地存储)

BOM // BOM操作&#xff1a;操作浏览器(通过js的方式实现浏览器中的某些功能)// a)通过js的方式实现页面刷新效果// b)通过js的方式&#xff0c;实现浏览器的上一页、下一页// c)通过js的方式&#xff0c;实现页面的跳转Window对象 window是浏览器对象&#xff0c;又称为顶级对…
阅读更多...
Google如何快速抓接口导入到postman调试

Google如何快速抓接口导入到postman调试

Google如何快速抓接口导入到postman调试 1、F12选择对应接口&#xff0c;右键后复制接口连接信息 2、打开postman&#xff0c;点击import 3、在raw text都粘贴 4、点击continue后&#xff0c;导入就可以了
阅读更多...
音视频开发_视频基础知识

音视频开发_视频基础知识

RGB彩色原理 RGB 是表示红色 (Red)、绿色 (Green) 和蓝色 (Blue) 三种颜色的色彩模式&#xff0c;这是一种加色法。在 RGB 色彩模式中&#xff0c;通过不同比例的红、绿、蓝三原色的混合可以得到各种不同颜色。这是因为人眼对红、绿、蓝三种颜色特别敏感&#xff0c;通过它们的…
阅读更多...
前端页面访问后台hiveserver2，阶段性报错

前端页面访问后台hiveserver2，阶段性报错

1、运行环境 Windows11下安装VMware&#xff0c;VMware下安装CentOS7 Linux系统&#xff0c;三台虚拟机集群部署hadoop&#xff0c;安装hive&#xff1b; 在Linux下安装Eclipse&#xff0c;创建maven工程&#xff0c;使用hive-jdbc-2.3.2访问hiveserver2 2、在windows11下&…
阅读更多...
成都爱尔林江院长解析巩膜镜是什么？它适合哪些人群

成都爱尔林江院长解析巩膜镜是什么？它适合哪些人群

巩膜镜&#xff0c;全称为硬性透氧性巩膜接触镜&#xff0c;它有着特殊设计&#xff0c;大直径镜片像桥梁一样呈拱形覆盖角膜及角巩膜缘&#xff0c;从角膜上方横跨而过完全无接触、无任何机械性摩擦&#xff0c;最终贴合于巩膜。 巩膜镜的作用原理 光学成像&#xff1a; 配戴…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023