web 开发团队的一个常见实践是创建一组标准文件，团队成员基于它们开始 web 开发流程，包括一个公共文件结构、基本命名惯例和标准库。
这样做能够更容易启动并运行一个项目。它还能将开发人员引向内部编码标准并实施标准文件组织。HTML5 Boilerplate 就是这种处于 web 开发最前沿的完美理念的实现。
HTML5 Boilerplate 是一套专业的前端模版,用以开发快速、健壮、适应性强的app或网站。
HTML5 Boilerplate并不是一个新的前端框架，而是一套最佳实践的组合，可以简化我们的工作，提高开发效率，仅此而已。
基本目录结构
一个基本的 HTML5 Boilerplate 站点，最初的目录结构就像这样：
.
├── css
│ ├── main.css
│ └── normalize.css
├── doc
├── img
├── js
│ ├── main.js
│ ├── plugins.js
│ └── vendor
│ ├── jquery.min.js
│ └── modernizr.min.js
├── .editorconfig
├── .htaccess
├── 404.html
├── apple-touch-icon.png
├── browserconfig.xml
├── index.html
├── humans.txt
├── robots.txt
├── crossdomain.xml
├── favicon.ico
├── tile-wide.png
└── tile.png
下面是有关该目录的组成及使用方式的整体概述：
css
/css 文件夹保存项目中的所有CSS文件。文件夹中包含了一些用于初始化的 CSS，为开发者在构建项目前提供标准化的开发环境。
doc
/doc 文件夹保存 HTML5 Boilerplate 的所有开发文档。可以使用它作为开发者个人项目的基础文档。
js
/js 文件夹保存项目中的所有 js 文件。库、插件和自定义代码都可以放在这里，此外还包括了一些用于初始化的 js，以帮助开发者构建项目。
.htaccess
该文件默认为 Apache 的网络服务器配置信息。更多信息，请参考 Apache Server Configs repository。
如果网站托管的服务器不是 Apache，那么可以在 Server Configs项目中找到相关服务器的配置信息。
404.html
一个自定义的404页面,有益于开发者快速开始构建项目。
browserconfig.xml
该文件包含 IE11 动态瓷贴的设置信息。
更多信息，请参考MSDN。
.editorconfig
该文件的作用在于，帮助和激励开发者及其团队，在编辑器和 IDE 之的范。
index.html
该页面包含默认的 HTML 结构，建议开发者使用它作为页面的基础结构。如果开发者正在使用一个服务器端的模版引擎，那么可能需要在项目构建之初，将该页面结构整合入模版引擎。
如果开发者修改了目录结构，请确保同时更新了 CSS 和 JavaScript 的引用地址。
如果开发者使用了谷歌分析脚本（Google Analytics），请确保网页底部相关脚本的 Analytics ID 书写正确。
humans.txt
该文件记录网站、应用程序的开发团队及开发技术等信息。
robots.txt
该文件记录对搜索引擎屏蔽的页面。
crossdamin.xml
一个用作跨域请求的模板。
Icons
可以根据需要替换默认的 favicon.ico，tile.png，tile-wide.png 和 Apple Touch Icon。
更多信息，可以参考 Hans 的这篇文章——HTML5 Boilerplate Favicon and Apple Touch Icon PSD-Template。
HTML 解析
HTML5 Boilerplate 默认提供两个 html 页面：
index.html
no-js类
no-js 类可以让开发者依据 JavaScript 被启用（.js）或被禁止(.no-js)两种状态，更轻易准确地添加自定义样式。
使用这个技巧也有助于避免浏览器闪烁（FOUC）。
lang 属性
请认真考虑在 lang 属性，从而对页面内容所使用的语种加以说明，举例如下：
<html class="no-js" lang="en">
</code> 和 <code style="font-family:monospace,monospace; font-size:1em"><meta></code> 标签的顺序</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 置顶 <code style="font-family:monospace,monospace; font-size:1em"><title></code> 和 <code style="font-family:monospace,monospace; font-size:1em"><meta></code> 标签的顺序意义重大，原因如下：</p>
<h5 style="margin-top:10px; margin-bottom:10px; font-size:14px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 字符集声明（<code style="font-family:monospace,monospace; font-size:1em"><meta charset="utf-8"></code>）：</h5>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">该声明必须完整地包含在文档内容最开始的 1024 字节中。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">该声明应该尽早出现（早于可能被攻击者利用的任何内容，比如 <code style="font-family:monospace,monospace; font-size:1em"><title></code> 元素）,以避免 IE 潜在的编码安全问题。</li>
</ul>
<h5 style="margin-top:10px; margin-bottom:10px; font-size:14px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 兼容模式的元标签（<code style="font-family:monospace,monospace; font-size:1em"><meta http-equiv="x-ua-compatible" content="ie=edge"></code>）：</h5>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 除<code style="font-family:monospace,monospace; font-size:1em"><title></code> 和其他 <code style="font-family:monospace,monospace; font-size:1em"><meta></code> 标签外，该标签必须在其他标签之前声明。</p>
<h5 style="margin-top:10px; margin-bottom:10px; font-size:14px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> <code style="font-family:monospace,monospace; font-size:1em">x-ua-compatible</code></h5>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> IE 8/9/10 支持文档兼容模式——该模式会对文档解析和页面渲染产生影响。因此，即使网站的访问者使用了 IE 9 或更高版本的浏览器，IE 也有可能不使用最新的渲染引擎，而会使用 IE 5.5 渲染引擎解析你的页面。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <code style="font-family:monospace,monospace; font-size:1em">x-ua-compatible</code> 元标签的详细内容如下：</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">http-equiv</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"x-ua-comptible"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"ie=edge"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 此外，可以使用 HTTP 响应头信息 <code style="font-family:monospace,monospace; font-size:1em">x-ua-comptible: ie=edge</code> 来发送网页数据。这种方式将强制 IE 8/9/10 使用最新的可用模式来渲染页面，即使某些情况下并不适合使用该模式。因此，要确保浏览该网站的所有浏览器，都尽可能提供最佳的用户体验。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如有可能，我们建议移除 <code style="font-family:monospace,monospace; font-size:1em">meta</code> 标签，而只发送 HTTP 响应头信息。这么做的原因是，如果你的网站运行在非标准的端口上， IE 默认会 “在兼容性视图下显示内部网站”，而此时 <code style="font-family:monospace,monospace; font-size:1em">meta</code> 标签就不会起作用了。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果你正在使用 Apache 作为网络服务器，那么可以使用 <code style="font-family:monospace,monospace; font-size:1em">.htaccess</code> 文件来配置 HTTP 响应头信息。如果是其他网络服务器，可以点击这里查看其他服务器配置信息。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 从 IE 11 开始，文档模式已经被弃用了。如果你的业务仍然依赖于陈旧的网页应用，或者你的业务就是为老版本 IE 设计的，那么可以考虑在全公司使用 企业版模式（Enterprise Mode）。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 移动端视图</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 使用 <code style="font-family:monospace,monospace; font-size:1em">viewport</code> 元标签时有些许不同。更多信息详见苹果开发者文档。HTML5 Boilerplate 初始化了一些简单的设置，希望在多种使用情境下取得良好平衡。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"viewport"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"width=device-width, initial-scale=1"</span></span>></span>
</code></pre>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Favicons 和 Touch Icon</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 整站的快捷方式图标应该存放在根目录。HTML5 Boilerplate 默认提供了一组图标（包括 favicon 和 Apple Touch Icon）,为开发者提供设计参考。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Modernizr</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> HTML5 Boilerplate 使用了一份自定义的 Modernizr。众所周知，Modernizr 是一个 JavaScript 库，作用是确保所有浏览器都可以使用 HTML 5 元素（它包含了 HTML 5 shiv），同时还会根据功能检测的结果为 <code style="font-family:monospace,monospace; font-size:1em">html</code> 元素添加不同的类名。便于开发者明确某个浏览器所支持的 CSS 和 JavaScript 特性。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 通常来说，为了最大程度地减少页面加载时间，最好的方式是在页面底部调用 JavaScript，以此避免加载外部脚本的过程阻塞整个网页的渲染和解析进度。但是，Modernizr 脚本应该在浏览器渲染页面前就加载执行，这样才能让浏览器正确处理尚未支持的 HTML5 元素。因此，Modernizr 脚本应该是唯一可以在文档头部加载的 JavaScript 脚本。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 腻子脚本</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果你需要在项目中加载 腻子脚本（polyfills） ，那么你必须确保腻子脚本在其他 JavaScript 之前加载。如果你正在使用类似cdn.polyfill.io的 ployfill CDN 服务，只需在页面底部将其放在其他脚本之前即可。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">script</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">src</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"//cdn.polyfill.io/v1/polyfill.min.js"</span></span>></span><span class="javascript" style=""></span><span class="tag" style=""><span class="javascript" style=""></span><span class="tag" style=""></<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">script</span></span>></span></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">script</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">src</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"</span></span>></span><span class="javascript" style=""></span><span class="tag" style=""><span class="javascript" style=""></span><span class="tag" style=""></<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">script</span></span>></span></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">script</span></span>></span><span class="javascript" style="">window.jQuery || document.write(<span class="string" style="color:rgb(42,161,152)"><span class="string" style="">'<script src="js/vendor/jquery-1.11.2.min.js"><\/script>'</span></span>)</span><span class="tag" style=""></<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">script</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">script</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">src</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"js/plugins.js"</span></span>></span><span class="javascript" style=""></span><span class="tag" style=""><span class="javascript" style=""></span><span class="tag" style=""></<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">script</span></span>></span></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">script</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">src</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"js/main.js"</span></span>></span><span class="javascript" style=""></span><span class="tag" style=""><span class="javascript" style=""></span><span class="tag" style=""></<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">script</span></span>></span></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果只是想方便自己使用腻子脚本，可以将它们包含到 <code style="font-family:monospace,monospace; font-size:1em">js/plugins.js</code> 中。当你有了一堆腻子脚本需要加载时，可以在 <code style="font-family:monospace,monospace; font-size:1em">js/vendor</code> 文件夹创建一个 <code style="font-family:monospace,monospace; font-size:1em">polyfills.js</code> 文件。当然使用这个技巧也要注意，确保腻子脚本在其他 JavaScript 脚本前完全加载。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 有些人对于 Modernizr 和腻子脚本的认知存在一些误区。正确理解 Modernizr 很重要：它只进行功能检测而不执行功能修复。Modernizr 唯一关注的修复工作，是有关跨浏览器方面腻子脚本的冗长列表。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 内容区</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> HTML5 Boilerplate 模版的内容基本是空的。这么做是有意而为的，以方便 Boilerplate 模版同时适配网页（web page）和网页应用（web app）的开发。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 浏览器升级提示</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> Boilerplate 的内容区包含了一条提示，建议 IE 6/7 的用户安装最新版本浏览器。如果你打算支持 IE 6/7，那么你需要移除相关代码。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 由 Google CDN 分发的 jQuery</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> Google CDN 提供的 jQuery ，使用 protocol-independent 路径放置在了页面底部。此外还设置了一个本地的 jQuery 版本，从而在 CDN 版本不可用或启用离线版本的时候调用。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> Google CDN 的版本之所以能从众多的可选版本（比如 jQuery CDN）脱颖而出，一方面是因为它响应速度快，另一方则是因为它具有最佳的穿透力（获取的成功率），这有助于提高将库文件传输到用户浏览器缓存的成功率。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 虽然 Google CDN 是模版中开发网页和应用默认的分发网络，但你可能还需要做进一步的配置。你可以使用类似 WebPageTest 的服务和类似 PageSpeed Insights 或 YSlow 的浏览器工具测试网站，这有助于帮你测试网站的实际表现，并且指出特定网页或应用有待优化的地方。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 谷歌分析代码</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 最后，是一段谷歌分析代码。谷歌建议将该脚本置于文档头部。其考虑如下：如果将该脚本置于网页头部，那么即使页面未完全加载，也可以统计用户访问量，并且可以激发浏览器的最大并发连接数。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多信息请参考：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">谷歌通用分析代码优化</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Analytics.js 入门</li>
<li style="margin:0px; padding:0px; list-style:none outside none">谷歌分析示例和工具</li>
</ul>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <span style="">注意</span>：之所以默认包含谷歌分析代码，是因为谷歌分析是当前最流行的追踪解决方案之一。然而，它的用法并不是一成不变的，你应该查看可替代方案，以选择最适合自己的。</p>
<h2 style="margin-top:20px; margin-bottom:10px; font-size:30px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> CSS 解析</h2>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 模版中默认的 CSS 文件并不依赖 conditional class names，conditional style sheets，或 Modernizr 的表现效果，尽可以放心按自己的偏好放手去干。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Normalize.css</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 为了确保所有浏览器的渲染效果更加一致且符合标准，我们引入了 Normalize.css——这是一个现代化、紧密结合 HTML 5 的可选方案，可以用来实现浏览器的 CSS 重置。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> Normalize.css 本质上并不是重置 CSS：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">只处理需要标准化修正的样式</li>
<li style="margin:0px; padding:0px; list-style:none outside none">保留浏览器已有的默认样式，而不是全盘替换它们</li>
<li style="margin:0px; padding:0px; list-style:none outside none">修正浏览器的缺陷和常见性差异</li>
<li style="margin:0px; padding:0px; list-style:none outside none">通过细微的改进提高可用性</li>
<li style="margin:0px; padding:0px; list-style:none outside none">不干扰调试工具</li>
<li style="margin:0px; padding:0px; list-style:none outside none">拥有良好的开发文档</li>
</ul>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多详情请参考项目网站，或者博客文章。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 默认样式</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 基于 <code style="font-family:monospace,monospace; font-size:1em">Normalize.css</code>，编写了一些基础的样式，具体如下：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">提供了基础的排版样式，以改善文本可读性</li>
<li style="margin:0px; padding:0px; list-style:none outside none">文本高亮时，默认取消 <code style="font-family:monospace,monospace; font-size:1em">text-shadow</code></li>
<li style="margin:0px; padding:0px; list-style:none outside none">修改了一些元素默认的对齐方式，比如: <code style="font-family:monospace,monospace; font-size:1em">img</code>，<code style="font-family:monospace,monospace; font-size:1em">video</code>，<code style="font-family:monospace,monospace; font-size:1em">fieldset</code>，<code style="font-family:monospace,monospace; font-size:1em">textarea</code></li>
<li style="margin:0px; padding:0px; list-style:none outside none">修改了老版本浏览器的提示符样式</li>
</ul>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 非常激励开发者根据实际需求和添加样式到默认样式中版。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 通用样式</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 在基础样式之外，我们也提供了一些通用的辅助样式。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> <code style="font-family:monospace,monospace; font-size:1em">.hidden</code></h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果你想在视觉上隐藏任何元素，或是对屏幕阅读器屏蔽某个元素的内容，那么都可以为其添加 <code style="font-family:monospace,monospace; font-size:1em">hidden</code> 样式。这些元素可以是后续填充或显示的，也可以是使用 JavaScript 隐藏的。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> <code style="font-family:monospace,monospace; font-size:1em">.visuallyhidden</code></h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果你想在视觉上隐藏任何元素，那么可以为其添加 <code style="font-family:monospace,monospace; font-size:1em">.visuallyhidden</code> 样式，但此时屏幕阅读器仍然可以识别它。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多信息可参考：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">CSS in Action: Invisible Content Just for Screen Reader Users</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Hiding content for accessibility</li>
<li style="margin:0px; padding:0px; list-style:none outside none">HTML5 Boilerplate - Issue #194</li>
</ul>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> <code style="font-family:monospace,monospace; font-size:1em">.invisible</code></h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果你想在视觉上隐藏任何元素，或是对屏幕阅读器屏蔽某个元素的内容，那么都可以为其添加 <code style="font-family:monospace,monospace; font-size:1em">.invisible</code> 样式，但这种方式并不会影响页面布局。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 与 <code style="font-family:monospace,monospace; font-size:1em">hidden</code> 样式从布局中移除元素的方式不同，<code style="font-family:monospace,monospace; font-size:1em">invisible</code> 样式只会让元素不可见，不会影响其在文档流中的位置，也不会影响其附近元素的位置。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <span style="">注意</span>：绝不应该使用上述样式进行关键字堆彻，那必将有损网站在搜索引擎中的排名。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> <code style="font-family:monospace,monospace; font-size:1em">.clearfix</code></h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 给任何元素添加 <code style="font-family:monospace,monospace; font-size:1em">clearfix</code> 样式，可以确保它始终包裹浮动的子元素。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 过去几年，出现了 clearfix hack 的多种变体，但在这里，我们使用 micro clearfix。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 媒体查询</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 使用 HTML5 Boilerplate 可以很轻松地进行 移动优先 和 响应式设计 的开发。但有必要提醒的是，这里面没有银弹（引申含义：具有极端有效性的解决方法）。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 我们插入了媒体查询的语句，帮助你构建宽幅和高分辨率的移动样式。建议根据网站内容调节断点，而不是简单参考具体设备的固定尺寸。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果并不需要注重移动优先原则，那么你也可以修改或移除媒体查询的语句。当视窗宽度确定下来后，你可以使用 <code style="font-family:monospace,monospace; font-size:1em">max-width</code> 来替代固定尺寸，比如这样来编写：<code style="font-family:monospace,monospace; font-size:1em">@media only screen and (max-width: 480px)</code>。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多有关移动开发的信息，请看 Mobile Boilerplate。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 印刷样式</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 最后，我们提供了一些有用的印刷样式，以优化印刷流程，同时还可以提高印刷品的可读性。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 印刷时，这些样式会：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">去除所有背景色，将字体颜色改为黑色，移除 <code style="font-family:monospace,monospace; font-size:1em">text-shadow</code>——以节省印刷颜料并加快印刷进程。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">为链接添加下划线并附加 URL 地址——以方便用户了解具体的引用地址。不过有两种例外：片段标示符（比如 <code style="font-family:monospace,monospace; font-size:1em">#href</code>） 和 <code style="font-family:monospace,monospace; font-size:1em">javascript:</code> 伪协议)。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">展开缩写，方便用户了解缩写的具体含义。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">指定了浏览器的分页方式，以及分页时页面顶部和底部的最少行数。所有支持该属性的浏览器都会有如下解析：</li>
</ul>
<ol style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">确保表格在每个分页都有表头（<code style="font-family:monospace,monospace; font-size:1em"><thead></code>）</li>
<li style="margin:0px; padding:0px; list-style:none outside none">防止块引用、预格式文本、图片和表格分页时被截断而进入不同页面。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">除相关页面外，确保标题不会出现在其他页面</li>
<li style="margin:0px; padding:0px; list-style:none outside none">确保 orphans and widows 属性不会出现在印刷品上。</li>
</ol>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 该印刷样式与其他 CSS 样式被包裹在了一起，以减少 HTTP 请求。同样，它们应该始终被置于样式表的尾部，方便覆盖其他样式。</p>
<h2 style="margin-top:20px; margin-bottom:10px; font-size:30px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> JS 解析</h2>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> main.js</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 该文件可以用来包含或引用网站/应用程序内的 JavaScript 代码。对于大型项目，可以使用一个类似 Require.js 的模块加载器，以方便加载其他脚本。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> plugins.js</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 该文件可以用来包含所有的插件，比如 jQuery 插件和其他第三方插件。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 这里面的一个技巧是，将 jQuery 插件放入 <code style="font-family:monospace,monospace; font-size:1em">(function($){ ...})(jQuery);</code> 闭包中，确保它们安全地处于 jQuery 命名空间下。更多信息请参考 jQuery 插件开发文档。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <code style="font-family:monospace,monospace; font-size:1em">plugins.js</code> 文件默认保存了一小段代码，防止浏览器禁用 <code style="font-family:monospace,monospace; font-size:1em">console</code> 而引发的 <code style="font-family:monospace,monospace; font-size:1em">console</code> 错误。如果控制台方法不可用，那么这段代码将确保相应的方法为空函数值，由此，防止浏览器报错。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> vendor</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 该目录可以用来保存所有的第三方库。最新的 jQuery 和 Modernizr 压缩版本就默认保存在这里。</p>
<h2 style="margin-top:20px; margin-bottom:10px; font-size:30px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 扩展和定制</h2>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 这里是优化 HTML5 Boilerplate 主题的一些建议。因为并不是所有的特性都适合具体的需求，所以我们没有默认导入这些特性。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> App Stores</h3>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 安装 Chrome 插件</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 用户可以直接从网站安装 Chrome 应用，前提是该应用已经通过谷歌的网络管理工具接驳了网站。更多信息详见内置 Chrome 商店的开发文档。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"chrome-webstore-item"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"https://chrome.google.com/webstore/detail/APP_ID"</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> iOS 6+ Safari 中的 Smart App Banners</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 不用再向用户介绍复杂的方式进入 App Store 获取相关的应用程序了。引用下面的元标签，将会给用户提供更友好的方式下载你的 iOS App，或者用来用户的当前状态优化网站体验。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"apple-itunes-app"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"app-id=APP_ID,app-argument=SOME_TEXT"</span></span>></span>
</code></pre>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> DNS 预加载</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 简而言之，DNS 预加载是告知浏览器当前网站域名的一种方法，这样一来客户端才能解析拥有该 DNS 的主机，缓存这些网站，当再次需要使用时，请求速度就会更快。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 隐式预加载</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 浏览器会自动为用户预加载诸多信息。当浏览器在 html 中检测到一个链接标签时，并不会分配给它浏览器当前请求的域名，而是从客户端系统，根据 IP 地址分配域名。客户端首先检测缓存，如果缓存中不存在，则从 DNS 服务器发送请求。这些请求发生在后台，并不会阻塞页面渲染进程。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 采用这种方式，可以让需要的外部 IP 地址预加载到客户端缓存中，同时又不会阻塞外部内容的加载。请求越少，则页面渲染越快。在移动端这种感觉会更明显，因为移动端的延迟更强烈。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 禁用隐式预加载</h4>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">http-equiv</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"x-dns-prefetch-control"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"off"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 即使禁用 <code style="font-family:monospace,monospace; font-size:1em">X-DNS-Prefetch-Control</code> 元标签或者 HTTP 头信息，浏览器也会预加载所有显式的 dns-prefetch 链接。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <span style="">注意</span>：如果你的网站依赖于外部域名的资源，那么这种做法将会降低加载速度。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 显式预加载</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 通常，浏览器扫描 html 只会预加载外部域名。如果所需资源在当前 html 之外（比如说，需要请求一个远程服务器的 javascript，或是需要一个存储了所有网页信息的 CDN）， 那么你就可以将需要预加载的域名全部列出来。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"dns-prefetch"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"//example.com"</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"dns-prefetch"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"//ajax.googleapis.com"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果有很多外部域名需要请求，建议使用上述方式。如果能够将它们编写在Meta Charset 元素之后就更棒了，这样浏览器将会尽快加载它们。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 常用预加载链接</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> Amazon S3:</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"dns-prefetch"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"//s3.amazonaws.com"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> Google APIs:</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"dns-prefetch"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"//ajax.googleapis.com"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> Microsoft Ajax Content Delivery Network:</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"dns-prefetch"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"//ajax.microsoft.com"</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"dns-prefetch"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"//ajax.aspnetcdn.com"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多 DNS 预加载信息请参考：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching</li>
<li style="margin:0px; padding:0px; list-style:none outside none">https://dev.chromium.org/developers/design-documents/dns-prefetching</li>
<li style="margin:0px; padding:0px; list-style:none outside none">http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx</li>
<li style="margin:0px; padding:0px; list-style:none outside none">http://dayofjs.com/videos/22158462/web-browsers_alex-russel</li>
</ul>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 谷歌通用分析</h3>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 更多追踪设置</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> HTML5 Boilerplate 内部优化过的谷歌通用分析代码段optimized Google Universal Analytics snippet的内容大致如下：</p>
<pre><code class="language-sql"><code class="sql" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em">ga('<span class="operator" style=""><span class="keyword" style="color:rgb(133,153,0)"><span class="operator" style=""><span class="keyword" style="">create</span></span></span><span class="operator" style=""><span class="string" style="color:rgb(42,161,152)"><span class="string" style="">', '</span></span>UA-XXXXX-X<span class="string" style="color:rgb(42,161,152)"><span class="string" style="">', '</span></span>auto<span class="string" style="color:rgb(42,161,152)"><span class="string" style="">'); ga('</span></span>send<span class="string" style="color:rgb(42,161,152)"><span class="string" style="">', '</span></span>pageview<span class="string" style="color:rgb(42,161,152)"><span class="string" style="">'); </span></span></span><span class="string" style="color:rgb(42,161,152)"></span></span></code></code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果想要进一步修改，可以查看谷歌的高级设置， Pageview，和 Event 开发文档。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 隐藏 IP 地址</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 在某些国家，如果两个司法管辖区之间没有相同严厉的法律，那么个人信息就不允许在相互间传递，比如从德国向欧盟之外传送。因此，网络管理员需要确保使用谷歌通用分析时，不能将个人信息从德国传到美国。开发者可以在发送 events/pageviews 前，设置 <code style="font-family:monospace,monospace; font-size:1em">ga('set', 'anonymizeIp', true);</code>。</p>
<pre><code class="language-sql"><code class="sql" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em">ga('<span class="operator" style=""><span class="keyword" style="color:rgb(133,153,0)"><span class="operator" style=""><span class="keyword" style="">create</span></span></span><span class="operator" style=""><span class="string" style="color:rgb(42,161,152)"><span class="string" style="">', '</span></span>UA-XXXXX-X<span class="string" style="color:rgb(42,161,152)"><span class="string" style="">', '</span></span>auto<span class="string" style="color:rgb(42,161,152)"><span class="string" style="">'); ga('</span></span><span class="keyword" style="color:rgb(133,153,0)"><span class="keyword" style="">set</span></span><span class="string" style="color:rgb(42,161,152)"><span class="string" style="">', '</span></span>anonymizeIp<span class="string" style="color:rgb(42,161,152)"><span class="string" style="">', true); ga('</span></span>send<span class="string" style="color:rgb(42,161,152)"><span class="string" style="">', '</span></span>pageview<span class="string" style="color:rgb(42,161,152)"><span class="string" style="">'); </span></span></span><span class="string" style="color:rgb(42,161,152)"></span></span></code></code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 追踪 jQuery AJAX 请求</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 这里有一篇来自 Jango Steve 的文章，介绍了如何在谷歌分析中追踪 jQuery AJAX 请求。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 在 <code style="font-family:monospace,monospace; font-size:1em">plugins.js</code> 中添加如下代码：</p>
<pre class="cs" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="cs" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="comment" style="color:rgb(88,110,117); font-style:italic">/*
* Log all jQuery AJAX requests to Google Analytics
* See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
*/</span>
<span class="keyword" style="color:rgb(133,153,0)">if</span> (<span class="keyword" style="color:rgb(133,153,0)">typeof</span> ga !== <span class="string" style="color:rgb(42,161,152)">"undefined"</span> && ga !== <span class="keyword" style="color:rgb(133,153,0)">null</span>) {
$(document).ajaxSend(function(<span class="keyword" style="color:rgb(133,153,0)">event</span>, xhr, settings){
ga(<span class="string" style="color:rgb(42,161,152)">'send'</span>, <span class="string" style="color:rgb(42,161,152)">'pageview'</span>, settings.url);
});
}
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 追踪 JavaScript 错误</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 在 <code style="font-family:monospace,monospace; font-size:1em">ga</code> 定义之后，添加如下函数：</p>
<pre><code class="language-javascript"><code class="javascript" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em">(<span class="keyword" style="color:rgb(133,153,0)">function</span>(window){
<span class="keyword" style="color:rgb(133,153,0)">var</span> <span class="literal" style="">undefined</span>,
link = <span class="function" style=""><span class="keyword" style="color:rgb(133,153,0)"><span class="function" style=""><span class="keyword" style="">function</span></span></span><span class="function" style=""> <span class="params" style=""><span class="params" style="">(href)</span></span> {
</span></span>
<span class="keyword" style="color:rgb(133,153,0)">var</span> a = window.document.createElement(<span class="string" style="color:rgb(42,161,152)">'a'</span>);
a.href = href;
<span class="keyword" style="color:rgb(133,153,0)">return</span> a;
};
window.onerror = <span class="function" style=""><span class="keyword" style="color:rgb(133,153,0)"><span class="function" style=""><span class="keyword" style="">function</span></span></span><span class="function" style=""> <span class="params" style=""><span class="params" style="">(message, file, line, column)</span></span> {
</span></span>
<span class="keyword" style="color:rgb(133,153,0)">var</span> host = link(file).hostname;
ga(<span class="string" style="color:rgb(42,161,152)">'send'</span>, {
<span class="string" style="color:rgb(42,161,152)">'hitType'</span>: <span class="string" style="color:rgb(42,161,152)">'event'</span>,
<span class="string" style="color:rgb(42,161,152)">'eventCategory'</span>: (host == window.location.hostname || host == <span class="literal" style="">undefined</span> || host == <span class="string" style="color:rgb(42,161,152)">''</span> ? <span class="string" style="color:rgb(42,161,152)">''</span> : <span class="string" style="color:rgb(42,161,152)">'external '</span>) + <span class="string" style="color:rgb(42,161,152)">'error'</span>,
<span class="string" style="color:rgb(42,161,152)">'eventAction'</span>: message,
<span class="string" style="color:rgb(42,161,152)">'eventLabel'</span>: (file + <span class="string" style="color:rgb(42,161,152)">' LINE: '</span> + line + (column ? <span class="string" style="color:rgb(42,161,152)">' COLUMN: '</span> + column : <span class="string" style="color:rgb(42,161,152)">''</span>)).trim(),
<span class="string" style="color:rgb(42,161,152)">'nonInteraction'</span>: <span class="number" style="color:rgb(42,161,152)">1</span>
});
};
}(window));
</code></code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 追踪页面滚动</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 在 <code style="font-family:monospace,monospace; font-size:1em">ga</code> 定义之后，添加如下函数：</p>
<pre><code class="language-ruby"><code class="ruby" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="variable" style="color:rgb(181,137,0)">$(</span>function(){
var isDuplicateScrollEvent,
scrollTimeStart = new <span class="constant" style="color:rgb(181,137,0)">Date</span>,
<span class="variable" style="color:rgb(181,137,0)">$window</span> = <span class="variable" style="color:rgb(181,137,0)">$(</span>window),
<span class="variable" style="color:rgb(181,137,0)">$document</span> = <span class="variable" style="color:rgb(181,137,0)">$(</span>document),
scrollPercent;
<span class="variable" style="color:rgb(181,137,0)">$window</span>.scroll(function() {
scrollPercent = <span class="constant" style="color:rgb(181,137,0)">Math</span>.round(<span class="number" style="color:rgb(42,161,152)">100</span> * (<span class="variable" style="color:rgb(181,137,0)">$window</span>.height() + <span class="variable" style="color:rgb(181,137,0)">$window</span>.scrollTop())/<span class="variable" style="color:rgb(181,137,0)">$document</span>.height());
<span class="keyword" style="color:rgb(133,153,0)">if</span> (scrollPercent > <span class="number" style="color:rgb(42,161,152)">90</span> && !isDuplicateScrollEvent) { <span class="regexp" style="color:rgb(42,161,152)">//page</span> scrolled to <span class="number" style="color:rgb(42,161,152)">90</span>%
isDuplicateScrollEvent = <span class="number" style="color:rgb(42,161,152)">1</span>;
ga(<span class="string" style="color:rgb(42,161,152)">'send'</span>, <span class="string" style="color:rgb(42,161,152)">'event'</span>, <span class="string" style="color:rgb(42,161,152)">'scroll'</span>,
<span class="string" style="color:rgb(42,161,152)">'Window: '</span> + <span class="variable" style="color:rgb(181,137,0)">$window</span>.height() + <span class="string" style="color:rgb(42,161,152)">'px; Document: '</span> + <span class="variable" style="color:rgb(181,137,0)">$document</span>.height() + <span class="string" style="color:rgb(42,161,152)">'px; Time: '</span> + <span class="constant" style="color:rgb(181,137,0)">Math</span>.round((new <span class="constant" style="color:rgb(181,137,0)">Date</span> - scrollTimeStart )/<span class="number" style="color:rgb(42,161,152)">1000</span>,<span class="number" style="color:rgb(42,161,152)">1</span>) + <span class="string" style="color:rgb(42,161,152)">'s'</span>
);
}
});
});
</code></code></pre>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Internet Explorer</h3>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 在 IE 10 中提示用户切换到“桌面模式”</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 在 Metro 模式下，IE 10 并不支持插件，比如 Flash。如果你的网站需要使用插件，那么可以使用 x-ua-comptible 元标签，提醒用户切换到桌面模式。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">http-equiv</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"x-ua-comptible"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"requiresActiveX=true"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 下面是 HTML5 Boilerplate 中 x-ua-comptible 的默认值：</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">http-equiv</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"x-ua-comptible"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"ie=edge,requiresActiveX=true"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多信息请参考 Microsoft's IEBlog post about prompting for plugin use in IE10 Metro Mode。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> IE 9+ 固定网站</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果启用了固定功能，那么 IE 9 的用户就可以将应用程序添加到任务栏或者开始菜单。这一功能也带来了一系列的工具，方便用户对元素进行个性化配置。更多信息请参考 documentation on IE9 Pinned Sites。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 为固定的网站命名</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果不使用这条标签，Windows 将会使用页面标题作为应用程序的标题。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"application-name"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"Sample Title"</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 为固定的网站添加提示</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如你所知，这里讲的是一个提示工具。当用户将鼠标悬停在固定网站的图标上边时，就会出现一个预览窗口。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"msapplication-tooltip"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"A description of what this site does."</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 为固定的网站设置默认页面</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果当网站固定时需要制定一个特定的 URL（比如首页），那就在这里设置。一个好的想法是让固定网站发送特别编写的 URL，这样开发者就可以追踪到有多少用户使用了固定网站，就像下面这样：</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"msapplication-starturl"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"http://www.example.com/index.html?pinned=true"</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 自定义 IE 的控制按钮色彩</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> IE 9+ 会自动使用固定网站图标的颜色，给浏览器按钮添加相应的阴影颜色。除非开发者自定义其他色彩，同时自定义色彩只能使用颜色关键字 (<code style="font-family:monospace,monospace; font-size:1em">red</code>) 和十六进制色彩 (<code style="font-family:monospace,monospace; font-size:1em">#ff0000</code>)。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"msapplication-navbutton-color"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"#ff0000"</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 自定义窗口大小</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果固定网站打开时需要使用确定的大小，那么可以在这里自定义尺寸。该功能只支持静态的像素尺寸，且最小为 <code style="font-family:monospace,monospace; font-size:1em">800x600</code>。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"msapplication-window"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"width=800;height=600"</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 添加跳转列表</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 开发者可以给固定网站添加跳转列表，当鼠标点击右键时，就可以快速显示跳转列表了。每个列表项都指向特定的 URL，并拥有自己的图标（通常为 16x16 的图标）。开发者可以添加任意数量的列表项。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"msapplication-task"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"msapplication-task"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> （Windows 8)高级质量视觉效果</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> Windows 8 允许开发者提供一张 PNG 瓷贴图片，也允许自定义瓷贴的背景色。Full details on the IE blog。</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">为网站创建一个 144x144 分辨率的图标，将其填充满整个画布，再将其背景色改为透明。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">将图片保存为 32-bit PNG 格式，同时在不降低画质的前提下进行优化处理。然后重命名为任何你希望的名字，比如 <code style="font-family:monospace,monospace; font-size:1em">metro-tile.png</code>。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">可以在 IE 博文中添加 HTML <code style="font-family:monospace,monospace; font-size:1em">meta</code> 元素引用瓷贴及其颜色。</li>
</ul>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Windows 8 固定网站的信息识别</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> IE 10 可以通过轮询网站的 XML 文档识别主要信息，继而将其展示在首屏的应用图标上。这样即使用户没有打开应用，也可以接受更新的信息。该识别值可以是数字，也可以是预定义符号列表中的一个。</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">Tutorial on IEBlog with link to badge XML schema</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Available badge values</li>
</ul>
<div style="color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
</div>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"msapplication-badge"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">value</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"frequency=NUMBER_IN_MINUTES;polling-uri=http://www.example.com/path/to/file.xml"</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 在 IE 10 中禁用点击时链接的高亮效果</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 这非常类似于 iOS Safari 中的 -webkit-tap-highlight-color。但与这个 CSS 属性有所区别的是，这里使用的是一个 HTML 元标签，并且是一个布尔值而不是颜色值。使用这个功能就会对全体使用或禁用。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"msapplication-tap-highlight"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"no"</span></span> /></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多帮助信息和技巧，请参考 Microsoft's documentation on adapting WebKit-oriented apps for IE10。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 搜索</h3>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 为搜索引擎蜘蛛设置 sitemap</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 了解如何创建 sitemap。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"sitemap"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">type</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"application/xml"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">title</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"Sitemap"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"/sitemap.xml"</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 对搜索引擎屏蔽页面</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 根据 FLickr 前社区经理 Heather Champ 的看法，如果你足够理智，那么就不应该允许搜索引擎检索 “联系” 和 “投诉” 页面。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"robots"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"noindex"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <span style="">提醒</span>：不应该在页面中出现展示给搜索引擎的信息。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Firefox 和 IE 搜索插件</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 内置搜索功能的网站，可以考虑使用浏览器搜索插件提高性能。“搜索插件” 本质上就是一个 XML 文件，它定义了插件于浏览器的信息交互行为。How to make a browser search plugin。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"search"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">title</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">""</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">type</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"application/opensearchdescription+xml"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">""</span></span>></span>
</code></pre>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 其他参数</h3>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">使用polyfills。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">通过 microdata 使用 Microformats 优化搜索结果的准确性。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">如果你正在构建一个网页应用，那么你可能会考虑在 iOS 5+ 中滚动时，通过<code style="font-family:monospace,monospace; font-size:1em">-webkit-overflow-scrolling: touch</code> 调用本地样式。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">如果想要屏蔽 Chrome 的翻译提示，或在网页中的禁用 Google 翻译，那么可以使用 <code style="font-family:monospace,monospace; font-size:1em"><meta name="google" value="notranslate"></code>。如果只是在某一个部分禁用翻译，那么可以添加 <code style="font-family:monospace,monospace; font-size:1em">class="notranslate"</code>。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">如果想在 iOS 中，禁用 Safari 对手机号的自动检测和格式化功能，那么可以使用 <code style="font-family:monospace,monospace; font-size:1em"><meta name="format-detection" content="telephone=no"></code>。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">可以通过使用 implementing X-Robots-tag headers，避免开发阶段的网站被搜索引擎抓取。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">当前的屏幕阅读器对 HTML5 的支持还不是很好，建议通过使用 accessifyhtml5.js 给 HTML5 元素添加 ARIA roles 增强无障碍使用体验。</li>
</ul>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 订阅</h3>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> RSS</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 需要一个 RSS 订阅？请看这里的教程。learn how to write an RSS feed from scratch。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"alternate"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">type</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"application/rss+xml"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">title</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"RSS"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"/rss.xml"</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Atom</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> Atom 和 RSS 非常类似，你可能会很中意它，那么看看 Atom 的文档吧。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"alternate"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">type</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"application/atom+xml"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">title</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"Atom"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"/atom.xml"</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Pingbacks</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 当其他网站链接到你的网站时，你的服务器可能会收到通知。该 href 属性需要包含你在 pingback 上的服务地址。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"pingback"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">""</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 更多信息</h4>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">High-level explanation</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Step-by-step example case</li>
<li style="margin:0px; padding:0px; list-style:none outside none">PHP pingback service</li>
</ul>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 社交网络</h3>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Facebook 图谱</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 当用户分享当前站点时，开发者可以设置其分享到 Facebook 或其他社交网络的信息内容。以下就是开发者需要的最基本信息。更多具体的内容类型，请参考 Facebook's built-in Open Graph content templates。如果想要使用 Facebook 支持的高级特性，可以参考Open Graph tutorial。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">property</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"og:title"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">""</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">property</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"og:description"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">""</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">property</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"og:image"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">""</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Twitter 卡贴</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> Twitter 卡贴提供了类似 Facebook 图谱的功能。实际上，当卡贴不能使用时，Twitter 也会使用类似图谱的功能。注意，对于这种方式，Twitter 要求开发者在每个基本域名上都激活卡贴功能。更多格式和应用处理方式，请参考 official Twitter Cards documentation。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"twitter:card"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"summary"</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"twitter:site"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"@site_account"</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"twitter:creator"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"@individual_account"</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"twitter:url"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"http://www.example.com/path/to/page.html"</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"twitter:title"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">""</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"twitter:description"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">""</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"twitter:image"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"http://www.example.com/path/to/image.jpg"</span></span>></span>
</code></pre>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> URL</h3>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Canonical URL</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 通过在 URL 后面追加参数 <code style="font-family:monospace,monospace; font-size:1em">#</code> 或 <code style="font-family:monospace,monospace; font-size:1em">?</code> 来显示页面状态，对浏览器或其他使用者都会有所帮助。<code style="font-family:monospace,monospace; font-size:1em">http://www.example.com/cart.html?shopping-cart-open=true</code> 就可以比 <code style="font-family:monospace,monospace; font-size:1em">http://www.example.com/cart.html</code> 更精确地定义页面。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"canonical"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">""</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Official shortlink</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 向搜索引擎或该网站的使用者提示“这是本网站的短地址”，这种方式已经不被支持。更多信息请参考 article about shortlinks onthe Microformats wiki。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"shortlink"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"h5bp.com"</span></span>></span>
</code></pre>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 独立的移动端地址</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果在桌面端和移动端分别使用独立的 URLs，那么就要考虑好如何让搜索引擎算法更好地解析网站的配置信息。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 在 HTML 页面中添加如下注释会对此有所帮助：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">对于桌面端网页，添加 <code style="font-family:monospace,monospace; font-size:1em">link rel="alternate"</code> 标签指向相关的移动端地址，比如 <code style="font-family:monospace,monospace; font-size:1em"><link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html" ></code>。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">对于移动端网页，添加 <code style="font-family:monospace,monospace; font-size:1em">link rel="canonical"</code> 标签指向相关的桌面端地址，比如 <code style="font-family:monospace,monospace; font-size:1em"><link rel="canonical" href="http://www.example.com/page.html"></code>。</li>
</ul>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 更多信息请参考：</h4>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">https://developers.google.com/webmasters/smartphone-sites/details#separateurls</li>
<li style="margin:0px; padding:0px; list-style:none outside none">https://developers.google.com/webmasters/smartphone-sites/feature-phones</li>
</ul>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 网页应用</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 当网页应用在 iOS 中被添加到桌面后，可以使用如下标签获取信息：</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 使用 <code style="font-family:monospace,monospace; font-size:1em">apple-mobile-web-app-capable</code>，可以减少网页应用对 Chrome 的依赖，并提供 IOS App 的视图支持。可以通过使用 <code style="font-family:monospace,monospace; font-size:1em">apple-mobile-web-app-status-bar-style</code>，控制默认视图的色彩模式。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"apple-mobile-web-app-capable"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"yes"</span></span>></span>
<span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"apple-mobile-web-app-status-bar-style"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"black"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 使用 <code style="font-family:monospace,monospace; font-size:1em">apple-mobile-web-app-title</code>，可以为桌面图标重命名。该功能支持 iOS 6+。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"apple-mobile-web-app-title"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">""</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多信息请参考苹果官方文档。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Apple Touch Icons</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> Apple Touch Icons 相当于 iOS 设备的桌面图标。Apple Touch Icons 的主要尺寸如下：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">57×57px</code> – iPhone with @1x display and iPod Touch</li>
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">72×72px</code> – iPad and iPad mini with @1x display running iOS ≤ 6</li>
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">76×76px</code> – iPad and iPad mini with @1x display running iOS ≥ 7</li>
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">114×114px</code> – iPhone with @2x display running iOS ≤ 6</li>
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">120×120px</code> – iPhone with @2x and @3x display running iOS ≥ 7</li>
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">144×144px</code> – iPad and iPad mini with @2x display running iOS ≤ 6</li>
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">152×152px</code> – iPad and iPad mini with @2x display running iOS 7</li>
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">180×180px</code> – iPad and iPad mini with @2x display running iOS 8</li>
</ul>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 显示尺寸含义：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">@1x</code> - non-Retina</li>
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">@2x</code> - Retina</li>
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">@3x</code> - Retina HD</li>
</ul>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多有关 iOS 设备的显示信息，请参考 List of iOS devices display。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 大多数情况下，可以使用 <code style="font-family:monospace,monospace; font-size:1em">180×180px</code> 大小的图标，命名为 <code style="font-family:monospace,monospace; font-size:1em">apple-touch-icon.png</code> 后包含在页面的 <code style="font-family:monospace,monospace; font-size:1em"><head></code> 即可：</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"apple-touch-icon"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"apple-touch-icon.png"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果希望每个设备有不同的内容，那么可以添加多个 Apple Touch Icons。更多信息情参考 article on Touch Icons。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Apple Touch Startup Image</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 除此之外，可以给 iOS 上的网页应用添加启动界面。该功能需要使用 <code style="font-family:monospace,monospace; font-size:1em">apple-touch-startup-image</code>，并附加相关的图片链接。由于 iOS 应用于多种尺寸的屏幕下，所以有必要使用媒体查检测尺寸，然后再加载图片。这里是一个在 retina iPhone 的示例：</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"apple-touch-startup-image"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">media</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"img/startup-retina.png"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 不过，该功能可能需要使用 JavaScript 检测启动界面的图片。Mobile Boilerplate 提供了一个有效地功能来解决这个问题，请参考helpers.js 的实现方法。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Chrome Mobile web apps</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> Chrome 移动端拥有一个专有的元标签，用来在桌面安装网页应用，该标签比苹果的属性属性标签更具有通用性。</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">meta</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">name</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"mobile-web-app-capable"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">content</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"yes"</span></span>></span>
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 同样适用于 touch icons:</p>
<pre class="xml" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="xml" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em"><span class="tag" style=""><<span class="title" style="color:rgb(38,139,210)"><span class="title" style="">link</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">rel</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"icon"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">sizes</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"192x192"</span></span> <span class="attribute" style="color:rgb(181,137,0)"><span class="attribute" style="">href</span></span>=<span class="value" style="color:rgb(42,161,152)"><span class="value" style="">"highres-icon.png"</span></span>></span>
</code></pre>
<h2 style="margin-top:20px; margin-bottom:10px; font-size:30px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 其他</h2>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> .gitignore</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> HTML5 Boilerplate 引入了一个基础性的、项目级的 <code style="font-family:monospace,monospace; font-size:1em">.gitignore</code>。主要用来让源代码忽略对项目中特定文件和目录的管理。在不同的开发环境使用不同的忽略列表，将会大有裨益。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 特定系统和特定编辑器的文件应该使用 “global ignore” ，从而忽略系统中所有库对相关文件的依赖。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 比如，在希望全局忽略的 HOME 目录，将如下内容放入 <code style="font-family:monospace,monospace; font-size:1em">.gitignore</code> 文件。</p>
<pre class="undefined" style="overflow:auto; font-family:monospace,monospace; font-size:14px; padding:0.5em; background:rgb(0,43,54); color:rgb(131,148,150)"><code class="undefined" style="font-family:monospace,monospace; font-size:1em; display:block; padding:0.5em">[core]
excludesfile = ~/.gitignore
</code></pre>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多信息请参考：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">[More on global ignores: https://help.github.com/articles/ignoring-files](More on global ignores: https://help.github.com/articles/ignoring-files)</li>
<li style="margin:0px; padding:0px; list-style:none outside none">[Comprehensive set of ignores on GitHub: https://github.com/github/gitignore](Comprehensive set of ignores on GitHub: https://github.com/github/gitignore)</li>
</ul>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> .editorconfig</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <code style="font-family:monospace,monospace; font-size:1em">.editorconfig</code> 文件用来激励和帮助开发者/开发团队，在不同的编辑器和 IDE 下，定义和维护一致性的代码风格。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 默认情况下，<code style="font-family:monospace,monospace; font-size:1em">.editorconfig</code> 包含了一些基本属性，用来体现代码风格，但是开发者可以根据需求自定义相关属性。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 为了让编辑器、IDE 更好的使用 <code style="font-family:monospace,monospace; font-size:1em">.editorconfig</code> 配置文件，开发者需要安装一个插件。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <span style="">注意</span>：如果你不需要使用 HTML5 Boilerplate 提供的服务器配置，我们强烈建议不要允许你服务器使用 <code style="font-family:monospace,monospace; font-size:1em">.editorconfig</code> 文件，因为该文件会屏蔽敏感信息。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多信息请参考 EditorConfig project。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 服务器配置</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> HTML5 Boilerplate 为 Apache HTTP 服务器配置了 <code style="font-family:monospace,monospace; font-size:1em">.htaccess</code> 文件。如果不是使用 Apache 服务器，建议下载 server configuration 并适配所用服务器。</p>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> Servers and Stacks</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 介绍 WEB 服务器和堆栈的内容就远远超过了本文档的范围，但这里有一些常用的资料：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">Apache HTTP Server</li>
<li style="margin:0px; padding:0px; list-style:none outside none">LAMP (Linux, Apache, MySQL, and PHP). Other variants include MAMP, WAMP, or XAMPP.</li>
<li style="margin:0px; padding:0px; list-style:none outside none">LAPP uses PostgreSQL instead of MySQL</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Nginx</li>
<li style="margin:0px; padding:0px; list-style:none outside none">LEMP is similar to the LAMP stack but uses Nginx</li>
<li style="margin:0px; padding:0px; list-style:none outside none">IIS</li>
<li style="margin:0px; padding:0px; list-style:none outside none">ASP.NET</li>
<li style="margin:0px; padding:0px; list-style:none outside none">MEAN (MongoDB, Express, AngularJS, Node.js)</li>
</ul>
<h4 style="margin-top:10px; margin-bottom:10px; font-size:18px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> .htaccess</h4>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <code style="font-family:monospace,monospace; font-size:1em">.htaccess</code>（超文本存取）文件就是Apache HTTP 服务器的配置文件。常用于：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">Rewriting URLs</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Controlling cache</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Authentication</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Server-side includes</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Redirects</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Gzipping</li>
</ul>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果你使用过主流服务器的配置文件（通常称为 <code style="font-family:monospace,monospace; font-size:1em">httpd.conf</code>），那么你应该熟悉往 <code style="font-family:monospace,monospace; font-size:1em">.htaccess</code> 文件中添加逻辑处理。比如， 部分位于主要的配置文件中。因为 .htaccess 文件会拖慢 Apache，所以通常建议这么做。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 为了启用本地的 Apache 模块，请参考这里。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <code style="font-family:monospace,monospace; font-size:1em">.htaccess</code> 主要用于：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">允许跨源请求 web 字体</li>
<li style="margin:0px; padding:0px; list-style:none outside none">当浏览器请求图片时，使用跨域资源共享头</li>
<li style="margin:0px; padding:0px; list-style:none outside none">将 <code style="font-family:monospace,monospace; font-size:1em">404.html</code> 作为 404 错误文档</li>
<li style="margin:0px; padding:0px; list-style:none outside none">为 IE 用户提供更好的用户体验</li>
<li style="margin:0px; padding:0px; list-style:none outside none">将 UTF-8 作为 <code style="font-family:monospace,monospace; font-size:1em">text/html</code> 和 <code style="font-family:monospace,monospace; font-size:1em">text/plain</code> 的字符编码</li>
<li style="margin:0px; padding:0px; list-style:none outside none">启用 URLs 重写引擎</li>
<li style="margin:0px; padding:0px; list-style:none outside none">强制或移除 URL 开头的 <code style="font-family:monospace,monospace; font-size:1em">www.</code></li>
<li style="margin:0px; padding:0px; list-style:none outside none">缺少默认文档时阻塞对目录的调用</li>
<li style="margin:0px; padding:0px; list-style:none outside none">隔离文件访问，防止敏感信息泄露</li>
<li style="margin:0px; padding:0px; list-style:none outside none">降低了 MIME 类型的安全风险</li>
<li style="margin:0px; padding:0px; list-style:none outside none">强制压缩</li>
<li style="margin:0px; padding:0px; list-style:none outside none">通知浏览器是否需要从服务器请求特定文件，或者是否需要从浏览器缓存获取特定文件</li>
</ul>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 当使用 <code style="font-family:monospace,monospace; font-size:1em">.htaccess</code> 时，我们建议阅读一次所有的内部注释。其中有一些是可选的。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多有关 <code style="font-family:monospace,monospace; font-size:1em">.htaccess</code> 文件的信息请参考这里。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 注意，<code style="font-family:monospace,monospace; font-size:1em">.htaccess</code> 的源库在这里。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> crossdomain.xml</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 跨域策略文件是一个 XML 文档，其内容来自 web 客户端（比如，Adobe Flash Player, Adobe Reader），可以允许处理来自多个域名的数据：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">授权读取数据</li>
<li style="margin:0px; padding:0px; list-style:none outside none">允许客户端在跨域请求中导入自定义的头部信息</li>
<li style="margin:0px; padding:0px; list-style:none outside none">授权许可基本的套接字连接</li>
</ul>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <span style="">注意</span>：如果一个客户端从一个特定的源域名获取内容，然后该内容请求重定向其他域名，那么远程域名就需要使用跨域策略文件，从而获得源域名的授权，最终允许客户端继续处理相关事务。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多信息请参考 cross-domain policy file specification。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> robots.txt</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <code style="font-family:monospace,monospace; font-size:1em">robots.txt</code> 文件用来告知搜索引擎网站中可以抓取的页面。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 默认情况下，文件中包含下面两行信息：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">User-agent: *</code> - 以下规则适用于所有的搜索引擎</li>
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">Disallow:</code> - 网站中的所有页面都可以被抓取</li>
</ul>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 如果想屏蔽某些页面，那么你需要在 <code style="font-family:monospace,monospace; font-size:1em">Disallow</code> 参数后面做出具体声明（比如: <code style="font-family:monospace,monospace; font-size:1em">Disallow: /path</code>）。如果你想屏蔽所有内容，只需 <code style="font-family:monospace,monospace; font-size:1em">Disallow: /</code>。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <code style="font-family:monospace,monospace; font-size:1em">/robots.txt</code> 并不是用来访问控制的，所以请不要这样使用。可以将其视为一个 “禁止通行” 标志，而不是一扇锁上的门。通过 <code style="font-family:monospace,monospace; font-size:1em">robots.txt</code> 文件屏蔽 URLs，即使未被抓取仍有可能被定位，而且 <code style="font-family:monospace,monospace; font-size:1em">robots.txt</code> 文件中的内容也可以被任何人访问到，这样就间接透漏了私有内容的位置。所以，如果想屏蔽访问私人信息，建议使用合理的验证机制。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 关于 <code style="font-family:monospace,monospace; font-size:1em">/robots.txt</code> 文件的更多信息请参考：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">robotstxt.org</li>
<li style="margin:0px; padding:0px; list-style:none outside none">How Google handles the <code style="font-family:monospace,monospace; font-size:1em">robots.txt</code> file</li>
</ul>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> browserconfig.xml</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 用户在 Windows 8.1 启动界面固定的应用图标，可以通过 <code style="font-family:monospace,monospace; font-size:1em">browserconfig.xml</code> 文件进行个性化定制。在该文件中，可以自定义瓷贴颜色、图片，甚至是动态瓷贴。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 默认情况下，该文件指向两个既有的瓷贴图片：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">tile.png</code> (558x558px): used for <code style="font-family:monospace,monospace; font-size:1em">Small</code>, <code style="font-family:monospace,monospace; font-size:1em">Medium</code> and <code style="font-family:monospace,monospace; font-size:1em">Large</code> tiles.如有必要该图片可以自动修改尺寸。</li>
<li style="margin:0px; padding:0px; list-style:none outside none"><code style="font-family:monospace,monospace; font-size:1em">tile-wide.png</code> (558x270px): user for <code style="font-family:monospace,monospace; font-size:1em">Wide</code> tiles.</li>
</ul>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 注意，当收藏网站时，IE 11 将收藏夹中使用相同的图片。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 有关 <code style="font-family:monospace,monospace; font-size:1em">browserconfig.xml</code> 文件的跟多信息，请参考 MSDN。</p>
<h2 style="margin-top:20px; margin-bottom:10px; font-size:30px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> FAQ</h2>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 为什么 jQuery 的链接没有加<code style="font-family:monospace,monospace; font-size:1em">http</code>？</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 这是因为使用了 protocol-relative URLs。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> <span style="">注意</span>:如果你尝试直接在浏览器中预览本地网页，那么浏览器将无法加载资源，特别是使用 protocol-relative URLs，因为它会尝试从本地文件系统获取相关资源。建议使用本地的 HTTP 服务器，或者是允许在线预览网页的文件托管服务（比如Dropbox）来测试网页。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 建立本地 HTTP 服务器可以使用多种短命令：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">PHP 5.4.0+ 使用 <code style="font-family:monospace,monospace; font-size:1em">php -S localhost:8080</code> 命令从本地目录启动并运行。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Python 2.x 使用 <code style="font-family:monospace,monospace; font-size:1em">python -m SimpleHTTPServer</code> 命令从本地目录启动并运行。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Python 3.x 使用 <code style="font-family:monospace,monospace; font-size:1em">python -m http.server</code> 命令从本地目录启动并运行。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Ruby 1.9.2+ 使用 <code style="font-family:monospace,monospace; font-size:1em">ruby -run -ehttpd . -p8080</code> 命令从本地目录启动并运行。</li>
<li style="margin:0px; padding:0px; list-style:none outside none">Node.js 使用 <code style="font-family:monospace,monospace; font-size:1em">static -p 8080</code> 或 <code style="font-family:monospace,monospace; font-size:1em">http-server -p 8080</code> 命令安装和启动服务器。</li>
</ul>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 为什么不从 Google CDN 自动加载最新版本的 jQuery？</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 首先，Google CDN 所指向的 jQuery 文件已不再更新，并且将锁定在<code style="font-family:monospace,monospace; font-size:1em">1.11.1</code>版本，以防止新版本变动引发的网页脚本失效。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 其次，通常来说，更新版本应该是个慎重的决定！网页中不应该一直引用最新版本的原因如下：</p>
<ul style="margin:0px; padding:0px; list-style:none outside none; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<li style="margin:0px; padding:0px; list-style:none outside none">可能与现有插件、代码不兼容</li>
<li style="margin:0px; padding:0px; list-style:none outside none">与固定引用某一版本的方式相比，一直引用最新版本将会减少本地缓存时间，这意味着用户无法受益于长周期缓存带来的便利。</li>
</ul>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 为什么将 Google Analytics 代码置于网页底部？而 Google 则建议将其置于<code style="font-family:monospace,monospace; font-size:1em"><head></code>。</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 将其置于<code style="font-family:monospace,monospace; font-size:1em"><head></code>的主要优势是，在页面加载完成之前，即使用户离开当前网页，也可以获得页面浏览量（PV）。然而，将其置于页面底部则有助于改善整体性能。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 如何在 HTML5 Boilerplate 中整合 Bootstrap。</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 一个简单的方法是使用 Initializr，并创建自定义的构建环境——在其中同时包含 HTML5 Boilerplate 和 Bootstrap。</p>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 更多信息请参考文章： HTML5 Boilerplate 和 Bootstrap 的互相整合。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 每当 HTML5 Boilerplate 释放出新版本，开发者是否必须更新网站？</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 完全没有必要！这就像是房子盖完之后，虽然需要时不时的修护一下，但通常没必要重新打地基。当然，如果想尝试新版本的变动，也是完全可以的，但最好正确权衡这么做的成本和收获。</p>
<h3 style="margin-top:20px; margin-bottom:10px; font-size:24px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color:rgb(238,238,238)"> 哪里可以获取技术支持？</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> 请使用 StackOverflow 寻求帮助。</p>
<blockquote style="color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<p style="margin-top:0px; margin-bottom:10px">本文根据HTML5 Boilerplate官方文档所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/html.md。</p>
</blockquote>
<span style="color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">著作权归作者所有。</span>
<br style="color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<span style="color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">商业转载请联系作者获得授权,非商业转载请注明出处。</span>
<br style="color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">
<span style="color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)">原文: </span> http://www.w3cplus.com/html5/html5-boilerplate.html
<span style="color:rgb(64,64,64); font-family:"Microsoft YaHei",微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(238,238,238)"> © </span> w3cplus.com
<div style="top:0px">
<span style="color:rgb(51,51,51); font-family:"Microsoft Yahei",微软雅黑,arial,宋体,sans-serif; font-size:16px; text-align:justify">HTML5 Boilerplate并不是一个新的前端框架，而是一套最佳实践的组合，可以简化我们的工作，提高开发效率，仅此而已。</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1369945818664099840"></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">你可能感兴趣的:(精选博客,JavaScript学习目录)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<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/1835507248395284480.htm"
title="【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数" target="_blank">【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数</a>
<span class="text-muted">广龙宇</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%B5%B7%E5%AD%A6Rust/1.htm">一起学Rust</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Rust%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">Rust设计模式</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分</div>
</li>
<li><a href="/article/1835505606245576704.htm"
title="Python中os.environ基本介绍及使用方法" target="_blank">Python中os.environ基本介绍及使用方法</a>
<span class="text-muted">鹤冲天Pro</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/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>
<div>文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi</div>
</li>
<li><a href="/article/1835504217729626112.htm"
title="Python教程：一文了解使用Python处理XPath" target="_blank">Python教程：一文了解使用Python处理XPath</a>
<span class="text-muted">旦莫</span>
<a class="tag" taget="_blank" href="/search/Python%E8%BF%9B%E9%98%B6/1.htm">Python进阶</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代</div>
</li>
<li><a href="/article/1835502704827396096.htm"
title="将cmd中命令输出保存为txt文本文件" target="_blank">将cmd中命令输出保存为txt文本文件</a>
<span class="text-muted">落难Coder</span>
<a class="tag" taget="_blank" href="/search/Windows/1.htm">Windows</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/window/1.htm">window</a>
<div>最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再</div>
</li>
<li><a href="/article/1835502451877310464.htm"
title="基于社交网络算法优化的二维最大熵图像分割" target="_blank">基于社交网络算法优化的二维最大熵图像分割</a>
<span class="text-muted">智能算法研学社（Jack旭）</span>
<a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E4%BC%98%E5%8C%96%E7%AE%97%E6%B3%95%E5%BA%94%E7%94%A8/1.htm">智能优化算法应用</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E5%83%8F%E5%88%86%E5%89%B2/1.htm">图像分割</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt</div>
</li>
<li><a href="/article/1835501948011376640.htm"
title="使用 FinalShell 进行远程连接（ssh 远程连接 Linux 服务器）" target="_blank">使用 FinalShell 进行远程连接（ssh 远程连接 Linux 服务器）</a>
<span class="text-muted">编程经验分享</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/1.htm">开发工具</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>目录前言基本使用教程新建远程连接连接主机自定义命令路由追踪前言后端开发，必然需要和服务器打交道，部署应用，排查问题，查看运行日志等等。一般服务器都是集中部署在机房中，也有一些直接是云服务器，总而言之，程序员不可能直接和服务器直接操作，一般都是通过ssh连接来登录服务器。刚接触远程连接时，使用的是XSHELL来远程连接服务器，连接上就能够操作远程服务器了，但是仅用XSHELL并没有上传下载文件的功能</div>
</li>
<li><a href="/article/1835501821569888256.htm"
title="关于提高复杂业务逻辑代码可读性的思考" target="_blank">关于提高复杂业务逻辑代码可读性的思考</a>
<span class="text-muted">编程经验分享</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E7%BB%8F%E9%AA%8C/1.htm">开发经验</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/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>
<div>目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一</div>
</li>
<li><a href="/article/1835498925755297792.htm"
title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
<span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
<div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
</li>
<li><a href="/article/1835496148601761792.htm"
title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
<span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
</li>
<li><a href="/article/1835493753557708800.htm"
title="每日算法&面试题，大厂特训二十八天——第二十天（树）" target="_blank">每日算法&面试题，大厂特训二十八天——第二十天（树）</a>
<span class="text-muted">肥学</span>
<a class="tag" taget="_blank" href="/search/%E2%9A%A1%E7%AE%97%E6%B3%95%E9%A2%98%E2%9A%A1%E9%9D%A2%E8%AF%95%E9%A2%98%E6%AF%8F%E6%97%A5%E7%B2%BE%E8%BF%9B/1.htm">⚡算法题⚡面试题每日精进</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a>
<div>目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章</div>
</li>
<li><a href="/article/1835493373906087936.htm"
title="libyuv之linux编译" target="_blank">libyuv之linux编译</a>
<span class="text-muted">jaronho</span>
<a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</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><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
<div>文章目录一、下载源码二、编译源码三、注意事项1、银河麒麟系统（aarch64）（1）解决armv8-a+dotprod+i8mm指令集支持问题（2）解决armv9-a+sve2指令集支持问题一、下载源码到GitHub网站下载https://github.com/lemenkov/libyuv源码，或者用直接用git克隆到本地，如：gitclonehttps://github.com/lemenko</div>
</li>
<li><a href="/article/1835491353451130880.htm"
title="【华为OD技术面试真题 - 技术面】- python八股文真题题库（4)" target="_blank">【华为OD技术面试真题 - 技术面】- python八股文真题题库（4)</a>
<span class="text-muted">算法大师</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法</div>
</li>
<li><a href="/article/1835491354004779008.htm"
title="【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）" target="_blank">【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）</a>
<span class="text-muted">算法大师</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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%89%8D%E7%AB%AF/1.htm">前端</a>
<div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本，现在要你测试这个功能：打开聊天窗口，输入文本，限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些</div>
</li>
<li><a href="/article/1835490218845761536.htm"
title="Python爬虫解析工具之xpath使用详解" target="_blank">Python爬虫解析工具之xpath使用详解</a>
<span class="text-muted">eqa11</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/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>
<div>文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门</div>
</li>
<li><a href="/article/1835486185015832576.htm"
title="【无标题】达瓦达瓦" target="_blank">【无标题】达瓦达瓦</a>
<span class="text-muted">JhonKI</span>
<a class="tag" taget="_blank" href="/search/%E8%80%83%E7%A0%94/1.htm">考研</a>
<div>博客主页：https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正！本文由JohnKi原创，首发于CSDN未来很长，值得我们全力奔赴更美好的生活✨文章目录前言111️111❤️111111111111111总结111前言111骗骗流量券，嘿嘿111111111111111111111111111️111❤️111111111111111总结11</div>
</li>
<li><a href="/article/1835486185468817408.htm"
title="上图为是否色发" target="_blank">上图为是否色发</a>
<span class="text-muted">JhonKI</span>
<a class="tag" taget="_blank" href="/search/%E8%80%83%E7%A0%94/1.htm">考研</a>
<div>博客主页：https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正！本文由JohnKi原创，首发于CSDN未来很长，值得我们全力奔赴更美好的生活✨文章目录前言111️111❤️111111111111111总结111前言111骗骗流量券，嘿嘿111111111111111111111111111️111❤️111111111111111总结11</div>
</li>
<li><a href="/article/1835485429059645440.htm"
title="docker" target="_blank">docker</a>
<span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/eureka/1.htm">eureka</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a>
<div>Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息</div>
</li>
<li><a href="/article/1835484293607026688.htm"
title="【Git】常见命令(仅笔记)" target="_blank">【Git】常见命令(仅笔记)</a>
<span class="text-muted">好想有猫猫</span>
<a class="tag" taget="_blank" href="/search/Git/1.htm">Git</a><a class="tag" taget="_blank" href="/search/Linux%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">Linux学习笔记</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a>
<div>文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"123123@qq.c</div>
</li>
<li><a href="/article/1835483915071090688.htm"
title="【华为OD技术面试真题 - 技术面】- python八股文真题题库（1）" target="_blank">【华为OD技术面试真题 - 技术面】- python八股文真题题库（1）</a>
<span class="text-muted">算法大师</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.数据预处理流程数据预处理的主要步骤工具和库2.介绍线性回归、逻辑回归模型线性回归（LinearRegression）模型形式：关键点：逻辑回归（LogisticRegression）模型形式：关键点：参数估计与评估：3.python浅拷贝及深拷贝浅拷贝（Shal</div>
</li>
<li><a href="/article/1835483159140069376.htm"
title="143234234123432" target="_blank">143234234123432</a>
<span class="text-muted">JhonKI</span>
<a class="tag" taget="_blank" href="/search/%E8%80%83%E7%A0%94/1.htm">考研</a>
<div>博客主页：https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正！本文由JohnKi原创，首发于CSDN未来很长，值得我们全力奔赴更美好的生活✨文章目录前言111️111❤️111111111111111总结111前言111骗骗流量券，嘿嘿111111111111111111111111111️111❤️111111111111111总结11</div>
</li>
<li><a href="/article/1835479000600899584.htm"
title="Linux MariaDB使用OpenSSL安装SSL证书" target="_blank">Linux MariaDB使用OpenSSL安装SSL证书</a>
<span class="text-muted">Meta39</span>
<a class="tag" taget="_blank" href="/search/MySQL/1.htm">MySQL</a><a class="tag" taget="_blank" href="/search/Oracle/1.htm">Oracle</a><a class="tag" taget="_blank" href="/search/MariaDB/1.htm">MariaDB</a><a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/Windows/1.htm">Windows</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/mariadb/1.htm">mariadb</a>
<div>进入到证书存放目录，批量删除.pem证书警告：确保已经进入到证书存放目录find.-typef-iname\*.pem-delete查看是否安装OpenSSLopensslversion没有则安装yuminstallopensslopenssl-devel开启SSL编辑/etc/my.cnf文件（没有的话就创建，但是要注意，在/etc/my.cnf.d/server.cnf配置了datadir的，</div>
</li>
<li><a href="/article/1835476350190841856.htm"
title="ExpRe[25] bash外的其它shell：zsh和fish" target="_blank">ExpRe[25] bash外的其它shell：zsh和fish</a>
<span class="text-muted">tritone</span>
<a class="tag" taget="_blank" href="/search/ExpRe/1.htm">ExpRe</a><a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a>
<div>文章目录zsh基础配置实用特性插件`autojump`语法高亮自动补全fish优点缺点时效性本篇撰写时间为2021.12.15，由于计算机技术日新月异，博客中所有内容都有时效和版本限制，具体做法不一定总行得通，链接可能改动失效，各种软件的用法可能有修改。但是其中透露的思想往往是值得学习的。本篇前置：ExpRe[10]Ubuntu[2]准备神秘软件、备份恢复软件https://www.cnblogs</div>
</li>
<li><a href="/article/1835475216080400384.htm"
title="openssl+keepalived安装部署" target="_blank">openssl+keepalived安装部署</a>
<span class="text-muted">_小亦_</span>
<a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E9%83%A8%E7%BD%B2/1.htm">项目部署</a><a class="tag" taget="_blank" href="/search/keepalived/1.htm">keepalived</a><a class="tag" taget="_blank" href="/search/openssl/1.htm">openssl</a>
<div>文章目录OpenSSL安装下载地址编译安装修改系统配置版本Keepalived安装下载地址安装遇到问题安装完成配置文件keepalived运行检查运行状态查看系统日志修改服务service重新加载systemd检查配置文件语法错误OpenSSL安装下载地址考虑到后面设备可能没法连接到外网，所以采用安装包的方式进行部署，下载地址：https://www.openssl.org/source/old/</div>
</li>
<li><a href="/article/1835473957185220608.htm"
title="网络编程基础" target="_blank">网络编程基础</a>
<span class="text-muted">记得开心一点啊</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
<div>目录♫什么是网络编程♫Socket套接字♪什么是Socket套接字♪数据报套接字♪流套接字♫数据报套接字通信模型♪数据报套接字通讯模型♪DatagramSocket♪DatagramPacket♪实现UDP的服务端代码♪实现UDP的客户端代码♫流套接字通信模型♪流套接字通讯模型♪ServerSocket♪Socket♪实现TCP的服务端代码♪实现TCP的客户端代码♫什么是网络编程网络编程，指网络上</div>
</li>
<li><a href="/article/1835473830873755648.htm"
title="简单了解 JVM" target="_blank">简单了解 JVM</a>
<span class="text-muted">记得开心一点啊</span>
<a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a>
<div>目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机</div>
</li>
<li><a href="/article/1835471689929027584.htm"
title="关于Mysql 中 Row size too large (＞ 8126) 错误的解决和理解" target="_blank">关于Mysql 中 Row size too large (＞ 8126) 错误的解决和理解</a>
<span class="text-muted">秋刀prince</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
<div>提示：啰嗦一嘴，数据库的任何操作和验证前，一定要记得先备份！！！不会有错；文章目录问题发现一、问题导致的可能原因1、页大小2、行格式2.1compact格式2.2Redundant格式2.3Dynamic格式2.4Compressed格式3、BLOB和TEXT列二、解决办法1、修改页大小（不推荐）2、修改行格式3、修改数据类型为BLOB和TEXT列4、其他优化方式（可以参考使用）4.1合理设置数据</div>
</li>
<li><a href="/article/1835471437754888192.htm"
title="一文掌握python面向对象魔术方法（二）" target="_blank">一文掌握python面向对象魔术方法（二）</a>
<span class="text-muted">程序员neil</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>接上篇：一文掌握python面向对象魔术方法（一）-CSDN博客目录六、迭代和序列化：1、__iter__(self):定义迭代器，使得类可以被for循环迭代。2、__getitem__(self,key):定义索引操作，如obj[key]。3、__setitem__(self,key,value):定义赋值操作，如obj[key]=value。4、__delitem__(self,key):定义</div>
</li>
<li><a href="/article/1835471185589137408.htm"
title="一文掌握python常用的list（列表）操作" target="_blank">一文掌握python常用的list（列表）操作</a>
<span class="text-muted">程序员neil</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>目录一、创建列表1.直接创建列表：2.使用list()构造器3.使用列表推导式4.创建空列表二、访问列表元素1.列表支持通过索引访问元素，索引从0开始：2.还可以使用切片操作访问列表的一部分：三、修改列表元素四、添加元素1.append()：在末尾添加元素2.insert()：在指定位置插入元素五、删除元素1.del：删除指定位置的元素2.remove()：删除指定值的第一个匹配项3.pop()：</div>
</li>
<li><a href="/article/1835470932295118848.htm"
title="CentOS的根目录下，/bin 和 /sbin 用途和权限" target="_blank">CentOS的根目录下，/bin 和 /sbin 用途和权限</a>
<span class="text-muted">Energet!c</span>
<a class="tag" taget="_blank" href="/search/Linux%E6%97%A5%E5%B8%B8/1.htm">Linux日常</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</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>CentOS的根目录下，/bin和/sbin用途和权限一、/bin(Binary)二、/sbin(SystemBinary)三、总结在CentOS的根目录下，/bin和/sbin目录有不同的用途和权限一、/bin(Binary)用途:存放系统的基本命令，这些命令对所有用户都是可用的。例如：ls、cp、mv、rm等。权限:普通用户和系统管理员都可以使用这些命令。二、/sbin(SystemBinar</div>
</li>
<li><a href="/article/46.htm"
title="Maven" target="_blank">Maven</a>
<span class="text-muted">Array_06</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
<div>Maven
Maven是基于项目对象模型(POM)， 信息来管理项目的构建，报告和文档的软件项目管理工具。
Maven 除了以程序构建能力为特色之外，还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性，所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法，许多 Apache Jakarta 项目发文时使用 Maven，而且公司</div>
</li>
<li><a href="/article/173.htm"
title="ibatis的queyrForList和queryForMap区别" target="_blank">ibatis的queyrForList和queryForMap区别</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/ibatis/1.htm">ibatis</a>
<div>一.说明
iBatis的返回值参数类型也有种：resultMap与resultClass，这两种类型的选择可以用两句话说明之：
1.当结果集列名和类的属性名完全相对应的时候，则可直接用resultClass直接指定查询结果类</div>
</li>
<li><a href="/article/300.htm"
title="LeetCode[位运算] - #191 计算汉明权重" target="_blank">LeetCode[位运算] - #191 计算汉明权重</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/%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><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a>
<div>原题链接：#191 Number of 1 Bits
要求：
写一个函数，以一个无符号整数为参数，返回其汉明权重。例如，‘11’的二进制表示为'00000000000000000000000000001011', 故函数应当返回3。
汉明权重：指一个字符串中非零字符的个数；对于二进制串，即其中‘1’的个数。
难度：简单
分析：
将十进制参数转换为二进制，然后计算其中1的个数即可。
“</div>
</li>
<li><a href="/article/427.htm"
title="浅谈java类与对象" target="_blank">浅谈java类与对象</a>
<span class="text-muted">15700786134</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div> java是一门面向对象的编程语言，类与对象是其最基本的概念。所谓对象，就是一个个具体的物体，一个人，一台电脑，都是对象。而类，就是对象的一种抽象，是多个对象具有的共性的一种集合，其中包含了属性与方法，就是属于该类的对象所具有的共性。当一个类创建了对象，这个对象就拥有了该类全部的属性，方法。相比于结构化的编程思路，面向对象更适用于人的思维</div>
</li>
<li><a href="/article/554.htm"
title="linux下双网卡同一个IP" target="_blank">linux下双网卡同一个IP</a>
<span class="text-muted">被触发</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>转自：
http://q2482696735.blog.163.com/blog/static/250606077201569029441/
由于需要一台机器有两个网卡，开始时设置在同一个网段的IP，发现数据总是从一个网卡发出，而另一个网卡上没有数据流动。网上找了下，发现相同的问题不少：
一、
关于双网卡设置同一网段IP然后连接交换机的时候出现的奇怪现象。当时没有怎么思考、以为是生成树</div>
</li>
<li><a href="/article/681.htm"
title="安卓按主页键隐藏程序之后无法再次打开" target="_blank">安卓按主页键隐藏程序之后无法再次打开</a>
<span class="text-muted">肆无忌惮_</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%8D%93/1.htm">安卓</a>
<div>遇到一个奇怪的问题，当SplashActivity跳转到MainActivity之后，按主页键，再去打开程序，程序没法再打开（闪一下），结束任务再开也是这样，只能卸载了再重装。而且每次在Log里都打印了这句话"进入主程序"。后来发现是必须跳转之后再finish掉SplashActivity
本来代码：
// 销毁这个Activity
fin</div>
</li>
<li><a href="/article/808.htm"
title="通过cookie保存并读取用户登录信息实例" target="_blank">通过cookie保存并读取用户登录信息实例</a>
<span class="text-muted">知了ing</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>通过cookie的getCookies()方法可获取所有cookie对象的集合；通过getName()方法可以获取指定的名称的cookie；通过getValue()方法获取到cookie对象的值。另外，将一个cookie对象发送到客户端，使用response对象的addCookie()方法。
下面通过cookie保存并读取用户登录信息的例子加深一下理解。
（1）创建index.jsp文件。在改</div>
</li>
<li><a href="/article/935.htm"
title="JAVA 对象池" target="_blank">JAVA 对象池</a>
<span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ObjectPool/1.htm">ObjectPool</a>
<div>原文地址：
http://www.blogjava.net/baoyaer/articles/218460.html
Jakarta对象池
☆为什么使用对象池
恰当地使用对象池化技术，可以有效地减少对象生成和初始化时的消耗，提高系统的运行效率。Jakarta Commons Pool组件提供了一整套用于实现对象池化</div>
</li>
<li><a href="/article/1062.htm"
title="ArrayList根据条件+for循环批量删除的方法" target="_blank">ArrayList根据条件+for循环批量删除的方法</a>
<span class="text-muted">alleni123</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>场景如下：
ArrayList<Obj> list
Obj-> createTime, sid.
现在要根据obj的createTime来进行定期清理。（释放内存）
-------------------------
首先想到的方法就是
for(Obj o:list){
if(o.createTime-currentT>xxx){
</div>
</li>
<li><a href="/article/1189.htm"
title="阿里巴巴“耕地宝”大战各种宝" target="_blank">阿里巴巴“耕地宝”大战各种宝</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/%E5%B9%B3%E5%8F%B0%E6%88%98%E7%95%A5/1.htm">平台战略</a>
<div>“耕地保”平台是阿里巴巴和安徽农民共同推出的一个 “首个互联网定制私人农场”，“耕地宝”由阿里巴巴投入一亿 ，主要是用来进行农业方面，将农民手中的散地集中起来 不仅加大农民集体在土地上面的话语权，还增加了土地的流通与 利用率，提高了土地的产量，有利于大规模的产业化的高科技农业的 发展，阿里在农业上的探索将会引起新一轮的产业调整，但是集体化之后农民的个体的话语权 将更少，国家应出台相应的法律法规保护</div>
</li>
<li><a href="/article/1316.htm"
title="Spring注入有继承关系的类（1）" target="_blank">Spring注入有继承关系的类（1）</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>一个类一个类的注入
1.AClass类
package com.bijian.spring.test2;
public class AClass {
String a;
String b;
public String getA() {
return a;
}
public void setA(Strin</div>
</li>
<li><a href="/article/1443.htm"
title="30岁转型期你能否成为成功人士" target="_blank">30岁转型期你能否成为成功人士</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E6%88%90%E5%8A%9F/1.htm">成功</a>
<div> 很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人</div>
</li>
<li><a href="/article/1570.htm"
title="[Velocity三]基于Servlet+Velocity的web应用" target="_blank">[Velocity三]基于Servlet+Velocity的web应用</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/velocity/1.htm">velocity</a>
<div>什么是VelocityViewServlet
使用org.apache.velocity.tools.view.VelocityViewServlet可以将Velocity集成到基于Servlet的web应用中，以Servlet+Velocity的方式实现web应用
Servlet + Velocity的一般步骤
1.自定义Servlet，实现VelocityViewServl</div>
</li>
<li><a href="/article/1697.htm"
title="【Kafka十二】关于Kafka是一个Commit Log Service" target="_blank">【Kafka十二】关于Kafka是一个Commit Log Service</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/service/1.htm">service</a>
<div>Kafka is a distributed, partitioned, replicated commit log service.这里的commit log如何理解？
A message is considered "committed" when all in sync replicas for that partition have applied i</div>
</li>
<li><a href="/article/1824.htm"
title="NGINX + LUA实现复杂的控制" target="_blank">NGINX + LUA实现复杂的控制</a>
<span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/lua+nginx+%E6%8E%A7%E5%88%B6/1.htm">lua nginx 控制</a>
<div>安装lua_nginx_module 模块
lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty
Centos和debian的安装就简单了。。
这里说下freebsd的安装：
fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz
tar zxvf lua-5.1.4.tar.gz
cd lua-5.1.4
ma</div>
</li>
<li><a href="/article/1951.htm"
title="java-14.输入一个已经按升序排序过的数组和一个数字， 在数组中查找两个数，使得它们的和正好是输入的那个数字" target="_blank">java-14.输入一个已经按升序排序过的数组和一个数字， 在数组中查找两个数，使得它们的和正好是输入的那个数字</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
public class TwoElementEqualSum {
/**
* 第 14 题：
题目：输入一个已经按升序排序过的数组和一个数字，
在数组中查找两个数，使得它们的和正好是输入的那个数字。
要求时间复杂度是 O(n) 。如果有多对数字的和等于输入的数字，输出任意一对即可。
例如输入数组 1 、 2 、 4 、 7 、 11 、 15 和数字 15 。由于 </div>
</li>
<li><a href="/article/2078.htm"
title="Netty源码学习-HttpChunkAggregator-HttpRequestEncoder-HttpResponseDecoder" target="_blank">Netty源码学习-HttpChunkAggregator-HttpRequestEncoder-HttpResponseDecoder</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>今天看Netty如何实现一个Http Server
org.jboss.netty.example.http.file.HttpStaticFileServerPipelineFactory：
pipeline.addLast("decoder", new HttpRequestDecoder());
pipeline.addLast(&quo</div>
</li>
<li><a href="/article/2205.htm"
title="java敏感词过虑-基于多叉树原理" target="_blank">java敏感词过虑-基于多叉树原理</a>
<span class="text-muted">cngolon</span>
<a class="tag" taget="_blank" href="/search/%E8%BF%9D%E7%A6%81%E8%AF%8D%E8%BF%87%E8%99%91/1.htm">违禁词过虑</a><a class="tag" taget="_blank" href="/search/%E6%9B%BF%E6%8D%A2%E8%BF%9D%E7%A6%81%E8%AF%8D/1.htm">替换违禁词</a><a class="tag" taget="_blank" href="/search/%E6%95%8F%E6%84%9F%E8%AF%8D%E8%BF%87%E8%99%91/1.htm">敏感词过虑</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E5%8F%89%E6%A0%91/1.htm">多叉树</a>
<div>基于多叉树的敏感词、关键词过滤的工具包，用于java中的敏感词过滤
1、工具包自带敏感词词库，第一次调用时读入词库，故第一次调用时间可能较长，在类加载后普通pc机上html过滤5000字在80毫秒左右，纯文本35毫秒左右。
2、如需自定义词库，将jar包考入WEB-INF工程的lib目录，在WEB-INF/classes目录下建一个
utf-8的words.dict文本文件，</div>
</li>
<li><a href="/article/2332.htm"
title="多线程知识" target="_blank">多线程知识</a>
<span class="text-muted">cuishikuan</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a>
<div>
T1，T2，T3三个线程工作顺序，按照T1，T2，T3依次进行
public class T1 implements Runnable{
@Override
</div>
</li>
<li><a href="/article/2459.htm"
title="spring整合activemq" target="_blank">spring整合activemq</a>
<span class="text-muted">dalan_123</span>
<a class="tag" taget="_blank" href="/search/java+spring+jms/1.htm">java spring jms</a>
<div>整合spring和activemq需要搞清楚如下的东东1、ConnectionFactory分： a、spring管理连接到activemq服务器的管理ConnectionFactory也即是所谓产生到jms服务器的链接 b、真正产生到JMS服务器链接的ConnectionFactory还得</div>
</li>
<li><a href="/article/2586.htm"
title="MySQL时间字段究竟使用INT还是DateTime？" target="_blank">MySQL时间字段究竟使用INT还是DateTime？</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>
环境：Windows XPPHP Version 5.2.9MySQL Server 5.1
第一步、创建一个表date_test（非定长、int时间）
CREATE TABLE `test`.`date_test` (`id` INT NOT NULL AUTO_INCREMENT ,`start_time` INT NOT NULL ,`some_content`</div>
</li>
<li><a href="/article/2713.htm"
title="Parcel: unable to marshal value" target="_blank">Parcel: unable to marshal value</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/marshal/1.htm">marshal</a>
<div>在两个activity直接传递List<xxInfo>时，出现Parcel: unable to marshal value异常。 在MainActivity页面（MainActivity页面向NextActivity页面传递一个List<xxInfo>）： Intent intent = new Intent(this, Next</div>
</li>
<li><a href="/article/2840.htm"
title="linux进程的查看上（ps）" target="_blank">linux进程的查看上（ps）</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/linux+ps/1.htm">linux ps</a><a class="tag" taget="_blank" href="/search/linux+ps+-l/1.htm">linux ps -l</a><a class="tag" taget="_blank" href="/search/linux+ps+aux/1.htm">linux ps aux</a>
<div>ps:将某个时间点的进程运行情况选取下来
转载请出自出处：http://eksliang.iteye.com/admin/blogs/2119469
http://eksliang.iteye.com
ps 这个命令的man page 不是很好查阅，因为很多不同的Unix都使用这儿ps来查阅进程的状态，为了要符合不同版本的需求，所以这个</div>
</li>
<li><a href="/article/2967.htm"
title="为什么第三方应用能早于System的app启动" target="_blank">为什么第三方应用能早于System的app启动</a>
<span class="text-muted">gqdy365</span>
<a class="tag" taget="_blank" href="/search/System/1.htm">System</a>
<div>Android应用的启动顺序网上有一大堆资料可以查阅了，这里就不细述了，这里不阐述ROM启动还有bootloader，软件启动的大致流程应该是启动kernel -> 运行servicemanager 把一些native的服务用命令启动起来（包括wifi, power, rild, surfaceflinger, mediaserver等等）-> 启动Dalivk中的第一个进程Zygot</div>
</li>
<li><a href="/article/3094.htm"
title="App Framework发送JSONP请求(3)" target="_blank">App Framework发送JSONP请求(3)</a>
<span class="text-muted">hw1287789687</span>
<a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/1.htm">跨域请求</a><a class="tag" taget="_blank" href="/search/%E5%8F%91%E9%80%81jsonp/1.htm">发送jsonp</a><a class="tag" taget="_blank" href="/search/ajax%E8%AF%B7%E6%B1%82/1.htm">ajax请求</a><a class="tag" taget="_blank" href="/search/%E8%B6%8A%E7%8B%B1%E8%AF%B7%E6%B1%82/1.htm">越狱请求</a>
<div>App Framework 中如何发送JSONP请求呢?
使用jsonp,详情请参考:http://json-p.org/
如何发送Ajax请求呢?
(1)登录
/***
* 会员登录
* @param username
* @param password
*/
var user_login=function(username,password){
// aler</div>
</li>
<li><a href="/article/3221.htm"
title="发福利，整理了一份关于“资源汇总”的汇总" target="_blank">发福利，整理了一份关于“资源汇总”的汇总</a>
<span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/%E8%B5%84%E6%BA%90/1.htm">资源</a>
<div>觉得有用的话，可以去github关注：https://github.com/justjavac/awesome-awesomeness-zh_CN 通用
free-programming-books-zh_CN 免费的计算机编程类中文书籍
精彩博客集合 hacke2/hacke2.github.io#2
ResumeSample 程序员简历</div>
</li>
<li><a href="/article/3348.htm"
title="用 Java 技术创建 RESTful Web 服务" target="_blank">用 Java 技术创建 RESTful Web 服务</a>
<span class="text-muted">macroli</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a>
<div>转载：http://www.ibm.com/developerworks/cn/web/wa-jaxrs/
JAX-RS (JSR-311) 【 Java API for RESTful Web Services 】是一种 Java™ API，可使 Java Restful 服务的开发变得迅速而轻松。这个 API 提供了一种基于注释的模型来描述分布式资源。注释被用来提供资源的位</div>
</li>
<li><a href="/article/3475.htm"
title="CentOS6.5-x86_64位下oracle11g的安装详细步骤及注意事项" target="_blank">CentOS6.5-x86_64位下oracle11g的安装详细步骤及注意事项</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>前言：
这两天项目要上线了，由我负责往服务器部署整个项目，因此首先要往服务器安装oracle，服务器本身是CentOS6.5的64位系统，安装的数据库版本是11g，在整个的安装过程中碰到很多的坑，不过最后还是通过各种途径解决并成功装上了。转别写篇博客来记录完整的安装过程以及在整个过程中的注意事项。希望对以后那些刚刚接触的菜鸟们能起到一定的帮助作用。
安装过程中可能遇到的问题（注</div>
</li>
<li><a href="/article/3602.htm"
title="HttpClient 4.3 设置keeplive 和 timeout 的方法" target="_blank">HttpClient 4.3 设置keeplive 和 timeout 的方法</a>
<span class="text-muted">supben</span>
<a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a>
<div>ConnectionKeepAliveStrategy kaStrategy = new DefaultConnectionKeepAliveStrategy() {
@Override
public long getKeepAliveDuration(HttpResponse response, HttpContext context) {
long keepAlive</div>
</li>
<li><a href="/article/3729.htm"
title="Spring 4.2新特性-@Import注解的升级" target="_blank">Spring 4.2新特性-@Import注解的升级</a>
<span class="text-muted">wiselyman</span>
<a class="tag" taget="_blank" href="/search/spring+4/1.htm">spring 4</a>
<div>3.1 @Import
@Import注解在4.2之前只支持导入配置类
在4.2,@Import注解支持导入普通的java类,并将其声明成一个bean
3.2 示例
演示java类
package com.wisely.spring4_2.imp;
public class DemoService {
public void doSomethin</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>
