分类 默认分类 下的文章

123

360°查看产品

一种简单的交互式资源,可用于提供产品的虚拟导览。
在电子商务设计中,主要目标之一是填补产品和用户之间的空白。这对于高价商品尤为重要。因此,集成交互式工具的重要性,为用户提供了“虚拟体验”产品的方式。

今天的资源是一个简单的交互式资源,可用于显示产品的虚拟导览。该片段背后的想法是使用图像精灵并将拖动链接到该图像的特定帧。您可以使用它来显示技术小工具(或汽车,如我们的演示!)的外观,或者通常用于创建精美的产品动画。

Kapture 2019-04-18 at 14.56.09.gif

演示

123

响应式全屏幕 css-loading ++++

Kapture 2019-04-08 at 15.30.43.gif

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>loading</title>
</head>
<body>
<style>
#loader {
    background: rgba(255,255,255,1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    transform: scaleX(1);
    transform-origin: right;
    transition: all .3s ease-in-out
}

#loader .cross {
    position: relative;
    width: 10vw;
    height: 10vw;
    margin: 1em
}

.cross:nth-child(odd) {
    animation: rotate 5s linear infinite
}

.cross:nth-child(even) {
    animation: rotateReverse 5s linear infinite
}

#loader .cross::after,#loader .cross::before {
    content: '';
    background-color: #000
}

#loader .cross::before {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 40%;
    transform: translateY(-50%)
}

#loader .cross::after {
    position: absolute;
    left: 50%;
    width: 40%;
    height: 100%;
    transform: translateX(-50%)
}

#loader.loaded {
    transform: scaleX(0)!important
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes rotateReverse {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(-360deg)
    }
}
</style>
<div id="loader">
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
</div>
</body>
</html>

Demo →

123

web代码高亮显示 highlight.js

highlight.js

官网

GitHub

用法,非常简单

  • 185种语言和89种风格
  • 自动语言检测
  • 多语言代码突出显示
  • 可用于node.js
  • 适用于任何标记
  • 与任何js框架兼容
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

当然你也可以自定义配置

123

用户隐私保护政策+用户协议 H5 响应式版本

单页面版,响应式,自行修改即可使用,简单的非常。文末附预览和下载!
index.html (首页)
privacy.html (隐私保护政策)
terms.html (用户协议)
contact.html (联系我们)
style.min.css (style)


更新日期:2018-8-8
生效日期:2018-8-8

用户隐私保护政策

一、前言

北京xxxx有限公司(以下简称「」)非常重视保护用户的个人隐私,保护用户的个人信息,希望与大家用户之间建立和谐的互相信任的关系。

在您在使用及旗下各应用软件和的服务时,我们可能会收集和使用您的一些相关信息。在此,我们将通过本《隐私政策》向您说明,在我们提供服务的过程中可能会是如何收集、使用、储存相关这些信息,以及我们将为您提供的控制和如何保护这些信息和您的隐私安全的方式。本《隐私保护政策》与您所使用的服务息息相关,希望您仔细阅读。在您使用或继续使用我们的软件或服务,即表明您同意我们按照本《隐私保护政策》收集、使用、储存您的相关信息。

二、我们可能收到的信息

在您使用客户端产品或服务的过程中,我们会收集部分使用信息并发往我们的服务器。我们的服务器收到的信息可划分为两类,一类是关于用户如何使用产品的信息,另外一类是用户所拥有数据的汇总统计信息。我们收集信息是为了向所有用户提供更好的服务,其中既包括一些推断出来的基本信息(例如您使用的语言),也包括一些较为复杂的信息(例如您觉得哪些推广内容最有用)。

我们有两种信息收集方式:

(一)您向我们提供的信息

我们的很多服务都要求您注册账户,而当您注册账户时,我们可能会要求您提供个人信息,例如姓名,昵称,电子邮件,有时候可能还需要提供身份证信息,以及其他个人信息,以向您提供完整的服务或技术支持。
您通过我们的服务向其他方分享的信息,以及其他通过我们的服务主动存储的信息,例如通过浪花日记记录的内容。
(二)我们在您使用服务的过程中获取的信息 我们会收集关于您使用的服务以及使用方式的信息,例如您何时记录了日记、何时访问了一个使用我们的推广服务的网站,或者何时查看了我们的推广内容并与之互动。以下具体介绍产品可能会获得什么信息。

