zoukankan      html  css  js  c++  java
  • Meta(其他信息)

    简介

    • 元数据就是描述数据的数据
    • <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(社交网络)就能从页面上提取最有效的信息并呈现给用户。
  • 相关阅读:
    用react重构个人网站 3-23
    用react重构个人网站 3-22
    React官方文档笔记之快速入门
    .Net多线程编程—同步机制
    .Net多线程编程—Parallel LINQ、线程池
    .Net多线程编程—并发集合
    .Net多线程编程—任务Task
    【翻译】MongoDB指南/聚合——聚合管道
    【翻译】MongoDB指南/CRUD操作(四)
    【翻译】MongoDB指南/CRUD操作(三)
  • 原文地址:https://www.cnblogs.com/qq3279338858/p/10844401.html
Copyright © 2011-2022 走看看