首页 技术 正文
技术 2022年11月7日
0 收藏 817 点赞 559 浏览 3137 个字

我们先来看看维基百科上对 meta element 的定义:

Meta elements are tags used in HTML and XHTML documents to provide structured metadata about a Web page.

这里提到了 metadata ,中文译过来是元数据,它指的是用来描述数据的数据!

Metadata is “data that provides information about other data”.

那么meta标签有什么用呢?维基百科上是这样说的:

The meta element has two uses: either to emulate the use of an HTTP response header field, or to embed additional metadata within the HTML document.

meta标签可以为HTML文档嵌入表示HTML页面的元信息,还可以模拟一个HTTP响应头部(例如重定向到不同页面)。

在HTML发展到 HTML4.01 和 XHTML的过程中,meta标签只有四个有效的属性:contenthttp-equivnamescheme!在 HTML5 到来了以后,meta标签又新增加了一个属性:charset

但是请注意:HTML5的meta标签不支持scheme 属性

  • content :给出了与 http-equiv 或 name 属性相关的值
  • http-equiv :用于模拟一个 HTTP 响应头
  • name :规定元数据的名称
  • scheme :设置或返回用于解释 content 属性的值的格式
  • charset :规定HTML文档的字符编码(HTML5新属性)

charset属性

charset 是HTML5中的新属性,它规定了HTML文档的字符编码,替代了之前规定HTML文档字符编码的方法。

<!--旧的规定字符编码的方法,不建议使用-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><!-- 使用这个! -->
<meta charset="utf-8" />

  

name属性

  • name属性的语法格式:
<meta name="参数" content="具体的描述">
  • 参数:keywords
    功能:标明你网页的关键字
<meta name="keywords" content="关键词1,关键词2,关键词3...">
<meta name="description" content="不超过150个字符">
  • 参数:language
    功能:标明你网页内容使用的语言
<meta name="language" content="zh-CN">
  • 参数:author
    功能:标注网页的作者
<meta name="author" content="作者的相关信息">
  • 参数:generator
    功能:标明制作该网页所使用的软件或工具
<meta name="generator" content="Sublime Text3">
  • 参数:copyright
    功能:标注版权信息
<meta name="copyright" content="版权信息" /> //不推荐使用
  • 参数:robots
    功能:定义搜索引擎爬虫的索引方式
<meta name="robots" content="参数1,参数2">
  • content通常有如下几种取值:nonenoindexnofollowallindexfollow
  • none 搜索引擎将忽略此网页,等价于noindex,nofollow。
  • noindex 搜索引擎不索引此网页。
  • nofollow 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
  • all 搜索引擎将索引此网页与继续通过此网页的链接索引,等价于index,follow。
  • index 搜索引擎索引此网页。
  • follow 搜索引擎继续通过此网页的链接索引搜索其它的网页。
  • 注:如页面没有定义该标签,则默认是 <meta name=”robots” content=”index,follow” />

http-equiv属性

  • http-equiv的语法格式:
<meta http-equiv="参数" content="具体的描述">

  

  • 参数:content-Type
    功能:定义网页的字符编码方式(不推荐使用,推荐使用HTML5的charset属性)
<meta http-equiv="content-Type" content="text/html;charset=utf-8">

  

  • 参数:X-UA-Compatible
    功能:用于告知浏览器以何种版本来渲染页面(一般都设置为最新模式)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 指定IE和Chrome使用最新版本渲染当前页面 -->

  

  • 参数:cache-control
    功能:指导浏览器如何缓存某个响应以及缓存多长时间
<meta http-equiv="cache-control" content="参数">

  

content通常有如下几种取值:

  • no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。
  • no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)
  • public : 缓存所有响应,但并非必须。因为max-age也可以做到相同效果
  • private : 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)
  • maxage : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用60秒
  • 参数:expires
    功能:指定网页在缓存中的过期时间,过期后网页必须到服务器上重新传输
<meta http-equiv="expires" content="date" /><!-- 注意:date必须使用GMT的时间格式,或直接设为0(数字表示多少时间后过期) -->
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
<meta http-equiv="expires" content="0"><!-- Disable caching -->

  

  • 参数:refresh
    功能:网页将在设定的时间内,自动刷新并调向设定的网址
<meta http-equiv="refresh" content="5" />
<!-- 5秒后自动刷新页面 -->
<meta http-equiv="refresh" content="5;URL=http://www.baidu.com/" />
<!-- 5秒后自动跳转到指定的链接 -->

  

scheme属性

注:HTML5不支持scheme属性。

<!-- 功能:设置或返回用于解释 content 属性的值的格式 -->
<meta name="date" content="2009-01-02" scheme="YYYY-MM-DD">
<meta name="identifier" content="0-2345-6634-6" scheme="ISBN">

  



说了这么多,其实以上内容只是meta标签的一部分内容,我以后再遇到别的有用的内容的话,会补充添加到这篇文章内的。

至于移动端使用到的meta标签,我会在下一篇文章中做出总结!^_^

转载至:http://blog.percymong.com/2016/08/10/html-meta/

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,492
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,495
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,133
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,297