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初始化十几篇文章). 检查激 ...
随机推荐
- [Python 模块] logging模块、Logger类
logging模块: 标准库里面的logging模块,在前面学习线程安全时曾用来解决print被打断的问题,这里会介绍logging模块的功能. logging模块是线程安全的,不需要客户做任何特殊的 ...
- PAT——1041. 考试座位号
每个PAT考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位.正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生的考试座位号码,考试时考生需要换到考试座 ...
- Luogu_2774 方格取数问题
Luogu_2774 方格取数问题 二分图最小割 第一次做这种题,对于某些强烈暗示性的条件并没有理解到. 也就是每一立刻理解到是这个图是二分图. 为什么? 横纵坐标为奇数的只会和横纵坐标为偶数的相连. ...
- LINUX下安装pcre出现WARNING: 'aclocal-1.15' is missing on your system错误的解决办法
1.下载安装包 wget https://ftp.gnu.org/gnu/automake/automake-1.15.tar.gz 2.解压 tar -xzvf automake-1.15.tar. ...
- Java I/O系列（二）ByteArrayInputStream与ByteArrayOutputStream源码分析及理解
1. ByteArrayInputStream 定义 继承了InputStream,数据源是内置的byte数组buf,那read ()方法的使命(读取一个个字节出来),在ByteArrayInputS ...
- docker 导出导入
容器导出 docker export -o myname.tar 容器id 容器导人 docker import myname.tar httpd:v1
- 【css】table标签内的td、th如何设置固定宽度，而不是自适应？
table{ min-width: %; } td{ min-width: 100px; } .table-container{ overflow:auto; display: block; } &l ...
- ios软键盘将页面抵到上面后，关闭软键盘页面不回弹
这个问题有时候会导致弹出框确定按钮失效等一系列问题, 解决办法:失去焦点时将页面滚动到底层,或者最顶部,个人看实际情况滚动到适合位置 $('input,textarea').on('blur', fu ...
- MsSql 游标 修改字段两个表关联 表向另个表插入记录
-- 方法1:游标-- 声明变量DECLARE @SystemUserId AS UNIQUEIDENTIFIER -- 声明游标DECLARE C_SystemUser CURSOR FAST_FO ...
- MySQL----MySQL数据库入门----第一章 数据库入门
第一章 数据库入门 1.1 数据库基础知识 1.1.1 数据库概述 数据不仅包括普通意义上的数字,还包括文字.图像.声音等.也就是说,凡是在计算机中用来描述事物的记录都可称作数据. 数据库的基本特点: ...