日志信息,指您使用我们的服务时,系统自动采集的技术信息,包括:
硬件配置及软件版本。例如您的移动设备、网页浏览器或用于接入我们服务的其他程序所提供的配置信息、您的IP地址和移动设备所用的版本和设备识别码(IMEI);
软件及其他软件的信息。例如浪花日记的版本,使用浪花日记的频率,使用的主要用途,有关您使用其他APP软件的信息,如使用时间、使用频率等;
关于软件功能的信息。 例如浪花日记在使用过程中是否出现崩溃等软件故障,并对产品进行改进;
各功能的使用统计。 在软件内提供了多种功能,我们使用这些数据来判断你对各个功能的喜爱程度,评估我们的产品是否能符合你的使用习惯,并做出相应的改进;
数据同步、分享和储存。提供的某些服务允许您同步、分享和储存数据,我们将会收集并储存您选择要上传、下载或实现这类功能的数据。
在使用我们服务时搜索或浏览的信息,例如您使用的网页搜索的关键词、访问的页面 url 地址,以及您在使用我们服务时浏览或要求提供的其他信息和内容详情;
位置信息。指您开启移动终端设备定位功能并使用我们基于位置提供的相关服务时,我们收集的有关您位置的信息,包括:
您通过具有定位功能的移动设备使用我们的服务时,我们通过 GPS 或 Wi-Fi 等方式收集的您的地理位置信息;
您或其他用户提供的包含您所处地理位置的实时信息,例如您提供的账户信息中包含的您所在地区信息,您或其他人上传的显示您当前或曾经所处地理位置的共享信息,例如您或其他人共享的照片包含的地理标记信息;
您可以通过关闭定位功能随时停止我们对您的地理位置信息的收集。
另外,在你使用某些特定功能时,有一些需要注意的地方:
如果使用时不幸发生崩溃,所发送的崩溃报告可能也会附加少量和你正在操作的数据相关的信息。这对我们进行诊断是必须的。
如果你通过打开网页,网页可以获得标准日志信息,包括 IP 地址、cookies 等等。这和你使用普通浏览器是一样的。

三、我们如何使用您的个人信息

将严格遵守本隐私政策及其更新所载明的内容来使用您的个人信息。您的个人信息将仅用于收集时即已确定并且经过您同意的目的,如有除此之外的任何其他用途,我们都会提前征得您的同意。

我们收集的个人信息将被用于确保我们产品和服务的功能和安全、验证您的身份、防止并追究欺诈或其他不当使用的情形。
我们收集的个人信息将被用于我们的产品和服务开发,尽管一般情况下,我们为此目的仅使用综合信息和统计性信息。
我们收集的个人信息将被用于与您进行交流,例如,在产品或服务更新、发布的第一时间向您发出通知。
我们所收集的个人信息将被用于进行产品的个性化设计,并向您提供更为贴身的服务,例如:在我们的服务中自动进行推荐、展示专为您打造的内容和推广。
如果您参与举办的抽奖、竞赛或类似推广活动,我们会将您提供的个人信息用于管理此类活动。

四、非个人信息的使用

对于我们收集的本身无法与任何特定个人直接建立联系的数据,诸如使用偏好、硬件配置、位置信息、软件操作信息等,可以帮助我们更好地了解用户行为,改进我们的产品、服务和推广宣传。

对于您通过服务分享的其他信息,例如收藏并分享的应用信息等内容会根据具体产品的需要分享给第三方使用。

五、我们可能分享的信息

除以下情形外,未经您同意,不会与任何第三方分享您的个人信息:

出于提供的服务或者履行我们在《服务协议》或本《隐私政策》中的义务和行使我们的权利,我们可能会与我们的合作伙伴等第三方(例如您的移动运营商)开展联合营销及其他沟通活动。为了避免重复或不必要的沟通,并为您量身定制相关信息,我们可能需要将收集的信息与合作伙伴收集的信息进行匹配,但前提是法律允许这样做。

这些授权第三方不得将您的个人数据用于任何其他用途。 我们会要求他们遵照本政策行事,并采取适当的安全措施来保护您的个人数据。

随着我们业务的持续发展,我们以及我们的关联公司有可能进行合并、收购、资产转让或类似的交易,我们收集的相关信息有可能作为此类交易的一部分而被转移。

我们或我们的关联公司还可能为以下需要而使用或披露您的个人信息:

