[转] 移动前端不得不了解的HTML5 head 头标签

  HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要。这里整理了一份  部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的 头部标签,可以很有效的增强页面的可用性。

注:去年整理过移动前端不得不了解的html5 head 头标签,随着时间和浏览器厂商的升级,现在看起来似乎有些过时了。所以重新整理了一下。增加了新的内容,及过时的一些提示,同时增加了部分桌面端浏览器的一些说明。

HTML基本的头部标签

下面是HTML基本的头部元素:

doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">


<title>页面标题title>
...
head>

其中 html 代码:

<meta http-equiv="x-ua-compatible" content="ie=edge">

在桌面开发的时候可以让IE浏览器以最新的模式渲染页面,具体可以查看本文Internet Explorer浏览器部分。
如果你的页面确定只在桌面浏览器中运行,那么

<meta name="viewport" content="width=device-width, initial-scale=1">

也可以省略。

 

DOCTYPE

  DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

使用 HTML5 doctype,不区分大小写。

DOCTYPE html> 

charset

声明文档使用的字符编码,

<meta charset="utf-8">

html5 之前网页中会这样写:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

这两个是等效的,具体可移步阅读: vs ,所以建议使用较短的,易于记忆。

 

lang属性

更加标准的 lang 属性写法 http://zhi.hu/XyIa

简体中文

<html lang="zh-cmn-Hans"> 

繁体中文

<html lang="zh-cmn-Hant"> 

很少情况才需要加地区代码,通常是为了强调不同地区汉语使用差异,例如:

<p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">菠萝strong><strong lang="zh-cmn-Hant-TW">鳳梨strong>其实是同一种水果。只是大陆和台湾称谓不同,且新加坡、马来西亚一带的称谓也是不同的,称之为<strong lang="zh-cmn-Hans-SG">黄梨strong>p>

为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢,请移步阅读: 页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”。

 

