下面介绍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. 多线程(模拟买票)-----java基础知识总结

    这次的的问题引入的比较深入,如果看了这篇博客,不看下一篇,你会很懵逼. 代码: package com.day13.math; /** * 类说明 :模拟三个窗口同时售票 * @author 作者 : ...

  2. JDBC编程示例

    package com.lovo.test; import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLE ...

  3. 关于Html class id 命名规范

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  4. ASP.NET MVC学习(四)之视图View

    1.视图 2.强类型视图 3.@RenderSection("HeaderSection", false)     @RenderBody() 4.子行为 5.ASP.NET MV ...

  5. Mysql select id 加上order by 后结果不一致

    测试数据将近280万 1.SELECT id FROM cbbd ORDER BY id LIMIT 900000,10 2.SELECT id FROM cbbd  LIMIT 900000,10 ...

  6. html5 canvas loading(这可怕的编辑器,自动把我的canvas转义了)---以前收藏的整理了一下

    /* super inefficient right now, could be improved */ var c = document.getElementById('canvasload'), ...

  7. bellman-ford算法(判断有没有负环)

    #include <iostream> #include <vector> #include<string> #include<cstring> usi ...

  8. C# sha256 加密算法

    C# 非对称加密 public string sha256(string data) { byte[] bytes = Encoding.UTF8.GetBytes(data); byte[] has ...

  9. 一步步实现windows版ijkplayer系列文章之一——Windows10平台编译ffmpeg 4.0.2,生成ffplay

    一步步实现windows版ijkplayer系列文章之一--Windows10平台编译ffmpeg 4.0.2,生成ffplay 一步步实现windows版ijkplayer系列文章之二--Ijkpl ...

  10. Jmeter遇到Connection reset by peer的解决方法

    解决方案如下: 1.修改HTTP请求下面的Impementation选项,改成HttpClient4 2.修改了/bin/jmeter.bat文件:找到这2行 set HEAP=-Xms256m -X ...