meta 是 meta-information (元信息)的缩写。 meta 元素可提供有关页面的元信息,例如针对搜索引擎和更新频度的描述和关键词。 meta 的定义有两种方式:第一种是 <meta name="name" content="content">
,这种形式可以设定传递给浏览器和搜索引擎的元信息;第二种是 <meta http-equiv="name" content="content">
,这种形式类似于 HTTP 的头部协议,它传递给浏览器一些有用的信息,以帮助浏览器正确和精确地显示网页内容。
有些元数据信息不能被 title 、 base 、 link 、 style 或 script 元素描述(例如文档内容的字符编码),这个时候就可以使用 meta 元素。每个 meta 元素只能有一个用途,如果想要多种用途,就需要添加多个 meta 元素。 meta 元素总共有 4 个属性,分别是 charset 、 name 、 http-equiv 和 content 。
charset 属性是 HTML5 新增的属性,可用来表示 HTML文档中的内容所用的字符编码(推荐使用 UTF-8 编码),定义的属性值不区分大小写。
charset 属性是 HTML5 新增的属性,可用来表示 HTML meta 元素可以用 name 属性表示文档级元数据,定义的属性值同样不区分大小写,每个 name 属性值对应特定的 content 属性值。 name 属性主要服务于计算机(如搜索引擎等),让计算机能更好地理解当前文档。
meta 元素可以用 name 属性表示文档级元数据,定义的属性值同样不区分大小写,每个 name 属性值对应特定的 content 属性值。 name 属性主要服务于计算机(如搜索引擎等),让计算机能更好地理解当前文档。
关键字 | 嗯 |
---|---|
application-name | Web 应用程序的名称 |
author | 文档的作者 |
description | 对文档内容的描述 |
generator | 标识生成页面的工具,有些内容是管理里系统可以自动生成的 |
keywords | 定义关键字,多个关键字可以用逗号分开 |
robots | 规定搜索引擎不操作该文档。例如 noindex 、 noarchive |
viewport | 主要用于移动端设备,可设置浏览器窗口( viewport ) |
http-equiv 属性提供了一些程序指令,用于模拟 HTTP 首部,每个 http-equiv 属性值同样对应特定的 content 属性值。在 http-equiv 属性中包含三个关键字,分别是 content-type 、 default-style 和 refresh 。
http-equiv 属性提供了一些程序指令,用于模拟 HTTP 首部,每个 http-equiv 属性值同样对应特定的 content 属性值。在 http-equiv 属性中包含三个关键字,分别是 content-type 、 default-style 和 refresh 。
页面关键字的定义方式与 meta 的标准格式一致,遵循以 name 、 content 属性来定义键值对的规则。 name 为属性名称,这里是 keywords ,也就是设置网页的关键字属性, keywords 提供的网页关键词通常是为搜索引擎分类网页使用的,而在 content 中则定义具体的关键字。
name 属性取值为 description ,用于定义网页简短描述, content 属性提供网页的简短描述。
提供的网页关键词通常是为搜索引擎分类网页使用的,而在 content 中则定义具体的关键字。
name 属性取值为 description ,用于定义网页简短描述, content 搜索引擎的定期搜索方式,就是每隔一段时间,搜索引擎主动对一定 IP地址范围内的互联网网站进行检索,一旦发现新的网站,它会自动提取网站的信息和网址加入自己的数据库。搜索引擎的搜索机器人,着网页上的链接(如http 和 src链接),不断地检索资料建立自己的数据库。有没有办法限制自己的网站不被搜索引擎的搜索机器人设定为检索目标呢?。
设置 meta 属性 name 值为 robots ,属性 content 可取值有 index 、 noindex 、 follow 、 nofollow 等。 index 为允许搜索引擎索引此网页、 noindex 设置为搜索引擎不索引此网页、 follow 为允许搜索引擎继续通过此网页的链接索引搜索其它的网页、 nofollow 为搜索引擎不继续通过此网页的链接索引搜索其它的网页。根据排列组合,有 4 种组合。 index 和 follow 组合也可写为 all , noindex 和 nofollow 等价于 none 。
/code>
通过 meta 可设定页面使用的字符集,用以说明页面所使用的文字使用语言,浏览器会根据此来调用相应的字符集显示页面内容,同时搜索引擎知 该页面使用的是什么语言,对浏览器和搜索引擎都有帮助。字符集是一组具有共同特征抽象字符的集合,例如常见的字符集有英文字 集、 ISO8859 、 CJK 、繁体字字符集、简体字字符集、日文汉字字符集、日文假名字符 。
为允许搜索引擎继续通过此网页的链接索引搜索其它的网页、 nofollow 为搜索引擎不继续通过此网页的链接索引搜索其它的网页。根据排列组合,有 4 种组合。 index 和 follow 组合也可写为 all , noindex 和 nofollow 等价于 none 。
通过 meta 可设定页面使用的字符集,用以说明页面所使用的文字使用语言,浏览器会根据此来调用相应的字符集显示页面内容,同时搜索引擎知 该页面使用的是什么语言,对浏览器和搜索引擎都有帮助。字符集是一组具有共同特征抽象字符的集合,例如常见的字符集有英文字 集、 ISO8859 、 CJK 、繁体字字符集、简体字字符集、日文汉字字符集、日文假名字符 。
<meta http-equiv="content-language" content="zh-CN" />
primary-code 为两个字母组成常用的有:
此外,通过 Content Type 可以用于定义文件的类型和网页的编码。编码是字符和二进制内码的对应码表,例如常见的编码类型有 ASCII 、 ISO8859-1 、 GB2312 、 GBK 、 UTF-8 、 UTF-16 等。
设定页面定时调整不一定要通过 JavaScript 脚本代码来实现,也可以通过 meta 标签来实现。例如自动跳转到其它页面,可以设定 10 秒后跳转到指定的 URL 。
设置 meta 的 name 取值为 refresh ,即刷新与跳转(重定向)页面。 refresh用于刷新与跳转 ( 重定向 ) 页面。 refresh 为 http-equiv 属性的值,使用 content 属性表示刷新或跳转的开始时间与跳转的网址 。
可以用于定义文件的类型和网页的编码。编码是字符和二进制内码的对应码表,例如常见的编码类型有 ASCII 、 ISO8859-1 、 GB2312 、 GBK 、 UTF-8 、 UTF-16 等。
视口( viewport )即浏览器的显示页面内容的屏幕区域。一般移动设备在浏览器默认设置一个 <meta name="viewport">
标签,定义一个布局视口。
设定页面定时调整不一定要通过 JavaScript 脚本代码来实现,也可以通过 meta标签来实现。例如自动跳转到其它页面,可以设定 10 秒后跳转到指定的 URL 。
设置 meta 的 name 取值为 refresh ,即刷新与跳转(重定向)页面。 refresh 用于刷新与跳转 ( 重定向 ) 页面。 refresh 为 http-equiv 属性的值,使用 content 属性表示刷新或跳转的开始时间与跳转的网址 。
视口( viewport )即浏览器的显示页面内容的屏幕区域。一般移动设备在浏览器默认设置一个 <meta name="viewport">
标签,定义一个布局视口。
将 meta 元素的 http-equiv 取值为 expires 属性值,即设置网页缓存过期时间。 expires 为 http-equiv 属性的值,并使用 content 属性表示页面缓存的过期时间。
网页缓存由 HTTP 消息报头中的 Cache-control 控制, Cache-Control 指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置 Cache-Control 并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括 no-cache 、 no-store 、 max-age 、 max-stale 、 min-fresh 、 only-if-cached ,响应消息中的指令包括 public 、 private 、 no-cache 、 no-store 、 no-transform 、 must-revalidate 、 proxy-revalidate 、 max-age 。各个消息中的指令含义如下所述。
<meta http-equiv="expires" content=" 这里是具体的时间值 " />
将 meta 元素的 http-equiv 取值为 expires 属性值,即设置网页缓存过期时间。 expires 为 http-equiv 属性的值,并使用 content 属性表示页面缓存的过期时间。
网页缓存由 HTTP 消息报头中的 Cache-control 控制, Cache-Control 指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置 Cache-Control 并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括 no-cache 、 no-store 、 max-age 、 max-stale 、 min-fresh 、 only-if-cached ,响应消息中的指令包括 public 、 private 、 no-cache 、 no-store 、 no-transform 、 must-revalidate 、 proxy-revalidate 、 max-age 。各个消息中的指令含义如下所述。
Cache-control 不同取值的作用根据用户不同的重新浏览方式,可以将其分为以下几种情况。 指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其它用户的请求无效
Cache-control 不同取值的作用根据用户不同的重新浏览方式,可以将其分为以下几种情况。
在没有单独设置 cookie 的调用方式与过期时间的情况下,默认情况下浏览器访问某个页面时会将它存在缓存中,再次访问时就可从缓存中读取,以提高速度。假设当你希望用户每次访问页面时都可以刷新广告的图标,或每次都刷新你的计数器,就可以采用禁用缓存了。 那么打开新窗口访问时都会重新访问服务器。而如果指定了 max-age 值,那么在
删除过期的 Cookie 的原理是,如果网页过期,那么存盘的 cookie 将被删除,示例代码如下: 在地址栏回车 Cache-control 值为 private 或 must-revalidate 则只有第一次访问时会访问服务器,以后就不再访问;值为 no-cache ,那么每次都会访问;值为 max-age ,则在过期之前不会重复访问。
网页的过渡效果是指当用户进入或离开网页时,页面呈现的不同的效果,例如渐变、卷动收起、百叶窗等效果。这样网页看起来会更具有动感,不过也要注意适可而止,否则太花哨的动画效果容易产生喧宾夺主的效果,也容易引起用户的不适感。
在没有单独设置 cookie 的调用方式与过期时间的情况下,默认情况下浏览器访问某个页面时会将它存在缓存中,再次访问时就可从缓存中读取,以提高速度。假设当你希望用户每次访问页面时都可以刷新广告的图标,或每次都刷新你的计数器,就可以采用禁用缓存了。
删除过期的 Cookie 的原理是,如果网页过期,那么存盘的 cookie 将被删除,示例代码如下:
<meta
http-equiv="Set-Cookie"
content="cookievalue=xxx; expires=Wednesday, Sunday 26 October 2015 01:00 GMT; path=/"
/>
网页的过渡效果是指当用户进入或离开网页时,页面呈现的不同的效果,例如渐变、卷动收起、百叶窗等效果。这样网页看起来会更具有动感,不过也要注意适可而止,否则太花哨的动画效果容易产生喧宾夺主的效果,也容易引起用户的不适感。