简介

  • 元数据就是描述数据的数据
  • <meta> 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息.
    • <base> 元素 指定用于一个文档中包含的所有相对URL的基本URL。一份中只能有一个<base>元素。
    • <link>元素规定了外部资源与当前文档的关系。 这个元素可用来为导航定义一个关系框架。这个元素最常于链接样式表（外链）。
    • <style>元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。（和link的区别，style包含的是内链样式，本身没有url属性）
  • 根据属性集合的不同，元数据的类型可以是以下类型之一：
    • name被设置，代表该标签是文档级元数据，适用于整个页面。
    • http-equiv被设置，代表告诉Web服务器应该如何提供网页的信息。
    • charset被设置，表明网页使用的字符编码
    • itemprop被设置，代表该标签是用户定义的元数据
      • itemprop 属性：微数据标记，采用键值对，用来让机器识别某个数据的语义。例如我的名字是王富强产生键值对name = '王富强'让机器识别‘王富强’为姓名
  • <meta> 元素必须包含在 <head> 元素中并且在HTML代码的前1024个字节内，因为某些浏览器在选择编码之前只查看前面这些字节。
  • meat 标签不支持元路径，应该始终使用完整路径

属性

  • 在同一个 <meta> 标签中，name, http-equiv 或者 charset 三者中任何一个属性存在时，itemprop 属性不能被使用。
  • 这些属性已被废弃 scheme

charset

  • 此特性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。<meta charset="utf-8">
  • 此特性的值必须是一个符合由 IANA 所定义的 字符编码首选MIME。不应该使用不兼容ASCII的编码规范，鼓励使用 UTF-8
    • utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符。（Unicode字符集的编码方式之一）
    • 使用其他字符集时，当网页包含字符集不支持的语言时将出现乱码
  • 开发者必须禁用 CESU-8, UTF-7, BOCU-1 或 SCSU 这些字符集，因为这些字符集已经被证实存在跨站脚本攻击（XSS）的风险。
  • HTTP的Content-Type头部以及任何 Byte-Order Marks 元素（字节顺序标志元素）都优先于此元素。
    • Byte-Order Marks 是指在文档头部，用于表明当前文档使用编码格式的字符串
  • 强烈建议使用该属性定义字符编码. 如果未定义，某些跨脚本技术可能危害网页，如 UTF-7 fallback cross-scripting technique（回退交叉脚本技术？）. 保持设置该属性以避免类似风险。

content

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

http-equiv

  • 这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义
  • content-type、content-language、set-cookie 这些值已经被废弃
  • content-security-policy 内容安全策略：它允许页面作者定义当前页的 内容策略。 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。https://www.cnblogs.com/qq3279338858/p/11104192.html
  • default-style这个属性指定了在页面上使用的首选样式表. content属性必须包含<link> 元素的标题, href属性链接到CSS样式表或包含CSS样式表的<style>元素的标题.
  • refresh这个属性指定
    • 如果content 只包含一个正整数,则是重新载入页面的时间间隔(秒);
    • 如果content 包含一个正整数并且跟着一个字符串,则是重定向到指定链接的时间间隔(秒)
<meta http-equiv="refresh" content="3;url=http://www.mozilla.org/">

name

  • 该属性定义文档级元数据的名称。说明该元素包含了什么类型的信息。
  • 如果这些属性的其中一个被设置了itemprop, http-equiv, charset ，就不能在设置这个属性了。
  • application-name，定义正运行在该网页上的网络应用名称；？
  • author，就是这个文档的作者名称，可以用自由的格式去定义；一些内容管理系统能够自动获取页面作者的信息，然后用于某种目的。
  • description，其中包含页面内容的简短和精确的描述。 一些浏览器，如Firefox和Opera，将其用作书签页面的默认描述。
  • generator, 包含生成页面的软件的标识符。？
  • keywords, 包含与逗号分隔的页面内容相关的单词。（关键字，被谷歌搜索引擎忽略了， 因为作弊者填充了大量关键词到keyword， 错误地引导搜索结果。）
  • referrer 控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容：<meta name="referrer"> content 属性可取的值：
    • no-referrer 不要发送 HTTP Referer 首部。
    • origin 发送当前文档的 origin。origin指Web内容的源由用于访问它的URL 的方案(协议)，主机(域名)和端口定义
    • no-referrer-when-downgrade 当目的地是先验安全的(https->https)则发送 origin 作为 referrer ，但是当目的地是较不安全的 (https->http)时则不发送 referrer 。这个是默认的行为。
    • origin-when-crossorigin 在同源请求下，发送完整的URL (不含查询参数) ，其他情况下则仅发送当前文档的 origin。
    • unsafe-URL 在同源请求下，发送完整的URL (不含查询参数)。
    • 动态地插入<meta name="referrer"> (通过 document.write 或者 appendChild) 是不起作用的。同样注意如果同时有多个彼此冲突的策略被定义，那么 no-referrer 策略会生效。
  • 还有以下值常被使用，但未包含到规范当中。creator、googlebot、publisher、robots、slurp、viewport
  • viewport 它提供有关视口初始大小的提示，仅供移动设备使用。<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    • 窄屏幕设备（如移动设备）在一个虚拟窗口或视口中渲染页面，这个窗口或视口通常比屏幕宽；然后缩小渲染的结果，以便在一屏内显示所有内容。这样做是因为许多页面没有做移动端优化，在小窗口渲染时会乱掉（或看起来乱）
    • 对于用媒体查询针对窄屏幕做了优化的页面，这种机制不大好 - 比如如果虚拟视口宽 980px，那么在 640px 或 480px 或更小宽度要起作用的媒体查询就不会触发了，浪费了这些响应式设计。
    • 最近的智能手机通常具有5英寸屏幕，分辨率高达1920-1080像素（~400dpi）。因此，许多浏览器让每个 CSS 像素对应多个硬件像素，以便在很小的物理尺寸上显示的页面能看清楚。
      • DPI图像每英寸长度内的像素点数。
    • Mobile Safari通常在竖屏转横屏时只缩放页面，而不会把页面重新布局成横屏载入时的效果。可以增加一个maximum-scale=1来避免这样的的缩放
    • content 属性可取的值
      • width 一个正整数或者字符串，以pixels（像素）为单位， 定义viewport（视口）的宽度。
      • device-width 特殊值，代表缩放为 100% 时以 CSS 像素计量的屏幕宽度。？
      • height 一个正整数或者字符串，以pixels（像素）为单位， 定义viewport（视口）的高度
        • device-height
      • initial-scale 一个0.0 到10.0之间的正数，定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。
      • maximum-scale 一个0.0 到10.0之间的正数，定义缩放的最大值；它必须大于或等于minimum-scale的值，不然会导致不确定的行为发生。
      • minimum-scale 一个0.0 到10.0之间的正数，定义缩放的最小值；它必须小于或等于maximum-scale的值，不然会导致不确定的行为发生。
      • user-scalable 一个布尔值（yes 或者no），如果设置为 no，用户将不能放大或缩小网页。默认值为 yes。
  • <meta name="theme-color" content="#B12A34">主题颜色？
  • <meta property="og:image" content="icons/icon-512.png">
    • 专有的属性，旨在向某些网站(如社交网站)提供可使用的特定信息（例如在社交网站上分享链接，这个链接不再是简单的URL，而会展示成图文并茂的说明）
    • Open Graph Protocol（ Facebook 编写的开放内容协议）任何网页只要遵守该协议，SNS（社交网络）就能从页面上提取最有效的信息并呈现给用户。

