meta

摘要:meta 是 html 语言 head 区的一个辅助性标签,位于文档的头部,不包含任何内容,标签的属性定义了与文档相关联的名称/值对。meta 标签可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

前言

meta 是 html 语言 head 区的一个辅助性标签,位于文档的头部,不包含任何内容,标签的属性定义了与文档相关联的名称/值对。

  • meta 标签永远位于 head 元素内部,元数据总是以名称/值的形式被成对传递的。
  • meta 标签可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
  • 在 HTML 中,meta 标签没有结束标签。在 XHTML 中,meta 标签必须被正确地关闭。
<meta 属性="参数" content="参数值" />

meta 标签共有两个属性,它们分别是 http-equiv 属性和 name 属性,不同的属性又有不同的参数和参数值,这些不同的参数实现了不同的网页功能。

属性 描述
http-equiv Content-Type
expires
refresh
set-cookie
把 content 属性关联到 HTTP 头部。
name author
description
keywords
generator
revised
others
把 content 属性关联到一个名称。
scheme some_text 定义用于翻译 content 属性值的格式。

http-equiv

http-equiv 顾名思义,相当于 http 的文件头,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为 content,content 中的内容其实就是各个参数的变量值。

<meta http-equiv="参数" content="参数值" />

其中 http-equiv 属性主要有以下几种参数:

参数 说明 参数 说明
Content-Type 内容类型 Cache-Control 缓存控制
Pragma 禁用缓存 Expires 过期时间
Refresh 刷新 Set-Cookie 设置 Cookie
Window-target 窗口设置 Pics-label 网页等级评定
Page_Enter、Page_Exit 网页过度方式 Pics-label 网页等级评定
keywords 关键字 description 页面描述

1、Content-Type(内容类型)

告诉浏览器当前文档是 html 网页类型的文件,及该网页内容的字符编码是 UTF-8,UTF-8 是世界通用的语言编码。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  • text/html:表示当前文档类型是 html 网页格式的文本(text),文档类型除了 text/html 之外,还有 text/css、text/javascript 等;
  • charset:character set(字符集)的缩写,表示该网页内容的字符编码。全球使用的最多就是 UTF-8,此外还有 GB2312(简体中文)、BIG5(繁体中文)、ISO-8859-1(英文)、iso-2022-jp(日文)、ks_c_5601(韩文)等。

2、Content-Script-Type(脚本类型)

W3C 网页规范,指明页面中脚本的类型。可以不加,目前 script 默认就是 javascript。

<meta http-equiv="Content-Script-Type" content="text/javascript" />
  • text/html:表示当前文档类型是 html 网页格式的文本(text),文档类型除了 text/html 之外,还有 text/css、text/javascript 等;
  • charset:character set(字符集)的缩写,表示该网页内容的字符编码。全球使用的最多就是 UTF-8,此外还有 GB2312(简体中文)、BIG5(繁体中文)、ISO-8859-1(英文)、iso-2022-jp(日文)、ks_c_5601(韩文)等。

2、Cache-Control(缓存控制)

<meta http-equiv="Cache-Control" content="参数值" />

其中,参数值有以下几个值:

  • public:所有内容都将被缓存(包括本地缓存、浏览器、各种代理服务器等);
  • private:内容只缓存到私有缓存中(仅客户端可以缓存,代理服务器不可缓存。比如,CDN 不能缓存 private 的响应);
  • no-cache:先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存;
  • no-store:不允许缓存,每次访问页面都需要请求服务器重新加载网页内容;
  • only-if-cached:如果缓存存在,只使用缓存,不需要请求服务器加载更新网页内容;
  • must-revalidation/proxy-revalidation:如果缓存的内容失效,请求必须发送到服务器以进行重新验证;
  • max-age=xxx:缓存的内容将在 xxx 秒后失效,这个选项只在 HTTP 1.1 可用;
  • no-transform:不得对网页内容或网页中的资源进行转码,以便节省缓存空间或者减少缓慢链路上的流量;
  • no-siteapp:禁止百度、神马、搜狗等移动搜索引擎对网页进行转码处理。

什么是百度转码?在互联网中主要有 PC 和 mobile 两类网页资源,其中 PC 类资源主要基于电脑浏览,而 mobile 类资源是基于移动设备浏览的。

