什么是meta标签？

meta标签是html标记head区的一个关键标签，它位于HTML文档的<head>和<title>之间（有些也不是在<head>和<title>之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。meta标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。

注：元信息是关于信息的信息，元信息允许服务器提供所发送数据的信息，如http可以提高所发的对象语言和对象，也可以用元信息来实现有条件请求以及报告事务完成。收到数据的浏览器可以根据元信息确定服务器发来的是什么内容，预料有什么数据，确知是否接收完整的数据，以及过程中是否出错，这样客户就可以知道传输对象的类型。

meta标签的属性有哪些？

  属性 值 作用 对应html版本
必须 content

some_text

 定义与 http-equiv 或 name 属性相关的元信息。 4，5
可选 http-equiv

content-type

expires

refresh

set-cookie

 把 content 属性关联到 HTTP 头部。 4，5
可选 name

author

description

keywords

generator

revised

others

 把 content 属性关联到一个名称。 4，5
可选 charset character encoding 定义文档的字符编码。 5
可选 scheme some_text 定义用于翻译 content 属性值的格式。不支持。 4

注：上面是较常用的，详见于w3school.

属性详解：

1.http-equiv

相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。

语法：<meta http-equiv="参数" content="参数值">

参数：

  • content-Type(设定页面使用的字符集)

<metahttp-equiv="content-Type" content="text/html;charset=gb2312">

http-equiv=Content-Type代表的是HTTP的头部协议，提示浏览器网页的信息，

　　meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；

　　meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；

　　meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；

　　meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；

　　meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；

　　meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；

  • content-Language（显示语言的设定）     