遵守适用的法律法规;
遵守法院命令或其他法律程序的规定;
遵守相关政府机关的要求;
为遵守适用的法律法规、维护社会公共利益,或保护我们的客户、我们或我们的集团公司、其他用户或雇员的人身和财产安全或合法权益所合理必需的用途。

六、未成年人信息保护

我们鼓励父母或监护人指导未满十八岁的未成年人使用我们的服务。我们建议未成年人鼓励他们的父母或监护人阅读本《隐私政策》,并建议未成年人在提交的个人信息之前寻求父母或监护人的同意和指导。

七、信息安全

我们仅在本《隐私政策》所述目的所必需的期间和法律法规要求的时限内保留您的个人信息。我们使用各种安全技术和程序,以防信息的丢失、不当使用、未经授权阅览或披露。但请您理解,由于技术的限制以及可能存在的网络恶意手段,我们虽然尽力保护信息的安全,但是不可能始终保证信息的绝对安全。

八、隐私政策的适用范围

本《隐私政策》适用软件内的所有服务。但是针对某些特定服务的隐私政策,我们将更具体地说明在该等服务中如何使用您的信息。如相关特定服务的隐私政策与本《隐私政策》有不一致之处,适用该特定服务的隐私政策。

请您注意,本《隐私政策》不适用于以下情况:

通过我们的服务而接入的第三方服务(包括任何第三方网站)收集的信息;
通过在我们服务中进行推广服务的其他公司或机构所收集的信息;
通过第三方服务发送给我们的信息,第三方服务可能会保存、收集相关信息,我们对于第三方服务的行为不做保证。例如使用微信发送到我们公众号的信息。

九、变更

我们可能适时修订本《隐私政策》的条款,我们将在修订生效前通过在主页上显著位置提示或向您发送电子邮件或以其他方式通知您。在向您进行通知之后,若您继续使用我们的服务,即表示同意受经修订的本《隐私政策》的约束。


用户服务协议

条款

本最终用户条款(以下或简称「条款」)系由您与xxxx有限公司(以下简称「」)所订立的相关权利义务规范,用以描述向您提供服务(包括但不限于APP、小程序、以及提供的其他产品)及您使用服务所涉及的详细规定。因此,请您于注册成为用户或开始使用提供服务前,切实详细地阅读本条款的所有内容。
只要您完成注册或开始使用提供的任何服务,即表示您已无条件接受了本条款的相关规定及就此公布的各项管理规定,并愿意受其约束。如果发生纠纷,您应自行承担事实上未认真阅读本条款的责任,不得以未仔细阅读为由进行抗辩。

服务内容

通过不同软件或工具向您提供不同的服务。例如,APP、公众号及小程序等软件。
除非另有明确约定,软件或服务的版本更新或增加新功能或服务,均自动适用本协议的约定。
向您提供免费服务和收费服务。在提供收费服务前,会向您给予明确提示,只有在您根据提示指示选择同意支付相关费用后,才会向您提供该等收费服务。如果您拒绝支付相关费用,有权不向您提供该等收费服务。
的手机客户端(不包括的微信公众号及微信小程序产品)在未经您许可的情况下不会使用 2G/3G/4G 网络流量。如果您许可使用网络流量,产生的流量费用将由运营商收取,不会在其中得到收益。您应当自行负担使用服务所需的设备(例如个人手机、及其他与接入互联网或移动网有关的装置)及所需的费用(如为接入互联网而支付的电话费及上网费、为使用移动网而支付的手机费)。

用户账号

您在进行注册时,须根据要求提供相应的注册信息。为了获得的完整服务,您应提供真实的身份识别资料,并应在前述资料发生变更时,及时进行线上更新。若您所提供的资料与事实不符或所提供的资料业已变更而未更新或有任何误导之嫌而导致无法为您提供或继续提供服务的,您应自行承担由此引发的损失而与无关。
您须了解和认可,账号的所有权归所有,账号的使用权仅归属于原始注册人。未经的事先书面同意,您不得以任何形式将账号及密码转让、赠予、出借、售卖予第三方或者以其他方式许可非初始注册人对其进行使用,否则有权封禁、删除该账号。如您并非当前所使用账号的原始注册人,您应立即停止对该账号的一切使用及操作,同时有权依原始注册人之请求或依自身判断将该账号重新交予原始注册人使用,由此引发的全部责任及损失与无关。
您有义务妥善保管在注册时获得的账号及密码,如因黑客、第三人行为或您自身保管疏忽导致账号、密码遭他人非法使用并给您造成损失的,就此不承担任何责任。
如您发现自身账号遭他人非法使用或有异常使用的情形,应立即通知,并提供与原始注册人相一致的个人有效身份信息。在核实您所提供的个人有效身份信息后,将尽可能为您维护自身合法权利提供必要协助,但并不承诺您一定能通过该途径找回账号。

