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/1950232190038110208.htm" title="day15｜前端框架学习和算法" target="_blank">day15｜前端框架学习和算法</a> <span class="text-muted">universe_01</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的</div> </li> <li><a href="/article/1950193605276659712.htm" title="Flutter权限插件详解：permission_handler使用指南" target="_blank">Flutter权限插件详解：permission_handler使用指南</a> <span class="text-muted">AI移动开发前沿</span> <a class="tag" taget="_blank" href="/search/AI%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AE%9D%E5%85%B8/1.htm">AI移动端开发宝典</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>Flutter权限插件详解：permission_handler使用指南关键词：Flutter、权限插件、permission_handler、权限管理、移动开发摘要：本文围绕Flutter开发中常用的权限插件permission_handler展开详细介绍。首先阐述了在Flutter应用开发中处理权限的背景和重要性，接着深入解析permission_handler的核心概念、架构以及工作原理，通</div> </li> <li><a href="/article/1950191208873652224.htm" title="vue element 封装表单" target="_blank">vue element 封装表单</a> <span class="text-muted">影子信息</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进</div> </li> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> <span class="text-muted">浪子神剑</span> <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div> </li> <li><a href="/article/1950178477592342528.htm" title="前端数据库：IndexedDB从基础到高级使用指南" target="_blank">前端数据库：IndexedDB从基础到高级使用指南</a> <span class="text-muted"></span> <div>文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.</div> </li> <li><a href="/article/1950170537426743296.htm" title="在Windows11上安装Linux操作系统的几种技术方案" target="_blank">在Windows11上安装Linux操作系统的几种技术方案</a> <span class="text-muted">yuanpan</span> <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>在Windows11上安装Linux主要有以下几种技术方案，每种方案适用于不同的需求场景：1.WindowsSubsystemforLinux(WSL)适用场景：开发、命令行工具、轻量级Linux环境支持发行版：Ubuntu、Debian、KaliLinux、Fedora等优点：轻量级：无需虚拟机，直接在Windows上运行Linux命令行环境。无缝集成：可访问Windows文件系统，支持VSCo</div> </li> <li><a href="/article/1950169524384886784.htm" title="【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）" target="_blank">【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）</a> <span class="text-muted">笙囧同学</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认</div> </li> <li><a href="/article/1950169526440095744.htm" title="从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战" target="_blank">从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战</a> <span class="text-muted"></span> <div>作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：3251736703@qq.com各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是</div> </li> <li><a href="/article/1950164483057971200.htm" title="14.tornado操作之应用Websocket协议实现聊天室功能" target="_blank">14.tornado操作之应用Websocket协议实现聊天室功能</a> <span class="text-muted">孤寒者</span> <a class="tag" taget="_blank" href="/search/Tornado%E6%A1%86%E6%9E%B6%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%AE%9E%E6%88%98/1.htm">Tornado框架从入门到实战</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/tornado/1.htm">tornado</a><a class="tag" taget="_blank" href="/search/%E8%81%8A%E5%A4%A9%E5%AE%A4%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0/1.htm">聊天室功能实现</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二</div> </li> <li><a href="/article/1950163093577330688.htm" title="Linux中Samba服务器安装与配置文件" target="_blank">Linux中Samba服务器安装与配置文件</a> <span class="text-muted">長樂.-</span> <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>Samba简述27zkqsamba是一个基于TCP/IP协议的开源软件套件，可以在Linux、Windows、macOS等操作系统上运行。它允许不同操作系统的计算机之间实现文件和打印机共享。samba提供了一个服务，使得Windows操作系统可以像访问本地文件一样访问Linux、Mac等操作系统上的共享文件。实现跨平台的文件共享，提高办公环境的效率和便利性。samba也支持Windows网络邻居协</div> </li> <li><a href="/article/1950160572502831104.htm" title="Ubuntu24安装MariaDB/MySQL后不知道root密码如何解决" target="_blank">Ubuntu24安装MariaDB/MySQL后不知道root密码如何解决</a> <span class="text-muted"></span> <div>Ubuntu24.04安装MariaDB后root密码未知？解决方案在此在Ubuntu24.04上新安装MariaDB后，许多用户会发现自己不知道root用户的密码，甚至在安装过程中也没有提示设置密码。这是因为在较新的MariaDB版本中，默认情况下root用户采用了unix_socket身份验证插件。这意味着您可以使用操作系统的root用户权限直接登录MariaDB，而无需输入密码。本文将为您详</div> </li> <li><a href="/article/1950152503563710464.htm" title="如何在 Ubuntu 24.04 或 22.04 Linux 上安装和使用 NoMachine" target="_blank">如何在 Ubuntu 24.04 或 22.04 Linux 上安装和使用 NoMachine</a> <span class="text-muted">山岚的运维笔记</span> <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%E5%8F%8A%E4%BD%BF%E7%94%A8/1.htm">运维及使用</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/nomachine/1.htm">nomachine</a><a class="tag" taget="_blank" href="/search/%E8%BF%9C%E7%A8%8B%E8%BF%9E%E6%8E%A5/1.htm">远程连接</a> <div>NoMachine是一款适用于Linux（Ubuntu）及其他支持的操作系统的远程桌面应用程序，允许用户通过本地或远程系统从世界任何地方控制计算机。它可以在低带宽连接下工作，被专业人士和家庭用户广泛使用。NoMachine的主要功能高性能远程访问跨平台兼容性易于使用，因为用户界面友好提供强大的加密协议，如SSH、SSL及其他安全标准支持远程文件传输和打印服务允许从远程计算机进行音频和视频流媒体传输</div> </li> <li><a href="/article/1950144218282389504.htm" title="为什么学习Web前端一定要掌握JavaScript？" target="_blank">为什么学习Web前端一定要掌握JavaScript？</a> <span class="text-muted">web前端学习指南</span> <div>为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div> </li> <li><a href="/article/1950143305194991616.htm" title="小架构step系列25：错误码" target="_blank">小架构step系列25：错误码</a> <span class="text-muted">秋千码途</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有</div> </li> <li><a href="/article/1950140903616212992.htm" title="Java朴实无华按天计划从入门到实战（强化速战版-66天）" target="_blank">Java朴实无华按天计划从入门到实战（强化速战版-66天）</a> <span class="text-muted">岫珩</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E5%AE%89%E6%8E%92/1.htm">时间安排</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%A1%E5%88%92/1.htm">学习计划</a> <div>致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1</div> </li> <li><a href="/article/1950133464426672128.htm" title="OpenCloudOS 城市行·成都站圆满落幕，共探操作系统技术新未来！" target="_blank">OpenCloudOS 城市行·成都站圆满落幕，共探操作系统技术新未来！</a> <span class="text-muted">CSDN资讯</span> <a class="tag" taget="_blank" href="/search/%E4%B8%9A%E7%95%8C%E8%B5%84%E8%AE%AF/1.htm">业界资讯</a><a class="tag" taget="_blank" href="/search/%E8%B5%84%E8%AE%AF/1.htm">资讯</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>7月26日，由OpenCloudOS社区主办，海光信息战略合作的OpenCloudOS城市行・成都站活动在成都欧洲中心圆满举办，线上观看人次超3万。当前，数字化浪潮席卷全球各行各业，在国产化进程加速的背景下，操作系统的技术突破与生态构建不仅是保障信息安全的关键，更是推动产业升级、实现高质量发展的必由之路。然而，国产操作系统在性能优化、安全防护、多场景适配等方面仍面临诸多挑战，亟需产业链上下游协同创</div> </li> <li><a href="/article/1950132582964326400.htm" title="涵盖轻量级锁（SpinLock）与操作系统同步原语（如 CRITICAL_SECTION）的性能优化、Monitor 的原子性和数据竞争防护、Monitor.Wait 和 Pulse 在生产者-消费者" target="_blank">涵盖轻量级锁（SpinLock）与操作系统同步原语（如 CRITICAL_SECTION）的性能优化、Monitor 的原子性和数据竞争防护、Monitor.Wait 和 Pulse 在生产者-消费者</a> <span class="text-muted">zhxup606</span> <a class="tag" taget="_blank" href="/search/C%23%E5%AE%9E%E6%88%98%E6%95%99%E7%A8%8B/1.htm">C#实战教程</a><a class="tag" taget="_blank" href="/search/%E6%9D%8E%E5%B7%A5%E7%AF%87/1.htm">李工篇</a><a class="tag" taget="_blank" href="/search/wpf/1.htm">wpf</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/C%23/1.htm">C#</a> <div>涵盖轻量级锁（SpinLock）与操作系统同步原语（如CRITICAL_SECTION）的性能优化、Monitor的原子性和数据竞争防护、Monitor.Wait和Pulse在生产者-消费者中的作用、控制线程执行顺序、Thread.Join的含义、避免嵌套锁的锁顺序策略，以及防止伪唤醒的条件检查。每个问题包括核心概念、实现细节、与之前讨论的关联（如线程池、进程间同步、分布式同步）、代码示例、测试用</div> </li> <li><a href="/article/1950132204336115712.htm" title="《跨域资源共享CORS的深层逻辑与前端实践精要》" target="_blank">《跨域资源共享CORS的深层逻辑与前端实践精要》</a> <span class="text-muted"></span> <div>不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了</div> </li> <li><a href="/article/1950131321980383232.htm" title="深入了解 Kubernetes（k8s）：从概念到实践" target="_blank">深入了解 Kubernetes（k8s）：从概念到实践</a> <span class="text-muted"></span> <div>目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带</div> </li> <li><a href="/article/1950121240370933760.htm" title="群晖 File Station：集中浏览与管理 NAS 文件的工具" target="_blank">群晖 File Station：集中浏览与管理 NAS 文件的工具</a> <span class="text-muted">Trihawk宇麦科技</span> <a class="tag" taget="_blank" href="/search/%E7%BE%A4%E6%99%96NAS/1.htm">群晖NAS</a> <div>FileStation是SynologyDSM（DiskStationManager）操作系统中的核心内建应用，以网页形式提供友好的图形界面，供用户在浏览器中管理NAS上的文件和共享资料核心功能特色1.文件浏览与管理Navigate文件夹、执行拖放上传、剪贴、重命名、移动、删除等常用操作，类似WindowsExplorer或macOSFinder的使用体验，直观且便捷支持批量操作、压缩与解压、多文</div> </li> <li><a href="/article/1950119224630374400.htm" title="大厂都在用的前端缓存策略，你掌握了吗？" target="_blank">大厂都在用的前端缓存策略，你掌握了吗？</a> <span class="text-muted">AI架构全栈开发实战笔记</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文</div> </li> <li><a href="/article/1950115062781898752.htm" title="26. 什么是雪碧图，作用和原理了解吗" target="_blank">26. 什么是雪碧图，作用和原理了解吗</a> <span class="text-muted">yqcoder</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</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> <div>总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不</div> </li> <li><a href="/article/1950114557917720576.htm" title="Windows系统第一次运行C语言程序，环境配置，软件安装等遇到的坑及解决方法" target="_blank">Windows系统第一次运行C语言程序，环境配置，软件安装等遇到的坑及解决方法</a> <span class="text-muted">灬爱码士灬</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>明确需要编辑器和编译器，并选择自己要用什么（我选的编辑器是VSCode：VisualStudioCode；编译器是gcc）下载VSCode并配置环境变量（这里没啥问题），安装C/C++的拓展安装Cygwin，用来在Windows操作系统上模拟Unix/Linux环境（Cygwin官网：https://www.cygwin.com/。）安装过程中镜像可以选择https://mirrors.aliyu</div> </li> <li><a href="/article/1950112039502409728.htm" title="H5UI微信小程序前端框架实战指南" target="_blank">H5UI微信小程序前端框架实战指南</a> <span class="text-muted">ai</span> <div>本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下</div> </li> <li><a href="/article/1950108839089074176.htm" title="Windows下Oracle安装图解" target="_blank">Windows下Oracle安装图解</a> <span class="text-muted">叫我老村长</span> <div>Windows下Oracle安装图解----oracle-win-64-11g详细安装步骤一、Oracle下载官方下地址http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.htmlwin32位操作系统下载地址：http://download.oracle.com/otn/nt/oracle11g</div> </li> <li><a href="/article/1950104854819041280.htm" title="Ubuntu安装LAMP" target="_blank">Ubuntu安装LAMP</a> <span class="text-muted">L_h1</span> <a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95/1.htm">测试</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>在安装vim时遇到了一个问题：E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend)，是否有其他进程正占用它？解决办法：强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud</div> </li> <li><a href="/article/1950104727928762368.htm" title="震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！" target="_blank">震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！</a> <span class="text-muted">coding随想</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><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/html5/1.htm">html5</a> <div>一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入</div> </li> <li><a href="/article/1950094764498022400.htm" title="Coze Studio 架构拆解：AI Agent 开发平台项目结构全分析" target="_blank">Coze Studio 架构拆解：AI Agent 开发平台项目结构全分析</a> <span class="text-muted">代码简单说</span> <a class="tag" taget="_blank" href="/search/2025%E5%BC%80%E5%8F%91%E5%BF%85%E5%A4%87%28%E9%99%90%E6%97%B6%E7%89%B9%E6%83%A0%29/1.htm">2025开发必备(限时特惠)</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/Coze/1.htm">Coze</a><a class="tag" taget="_blank" href="/search/Studio/1.htm">Studio</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/Agent/1.htm">Agent</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E5%B9%B3%E5%8F%B0/1.htm">开发平台</a><a class="tag" taget="_blank" href="/search/%E5%85%A8%E6%A0%88/1.htm">全栈</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E7%A8%8B%E5%8C%96/1.htm">工程化</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E8%A7%A3%E6%9E%B6%E6%9E%84/1.htm">图解架构</a> <div>CozeStudio架构拆解：AIAgent开发平台项目结构全分析标签：CozeStudio项目架构、领域驱动设计DDD、全栈开发规范、Hertz框架、前后端协作、云原生容器、前端测试、IDL接口设计、微服务解耦、AI开发平台源码分析在最近研究AIAgent开发平台的过程中，我深入分析了刚刚开源的CozeStudio项目。这套系统是国内少有的开源全栈AI工程化项目，代码整洁、架构先进，特别是它基于</div> </li> <li><a href="/article/1950075480849838080.htm" title="关于前端的性能优化" target="_blank">关于前端的性能优化</a> <span class="text-muted"></span> <div>性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C</div> </li> <li><a href="/article/1950059723604684800.htm" title="linux网卡显示未知未托管,linux有线网络显示设备未托管" target="_blank">linux网卡显示未知未托管,linux有线网络显示设备未托管</a> <span class="text-muted"></span> <div>NetworkManagerNetworkManager是为了使网络配置尽可能简单而开发的网络管理软件包，如果使用DHCP，NetworkManager会替换默认的路由表、从DHCP服务器获取IP地址并根据情况设置域名服务器，NetworkManager的目标是使网络能够开箱即用。NetworkManager由两部分组成:一个以超级用户运行的守护进程(network-manager)；一个前端管理</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>