meta标签是什么?
meta标签是HTML语言head区的一个辅助性标签
meta标签的作用
搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,控制页面缓冲,网页定级评价,控制网页显示的窗口等
meta标签的使用
meta标签共有两个属性,它们分别是http-equiv
属性和name
属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能
name属性
name属性主要用于描述网页,比如网页的关键词,描述等。与之对应的属性值为content,content中的内容主要是便于搜索引擎抓取。
name有以下几种参数
keywords:设置关键字,给搜索引擎用的
<meta name="keywords" content="******">
description:网站内容描述
<meta name="description" content="******">
robots:用于告诉搜索机器人哪些页面需要索引,哪些页面不用
<meta name="robots"content="none">
具体参数如下:
信息参数为all:文件将被检索,且页面上的链接可以被查询;
信息参数为none:文件将不被检索,且页面上的链接不可以被查询;
信息参数为index:文件将被检索;
信息参数为follow:页面上的链接可以被查询;
信息参数为noindex:文件将不被检索,但页面上的链接可以被查询;
信息参数为nofollow:文件将被检索,但页面上的链接不可以被查询;
charset:页面的编码格式
<meta charset="UTF-8" />
author:标注网页的作者
<meta name="author"content="root,root@xxxx.com">
copyright:网站版权信息
<meta name="copyright" content="Lxxyx">
renderer:用于指定双核浏览器默认以何种方式渲染页面
<meta name="renderer" content="webkit|ie-comp|ie-stand"> //默认webkit内核,IE兼容模式,默认IE标准模式
ps.国内双核浏览器默认内核模式如下: 1. 搜狗高速浏览器、QQ浏览器:IE内核(兼容模式) 2. 360极速浏览器、遨游浏览器:Webkit内核(极速模式)
X-UA-Compatible:浏览器采取何种版本渲染当前页面
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />//指定IE和Chrome使用最新版本渲染当前页面
cache-control:指定请求和响应遵循的缓存机制
<meta http-equiv="cache-control" content="no-cache">
共有以下几种用法:
no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。
no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)
public : 缓存所有响应,但并非必须。因为max-age也可以做到相同效果
private : 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)
maxage : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。
no-siteapp:禁止当前页面在移动端浏览时,被百度自动转码。
expires:用于设定网页的到期时间,过期后网页必须到服务器上重新传输
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
** refresh:**网页将在设定的时间内,自动刷新并调向设定的网址
<meta http-equiv="refresh" content="2;URL=http://www.lxxyx.win/"> //2秒后跳转向我的博客
Set-Cookie(cookie设定):如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例
移动端应用###
viewport:移动端的窗口
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
ps.使用initial-scale=1到非响应式网站上,会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果initial-scale=1和user-scalable=no或maximum-scale=1同时使用,则将不能放大/缩小网页来看到全部的内容。
【苹果web app持有】####
WebApp全屏模式:删除默认的苹果工具栏和菜单栏
<meta name="apple-mobile-web-app-capable" content="yes" /> //启用 WebApp 全屏模式
把一个web app添加到了主屏幕中,从主屏幕中打开这个web app则全屏显示
<meta name="apple-touch-fullscreen"content="yes">
隐藏状态栏/设置状态栏颜色:content的值为default| black | black-translucent
<meta name="apple-mobile-web-app-status-bar-style"content="black-translucent" />
设置webapp的放置主屏幕上icon文件路径
<link rel="apple-touch-icon" href="iphone_milanoo.png"/>//IOS
<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png"/>//Android
ps.注意:该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录;唯一的区别是*-precomposed不会运用IOS默认的圆角和调光;
忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />
忽略识别邮箱
<meta content="email=no" name="format-detection" />
uc强制竖屏
<meta name="screen-orientation" content="portrait">
QQ强制竖屏
<meta name="x5-orientation" content="portrait">
UC强制全屏
<meta name="full-screen" content="yes">
QQ强制全屏
<meta name="x5-fullscreen" content="true">
UC应用模式
<meta name="browsermode" content="application">
QQ应用模式
<meta name="x5-page-mode" content="app">
windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no">