html5学习之meta

发表于:
来源:阿酷技术学习
作者:阿酷

在我们的日常开发中,经常会用到meta标签,比如向搜索引擎提供描述和关键词。meta标签的主要用于表述页面中其它标签无法表述的元数据。

在html5分类中它属于:

Metadata content(元数据content):在head中,此时不带有itemprop

如果有itemprop,此时它属于flow content 或者phrasing content,用在body中。

content model:

the 'nothing' content model,没有结尾标签</meta>,是否有自关闭'/'没有影响

name,charset,http-equiv,itemprop必须要有一个属性,当有name,http-equiv,itemprop时,必须要有content属性,否则此属性将被忽略。

当表述文档的元数据时用’name‘属性,

当表示文档编码的时候用charset属性,

当表述pragma指令的时候用http-equiv属性.

本文下面主要讲解:

  1. meta指定文章编码
  2. 经常用得name属性
  3. pragma指令
  4. 使用meta标签控制reffer

meta指定文章编码

charset方式:

//推荐在html5中使用此方法
<meta charset="utf-8">
//xml中
<?xml version="1.0" encoding="utf-8"?>

pragma指令方式

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

经常用得name属性:

application-name

<meta name="application-name" content="阿酷技术学习">

如果页面是一个web application,则表示web 应用程序名字,否则可以忽略。

viewport

<meta name="viewport" content="width=device-width, inital-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  • width:用于设置视窗口的宽度,可以设置为device-width(设备的宽度),也可以是自定义的值。
  • initial-scale:用于设置缩放比例,可以是任意数值的比例。
  • minimum-scale:用于设置最小缩放比例。
  • maximum-scale:用于设置最大缩放比例。
  • user-scalable:用于设置是否禁止用户缩放页面。

keywords

<meta name="keywords" content="python,java,nosql,redis,css,mysql,linux,web开发,移动app开发,全栈开发,arkuu.com">

页面关键字

description

 <meta name="description" content="阿酷技术学习是阿酷建立的一个技术学习网站,旨在记录自已在开发学习过程中的问题,同时希望能够给你带来技术学习上的进步,愿我们一起进步。">

页面描述

format-detection

//Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iOS.
//IOS safari
<meta name="format-detection" content="telphone=no">
  • telphone:是否禁止浏览器识别页面中的电话号码。no:禁止,yes不禁止
  • eamil:是否就职浏览器识别页面中的邮件地址。no:禁止,yes不禁止

author

<meta name="application-name" content="阿酷">

此页面作者

applicable-device

//pc端时
<meta name="applicable-device" content="pc">
//mobile
<meta name="applicable-device" content="mobile">

此标签对百度有用

robots

//索引此页面,而且抓取页内链接分配权重
<meta name="robots" content="index,follow" />
//索引此页面,不抓取页内链接不分配权重
<meta name="robots" content="index,nofollow" />
//不索引此页面,不抓取页内链接不分配权重
<meta name="robots" content="noindex,nofollow" />
//不索引此页面,但抓取页内链接不分配权重
<meta name="robots" content="noindex,follow" />

给搜索引擎提供向导

mobile-agent

//head_rel_url是手机版本的url.
<meta name="mobile-agent" content="format=html5;url={{head_rel_url}}">

mobile-web-app-capable

//Sets whether a web application can be added standalone to a home screen and launched in fullscreen mode. Also proposed as a vendor-neutral version of apple-mobile-web-app-capable.
//设置web application是否可以被添加桌面成一个独立应用程序,并且打开的时候是全屏模式。apple手机用apple-mobile-web-app-capable.
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="{{ settings.STATIC_URL }}ico/app-{{publicss.SIMPLE}}-icon72x72@2x.png">

这个mobile-web-app-capable如果为yes,与link,rel='icon'一起使用,作为添加到主屏幕的图标

apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style,apple-mobile-web-app-title

