weixin_34405557
weixin_34405557

【转】你所不知道的HTML 头标签

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

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

HTML基本的头部标签

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

doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    
    <title>页面标题title>
    ...
head>

其中

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

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

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

也可以省略。

DOCTYPE

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

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

DOCTYPE html>

charset

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

<meta charset="utf-8">

html5 之前网页中会这样写：

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

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

lang属性

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

简体中文

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

繁体中文

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

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

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

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

Meta 标签

meta标签是HTML中head头部的一个辅助性标签，它位于HTML文档头部的  和 </code> 标记之间，它提供用户不可见的信息。虽然这部分信息用户不可见，但是其作用非常强大，特别是当今的前端开发工作中，设置合适的meta标签可以大大提升网站页面的可用性。</p> <p>桌面端开发中，meta标签通常用来为搜索引擎优化（SEO）及 robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己，以及设置RASC内容等级，等等。</p> <p>移动端开发中，meta标签除了桌面端中的功能设置外，还包括，比如viewport设置，添加到主屏幕图标，标签页颜色等等实用设置。具体可以看后面详细的介绍。</p> <h5>meta标签分类</h5> <p>meta标签根据属性的不同，可分为两大部分：http-equiv 和 name 属性。</p> <p>http-equiv：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。<br>name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于浏览器，搜索引擎等机器人识别，等等。</p> <h5>推荐使用的meta标签</h5> <div class="cnblogs_code"> <pre><span style="color:#008000;"><!--</span><span style="color:#008000;"> 设置文档的字符编码 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">charset</span><span style="color:#0000ff;">="utf-8"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="x-ua-compatible"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="ie=edge"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="viewport"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="width=device-width, initial-scale=1, shrink-to-fit=no"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* </span><span style="color:#008000;">--></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 允许控制资源的过度加载 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="Content-Security-Policy"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="default-src 'self'"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 尽早地放置在文档中 </span><span style="color:#008000;">--></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 仅应用于该标签下的内容 </span><span style="color:#008000;">--></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> Web 应用的名称（仅当网站被用作为一个应用时才使用）</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="application-name"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="应用名称"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 针对页面的简短描述（限制 150 字符）</span><span style="color:#008000;">--></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 在*某些*情况下，该描述是被用作搜索结果展示片段的一部分 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="description"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="一个页面描述"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 控制搜索引擎的抓取和索引行为 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="robots"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="index,follow,noodp"</span><span style="color:#0000ff;">></span><span style="color:#008000;"><!--</span><span style="color:#008000;"> 所有的搜索引擎 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="googlebot"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="index,follow"</span><span style="color:#0000ff;">></span><span style="color:#008000;"><!--</span><span style="color:#008000;"> 仅对 Google 有效 </span><span style="color:#008000;">--></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 告诉 Google 不显示网站链接的搜索框 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="google"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="nositelinkssearchbox"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 告诉 Google 不提供此页面的翻译 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="google"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="notranslate"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 验证 Google 搜索控制台的所有权 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="google-site-verification"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="verification_token"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 用来命名软件或用于构建网页（如 - WordPress、Dreamweaver）</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="generator"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="program"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 关于你的网站主题的简短描述 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="subject"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="你的网站主题"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 非常简短（少于 10 个字）的描述。主要用于学术论文。</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="abstract"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">=""</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 完整的域名或网址 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="url"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="https://example.com/"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="directory"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="submission"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 基于网站内容给出一般的年龄分级 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="rating"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="General"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 允许控制 referrer 信息如何传递 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="referrer"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="never"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 禁用自动检测和格式化可能的电话号码 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="format-detection"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="telephone=no"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 通过设置为 “off” 完全退出 DNS 预取 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="x-dns-prefetch-control"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="off"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 在客户端存储 cookie，web 浏览器的客户端识别 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="set-cookie"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="name=value; expires=date; path=url"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 指定要显示在一个特定框架中的页面 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="Window-Target"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="_value"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 地理标签 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="ICBM"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="latitude, longitude"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="geo.position"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="latitude;longitude"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="geo.region"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="country[-state]"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 如 content="New York City" </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="geo.placename"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="city/town"</span><span style="color:#0000ff;">></span></pre> </div> <p>相关的详细说明请查看：</p> <ul> <li>Google 可以识别的 Meta 标签</li> <li>WHATWG Wiki: Meta 拓展</li> <li>ICBM – 维基百科</li> <li>地理标记 – 维基百科</li> </ul> <h5>为移动设备添加 viewport</h5> <p><code>viewport</code> 可以让布局在移动浏览器上显示的更好。 通常会写</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name </span><span style="color:#0000ff;">="viewport"</span><span style="color:#ff0000;"> content </span><span style="color:#0000ff;">="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz </span><span style="color:#008000;">--></span></pre> </div> <p><code>width=device-width</code> 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)</p> <p>content 参数：</p> <ul> <li>width viewport 宽度(数值/device-width)</li> <li>height viewport 高度(数值/device-height)</li> <li>initial-scale 初始缩放比例</li> <li>maximum-scale 最大缩放比例</li> <li>minimum-scale 最小缩放比例</li> <li>user-scalable 是否允许用户缩放(yes/no)</li> <li>minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写： <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="viewport"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="width=device-width, initial-scale=1, minimal-ui"</span><span style="color:#0000ff;">></span></pre> </div> </li> </ul> <p>而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="viewport"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="width=device-width,user-scalable=yes"</span><span style="color:#0000ff;">></span></pre> </div> <p>相关链接：非响应式设计的viewport</p> <p>适配 iPhone 6 和 iPhone 6plus 则需要写：</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="viewport"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="width=375"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="viewport"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="width=414"</span><span style="color:#0000ff;">></span></pre> </div> <p>大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。</p> <h5>SEO 优化部分</h5> <ul> <li>页面标题<code><title></code>标签(head 头部必须) <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span>your title<span style="color:#0000ff;"></</span><span style="color:#800000;">title</span><span style="color:#0000ff;">></span></pre> </div> </li> <li>页面关键词 keywords <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="keywords"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="your keywords"</span><span style="color:#0000ff;">></span></pre> </div> </li> <li>页面描述内容 description <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="description"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="your description"</span><span style="color:#0000ff;">></span></pre> </div> </li> <li>定义网页作者 author <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="author"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="author,email address"</span><span style="color:#0000ff;">></span></pre> </div> </li> <li>定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="robots"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="index,follow"</span><span style="color:#0000ff;">></span></pre> </div> </li> </ul> <p>相关链接：WEB1038 – 标记包含无效的值</p> <h5>百度禁止转码</h5> <p>通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="Cache-Control"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="no-siteapp"</span> <span style="color:#0000ff;">/></span></pre> </div> <p>相关链接：SiteApp 转码声明</p> <h5>不推荐的 meta 属性</h5> <p>下面是不推荐使用的 meta 属性，因为它们采用率低，或已弃用：</p> <div class="cnblogs_code"> <pre><span style="color:#008000;"><!--</span><span style="color:#008000;"> 用于声明文档语言，但支持得不是很好。最好使用 <html lang=""> </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="language"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="en"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> Google 无视 & Bing 认为垃圾的指示器 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="keywords"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="你,关键字,在这里,不使用空格,而用逗号进行分隔"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 目前没有在任何搜索引擎中使用过的声明 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="revised"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="Sunday, July 18th, 2010, 5:15 pm"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 为垃圾邮件机器人收获 email 地址提供了一种简单的方式 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="reply-to"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="email@example.com"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 最好使用 <link rel="author"> 或 humans.txt 文件 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="author"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="name, email@example.com"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="designer"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">=""</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="owner"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">=""</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 告诉搜索机器人一段时间后重新访问该网页。这不支持，因为大多数搜索引擎使用随机时间间隔来重新抓取网页 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="revisit-after"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="7 days"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 在一段时间后将用户重定向到新的 URL </span><span style="color:#008000;">--></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> W3C 建议不要使用该标签。Google 建议使用服务器端的 301 重定向。</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="refresh"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="300; url=https://example.com/"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 描述网站的主题 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="topic"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">=""</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 公司概要或网站目的 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="summary"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">=""</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 一个已废弃的标签，和关键词 meta 标签的作用相同 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="classification"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="business"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 是否是相同的 URL，年代久远且不支持 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="identifier-URL"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="https://example.com/"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 和关键词标签类似的功能 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="category"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">=""</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 确保你的网站在所有国家和语言中都能显示 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="coverage"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="Worldwide"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 和 coverage 标签相同 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="distribution"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="Global"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 控制在互联网上哪些用户可以访问 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="Pics-label"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="value"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 缓存控制 </span><span style="color:#008000;">--></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 最好在服务器端配置缓存控制 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="Expires"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="0"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="Pragma"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="no-cache"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="Cache-Control"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="no-cache"</span><span style="color:#0000ff;">></span></pre> </div> <h4>link 标签</h4> <p>说到 link 标签，估计大家的第一反应和我一样，就是引入外部CSS样式文件的，不错，这是 link 标签最最常用的功能。不过它还有很多别的用处，比如这是浏览器 favicon 图标，touch图标等等。</p> <div class="cnblogs_code"> <pre><span style="color:#008000;"><!--</span><span style="color:#008000;"> 有助于防止出现内容重复的问题 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="canonical"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 之前用于包含 icon 链接，但已被废弃并不再使用 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="shortlink"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/?p=42"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 链接到当前文档的一个 AMP HTML 版本 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="amphtml"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/path/to/amp-version.html"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 表明一个 CSS 样式表 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="stylesheet"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/styles.css"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 链接到一个指定 Web 应用程序“安装”证书的 JSON 文件 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="manifest"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="manifest.json"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 链接到文档的作者 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="author"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="humans.txt"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 指向一个适用于链接内容的版权申明 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="copyright"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="copyright.html"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 给出可能的你的另一种语言的文档位置参考 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="alternate"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://es.example.com/"</span><span style="color:#ff0000;"> hreflang</span><span style="color:#0000ff;">="es"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 提供了关于作者或其他人的信息 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="me"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://google.com/profiles/thenextweb"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="text/html"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="me"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="mailto:name@example.com"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="me"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="sms:+15035550125"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 链接到一个文档，包含当前文档的一个归档链接 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="archives"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/2003/05/"</span><span style="color:#ff0000;"> title</span><span style="color:#0000ff;">="May 2003"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 链接到层次结构中的顶级资源 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="index"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/"</span><span style="color:#ff0000;"> title</span><span style="color:#0000ff;">="DeWitt Clinton"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 给出该文档的起点 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="start"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/photos/pattern_recognition_1_about/"</span><span style="color:#ff0000;"> title</span><span style="color:#0000ff;">="Pattern Recognition 1"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 引导当前文档的前述资源序列 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="prev"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/"</span><span style="color:#ff0000;"> title</span><span style="color:#0000ff;">="OpenSearch and OpenID? A sure way to get my attention."</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 给出一个自我参考 - 当文档有多个可能的参考时非常有用 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="self"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="application/atom+xml"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/atomFeed.php?page=3"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 分别是在一系列文件中的第一个、下一个、上一个和最后一个 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="first"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/atomFeed.php"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="next"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/atomFeed.php?page=4"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="previous"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/atomFeed.php?page=2"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="last"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/atomFeed.php?page=147"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 当使用第三方服务来维护 blog 时使用 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="EditURI"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/xmlrpc.php?rsd"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="application/rsd+xml"</span><span style="color:#ff0000;"> title</span><span style="color:#0000ff;">="RSD"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 当另一个 WordPress 博客链接到你的 WordPress 博客或文章时形成一个自动化的评论 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="pingback"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/xmlrpc.php"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 当你在自己的页面上链接到一个 url 时通知它 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="webmention"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/webmention"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 加载一个外部的 HTML 文件到当前 HTML 文件中 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="import"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="component.html"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 打开搜索 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="search"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="/open-search.xml"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="application/opensearchdescription+xml"</span><span style="color:#ff0000;"> title</span><span style="color:#0000ff;">="Search Title"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> Feeds </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="alternate"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://feeds.feedburner.com/example"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="application/rss+xml"</span><span style="color:#ff0000;"> title</span><span style="color:#0000ff;">="RSS"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="alternate"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/feed.atom"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="application/atom+xml"</span><span style="color:#ff0000;"> title</span><span style="color:#0000ff;">="Atom 0.3"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 预取，预载，预浏览 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="dns-prefetch"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="//example.com/"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="preconnect"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://www.example.com/"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="prefetch"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://www.example.com/"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="prerender"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://example.com/"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="preload"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="image.png"</span><span style="color:#ff0000;"> as</span><span style="color:#0000ff;">="image"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ </span><span style="color:#008000;">--></span></pre> </div> <p>具体说明查看：https://css-tricks.com/prefetching-preloading-prebrowsing/</p> <h5>rss订阅</h5> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="alternate"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="application/rss+xml"</span><span style="color:#ff0000;"> title</span><span style="color:#0000ff;">="RSS"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="/rss.xml"</span> <span style="color:#0000ff;">/></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 添加 RSS 订阅 </span><span style="color:#008000;">--></span></pre> </div> <h5>不推荐的link标签</h5> <p>以下是不推荐使用的链接关系：</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="shortcut icon"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/favicon.ico"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 没有用的, 专有的和错误的, 详见 https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="subresource"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="styles.css"</span><span style="color:#0000ff;">></span></pre> </div> <p>具体说明查看：https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ</p> <h5>favicon 图标</h5> <p>IE 11, Chrome, Firefox, Safari, Opera支持<code><link></code>形式设置：</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="icon"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/favicon-16.png"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="16x16"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="image/png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="icon"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/favicon-32.png"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="32x32"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="image/png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="icon"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/favicon-48.png"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="48x48"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="image/png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="icon"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/favicon-62.png"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="62x62"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="image/png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="icon"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/favicon-192.png"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="192x192"</span><span style="color:#ff0000;"> type</span><span style="color:#0000ff;">="image/png"</span><span style="color:#0000ff;">></span></pre> </div> <p>注意：对于IE 10及以下版本不支持<code><link></code>形式设置，只通过将命名为<code>favicon.ico</code>的文件放置在网站根目录中实现。</p> <p>比较详细的 favicon 介绍可参考：</p> <ul> <li>所有关于网站图标（和触摸图标）</li> <li>favicon 对照表</li> </ul> <h3>浏览器及平台详细说明</h3> <h4>QQ 浏览器（X5 内核）</h4> <p>QQ 浏览器（X5 内核）同样适用于微信，QQ等第三方应用页面开发。</p> <div class="cnblogs_code"> <pre><span style="color:#008000;"><!--</span><span style="color:#008000;"> 设置锁定横屏、竖屏显示模式，portrait（横屏），landscape（竖屏）</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="x5-orientation"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="portrait|landscape"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 设置全屏显示页面 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="x5-fullscreen"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="true"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 开启页面以应用模式显示（全屏显示等） </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="x5-page-mode"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="app"</span><span style="color:#0000ff;">></span></pre> </div> <h4>360浏览器</h4> <p>设置 360 浏览器渲染模式：<code>webkit</code> 为极速内核，<code>ie-comp</code> 为 IE 兼容内核，<code>ie-stand</code> 为 IE 标准内核。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="renderer"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="webkit|ie-comp|ie-stand"</span><span style="color:#0000ff;">></span></pre> </div> <p>详情文档链接：浏览器内核控制Meta标签说明文档<br>360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="X-UA-Compatible"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="IE=Edge,chrome=1"</span><span style="color:#0000ff;">></span></pre> </div> <p>这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。</p> <h4>UC 浏览器</h4> <h5>设置屏幕方向</h5> <p>portrait 为横屏，landscape 为竖屏。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="screen-orientation"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="portrait|landscape"</span><span style="color:#0000ff;">></span></pre> </div> <h5>设置全屏</h5> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="full-screen"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="yes"</span><span style="color:#0000ff;">></span></pre> </div> <h5>设置适应屏幕排版（缩放是否显示滚动条）</h5> <p>UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 uc-fitscreen=yes，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="viewport"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="uc-fitscreen=no|yes"</span><span style="color:#0000ff;">></span></pre> </div> <h5>排版模式</h5> <p>UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="layoutmode"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="fitscreen|standard"</span><span style="color:#0000ff;">></span></pre> </div> <h5>夜间模式</h5> <p>可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂，由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用)，因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式，自行设计更适合用户使用的夜间模式。</p> <p>注意：页面内的 frame/iframe 中的夜间模式的 meta 不生效。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="nightmode"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="enable|disable"</span><span style="color:#0000ff;">></span></pre> </div> <h5>整页图片强制显示</h5> <p>为了节省流量及加快速度，UC 为用户提供了无图模式，在实际使用中存在页面中的图片是不可缺少的，例如验证码，地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。</p> <p>**注意：整页图片强制显示仅对当前页面生效，对页面内的 frame/iframe 不生效，也不影响前进后退的页面</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="imagemode"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="force"</span><span style="color:#0000ff;">></span></pre> </div> <h5>开启应用模式</h5> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="browsermode"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="application"</span><span style="color:#0000ff;">></span></pre> </div> <p>应用模式是为方便 Web 应用及游戏开发者设置的综合开关，通过meta标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数:</p> <table> <thead> <tr> <th style="text-align:center;">参数</th> <th align="center">状态</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>全屏</td> <td align="center">生效</td> <td>可通过 <code>meta</code> 或 JS API 调用退出全屏</td> </tr> <tr> <td>长按菜单</td> <td align="center">失效</td> <td>可通过 JS API 调用重新生效</td> </tr> <tr> <td>浏览器默认手势</td> <td align="center">失效</td> <td>可通过 JS API 调用重新生效</td> </tr> <tr> <td>排版模式</td> <td align="center">标准模式</td> <td>可通过 <code>meta</code> 或 JS API 调用设置其他排版模式</td> </tr> <tr> <td>强制图片显示</td> <td align="center">生效</td> <td>/</td> </tr> <tr> <td>夜间模式</td> <td align="center">失效</td> <td>可通过 <code>meta</code> 或 JS API 调用启用夜间模式</td> </tr> </tbody> </table> <h5>缩放字体</h5> <p>例如：禁用的 UC 浏览器的字体缩放功能</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="wap-font-scale"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="no"</span><span style="color:#0000ff;">></span></pre> </div> <p>具体UC 浏览器文档链接：UC 浏览器文档</p> <h4>Apple iOS原生浏览器</h4> <h5>添加智能 App 广告条</h5> <p>告诉浏览器这个网站对应的app，并在页面上显示下载banner，需要注意的是Smart App Banners标签不能用在frame框架内部，否则不起作用。</p> <p>其中app-id(必须), affiliate-data (可选), app-argument (可选)</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="apple-itunes-app"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"</span><span style="color:#0000ff;">></span></pre> </div> <p>例如Digg的写法：</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="apple-itunes-app"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="app-id=362872995, affiliate-data=bevbOqLt02I, app-argument=digg://"</span><span style="color:#0000ff;">></span></pre> </div> <h5>忽略数字自动识别为电话号码</h5> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="format-detection"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="telephone=no"</span><span style="color:#0000ff;">></span></pre> </div> <h5>启用 WebApp 全屏模式</h5> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="apple-mobile-web-app-capable"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="yes"</span><span style="color:#0000ff;">></span></pre> </div> <h6>添加到主屏后设置状态栏的背景颜色</h6> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="apple-mobile-web-app-status-bar-style"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="black"</span><span style="color:#0000ff;">></span></pre> </div> <p>只有在 “apple-mobile-web-app-capable” content=”yes” 时生效。</p> <ul> <li>如果设置为 default 或 black ，网页内容从状态栏底部开始。</li> <li>如果设置为 black-translucent ，网页内容充满整个屏幕，顶部会被状态栏遮挡。</li> </ul> <h6>添加到主屏后的标题（iOS 6 新增）</h6> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="apple-mobile-web-app-title"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="App Title"</span><span style="color:#0000ff;">></span></pre> </div> <h5>iOS 图标</h5> <p>图片自动处理成圆角和高光等效果。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="apple-touch-icon"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/apple-touch-icon.png"</span><span style="color:#0000ff;">></span></pre> </div> <p>禁止系统自动添加效果，直接显示设计原图。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="apple-touch-icon-precomposed"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/apple-touch-icon-precomposed.png"</span><span style="color:#0000ff;">></span></pre> </div> <p>iOS 8+ 不再支持 precomposed, 只有 apple-touch-icon 是必须的<br>在大多数情况下，在head中一个180×180px的图标就足够了。如果您想要由设备确定的唯一图标，请使用不同大小的图标。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="apple-touch-icon"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="57x57"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/icon@57.png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="apple-touch-icon"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="72x72"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/icon@72.png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="apple-touch-icon"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="114x114"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/icon@114.png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="apple-touch-icon"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="144x144"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/icon@144.png"</span><span style="color:#0000ff;">></span></pre> </div> <h5>启动画面 ( 不赞成使用 )</h5> <p>iPad 的启动画面是不包括状态栏区域的，iPhone 和 iPod touch 的启动画面是包含状态栏区域的</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="apple-touch-startup-image"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/startup.png"</span><span style="color:#0000ff;">></span></pre> </div> <p>具体描述设置请查看http://www.css88.com/archives/5480中相应的说明。</p> <h5>iOS 应用深度链接</h5> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="apple-itunes-app"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="app-id=APP-ID, app-argument=http/url-sample.com"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="alternate"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="ios-app://APP-ID/http/url-sample.com"</span><span style="color:#0000ff;">></span></pre> </div> <h4>Google Android原生浏览器</h4> <h5>标签页选项卡颜色</h5> <p>Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。</p> <p>http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="theme-color"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="#db5945"</span><span style="color:#0000ff;">></span></pre> </div> <h5>添加到主屏</h5> <div class="cnblogs_code"> <pre><span style="color:#008000;"><!--</span><span style="color:#008000;"> 添加到主屏 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="mobile-web-app-capable"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="yes"</span><span style="color:#0000ff;">></span></pre> </div> <p>详细链接: https://developer.chrome.com/multidevice/android/installtohomescreen</p> <h5>安卓应用深度链接（网页上唤起应用）</h5> <div class="cnblogs_code"> <pre><span style="color:#008000;"><!--</span><span style="color:#008000;"> Android app deep linking </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="google-play-app"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="app-id=package-name"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="alternate"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="android-app://package-name/http/url-sample.com"</span><span style="color:#0000ff;">></span></pre> </div> <p>注：貌似没测试成功，如果你知道如何正确设置，欢迎留言斧正。</p> <h4>Apple Safari 浏览器</h4> <p>Safari 10开始支持固定书签页的SVG favicons了，你可以这样使用：</p> <div class="cnblogs_code"> <pre><span style="color:#008000;"><!--</span><span style="color:#008000;"> Pinned Site </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="mask-icon"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="path/to/icon.svg"</span><span style="color:#ff0000;"> color</span><span style="color:#0000ff;">="red"</span><span style="color:#0000ff;">></span></pre> </div> <p>类似的效果<br><br>扩展阅读：https://yoast.com/dev-blog/safari-pinned-tab-icon-mask-icon/</p> <h4>Google Chrome浏览器</h4> <h5>关闭chrome浏览器下翻译插件</h5> <p>有些时候感觉chrome浏览器下翻译插件很烦人，可以通过下面的代码禁用它。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="google"</span><span style="color:#ff0000;"> value</span><span style="color:#0000ff;">="notranslate"</span> <span style="color:#0000ff;">/></span><span style="font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;line-height:1.5;"> </span></pre> </div> <h5>chrome浏览器插件安装</h5> <p>有时候，你需要在你的页面上点击某个安卓，直接安卓你的chrome浏览器插件，而不是链接到Chrome webstore 的详细地址再安装，那么你可以使用：</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="chrome-webstore-item"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="https://chrome.google.com/webstore/detail/APP_ID"</span><span style="color:#0000ff;">></span></pre> </div> <p>具体使用，请查看：Using Inline Installation</p> <h4>Google Chrome Mobile (只针对 Android)</h4> <p>从 Chrome 31 开始，你可以设置你的 Web 应用为“app mode”，如 Safari。</p> <div class="cnblogs_code"> <pre><span style="color:#008000;"><!--</span><span style="color:#008000;"> 链接到一个 manifest 并定义 manifest 的元数据。</span><span style="color:#008000;">--></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> manifest.json 中的例子也可以通过以下链接找到。</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="manifest"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="manifest.json"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 定义你的网页为 Web 应用 </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="mobile-web-app-capable"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="yes"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 第一个是官方推荐格式。</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="icon"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="192x192"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="nice-highres.png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="icon"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="128x128"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="niceicon.png"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> 所有带 apple 前缀的格式已废弃，所以不要使用它们。</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="apple-touch-icon"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="128x128"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="niceicon.png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link </span><span style="color:#ff0000;">rel</span><span style="color:#0000ff;">="apple-touch-icon-precomposed"</span><span style="color:#ff0000;"> sizes</span><span style="color:#0000ff;">="128x128"</span><span style="color:#ff0000;"> href</span><span style="color:#0000ff;">="niceicon.png"</span><span style="color:#0000ff;">></span></pre> </div> <h4>Internet Explorer浏览器</h4> <h5>模式设置</h5> <div class="cnblogs_code"> <pre><span style="color:#000000;">//IE8以下以IE7标准模式呈现网页，而IE9则以IE9的标准模式呈现网页： </span><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="X-UA-Compatible"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="IE=EmulateIE7; IE=EmulateIE9"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> //如果安装了GCF，则使用GCF来渲染页面（"chrome=1"）， //如果没有安装GCF，则使用最高版本的IE内核进行渲染（"IE=edge"） </span><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="x-ua-compatible"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="ie=edge"</span><span style="color:#0000ff;">></span></pre> </div> <p>GCF（Google Chrome Frame ）相关链接：https://www.chromium.org/developers/how-tos/chrome-frame-getting-started</p> <p>X-UA-Compatible相关链接：https://blogs.msdn.microsoft.com/ie/2010/06/16/ies-compatibility-features-for-site-developers/</p> <h5>win8,win10下的一些设置</h5> <div class="cnblogs_code"> <pre><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">http-equiv</span><span style="color:#0000ff;">="cleartype"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="on"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="skype_toolbar"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="skype_toolbar_parser_compatible"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> Disable link highlighting on IE 10 on Windows Phone 具体说明查看：https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-tap-highlight"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="no"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> Pinned sites 具体说明查看：https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx</span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="application-name"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="Contoso Pinned Site Caption"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-tooltip"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="Example Tooltip Text"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-starturl"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="/"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-config"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="http://example.com/browserconfig.xml"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-allowDomainApiCalls"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="true"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-allowDomainMetaTags"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="true"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-badge"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="frequency=30; polling-uri=http://example.com/id45453245/polling.xml"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-navbutton-color"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="#FF3300"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-notification"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="frequency=60;polling-uri=http://example.com/livetile"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-square150x150logo"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="path/to/logo.png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-square310x310logo"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="path/to/largelogo.png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-square70x70logo"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="path/to/tinylogo.png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-wide310x150logo"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="path/to/widelogo.png"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-task"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-task-separator"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="1"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> //Windows 8 磁贴颜色 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-TileColor"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="#FF3300"</span><span style="color:#0000ff;">></span><span style="color:#000000;"> //Windows 8 磁贴图标 </span><span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-TileImage"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="path/to/tileimage.jpg"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">name</span><span style="color:#0000ff;">="msapplication-window"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="width=1024;height=768"</span><span style="color:#0000ff;">></span></pre> </div> <h3>APP 链接</h3> <div class="cnblogs_code"> <pre><span style="color:#008000;"><!--</span><span style="color:#008000;"> iOS </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">property</span><span style="color:#0000ff;">="al:ios:url"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="applinks://docs"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">property</span><span style="color:#0000ff;">="al:ios:app_store_id"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="12345"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">property</span><span style="color:#0000ff;">="al:ios:app_name"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="App Links"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> Android </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">property</span><span style="color:#0000ff;">="al:android:url"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="applinks://docs"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">property</span><span style="color:#0000ff;">="al:android:app_name"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="App Links"</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">property</span><span style="color:#0000ff;">="al:android:package"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="org.applinks"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> Web Fallback </span><span style="color:#008000;">--></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">meta </span><span style="color:#ff0000;">property</span><span style="color:#0000ff;">="al:web:url"</span><span style="color:#ff0000;"> content</span><span style="color:#0000ff;">="http://applinks.org/documentation"</span><span style="color:#0000ff;">></span> <span style="color:#008000;"><!--</span><span style="color:#008000;"> More info: http://applinks.org/documentation/ </span><span style="color:#008000;">--></span></pre> </div> <p>具体请查看：App Links Docs</p> </div> <p>转载于:https://www.cnblogs.com/BruceWan/p/5980670.html</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1752271840593592320"></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">你可能感兴趣的:(移动开发,前端,操作系统,ViewUI)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <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/1835509391361667072.htm" title="Linux下QT开发的动态库界面弹出操作（SDL2）" target="_blank">Linux下QT开发的动态库界面弹出操作（SDL2）</a> <span class="text-muted">13jjyao</span> <a class="tag" taget="_blank" href="/search/QT%E7%B1%BB/1.htm">QT类</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/sdl2/1.htm">sdl2</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口</div> </li> <li><a href="/article/1835502578050363392.htm" title="PHP环境搭建详细教程" target="_blank">PHP环境搭建详细教程</a> <span class="text-muted">好看资源平台</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这</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/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</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/javascript/1.htm">javascript</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/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</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/1835490974911000576.htm" title="python os 环境变量" target="_blank">python os 环境变量</a> <span class="text-muted">CV矿工</span> <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><a class="tag" taget="_blank" href="/search/numpy/1.htm">numpy</a> <div>环境变量：环境变量是程序和操作系统之间的通信方式。有些字符不宜明文写进代码里，比如数据库密码，个人账户密码，如果写进自己本机的环境变量里，程序用的时候通过os.environ.get（）取出来就行了。os.environ是一个环境变量的字典。环境变量的相关操作importos"""设置/修改环境变量：os.environ[‘环境变量名称’]=‘环境变量值’#其中key和value均为string类</div> </li> <li><a href="/article/1835469294436184064.htm" title="【从浅识到熟知Linux】Linux发展史" target="_blank">【从浅识到熟知Linux】Linux发展史</a> <span class="text-muted">Jammingpro</span> <a class="tag" taget="_blank" href="/search/%E4%BB%8E%E6%B5%85%E5%AD%A6%E5%88%B0%E7%86%9F%E7%9F%A5Linux/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>归属专栏：从浅学到熟知Linux个人主页：Jammingpro每日努力一点点，技术变化看得见文章前言：本篇文章记录Linux发展的历史，因在介绍Linux过程中涉及的其他操作系统及人物，本文对相关内容也有所介绍。文章目录Unix发展史Linux发展史开源Linux官网企业应用情况发行版本在学习Linux前，我们可能都会问Linux从哪里来？它是如何发展的。但在介绍Linux之前，需要先介绍一下Un</div> </li> <li><a href="/article/1835467782687387648.htm" title="linux 发展史" target="_blank">linux 发展史</a> <span class="text-muted">种树的猴子</span> <a class="tag" taget="_blank" href="/search/%E5%86%85%E6%A0%B8/1.htm">内核</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>linux发展史说明此前对linux认识模糊一知半解，近期通过学习将自己对于linux的发展总结一下方便大家日后的学习。那Linux是目前一款非常火热的开源操作系统，可是linux是什么时候出现的，又是因为什么样的原因被开发出来的呢。以下将对linux的发展历程进行详细的讲解。目录一、Linux发展背景二、UINIX的诞生三、UNIX的重要分支-BSD的诞生四、Minix的诞生五、GNU与Free</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/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>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835440421300432896.htm" title="2023最详细的Python安装教程（Windows版本）" target="_blank">2023最详细的Python安装教程（Windows版本）</a> <span class="text-muted">程序员林哥</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/windows/1.htm">windows</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安装是学习pyhon第一步，很多刚入门小白不清楚如何安装python，今天我来带大家完成python安装与配置，跟着我一步步来，很简单，你肯定能完成。第一部分：python安装（一）准备工作1、下载和安装python(认准官方网站)当然你不想去下载的话也可以分享给你，还有入门学习教程，点击下方卡片跳转进群领取（二）开始安装对于Windows操作系统，可以下载“executableins</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835432358141063168.htm" title="深入浅出 -- 系统架构之负载均衡Nginx的性能优化" target="_blank">深入浅出 -- 系统架构之负载均衡Nginx的性能优化</a> <span class="text-muted">xiaoli8748_软件开发</span> <a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a><a class="tag" taget="_blank" href="/search/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/1.htm">负载均衡</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>一、Nginx性能优化到这里文章的篇幅较长了，最后再来聊一下关于Nginx的性能优化，主要就简单说说收益最高的几个优化项，在这块就不再展开叙述了，毕竟影响性能都有多方面原因导致的，比如网络、服务器硬件、操作系统、后端服务、程序自身、数据库服务等，对于性能调优比较感兴趣的可以参考之前《JVM性能调优》中的调优思想。优化一：打开长连接配置通常Nginx作为代理服务，负责分发客户端的请求，那么建议开启H</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> <span class="text-muted">全能全知者</span> <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/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057279004672.htm" title="经纬恒润二面&三七互娱一面&元象二面" target="_blank">经纬恒润二面&三七互娱一面&元象二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.请尽可能详细地说明，进程和线程的区别，分别有哪些应用场景？进程间如何通信？线程间如何通信？你的回答中不要写出示例代码。进程和线程是操作系统中的两个基本概念，它们在计算机系统中扮演着不同的角色，并且在不同的应用场景中发挥作用。进程和线程的区别定义：进程：进程是操作系统进行资源分配和调度的基本单位。每个进程都有独立的内存空间和系统资源。线程：线程是进程内的一个执行单元，是操作系统进行调度的最小单位</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> <span class="text-muted">jun778895</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835400463676174336.htm" title="C++常见知识掌握" target="_blank">C++常见知识掌握</a> <span class="text-muted">nfgo</span> <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1.Linux软件开发、调试与维护内核与系统结构Linux内核是操作系统的核心，负责管理硬件资源，提供系统服务，它是系统软件与硬件之间的桥梁。主要组成部分包括：进程管理：内核通过调度器分配CPU时间给各个进程，实现进程的创建、调度、终止等操作。使用进程描述符（task_struct）来存储进程信息，包括状态（就绪、运行、阻塞等）、优先级、内存映射等。内存管理：包括物理内存和虚拟内存管理。通过页表映</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> <span class="text-muted">余生逆风飞翔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> <span class="text-muted">2401_85123349</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835383442339098624.htm" title="AUTO TECH 2025 广州国际汽车软件与安全技术展览会" target="_blank">AUTO TECH 2025 广州国际汽车软件与安全技术展览会</a> <span class="text-muted">ws201907</span> <a class="tag" taget="_blank" href="/search/%E6%B1%BD%E8%BD%A6/1.htm">汽车</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>AUTOTECH2025广州国际汽车软件与安全技术展览会ChinaGuangzhouSoftware-DefinedVehicleExpo2025亚洲领先的汽车软件与安全技术专业展会——是与来自世界各地的汽车工程师们交流的最佳平台！广州国际汽车软件与安全技术展览会是AUTOTECH2025华南展专题展之一，汇集了各种汽车嵌入式软件开发与应用、车载操作系统、智驾功能安全与SOTIF、基础软件平台、车</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> <span class="text-muted">九旬大爷的梦</span> <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835366671058038784.htm" title="python中文版软件下载-Python中文版" target="_blank">python中文版软件下载-Python中文版</a> <span class="text-muted">编程大乐趣</span> <div>python中文版是一种面向对象的解释型计算机程序设计语言。python中文版官网面向对象编程，拥有高效的高级数据结构和简单而有效的方法，其优雅的语法、动态类型、以及天然的解释能力，让它成为理想的语言。软件功能强大，简单易学，可以帮助用户快速编写代码，而且代码运行速度非常快，几乎可以支持所有的操作系统，实用性真的超高的。python中文版软件介绍：python中文版的解释器及其扩展标准库的源码和编</div> </li> <li><a href="/article/1835358230465835008.htm" title="关闭Windows自动更新的6种方法" target="_blank">关闭Windows自动更新的6种方法</a> <span class="text-muted">Gemini1995</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>在Windows操作系统中，可以使用多种方法来关闭自动更新。以下是其中一些常用的方法：使用设置应用：打开“设置”应用（Win+I），选择“更新和安全”。在左侧菜单中选择“Windows更新”。点击“更改活动时间”或“高级选项”。在“更新选项”下拉菜单中选择“通知我但不自动下载或安装”或“从不检查更新”。通过服务管理器：打开“服务”管理器，可以通过在运行对话框中输入services.msc来打开。找</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835352325032603648.htm" title="第三十一节:Vue路由:前端路由vs后端路由的了解" target="_blank">第三十一节:Vue路由:前端路由vs后端路由的了解</a> <span class="text-muted">曹老师</span> <div>1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访</div> </li> <li><a href="/article/1835350917352878080.htm" title="华雁智科前端面试题" target="_blank">华雁智科前端面试题</a> <span class="text-muted">因为奋斗超太帅啦</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86/1.htm">前端笔试面试问题整理</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l</div> </li> <li><a href="/article/33.htm" title="Spring的注解积累" target="_blank">Spring的注解积累</a> <span class="text-muted">yijiesuifeng</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E6%B3%A8%E8%A7%A3/1.htm">注解</a> <div>用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc</div> </li> <li><a href="/article/160.htm" title="传感器" target="_blank">传感器</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E4%BC%A0%E6%84%9F%E5%99%A8/1.htm">传感器</a> <div>android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void </div> </li> <li><a href="/article/287.htm" title="[光磁与探测]金吕玉衣的意义" target="_blank">[光磁与探测]金吕玉衣的意义</a> <span class="text-muted">comsci</span> <div>      这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代</div> </li> <li><a href="/article/414.htm" title="精简的反序打印某个数" target="_blank">精简的反序打印某个数</a> <span class="text-muted">沐刃青蛟</span> <a class="tag" taget="_blank" href="/search/%E6%89%93%E5%8D%B0/1.htm">打印</a> <div>以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;</div> </li> <li><a href="/article/541.htm" title="PHP：6种方法获取文件的扩展名" target="_blank">PHP：6种方法获取文件的扩展名</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%89%A9%E5%B1%95%E5%90%8D/1.htm">扩展名</a> <div>  PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr </div> </li> <li><a href="/article/668.htm" title="面试111" target="_blank">面试111</a> <span class="text-muted">文强chu</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div> 1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final</div> </li> <li><a href="/article/795.htm" title="XML的四种解析方式" target="_blank">XML的四种解析方式</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/dom/1.htm">dom</a><a class="tag" taget="_blank" href="/search/jdom/1.htm">jdom</a><a class="tag" taget="_blank" href="/search/dom4j/1.htm">dom4j</a><a class="tag" taget="_blank" href="/search/sax/1.htm">sax</a> <div>在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server </div> </li> <li><a href="/article/922.htm" title="wordpress中常见的操作" target="_blank">wordpress中常见的操作</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87%E6%B3%A8%E5%86%8C/1.htm">中文注册</a><a class="tag" taget="_blank" href="/search/wordpress/1.htm">wordpress</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E9%99%A4%E8%8F%9C%E5%8D%95/1.htm">移除菜单</a> <div>1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false </div> </li> <li><a href="/article/1049.htm" title="小飞飞学管理-1" target="_blank">小飞飞学管理-1</a> <span class="text-muted">alafqq</span> <a class="tag" taget="_blank" href="/search/%E7%AE%A1%E7%90%86/1.htm">管理</a> <div>项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指</div> </li> <li><a href="/article/1176.htm" title="IO输入输出部分探讨" target="_blank">IO输入输出部分探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/IO/1.htm">IO</a> <div>  //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt</div> </li> <li><a href="/article/1303.htm" title="getElementById的用法" target="_blank">getElementById的用法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/element/1.htm">element</a> <div>        getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法： &n</div> </li> <li><a href="/article/1430.htm" title="励志经典语录" target="_blank">励志经典语录</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E5%8A%B1%E5%BF%97/1.htm">励志</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E7%94%9F/1.htm">人生</a> <div>经典语录1:   哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生</div> </li> <li><a href="/article/1557.htm" title="[MongoDB学习笔记三]MongoDB分片" target="_blank">[MongoDB学习笔记三]MongoDB分片</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。 本篇介绍MongoDB的切片(Sharding)   1.何时需要分片 &nbs</div> </li> <li><a href="/article/1684.htm" title="【Spark八十三】BlockManager在Spark中的使用场景" target="_blank">【Spark八十三】BlockManager在Spark中的使用场景</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/manager/1.htm">manager</a> <div>1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan</div> </li> <li><a href="/article/1811.htm" title="yum方式部署zabbix" target="_blank">yum方式部署zabbix</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/yum%E6%96%B9%E5%BC%8F%E9%83%A8%E7%BD%B2zabbix/1.htm">yum方式部署zabbix</a> <div>安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-</div> </li> <li><a href="/article/1938.htm" title="Hibernate4和MySQL5.5自动创建表失败问题解决方法" target="_blank">Hibernate4和MySQL5.5自动创建表失败问题解决方法</a> <span class="text-muted">byalias</span> <a class="tag" taget="_blank" href="/search/J2EE/1.htm">J2EE</a><a class="tag" taget="_blank" href="/search/Hibernate4/1.htm">Hibernate4</a> <div>今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码 在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中</div> </li> <li><a href="/article/2065.htm" title="Netty源码学习-FrameDecoder" target="_blank">Netty源码学习-FrameDecoder</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 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec</div> </li> <li><a href="/article/2192.htm" title="SQL行列转换方法" target="_blank">SQL行列转换方法</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/%E8%A1%8C%E5%88%97%E8%BD%AC%E6%8D%A2/1.htm">行列转换</a> <div> create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93) </div> </li> <li><a href="/article/2319.htm" title="中文编码测试" target="_blank">中文编码测试</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81/1.htm">编码</a> <div>循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j </div> </li> <li><a href="/article/2446.htm" title="hive 客户端查询报堆内存溢出解决方法" target="_blank">hive 客户端查询报堆内存溢出解决方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/%E5%A0%86%E5%86%85%E5%AD%98%E6%BA%A2%E5%87%BA/1.htm">堆内存溢出</a> <div>hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space   问题原因： hive堆内存默认为256M   这个问题的解决方法为： 修改/us</div> </li> <li><a href="/article/2573.htm" title="人有多大懒，才有多大闲 (评论『卓有成效的程序员』)" target="_blank">人有多大懒，才有多大闲 (评论『卓有成效的程序员』)</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>  卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。   在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。 不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标</div> </li> <li><a href="/article/2700.htm" title="Eclipse简单有用的配置" target="_blank">Eclipse简单有用的配置</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers   2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation</div> </li> <li><a href="/article/2827.htm" title="在tomcat上面安装solr4.8.0全过程" target="_blank">在tomcat上面安装solr4.8.0全过程</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/Solr/1.htm">Solr</a><a class="tag" taget="_blank" href="/search/solr4.0%E5%90%8E%E7%9A%84%E7%89%88%E6%9C%AC%E5%AE%89%E8%A3%85/1.htm">solr4.0后的版本安装</a><a class="tag" taget="_blank" href="/search/solr4.8.0%E5%AE%89%E8%A3%85/1.htm">solr4.8.0安装</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2096478       首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了         第一步：当然是下载去官网上下载最新的solr版本，下载地址</div> </li> <li><a href="/article/2954.htm" title="Android APP通用型拒绝服务、漏洞分析报告" target="_blank">Android APP通用型拒绝服务、漏洞分析报告</a> <span class="text-muted">gg163</span> <a class="tag" taget="_blank" href="/search/%E6%BC%8F%E6%B4%9E/1.htm">漏洞</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/APP/1.htm">APP</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E6%9E%90/1.htm">分析</a> <div>点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。  0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。  针对序列化对象而出现的拒绝服务主要</div> </li> <li><a href="/article/3081.htm" title="HoverTree项目已经实现分层" target="_blank">HoverTree项目已经实现分层</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/ASP.ENT/1.htm">ASP.ENT</a> <div>HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对</div> </li> <li><a href="/article/3208.htm" title="Google Maps API v3: Remove Markers 移除标记" target="_blank">Google Maps API v3: Remove Markers 移除标记</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/google+maps+api/1.htm">google maps api</a> <div>Simply do the following:   I. Declare a global variable: var markersArray = [];   II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )</div> </li> <li><a href="/article/3335.htm" title="jQuery选择器总结" target="_blank">jQuery选择器总结</a> <span class="text-muted">lq38366</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E9%80%89%E6%8B%A9%E5%99%A8/1.htm">选择器</a> <div>  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40</div> </li> <li><a href="/article/3462.htm" title="基础数据结构和算法六：Quick sort" target="_blank">基础数据结构和算法六：Quick sort</a> <span class="text-muted">sunwinner</span> <a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/Quicksort/1.htm">Quicksort</a> <div>Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t</div> </li> <li><a href="/article/3589.htm" title="如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作" target="_blank">如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作</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/Web/1.htm">Web</a> <div>今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。 让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。 方法如下： </div> </li> <li><a href="/article/3716.htm" title="Mybatis实用Mapper SQL汇总示例" target="_blank">Mybatis实用Mapper SQL汇总示例</a> <span class="text-muted">wdmcygah</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E7%94%A8/1.htm">实用</a> <div>Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。 不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，</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>