Meta 标签

  meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 </code> 标记之间,它提供用户不可见的信息。虽然这部分信息用户不可见,但是其作用非常强大,特别是当今的前端开发工作中,设置合适的meta标签可以大大提升网站页面的可用性。</span></p> <p><span style="font-family: times new roman,times;">  桌面端开发中,meta标签通常用来为搜索引擎优化(SEO)及 robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根 据你定义的时间间隔刷新自己,以及设置RASC内容等级,等等。</span></p> <p><span style="font-family: times new roman,times;">  移动端开发中,meta标签除了桌面端中的功能设置外,还包括,比如viewport设置,添加到主屏幕图标,标签页颜色等等实用设置。具体可以看后面详细的介绍。</span></p> <h4><span style="font-family: times new roman,times;">meta标签分类</span></h4> <ul> <li><span style="font-family: times new roman,times;">meta标签根据属性的不同,可分为两大部分:http-equiv 和 name 属性。</span></li> <li><span style="font-family: times new roman,times;">http-equiv:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助浏览器正确地显示网页内容。</span></li> <li><span style="font-family: times new roman,times;"> name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于浏览器,搜索引擎等机器人识别,等等。</span></li> </ul> <h4><span style="font-family: times new roman,times;">推荐使用的meta标签</span></h4> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #008000;"><!--</span><span style="color: #008000;"> 设置文档的字符编码 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="x-ua-compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1, shrink-to-fit=no"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 以上 3 个 meta 标签 *必须* 放在 head 的最前面;其他任何的 head 内容必须在这些标签的 *后面* </span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 允许控制资源的过度加载 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Security-Policy"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="default-src 'self'"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 尽早地放置在文档中 </span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 仅应用于该标签下的内容 </span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Web 应用的名称(仅当网站被用作为一个应用时才使用)</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="application-name"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="应用名称"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 针对页面的简短描述(限制 150 字符)</span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 在*某些*情况下,该描述是被用作搜索结果展示片段的一部分 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="一个页面描述"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 控制搜索引擎的抓取和索引行为 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="robots"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="index,follow,noodp"</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 所有的搜索引擎 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="googlebot"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="index,follow"</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 仅对 Google 有效 </span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 告诉 Google 不显示网站链接的搜索框 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="google"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="nositelinkssearchbox"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 告诉 Google 不提供此页面的翻译 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="google"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="notranslate"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 验证 Google 搜索控制台的所有权 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="google-site-verification"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="verification_token"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 用来命名软件或用于构建网页(如 - WordPress、Dreamweaver)</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="generator"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="program"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 关于你的网站主题的简短描述 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="subject"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="你的网站主题"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 非常简短(少于 10 个字)的描述。主要用于学术论文。</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="abstract"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 完整的域名或网址 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="url"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="https://example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="directory"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="submission"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 基于网站内容给出一般的年龄分级 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="rating"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="General"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 允许控制 referrer 信息如何传递 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="referrer"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="never"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 禁用自动检测和格式化可能的电话号码 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="format-detection"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="telephone=no"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 通过设置为 “off” 完全退出 DNS 预取 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="x-dns-prefetch-control"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="off"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 在客户端存储 cookie,web 浏览器的客户端识别 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="set-cookie"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="name=value; expires=date; path=url"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 指定要显示在一个特定框架中的页面 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Window-Target"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="_value"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 地理标签 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="ICBM"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="latitude, longitude"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="geo.position"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="latitude;longitude"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="geo.region"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="country[-state]"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 如 content="New York City" </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="geo.placename"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="city/town"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">相关的详细说明请查看:</span></p> <ul> <li><span style="font-family: times new roman,times;">Google 可以识别的 Meta 标签</span></li> <li><span style="font-family: times new roman,times;">WHATWG Wiki: Meta 拓展</span></li> <li><span style="font-family: times new roman,times;">ICBM – 维基百科</span></li> <li><span style="font-family: times new roman,times;">地理标记 – 维基百科</span></li> </ul> <h4><span style="font-family: times new roman,times;">为移动设备添加 viewport</span></h4> <p><span style="font-family: times new roman,times;"><code>viewport</code> 可以让布局在移动浏览器上显示的更好。 通常会写</span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name </span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content </span><span style="color: #0000ff;">="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"</span><span style="color: #0000ff;">><br></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz </span><span style="color: #008000;">--></span></pre> </div> <p><span style="font-family: times new roman,times;"><code>width=device-width</code> 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)</span></p> <p><span style="font-family: times new roman,times;">content 参数:</span></p> <ul> <li><span style="font-family: times new roman,times;">width viewport 宽度(数值/device-width)</span></li> <li><span style="font-family: times new roman,times;">height viewport 高度(数值/device-height)</span></li> <li><span style="font-family: times new roman,times;">initial-scale 初始缩放比例</span></li> <li><span style="font-family: times new roman,times;">maximum-scale 最大缩放比例</span></li> <li><span style="font-family: times new roman,times;">minimum-scale 最小缩放比例</span></li> <li><span style="font-family: times new roman,times;">user-scalable 是否允许用户缩放(yes/no)</span></li> <li><span style="font-family: times new roman,times;"><span style="font-family: times new roman,times;">minimal-ui iOS 7.1 beta 2 中新增属性(注意:iOS8 中已经删除),可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:</span></span></li> </ul> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1, minimal-ui"</span><span style="color: #0000ff;">></span></pre> </div> <p><span style="font-family: times new roman,times;">而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。</span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width,user-scalable=yes"</span><span style="color: #0000ff;">></span></pre> </div> <p><span style="font-family: times new roman,times;">相关链接:非响应式设计的viewport</span></p> <p><span style="font-family: times new roman,times;">适配 iPhone 6 和 iPhone 6plus 则需要写:</span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=375"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=414"</span><span style="color: #0000ff;">></span></pre> </div> <p><span style="font-family: times new roman,times;">大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,iPhone 6 上却是 375px,大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,iPhone 6 plus 上是 414px。</span></p> <p> </p> <h4><span style="font-family: times new roman,times;">SEO 优化部分</span></h4> <ul> <li><span style="font-family: times new roman,times;"><span style="font-family: times new roman,times;">页面标题<code><title></code>标签(head 头部必须)</span></span></li> </ul> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>your title<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span></pre> </div> <ul> <li><span style="font-family: times new roman,times;"><span style="font-family: times new roman,times;">页面关键词 keywords</span></span></li> </ul> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="your keywords"</span><span style="color: #0000ff;">></span></pre> </div> <ul> <li><span style="font-family: times new roman,times;"><span style="font-family: times new roman,times;">页面描述内容 description</span></span></li> </ul> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="your description"</span><span style="color: #0000ff;">></span></pre> </div> <ul> <li><span style="font-family: times new roman,times;"><span style="font-family: times new roman,times;">定义网页作者 author</span></span></li> </ul> <div class="cnblogs_code _mce_tagged_br"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="author,email address"</span><span style="color: #0000ff;">></span></pre> </div> <ul> <li><span style="font-family: times new roman,times;"><span style="font-family: times new roman,times;">定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。</span></span></li> </ul> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="robots"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="index,follow"</span><span style="color: #0000ff;">></span></pre> </div> <p><span style="font-family: times new roman,times;">相关链接:WEB1038 – 标记包含无效的值</span></p> <p> </p> <h4><span style="font-family: times new roman,times;">百度禁止转码</span></h4> <p><span style="font-family: times new roman,times;">通过百度手机打开网页时,百度可能会对你的网页进行转码,脱下你的衣服,往你的身上贴狗皮膏药的广告,为此可在 head 内添加</span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Cache-Control"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="no-siteapp"</span> <span style="color: #0000ff;">/></span></pre> </div> <p><span style="font-family: times new roman,times;">相关链接:SiteApp 转码声明</span></p> <p> </p> <h4><span style="font-family: times new roman,times;">不推荐的 meta 属性</span></h4> <p><span style="font-family: times new roman,times;">下面是不推荐使用的 meta 属性,因为它们采用率低,或已弃用:</span></p> <div class="cnblogs_code"> <pre><span style="color: #008000;"><!--</span><span style="color: #008000;"> 用于声明文档语言,但支持得不是很好。最好使用 <html lang=""> </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="language"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Google 无视 & Bing 认为垃圾的指示器 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="你,关键字,在这里,不使用空格,而用逗号进行分隔"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 目前没有在任何搜索引擎中使用过的声明 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="revised"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Sunday, July 18th, 2010, 5:15 pm"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 为垃圾邮件机器人收获 email 地址提供了一种简单的方式 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="reply-to"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="email@example.com"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 最好使用 <link rel="author"> 或 humans.txt 文件 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="name, email@example.com"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="designer"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="owner"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 告诉搜索机器人一段时间后重新访问该网页。这不支持,因为大多数搜索引擎使用随机时间间隔来重新抓取网页 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="revisit-after"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="7 days"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 在一段时间后将用户重定向到新的 URL </span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> W3C 建议不要使用该标签。Google 建议使用服务器端的 301 重定向。</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="refresh"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="300; url=https://example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 描述网站的主题 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="topic"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 公司概要或网站目的 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="summary"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 一个已废弃的标签,和关键词 meta 标签的作用相同 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="classification"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="business"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 是否是相同的 URL,年代久远且不支持 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="identifier-URL"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="https://example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 和关键词标签类似的功能 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="category"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 确保你的网站在所有国家和语言中都能显示 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="coverage"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Worldwide"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 和 coverage 标签相同 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="distribution"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Global"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 控制在互联网上哪些用户可以访问 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Pics-label"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="value"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 缓存控制 </span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 最好在服务器端配置缓存控制 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Expires"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Pragma"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="no-cache"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Cache-Control"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="no-cache"</span><span style="color: #0000ff;">></span></pre> </div> <h3> </h3> <h3><span style="font-family: times new roman,times;">link 标签</span></h3> <p><span style="font-family: times new roman,times;">  说到 link 标签,估计大家的第一反应和我一样,就是引入外部CSS样式文件的,不错,这是 link 标签最最常用的功能。不过它还有很多别的用处,比如这是浏览器 favicon 图标,touch图标等等。</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #008000;"><!--</span><span style="color: #008000;"> 有助于防止出现内容重复的问题 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="canonical"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 之前用于包含 icon 链接,但已被废弃并不再使用 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="shortlink"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/?p=42"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 链接到当前文档的一个 AMP HTML 版本 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="amphtml"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/path/to/amp-version.html"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 表明一个 CSS 样式表 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/styles.css"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 链接到一个指定 Web 应用程序“安装”证书的 JSON 文件 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="manifest"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="manifest.json"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 链接到文档的作者 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="humans.txt"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 指向一个适用于链接内容的版权申明 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="copyright"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="copyright.html"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 给出可能的你的另一种语言的文档位置参考 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="alternate"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://es.example.com/"</span><span style="color: #ff0000;"> hreflang</span><span style="color: #0000ff;">="es"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 提供了关于作者或其他人的信息 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="me"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://google.com/profiles/thenextweb"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/html"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="me"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="mailto:name@example.com"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="me"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="sms:+15035550125"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 链接到一个文档,包含当前文档的一个归档链接 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="archives"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/2003/05/"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="May 2003"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 链接到层次结构中的顶级资源 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="index"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="DeWitt Clinton"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 给出该文档的起点 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="start"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/photos/pattern_recognition_1_about/"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="Pattern Recognition 1"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 引导当前文档的前述资源序列 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="prev"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="OpenSearch and OpenID? A sure way to get my attention."</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 给出一个自我参考 - 当文档有多个可能的参考时非常有用 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="self"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="application/atom+xml"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/atomFeed.php?page=3"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 分别是在一系列文件中的第一个、下一个、上一个和最后一个 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="first"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/atomFeed.php"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="next"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/atomFeed.php?page=4"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="previous"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/atomFeed.php?page=2"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="last"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/atomFeed.php?page=147"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 当使用第三方服务来维护 blog 时使用 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="EditURI"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/xmlrpc.php?rsd"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="application/rsd+xml"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="RSD"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 当另一个 WordPress 博客链接到你的 WordPress 博客或文章时形成一个自动化的评论 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="pingback"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/xmlrpc.php"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 当你在自己的页面上链接到一个 url 时通知它 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="webmention"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/webmention"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 加载一个外部的 HTML 文件到当前 HTML 文件中 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="import"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="component.html"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 打开搜索 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="search"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="/open-search.xml"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="application/opensearchdescription+xml"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="Search Title"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Feeds </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="alternate"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://feeds.feedburner.com/example"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="application/rss+xml"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="RSS"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="alternate"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/feed.atom"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="application/atom+xml"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="Atom 0.3"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 预取,预载,预浏览 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="dns-prefetch"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="//example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="preconnect"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://www.example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="prefetch"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://www.example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="prerender"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://example.com/"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="preload"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="image.png"</span><span style="color: #ff0000;"> as</span><span style="color: #0000ff;">="image"</span><span style="color: #0000ff;">><br></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 更多信息:https://css-tricks.com/prefetching-preloading-prebrowsing/ </span><span style="color: #008000;">--></span></span></pre> </div> <p><span style="font-family: times new roman,times;">具体说明查看:https://css-tricks.com/prefetching-preloading-prebrowsing/</span></p> <h4><span style="font-family: times new roman,times;">rss订阅</span></h4> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="alternate"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="application/rss+xml"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="RSS"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="/rss.xml"</span> <span style="color: #0000ff;">/></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 添加 RSS 订阅 </span><span style="color: #008000;">--></span></pre> </div> <p> </p> <h4><span style="font-family: times new roman,times;">不推荐的link标签</span></h4> <p><span style="font-family: times new roman,times;">以下是不推荐使用的链接关系:</span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="shortcut icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/favicon.ico"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 没有用的, 专有的和错误的, 详见 https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="subresource"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="styles.css"</span><span style="color: #0000ff;">></span></pre> </div> <p><span class="tag" style="font-family: times new roman,times;">具体说明查看:https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ</span></p> <h4><span style="font-family: times new roman,times;">favicon 图标</span></h4> <p><span style="font-family: times new roman,times;">IE 11, Chrome, Firefox, Safari, Opera支持<code><link></code>形式设置:</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/favicon-16.png"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="16x16"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="image/png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/favicon-32.png"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="32x32"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="image/png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/favicon-48.png"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="48x48"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="image/png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/favicon-62.png"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="62x62"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="image/png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/favicon-192.png"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="192x192"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="image/png"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">注意:对于IE 10及以下版本不支持<code><link></code>形式设置,只通过将命名为<code>favicon.ico</code>的文件放置在网站根目录中实现。</span></p> <p><span style="font-family: times new roman,times;">比较详细的 favicon 介绍可参考:</span></p> <ul> <li><span style="font-family: times new roman,times;">所有关于网站图标(和触摸图标)</span></li> <li><span style="font-family: times new roman,times;">favicon 对照表</span></li> </ul> <h2><span style="font-family: times new roman,times;"> </span></h2> <h2><span style="font-family: times new roman,times;">浏览器及平台详细说明</span></h2> <h3><span style="font-family: times new roman,times;">QQ 浏览器(X5 内核)</span></h3> <p><span style="font-family: times new roman,times;">QQ 浏览器(X5 内核)同样适用于微信,QQ等第三方应用页面开发。</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #008000;"><!--</span><span style="color: #008000;"> 设置锁定横屏、竖屏显示模式,portrait(横屏),landscape(竖屏)</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="x5-orientation"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="portrait|landscape"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 设置全屏显示页面 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="x5-fullscreen"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 开启页面以应用模式显示(全屏显示等) </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="x5-page-mode"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="app"</span><span style="color: #0000ff;">></span></span></pre> </div> <h3><span style="font-family: times new roman,times;">360浏览器</span></h3> <p><span style="font-family: times new roman,times;">设置 360 浏览器渲染模式:<code>webkit</code> 为极速内核,<code>ie-comp</code> 为 IE 兼容内核,<code>ie-stand</code> 为 IE 标准内核。</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="renderer"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="webkit|ie-comp|ie-stand"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">详情文档链接:浏览器内核控制Meta标签说明文档</span><br><span style="font-family: times new roman,times;"> 360 浏览器就会在读取到这个标签后,立即切换对应的极速核。 另外为了保险起见再加入</span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=Edge,chrome=1"</span><span style="color: #0000ff;">></span></pre> </div> <p><span style="font-family: times new roman,times;">这样写可以达到的效果是如果安装了 Google Chrome Frame,则使用 GCF 来渲染页面,如果没有安装 GCF,则使用最高版本的 IE 内核进行渲染。</span></p> <h3> </h3> <h3><span style="font-family: times new roman,times;"><span id="transmark" style="display: none; width: 0px; height: 0px;"></span>UC 浏览器</span></h3> <h4><span style="font-family: times new roman,times;">设置屏幕方向</span></h4> <p><span style="font-family: times new roman,times;">portrait 为横屏,landscape 为竖屏。</span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="screen-orientation"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="portrait|landscape"</span><span style="color: #0000ff;">></span></pre> </div> <h4><span style="font-family: times new roman,times;">设置全屏</span></h4> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="full-screen"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="yes"</span><span style="color: #0000ff;">></span></pre> </div> <h4><span style="font-family: times new roman,times;">设置适应屏幕排版(缩放是否显示滚动条)</span></h4> <p><span style="font-family: times new roman,times;">UC 浏览器在标准排版效果实现的基础上,提供适应屏幕的排版方式,当设置为 uc-fitscreen=yes,页面进行缩放操作时,仅放大图片和文字等元素,但不放大屏幕宽度,保持不出现水平(横向)滚动条。</span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="uc-fitscreen=no|yes"</span><span style="color: #0000ff;">></span></pre> </div> <h4><span style="font-family: times new roman,times;">排版模式</span></h4> <p><span style="font-family: times new roman,times;">UC 浏览器提供两种排版模式,分别是适屏模式(fitscreen)及标准模式(standard),其中适屏模式简化了一些页面的处理,使得页面内容更适合进行页面阅读、节省流量及响应更快,而标准模式则能按照标准规范对页面进行排版及渲染。</span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="layoutmode"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="fitscreen|standard"</span><span style="color: #0000ff;">></span></pre> </div> <h4><span style="font-family: times new roman,times;">夜间模式</span></h4> <p><span style="font-family: times new roman,times;">可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂,由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用),因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式,自行设计更适合用户使用的夜间模式。</span></p> <p><span style="font-family: times new roman,times;">注意:页面内的 frame/iframe 中的夜间模式的 meta 不生效。</span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="nightmode"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="enable|disable"</span><span style="color: #0000ff;">></span></pre> </div> <h4><span style="font-family: times new roman,times;">整页图片强制显示</span></h4> <p><span style="font-family: times new roman,times;">为了节省流量及加快速度,UC 为用户提供了无图模式,在实际使用中存在页面中的图片是不可缺少的,例如验证码,地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。</span></p> <p><span style="font-family: times new roman,times;">**注意:整页图片强制显示仅对当前页面生效,对页面内的 frame/iframe 不生效,也不影响前进后退的页面</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="imagemode"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="force"</span><span style="color: #0000ff;">></span></span></pre> </div> <h4><span style="font-family: times new roman,times;">开启应用模式</span></h4> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="browsermode"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="application"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">应用模式是为方便 Web 应用及游戏开发者设置的综合开关,通过meta标签进行指示打开,当进入应用模式时,浏览器将自动调整以下参数:</span></p> <table> <thead> <tr> <th><span style="font-family: times new roman,times;">参数</span></th> <th align="center"><span style="font-family: times new roman,times;">状态</span></th> <th><span style="font-family: times new roman,times;">说明</span></th> </tr> </thead> <tbody> <tr> <td><span style="font-family: times new roman,times;">全屏</span></td> <td align="center"><span style="font-family: times new roman,times;">生效</span></td> <td><span style="font-family: times new roman,times;">可通过 <code>meta</code> 或 JS API 调用退出全屏</span></td> </tr> <tr> <td><span style="font-family: times new roman,times;">长按菜单</span></td> <td align="center"><span style="font-family: times new roman,times;">失效</span></td> <td><span style="font-family: times new roman,times;">可通过 JS API 调用重新生效</span></td> </tr> <tr> <td><span style="font-family: times new roman,times;">浏览器默认手势</span></td> <td align="center"><span style="font-family: times new roman,times;">失效</span></td> <td><span style="font-family: times new roman,times;">可通过 JS API 调用重新生效</span></td> </tr> <tr> <td><span style="font-family: times new roman,times;">排版模式</span></td> <td align="center"><span style="font-family: times new roman,times;">标准模式</span></td> <td><span style="font-family: times new roman,times;">可通过 <code>meta</code> 或 JS API 调用设置其他排版模式</span></td> </tr> <tr> <td><span style="font-family: times new roman,times;">强制图片显示</span></td> <td align="center"><span style="font-family: times new roman,times;">生效</span></td> <td><span style="font-family: times new roman,times;">/</span></td> </tr> <tr> <td><span style="font-family: times new roman,times;">夜间模式</span></td> <td align="center"><span style="font-family: times new roman,times;">失效</span></td> <td><span style="font-family: times new roman,times;">可通过 <code>meta</code> 或 JS API 调用启用夜间模式</span></td> </tr> </tbody> </table> <h4><span style="font-family: times new roman,times;">缩放字体</span></h4> <p><span style="font-family: times new roman,times;">例如:禁用的 UC 浏览器的字体缩放功能</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="wap-font-scale"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="no"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">具体UC 浏览器文档链接:UC 浏览器文档</span></p> <h3> </h3> <h3><span style="font-family: times new roman,times;">Apple iOS原生浏览器</span></h3> <h4><span style="font-family: times new roman,times;">添加智能 App 广告条</span></h4> <p><span style="font-family: times new roman,times;">告诉浏览器这个网站对应的app,并在页面上显示下载banner,需要注意的是Smart App Banners标签不能用在frame框架内部,否则不起作用。</span></p> <p><span style="font-family: times new roman,times;">其中app-id(必须), affiliate-data (可选), app-argument (可选)</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="apple-itunes-app"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">例如Digg的写法:</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="apple-itunes-app"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="app-id=362872995, affiliate-data=bevbOqLt02I, app-argument=digg://"</span><span style="color: #0000ff;">></span></span></pre> </div> <h4><span style="font-family: times new roman,times;">忽略数字自动识别为电话号码</span></h4> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="format-detection"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="telephone=no"</span><span style="color: #0000ff;">></span></span></pre> </div> <h4><span style="font-family: times new roman,times;">启用 WebApp 全屏模式</span></h4> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="apple-mobile-web-app-capable"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="yes"</span><span style="color: #0000ff;">></span></span></pre> </div> <h5><span style="font-family: times new roman,times;">添加到主屏后设置状态栏的背景颜色</span></h5> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="apple-mobile-web-app-status-bar-style"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="black"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">只有在 “apple-mobile-web-app-capable” content=”yes” 时生效。</span></p> <ul> <li><span style="font-family: times new roman,times;">如果设置为 default 或 black ,网页内容从状态栏底部开始。</span></li> <li><span style="font-family: times new roman,times;">如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。</span></li> </ul> <h5><span style="font-family: times new roman,times;">添加到主屏后的标题(iOS 6 新增)</span></h5> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="apple-mobile-web-app-title"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="App Title"</span><span style="color: #0000ff;">></span></span></pre> </div> <h4><span style="font-family: times new roman,times;">iOS 图标</span></h4> <p><span style="font-family: times new roman,times;">图片自动处理成圆角和高光等效果。</span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/apple-touch-icon.png"</span><span style="color: #0000ff;">></span></pre> </div> <p><span style="font-family: times new roman,times;">禁止系统自动添加效果,直接显示设计原图。</span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon-precomposed"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/apple-touch-icon-precomposed.png"</span><span style="color: #0000ff;">></span></pre> </div> <p><span style="font-family: times new roman,times;">iOS 8+ 不再支持 precomposed, 只有 apple-touch-icon 是必须的</span><br><span style="font-family: times new roman,times;"> 在大多数情况下,在head中一个180×180px的图标就足够了。如果您想要由设备确定的唯一图标,请使用不同大小的图标。</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="57x57"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/icon@57.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="72x72"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/icon@72.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="114x114"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/icon@114.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="144x144"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/icon@144.png"</span><span style="color: #0000ff;">></span></span></pre> </div> <h4><span style="font-family: times new roman,times;">启动画面 ( 不赞成使用 )</span></h4> <p><span style="font-family: times new roman,times;">iPad 的启动画面是不包括状态栏区域的,iPhone 和 iPod touch 的启动画面是包含状态栏区域的</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-startup-image"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/startup.png"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">具体描述设置请查看http://www.css88.com/archives/5480中相应的说明。</span></p> <h4><span style="font-family: times new roman,times;">iOS 应用深度链接</span></h4> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="apple-itunes-app"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="app-id=APP-ID, app-argument=http/url-sample.com"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="alternate"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="ios-app://APP-ID/http/url-sample.com"</span><span style="color: #0000ff;">></span></span></pre> </div> <h3> </h3> <h3><span style="font-family: times new roman,times;">Google Android原生浏览器</span></h3> <h4><span style="font-family: times new roman,times;">标签页选项卡颜色</span></h4> <p><span style="font-family: times new roman,times;">Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签,用来控制选项卡颜色。</span></p> <p><span style="font-family: times new roman,times;">http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android</span></p> <p><span style="font-family: times new roman,times;"></span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="theme-color"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="#db5945"</span><span style="color: #0000ff;">></span></span></pre> </div> <h4><span style="font-family: times new roman,times;">添加到主屏</span></h4> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #008000;"><!--</span><span style="color: #008000;"> 添加到主屏 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="mobile-web-app-capable"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="yes"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">详细链接: https://developer.chrome.com/multidevice/android/installtohomescreen</span></p> <h4><span style="font-family: times new roman,times;">安卓应用深度链接(网页上唤起应用)</span></h4> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #008000;"><!--</span><span style="color: #008000;"> Android app deep linking </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="google-play-app"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="app-id=package-name"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="alternate"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="android-app://package-name/http/url-sample.com"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">注:貌似没测试成功,如果你知道如何正确设置,欢迎留言斧正。</span></p> <h3><span style="font-family: times new roman,times;"> </span></h3> <h3><span style="font-family: times new roman,times;">Apple Safari 浏览器</span></h3> <p><span style="font-family: times new roman,times;">Safari 10开始支持固定书签页的SVG favicons了,你可以这样使用:</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #008000;"><!--</span><span style="color: #008000;"> Pinned Site </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="mask-icon"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="path/to/icon.svg"</span><span style="color: #ff0000;"> color</span><span style="color: #0000ff;">="red"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">类似的效果</span><br><span style="font-family: times new roman,times;"> </span><br><span style="font-family: times new roman,times;"> 扩展阅读:https://yoast.com/dev-blog/safari-pinned-tab-icon-mask-icon/</span></p> <h3><span style="font-family: times new roman,times;"> </span></h3> <h3><span style="font-family: times new roman,times;">Google Chrome浏览器</span></h3> <h4><span style="font-family: times new roman,times;">关闭chrome浏览器下翻译插件</span></h4> <p><span style="font-family: times new roman,times;">有些时候感觉chrome浏览器下翻译插件很烦人,可以通过下面的代码禁用它。</span></p> <p> </p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="google"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="notranslate"</span> <span style="color: #0000ff;">/></span></span></pre> </div> <p><span style="font-family: times new roman,times;"></span></p> <h4><span style="font-family: times new roman,times;">chrome浏览器插件安装</span></h4> <p><span style="font-family: times new roman,times;">有时候,你需要在你的页面上点击某个安卓,直接安卓你的chrome浏览器插件,而不是链接到Chrome webstore 的详细地址再安装,那么你可以使用:</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="chrome-webstore-item"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://chrome.google.com/webstore/detail/APP_ID"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">具体使用,请查看:Using Inline Installation</span></p> <p><span style="font-family: times new roman,times;"> </span></p> <h3><span style="font-family: times new roman,times;">Google Chrome Mobile (只针对 Android)</span></h3> <p><span style="font-family: times new roman,times;">从 Chrome 31 开始,你可以设置你的 Web 应用为“app mode”,如 Safari。</span></p> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #008000;"><!--</span><span style="color: #008000;"> 链接到一个 manifest 并定义 manifest 的元数据。</span><span style="color: #008000;">--></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> manifest.json 中的例子也可以通过以下链接找到。</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="manifest"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="manifest.json"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 定义你的网页为 Web 应用 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="mobile-web-app-capable"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="yes"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 第一个是官方推荐格式。</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="192x192"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="nice-highres.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="128x128"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="niceicon.png"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 所有带 apple 前缀的格式已废弃,所以不要使用它们。</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="128x128"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="niceicon.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="apple-touch-icon-precomposed"</span><span style="color: #ff0000;"> sizes</span><span style="color: #0000ff;">="128x128"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="niceicon.png"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;"> </span></p> <h3><span style="font-family: times new roman,times;">Internet Explorer浏览器</span></h3> <h4><span style="font-family: times new roman,times;">模式设置</span></h4> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #000000;">//IE8以下以IE7标准模式呈现网页,而IE9则以IE9的标准模式呈现网页: </span><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=EmulateIE7; IE=EmulateIE9"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> //如果安装了GCF,则使用GCF来渲染页面("chrome=1"), //如果没有安装GCF,则使用最高版本的IE内核进行渲染("IE=edge") </span><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="x-ua-compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;">GCF(Google Chrome Frame )相关链接:https://www.chromium.org/developers/how-tos/chrome-frame-getting-started</span></p> <p><span style="font-family: times new roman,times;">X-UA-Compatible相关链接:https://blogs.msdn.microsoft.com/ie/2010/06/16/ies-compatibility-features-for-site-developers/</span></p> <h4><span style="font-family: times new roman,times;">win8,win10下的一些设置</span></h4> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="cleartype"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="on"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="skype_toolbar"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="skype_toolbar_parser_compatible"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Disable link highlighting on IE 10 on Windows Phone 具体说明查看:https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-tap-highlight"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="no"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Pinned sites 具体说明查看:https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="application-name"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Contoso Pinned Site Caption"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-tooltip"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Example Tooltip Text"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-starturl"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="/"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-config"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="http://example.com/browserconfig.xml"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-allowDomainApiCalls"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-allowDomainMetaTags"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-badge"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="frequency=30; polling-uri=http://example.com/id45453245/polling.xml"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-navbutton-color"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="#FF3300"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-notification"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="frequency=60;polling-uri=http://example.com/livetile"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-square150x150logo"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="path/to/logo.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-square310x310logo"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="path/to/largelogo.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-square70x70logo"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="path/to/tinylogo.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-wide310x150logo"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="path/to/widelogo.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-task"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-task-separator"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> //Windows 8 磁贴颜色 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-TileColor"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="#FF3300"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> //Windows 8 磁贴图标 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-TileImage"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="path/to/tileimage.jpg"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="msapplication-window"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=1024;height=768"</span><span style="color: #0000ff;">></span></span></pre> </div> <p><span style="font-family: times new roman,times;"> </span></p> <h2><span style="font-family: times new roman,times;">APP 链接</span></h2> <div class="cnblogs_code"> <pre><span style="font-family: times new roman,times;"><span style="color: #008000;"><!--</span><span style="color: #008000;"> iOS </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:ios:url"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="applinks://docs"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:ios:app_store_id"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="12345"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:ios:app_name"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="App Links"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Android </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:android:url"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="applinks://docs"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:android:app_name"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="App Links"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:android:package"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="org.applinks"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> Web Fallback </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">property</span><span style="color: #0000ff;">="al:web:url"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="http://applinks.org/documentation"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> More info: http://applinks.org/documentation/ </span><span style="color: #008000;">--></span></span></pre> </div> <p><span style="font-family: times new roman,times;">具体请查看:App Links Docs</span></p> <p><span style="font-family: times new roman,times;"> </span></p> <h2><span style="font-family: times new roman,times;">相关项目</span></h2> <ul> <li><span style="font-family: times new roman,times;">Atom HTML Head 片段 – Atom <code>HEAD</code> 片段包</span></li> <li><span style="font-family: times new roman,times;">Sublime Text HTML Head 片段 – Sublime Text <code>HEAD</code> 片段包</span></li> <li><span style="font-family: times new roman,times;">head-it – <code>HEAD</code> 片段的 CLI 接口</span></li> <li><span style="font-family: times new roman,times;">vue-head – 在 Vue.js 中操作 <code>HEAD</code> 标签的 meta 信息</span></li> </ul> <p><span style="font-family: times new roman,times;">参考阅读文章:</span></p> <ul> <li><span style="font-family: times new roman,times;">HTML5 样板文档:HTML 标签</span></li> <li><span style="font-family: times new roman,times;">HTML5 样板文档:扩展和定制</span></li> <li><span style="font-family: times new roman,times;">常用的 HTML 头部标签</span></li> <li><span style="font-family: times new roman,times;"><head> 对照表</span></li> <li><span style="font-family: times new roman,times;">HTML head 头标签</span></li> <li><span style="font-family: times new roman,times;">html5_header</span></li> <li><span style="font-family: times new roman,times;">amazeui css</span></li> <li><span style="font-family: times new roman,times;">DOCTYPE</span></li> <li><span style="font-family: times new roman,times;">WEB 工程师和设计师必学的 10 个 IOS 8 新鲜改变</span></li> </ul> <p><span style="font-family: times new roman,times;">本文转自<span class="byline"> <span class="author vcard">愚人码头</span></span>的 移动前端不得不了解的HTML5 head 头标签(2016最新版)</span></p> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1275235653965070336"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:([转] 移动前端不得不了解的HTML5 head 头标签)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835514462770130944.htm" title="斤斤计较的婚姻到底有多难?" target="_blank">斤斤计较的婚姻到底有多难?</a> <span class="text-muted">白心之岂必有为</span> <div>很多人私聊我会问到在哪个人群当中斤斤计较的人最多?我都会回答他,一般婚姻出现问题的斤斤计较的人士会非常多,以我多年经验,在婚姻落的一塌糊涂的人当中,斤斤计较的人数占比在20~30%以上,也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中,有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型:第一种是物质上的,另一种是精神上的。在物质与精神上抠门已经严重的影响</div> </li> <li><a href="/article/1835514464028422144.htm" title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a> <span class="text-muted">露露_e800</span> <div>今天是家庭关系规划师的第二阶最后一天,慧萍老师帮我做了个案,帮我处理了埋在心底好多年的一份恐惧,并给了我深深的力量!这几天出来学习,爸妈过来婆家帮我带小孩,妈妈出于爱帮我收拾东西,并跟我先生和婆婆产生矛盾,妈妈觉得他们没有照顾好我…。今晚回家见到妈妈,我很欣赏她并赞扬她,妈妈说今晚要跟我睡我说好,当我们俩躺在床上准备睡觉的时候,我握着妈妈的手对她说:妈妈这几天辛苦你了,你看你多利害把我们的家收拾得</div> </li> <li><a href="/article/1835514335561084928.htm" title="芦花鞋一四" target="_blank">芦花鞋一四</a> <span class="text-muted">许叶晗</span> <div>又是在一个寒冷的夏日里,青铜和葵花决定今天一起去卖芦花鞋,奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧!”于是青铜和葵花喝完了奶奶给她们做的粥,就准备去镇上卖卢花鞋,这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖,用手势表达对葵花说:“这回有好多人在抢我们生意呢!我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫,卖芦花喽!卖芦花</div> </li> <li><a href="/article/1835514307744460800.htm" title="QQ群采集助手,精准引流必备神器" target="_blank">QQ群采集助手,精准引流必备神器</a> <span class="text-muted">2401_87347160</span> <a class="tag" taget="_blank" href="/search/%E5%85%B6%E4%BB%96/1.htm">其他</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具,它通过关键词搜索功能,帮助用户快速找到相关的微信群,并提供筛选是否需要验证的群组的功能。主要功能关键词搜索:用户可以输入关键词,工具将自动查找包含该关键词的微信群。筛选功能:工具提供筛选机制,用户可以选择是否只显示需要验证或不需要验证的群组。精准引流:通过上述功能,用户可以更精准地找到目标群组,进行有效的引流操作。3.设备需求该工具可以</div> </li> <li><a href="/article/1835514207114719232.htm" title="关于沟通这件事,项目经理不需要每次都面对面进行" target="_blank">关于沟通这件事,项目经理不需要每次都面对面进行</a> <span class="text-muted">流程大师兄</span> <div>很多项目经理都会遇到这样的问题,项目中由于事情太多,根本没有足够的时间去召开会议,那在这种情况下如何去有效地管理项目中的利益相关者?当然,不建议电子邮件也不需要开会的话,建议可以采取下面几种方式来形成有效的沟通,这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题,项目中哪些利益相关者是必须要进行沟通的?可以列出项目中所有的利益相关者清单,同时也整理出项目中哪些</div> </li> <li><a href="/article/1835513803861749760.htm" title="机器学习与深度学习间关系与区别" target="_blank">机器学习与深度学习间关系与区别</a> <span class="text-muted">ℒℴѵℯ心·动ꦿ໊ོ꫞</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一、机器学习概述定义机器学习(MachineLearning,ML)是一种通过数据驱动的方法,利用统计学和计算算法来训练模型,使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本,识别其中的模式和规律,从而对新的数据进行判断。其核心在于通过训练过程,让模型不断优化和提升其预测准确性。主要类型1.监督学习(SupervisedLearning)监督学习是指在训练数据集中包含输入</div> </li> <li><a href="/article/1835513701143244800.htm" title="铭刻于星(四十二)" target="_blank">铭刻于星(四十二)</a> <span class="text-muted">随风至</span> <div>69夜晚,绍敏同学做完功课后,看了眼房外,没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深,都有些旧了,想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处,待到全部拆开后,又反复抚平纸张,然后仔细地一字字默看。只是开头的三个字是第一次看到,让她心漏跳了几拍。“亲爱的绍敏:从四年级的时候,我就喜欢你了,但是我一直不敢说,怕影响你学习。六年级的时候听说有人跟你表白,你接受了,我很难过,但</div> </li> <li><a href="/article/1835513570171908096.htm" title="底层逆袭到底有多难,不甘平凡的你准备好了吗?让吴起给你说说" target="_blank">底层逆袭到底有多难,不甘平凡的你准备好了吗?让吴起给你说说</a> <span class="text-muted">造命者说</span> <div>底层逆袭到底有多难,不甘平凡的你准备好了吗?让吴起给你说说我叫吴起,生于公元前440年的战国初期,正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家,是兵家代表人物。评价我一生历仕鲁、魏、楚三国,通晓兵家、法家、儒家三家思想,在内政军事上都有极高的成就。周安王二十一年(公元前381年),因变法得罪守旧贵族,被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭,从年轻时候起就不甘平凡</div> </li> <li><a href="/article/1835513571501502464.htm" title="2020-01-25" target="_blank">2020-01-25</a> <span class="text-muted">晴岚85</span> <div>郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是:你知道想要达成的目标是什么,但却不知道如何才能达成;另一个问题是:你不知道你的目标是什么。前一个是行动的问题,后一个是结果的问题。通过制定具体的下一步行动,可以解决不知道如何开始行动的问题。而通过去想象结果,对结果做预估,可以解决找不着目标的问题。对于所有吸引我们注意力,想要完成的任务,你可以先想象一下,预期的结果究竟是什</div> </li> <li><a href="/article/1835513568917811200.htm" title="随笔 | 仙一般的灵气" target="_blank">随笔 | 仙一般的灵气</a> <span class="text-muted">海思沧海</span> <div>仙岛今天,我看了你全部,似乎已经进入你的世界我不知道,这是否是梦幻,还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求,这样才能够符合人生的梦想,生活才能够充满着阳光与快乐我不知道,我为什么会这样的感叹,是在感叹自己的人生,还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴,每天活在自己的梦中,活在一个不真实的世界是在逃避自己,还是在逃避周围的一切有时候我嘲笑自己,嘲笑自己如此的虚无,</div> </li> <li><a href="/article/1835513567663714304.htm" title="想家" target="_blank">想家</a> <span class="text-muted">爆米花机</span> <div>也许不同于大家对家乡的思念,我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福,我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女,我贪恋家的安逸。刚刚踏出大学校门,初出茅庐,无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气,是无法适应工作的节奏,是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志,选择再次踏上征程。图片发自App</div> </li> <li><a href="/article/1835513551624695808.htm" title="【iOS】MVC设计模式" target="_blank">【iOS】MVC设计模式</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>MVC前言如何设计一个程序的结构,这是一门专门的学问,叫做"架构模式"(architecturalpattern),属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构,也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC(控制器)负责协调Model和View,处理大部分逻辑它将数据从Mod</div> </li> <li><a href="/article/1835513551142350848.htm" title="OC语言多界面传值五大方式" target="_blank">OC语言多界面传值五大方式</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言在完成暑假仿写项目时,遇到了许多需要用到多界面传值的地方,这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值,简单地说就是通过访问后一个视图控制器的属性来为它赋值,通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt</div> </li> <li><a href="/article/1835513440525971456.htm" title="一百九十四章. 自相矛盾" target="_blank">一百九十四章. 自相矛盾</a> <span class="text-muted">巨木擎天</span> <div>唉!就这么一夜,林子感觉就像过了很多天似的,先是回了阳间家里,遇到了那么多不可思议的事情儿。特别是小伙伴们,第二次与自己见面时,僵硬的表情和恐怖的气氛,让自己如坐针毡,打从心眼里难受!还有东子,他现在还好吗?有没有被人欺负?护城河里的小鱼小虾们,还都在吗?水不会真的干枯了吧?那对相亲相爱漂亮的太平鸟儿,还好吧!春天了,到了做窝、下蛋、喂养小鸟宝宝的时候了,希望它们都能够平安啊!虽然没有看见家人,也</div> </li> <li><a href="/article/1835513424734416896.htm" title="UI学习——cell的复用和自定义cell" target="_blank">UI学习——cell的复用和自定义cell</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>目录cell的复用手动(非注册)自动(注册)自定义cellcell的复用在iOS开发中,单元格复用是一种提高表格(UITableView)和集合视图(UICollectionView)滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时,如果没有可复用的单元格,则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕,它就不会被销毁。相反,它被添</div> </li> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件,它用于显示当前页面的路径,帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中,如果你已经安装了ElementUI,就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例:安装ElementUI(如果你还没有安装的话):你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835512809883004928.htm" title="10月|愿你的青春不负梦想-读书笔记-01" target="_blank">10月|愿你的青春不负梦想-读书笔记-01</a> <span class="text-muted">Tracy的小书斋</span> <div>本书的作者是俞敏洪,大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧,也是我事业上的偶像。本日摘录他书中第一章中的金句:『一个人如果什么目标都没有,就会浑浑噩噩,感觉生命中缺少能量。能给我们能量的,是对未来的期待。第一件事,我始终为了进步而努力。与其追寻全世界的骏马,不如种植丰美的草原,到时骏马自然会来。第二件事,我始终有阶段性的目标。什么东西能给我能量?答案是对未来的期待。』读到这里的时候,我便</div> </li> <li><a href="/article/1835512542735200256.htm" title="C语言宏函数" target="_blank">C语言宏函数</a> <span class="text-muted">南林yan</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>一、什么是宏函数?通过宏定义的函数是宏函数。如下,编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<<c<<endl;//800return0;}二、为什么要使用宏函数使用宏函数</div> </li> <li><a href="/article/1835512305320816640.htm" title="地推话术,如何应对地推过程中家长的拒绝" target="_blank">地推话术,如何应对地推过程中家长的拒绝</a> <span class="text-muted">校师学</span> <div>相信校长们在做地推的时候经常遇到这种情况:市场专员反馈家长不接单,咨询师反馈难以邀约这些家长上门,校区地推疲软,招生难。为什么?仅从地推层面分析,一方面因为家长受到的信息轰炸越来越多,对信息越来越“免疫”;而另一方面地推人员的专业能力和营销话术没有提高,无法应对家长的拒绝,对有意向的家长也不知如何跟进,眼睁睁看着家长走远;对于家长的疑问,更不知道如何有技巧地回答,机会白白流失。由于回答没技巧和专业</div> </li> <li><a href="/article/1835512178023690240.htm" title="谢谢你们,爱你们!" target="_blank">谢谢你们,爱你们!</a> <span class="text-muted">鹿游儿</span> <div>昨天家人去泡温泉,二个孩子也带着去,出发前一晚,匆匆下班,赶回家和孩子一起收拾。饭后,我拿出笔和本子(上次去澳门时做手帐的本子)写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考,带什么出发去旅游呢?她在对应的数字旁边画上了,泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后,就让她自己对着这个本子,将要带的,一一带上,没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来,妹妹累得</div> </li> <li><a href="/article/1835511911769272320.htm" title="C语言如何定义宏函数?" target="_blank">C语言如何定义宏函数?</a> <span class="text-muted">小九格物</span> <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>在C语言中,宏函数是通过预处理器定义的,它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为,但它们不是真正的函数,因为它们在编译时不会进行类型检查,也不会分配存储空间。宏函数的定义通常使用#define指令,后面跟着宏的名称和参数列表,以及宏展开后的代码。宏函数的定义方式:1.基本宏函数:这是最简单的宏函数形式,它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参</div> </li> <li><a href="/article/1835511912192897024.htm" title="微服务下功能权限与数据权限的设计与实现" target="_blank">微服务下功能权限与数据权限的设计与实现</a> <span class="text-muted">nbsaas-boot</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>在微服务架构下,系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加,如何保证不同用户和服务之间的访问权限准确、细粒度地控制,成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限:指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作,比如查看订单、创建订单、修改用户资料等。数据权限:</div> </li> <li><a href="/article/1835511912843014144.htm" title="理解Gunicorn:Python WSGI服务器的基石" target="_blank">理解Gunicorn:Python WSGI服务器的基石</a> <span class="text-muted">范范0825</span> <a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>理解Gunicorn:PythonWSGI服务器的基石介绍Gunicorn,全称GreenUnicorn,是一个为PythonWSGI(WebServerGatewayInterface)应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具,Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置,帮助初学者快速上手。1.什么是Gunico</div> </li> <li><a href="/article/1835511669476913152.htm" title="小丽成长记(四十三)" target="_blank">小丽成长记(四十三)</a> <span class="text-muted">玲玲54321</span> <div>小丽发现,即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现,一个接一个的问题,人生就没有停下的时候,小问题不断出现。不过她今天看的书,她接受了人生就是不确定的,厉害的人就是不断创造确定性,在Ta的领域比别人多的确定性就能让自己脱颖而出,显示价值从而获得的比别人多的利益。正是这样的原因,因为从前修炼自己太少,使得她现在在人生道路上打怪起来困难重重,她似乎永远摆脱不了那种无力感,有种习</div> </li> <li><a href="/article/1835511542284644352.htm" title="学点心理知识,呵护孩子健康" target="_blank">学点心理知识,呵护孩子健康</a> <span class="text-muted">静候花开_7090</span> <div>昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所,超越教育与技术的思考》的讲座。今天又重新学习了一遍,收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题,她说心理健康的一些基本命题,我们与我们通常的一些教育命题是不同的,她还举了几个例子,让我们明白我们原来以为的健康并非心理学上的健康。比如如果</div> </li> <li><a href="/article/1835511163450912768.htm" title="2021年12月19日,春蕾教育集团团建活动感受——黄晓丹" target="_blank">2021年12月19日,春蕾教育集团团建活动感受——黄晓丹</a> <span class="text-muted">黄错错加油</span> <div>感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼,也增长了不少知识。2.游戏过程中,我们贡献的是个人力量,展现的是团队的力量。它磨合的往往不止是工作的熟悉,更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上,每个人摆正自己的位置、各司其职充分发挥才能,并团结一致劲往一处使,才能实现最大的成功。新知:1.团队精神需要不断地创新。过去,人们把创新看作是冒风险,现在人们</div> </li> <li><a href="/article/1835511036317364224.htm" title="Cell Insight | 单细胞测序技术又一新发现,可用于HIV-1和Mtb共感染个体诊断" target="_blank">Cell Insight | 单细胞测序技术又一新发现,可用于HIV-1和Mtb共感染个体诊断</a> <span class="text-muted">尐尐呅</span> <div>结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌(Mycobacteriumtuberculosis,Mtb)感染引起,获得性免疫缺陷综合症(艾滋病)由人免疫缺陷病毒(Humanimmunodeficiencyvirustype1,HIV-1)感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队,共同研究得出单细胞测序</div> </li> <li><a href="/article/1835511030260789248.htm" title="c++ 的iostream 和 c++的stdio的区别和联系" target="_blank">c++ 的iostream 和 c++的stdio的区别和联系</a> <span class="text-muted">黄卷青灯77</span> <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/iostream/1.htm">iostream</a><a class="tag" taget="_blank" href="/search/stdio/1.htm">stdio</a> <div>在C++中,iostream和C语言的stdio.h都是用于处理输入输出的库,但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系:区别1.编程风格iostream(C++风格):C++标准库中的输入输出流类库,支持面向对象的输入输出操作。典型用法是cin(输入)和cout(输出),使用>操作符来处理数据。更加类型安全,支持用户自定义类型的输入输出。#includeintmain(){in</div> </li> <li><a href="/article/1835510909070569472.htm" title="瑶池防线" target="_blank">瑶池防线</a> <span class="text-muted">谜影梦蝶</span> <div>冥华虽然逃过了影梦的军队,但他是一个忠臣,他选择上报战况。败给影梦后成逃兵,高层亡尔还活着,七重天失守......随便一条,即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑,但他还选择上报实情,因为责任。同样此信送到仙宫后,知道此事的人,大多数人都认定冥华要完了,所以上到仙界高层,下到扫大街的,包括冥华自己,全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话,冥华必死无疑。然而</div> </li> <li><a href="/article/1835510656011431936.htm" title="爬山后遗症" target="_blank">爬山后遗症</a> <span class="text-muted">璃绛</span> <div>爬山,攀登,一步一步走向制高点,是一种挑战。成功抵达是一种无法言语的快乐,在山顶吹吹风,看看风景,这是从未有过的体验。然而,爬山一时爽,下山腿打颤,颠簸的路,一路向下走,腿部力量不够,走起来抖到不行,停不下来了!第二天必定腿疼,浑身酸痛,坐立难安!</div> </li> <li><a href="/article/47.htm" title="jdk tomcat 环境变量配置" target="_blank">jdk tomcat 环境变量配置</a> <span class="text-muted">Array_06</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>Win7 下如何配置java环境变量 1。准备jdk包,win7系统,tomcat安装包(均上网下载即可) 2。进行对jdk的安装,尽量为默认路径(但要记住啊!!以防以后配置用。。。) 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs</div> </li> <li><a href="/article/174.htm" title="Spring调SDK包报java.lang.NoSuchFieldError错误" target="_blank">Spring调SDK包报java.lang.NoSuchFieldError错误</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>        在工作中调另一个系统的SDK包,出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l</div> </li> <li><a href="/article/301.htm" title="LeetCode[位运算] - #136 数组中的单一数" target="_blank">LeetCode[位运算] - #136 数组中的单一数</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div>原题链接:#136 Single Number 要求: 给定一个整型数组,其中除了一个元素之外,每个元素都出现两次。找出这个元素 注意:算法的时间复杂度应为O(n),最好不使用额外的内存空间 难度:中等 分析: 题目限定了线性的时间复杂度,同时不使用额外的空间,即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n,故将数组中的每个元素进</div> </li> <li><a href="/article/428.htm" title="qq登陆界面开发" target="_blank">qq登陆界面开发</a> <span class="text-muted">15700786134</span> <a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a> <div>今天我们来开发一个qq登陆界面,首先写一个界面程序,一个界面首先是一个Frame对象,即是一个窗体。然后在这个窗体上放置其他组件。代码如下: public class First {         public void initul(){        jf=ne</div> </li> <li><a href="/article/555.htm" title="Linux的程序包管理器RPM" target="_blank">Linux的程序包管理器RPM</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>在早期我们使用源代码的方式来安装软件时,都需要先把源程序代码编译成可执行的二进制安装程序,然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装,这个复杂而艰辛的过程。为简化安装步骤,便于广大用户的安装部署程序,程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包,提供给大家下载,我们只需要根据自己的</div> </li> <li><a href="/article/682.htm" title="socket通信遇到EOFException" target="_blank">socket通信遇到EOFException</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/EOFException/1.htm">EOFException</a> <div>java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:</div> </li> <li><a href="/article/809.htm" title="基于spring的web项目定时操作" target="_blank">基于spring的web项目定时操作</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>废话不多说,直接上代码,很简单 配置一下项目启动就行 1,web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h</div> </li> <li><a href="/article/936.htm" title="树形结构的数据库表Schema设计" target="_blank">树形结构的数据库表Schema设计</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/schema/1.htm">schema</a> <div>原文地址: http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中,我们常常用树形结构来表征某些数据的关联关系,如企业上下级部门、栏目结构、商品分类等等,通常而言,这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库,都是以二维表的形式记录存储数据信息,</div> </li> <li><a href="/article/1063.htm" title="maven将jar包和源码一起打包到本地仓库" target="_blank">maven将jar包和源码一起打包到本地仓库</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI</div> </li> <li><a href="/article/1190.htm" title="java IO操作 与 File 获取文件或文件夹的大小,可读,等属性!!!" target="_blank">java IO操作 与 File 获取文件或文件夹的大小,可读,等属性!!!</a> <span class="text-muted">百合不是茶</span> <div>类 File File是指文件和目录路径名的抽象表示形式。 1,何为文件: 标准文件(txt doc mp3...) 目录文件(文件夹) 虚拟内存文件   2,File类中有可以创建文件的 createNewFile()方法,在创建新文件的时候需要try{} catch(){}因为可能会抛出异常;也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都</div> </li> <li><a href="/article/1317.htm" title="Spring注入有继承关系的类(2)" target="_blank">Spring注入有继承关系的类(2)</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>被注入类的父类有相应的属性,Spring可以直接注入相应的属性,如下所例:1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu</div> </li> <li><a href="/article/1444.htm" title="30岁转型期你能否成为成功人士" target="_blank">30岁转型期你能否成为成功人士</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E6%88%90%E9%95%BF/1.htm">成长</a><a class="tag" taget="_blank" href="/search/%E5%8A%B1%E5%BF%97/1.htm">励志</a> <div>        很多人由于年轻时走了弯路,到了30岁一事无成,这样的例子大有人在。但同样也有一些人,整个职业生涯都发展得很优秀,到了30岁已经成为职场的精英阶层。由于做猎头的原因,我们接触很多30岁左右的经理人,发现他们在职业发展道路上往往有很多致命的问题。在30岁之前,他们的职业生涯表现很优秀,但从30岁到40岁这一段,很多人</div> </li> <li><a href="/article/1571.htm" title="【Velocity四】Velocity与Java互操作" target="_blank">【Velocity四】Velocity与Java互操作</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/velocity/1.htm">velocity</a> <div>Velocity出现的目的用于简化基于MVC的web应用开发,用于替代JSP标签技术,那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础,      POJO    package com.tom.servlets; public</div> </li> <li><a href="/article/1698.htm" title="【Hive十一】Hive数据倾斜优化" target="_blank">【Hive十一】Hive数据倾斜优化</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a> <div>什么是Hive数据倾斜问题   操作:join,group by,count distinct 现象:任务进度长时间维持在99%(或100%),查看任务监控页面,发现只有少量(1个或几个)reduce子任务未完成;查看未完成的子任务,可以看到本地读写数据量积累非常大,通常超过10GB可以认定为发生数据倾斜。 原因:key分布不均匀 倾斜度衡量:平均记录数超过50w且</div> </li> <li><a href="/article/1825.htm" title="在nginx中集成lua脚本:添加自定义Http头,封IP等" target="_blank">在nginx中集成lua脚本:添加自定义Http头,封IP等</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/nginx+lua+csrf/1.htm">nginx lua csrf</a> <div>Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言,从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器,但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站,我们不希望爬虫抓取子域名的页面,降低我们的Page rank。 location /{</div> </li> <li><a href="/article/1952.htm" title="java-3.求子数组的最大和" target="_blank">java-3.求子数组的最大和</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述: 输入一个整形数组,数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,</div> </li> <li><a href="/article/2079.htm" title="Netty源码学习-FileRegion" target="_blank">Netty源码学习-FileRegion</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象,而不需要相应的encoder: //pipeline(没有诸如“FileRegionEncoder”的handler): public ChannelPipeline ge</div> </li> <li><a href="/article/2206.htm" title="使用ZeroClipboard解决跨浏览器复制到剪贴板的问题" target="_blank">使用ZeroClipboard解决跨浏览器复制到剪贴板的问题</a> <span class="text-muted">cngolon</span> <a class="tag" taget="_blank" href="/search/%E8%B7%A8%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">跨浏览器</a><a class="tag" taget="_blank" href="/search/%E5%A4%8D%E5%88%B6%E5%88%B0%E7%B2%98%E8%B4%B4%E6%9D%BF/1.htm">复制到粘贴板</a><a class="tag" taget="_blank" href="/search/Zero+Clipboard/1.htm">Zero Clipboard</a> <div>Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js </div> </li> <li><a href="/article/2333.htm" title="单例模式" target="_blank">单例模式</a> <span class="text-muted">cuishikuan</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a> <div>第一种(懒汉,线程不安全): public class Singleton {   2     private static Singleton instance;   3     pri</div> </li> <li><a href="/article/2460.htm" title="spring+websocket的使用" target="_blank">spring+websocket的使用</a> <span class="text-muted">dalan_123</span> <div>一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or</div> </li> <li><a href="/article/2587.htm" title="细节问题:ZEROFILL的用法范围。" target="_blank">细节问题:ZEROFILL的用法范围。</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 1、zerofill把月份中的一位数字比如1,2,3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day</div> </li> <li><a href="/article/2714.htm" title="Android开发10——Activity的跳转与传值" target="_blank">Android开发10——Activity的跳转与传值</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Android%E5%BC%80%E5%8F%91/1.htm">Android开发</a> <div>Activity跳转与传值,主要是通过Intent类,Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla</div> </li> <li><a href="/article/2841.htm" title="jdbc 得到表结构、主键" target="_blank">jdbc 得到表结构、主键</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/jdbc+%E5%BE%97%E5%88%B0%E8%A1%A8%E7%BB%93%E6%9E%84%E3%80%81%E4%B8%BB%E9%94%AE/1.htm">jdbc 得到表结构、主键</a> <div>转自博客:http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt</div> </li> <li><a href="/article/2968.htm" title="Android 应用程序开关GPS" target="_blank">Android 应用程序开关GPS</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>要在应用程序中操作GPS开关需要权限: <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错,无法再eclipse里面正常编译,怎么办? 1、方法一:将项目放到Android源码中编译; 2、方法二:网上有人说cl</div> </li> <li><a href="/article/3095.htm" title="Windows上调试MapReduce" target="_blank">Windows上调试MapReduce</a> <span class="text-muted">zhiquanliu</span> <a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a> <div>1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b</div> </li> <li><a href="/article/3222.htm" title="如何看待一些知名博客推广软文的行为?" target="_blank">如何看待一些知名博客推广软文的行为?</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/%E5%8D%9A%E5%AE%A2/1.htm">博客</a> <div>本文来自我在知乎上的一个回答:http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态: 当初求种像条狗,如今撸完嫌人丑 当初搜贴像条犬,如今读完嫌人软 你为啥感觉不舒服呢? 难道非得要作者把自己的劳动成果免费给你用,你才舒服? 就如同 Google 关闭了 Gooled Reader,那是</div> </li> <li><a href="/article/3349.htm" title="sql优化总结" target="_blank">sql优化总结</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>为了是自己对sql优化有更好的原则性,在这里做一下总结,个人原则如有不对请多多指教。谢谢!   要知道一个简单的sql语句执行效率,就要有查看方式,一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id</div> </li> <li><a href="/article/3476.htm" title="Linux Oracle中常遇到的一些问题及命令总结" target="_blank">Linux Oracle中常遇到的一些问题及命令总结</a> <span class="text-muted">超声波</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>1.linux更改主机名   (1)#hostname oracledb    临时修改主机名 (2) vi /etc/sysconfig/network   修改hostname (3) vi /etc/hosts        修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 (注意操作的顺序应该是先监听,后数据库实例) &nbs</div> </li> <li><a href="/article/3603.htm" title="hive函数大全及使用示例" target="_blank">hive函数大全及使用示例</a> <span class="text-muted">superlxw1234</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/hive%E5%87%BD%E6%95%B0/1.htm">hive函数</a> <div>  具体说明及示例参 见附件文档。     文档目录:   目录 一、关系运算: 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5</div> </li> <li><a href="/article/3730.htm" title="Spring 4.2新特性-使用@Order调整配置类加载顺序" target="_blank">Spring 4.2新特性-使用@Order调整配置类加载顺序</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring+4/1.htm">spring 4</a> <div>4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>