//Sets whether a web application runs in full-screen mode.
//设置是否应用程序运行全屏模式
<meta name="apple-mobile-web-app-capable" content="yes">
//Sets the style of the status bar for a web application.
//设置应用程序状态栏
<meta name="apple-mobile-web-app-status-bar-style" content="black">
//Sets the title of the application when added to the homescreen on iOS6+
//添加到主屏幕以后,标题。适用ios6+
<meta name="apple-mobile-web-app-title" content="{{publicss.SITE_NAME}}"/>
//添加主屏幕图标
<link rel="apple-touch-icon-precomposed" href="{{ settings.STATIC_URL }}ico/app-{{publicss.SIMPLE}}-icon72x72@2x.png">

设定ios6+系统,web应用添加主屏幕的能力,样式,图标,标题

msapplication-TileImage和msapplication-TileColor

//The "msapplication-TileImage" metadata define the path to an image to be used as background for a tile in Pinned Sites in Windows 8. Tile images must be square PNGs 144px by 144px.
//定义win8中,定义磁贴背景,144x144
<meta name="msapplication-TileImage" content="{{ settings.STATIC_URL }}ico/app-{{publicss.SIMPLE}}-icon144x144@2x.png">
//The "msapplication-TileColor" metadata define the background color of a tile in Pinned Sites in Windows 8. The tile color can be specified as a hex RGB color //using CSS’s #rrggbb notation, via CSS color names, or by the CSS rgb() function.
//定义win8中,磁贴颜色
<meta name="msapplication-TileColor" content="#0e90d2">

定义WIN8中磁贴的图标和颜色

renderer

双核浏览器,指定渲染内核
<meta name="renderer" content="webkit">

pragma指令

StateKeywordNotes
页面语言content-language不标准
页面编码content-type 
默认样式default-style 
刷亲refresh 
cookieset-cookie不标准
ie的渲染版本x-ua-compatible 
内容安全策略content-security-policy 


页面语言(http-equiv="content-language")

这个content-language指令不是标准,建议在html5中用<html lang="zh-CN">代替

页面编码(http-equiv="content-type")

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

默认样式(http-equiv="default-style")

如果你想要给应用定义多套样式,然后根据用户选择来加载不同的样式,你可以将http-equiv设置为default-style,然后你设置content的值为link或style的对应值。

<meta http-equiv="default-style" content="default">
<style title="default">
body {
  background: #c00;
}
</style>
<style title="new">
body {
  background: #000;
}
</style>

页面编码(http-equiv="refresh")

//页面每300s刷新一次
<meta http-equiv="Refresh" content="300">
//20s后slide show方式到page4.html
<meta http-equiv="Refresh" content="20; URL=page4.html">

Cookie(http-equiv='set-cookie')

这个pragma是非标准的,暂时忽视

ie渲染版本(http-equiv='x-ua-compatible')

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

适合IE

内容安全策略(http-equiv='x-ua-compatible')

//A page might choose to mitigate the risk of cross-site scripting attacks by preventing the execution of inline JavaScript, as well as blocking all plugin content, //using a policy such as the following:
//一个页面可以选择使用以下策略,通过阻止内联JavaScript的执行,以及阻塞所有插件内容,来降低跨站点脚本攻击的风险

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">

禁止转码(http-equiv='Cache-Control')

<meta http-equiv="Cache-Control" content="no-siteapp" />

使用Referer Meta标签控制referrer

在某些情况下,出于一些原因,网站想要控制页面发送给 server 的 referrer信息的情况下,可以使用这一 referrermetadata 参数。

比如:

社交网站一般都会有用户个人页面,这些页面中用户都有可能添加一些外网的链接,而社交网站有可能不希望在用户点击了这些链接的时候,泄露用户页面的 URL ,因为这些 URL 中可能包含一些敏感信息。当然,有些社交网站可能只想在 referrer中提供一个 hostname,而不是完整的 URL 信息。