<meta http-equiv="Content-Language" content="zh-cn"/>

  • Expires(期限，可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输）

<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">

注意：必须使用GMT的时间格式。

  • Pragma(cache模式，禁止浏览器从本地计算机的缓存中访问页面内容)

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

注意：这样设定，访问者将无法脱机浏览。

  • cache-control（缓存设置）

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

请求时的缓存指令包括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。各个消息中的指令含义如下:

Public指示响应可被任何缓存区缓存

Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效

no-cache指示请求或响应消息不能缓存

no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应

min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应

max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

  • Refresh(自动刷新并指向新页面）

<meta http-equiv="Refresh" content="2; URL=http://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)

注意：其中的2是指停留2秒钟后自动刷新到URL网址。

  • Window-target(强制页面在当前窗口以独立页面显示）

<meta http-equiv="Window-target" content="_top">

注意：用来防止别人在框架里调用自己的页面。

  • set-cookie(cookie设定，如果网页过期，那么存盘的cookie将被删除）

<meta http-equiv="Set-Cookie" content="cookie value=xxx; expires=Friday,12-Jan-200118:18:18GMT；path=/">

      通常强制要求浏览器不设置缓存重新从服务器获取页面会使用下面的方式：

<meta http-equiv=”pragma” content=”no-cache”>

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

<meta http-equiv=”expires” content=”0″>

注：对于浏览器的缓存设置相关，目前可能初学者会不太懂，可以看一看http相关的书，如《图解HTTP》，《网络是怎样连接的》，了解http头部相关内容，http-eqiv属性作用类似于http头协议，它会告诉浏览器一些关于字符设定，页面刷新，和缓存相关等等信息.

2.name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

语法：<meta name="参数" content="具体的参数值">

  • Keywords(关键字)

    说明：keywords用来告诉搜索引擎你网页的关键字是什么。

<meta name="keywords" content="">

  • description(网站内容描述)

    说明：description用来告诉搜索引擎你的网站主要内容。

<metaname="description" content="">

  • robots(机器人向导)

    说明：Meta robots标签管理着搜索引擎是否可以进入网页，你可以用它来允许或不允许搜索引擎来获取你的网页、进入你网页中的子链接或对你的网页存档。content的参数有all,none,index,noindex,follow,nofollow。默认是all。

<metaname="robots" content="none">

具体参数如下：

信息参数为all：文件将被检索，且页面上的链接可以被查询；

信息参数为none：文件将不被检索，且页面上的链接不可以被查询；

信息参数为index：文件将被检索；

信息参数为follow：页面上的链接可以被查询；

信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；

信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

  • author(作者)

说明：标注网页的作者

<metaname="author" content="jesse131work@163.com">

  • generator

说明：meta标签的generator的信息参数，代表说明网站的采用的什么软件制作。

<metaname="generator" content="信息参数"/>

  • copyright

　　说明：meta标签的copyright的信息参数，代表说明网站版权信息。

<metaname="copyright" content="信息参数">

  • revisit-after

　　说明：revisit-after代表网站重访,7days代表7天，依此类推，假如我设置，那这样搜索引擎就是7天来一次。使用这个标签的网站，通常是因为网站数据量非常大，被搜索引擎过         于频繁的抓取，会占用过大的资源，影响网站的访问。所以，希望搜索引擎不要天天过来，抓取过一次了，那么等7天后再来。一般的网站是不需要这个标签的。

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

  • view-point

　　说明：主要影响移动页面布局

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

content 参数：

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)

3.content属性

content属性一般与name和http-equiv属性一起用，视它们的值而定。

4.charset属性

      charset属性，是html5的属性，可替换<metahttp-equiv="content-Type" content="text/html;charset=gb2312">设置为<meta charset="utf-8">

设置meta属性的作用是什么？

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。meta标签可用于缓存设置，还与SEO优化相关。SEO是指通过采用易于搜索引擎索引的合理手段，使网站各项基本要素适合搜索引擎检索原则并且对用户更友好（Search Engine Friendly），从而更容易被搜索引擎收录及优先排序从属于SEM（搜索引擎营销）。通俗理解是：通过总结搜索引擎的排名规律，对网站进行合理优化，使你的网站在百度和goog的排名提高，让搜索引擎给你带来客户。

 seo优化常用语句如下

<!-- 页面标题<title>标签(head 头部必须) -->

<title>your title</title>

<!-- 页面关键词 keywords -->

<meta name="keywords" content="your keywords">

<!-- 页面描述内容 description -->

<meta name="description" content="your description">

<!-- 定义网页作者 author -->

<meta name="author" content="author,email address">

<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->

<meta name="robots" content="index,follow">

以上是我看过许多别人的文章总结出的对自己有用的，如果有错或有补充的补充烦请多多指点。相信许多初学者都和我一样，刚开始看的时候会有很多不太理解，但是可以尽自己最大努力去尝试弄懂，实在弄不懂的可以先放下，随着后面的学习和阅读，再回头来看看，这些不懂得会迎刃而解，会有很大收获，加油！

参考：https://blog.csdn.net/yc123h/article/details/51356143      https://www.jb51.net/yunying/419531.html     http://www.cnblogs.com/libin-1/p/5979300.html

html查漏补缺之meta标签的更多相关文章

  1. CSS基础面试题，快来查漏补缺

    本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经. 我对问题进行了分类整理,并给了自己的回答.大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺.虽作 ...

  2. 《CSS权威指南》基础复习+查漏补缺

    前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...

  3. js基础查漏补缺（更新）

    js基础查漏补缺: 1. NaN != NaN: 复制数组可以用slice: 数组的sort.reverse等方法都会改变自身: Map是一组键值对的结构,Set是key的集合: Array.Map. ...

  4. Entity Framework 查漏补缺 （一）

    明确EF建立的数据库和对象之间的关系 EF也是一种ORM技术框架, 将对象模型和关系型数据库的数据结构对应起来,开发人员不在利用sql去操作数据相关结构和数据.以下是EF建立的数据库和对象之间关系 关 ...

  5. 2019Java查漏补缺（一）

    看到一个总结的知识: 感觉很全面的知识梳理,自己在github上总结了计算机网络笔记就很累了,猜想思维导图的方式一定花费了作者很大的精力,特共享出来.原文:java基础思维导图 自己学习的查漏补缺如下 ...

  6. 20165223 week1测试查漏补缺

    week1查漏补缺 经过第一周的学习后,在蓝墨云班课上做了一套31道题的小测试,下面是对测试题中遇到的错误的分析和总结: 一.背记题 不属于Java后继技术的是? Ptyhon Java后继技术有? ...

  7. 今天開始慢下脚步，開始ios技术知识的查漏补缺。

    从2014.6.30 開始工作算起. 如今已经是第416天了.不止不觉.时间过的真快. 通过对之前工作的总结.发现,你的知识面.会决定你面对问题时的态度.过程和结果. 简单来讲.知识面拓展了,你才干有 ...

  8. Mysql查漏补缺笔记

    目录 查漏补缺笔记2019/05/19 文件格式后缀 丢失修改,脏读,不可重复读 超键,候选键,主键 构S(Stmcture)/完整性I(Integrity)/数据操纵M(Malippulation) ...

  9. 【spring源码分析】IOC容器初始化——查漏补缺（四）

    前言:在前几篇查漏补缺中,其实我们已经涉及到bean生命周期了,本篇内容进行详细分析. 首先看bean实例化过程: 分析: bean实例化开始后 注入对象属性后(前面IOC初始化十几篇文章). 检查激 ...

随机推荐

  1. SpringBoot实战(二)之计划任务

    计划任务这个对于Java开发者们,应该不陌生了,非常常用又非常常见.比如jdk自带的Timer 实现例子如下: class MyTask extends TimerTask{ @Override pu ...

  2. GAutomator,GAutomatorview和Android SDK,Unity配置

    1. 安装和配置JDK 环境配置中: JAVA_HOME:E:\Program Files\java\jdk1.8.0_131 Path:%JAVA_HOME%\bin;%JAVA_HOME%\jre ...

  3. ThinkPHP5入门（一）----框架篇

    一.命名规范: 下划线法: 函数的命名 配置参数 常量(大写) 数据表和字段 驼峰法: 属性的命名 方法的命名 帕斯卡法: 类名 类文件名 类的命名

  4. shell脚本排坑

    jenkins用来输出日志: tail -f  /tmp/i.log   & { sleep 15; eval 'kill -9 $!' &> /dev/null; } 去时间秒 ...

  5. PAT——1065. 单身狗

    “单身狗”是中文对于单身人士的一种爱称.本题请你从上万人的大型派对中找出落单的客人,以便给予特殊关爱. 输入格式: 输入第一行给出一个正整数N(<=50000),是已知夫妻/伴侣的对数:随后N行 ...

  6. 在 S5PV210 的 开发板上 点亮 一个 LED 灯

    参考学习教程:周立功嵌入式Linux开发教程-(上册) 材料:首先 准备一个 安装好 Linux 的 开发板 使用  xshell 工具 连接 开发板  ,winscp 工具 连接 开发板  ,  准 ...

  7. cookie的简单认识

    1.cookie Cokie又叫会话跟踪技术,实际上就是客户端硬盘上的一个文本文件,该文件用来存储一些数据. 首先,HTTP请求时无状态的,也就是说,你打开一个网页和下一个网页之间没有任何关系,数据不 ...

  8. iOS 11.4.1 正式版越狱

    在 2018 年 Electra 最新能支持到 11.3.1 越狱,很长的一段时间 11.4 只能支持 Beta 版本,临近春节给了我们一个大礼物,终于支持 iOS 11.4-11.4.1,目前 iO ...

  9. Windows Redis 取消保护模式C#进行访问

    运行redis服务程序和客户端程序设置即可. config set protected-mode “no”

  10. 我的 Delphi 学习之路 —— Delphi 助手的安装

    标题:我的 Delphi 学习之路 -- Delphi 助手的安装 作者:断桥烟雨旧人伤 Delphi 助手的安装 CnWizards 类似于 VS 中的番茄助手,在编写 Delphi 代码时帮助极大 ...