HTML中META标签的使用
一、META标签简介
<meta> 元素可提供有关页面的元信息,元数据总是以名称/值的形式被成对传递的。
<meta> 标签位于文档的头部,不包含任何内容。
<meta> 标签的属性定义了与文档相关联的名称/值对。
meta标签分两大部分:HTTP标题信息(http-equiv)和页面描述信息(name)
name 属性
name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。“keywords”是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。
http-equiv 属性
如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。
http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:Content-Type:text/html。这将告诉浏览器准备接受一个 HTML 文档。使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。
content 属性
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。content 属性始终要和 name 属性或 http-equiv 属性一起使用。
scheme 属性
scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。
二、常用meta标签说明
1、<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn"/>
设定页面使用的字符集,用以说明主页制作所使用的文字以及语言,浏览器会根据此来调用相应的字符集显示page内容。
Content-Type的content还可以是:text/xml等文档类型;content中的charset选项可以是:ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii、x-mac-roman、iso-8859-2、x-mac-ce、iso-2022-jp、x-sjis、x-euc-jp、euc-kr、iso-2022-kr、gb2312、gb_2312-80、x-euc-tw、x-cns11643-1、x-cns11643-2等字符集;
Content-Language的content还可以是:EN、FR等语言代码。
2、<meta http-equiv="Refresh" content="30" />
<meta http-equiv="Refresh" content="5; url=http://www.baidu.com" />
让网页多长时间(秒)刷新自己,或在多长时间后让网页自动链接到其它网页。
3、<meta http-equiv="Expires" content="0" />
<meta http-equiv="Expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅,必须使用GMT的时间格式,或直接设为数字(数字表示多少秒后过期)。
4、<meta http-equiv="Pragma" content="no-cach" />
禁止浏览器从本地机的缓存中调阅页面内容,网页不保存在缓存中,每次访问都刷新页面。这样设定,访问者将无法脱机浏览。
<meta http-equiv="Cache-Control" content="no-cache">
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。
5、<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/" />
如果网页过期,那么存盘的cookie将被删除,必须使用GMT的时间格式。
6、<meta http-equiv="Widow-target" content="_top" />
强制页面在当前窗口以独立页面显示,这个属性是用来防止别人在框架里调用你的页面。
content选项:_blank、_top、_self、_parent。
7、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
这是一个,文档兼容模式的定义。
Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。简单的说,就是什么版本 IE 就用什么版本的标准模式渲染。
chrome=1表示强制 IE 使用 Chrome Frame 渲染,如果没有安装Google Frame,提示 IE 用户安装 Google Frame。
Google 官方提供了对 Google Frame 插件安装情况的检测,这里直接调用方法即可,如果检测到 IE 并未安装 Google Frame,则弹出对话框提示安装。
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>
8、<meta name="Keywords" content="关键词1,关键词2,关键词3,关键词4,……"/>
为搜索引擎提供的关键字列表,各关键词间用英文逗号“,”隔开。
当数个meta元素提供文档语言从属信息时,搜索引擎会使用lang特性来过滤并通过用户的语言优先参照来显示搜索结果。
<meta name="Kyewords" lang="EN" content="vacation,greece,sunshine"/>
<meta name="Kyewords" lang="FR" content="vacances,grè:ce,soleil"/>
9、<meta name="Description" content="你网页的简述" />
Description用来告诉搜索引擎你的网站主要内容。
10、<meta name="Robots" content="All|None|Index|Noindex|Follow|Nofollow" />
Robots (机器人向导),许多搜索引擎都通过放出robot/spider搜索来登录网站,这些robot/spider就要用到meta元素的一些特性来决定怎样登录。Robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。content的参数有all、none、index、noindex、follow、nofollow。默认是all。
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;(和 "noindex, no follow" 起相同作用)
index:文件将被检索;(让robot/spider登录)
follow:页面上的链接可以被查询;
noindex:文件将不被检索,但页面上的链接可以被查询;(不让robot/spider登录)
nofollow:文件将不被检索,页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
11、<meta name="Author" content="张三,abc@sina.com" />
Author(作者)标注网页的作者或制作组,Content可以是:你或你的制作组的名字,或Email
12、<meta name="Copyright" content="本页版权归Zerospace所有。All Rights Reserved" />
Copyright (版权)标注版权
13、<meta name="Generator" content="PCDATA|FrontPage|" />
Generator (编辑器)编辑器的说明,Content="你所用编辑器"
14、<meta name="revisit-after" content="7 days" />
revisit-after (重访)
15、<meta name="renderer" content="webkit|ie-comp|ie-stand" />
渲染器。content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。
若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"/>
若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"/>
若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand"/>
HTML中META标签的使用的更多相关文章
- HTML中<meta>标签如何正确使用
HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...
- html中meta标签及用法理解
自己一直想成为高级前端开发工程师,而自学.奈何最近感觉自学收效甚微,一度迷茫. 不破不立,打算改变这样的状态. 春节后上班第一天,今年打算好好实现自己的前端梦想. 重新整理.总结前端技术. 废话,就不 ...
- HTML中Meta标签中http-equiv属性小结
HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...
- HTML中Meta标签中http-equiv属性
HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...
- HTML中meta标签作用及属性总结
在前端开发中编写html静态网页模板时,head标签内总是会带上许多meta标签,大多数时候并不十分了解这些标签的具体作用,只是别人写了我们也写上吧! 今天小编特意查询了一下关于网页中meta标签的作 ...
- 爬虫技术 -- 进阶学习(十一)【补充】获取html中meta标签中的content的内容
上一篇网易新闻页面信息抓取 -- htmlagilitypack搭配scrapysharp中提及了很多如何快速抓取html中的文本的语句, 但是meta标签中的content内容的抓取,没有提及到! ...
- HTMl中Meta标签详解以及meta property=og标签含义
meta是用来在HTML文档中模拟HTTP协议的响应头报文.META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之 ...
- HTML中Meta标签大全
在网页的HTML源代码中一个重要的代码“”(即通常所说的META标签).META标签用来描述一个HTML网页文档的属性,例如作者.日期和时间.网页描述.关键词.页面刷新等. 1.META标签的keyw ...
- Html中meta标签详解--以前经常忽略的
W3School介绍:http://www.w3school.com.cn/html5/html5_meta.asp meta是用来在HTML文档中模拟HTTP协议的响应头报文. meta 标签的用处 ...
随机推荐
- Java并发辅助类的使用
目录 1.概述 2.CountdownLatch 2-1.构造方法 2-2.重要方法 2-3.使用示例 3.CyclicBarrier 3-1.构造方法 3-2.使用示例 4.Semaphore 4- ...
- 【转】vMAN 和 PVID
vMAN关的情况下,如果用户的包内带有VLAN TAG,则以用户的TAG为准,如果用户的包内不带VLAN TAG,就打上PVID:vMAN开的情况下,无论用户的包内是否带有VLAN TAG,都强制在外 ...
- python note 01 计算机基础与变量
1.计算机基础. 2.python历史. 宏观上:python2 与 python3 区别: python2 源码不标准,混乱,重复代码太多, python3 统一 标准,去除重复代码. 3.pyth ...
- js 加减乘除失精
js 计算失精是因为js 先将10十进制代码转化为2进制,再计算导致 具体解决方案: 1. 加 function accAdd(arg1,arg2){ var r1,r2,m; ].length}} ...
- JavaSE基础知识(2)—变量和运算符
一.变量 1.理解 概念:内存中的一块数据存储空间 2.变量的三要素 数据类型变量名变量值 3.变量的语法和使用步骤★ 步骤1:声明变量(计算机开辟一块空间) 数据类型 变量名;步骤2:为变量赋值(初 ...
- 一、Windows许可证即将过期怎么办
当Win10系统提示“windows许可证即将过期”窗口时,直接点击“转到‘设置’”按钮,此时将显示“Windows激活”界面,从此界面中可以获取当前Win10版本信息. 由于Win10激活即将过期, ...
- ELK+SpringBoot+Logback离线安装及配置
ELK+SpringBoot+Logback 离线安装及配置 版本 v1.0 编写时间 2018/6/11 编写人 xxx 目录 一. ELK介绍2 二. 安装环境2 三. Elasticse ...
- (转)经验分享:CSS浮动(float,clear)通俗讲解
文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身 ...
- xpath&css选择器
本文参考较多,原创基本没有,权当知识归纳. xpath并不复杂,简单的使用看完之后,及时查阅文档也是可以写出来的. 这里放上我的练手文件,大家可以参考,或者挑毛病(*^__^*) 嘻嘻-- xpath ...
- Zookeeper系列3 实现分布式锁
基本思路 1 client调用create()方法创建“/locks/_lock_”临时顺序节点,注意节点类型是EPHEMERAL_SEQUENTIAL 2 client调用getChildren(& ...