使用规则

您应就自身使用服务的行为负责,并保证在使用服务的过程中遵循以下原则:

遵守中国有关的法律和法规;
遵守本条款及发布的相关管理规定;
不得以任何形式侵犯第三方及的合法利益;
不得将提供的服务用于任何非法或侵权活动,包括但不限于将其用于展示、传播包含色情、种族主义、低级趣味、淫秽、诽谤中伤、污辱性质的资料,以及传播任何针对宗教、民族传统、人种、性别、年龄的各种仇恨、歧视和偏见的内容。
有权对您使用服务的情况进行审查和监督,如根据自身独立判断认为您存在违法或违约行为的,有权要求您纠正相应行为,并采取一切必要的措施(包括但不限于更改或删除您发布或上传的内容、暂停或终止您使用服务的权利等)以减轻您行为造成的影响。但您确认,的审查行为并不为其设置任何责任,也不免除您的任何义务。

您应保证自身对本软件的使用行为的合法性、正当性,且不得对客户端进行反编译、反汇编、破解等行为。

请勿滥用或干扰本软件服务,包括但不限于将本软件服务用于非法目的,篡改与本软件相关的计算机代码,使用与、探索版相关的标志或文字,攻击的服务器,删除、隐藏或修改任何与本软件服务相关的声明等。

您须了解并认可,在您使用服务发表内容(例如评论)时,须遵守社会公序良德和相关法律法规,且不得发布和上传如下内容:

违反宪法确定的基本原则的
违反我国法律、法规及其它规定的
违背社会公序良俗,有损社会公共利益的
侵害第三方合法权益的文件或信息,包括但不限于病毒代码、黑客程序、软件破解注册信息等
未获合法授权的文章、图片、音乐、视频、应用等
违法或骚扰性的广告内容或链接
违反信息发布政策或损害合法权益的
有权对您发布和上传的内容进行审核,如根据自身独立判断认为您所发布、上传的内容包含前述情况的,有权直接删除相关内容,且无需另行通知您。您在此确认,的审核行为并不为其设置任何义务,也不能免除您的任何责任。

由于您发布上传的内容带来的法律纠纷或其它后果,需要由您自行承担,您需对此为提供充分免责。

您在使用过程中创作内容所包含的权利将依法归您自行所有。但您应了解,对于您通过服务发布、上传至可公开获取区域的任何内容,均视为您已同意授权获得相应内容在全世界范围内免费的、永久性的、不可撤销的、非独家的和完全再许可的权利和许可,以使用、复制、修改、改编、出版、翻译、据以创作衍生作品、传播、表演和展示此等内容(整体或部分),和/或将此等内容编入当前已知的或以后开发的其他任何形式的作品、媒体或技术中。

如果根据自身独立判断认为您对的使用超出了合理范围,我们有权对您就服务的使用进行限制,您应自行承担由此引发的责任及损失。

隐私

非常重视用户的个人数据和隐私保护,承诺将采取必要措施保护您存放在服务器上的个人数据及隐私信息的安全。
关于您使用产品的程中可能收集的数据信息,请阅《隐私政策》。该《隐私政策》属于本协议的必要组成部分。
除本协议和《隐私政策》中规定情况外,保证不对外公开或向第三方提供、公开或共享您的个人数据及隐私信息。

知识产权

非常重视保护自身的知识产权,同时非常注重保护第三方的知识产权相关合法权益。自身所提供服务的相关著作权、专利权、商标、商业秘密及其它任何所有权或权利(包括但不限于客户端软件、我们对应用的排序等),均由独占性所有。非经的同意,您不得将其用于书面许可外用途(包括但不限于用于违法活动,或进行反向工程等)。
使用提供的服务并不会使您获得或拥有任何属于我们或第三方的知识产权。所链接的所有内容的所有权利均属于作者或第三方网站,请勿传播、复制、改编、修改或以其他方式不当使用他人作品,包括但不限于转载、链接、下载、复制、编辑、修改、变更、上传、分享、发行、表演、衍生其他作品、创作衍生品、诋毁、破坏作品技术保护措施等。
关于知识产权的具体约定请阅《知识产权保护声明》。该声明是本协议的必要组成部分。