当我们使用手机或平板等移动设备的时候,由于很多 PC 页在移动终端中直接浏览的体验较差(交互、兼容和流量等),所以百度会通过 Siteapp 转码技术,将 PC 页进行格式转换,转换为适合手机浏览的 mobile 网页,使其能在移动终端浏览器有较好的浏览体验,这就是百度转码

即然百度转码本身是为增强移动设备的浏览体验为目的,那我们为什么还要禁止百度转码呢?

  • 被转码之后,你的站点内容已经被百度抓走了,用户从搜索引擎得到搜索结果,能看到你的内容,但实际上并没有来到你的网站,这样会减小网站的流量;
  • 百度转码并非适合所有 Web 站点,很多网站经过百度转码之后会不可避免的出现内容错位,浏览体验很差;
  • 有的站点本身已经提供了适用于移动设备的浏览页面,所以需要禁止百度转码。

2、Pragma(禁用缓存)

禁止浏览器从本机的缓存中调阅页面内容,HTTP 1.0 支持项。设定后,访问者将无法脱机浏览。

<meta http-equiv="Pragma" content="no-cache" />

3、Expires(过期时间)

设定网页的过期时间,一旦网页过期,则请求服务器重新加载网页内容,过期时间格式需使用 GMT。

<meta http-equiv="Expires" content="Wed, 20 Jun 2022 22:33:00 GMT" />
  • 如果过期时间设置为过去的某个时间,则表示每次打开网页,就会从服务器重新加载网页内容;
  • 如果设置 content="0" 或 content="-1" 或其它负数,则表示网页在本地缓存 0 秒后就过期了,也会从服务器重新加载网页内容。

GMT(Greenwich Mean Time)是格林尼治标准时间,GMT 时间 +8 小时所得结果就是北京时间。

3、Refresh(刷新跳转)

自动刷新并跳转到新页面。

<meta http-equiv="Refresh" content="2; URL=http://www.dedenotes.com/" />

注意:其中的 2,是指停留 2 秒钟后自动刷新跳转到 URL 网址。

4、Set-Cookie(设置 Cookie)

如果网页过期,那么存储的 Cookie 将被删除。

<meta http-equiv="Set-Cookie" content="kkk=xxx; path=/; expires=Wednesday,20-Jun-2022 22:33:00 GMT" />

其中,kkk 为 Cookie 名称,xxx 是 Cookie 的值,path 是与 Cookie 相关联的 Web 路径,expires 是过期时间,使用 GMT 的时间格式。

5、Window-target(窗口设置)

<meta http-equiv="Window-target" content="_top" />

content 属性后面的选项一共可以有四种属性值,分别如下:

  • -top:表示页面以当前整个窗口显示,可以防止别人在框架里调用自己的页面;
  • -blank:表示页面以新打开的窗口显示;
  • -parent:表示页面以父容器或窗口显示,比如,框架嵌套;
  • -self:表示页面以当前容器或窗口显示,比如,框架嵌套。

7、Pics-label(网页等级评定)

<meta http-equiv="Pics-label" contect="网页等级评定相关说明" />

在 IE 的 Internet 选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过 meta 属性来设置的。

RSAC(美国娱乐委员会)的评估系统提供了一种用来评价 Web 站点内容的标准,用户可以设置 IE3.0 以上的浏览器来排除包含有色情和暴力内容的站点。

8、Page_Enter、Page_Exit(网页过度方式)

<meta http-equiv="Page-Enter" content="进入时的过渡效果" /> 
<meta http-equiv="Page-Exit"  content="退出时的过渡效果" /> 
<meta http-equiv="Site-Enter" content="进入时的过渡效果" />
<meta http-equiv="Site-Exit"  content="退出时的过渡效果" />
以上四大类型的每一类相对应的 content 属性值又可以分为两个小类:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)" />

blendTrans(Duration=秒数):如果用在进入页面时是淡入过渡效果;如果用在退出页面时是淡出过渡效果,但只能设置过渡持续时间,单位是秒。

