meta标签多种用法
<meta name=”google” content=”notranslate” />
<!-- 有时,Google在结果页面会提供一个翻译链接,但有时候你不希望出现这个链接,你可以添加这样一个meta标签 --> <!--<meta http-equiv=”refresh” content=”30”>-->
<!-- 使用这个meta标签你可以控制浏览器在一段时间之后自动刷新。举例说明,下面的代码表示每隔30秒网页自动更新 --> <!--<meta http-equiv=”refresh” content=”30;URL=’http://website.com’”>-->
<!-- 你也可以在刷新之后跳转到另外一个页面 --> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 开启ie8渲染 --> <meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例 --> <meta content="target-densitydpi=device-dpi, width=750,user-scalable=no" name="viewport" />
<!--这个属性只对android系统起作用,专有属性。iOS不支持它,所以说起来,还是有兼容性问题,如果页面是兼容IOS和android的话。--> <meta name="description" content="" />
<!-- description(网站内容描述) --> <meta name="keywords" content="" />
<!-- 这些元标记控制搜索引擎如何抓取和索引页。 "robots"元标记指定的规则适用于所有搜索引擎 --> <meta name="robots" content="index,follow" />
<!-- all:文件将被检索,且页面上的链接可以被查询; none:文件将不被检索,且页面上的链接不可以被查询; index:文件将被检索; follow:页面上的链接可以被查询; noindex:文件将不被检索; nofollow:页面上的链接不可以被查询。 --> <meta name="author" content="author name" />
<!-- 说明这个网页的作者是 author name 网络爬虫robot (Google,百度等搜索引擎)会读取网页中meta项将其作为索引,大家搜索网页时搜索“author name”时就会搜到这个网页了--> <meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 启用 WebApp 全屏模式 如果safari不开启全屏模式,那么通过safari浏览该html的时候保存的Cookie等其他数据不会被清空--> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | 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" />
<!--app里面从页面下载一个app图标 告诉浏览器网站对应的是什么app-->
<!-- 添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html --> <meta name="HandheldFriendly" content="true">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="MobileOptimized" content="320">、
<!-- 微软的老式浏览器 --> <meta name="screen-orientation" content="portrait">
<!-- uc强制竖屏 --> <meta name="x5-orientation" content="portrait">
<!-- QQ强制竖屏 --> <meta name="full-screen" content="yes">
<!-- UC强制全屏 --> <meta name="x5-fullscreen" content="true">
<!-- QQ强制全屏 --> <meta name="browsermode" content="application">
<!-- UC应用模式 --> <meta name="x5-page-mode" content="app">
<!-- QQ应用模式 --> <meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 是否删除默认的苹果工具栏和菜单栏 --> <meta name="renderer" content="webkit">
<!-- 启用360浏览器的极速模式(webkit) --> <!--下面两个没试过不怎么清楚-->
<link rel= "apple-touch-icon" sizes= "76x76" href= "touch-icon-ipad.png">
<!--如果 apple-mobile-web-app-capable 设置为 yes 了,那么在苹果机的safari上可以通过添加到主屏按钮将网站添加到主屏幕上。-->
<!--而设置相应 apple-touch-icon 标签,则添加到主屏上的图标就会使用我们指定的图片。--> <link rel= "apple-touch-startup-image" href= "/startup.png">
<!--基于 apple-mobile-web-app-capable 设置为 yes ,可以为WebApp设置一个类似NativeApp的启动画面。和 apple-touch-icon 不同,-->
<!--apple-mobile-web-app-capable 不支持sizes属性,要使用media来加载不同的启动画面。详细查询 大漠的文章 。-->
meta标签多种用法的更多相关文章
- html中meta标签及用法理解
自己一直想成为高级前端开发工程师,而自学.奈何最近感觉自学收效甚微,一度迷茫. 不破不立,打算改变这样的状态. 春节后上班第一天,今年打算好好实现自己的前端梦想. 重新整理.总结前端技术. 废话,就不 ...
- meta标签的用法
meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和 ...
- HTML meta标签的用法及head中的一些常用标签
meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta主要为分HTTP标头信息(HTTP-EQUIV)和页面描述信息(NAME)标头信息包括文档类型.字符集.语言等浏览器正确显示网页的信 ...
- html meta标签属性用法集合
1.<meta name="generator" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等: 2 ...
- HTML5 meta标签的用法
声明文档使用的字符编码:<meta charset="utf-8" />声明文档的兼容模式:<meta http-equiv="X-UA-Compati ...
- 【JSP】<meta>标签用法
转载自:http://blog.sina.com.cn/s/blog_65c74cce0102v39z.html 非常感谢这位博主,急着用,改日再细细品味重新整理这篇博文. http-equiv M ...
- html meta标签用法详细介绍
meta是html语言head区的一个辅助性标签. 在页面中都有类似这样的html代码: <head> <meta http-equiv="content-Type&quo ...
- meta标签的常见用法
一.定义和用法 <meta> 标签始终位于 head 元素中.<meta> 元素可提供有关页面的元信息(meta-information),元数据不会显示在页面上,但是对于机器 ...
- meta标签的一些用法
meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <head> <meta http-equiv="conten ...
随机推荐
- 浮动 float
1.未设浮动属性,位于标准流中 2.如果设置浮动属性,则容器不再位于标准流中,不再占用空间.容器会根据内容确定宽度 3.尽量将搜索引擎要搜索的内容放到网页的前部,更要容易排名到 4.clear属性清除 ...
- 聊聊、Highcharts 动态数据优化版
好久没来博客园了,最近项目太紧.上一篇写了 <Highcharts 之[动态数据]>,不够完善,虽然横纵轴可以动态取数据,但是行业信息是固定的,不能随着大数据热点改变.废话不说,直接上代码 ...
- Android Webview 与JS交互
Android中 WebView控件支持JS与本地代码的交互. // 是否允许在webview中执行javascript webSettings.setJavaScriptEnabled(true); ...
- 【Luogu】P3979遥远的国度(树链剖分)
题目链接 不会换根从暑假开始就困扰我了……拖到现在…… 会了还是很激动的. 换根操作事实上不需要(也不能)改树剖本来的dfs序……只是在query上动动手脚…… 设全树的集合为G,以root为根,u在 ...
- spring入门到放弃——spring事务管理
Spring事务提供了两种管理的的方式:编程式事务和声明式事务 简单回顾下事务: 事务:逻辑上的一组操作,组成操作的各个单元,要么全部成功,要么全部失败. 事务特性: 原子性:一个事务包含的各个操作单 ...
- 计算器(bzoj 2242)
Description 你被要求设计一个计算器完成以下三项任务: 1.给定y,z,p,计算Y^Z Mod P 的值: 2.给定y,z,p,计算满足xy≡ Z ( mod P )的最小非负整数: 3.给 ...
- 巧克力(zoj 1363)
2100年,ACM牌巧克力将风靡全球. “绿的,橘红的,棕色的,红的…”,彩色的糖衣可能是ACM巧克力最吸引人的地方.你一共见过多少种颜色?现在,据说ACM公司从一个24种颜色的调色板中选择颜色来装饰 ...
- FOJ Problem 2257 Saya的小熊饼干
...
- AC日记——飞行员配对方案问题 洛谷 P2756
题目背景 第二次世界大战时期.. 题目描述 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2 名飞行员,其中1 名是英国飞行员,另1名是外 ...
- Gym 101917 E 简单计算几何,I 最大流
题目链接 https://codeforces.com/gym/101917 E 题意:给定一个多边形(n个点),然后逆时针旋转A度,然后对多边形进行规约,每个点的x规约到[0,w]范围内,y规约到[ ...