免责声明

对于所展示的来自于第三方网站的内容(如视频、音乐、应用等)、用户存储的内容、用户发布的内容(如图片、评论),以及这些内容链接或指向的其他内容(如广告、推广)等非直接提供的内容,我们对其合法性、准确性、完整性和可靠性概不负责,亦不承担任何法律责任,亦不对该等内容作出任何明示或默示的保证,包括但不限于有关所有权、质量、没有侵犯第三方权利、没有病毒的保证。
将以最大努力向您提供稳定的服务,但您应对使用软件和服务的结果自行承担风险,对此不做任何承诺或保证,不保证服务不中断,对您的数据损失、丢失或服务停止不承担任何责任,由于网络带宽、手机(或其他电子设备)硬件限制等任何原因造成您无法正常使用本软件,不承担任何法律责任。
如果提供了一些特别有风险的功能,我们可能会额外请您确认。如果您点选确认或实际使用相应功能的,将视为您已了解并愿意承担相应风险。如您由此遭受实际损失的,须自行承担有关损失。

服务变更、中断与终止

所提供的服务存在因包括不可抗力、计算机病毒或黑客攻击、系统不稳定、您所在位置、通信线路、自身运营调整、合作伙伴调整等因素造成的服务中断或不能满足您要求的风险。
可能随时变更、中断或终止部分或全部的服务且无需另行对您进行通知,请注意定期对您存放在网络服务上的数据进行备份,以避免损失。
如您欲使用提供的服务,须承担以上风险,对您或任何第三人由此遭受的损害均不承担赔偿责任。

法律适用和争议解决

本协议的解释、效力及纠纷的解决,适用于中华人民共和国(不包括港澳台地区)法律。因使用服务产生的或与此相关的纠纷,及您均有权将其提交至北京仲裁委员会通过仲裁方式解决。仲裁裁决是终局的,对各方均有约束力。

协议的变更和修改

有权随时对本协议及其组成部分进行修改,并且一旦发生协议条款的变更,一旦相应内容发生变动,将官网网站内进行公示或在软件内提示您。您如果不同意本协议的修改,应当立即停止使用服务;如果您选择在本协议变更后继续使用服务,则视为您已经接受并愿意遵守本协议的修改。

其他规定

如依据我国法律法规的相关规定,本条款内任何规定被判定为部分或全部无效时,不影响其它规定的效力。
未对您的违约行为采取制止行为或者追究责任的,并不意味着放弃了协议下的该等权利。

1553146130327.jpg
1553146154800.jpg
1553146154800.jpg

预览

下载

123

HTML Meta 标签大全

HTML Meta Tags

HTML Meta 标签搜集,部分标签已加中文说明,欢迎补全。

基础 HTML Meta 标签

<!-- 声明文档使用的字符编码 -->
<meta charset="utf-8">
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符">
<!-- 页面关键词 -->
<meta name="keywords" content="你的, 关键词">
<meta name="subject" content="your website's subject">
<meta name="copyright" content="company name">
<meta name="language" content="ES">
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow">
<meta name="revised" content="Sunday, 7月18日th, 2010, 5:15 pm">
<meta name="abstract" content="">
<meta name="topic" content="">
<meta name="summary" content="">
<meta name="Classification" content="Business">
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com">
<!-- 网页设计师 -->
<meta name="designer" content="">
<!-- 网页制作软件 -->
<meta name="generator" content="VS Code">
<meta name="reply-to" content="email@gmail.com">
<meta name="owner" content="Design">
<meta name="url" content="http://www.google.com">
<meta name="identifier-URL" content="http://www.websiteaddress.com">
<meta name="directory" content="submission">
<meta name="pagename" content="jQuery Tools, Tutorials and Resources - O'Reilly Media">
<meta name="category" content="">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
<!-- 搜索引擎爬虫重访时间 -->
<meta name="revisit-after" content="7 days">
<meta name="subtitle" content="This is my subtitle">
<meta name="target" content="all">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="date" content="Sep. 27, 2010">
<meta name="search_date" content="2010-09-27">
<meta name="DC.title" content="Unstoppable Robot Ninja">
<meta name="ResourceLoaderDynamicStyles" content="">
<meta name="medium" content="blog">
<meta name="syndication-source" content="https://www.example.com/2018/12/24/free-brand-monitoring-tools/">
<meta name="original-source" content="https://www.example.com/2018/12/24/free-brand-monitoring-tools/">
<meta name="verify-v1" content="dV1r/ZJJdDEI++fKJ6iDEl6o+TMNtSu0kv18ONeqM0I=">
<meta name="y_key" content="1e39c508e0d87750">
<meta name="pageKey" content="guest-home">
<meta itemprop="name" content="jQTouch">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- 为移动设备添加 viewport -->
<!-- width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。 height:和 width 相对应,指定高度。 initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。 maximum-scale:允许用户缩放到的最大比例。 minimum-scale:允许用户缩放到的最小比例。 user-scalable:用户是否可以手动缩放。 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- 保留历史记录以及动画效果 -->
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">

