出处：http://www.w3cplus.com/html5/html5-boilerplate.html
本文是根据HTML5 Boilerplate 官方文档所译，主要介绍了HTML5 Boilerplate的架构以及涉及到的相关知识。并且详细介绍了如何在基于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
404.html
index.html
no-js类
no-js 类可以让开发者依据 JavaScript 被启用（.js）或被禁止(.no-js)两种状态，更轻易准确地添加自定义样式。
使用这个技巧也有助于避免浏览器闪烁（FOUC）。
lang 属性
请认真考虑在 中添加 lang 属性，从而对页面内容所使用的语种加以说明，举例如下：
和 <meta> 标签的顺序</p>
<p>置顶 <title> 和 <meta> 标签的顺序意义重大，原因如下：</p>
<p>字符集声明（<meta charset="utf-8">）：</p>
<p>该声明必须完整地包含在文档内容最开始的 1024 字节中。<br>该声明应该尽早出现（早于可能被攻击者利用的任何内容，比如 <title> 元素）,以避免 IE 潜在的编码安全问题。<br>兼容模式的元标签（<meta http-equiv="x-ua-compatible" content="ie=edge">）：</p>
<p>除<title> 和其他 <meta> 标签外，该标签必须在其他标签之前声明。</p>
<p>x-ua-compatible</p>
<p>IE 8/9/10 支持文档兼容模式——该模式会对文档解析和页面渲染产生影响。因此，即使网站的访问者使用了 IE 9 或更高版本的浏览器，IE 也有可能不使用最新的渲染引擎，而会使用 IE 5.5 渲染引擎解析你的页面。</p>
<p>x-ua-compatible 元标签的详细内容如下：</p>
<p><meta http-equiv="x-ua-comptible" content="ie=edge"><br>此外，可以使用 HTTP 响应头信息 x-ua-comptible: ie=edge 来发送网页数据。这种方式将强制 IE 8/9/10 使用最新的可用模式来渲染页面，即使某些情况下并不适合使用该模式。因此，要确保浏览该网站的所有浏览器，都尽可能提供最佳的用户体验。</p>
<p>如有可能，我们建议移除 meta 标签，而只发送 HTTP 响应头信息。这么做的原因是，如果你的网站运行在非标准的端口上， IE 默认会 “在兼容性视图下显示内部网站”，而此时 meta 标签就不会起作用了。</p>
<p>如果你正在使用 Apache 作为网络服务器，那么可以使用 .htaccess 文件来配置 HTTP 响应头信息。如果是其他网络服务器，可以点击这里查看其他服务器配置信息。</p>
<p>从 IE 11 开始，文档模式已经被弃用了。如果你的业务仍然依赖于陈旧的网页应用，或者你的业务就是为老版本 IE 设计的，那么可以考虑在全公司使用 企业版模式（Enterprise Mode）。</p>
<p>移动端视图</p>
<p>使用 viewport 元标签时有些许不同。更多信息详见苹果开发者文档。HTML5 Boilerplate 初始化了一些简单的设置，希望在多种使用情境下取得良好平衡。</p>
<p><meta name="viewport" content="width=device-width, initial-scale=1"><br>Favicons 和 Touch Icon</p>
<p>整站的快捷方式图标应该存放在根目录。HTML5 Boilerplate 默认提供了一组图标（包括 favicon 和 Apple Touch Icon）,为开发者提供设计参考。</p>
<p>Modernizr</p>
<p>HTML5 Boilerplate 使用了一份自定义的 Modernizr。众所周知，Modernizr 是一个 JavaScript 库，作用是确保所有浏览器都可以使用 HTML 5 元素（它包含了 HTML 5 shiv），同时还会根据功能检测的结果为 html 元素添加不同的类名。便于开发者明确某个浏览器所支持的 CSS 和 JavaScript 特性。</p>
<p>通常来说，为了最大程度地减少页面加载时间，最好的方式是在页面底部调用 JavaScript，以此避免加载外部脚本的过程阻塞整个网页的渲染和解析进度。但是，Modernizr 脚本应该在浏览器渲染页面前就加载执行，这样才能让浏览器正确处理尚未支持的 HTML5 元素。因此，Modernizr 脚本应该是唯一可以在文档头部加载的 JavaScript 脚本。</p>
<p>腻子脚本</p>
<p>如果你需要在项目中加载 腻子脚本（polyfills） ，那么你必须确保腻子脚本在其他 JavaScript 之前加载。如果你正在使用类似cdn.polyfill.io的 ployfill CDN 服务，只需在页面底部将其放在其他脚本之前即可。</p>
<p><script src="//cdn.polyfill.io/v1/polyfill.min.js"></script><br><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><br><script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script><br><script src="js/plugins.js"></script><br><script src="js/main.js"></script><br>如果只是想方便自己使用腻子脚本，可以将它们包含到 js/plugins.js 中。当你有了一堆腻子脚本需要加载时，可以在 js/vendor 文件夹创建一个 polyfills.js 文件。当然使用这个技巧也要注意，确保腻子脚本在其他 JavaScript 脚本前完全加载。</p>
<p>有些人对于 Modernizr 和腻子脚本的认知存在一些误区。正确理解 Modernizr 很重要：它只进行功能检测而不执行功能修复。Modernizr 唯一关注的修复工作，是有关跨浏览器方面腻子脚本的冗长列表。</p>
<p>内容区</p>
<p>HTML5 Boilerplate 模版的内容基本是空的。这么做是有意而为的，以方便 Boilerplate 模版同时适配网页（web page）和网页应用（web app）的开发。</p>
<p>浏览器升级提示</p>
<p>Boilerplate 的内容区包含了一条提示，建议 IE 6/7 的用户安装最新版本浏览器。如果你打算支持 IE 6/7，那么你需要移除相关代码。</p>
<p>由 Google CDN 分发的 jQuery</p>
<p>Google CDN 提供的 jQuery ，使用 protocol-independent 路径放置在了页面底部。此外还设置了一个本地的 jQuery 版本，从而在 CDN 版本不可用或启用离线版本的时候调用。</p>
<p>Google CDN 的版本之所以能从众多的可选版本（比如 jQuery CDN）脱颖而出，一方面是因为它响应速度快，另一方则是因为它具有最佳的穿透力（获取的成功率），这有助于提高将库文件传输到用户浏览器缓存的成功率。</p>
<p>虽然 Google CDN 是模版中开发网页和应用默认的分发网络，但你可能还需要做进一步的配置。你可以使用类似 WebPageTest 的服务和类似 PageSpeed Insights 或 YSlow 的浏览器工具测试网站，这有助于帮你测试网站的实际表现，并且指出特定网页或应用有待优化的地方。</p>
<p>谷歌分析代码</p>
<p>最后，是一段谷歌分析代码。谷歌建议将该脚本置于文档头部。其考虑如下：如果将该脚本置于网页头部，那么即使页面未完全加载，也可以统计用户访问量，并且可以激发浏览器的最大并发连接数。</p>
<p>更多信息请参考：</p>
<p>谷歌通用分析代码优化<br>Analytics.js 入门<br>谷歌分析示例和工具<br>注意：之所以默认包含谷歌分析代码，是因为谷歌分析是当前最流行的追踪解决方案之一。然而，它的用法并不是一成不变的，你应该查看可替代方案，以选择最适合自己的。</p>
<p>CSS 解析</p>
<p>模版中默认的 CSS 文件并不依赖 conditional class names，conditional style sheets，或 Modernizr 的表现效果，尽可以放心按自己的偏好放手去干。</p>
<p>Normalize.css</p>
<p>为了确保所有浏览器的渲染效果更加一致且符合标准，我们引入了 Normalize.css——这是一个现代化、紧密结合 HTML 5 的可选方案，可以用来实现浏览器的 CSS 重置。</p>
<p>Normalize.css 本质上并不是重置 CSS：</p>
<p>只处理需要标准化修正的样式<br>保留浏览器已有的默认样式，而不是全盘替换它们<br>修正浏览器的缺陷和常见性差异<br>通过细微的改进提高可用性<br>不干扰调试工具<br>拥有良好的开发文档<br>更多详情请参考项目网站，或者博客文章。</p>
<p>默认样式</p>
<p>基于 Normalize.css，编写了一些基础的样式，具体如下：</p>
<p>提供了基础的排版样式，以改善文本可读性<br>文本高亮时，默认取消 text-shadow<br>修改了一些元素默认的对齐方式，比如: img，video，fieldset，textarea<br>修改了老版本浏览器的提示符样式<br>非常激励开发者根据实际需求和添加样式到默认样式中版。</p>
<p>通用样式</p>
<p>在基础样式之外，我们也提供了一些通用的辅助样式。</p>
<p>.hidden</p>
<p>如果你想在视觉上隐藏任何元素，或是对屏幕阅读器屏蔽某个元素的内容，那么都可以为其添加 hidden 样式。这些元素可以是后续填充或显示的，也可以是使用 JavaScript 隐藏的。</p>
<p>.visuallyhidden</p>
<p>如果你想在视觉上隐藏任何元素，那么可以为其添加 .visuallyhidden 样式，但此时屏幕阅读器仍然可以识别它。</p>
<p>更多信息可参考：</p>
<p>CSS in Action: Invisible Content Just for Screen Reader Users<br>Hiding content for accessibility<br>HTML5 Boilerplate - Issue #194<br>.invisible</p>
<p>如果你想在视觉上隐藏任何元素，或是对屏幕阅读器屏蔽某个元素的内容，那么都可以为其添加 .invisible 样式，但这种方式并不会影响页面布局。</p>
<p>与 hidden 样式从布局中移除元素的方式不同，invisible 样式只会让元素不可见，不会影响其在文档流中的位置，也不会影响其附近元素的位置。</p>
<p>注意：绝不应该使用上述样式进行关键字堆彻，那必将有损网站在搜索引擎中的排名。</p>
<p>.clearfix</p>
<p>给任何元素添加 clearfix 样式，可以确保它始终包裹浮动的子元素。</p>
<p>过去几年，出现了 clearfix hack 的多种变体，但在这里，我们使用 micro clearfix。</p>
<p>媒体查询</p>
<p>使用 HTML5 Boilerplate 可以很轻松地进行 移动优先 和 响应式设计 的开发。但有必要提醒的是，这里面没有银弹（引申含义：具有极端有效性的解决方法）。</p>
<p>我们插入了媒体查询的语句，帮助你构建宽幅和高分辨率的移动样式。建议根据网站内容调节断点，而不是简单参考具体设备的固定尺寸。</p>
<p>如果并不需要注重移动优先原则，那么你也可以修改或移除媒体查询的语句。当视窗宽度确定下来后，你可以使用 max-width 来替代固定尺寸，比如这样来编写：@media only screen and (max-width: 480px)。</p>
<p>更多有关移动开发的信息，请看 Mobile Boilerplate。</p>
<p>印刷样式</p>
<p>最后，我们提供了一些有用的印刷样式，以优化印刷流程，同时还可以提高印刷品的可读性。</p>
<p>印刷时，这些样式会：</p>
<p>去除所有背景色，将字体颜色改为黑色，移除 text-shadow——以节省印刷颜料并加快印刷进程。<br>为链接添加下划线并附加 URL 地址——以方便用户了解具体的引用地址。不过有两种例外：片段标示符（比如 #href） 和 javascript: 伪协议)。<br>展开缩写，方便用户了解缩写的具体含义。<br>指定了浏览器的分页方式，以及分页时页面顶部和底部的最少行数。所有支持该属性的浏览器都会有如下解析：<br>确保表格在每个分页都有表头（<thead>）<br>防止块引用、预格式文本、图片和表格分页时被截断而进入不同页面。<br>除相关页面外，确保标题不会出现在其他页面<br>确保 orphans and widows 属性不会出现在印刷品上。<br>该印刷样式与其他 CSS 样式被包裹在了一起，以减少 HTTP 请求。同样，它们应该始终被置于样式表的尾部，方便覆盖其他样式。</p>
<p>JS 解析</p>
<p>main.js</p>
<p>该文件可以用来包含或引用网站/应用程序内的 JavaScript 代码。对于大型项目，可以使用一个类似 Require.js 的模块加载器，以方便加载其他脚本。</p>
<p>plugins.js</p>
<p>该文件可以用来包含所有的插件，比如 jQuery 插件和其他第三方插件。</p>
<p>这里面的一个技巧是，将 jQuery 插件放入 (function($){ ...})(jQuery); 闭包中，确保它们安全地处于 jQuery 命名空间下。更多信息请参考 jQuery 插件开发文档。</p>
<p>plugins.js 文件默认保存了一小段代码，防止浏览器禁用 console 而引发的 console 错误。如果控制台方法不可用，那么这段代码将确保相应的方法为空函数值，由此，防止浏览器报错。</p>
<p>vendor</p>
<p>该目录可以用来保存所有的第三方库。最新的 jQuery 和 Modernizr 压缩版本就默认保存在这里。</p>
<p>扩展和定制</p>
<p>这里是优化 HTML5 Boilerplate 主题的一些建议。因为并不是所有的特性都适合具体的需求，所以我们没有默认导入这些特性。</p>
<p>App Stores</p>
<p>安装 Chrome 插件</p>
<p>用户可以直接从网站安装 Chrome 应用，前提是该应用已经通过谷歌的网络管理工具接驳了网站。更多信息详见内置 Chrome 商店的开发文档。</p>
<p><link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID"><br>iOS 6+ Safari 中的 Smart App Banners</p>
<p>不用再向用户介绍复杂的方式进入 App Store 获取相关的应用程序了。引用下面的元标签，将会给用户提供更友好的方式下载你的 iOS App，或者用来用户的当前状态优化网站体验。</p>
<p><meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT"><br>DNS 预加载</p>
<p>简而言之，DNS 预加载是告知浏览器当前网站域名的一种方法，这样一来客户端才能解析拥有该 DNS 的主机，缓存这些网站，当再次需要使用时，请求速度就会更快。</p>
<p>隐式预加载</p>
<p>浏览器会自动为用户预加载诸多信息。当浏览器在 html 中检测到一个链接标签时，并不会分配给它浏览器当前请求的域名，而是从客户端系统，根据 IP 地址分配域名。客户端首先检测缓存，如果缓存中不存在，则从 DNS 服务器发送请求。这些请求发生在后台，并不会阻塞页面渲染进程。</p>
<p>采用这种方式，可以让需要的外部 IP 地址预加载到客户端缓存中，同时又不会阻塞外部内容的加载。请求越少，则页面渲染越快。在移动端这种感觉会更明显，因为移动端的延迟更强烈。</p>
<p>禁用隐式预加载</p>
<p><meta http-equiv="x-dns-prefetch-control" content="off"><br>即使禁用 X-DNS-Prefetch-Control 元标签或者 HTTP 头信息，浏览器也会预加载所有显式的 dns-prefetch 链接。</p>
<p>注意：如果你的网站依赖于外部域名的资源，那么这种做法将会降低加载速度。</p>
<p>显式预加载</p>
<p>通常，浏览器扫描 html 只会预加载外部域名。如果所需资源在当前 html 之外（比如说，需要请求一个远程服务器的 javascript，或是需要一个存储了所有网页信息的 CDN）， 那么你就可以将需要预加载的域名全部列出来。</p>
<p><link rel="dns-prefetch" href="//example.com"><br><link rel="dns-prefetch" href="//ajax.googleapis.com"><br>如果有很多外部域名需要请求，建议使用上述方式。如果能够将它们编写在Meta Charset 元素之后就更棒了，这样浏览器将会尽快加载它们。</p>
<p>常用预加载链接</p>
<p>Amazon S3:</p>
<p><link rel="dns-prefetch" href="//s3.amazonaws.com"><br>Google APIs:</p>
<p><link rel="dns-prefetch" href="//ajax.googleapis.com"><br>Microsoft Ajax Content Delivery Network:</p>
<p><link rel="dns-prefetch" href="//ajax.microsoft.com"><br><link rel="dns-prefetch" href="//ajax.aspnetcdn.com"><br>更多 DNS 预加载信息请参考：</p>
<p>https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching<br>https://dev.chromium.org/developers/design-documents/dns-prefetching<br>http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx<br>http://dayofjs.com/videos/22158462/web-browsers_alex-russel<br>谷歌通用分析</p>
<p>更多追踪设置</p>
<p>HTML5 Boilerplate 内部优化过的谷歌通用分析代码段optimized Google Universal Analytics snippet的内容大致如下：</p>
<p>ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview');<br>如果想要进一步修改，可以查看谷歌的高级设置， Pageview，和 Event 开发文档。</p>
<p>隐藏 IP 地址</p>
<p>在某些国家，如果两个司法管辖区之间没有相同严厉的法律，那么个人信息就不允许在相互间传递，比如从德国向欧盟之外传送。因此，网络管理员需要确保使用谷歌通用分析时，不能将个人信息从德国传到美国。开发者可以在发送 events/pageviews 前，设置 ga('set', 'anonymizeIp', true);。</p>
<p>ga('create', 'UA-XXXXX-X', 'auto');<br>ga('set', 'anonymizeIp', true);<br>ga('send', 'pageview');<br>追踪 jQuery AJAX 请求</p>
<p>这里有一篇来自 Jango Steve 的文章，介绍了如何在谷歌分析中追踪 jQuery AJAX 请求。</p>
<p>在 plugins.js 中添加如下代码：</p>
<p>/*</p>
<ul>
<li><p>Log all jQuery AJAX requests to Google Analytics</p></li>
<li><p>See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/<br>*/</p></li>
</ul>
<p>if (typeof ga !== "undefined" && ga !== null) {</p>
<pre><code>$(document).ajaxSend(function(event, xhr, settings){
ga('send', 'pageview', settings.url);
});</code></pre>
<p>}<br>追踪 JavaScript 错误</p>
<p>在 ga 定义之后，添加如下函数：</p>
<p>(function(window){<br> var undefined,</p>
<pre><code> link = function (href) {
var a = window.document.createElement('a');
a.href = href;
return a;
};</code></pre>
<p>window.onerror = function (message, file, line, column) {</p>
<pre><code> var host = link(file).hostname;
ga('send', {
'hitType': 'event',
'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
'eventAction': message,
'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(),
'nonInteraction': 1
});</code></pre>
<p>};<br>}(window));<br>追踪页面滚动</p>
<p>在 ga 定义之后，添加如下函数：</p>
<p>$(function(){</p>
<pre><code>var isDuplicateScrollEvent,
scrollTimeStart = new Date,
$window = $(window),
$document = $(document),
scrollPercent;
$window.scroll(function() {
scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
isDuplicateScrollEvent = 1;
ga('send', 'event', 'scroll',
'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's'
);
}
});</code></pre>
<p>});<br>Internet Explorer</p>
<p>在 IE 10 中提示用户切换到“桌面模式”</p>
<p>在 Metro 模式下，IE 10 并不支持插件，比如 Flash。如果你的网站需要使用插件，那么可以使用 x-ua-comptible 元标签，提醒用户切换到桌面模式。</p>
<p><meta http-equiv="x-ua-comptible" content="requiresActiveX=true"><br>下面是 HTML5 Boilerplate 中 x-ua-comptible 的默认值：</p>
<p><meta http-equiv="x-ua-comptible" content="ie=edge,requiresActiveX=true"><br>更多信息请参考 Microsoft's IEBlog post about prompting for plugin use in IE10 Metro Mode。</p>
<p>IE 9+ 固定网站</p>
<p>如果启用了固定功能，那么 IE 9 的用户就可以将应用程序添加到任务栏或者开始菜单。这一功能也带来了一系列的工具，方便用户对元素进行个性化配置。更多信息请参考 documentation on IE9 Pinned Sites。</p>
<p>为固定的网站命名</p>
<p>如果不使用这条标签，Windows 将会使用页面标题作为应用程序的标题。</p>
<p><meta name="application-name" content="Sample Title"><br>为固定的网站添加提示</p>
<p>如你所知，这里讲的是一个提示工具。当用户将鼠标悬停在固定网站的图标上边时，就会出现一个预览窗口。</p>
<p><meta name="msapplication-tooltip" content="A description of what this site does."><br>为固定的网站设置默认页面</p>
<p>如果当网站固定时需要制定一个特定的 URL（比如首页），那就在这里设置。一个好的想法是让固定网站发送特别编写的 URL，这样开发者就可以追踪到有多少用户使用了固定网站，就像下面这样：</p>
<p><meta name="msapplication-starturl" content="http://www.example.com/index.html?pinned=true"><br>自定义 IE 的控制按钮色彩</p>
<p>IE 9+ 会自动使用固定网站图标的颜色，给浏览器按钮添加相应的阴影颜色。除非开发者自定义其他色彩，同时自定义色彩只能使用颜色关键字 (red) 和十六进制色彩 (#ff0000)。</p>
<p><meta name="msapplication-navbutton-color" content="#ff0000"><br>自定义窗口大小</p>
<p>如果固定网站打开时需要使用确定的大小，那么可以在这里自定义尺寸。该功能只支持静态的像素尺寸，且最小为 800x600。</p>
<p><meta name="msapplication-window" content="width=800;height=600"><br>添加跳转列表</p>
<p>开发者可以给固定网站添加跳转列表，当鼠标点击右键时，就可以快速显示跳转列表了。每个列表项都指向特定的 URL，并拥有自己的图标（通常为 16x16 的图标）。开发者可以添加任意数量的列表项。</p>
<p><meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"><br><meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"><br>（Windows 8)高级质量视觉效果</p>
<p>Windows 8 允许开发者提供一张 PNG 瓷贴图片，也允许自定义瓷贴的背景色。Full details on the IE blog。</p>
<p>为网站创建一个 144x144 分辨率的图标，将其填充满整个画布，再将其背景色改为透明。<br>将图片保存为 32-bit PNG 格式，同时在不降低画质的前提下进行优化处理。然后重命名为任何你希望的名字，比如 metro-tile.png。<br>可以在 IE 博文中添加 HTML meta 元素引用瓷贴及其颜色。<br>Windows 8 固定网站的信息识别</p>
<p>IE 10 可以通过轮询网站的 XML 文档识别主要信息，继而将其展示在首屏的应用图标上。这样即使用户没有打开应用，也可以接受更新的信息。该识别值可以是数字，也可以是预定义符号列表中的一个。</p>
<p>Tutorial on IEBlog with link to badge XML schema<br>Available badge values<br><meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://www.example.com/path/to/file.xml"><br>在 IE 10 中禁用点击时链接的高亮效果</p>
<p>这非常类似于 iOS Safari 中的 -webkit-tap-highlight-color。但与这个 CSS 属性有所区别的是，这里使用的是一个 HTML 元标签，并且是一个布尔值而不是颜色值。使用这个功能就会对全体使用或禁用。</p>
<p><meta name="msapplication-tap-highlight" content="no" /><br>更多帮助信息和技巧，请参考 Microsoft's documentation on adapting WebKit-oriented apps for IE10。</p>
<p>搜索</p>
<p>为搜索引擎蜘蛛设置 sitemap</p>
<p>了解如何创建 sitemap。</p>
<p><link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml"><br>对搜索引擎屏蔽页面</p>
<p>根据 FLickr 前社区经理 Heather Champ 的看法，如果你足够理智，那么就不应该允许搜索引擎检索 “联系” 和 “投诉” 页面。</p>
<p><meta name="robots" content="noindex"><br>提醒：不应该在页面中出现展示给搜索引擎的信息。</p>
<p>Firefox 和 IE 搜索插件</p>
<p>内置搜索功能的网站，可以考虑使用浏览器搜索插件提高性能。“搜索插件” 本质上就是一个 XML 文件，它定义了插件于浏览器的信息交互行为。How to make a browser search plugin。</p>
<p><link rel="search" title="" type="application/opensearchdescription+xml" href=""><br>其他参数</p>
<p>使用polyfills。<br>通过 microdata 使用 Microformats 优化搜索结果的准确性。<br>如果你正在构建一个网页应用，那么你可能会考虑在 iOS 5+ 中滚动时，通过-webkit-overflow-scrolling: touch 调用本地样式。<br>如果想要屏蔽 Chrome 的翻译提示，或在网页中的禁用 Google 翻译，那么可以使用 <meta name="google" value="notranslate">。如果只是在某一个部分禁用翻译，那么可以添加 class="notranslate"。<br>如果想在 iOS 中，禁用 Safari 对手机号的自动检测和格式化功能，那么可以使用 <meta name="format-detection" content="telephone=no">。<br>可以通过使用 implementing X-Robots-tag headers，避免开发阶段的网站被搜索引擎抓取。<br>当前的屏幕阅读器对 HTML5 的支持还不是很好，建议通过使用 accessifyhtml5.js 给 HTML5 元素添加 ARIA roles 增强无障碍使用体验。<br>订阅</p>
<p>RSS</p>
<p>需要一个 RSS 订阅？请看这里的教程。learn how to write an RSS feed from scratch。</p>
<p><link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"><br>Atom</p>
<p>Atom 和 RSS 非常类似，你可能会很中意它，那么看看 Atom 的文档吧。</p>
<p><link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml"><br>Pingbacks</p>
<p>当其他网站链接到你的网站时，你的服务器可能会收到通知。该 href 属性需要包含你在 pingback 上的服务地址。</p>
<p><link rel="pingback" href=""><br>更多信息</p>
<p>High-level explanation<br>Step-by-step example case<br>PHP pingback service<br>社交网络</p>
<p>Facebook 图谱</p>
<p>当用户分享当前站点时，开发者可以设置其分享到 Facebook 或其他社交网络的信息内容。以下就是开发者需要的最基本信息。更多具体的内容类型，请参考 Facebook's built-in Open Graph content templates。如果想要使用 Facebook 支持的高级特性，可以参考Open Graph tutorial。</p>
<p><meta property="og:title" content=""><br><meta property="og:description" content=""><br><meta property="og:image" content=""><br>Twitter 卡贴</p>
<p>Twitter 卡贴提供了类似 Facebook 图谱的功能。实际上，当卡贴不能使用时，Twitter 也会使用类似图谱的功能。注意，对于这种方式，Twitter 要求开发者在每个基本域名上都激活卡贴功能。更多格式和应用处理方式，请参考 official Twitter Cards documentation。</p>
<p><meta name="twitter:card" content="summary"><br><meta name="twitter:site" content="@site_account"><br><meta name="twitter:creator" content="@individual_account"><br><meta name="twitter:url" content="http://www.example.com/path/to/page.html"><br><meta name="twitter:title" content=""><br><meta name="twitter:description" content=""><br><meta name="twitter:image" content="http://www.example.com/path/to/image.jpg"><br>URL</p>
<p>Canonical URL</p>
<p>通过在 URL 后面追加参数 # 或 ? 来显示页面状态，对浏览器或其他使用者都会有所帮助。http://www.example.com/cart.html?shopping-cart-open=true 就可以比 http://www.example.com/cart.html 更精确地定义页面。</p>
<p><link rel="canonical" href=""><br>Official shortlink</p>
<p>向搜索引擎或该网站的使用者提示“这是本网站的短地址”，这种方式已经不被支持。更多信息请参考 article about shortlinks onthe Microformats wiki。</p>
<p><link rel="shortlink" href="h5bp.com"><br>独立的移动端地址</p>
<p>如果在桌面端和移动端分别使用独立的 URLs，那么就要考虑好如何让搜索引擎算法更好地解析网站的配置信息。</p>
<p>在 HTML 页面中添加如下注释会对此有所帮助：</p>
<p>对于桌面端网页，添加 link rel="alternate" 标签指向相关的移动端地址，比如 <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html" >。<br>对于移动端网页，添加 link rel="canonical" 标签指向相关的桌面端地址，比如 <link rel="canonical" href="http://www.example.com/page.html">。<br>更多信息请参考：</p>
<p>https://developers.google.com/webmasters/smartphone-sites/details#separateurls<br>https://developers.google.com/webmasters/smartphone-sites/feature-phones<br>网页应用</p>
<p>当网页应用在 iOS 中被添加到桌面后，可以使用如下标签获取信息：</p>
<p>使用 apple-mobile-web-app-capable，可以减少网页应用对 Chrome 的依赖，并提供 IOS App 的视图支持。可以通过使用 apple-mobile-web-app-status-bar-style，控制默认视图的色彩模式。</p>
<p><meta name="apple-mobile-web-app-capable" content="yes"><br><meta name="apple-mobile-web-app-status-bar-style" content="black"><br>使用 apple-mobile-web-app-title，可以为桌面图标重命名。该功能支持 iOS 6+。</p>
<p><meta name="apple-mobile-web-app-title" content=""><br>更多信息请参考苹果官方文档。</p>
<p>Apple Touch Icons</p>
<p>Apple Touch Icons 相当于 iOS 设备的桌面图标。Apple Touch Icons 的主要尺寸如下：</p>
<p>57×57px – iPhone with @1x display and iPod Touch<br>72×72px – iPad and iPad mini with @1x display running iOS ≤ 6<br>76×76px – iPad and iPad mini with @1x display running iOS ≥ 7<br>114×114px – iPhone with @2x display running iOS ≤ 6<br>120×120px – iPhone with @2x and @3x display running iOS ≥ 7<br>144×144px – iPad and iPad mini with @2x display running iOS ≤ 6<br>152×152px – iPad and iPad mini with @2x display running iOS 7<br>180×180px – iPad and iPad mini with @2x display running iOS 8<br>显示尺寸含义：</p>
<p>@1x - non-Retina<br>@2x - Retina<br>@3x - Retina HD<br>更多有关 iOS 设备的显示信息，请参考 List of iOS devices display。</p>
<p>大多数情况下，可以使用 180×180px 大小的图标，命名为 apple-touch-icon.png 后包含在页面的 <head> 即可：</p>
<p><link rel="apple-touch-icon" href="apple-touch-icon.png"><br>如果希望每个设备有不同的内容，那么可以添加多个 Apple Touch Icons。更多信息情参考 article on Touch Icons。</p>
<p>Apple Touch Startup Image</p>
<p>除此之外，可以给 iOS 上的网页应用添加启动界面。该功能需要使用 apple-touch-startup-image，并附加相关的图片链接。由于 iOS 应用于多种尺寸的屏幕下，所以有必要使用媒体查检测尺寸，然后再加载图片。这里是一个在 retina iPhone 的示例：</p>
<p><link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup-retina.png"><br>不过，该功能可能需要使用 JavaScript 检测启动界面的图片。Mobile Boilerplate 提供了一个有效地功能来解决这个问题，请参考helpers.js 的实现方法。</p>
<p>Chrome Mobile web apps</p>
<p>Chrome 移动端拥有一个专有的元标签，用来在桌面安装网页应用，该标签比苹果的属性属性标签更具有通用性。</p>
<p><meta name="mobile-web-app-capable" content="yes"><br>同样适用于 touch icons:</p>
<p><link rel="icon" sizes="192x192" href="highres-icon.png"><br>其他</p>
<p>.gitignore</p>
<p>HTML5 Boilerplate 引入了一个基础性的、项目级的 .gitignore。主要用来让源代码忽略对项目中特定文件和目录的管理。在不同的开发环境使用不同的忽略列表，将会大有裨益。</p>
<p>特定系统和特定编辑器的文件应该使用 “global ignore” ，从而忽略系统中所有库对相关文件的依赖。</p>
<p>比如，在希望全局忽略的 HOME 目录，将如下内容放入 .gitignore 文件。</p>
<p>[core]<br> excludesfile = ~/.gitignore<br>更多信息请参考：</p>
<p>More on global ignores: https://help.github.com/articles/ignoring-files<br>Comprehensive set of ignores on GitHub: https://github.com/github/gitignore<br>.editorconfig</p>
<p>.editorconfig 文件用来激励和帮助开发者/开发团队，在不同的编辑器和 IDE 下，定义和维护一致性的代码风格。</p>
<p>默认情况下，.editorconfig 包含了一些基本属性，用来体现代码风格，但是开发者可以根据需求自定义相关属性。</p>
<p>为了让编辑器、IDE 更好的使用 .editorconfig 配置文件，开发者需要安装一个插件。</p>
<p>注意：如果你不需要使用 HTML5 Boilerplate 提供的服务器配置，我们强烈建议不要允许你服务器使用 .editorconfig 文件，因为该文件会屏蔽敏感信息。</p>
<p>更多信息请参考 EditorConfig project。</p>
<p>服务器配置</p>
<p>HTML5 Boilerplate 为 Apache HTTP 服务器配置了 .htaccess 文件。如果不是使用 Apache 服务器，建议下载 server configuration 并适配所用服务器。</p>
<p>Servers and Stacks</p>
<p>介绍 WEB 服务器和堆栈的内容就远远超过了本文档的范围，但这里有一些常用的资料：</p>
<p>Apache HTTP Server<br>LAMP (Linux, Apache, MySQL, and PHP). Other variants include MAMP, WAMP, or XAMPP.<br>LAPP uses PostgreSQL instead of MySQL<br>Nginx<br>LEMP is similar to the LAMP stack but uses Nginx<br>IIS<br>ASP.NET<br>MEAN (MongoDB, Express, AngularJS, Node.js)<br>.htaccess</p>
<p>.htaccess（超文本存取）文件就是Apache HTTP 服务器的配置文件。常用于：</p>
<p>Rewriting URLs<br>Controlling cache<br>Authentication<br>Server-side includes<br>Redirects<br>Gzipping<br>如果你使用过主流服务器的配置文件（通常称为 httpd.conf），那么你应该熟悉往 .htaccess 文件中添加逻辑处理。比如， 部分位于主要的配置文件中。因为 .htaccess 文件会拖慢 Apache，所以通常建议这么做。</p>
<p>为了启用本地的 Apache 模块，请参考这里。</p>
<p>.htaccess 主要用于：</p>
<p>允许跨源请求 web 字体<br>当浏览器请求图片时，使用跨域资源共享头<br>将 404.html 作为 404 错误文档<br>为 IE 用户提供更好的用户体验<br>将 UTF-8 作为 text/html 和 text/plain 的字符编码<br>启用 URLs 重写引擎<br>强制或移除 URL 开头的 www.<br>缺少默认文档时阻塞对目录的调用<br>隔离文件访问，防止敏感信息泄露<br>降低了 MIME 类型的安全风险<br>强制压缩<br>通知浏览器是否需要从服务器请求特定文件，或者是否需要从浏览器缓存获取特定文件<br>当使用 .htaccess 时，我们建议阅读一次所有的内部注释。其中有一些是可选的。</p>
<p>更多有关 .htaccess 文件的信息请参考这里。</p>
<p>注意，.htaccess 的源库在这里。</p>
<p>crossdomain.xml</p>
<p>跨域策略文件是一个 XML 文档，其内容来自 web 客户端（比如，Adobe Flash Player, Adobe Reader），可以允许处理来自多个域名的数据：</p>
<p>授权读取数据<br>允许客户端在跨域请求中导入自定义的头部信息<br>授权许可基本的套接字连接<br>注意：如果一个客户端从一个特定的源域名获取内容，然后该内容请求重定向其他域名，那么远程域名就需要使用跨域策略文件，从而获得源域名的授权，最终允许客户端继续处理相关事务。</p>
<p>更多信息请参考 cross-domain policy file specification。</p>
<p>robots.txt</p>
<p>robots.txt 文件用来告知搜索引擎网站中可以抓取的页面。</p>
<p>默认情况下，文件中包含下面两行信息：</p>
<p>User-agent: * - 以下规则适用于所有的搜索引擎<br>Disallow: - 网站中的所有页面都可以被抓取<br>如果想屏蔽某些页面，那么你需要在 Disallow 参数后面做出具体声明（比如: Disallow: /path）。如果你想屏蔽所有内容，只需 Disallow: /。</p>
<p>/robots.txt 并不是用来访问控制的，所以请不要这样使用。可以将其视为一个 “禁止通行” 标志，而不是一扇锁上的门。通过 robots.txt 文件屏蔽 URLs，即使未被抓取仍有可能被定位，而且 robots.txt 文件中的内容也可以被任何人访问到，这样就间接透漏了私有内容的位置。所以，如果想屏蔽访问私人信息，建议使用合理的验证机制。</p>
<p>关于 /robots.txt 文件的更多信息请参考：</p>
<p>robotstxt.org<br>How Google handles the robots.txt file<br>browserconfig.xml</p>
<p>用户在 Windows 8.1 启动界面固定的应用图标，可以通过 browserconfig.xml 文件进行个性化定制。在该文件中，可以自定义瓷贴颜色、图片，甚至是动态瓷贴。</p>
<p>默认情况下，该文件指向两个既有的瓷贴图片：</p>
<p>tile.png (558x558px): used for Small, Medium and Large tiles.如有必要该图片可以自动修改尺寸。<br>tile-wide.png (558x270px): user for Wide tiles.<br>注意，当收藏网站时，IE 11 将收藏夹中使用相同的图片。</p>
<p>有关 browserconfig.xml 文件的跟多信息，请参考 MSDN。</p>
<p>FAQ</p>
<p>为什么 jQuery 的链接没有加http？</p>
<p>这是因为使用了 protocol-relative URLs。</p>
<p>注意:如果你尝试直接在浏览器中预览本地网页，那么浏览器将无法加载资源，特别是使用 protocol-relative URLs，因为它会尝试从本地文件系统获取相关资源。建议使用本地的 HTTP 服务器，或者是允许在线预览网页的文件托管服务（比如Dropbox）来测试网页。</p>
<p>建立本地 HTTP 服务器可以使用多种短命令：</p>
<p>PHP 5.4.0+ 使用 php -S localhost:8080 命令从本地目录启动并运行。<br>Python 2.x 使用 python -m SimpleHTTPServer 命令从本地目录启动并运行。<br>Python 3.x 使用 python -m http.server 命令从本地目录启动并运行。<br>Ruby 1.9.2+ 使用 ruby -run -ehttpd . -p8080 命令从本地目录启动并运行。<br>Node.js 使用 static -p 8080 或 http-server -p 8080 命令安装和启动服务器。<br>为什么不从 Google CDN 自动加载最新版本的 jQuery？</p>
<p>首先，Google CDN 所指向的 jQuery 文件已不再更新，并且将锁定在1.11.1版本，以防止新版本变动引发的网页脚本失效。</p>
<p>其次，通常来说，更新版本应该是个慎重的决定！网页中不应该一直引用最新版本的原因如下：</p>
<p>可能与现有插件、代码不兼容<br>与固定引用某一版本的方式相比，一直引用最新版本将会减少本地缓存时间，这意味着用户无法受益于长周期缓存带来的便利。<br>为什么将 Google Analytics 代码置于网页底部？而 Google 则建议将其置于<head>。</p>
<p>将其置于<head>的主要优势是，在页面加载完成之前，即使用户离开当前网页，也可以获得页面浏览量（PV）。然而，将其置于页面底部则有助于改善整体性能。</p>
<p>如何在 HTML5 Boilerplate 中整合 Bootstrap。</p>
<p>一个简单的方法是使用 Initializr，并创建自定义的构建环境——在其中同时包含 HTML5 Boilerplate 和 Bootstrap。</p>
<p>更多信息请参考文章： HTML5 Boilerplate 和 Bootstrap 的互相整合。</p>
<p>每当 HTML5 Boilerplate 释放出新版本，开发者是否必须更新网站？</p>
<p>完全没有必要！这就像是房子盖完之后，虽然需要时不时的修护一下，但通常没必要重新打地基。当然，如果想尝试新版本的变动，也是完全可以的，但最好正确权衡这么做的成本和收获。</p>
<p>哪里可以获取技术支持？</p>
<p>请使用 StackOverflow 寻求帮助。</p>
<p>本文根据HTML5 Boilerplate官方文档所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/html.md。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1279826455307501568"></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">你可能感兴趣的:(装载HTML 5 Boilerplate 5.0 中文文档)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1835513571501502464.htm"
title="2020-01-25" target="_blank">2020-01-25</a>
<span class="text-muted">晴岚85</span>
<div>郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什</div>
</li>
<li><a href="/article/1835512178023690240.htm"
title="谢谢你们，爱你们！" target="_blank">谢谢你们，爱你们！</a>
<span class="text-muted">鹿游儿</span>
<div>昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得</div>
</li>
<li><a href="/article/1835509898507546624.htm"
title="《策划经理回忆录之二》" target="_blank">《策划经理回忆录之二》</a>
<span class="text-muted">路基雅虎</span>
<div>话说三年变六年，飘了，飘了……眨眼，2013年5月，老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸，这是一家很有追求，同时敢于尝试的，且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月，到2015年11月，两年的陪伴，迎来了一场大爆发。2000个筹，5万/筹，直接回笼1个亿！！！这……让我开始认真审视这座看似五线</div>
</li>
<li><a href="/article/1835509897106649088.htm"
title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
<span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
</li>
<li><a href="/article/1835509770287673344.htm"
title="swagger访问路径" target="_blank">swagger访问路径</a>
<span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a>
<div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div>
</li>
<li><a href="/article/1835508130608410624.htm"
title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a>
<span class="text-muted">某公司摸鱼前端</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div>
</li>
<li><a href="/article/1835508131489214464.htm"
title="高级编程--XML+socket练习题" target="_blank">高级编程--XML+socket练习题</a>
<span class="text-muted">masa010</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</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.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j</div>
</li>
<li><a href="/article/1835506975463534592.htm"
title="今日联对0306" target="_blank">今日联对0306</a>
<span class="text-muted">诗图佳得</span>
<div>自对联：烟销皓月临江浒，水漫金山荡塔裙。一一肖士平2020.3.6.1、试对肖老师联：烟销皓月临江浒，夜笼寒沙梦晚舟。耀哥求正2、试对萧老师联:烟销浩月临江浒，雾散乾坤解汉城。秀霞习作请各位老师校正3、自对联：烟销皓月临江浒，水漫金山荡塔裙。一一肖士平2020.3.6.4、试对肖老师垫场联：烟销皓月临江浒，雾锁寒林缈葉丛。小智求正[抱拳]5、试对肖老师联：烟销皓月临江浒；风卷乱云入峰巅。一一五品6</div>
</li>
<li><a href="/article/1835506616166871040.htm"
title="每日一题——第八十一题" target="_blank">每日一题——第八十一题</a>
<span class="text-muted">互联网打工人no1</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E6%AF%8F%E6%97%A5%E4%B8%80%E7%BB%83/1.htm">C语言程序设计每日一练</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a>
<div>打印如下图案:#includeintmain(){inti,j;charch='A';for(i=1;i<5;i++,ch++){for(j=0;j<5-i;j++){printf("");//控制空格输出}for(j=1;j<2*i;j++)//条件j<2*i{printf("%c",ch);//控制字符输出}printf("\n");}return0;}</div>
</li>
<li><a href="/article/1835506616682770432.htm"
title="每日一题——第八十四题" target="_blank">每日一题——第八十四题</a>
<span class="text-muted">互联网打工人no1</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E6%AF%8F%E6%97%A5%E4%B8%80%E7%BB%83/1.htm">C语言程序设计每日一练</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a>
<div>题目：编写函数1、输入10个职工的姓名和职工号2、按照职工由大到小顺序排列，姓名顺序也随之调整3、要求输入一个职工号，用折半查找法找出该职工的姓名#define_CRT_SECURE_NO_WARNINGS#include#include#defineMAX_EMPLOYEES10typedefstruct{intid;charname[50];}Empolyee;voidinputEmploye</div>
</li>
<li><a href="/article/1835506466925146112.htm"
title="《小满细雨轻湿尘》" target="_blank">《小满细雨轻湿尘》</a>
<span class="text-muted">快乐的人ZZM</span>
<div>图片发自App《小满细雨轻湿尘》文/快乐的人zzm小满细雨轻湿尘石榴花开落纷纷落红不是无情物坠入泥土育养根2018-5-23</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/1835505199444226048.htm"
title="情殇——（5）压抑的小木匠放纵了自己。" target="_blank">情殇——（5）压抑的小木匠放纵了自己。</a>
<span class="text-muted">石疯聊情感故事</span>
<div>木讷的小木匠，其实只是不苟言笑。其实内心深处也是挣扎着，由于性格内敛，不喜形于色，给人的感觉非常的木讷。其实小木匠情商智商都不低。他为人扎实，非常的务实。他的爱是既深沉又宽容。可是是一个男人，都会对妻子出轨的事儿，不会忘怀！只是压抑在心底，为了某种考量或许是真爱。小木匠对于丽影和别人私奔又重回家庭，表面上并没有，天翻地覆，暴风骤雨，其内心深处也是经历了，痛苦的挣扎。。。再一次酒后，他和一个离家多年</div>
</li>
<li><a href="/article/1835504819209596928.htm"
title="怎么起诉借钱不还的人？怎样起诉欠款不还的人？" target="_blank">怎么起诉借钱不还的人？怎样起诉欠款不还的人？</a>
<span class="text-muted">影子爱学习</span>
<div>怎么起诉借钱不还的人？怎样起诉欠款不还的人？如果遇到难以解决的法律问题，我们可以匹配专业律师。例如：婚姻家庭（离婚纠纷）、刑事辩护、合同纠纷、债权债务、房产（继承）纠纷、交通事故、劳动争议、人身损害、公司相关法律事务（法律顾问）等咨询推荐手机/微信:15633770876【全国案件皆可】借钱不还起诉对方需要哪些资料起诉欠钱不还的，一般需要的材料包括以下这些：借据、收据、欠条、付款凭证等证据，以及向</div>
</li>
<li><a href="/article/1835504723210366976.htm"
title="第四天旅游线路预览——从换乘中心到喀纳斯湖" target="_blank">第四天旅游线路预览——从换乘中心到喀纳斯湖</a>
<span class="text-muted">陟彼高冈yu</span>
<a class="tag" taget="_blank" href="/search/%E5%9F%BA%E4%BA%8EGoogle/1.htm">基于Google</a><a class="tag" taget="_blank" href="/search/earth/1.htm">earth</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/%E7%9A%84%E6%97%85%E6%B8%B8%E8%A7%84%E5%88%92%E5%92%8C%E9%A2%84%E8%A7%88/1.htm">的旅游规划和预览</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a>
<div>第四天：从贾登峪到喀纳斯风景区入口，晚上住宿贾登峪；换乘中心有4路车，喀纳斯①号车，去喀纳斯湖，路程时长约5分钟；将上面的的行程安排进行动态展示，具体步骤见”Googleearthstudio进行动态轨迹显示制作过程“、“Googleearthstudio入门教程”和“Googleearthstudio进阶教程“相关内容，得到行程如下所示：Day4-2-480p</div>
</li>
<li><a href="/article/1835504596898902016.htm"
title="linux sdl windows.h,Windows下的SDL安装" target="_blank">linux sdl windows.h,Windows下的SDL安装</a>
<span class="text-muted">奔跑吧linux内核</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/sdl/1.htm">sdl</a><a class="tag" taget="_blank" href="/search/windows.h/1.htm">windows.h</a>
<div>首先你要下载并安装SDL开发包。如果装在C盘下，路径为C:\SDL1.2.5如果在WINDOWS下。你可以按以下步骤：1.打开VC++，点击"Tools",Options2,点击directories选项3.选择"Includefiles"增加一个新的路径。"C:\SDL1.2.5\include"4，现在选择"Libaryfiles“增加"C:\SDL1.2.5\lib"现在你可以开始编写你的第</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/1835503932999299072.htm"
title="相信相信的力量" target="_blank">相信相信的力量</a>
<span class="text-muted">孙丽_cdb3</span>
<div>孙丽中级十期坚持分享第345天有一个特别有哲理的故事：有一只老鹰下了蛋，这个蛋，不知怎的就滚到了鸡窝里去了，鸡也下了一窝蛋，然后鸡妈妈把这些蛋全都浮出来了，孵出来之后等小鸡长大一点了，就觉得鹰蛋孵出来的那只小鹰怪模怪样，这些小鸡都嘲笑它，真难看，真笨，丑死了，那只小鹰觉得自己真是谁也不像，真是不好看，后来鸡妈妈也不喜欢他，我怎么生出你这样的孩子来了？真烦人，后来这群小鸡和小鹰一起生活，有一天，老鹰</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/1835502282603589632.htm"
title="509. 斐波那契数(每日一题)" target="_blank">509. 斐波那契数(每日一题)</a>
<span class="text-muted">lzyprime</span>
<div>lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+</div>
</li>
<li><a href="/article/1835501774031646720.htm"
title="18-115 一切思考不能有效转化为行动，都TM是扯淡！" target="_blank">18-115 一切思考不能有效转化为行动，都TM是扯淡！</a>
<span class="text-muted">成长时间线</span>
<div>7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的</div>
</li>
<li><a href="/article/1835501643085475840.htm"
title="郎朗大婚娶公主：所有光环的背后，都是十年如一日的自律" target="_blank">郎朗大婚娶公主：所有光环的背后，都是十年如一日的自律</a>
<span class="text-muted">简小尘</span>
<div>近日，关于郎朗大婚的新闻上了热搜，看了新娘的照片，既有天使般的面容，更有魔鬼般的身材，关键是人家还身世好，又有才华，这真的是让所有男人羡慕嫉妒恨哪。有些人不禁会想，“凭什么郎朗的人生就象开挂了一样，可我却每天都活得这么狼狈！”其实，每个开挂的人生背后，都是苦行僧般的自律。01欲戴王冠，必承其重。练琴不能只靠兴趣，更需要自律！我们先来看一下朗朗在小时候的作息时间表：早晨5:45起床，练琴1小时。中午</div>
</li>
<li><a href="/article/1835501383751659520.htm"
title="《中华小厨师》单行VS爱藏：姜是老的辣，书是新的好" target="_blank">《中华小厨师》单行VS爱藏：姜是老的辣，书是新的好</a>
<span class="text-muted">cicoky</span>
<div>《汉书·郦食其传》有曰：“王者以民为天，而民以食为天。”自古以来，吃饱饭是每一个人的基本要求，而吃好饭却是每一个人的最终追求。于是，厨师这一职业孕育而生，其渊源之久，甚至可追溯到4000年前的奴隶时代。职业本身无贵贱，但职业能力却有高低之分。所以一家餐馆生意好不好，厨师的水平决定一切，而站在所有厨师顶端的就被称之为“特级厨师”。今天要说的就是一个关于“特级厨师刘昴星”的故事。连载历程1995年第4</div>
</li>
<li><a href="/article/1835499868454481920.htm"
title="读《人世间》有感" target="_blank">读《人世间》有感</a>
<span class="text-muted">一0一</span>
<div>这个寒假，就如同朋友圈中的一段话：一闭眼，一睁眼假期还有5天，在一闭眼一睁眼假期还有12天；再一闭眼一睁眼假期还有20天；不敢睡，不敢睡啊……受疫情影响，这个假期变得漫长又煎熬，我也无时无刻不关注着疫情的变化。当然这样的一个假期，我还真得要感谢周翔，因为他有个爱看书的习惯，所以家里有不少他看过的书，可以让我随意挑选，因此也让我的假期不至于那么无所事事。这次我选了一本梁晓声的《人世间》，作为一名语文</div>
</li>
<li><a href="/article/1835499615491813376.htm"
title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a>
<span class="text-muted">彩云飘过</span>
<div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</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/1835498603469172736.htm"
title="运城寻访重逢石头纪实【严建设老照片395 集】 我简直能把你想透， 当我走进运城的时候。 我已急得热汗直流， 访问了十九个老头， 把晋南的小城转了三周。 虽然是悠久的思旧， 我仍然是牛样的执..." target="_blank">运城寻访重逢石头纪实【严建设老照片395 集】 我简直能把你想透， 当我走进运城的时候。 我已急得热汗直流， 访问了十九个老头， 把晋南的小城转了三周。 虽然是悠久的思旧， 我仍然是牛样的执...</a>
<span class="text-muted">严建设</span>
<div>运城寻访重逢石头纪实【严建设老照片395集】我简直能把你想透，当我走进运城的时候。我已急得热汗直流，访问了十九个老头，把晋南的小城转了三周。虽然是悠久的思旧，我仍然是牛样的执拗。说什么变换的世情，泛起了过去的逝流，你就是真正的故友。踏破铁鞋的淡愁，已化为不废功夫的范畴，是就像远在天涯近在咫尺，就像是梦乡的邂逅，我紧紧地攥着你的手。你已长成了高高的个头，俊逸的容颜却很清瘦，你那样顽皮的童音，已变到老</div>
</li>
<li><a href="/article/1835498219489030144.htm"
title="高端密码学院笔记285" target="_blank">高端密码学院笔记285</a>
<span class="text-muted">柚子_b4b4</span>
<div>高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要</div>
</li>
<li><a href="/article/1835497965330984960.htm"
title="398顺境，逆境" target="_blank">398顺境，逆境</a>
<span class="text-muted">戴骁勇</span>
<div>2018.11.27周二雾霾最近儿子进入了一段顺境期，今天表现尤其不错。今天的数学测试成绩喜人，没有出现以往的计算错误，整个卷面书写工整，附加题也在规定时间内完成且做对。为迎接体育测试的锻炼有了质的飞跃。坐位体前屈成绩突飞猛进，估测成绩能达到12cm，这和上次测试的零分来比，简直是逆袭。儿子还在不断锻炼和提升，唯恐到时候掉链子。跑步姿势在我的调教下，逐渐正规起来，速度随之也有了提升。今晚测试的50</div>
</li>
<li><a href="/article/1835497710975807488.htm"
title="从0到500+，我是如何利用自媒体赚钱？" target="_blank">从0到500+，我是如何利用自媒体赚钱？</a>
<span class="text-muted">一列脚印</span>
<div>运营公众号半个多月，从零基础的小白到现在慢慢懂了一些运营的知识。做好公众号是很不容易的，要做很多事情；排版、码字、引流…通通需要自己解决，业余时间全都花费在这上面涨这么多粉丝是真的不容易，对比知乎大佬来说，我们这种没资源，没人脉，还没钱的小透明来说，想要一个月涨粉上万，怕是今天没睡醒（不过你有的方法，算我piapia打脸）至少我是清醒的，自己慢慢努力，实现我的万粉目标！大家快来围观、支持我吧！孩子</div>
</li>
<li><a href="/article/3.htm"
title="枚举的构造函数中抛出异常会怎样" target="_blank">枚举的构造函数中抛出异常会怎样</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/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a>
<div>首先从使用enum实现单例说起。
为什么要用enum来实现单例？
这篇文章（
http://javarevisited.blogspot.sg/2012/07/why-enum-singleton-are-better-in-java.html）阐述了三个理由：
1.enum单例简单、容易，只需几行代码：
public enum Singleton {
INSTANCE;</div>
</li>
<li><a href="/article/130.htm"
title="CMake 教程" target="_blank">CMake 教程</a>
<span class="text-muted">aigo</span>
<a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a>
<div>转自：http://xiang.lf.blog.163.com/blog/static/127733322201481114456136/
CMake是一个跨平台的程序构建工具，比如起自己编写Makefile方便很多。
介绍：http://baike.baidu.com/view/1126160.htm
本文件不介绍CMake的基本语法，下面是篇不错的入门教程：
http:</div>
</li>
<li><a href="/article/257.htm"
title="cvc-complex-type.2.3: Element 'beans' cannot have character" target="_blank">cvc-complex-type.2.3: Element 'beans' cannot have character</a>
<span class="text-muted">Cb123456</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Webgis/1.htm">Webgis</a>
<div> cvc-complex-type.2.3: Element 'beans' cannot have character
Line 33 in XML document from ServletContext resource [/WEB-INF/backend-servlet.xml] is i</div>
</li>
<li><a href="/article/384.htm"
title="jquery实例:随页面滚动条滚动而自动加载内容" target="_blank">jquery实例:随页面滚动条滚动而自动加载内容</a>
<span class="text-muted">120153216</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
<div><script language="javascript">
$(function (){
var i = 4;$(window).bind("scroll", function (event){
//滚动条到网页头部的 高度，兼容ie,ff,chrome
var top = document.documentElement.s</div>
</li>
<li><a href="/article/511.htm"
title="将数据库中的数据转换成dbs文件" target="_blank">将数据库中的数据转换成dbs文件</a>
<span class="text-muted">何必如此</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/dbs/1.htm">dbs</a>
<div>旗正规则引擎通过数据库配置器（DataBuilder）来管理数据库，无论是Oracle，还是其他主流的数据都支持，操作方式是一样的。旗正规则引擎的数据库配置器是用于编辑数据库结构信息以及管理数据库表数据，并且可以执行SQL 语句，主要功能如下。
1)数据库生成表结构信息：
主要生成数据库配置文件(.conf文</div>
</li>
<li><a href="/article/638.htm"
title="在IBATIS中配置SQL语句的IN方式" target="_blank">在IBATIS中配置SQL语句的IN方式</a>
<span class="text-muted">357029540</span>
<a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a>
<div>在使用IBATIS进行SQL语句配置查询时，我们一定会遇到通过IN查询的地方，在使用IN查询时我们可以有两种方式进行配置参数：String和List。具体使用方式如下：
1.String:定义一个String的参数userIds，把这个参数传入IBATIS的sql配置文件，sql语句就可以这样写：
<select id="getForms" param</div>
</li>
<li><a href="/article/765.htm"
title="Spring3 MVC 笔记（一）" target="_blank">Spring3 MVC 笔记（一）</a>
<span class="text-muted">7454103</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a><a class="tag" taget="_blank" href="/search/JSF/1.htm">JSF</a>
<div>
自从 MVC 这个概念提出来之后 struts1.X struts2.X jsf 。。。。。
这个view 层的技术一个接一个！ 都用过！不敢说哪个绝对的强悍！
要看业务，和整体的设计！
最近公司要求开发个新系统！</div>
</li>
<li><a href="/article/892.htm"
title="Timer与Spring Quartz 定时执行程序" target="_blank">Timer与Spring Quartz 定时执行程序</a>
<span class="text-muted">darkranger</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a>
<div>有时候需要定时触发某一项任务。其实在jdk1.3，java sdk就通过java.util.Timer提供相应的功能。一个简单的例子说明如何使用，很简单： 1、第一步，我们需要建立一项任务，我们的任务需要继承java.util.TimerTask package com.test; import java.text.SimpleDateFormat; import java.util.Date; </div>
</li>
<li><a href="/article/1019.htm"
title="大端小端转换，le32_to_cpu 和cpu_to_le32" target="_blank">大端小端转换，le32_to_cpu 和cpu_to_le32</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80%E7%9B%B8%E5%85%B3/1.htm">C语言相关</a>
<div>大端小端转换，le32_to_cpu 和cpu_to_le32 字节序
http://oss.org.cn/kernel-book/ldd3/ch11s04.html
小心不要假设字节序. PC 存储多字节值是低字节为先(小端为先, 因此是小端), 一些高级的平台以另一种方式(大端)</div>
</li>
<li><a href="/article/1146.htm"
title="Nginx负载均衡配置实例详解" target="_blank">Nginx负载均衡配置实例详解</a>
<span class="text-muted">avords</span>
<div>[导读] 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。负载均衡先来简单了解一下什么是负载均衡，单从字面上的意思来理解就可以解 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。
负载均衡
先来简单了解一下什么是负载均衡</div>
</li>
<li><a href="/article/1273.htm"
title="乱说的" target="_blank">乱说的</a>
<span class="text-muted">houxinyou</span>
<a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E6%95%8F%E6%8D%B7%E5%BC%80%E5%8F%91/1.htm">敏捷开发</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a>
<div>从很久以前，大家就研究框架，开发方法，软件工程，好多！反正我是搞不明白！
这两天看好多人研究敏捷模型，瀑布模型！也没太搞明白.
不过感觉和程序开发语言差不多，
瀑布就是顺序，敏捷就是循环.
瀑布就是需求、分析、设计、编码、测试一步一步走下来。而敏捷就是按摸块或者说迭代做个循环，第个循环中也一样是需求、分析、设计、编码、测试一步一步走下来。
也可以把软件开发理</div>
</li>
<li><a href="/article/1400.htm"
title="欣赏的价值——一个小故事" target="_blank">欣赏的价值——一个小故事</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%89%E6%95%88%E8%BE%85%E5%AF%BC/1.htm">有效辅导</a><a class="tag" taget="_blank" href="/search/%E6%AC%A3%E8%B5%8F/1.htm">欣赏</a><a class="tag" taget="_blank" href="/search/%E6%AC%A3%E8%B5%8F%E7%9A%84%E4%BB%B7%E5%80%BC/1.htm">欣赏的价值</a>
<div> 第一次参加家长会，幼儿园的老师说："您的儿子有多动症，在板凳上连三分钟都坐不了，你最好带他去医院看一看。" 回家的路上，儿子问她老师都说了些什么，她鼻子一酸，差点流下泪来。因为全班30位小朋友，惟有他表现最差；惟有对他，老师表现出不屑，然而她还在告诉她的儿子："老师表扬你了，说宝宝原来在板凳上坐不了一分钟，现在能坐三分钟。其他妈妈都非常羡慕妈妈，因为全班只有宝宝</div>
</li>
<li><a href="/article/1527.htm"
title="包冲突问题的解决方法" target="_blank">包冲突问题的解决方法</a>
<span class="text-muted">bingyingao</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/exclusions/1.htm">exclusions</a><a class="tag" taget="_blank" href="/search/%E5%8C%85%E5%86%B2%E7%AA%81/1.htm">包冲突</a>
<div>包冲突是开发过程中很常见的问题：
其表现有：
1.明明在eclipse中能够索引到某个类，运行时却报出找不到类。
2.明明在eclipse中能够索引到某个类的方法，运行时却报出找不到方法。
3.类及方法都有，以正确编译成了.class文件，在本机跑的好好的，发到测试或者正式环境就
抛如下异常：
java.lang.NoClassDefFoundError: Could not in</div>
</li>
<li><a href="/article/1654.htm"
title="【Spark七十五】Spark Streaming整合Flume-NG三之接入log4j" target="_blank">【Spark七十五】Spark Streaming整合Flume-NG三之接入log4j</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a>
<div>先来一段废话：
实际工作中，业务系统的日志基本上是使用Log4j写入到日志文件中的，问题的关键之处在于业务日志的格式混乱，这给对日志文件中的日志进行统计分析带来了极大的困难，或者说，基本上无法进行分析，每个人写日志的习惯不同，导致日志行的格式五花八门，最后只能通过grep来查找特定的关键词缩小范围，但是在集群环境下，每个机器去grep一遍，分析一遍，这个效率如何可想之二，大好光阴都浪费在这上面了</div>
</li>
<li><a href="/article/1781.htm"
title="sudoku solver in Haskell" target="_blank">sudoku solver in Haskell</a>
<span class="text-muted">bookjovi</span>
<a class="tag" taget="_blank" href="/search/sudoku/1.htm">sudoku</a><a class="tag" taget="_blank" href="/search/haskell/1.htm">haskell</a>
<div>这几天没太多的事做，想着用函数式语言来写点实用的程序，像fib和prime之类的就不想提了（就一行代码的事），写什么程序呢？在网上闲逛时发现sudoku游戏，sudoku十几年前就知道了，学生生涯时也想过用C/Java来实现个智能求解，但到最后往往没写成，主要是用C/Java写的话会很麻烦。
现在写程序，本人总是有一种思维惯性，总是想把程序写的更紧凑，更精致，代码行数最少，所以现</div>
</li>
<li><a href="/article/1908.htm"
title="java apache ftpClient" target="_blank">java apache ftpClient</a>
<span class="text-muted">bro_feng</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>最近使用apache的ftpclient插件实现ftp下载，遇见几个问题，做如下总结。
1. 上传阻塞，一连串的上传，其中一个就阻塞了，或是用storeFile上传时返回false。查了点资料，说是FTP有主动模式和被动模式。将传出模式修改为被动模式ftp.enterLocalPassiveMode();然后就好了。
看了网上相关介绍，对主动模式和被动模式区别还是比较的模糊，不太了解被动模</div>
</li>
<li><a href="/article/2035.htm"
title="读《研磨设计模式》-代码笔记-工厂方法模式" target="_blank">读《研磨设计模式》-代码笔记-工厂方法模式</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/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
<div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
package design.pattern;
/*
* 工厂方法模式：使一个类的实例化延迟到子类
* 某次，我在工作不知不觉中就用到了工厂方法模式（称为模板方法模式更恰当。2012-10-29）：
* 有很多不同的产品，它</div>
</li>
<li><a href="/article/2162.htm"
title="面试记录语" target="_blank">面试记录语</a>
<span class="text-muted">chenyu19891124</span>
<a class="tag" taget="_blank" href="/search/%E6%8B%9B%E8%81%98/1.htm">招聘</a>
<div>或许真的在一个平台上成长成什么样，都必须靠自己去努力。有了好的平台让自己展示，就该好好努力。今天是自己单独一次去面试别人，感觉有点小紧张，说话有点打结。在面试完后写面试情况表，下笔真的好难，尤其是要对面试人的情况说明真的好难。
今天面试的是自己同事的同事，现在的这个同事要离职了，介绍了我现在这位同事以前的同事来面试。今天这位求职者面试的是配置管理，期初看了简历觉得应该很适合做配置管理，但是今天面</div>
</li>
<li><a href="/article/2289.htm"
title="Fire Workflow 1.0正式版终于发布了" target="_blank">Fire Workflow 1.0正式版终于发布了</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/workflow/1.htm">workflow</a><a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a>
<div>Fire Workflow 是国内另外一款开源工作流，作者是著名的非也同志，哈哈....
官方网站是 http://www.fireflow.org
经过大家努力,Fire Workflow 1.0正式版终于发布了
正式版主要变化:
1、增加IWorkItem.jumpToEx(...)方法，取消了当前环节和目标环节必须在同一条执行线的限制，使得自由流更加自由
2、增加IT</div>
</li>
<li><a href="/article/2416.htm"
title="Python向脚本传参" target="_blank">Python向脚本传参</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a><a class="tag" taget="_blank" href="/search/%E4%BC%A0%E5%8F%82/1.htm">传参</a>
<div>如果想对python脚本传参数，python中对应的argc, argv(c语言的命令行参数)是什么呢？
需要模块：sys
参数个数：len(sys.argv)
脚本名： sys.argv[0]
参数1： sys.argv[1]
参数2： sys.argv[</div>
</li>
<li><a href="/article/2543.htm"
title="管理用户分组的命令gpasswd" target="_blank">管理用户分组的命令gpasswd</a>
<span class="text-muted">dongwei_6688</span>
<a class="tag" taget="_blank" href="/search/passwd/1.htm">passwd</a>
<div>NAME： gpasswd - administer the /etc/group file
SYNOPSIS：
gpasswd group
gpasswd -a user group
gpasswd -d user group
gpasswd -R group
gpasswd -r group
gpasswd [-A user,...] [-M user,...] g</div>
</li>
<li><a href="/article/2670.htm"
title="郝斌老师数据结构课程笔记" target="_blank">郝斌老师数据结构课程笔记</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/1.htm">数据结构与算法</a>
<div><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<</div>
</li>
<li><a href="/article/2797.htm"
title="yii2 cgridview加上选择框进行操作" target="_blank">yii2 cgridview加上选择框进行操作</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/GridView/1.htm">GridView</a>
<div>页面代码
<?=Html::beginForm(['controller/bulk'],'post');?>
<?=Html::dropDownList('action','',[''=>'Mark selected as: ','c'=>'Confirmed','nc'=>'No Confirmed'],['class'=>'dropdown',])</div>
</li>
<li><a href="/article/2924.htm"
title="linux mysql" target="_blank">linux mysql</a>
<span class="text-muted">fypop</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>enquiry mysql version in centos linux
yum list installed | grep mysql
yum -y remove mysql-libs.x86_64
enquiry mysql version in yum repositoryyum list | grep mysql oryum -y list mysql*
install mysq</div>
</li>
<li><a href="/article/3051.htm"
title="Scramble String" target="_blank">Scramble String</a>
<span class="text-muted">hcx2013</span>
<a class="tag" taget="_blank" href="/search/String/1.htm">String</a>
<div>Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrings recursively.
Below is one possible representation of s1 = "great":</div>
</li>
<li><a href="/article/3178.htm"
title="跟我学Shiro目录贴" target="_blank">跟我学Shiro目录贴</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/%E8%B7%9F%E6%88%91%E5%AD%A6shiro/1.htm">跟我学shiro</a>
<div>历经三个月左右时间，《跟我学Shiro》系列教程已经完结，暂时没有需要补充的内容，因此生成PDF版供大家下载。最近项目比较紧，没有时间解答一些疑问，暂时无法回复一些问题，很抱歉，不过可以加群（334194438/348194195）一起讨论问题。
----广告-----------------------------------------------------</div>
</li>
<li><a href="/article/3305.htm"
title="nginx日志切割并使用flume-ng收集日志" target="_blank">nginx日志切割并使用flume-ng收集日志</a>
<span class="text-muted">liyonghui160com</span>
<div>
nginx的日志文件没有rotate功能。如果你不处理，日志文件将变得越来越大，还好我们可以写一个nginx日志切割脚本来自动切割日志文件。第一步就是重命名日志文件，不用担心重命名后nginx找不到日志文件而丢失日志。在你未重新打开原名字的日志文件前，nginx还是会向你重命名的文件写日志，linux是靠文件描述符而不是文件名定位文件。第二步向nginx主</div>
</li>
<li><a href="/article/3432.htm"
title="Oracle死锁解决方法" target="_blank">Oracle死锁解决方法</a>
<span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
<div> select p.spid,c.object_name,b.session_id,b.oracle_username,b.os_user_name from v$process p,v$session a, v$locked_object b,all_objects c where p.addr=a.paddr and a.process=b.process and c.object_id=b.</div>
</li>
<li><a href="/article/3559.htm"
title="java之List排序" target="_blank">java之List排序</a>
<span class="text-muted">shiguanghui</span>
<a class="tag" taget="_blank" href="/search/list%E6%8E%92%E5%BA%8F/1.htm">list排序</a>
<div> 在Java Collection Framework中定义的List实现有Vector，ArrayList和LinkedList。这些集合提供了对对象组的索引访问。他们提供了元素的添加与删除支持。然而，它们并没有内置的元素排序支持。 你能够使用java.util.Collections类中的sort()方法对List元素进行排序。你既可以给方法传递</div>
</li>
<li><a href="/article/3686.htm"
title="servlet单例多线程" target="_blank">servlet单例多线程</a>
<span class="text-muted">utopialxw</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a>
<div>转自http://www.cnblogs.com/yjhrem/articles/3160864.html
和 http://blog.chinaunix.net/uid-7374279-id-3687149.html
Servlet 单例多线程
Servlet如何处理多个请求访问？Servlet容器默认是采用单实例多线程的方式处理多个请求的：1.当web服务器启动的</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> 