meta总结

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">

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签...
    Ymuyi阅读 1,450评论 4 29
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,843评论 1 92
  • Meta标签是HTML语言中HEAD区的一个辅助性标签,它位于HTML文档头部的 标记 和 标记之间,它提供用户不...
    JuanitaLee阅读 379评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,107评论 19 139
  • 随着html5的普及和Web技术的净化,从Windows XP的IE6到IE8、IE9、IE10、IE11,Edg...
    波段顶底阅读 2,288评论 1 1