阅读 23

html知多少系列之meta

在刚开始学习html的时候并没有关注过meta标签是用来干嘛的,到现在为止也只是知道meta是用来定义一些元信息。现在想深入了解一下meta到底能干什么,让我们一起来探索下meta标签吧。

MDN对meta标签的定义:

HTML 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息.

由定义我捕获到的信息是meta标签是用来表示元数据信息的东东。那么问题来了什么是元数据信息。 在网上查了好久也没有看到对元数据信息的具体描述,那我们只能看看在使用meta的过程中能不能理解啥叫元数据信息。

meta标签的属性

1.charset
2.content
3.http-equiv
4.name

meta标签包含以上属性,下面就让我们来逐一分析每个属性是干嘛的。
复制代码

charset

此特性声明当前文档所使用的字符编码,但该声明可以被任何一个元素的 lang特性的值覆盖。此特性的值必须是一个符合由IANA所定义的字符编码首选MIME 名称(preferred MIME name )之一。尽管标准不要求必须使用某些特定的字符编码,但它还是给出了一些建议:

1.鼓励使用 UTF-8;

2.不应该使用不兼容ASCII的编码规范, 以避免不必要的安全风险:浏览器不支持他们(这些不规范的编码)可能会导致浏览器渲染html出错. 比如JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB,ISO-2022 系列,EBCDIC系列 等文字

上面啰里啰嗦一大堆,就是在说charset是用来定义当前文档使用的字符编码,并且W3C标准建议我们应用'utf-8'的编码格式。

    <meta charset="UTF-8">
复制代码

相信这行代码大家都见过,它出现在我们写过的每一个html页面中。我们就是用这行代码来定义文档编码格式的,那么它的作用是什么呢,这行代码是来告诉浏览器用什么样的编码格式来解析文档,从而让文档可以正常显示避免出现乱码。

content

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

原来content属性是来给http-equiv和name属性来定义值的。那我们接着看另外两个属性。

http-equiv

语法:<meta http-equiv="参数" content="参数变量值">

这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义

我们一直在提倡语义化,由属性名可以看出‘http-equiv’这个属性和http请求有关。来看看这个属性都有哪些值。

  1. refresh

这个属性指定:

如果content 只包含一个正整数,则是重新载入页面的时间间隔(秒);

如果content 包含一个正整数并且跟着一个字符串,则是重定向到指定链接的时间间隔(秒)

<meta http-equiv="refresh" content="0;url=" />

refresh定义文档自动刷新的时间间隔。

  1. expires 说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。 用法

<meta http-equiv="expires" contect="Wed, 20 Jun 2017 22:33:00 GMT">

注意:必须使用GMT的时间格式。

  1. Pragma(cache模式)

说明:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出 用法:

<meta http-equiv="Pragma" contect="no-cache">

注意:这样设定,访问者将无法脱机浏览。

  1. Set-Cookie(cookie设定) 说明:如果网页过期,那么存盘的cookie将被删除。 用法:

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

注意:必须使用GMT的时间格式。

  1. Window-target(显示窗口的设定) 说明:强制页面在当前窗口以独立页面显示。 用法:

<meta http-equiv="Window-target" contect="_top">

注意:用来防止别人在框架里调用自己的页面。

  1. content-Type(显示字符集的设定) 说明:设定页面使用的字符集。 用法:

<meta http-equiv="content-Type" contect="text/html; charset=gb2312">

  1. Pics-label(网页等级评定) 用法:

<meta http-equiv="Pics-label" contect="">

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

  1. Page_Enter、Page_Exit 设定进入页面时的特殊效果

<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0,transtion= 12)">

设定离开页面时的特殊效果

<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion= 12)">

Duration的值为网页动态过渡的时间,单位为秒。
Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。如下表:
0 盒状收缩 1 盒状放射
2 圆形收缩 3 圆形放射
4 由下往上 5 由上往下
6 从左至右 7 从右至左
8 垂直百叶窗 9 水平百叶窗
10 水平格状百叶窗 11垂直格状百叶窗
12 随意溶解 13从左右两端向中间展开
14从中间向左右两端展开 15从上下两端向中间展开
16从中间向上下两端展开 17 从右上角向左下角展开
18 从右下角向左上角展开 19 从左上角向右下角展开
20 从左下角向右上角展开 21 水平线状展开
22 垂直线状展开 23 随机产生一种过渡方式

  1. cache-control 清除缓存(再访问这个网站要重新下载!)

<meta http-equiv="cache-control" content="no-cache">

  1. keywords 关键字,给搜索引擎用的

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

  1. description 页面描述

<meta http-equiv="description" content="This is my page">

  1. X-UA-Compatible(浏览模式)

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

name

author
description
keywords
复制代码

后续会持续更新来丰富meta标签的属性,达到即查即用的目的。

meta是用来在HTML文档中模拟HTTP协议的响应头报文。

参考链接:

https://cloud.tencent.com/developer/article/1156984
复制代码