<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion=12)" />
  • Duration 的值为网页动态过渡的持续时间,单位为秒;
  • Transition 是过渡方式,它的值为 0 到 23,分别对应 24 种过渡效果。如下图:

Transition 过渡效果

Duration Transition Duration Transition
0盒状收缩 1盒状放射
2圆形收缩 3圆形放射
4由下往上 5由上往下
6从左至右 7从右至左
8垂直百叶窗 9水平百叶窗
10水平格状百叶窗 11垂直格状百叶窗
12随意溶解 13从左右两端向中间展开
14从中间向左右两端展开 15从上下两端向中间展开
16从中间向上下两端展开 17从右上角向左下角展开
18从右下角向左上角展开 19从左上角向右下角展开
20从左下角向右上角展开 21水平线状展开
22垂直线状展开 23随机产生一种过渡方式

10、keywords(关键字)

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />

11、description(页面描述)

<meta http-equiv="description" content="This is dedenotes" />

11、X-UA-Compatible(IE 设置)

用来指定在 IE 8 浏览器内,以哪种 IE 版本的模式来渲染页面内容,以此来解决 IE 浏览器的兼容问题。目前大多数网站使用最多、最普遍的方式如下:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  • 如果当前 IE 浏览器安装了 Google Chrome Frame 插件,就使用 Google Chrome Frame 浏览器内核渲染页面;
  • 如果当前 IE 浏览器没有安装 Google Chrome Frame 插件,就使用 edge 模式,即使用最高版本的 IE 内核进行渲染页面。

name

name 属性主要用于描述网页,与之对应的属性值为 content,content 中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="参数" content="参数值" />

其中 name 属性主要有以下几种参数:

1. charset(字符编码)

<meta charset="utf-8" />

2. renderer(浏览器内核)

国内浏览器很多都是双内核(webkit 和 Trident),webkit 内核高速浏览,IE 内核兼容网页和旧版网站。

<meta name="renderer" content="[webkit|ie-comp|ie-stand]" />
  • webkit:使用的 webkit 内核,属于极速模式,常用于网站的高速浏览,网站打开速度快,但某些网站在极速模式下可能出现兼容性问题,显示不正常;
  • ie-comp:使用 IE 兼容模式,就是用 IE6,IE7,IE8 的渲染模式,网站打开速度比极速模式略低,但网页兼容性问题较少,常用于网银、交易支付、旧版网站;
  • ie-stand:属于 IE 标准模式,网站会使用 IE9 及以上版本的渲染方式渲染,支持硬件加速、支持 IE9 及以上版本全新的脚本渲染引擎。

3. robots(搜索引擎索引方式)

<meta name="robots" content="index,follow" />
  • all:文件将被检索,且页面上的链接可以被查询;
  • none:文件将不被检索,且页面上的链接不可以被查询;
  • index:文件将被检索;
  • follow:页面上的链接可以被查询;
  • noindex:文件将不被检索;
  • nofollow:页面上的链接不可以被查询。

4. revisit-after(搜索引擎访问频率)

一般来说,网站并不需要使用 revisit-after 来限制搜索引擎的访问频率,设置 revisit-after 也并不能提高搜索引擎抓取网页的频率。

只有当网站数据量非常大,被搜索引擎频繁的抓取,占用过多的服务器资源,影响网站的访问反应速度。在这种情况下,我们并不希望搜索引擎过于频繁抓取网页,一般设置成每隔 5—7 天来访问抓取一次网页即可!

<meta name="revisit-after" content="5 days" />

5. keywords(关键词)

<meta name="keywords" content="关键词1,关键词2,关键词3" />

6. keywords(网页描述)

<meta name="description" content="网页描述" />

7. author(作者)

<meta name="author" contect="作者信息" />

8. Copyright(版权信息)

<meta name="Copyright" content="版权信息" />

9. generator(编辑器)

表示制作或生成该网页文档的是什么编辑器软件。

<meta name="generator" content="编辑器" />

10. referrer(来源页面)

