下面介绍meta标签的几个属性,charset,content,http-equiv,name。

一、charset

此特性声明当前文档所使用的字符编码,但该声明可以被任何一个元素的lang特性的值覆盖,此特性的值必须是一个符合由IANA所定义的字符编码首选MIME名称之一,鼓励使用UTF-8。

二、content

基于内容,这个属性为http-equiv或name属性提供了与其相关的值的定义。

三、http-equiv

equiv的全称是"equivalent",意思是相等,相当于。定义http-equiv相当于http的作用。

meta标签中http-equiv属性语法格式是:

<meta http-equiv="参数" content="具体的描述">

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

1、content-Type(设定网页字符集)

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML,不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式

2、X-UA-Compatible(浏览器采取何种版本渲染当前页面)

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

3、cache-control(指定请求和响应遵循的缓存机制)

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

no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。

no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)

public: 缓存所有响应,但并非必须,因为max-age也可以做到相同效果。

private: 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)

maxage: 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。

<meta http-equiv="Cache-Control" content="no-siteapp" />//禁止百度自动转码

4、expires(网页到期时间)

<meta http-equiv="expires" content="Sunday 26 October 2011 01:00 GMT" />

5、refresh(自动刷新并指向某页面)

<meta http-equiv="refresh" content="2;URL=http://www.cnblogs.com/camille666/"> //2秒后跳转向我的博客

6、Set-Cookie(cookie设定)

如果网页过期 ,那么这个网页存在本地的cookies也会被自动删除。

<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=camille; path=/; expires=Sunday, 10-Jan-11 10:00:00 GMT"> //具体范例

7、网页过渡效果

<meta http-equiv=”page-Enter” contect=”revealTrans(duration=时间(秒),transition=效果)”/>
<meta http-equiv=”page-Exit” contect=”revealTrans(duration=时间;transition=效果)”/> 0~23种效果

四、name

meta标签中name属性语法格式是:

<meta name="参数" content="具体的描述">

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

1、keywords(关键字)

<meta name="keywords" content="camille,计算机,软件工程">

2、description(网站内容的描述)

<meta name="description" content="camille,计算机,软件工程">

3、viewport(移动端的窗口)

<meta name="viewport" content="width=device-width, initial-scale=1">

4、robots(定义搜索引擎爬虫的索引方式)

说明:robots用来告诉爬虫哪些页面需要索引,哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。

<meta name="robots" content="none">

none : 搜索引擎将忽略此网页,等价于noindex,nofollow。

noindex : 搜索引擎不索引此网页。

nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。

all : 搜索引擎将索引此网页与继续通过此网页的链接索引,等价于index,follow。

index : 搜索引擎索引此网页。

follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。

5、author(作者)

<meta name="author" content="camille">

6、generator(网页制作软件)

<meta name="generator" content="Sublime Text3">

7、copyright(版权)

<meta name="copyright" content="camille"> 

8、revisit-after(搜索引擎爬虫重访时间)

<meta name="revisit-after" content="7 days">

9、renderer(双核浏览器渲染方式)

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

10、referrer

<meta name="referrer" content="never">

never: 如果referer-policy的值为never,删除 http head中的referer;

default: 如果referer-policy的值为default,如果当前页面使用的是https协议,而正要加载的资源使用的是普通的http协议,则将 http header中的referer置空;

origin: 如果referer-policy的值为origin,只发送origin部分;

always: 如果referer-policy的值为always,不改变http header中的 referer 的值。这种情况下,如果当前页面使用了https协议,而要加载的资源使用的是http协议,加载资源的请求头中也会携带referer。

PC端meta标签的更多相关文章

  1. 移动端meta标签设置

    移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset="UTF-8"> 1 2设置浏览器的兼容模式(让IE使用最新的浏览器渲染) &l ...

  2. 移动端meta标签整理-备

    分类 在介绍移动端特有 meta 标签之前,先简单说一下 HTML meta 标签的一些知识. meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name). h ...

  3. 移动端——meta标签

    meta标签主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用. <meta http-equiv="Content-type" conte ...

  4. 移动端 :meta标签1万个作用

    meta标签 <meta charset="utf-8"> <meta http-equiv="Content-Type" content=& ...

  5. 移动端 meta 标签笔记

    (转自http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html,版权归原作者所有!) 移动平台对 meta 标签的定义 一.meta 标签分 ...

  6. 移动端meta标签

    现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,如何阻止双击放大?user-scalable=no <!-- 禁止缩放 --> <meta name=”viewpor ...

  7. 移动端meta标签缓存设置

    1.<meta charset="utf-8"> 2.<meta content="width=device-width, initial-scale= ...

  8. 移动端meta标签的使用和设置

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale= ...

  9. 移动端meta标签的设置

    var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth / 640; var ua = navigato ...

随机推荐

  1. CSS表格均匀边框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. SQL存储过程例子

    存储过程呢,学校里学习的都是简单的.这里是我在工作的时候写的存储过程,贴出来,其中公司相关我都XXX代替了 (注:这个例子可以算是动态SQL的例子了,写死的是静态SQL,这个很灵活的传入参数的是动态S ...

  3. 关于css中a标签的样式

    CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :visited :hover : ...

  4. CF876 D 树状数组

    大意就是放n个硬币,每次放一个计算下这种情况下的操作次数,一个操作为从左到右扫描,如果一个硬币右边是空的,就将硬币后移,否则该次操作停止. 显然发现对于一个情况,我们只要考虑最右边的空位的左侧有几个硬 ...

  5. python 基础部分重点复习整理--从意识那天开始进阶--已结

    pythonic 风格编码 入门python好博客 进阶大纲 有趣的灵魂 老齐的教程 老齐还整理了很多精华 听说 fluent python + pro python 这两本书还不错! 元组三种遍历, ...

  6. spark RDD 常见操作

    fold 操作 区别 与 co 1.mapValus 2.flatMapValues 3.comineByKey 4.foldByKey 5.reduceByKey 6.groupByKey 7.so ...

  7. 用到的设计模式总结--单例模式+工厂方法模式+Builder模式

    一,工厂方法模式和单例模式 工厂方法模式中有一个抽象的工厂接口和一个抽象的产品接口.然后,具体的工厂实现抽象工厂并负责生产具体的产品.由客户端决定 new 哪个具体的工厂,从而生产哪种产品. 因此,与 ...

  8. CSS图片下面产生间隙的6种解决方案

    CSS图片下面产生间隙的6种解决方案 在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是 ...

  9. VMware Linux 下 Nginx 安装配置 - Tomcat 配置 (二)

    准备工作 相关浏览: VMware Linux 下 Nginx 安装配置 (一) 1. 选在 /usr/local/ 下创建 softs 文件夹,通过 ftp 命令 把 apache-tomcat-7 ...

  10. 雨林木风ghostwin7纯净版系统下载

    雨林木风ghostwin7纯净版系统下载 关于easyuidatagrid的问题,跪求老司机带带我..... 关于cst_modesys/stat.h一个问题求解答谢谢 [程序]STM32使用SPI接 ...