公司/服务专用 Meta 标签

Apple Meta 标签

<!-- 添加到主屏后的标题(iOS 6 新增) -->
<meta name="apple-mobile-web-app-title" content="My App">
<!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!-- 设置苹果工具栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width; width = 320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes; target-densitydpi=160dpi">
<!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png">
<link href="touch-icon-ipad.png" rel="apple-touch-icon" sizes="72x72">
<link href="touch-icon-iphone4.png" rel="apple-touch-icon" sizes="114x114">
<link href="/startup.png" rel="apple-touch-startup-image"> <!-- Safari 9 Pinned tabs in El Capitan -->
<link rel="mask-icon" href="website_icon.svg" color="red"> <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch,72x72 像素,可以没有,但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"/>
<!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/> <!-- iPad 竖屏 768 x 1004(标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 竖屏 1536x2008(Retina) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 横屏 1024x748(标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 横屏 2048x1496(Retina) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>

Internet Explorer Meta 标签

<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)">
<meta name="mssmarttagspreventparsing" content="true">
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="msapplication-starturl" content="http://www.yourwebsite.com/">
<meta name="msapplication-window" content="width=800;height=600">
<meta name="msapplication-navbutton-color" content="red">
<meta name="application-name" content="Rey Bango Front-end Developer">
<meta name="msapplication-tooltip" content="Launch Rey Bango's Blog">
<meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico">
<meta name="msapplication-task" content="name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico">
<meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico">
<meta name="msapplication-task" content="name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico">
<meta name="msvalidate.01" content="6E3AD52DC176461A3C81DD6E98003BC9">
<meta http-equiv="cleartype" content="on">
<!-- 忽略页面中的数字识别为电话,忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 双核浏览器渲染方式 -->
<!-- 默认webkit内核 -->
<meta name="renderer" content="webkit">
<!-- 默认IE兼容模式 -->
<meta name="renderer" content="ie-comp">
<!-- 默认IE标准模式 -->
<meta name="renderer" content="ie-stand">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化,主要是针对一些老的不识别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">
``` #### Windows 8 Meta 标签 ``` html
<meta name="application-name" content=" Contoso" />
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content=" #009900" />
<!-- Windows 8 磁贴图标 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<meta name="msapplication-square70x70logo" content="images/smalltile.png" />
<meta name="msapplication-square150x150logo" content="images/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="images/widetile.png" />
<meta name="msapplication-square310x310logo" content="images/largetile.png" />
<meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/contoso1.xml;
polling-uri2=notifications/contoso2.xml; polling-uri3=notifications/contoso3.xml" />

TweetMeme Meta 标签

<meta name="tweetmeme-title" content="Retweet Button Explained">

Blog Catalog Meta 标签

<meta name="blogcatalog">

Rails Meta 标签

<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc=">

ClaimID Meta 标签

<meta name="microid" content="mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7">
<meta name="readability-verification" content="E7aEHvVQpWc8VHDqKvaB2Z58hek2EAv2HuLuegv7">
<meta name="google-site-verification" content="4SMIedO1X4IkYrYuhEC2VuovdQM36Xxb0btUjElqQyg">
<meta name="ICBM" content="40.746990, -73.980537">
<meta name="generator" content="WordPress 3.3.1">
<meta name="norton-safeweb-site-verification" content="tz8iotmk-pkhui406y41y5bfmfxdwmaa4a-yc0hm6r0fga7s6j0j27qmgqkmc7oovihzghbzhbdjk-uiyrz438nxsjdbj3fggwgl8oq2nf4ko8gi7j4z7t78kegbidl4">

HTML 链接类标签

<!-- 添加 RSS 订阅 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="https://example.com/feed.atom">
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="https://example.com/feed.atom">
<!-- 添加 favicon icon -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico">
<link rel="fluid-icon" type="image/png" href="/fluid-icon.png">
<link rel="me" type="text/html" href="http://google.com/profiles/thenextweb">
<link rel="shortlink" href="http://www.example.com/?p=353">
<link rel="archives" title="5月2003日" href="http://www.example.com/2003/05/">
<link rel="index" title="DeWitt Clinton" href="http://www.example.com/">
<link rel="start" title="Pattern Recognition 1" href="http://www.example.com/photos/pattern_recognition_1_about/">
<link rel="bookmark" title="Styleguide" href="http://www.example.com/about/styleguide/">
<link rel="search" href="/search.xml" type="application/opensearchdescription+xml" title="Viatropos"> <link rel="self" type="application/atom+xml" href="http://www.example.com/atomFeed.php?page=3">
<link rel="first" href="http://www.example.com/atomFeed.php">
<link rel="next" href="http://www.example.com/atomFeed.php?page=4">
<link rel="previous" href="http://www.example.com/atomFeed.php?page=2">
<link rel="last" href="http://www.example.com/atomFeed.php?page=147"> <link rel="canonical" href="http://www.example.com/2010/06/9-things-to-do-before-entering-social-media.html">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.example.com/xmlrpc.php?rsd">
<link rel="pingback" href="http://www.example.com/xmlrpc.php">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="http://wordpress.org/style/iphone.css" type="text/css">
<link rel="wlwmanifest" href="http://www.example.com/wp-includes/wlwmanifest.xml" type="application/wlwmanifest+xml"> <link rel="help" title="FAQ" href="/faq">
<link rel="logo" type="image/svg" href="https://playfoursquare.s3.amazonaws.com/press/logo/foursquare-logo.svg">
<link rel="P3Pv1" href="/w3c/p3p.xml">
<link rel="publisher" href="https://plus.google.com/115081025762845243709/">
<link rel="image_src" href="http://du3itj18e4z0b.cloudfront.net/7b29fe/images/icon-facebook.gif" type="image/jpeg"> <link rel="author" href="humans.txt" type="text/plain">
<link href="http://thenextweb.com/2009/01/08/how-to-snap-up-that-twitter-username-youve-always-wanted/" rel="original-source">
<link rel="profile" title="Microformats" href="http://microformats.org/profile/specs/">
<link rel="profile" href="http://gmpg.org/xfn/11">

OpenGraph Meta 标签

<!-- SNS 开放内容协议 (Open Graph Protocol) -->
<meta name="og:title" content="The Rock">
<meta name="og:type" content="movie">
<meta name="og:url" content="http://www.imdb.com/title/tt0117500/">
<meta name="og:image" content="http://ia.media-imdb.com/rock.jpg">
<meta name="og:site_name" content="IMDb">
<meta name="og:description" content="A group of U.S. Marines, under command of...">
<meta name="fb:page_id" content="43929265776">
<meta name="application-name" content="foursquare">
<meta name="og:email" content="me@example.com">
<meta name="og:phone_number" content="650-123-4567">
<meta name="og:fax_number" content="+1-415-123-4567">
<meta name="og:latitude" content="37.416343">
<meta name="og:longitude" content="-122.153013">
<meta name="og:street-address" content="1601 S California Ave">
<meta name="og:locality" content="Palo Alto">
<meta name="og:region" content="CA">
<meta name="og:postal-code" content="94304">
<meta name="og:country-name" content="USA">
<meta property="fb:admins" content="987654321">
<meta property="og:type" content="game.achievement">
<meta property="og:points" content="POINTS_FOR_ACHIEVEMENT">
<meta property="og:video" content="http://example.com/awesome.swf">
<meta property="og:video:height" content="640">
<meta property="og:video:width" content="385">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video" content="http://example.com/html5.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video" content="http://example.com/fallback.vid">
<meta property="og:video:type" content="text/html">
<meta property="og:audio" content="http://example.com/amazing.mp3">
<meta property="og:audio:title" content="Amazing Song">
<meta property="og:audio:artist" content="Amazing Band">
<meta property="og:audio:album" content="Amazing Album">
<meta property="og:audio:type" content="application/mp3">

参考资源