html查漏补缺之meta标签
什么是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（显示语言的设定）
<metahttp-equiv="Content-Language" content="zh-cn"/>
- Expires(期限，可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输）
<metahttp-equiv="expires" content="Fri,12Jan200118:18:18GMT">注意：必须使用GMT的时间格式。
Pragma(cache模式，禁止浏览器从本地计算机的缓存中访问页面内容)
<metahttp-equiv="Pragma" content="no-cache">注意：这样设定，访问者将无法脱机浏览。
- cache-control（缓存设置）
<metahttp-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(自动刷新并指向新页面）
<metahttp-equiv="Refresh" content="2; URL=http://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)注意：其中的2是指停留2秒钟后自动刷新到URL网址。
- Window-target(强制页面在当前窗口以独立页面显示）
<metahttp-equiv="Window-target" content="_top">注意：用来防止别人在框架里调用自己的页面。
- set-cookie(cookie设定，如果网页过期，那么存盘的cookie将被删除）
<metahttp-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用来告诉搜索引擎你网页的关键字是什么。
<metaname="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天后再来。一般的网站是不需要这个标签的。
<metaname="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标签的更多相关文章
- CSS基础面试题，快来查漏补缺
本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经. 我对问题进行了分类整理,并给了自己的回答.大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺.虽作 ...
- 《CSS权威指南》基础复习+查漏补缺
前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...
- js基础查漏补缺（更新）
js基础查漏补缺: 1. NaN != NaN: 复制数组可以用slice: 数组的sort.reverse等方法都会改变自身: Map是一组键值对的结构,Set是key的集合: Array.Map. ...
- Entity Framework 查漏补缺 （一）
明确EF建立的数据库和对象之间的关系 EF也是一种ORM技术框架, 将对象模型和关系型数据库的数据结构对应起来,开发人员不在利用sql去操作数据相关结构和数据.以下是EF建立的数据库和对象之间关系 关 ...
- 2019Java查漏补缺（一）
看到一个总结的知识: 感觉很全面的知识梳理,自己在github上总结了计算机网络笔记就很累了,猜想思维导图的方式一定花费了作者很大的精力,特共享出来.原文:java基础思维导图 自己学习的查漏补缺如下 ...
- 20165223 week1测试查漏补缺
week1查漏补缺 经过第一周的学习后,在蓝墨云班课上做了一套31道题的小测试,下面是对测试题中遇到的错误的分析和总结: 一.背记题 不属于Java后继技术的是? Ptyhon Java后继技术有? ...
- 今天開始慢下脚步，開始ios技术知识的查漏补缺。
从2014.6.30 開始工作算起. 如今已经是第416天了.不止不觉.时间过的真快. 通过对之前工作的总结.发现,你的知识面.会决定你面对问题时的态度.过程和结果. 简单来讲.知识面拓展了,你才干有 ...
- Mysql查漏补缺笔记
目录 查漏补缺笔记2019/05/19 文件格式后缀 丢失修改,脏读,不可重复读 超键,候选键,主键 构S(Stmcture)/完整性I(Integrity)/数据操纵M(Malippulation) ...
- 【spring源码分析】IOC容器初始化——查漏补缺（四）
前言:在前几篇查漏补缺中,其实我们已经涉及到bean生命周期了,本篇内容进行详细分析. 首先看bean实例化过程: 分析: bean实例化开始后 注入对象属性后(前面IOC初始化十几篇文章). 检查激 ...
随机推荐
- FreeMarker之根据模板生成Java代码
FreeMarker根据模板生成Java代码,光这句话,大家想必也知道它的应用了,比如流行的DRY原则,该原则的意思,可简单概述为"不要写重复的代码". 比如Java中三层架构,数 ...
- 失败 - 模块“MonitorLoop”打开电源失败。
启动虚拟机提示以下错误 失败 - 模块“MonitorLoop”打开电源失败. 磁盘空间满了
- git提交代码到码云
日常代码一般提交到github比较多,但我还是钟爱马爸爸,没错就是码云. 码云是中文版的代码托管的网站,不存在打开网速问题,使用也蛮方便的,日常自己保存托管代码已经足够,平时使用git提交代码到码云是 ...
- JS の 套路 I ~~
小扇在到新公司以后,发现.我的js都忘记了!! 下面总结一下在装配数据时候用到的一些小小的公式,希望像我这样的前端小菜B起到帮助叭叭叭叭叭~~~ I.查找想找到的 HTML 元素 * i.查找元素 v ...
- Java-链表（单向链表、双向链表）
Java-链表 1.什么是链表? 2.链表的特点是什么? 3.链表的实现原理? 4.如何自己写出一个链表? 1.什么是链表? 链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过 ...
- 查询优化百万条数据量的MySQL表
转自https://www.cnblogs.com/llzhang123/p/9239682.html 1.两种查询引擎查询速度(myIsam 引擎 ) InnoDB 中不保存表的具体行数,也就是说, ...
- phpstrom快捷键
PhpStorm 常用快捷键和配置 配置 设置代码及字体风格:File->Settings->Editor->Colors&Fonts->Font 安装插件(如:tp, ...
- jQuery实现全选、不选和反选功能
jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...
- 将变量做为一个对象的key，push新增进一个数组
var orgnIdListValue=["0","2"]; function arrayField(a,b){ let arrayMes=[]; for(va ...
- Delphi在Android下通过WiFI进行调试
如果我们需要调试USB程序且Android设备只有一个USB口,那么可以通过WiFi来调试程序,这样USB口就可以用了. 大致步骤如下: 1.在有root权限的Android设备里安装“Wifi AD ...