有些使用了 https 的网站,可能在 URL 中使用一个参数(sid 等)来作为用户身份凭证,而又需要引入其他 https 网站的资源,这种情况下,网站肯定不希望泄露用户的身份凭证信息。

参考

referer 的 metedata 参数可以设置为以下表1中第一列的值,如果被设为第一列的值,则设置为第二列的REFERRER策略,如果是2中,则直接使用相应策略

  1. Legacy valueReferrer policy
    neverno-referrer
    defaultno-referrer-when-downgrade
    alwaysunsafe-url
    origin-when-crossoriginorigin-when-cross-origin
  2.  
enum ReferrerPolicy {
  "",
  "no-referrer",
  "no-referrer-when-downgrade",
  "same-origin",
  "origin",
  "strict-origin",
  "origin-when-cross-origin",
  "strict-origin-when-cross-origin",
  "unsafe-url"
};

如果在文档中插入 meta 标签,并且 name 属性的值为 referrer,浏览器客户端将按照如下步骤处理这个标签:

1.如果 meta 标签中没有 content 属性,则终止下面所有操作
2.将 content 的值复制给 referrer-policy ,并转换为小写
3.检查 content 的值是否为上面 list 中的一个,如果不是,则将值置为 default

上述步骤之后,浏览器后续发起 http 请求的时候,会按照 content 的值,做出如下反应:

 "no-referrer"

删除 http head 中的 referer

如果在https://example.com/page.html设置策略 "no-referrer", 
然后链接到https://example.com/ (or any other URL) 将没有referrer header.

 "no-referrer-when-downgrade"

当从https链接到https有referrerheader,从https链接到http时则删除referrerheader

如果https://example.com/page.html设置策略"no-referrer-when-downgrade", 
那么链接到 https://not.example.com/ 将带有Referer https://example.com/page.html, 
当如果不是安全url时,比如http://not.example.com/将没有referrer

 "same-origin"

相同origin时,则有referrerheader,否则没有

如果https://example.com/page.html设置策略"same-origin",当链接到https://example.com/not-page.html将带有referrer header:https://example.com/page.html.
链接到https://not.example.com/ 则没有referrer header

"origin"

任何origin都有referrerheader,referrer值是origin

"strict-origin"

  • 当从https到https时有referrerheader,referrer值是origin,https到http时没有。
  • 当从http到任何(https or http)都有referrerheader,referrer值是origin
如果https://example.com/page.html设置"strict-origin",链接到https://not.example.com将带有referrer header https://example.com/.
到 http://not.example.com 没有.
如果http://example.com/page.html设置"strict-origin", 链接到http://not.example.com or https://example.com将带有referrer header http://example.com/.

"origin-when-cross-origin"

跨域是,referrer值是origin,不跨域则完整

如果https://example.com/page.html设置"origin-when-cross-origin", 那么链接到https://example.com/not-page.html 将带有referrer  header https://example.com/page.html.
链接到https://not.example.com/ 将带有referrer header https://example.com/, 即使不是https

 "strict-origin-when-cross-origin"

跨域https带有origin,跨域http则不带,同域http完整

如果https://example.com/page.html设置"strict-origin-when-cross-origin", 链接到https://example.com/not-page.html 将带有referrer header https://example.com/page.html.
链接到https://not.example.com/ 将带有referrer header https://example.com/.
链接到http://not.example.com/将不带有 referrer header.

"unsafe-url"

把url按下列规则剥离,然后发送referrerheader

If url is null, return no referrer.
If url’s scheme is a local scheme, then return no referrer.
Set url’s username to the empty string.
Set url’s password to null.
Set url’s fragment to null.
If the origin-only flag is true, then:
Set url’s path to null.
Set url’s query to null.
Return url.

The empty string

默认是"no-referrer-when-downgrade"

本文参考翻译:

WHATWG Wiki MetaExtensions page(https://wiki.whatwg.org/wiki/MetaExtensions)

https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element