Meta（其他信息）的更多相关文章

  1. hbase meta表的结构

    下面看下hbase:meta 表的结构,hbase:meta表中,保存了每个表的region地址,还有一些其他信息,例如region的名字,HRegionInfo,服务器的信息.hbase:meta表 ...

  2. vue教程3-06 vue路由嵌套(多层路由)，路由其他信息

    多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. 常用 meta 整理

    <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" con ...

  4. meta标签

    参考:http://www.jb51.net/web/158860.html META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). 一.HTTP标题信息(HTT ...

  5. Django模型类Meta元数据详解

    转自:https://my.oschina.net/liuyuantao/blog/751337 简介 使用内部的class Meta 定义模型的元数据,例如: from django.db impo ...

  6. H5 meta小结

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, ...

  7. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  8. 较为完整的meta

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 浏览器内核控制Meta标签说明文档【转】

    背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲 ...

随机推荐

  1. 查看Linux系统内存、CPU、磁盘使用率和详细信息

    一.查看内存占用 1.free # free -m 以MB为单位显示内存使用情况 [root@localhost ~]# free -m total used free shared buff/cac ...

  2. AVR单片机教程——示波器

    本文隶属于AVR单片机教程系列.   在用DAC做了一个稍大的项目之后,我们来拿ADC开开刀.在本讲中,我们将了解0.96寸OLED屏,移植著名的U8g2库到我们的开发板上,学习在屏幕上画直线的算法, ...

  3. 智和网管平台SugarNMS赋能AI智能化运维

    11月14日,由<网络安全和信息化>和IT运维网联合主办的2019(第十届) IT运维大会上海站在锦荣国际大酒店如期召开.运维领域权威专家.技术领袖.各类运维相关技术产品提供商及服务商共同 ...

  4. Python3标准库：weakref对象的非永久引用

    1. weakref对象的非永久引用 weakref模块支持对象的弱引用.正常的引用会增加对象的引用数,并避免它被垃圾回收.但结果并不总是如期望中的那样,比如有时可能会出现一个循环引用,或者有时需要内 ...

  5. mybatis实体为什么要提供一个无参的构造函数

    提问:Mybatis查询结果映射到实体类的时候,实体类为什么必须有一个空的构造函数? 类中如果没有构造函数,隐藏是无参构造函数,方便实体类需要通过Mybatis进行动态反射生成.如果实体类中一旦声明构 ...

  6. Jenkins集成jacoco收集单元测试覆盖率

    Jenkins集成jacoco收集单元测试覆盖率 2020-02-28 目录 0 整体思路1 Jenkins创建JacocoIntegrateTestDemo项目2 配置源码管理3 配置Build4 ...

  7. include 和require 区别

    include和require的区别  1.include() 包含文件 2.include_once(filename)如果已经包含,则不再执行include_once 3.requirerequi ...

  8. Java软件工程师技能图谱

    原文链接:Java软件工程师技能图谱 最近在考虑"拥有怎样的技能才能算一名合格的java软件工程师呢?"这个问题.碰巧在github发现一个很棒的开源项目--程序员技能图谱.@Zh ...

  9. 《手把手教你构建自己的 Linux 系统》学习笔记（8）

    目录 Binutils 软件包有什么用? make -k 的作用是什么? man-pages 里有几种文档?分别表示什么意思? 如何查询指定目录的 man-pages ? 如何使用 make 命令的同 ...

  10. opencv —— floodFill 漫水填充法 实现证件照换背景

    漫水填充:floodFill 函数 简单来说,漫水填充就是自动选中与种子像素相连的区域,利用指定颜色进行区域颜色填充.Windows 画图工具中的油漆桶功能和 Photoshop 的魔法棒选择工具,都 ...