<meta name="referrer" content="always" />
  • no-referrer:任何情况下都不发送 Referrer 信息;
  • no-referrer-when-downgrade:仅当协议降级(如从 HTTPS 页面跳转到 HTTP 页面)时不发送 Referrer 信息,是大部分浏览器默认策略。
  • origin:发送只包含 host 部分的 referrer 信息,也就是只包含了协议和域名的 url,不包含域名后面部分;
  • origin-when-cross-origin:仅在发生跨域访问时,发送只包含 host 的 Referer 信息,但在同域下还是完整的,而只有协议、域名和端口都一致时,浏览器才认为是同域;
  • unsafe-url:全部都发送 Referrer 信息,是最宽松,也是最不安全的策略。

11. applicable-device(设备类型)

告知浏览器本页面属于什么类型设备的页面,主要有 PC 电脑端页面和 mobile 手机移动端页面两种设备!

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

这段告诉搜索引擎本页面既支持pc,又支持移动(mobile),也就是所谓的自适应页面!

applicable-device 标注可以帮助百度识别网站是 PC 站还是 M 站,给百度提交校验识别结果的正确性,减少百度蜘蛛把 PC 站当成 M 站,或把 M 站当成 PC 站进行抓取。

12. mobile-agent(移动适配)

<meta name="mobile-agent" content="format=[wml|xhtml|html5];url=url" />
  • [wml|xhtml|html5]:根据手机页的协议语言,选择其中一种;
  • url="url":后者代表当前 PC 页所对应的手机页 URL,两者必须是一一对应关系。

13. viewport(手机窗口)

手机浏览器是把页面放在一个虚拟的 "窗口"(viewport)中,通常这个虚拟的 "窗口" 比屏幕宽,这样就不用把网页挤到很小的窗口中,破坏没有针对手机浏览器优化的网页布局,用户可以通过平移和缩放来查看网页的不同部分。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  • width:控制 viewport 的大小,可以指定一个值,或特殊的值(如:width=device-width,device-width 为设备的宽度);
  • height:和 width 相对应,指定高度,如:height=device-height;
  • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例;
  • maximum-scale:允许用户缩放到的最大比例;
  • minimum-scale:允许用户缩放到的最小比例;
  • user-scalable:用户是否可以手动缩放。

14. apple-mobile-web-app-capable(WebApp 全屏模式)

隐藏苹果状态栏和工具栏,当把网页添加到主屏幕后,从主屏幕打开 Web 应用会以全屏模式运行。

<meta name="apple-mobile-web-app-capable" content="yes" />

15. apple-mobile-web-app-status-bar-style(状态栏颜色)

控制苹果状态栏显示样式,默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明)。

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

16. apple-mobile-web-app-title(添加到主屏后的标题)

<meta name="apple-mobile-web-app-title" content="yes" />

17. apple-itunes-app(添加智能 App 广告条)

告诉浏览器网站对应的 app,并在页面上显示下载 banner。

<meta name="apple-itunes-app" content="app-id=myAppStoreID,affiliate-data=myAffiliateData,pp-argument=myURL" />

18. format-detection(识别数字为电话号码)

当该 HTML 页面在手机上浏览时,该标签用于指定是否将网页内容中的数字号码显示为拨号的超链接,no 为不识别。

<meta name="format-detection" content="telephone=no" />

19. format-detection(识别邮箱)

no 为不识别。

<meta name="format-detection" content="email=no" />
版权声明:本文为博主原创文章,未经博主允许不得转载。http://www.dedenotes.com/html/meta.html
(1)
打赏 微信扫一扫 微信 支付宝 QQ 扫码打赏

防止表单重复提交的 4 种方法

Dedenotes 赞(3)

平时开发的项目中可能会出现下面这些情况:由于用户误操作,多次点击表单提交按钮;由于网速等原因造成页面卡顿,用户重复刷新提交页面;黑客或恶意用户使用 Postman 等工具重复恶意提交表单(攻击网站)。

meta

Dedenotes 赞(3)

meta 是 html 语言 head 区的一个辅助性标签,位于文档的头部,不包含任何内容,标签的属性定义了与文档相关联的名称/值对。meta 标签可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

HTTP消息结构 HTTP请求报文和响应报文的格式

Dedenotes 赞(3)

HTTP 协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,基于 TCP/IP 通信协议来传递数据(HTML 文件, 图片文件, 查询结果等),所有的 WWW(World Wide Web)文件都必须遵守这个标准。