美文网首页
meta总结

meta总结

作者: 小芬芬007 | 来源:发表于2016-12-05 23:45 被阅读0次

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

相关文章

  • HTML中的meta标签常用属性及作用

    文章参考: HTML meta标签总结与属性使用介绍 和 HTML中的meta标签常用属性及其作用总结 在ht...

  • meta总结

    标准的 lang 属性写法 声明文档使用的字符编码 优先使用 IE 最新版本和 Chrome ...

  • meta总结

    meta标签是什么? meta标签是HTML语言head区的一个辅助性标签 meta标签的作用 搜索引擎优化(SE...

  • html meta标签使用总结

    参考文章:html meta标签使用总结

  • 网页meta总结

    Meta标签是HTML语言中HEAD区的一个辅助性标签,它位于HTML文档头部的 标记 和 标记之间,它提供用户不...

  • 关于meta总结

    相信前端开发的同学对meta都不陌生,meta是页面的头部元信息,告诉浏览器的一些规则,关键字等,位于 标签想了解...

  • meta学习总结

    meta步骤: 1、首先查阅文献整理表格如下,表头必须包括这几项: study year hr lci ...

  • meta(常用总结)

    元素表示那些不能由其它HTML元相关元素 ( , , , 或 ) 之一表示的任何元数据信息. name属...

  • 笔记 - isa和superclass

    isa的调用 class的superclass meta-class的superclass 总结1 总结2 isa...

  • isKindOfClass与isMemberOfClass的区别

    源码分析: 总结: + (BOOL)isMemberOfClass: 是判断该类的meta class是否和cla...

网友评论

      本文标题:meta总结

      本文链接:https://www.haomeiwen.com/subject/cwmnpttx.html