大佬教程收集整理的这篇文章主要介绍了常用meta整理,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
必要属性
属性@H_502_22@ | 值@H_502_22@ | 描述@H_502_22@ |
---|---|---|
content | some text | 定义与http-equiv或name属性相关的元信息 |
可选属性
属性@H_502_22@ | 值@H_502_22@ | 描述@H_502_22@ |
---|---|---|
http-equiv | content-type / expire / refresh / set-cookie | 把content属性关联到http头部。 |
name | author / description / keywords / generator / revised / others | 把 content 属性关联到一个名称。 |
content | some text | 定义用于翻译 content 属性值的格式。 |
<Meta name="keywords" content="your tags" />
<Meta name="description" content="150 words" />
<Meta name="robots" content="index,follow" /> <!-- all:文件将被检索,且页面上的链接可以被查询; none:文件将不被检索,且页面上的链接不可以被查询; index:文件将被检索; follow:页面上的链接可以被查询; noindex:文件将不被检索; nofollow:页面上的链接不可以被查询。 -->
<Meta http-equiv="refresh" content="0;url=" />
<Meta name="author" content="author name" /> <!-- 定义网页作者 --> <Meta name="google" content="index,follow" /> <Meta name="googlebot" content="index,follow" /> <Meta name="verify" content="index,follow" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->
注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。
<Meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
<Meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<Meta name="apple-mobile-web-app-title" content="标题">
<Meta content="telephone=no" name="format-detection" />
<Meta content="email=no" name="format-detection" />
<Meta name="apple-itunes-app" content="app-id=myAppStorEID,affiliate-data=myAffiliateData,app-argument=myURL">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <Meta name="HandHeldFriendly" content="true"> <!-- 微软的老式浏览器 --> <Meta name="MobiLeoptimized" content="320"> <!-- 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 charset='utf-8' />
<Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 关于X-UA-Compatible --> <Meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 --> <Meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 --> <Meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
<Meta name="renderer" content="webkit|ie-comp|ie-stand">
国内双核浏览器默认内核模式如下:
1. 搜狗高速浏览器、QQ浏览器:IE内核(兼容模式)
2. 360极速浏览器、遨游浏览器:Webkit内核(极速模式)
<Meta http-equiv="Pragma" content="no-cache">
<Meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --> <Meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
<Meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url"> <!-- [wml|xhtml|html5]根据手机页的协议语言,选择其中一种; url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。 -->
<Meta http-equiv="Cache-Control" content="no-siteapp" />
COMPLETE LIST OF HTML META TAGS
W3C META TAGS
METATAGES in HTML5
MDN META TAGS
以上是大佬教程为你收集整理的常用meta整理全部内容,希望文章能够帮你解决常用meta整理所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。