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/1899463248860737536.htm" title="Docker安装与配置详解指南" target="_blank">Docker安装与配置详解指南</a> <span class="text-muted">Bonita Tang</span> <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>Docker作为一款开源的应用容器引擎，通过打包应用及其依赖到一个可移植的容器中，实现了标准化的软件交付和部署流程，极大地提高了开发效率和运维的灵活性。本文将详尽地介绍如何在不同操作系统上安装Docker，并进行基本的配置，让你从零开始，快速上手Docker。Docker配置文件下载地址：https://download.csdn.net/download/qq_42072014/89481207</div> </li> <li><a href="/article/1899456187938697216.htm" title="基于vue3实现的聊天机器人前端（附代码）" target="_blank">基于vue3实现的聊天机器人前端（附代码）</a> <span class="text-muted">P7进阶路</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>跟它说说话吧！一个活泼的伙伴，为你提供情感支持！??发送消息！import{ref,onMounted}from'vue';import{v4asuuidv4}from'uuid';//引入UUID生成库//响应式数据constmessage=ref('');//用户输入的消息constchatbox=ref(null);//聊天记录显示区的引用constchatId=ref(uuidv4());</div> </li> <li><a href="/article/1899443585930031104.htm" title="Vue-前端发展史" target="_blank">Vue-前端发展史</a> <span class="text-muted">lengzher_5601</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a> <div>文章目录Vue-前端发展史二、前端发展史1、UI框架2、JavaScript构建工具3、三端同一4、后端技术5、主流前端框架混合开发微信小程序Vue-前端发展史二、前端发展史1、UI框架Ant-Design：阿里巴巴出品，基于React的UI框架ElementUI、iview、ice：饿了么出品，基于Vue的UI框架BootStrap：Teitter推出的一个用于前端开发的开源工具包AmazeUI</div> </li> <li><a href="/article/1899442703771430912.htm" title="用 Claude3.5 从零写扫雷游戏-实现蜂窝地图" target="_blank">用 Claude3.5 从零写扫雷游戏-实现蜂窝地图</a> <span class="text-muted">selfboot0</span> <a class="tag" taget="_blank" href="/search/AI%E7%BC%96%E7%A8%8B/1.htm">AI编程</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a><a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</a> <div>上一篇用Claude3.5从零写扫雷游戏-基本功能篇中，在Claude3.5的帮助下，我这前端小白也基本完成了一个完整的扫雷游戏。不过只是传统的方格扫雷，如果换成蜂窝扫雷游戏，Claude3.5能实现吗？先来看成果吧，可以在在线扫雷游戏中体验：Claude3.5蜂窝扫雷实现考虑到前面已经实现了基本的方格扫雷，并且我们很机智的把逻辑，渲染，UI组件都分开了。那么实现蜂窝状的扫雷，也可以按照这个思路来</div> </li> <li><a href="/article/1899438534327070720.htm" title="Web前端发展史" target="_blank">Web前端发展史</a> <span class="text-muted">王珍岩</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>1、静态页面阶段那是1990年的12月25日，恰是西方的圣诞节，TimBerners-Lee在他的NeXT电脑上部署了第一套“主机-网站-浏览器”构成的Web系统，这标志BS架构的网站应用软件的开端，也是前端工程的开端。1993年4月Mosaic浏览器作为第一款正式的浏览器发布。1994年11月，鼎鼎大名的Navigator浏览器发布发布了，到年底W3C在Berners-Lee的主持下成立，标志着</div> </li> <li><a href="/article/1899436895264370688.htm" title="JavaEE 项目常见错误解决方案" target="_blank">JavaEE 项目常见错误解决方案</a> <span class="text-muted">一弦一柱</span> <a class="tag" taget="_blank" href="/search/JavaEE/1.htm">JavaEE</a><a class="tag" taget="_blank" href="/search/%E5%B8%B8%E8%A7%81%E9%94%99%E8%AF%AF/1.htm">常见错误</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">中文乱码</a><a class="tag" taget="_blank" href="/search/JSP/1.htm">JSP</a><a class="tag" taget="_blank" href="/search/404/1.htm">404</a> <div>JavaEE项目常见错误解决方案数据库连接JavaBean获取不到数据库字段值或出现意料之外的值业务中出现null或""404NOTFOUNDGET请求中文乱码form表单提交中文乱码最近的实训中，练了一个比较基础的项目，JSP+Servlet+JavaBean，完成两张表的CRUD操作，前端使用Bootstrap和JQuery，交互使用AJAX，IDE选用Eclipse,在时间比较仓促的情况下完</div> </li> <li><a href="/article/1899435379816198144.htm" title="前端框架的发展史" target="_blank">前端框架的发展史</a> <span class="text-muted">Qpeterqiufengyi</span> <a class="tag" taget="_blank" href="/search/%E4%B8%93%E6%9C%89%E5%90%8D%E8%AF%8D%E8%A7%A3%E9%87%8A/1.htm">专有名词解释</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>1、htmlcss+div从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。1994</div> </li> <li><a href="/article/1899432100508004352.htm" title="前端 UI 框架发展史" target="_blank">前端 UI 框架发展史</a> <span class="text-muted">之道前端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9/1.htm">前端知识点</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>上一小节我们了解了前端UI框架的作用和意义，接下来我们再来了解前端UI框架的发展历史。虽然是讲历史，但我不想讲得太复杂，也不打算搞什么编年史记录啥的，毕竟我们不是来学历史的。我会简单描述一下前端UI框架的发展历程，同时在这个过程中，把我自己的一些感受和想法分享给你。你可以以轻松娱乐的心态来看这篇文章，同时也大概了解一下我们前端开发是怎么发展到现在这样子的。这样可以让你更好地去理解将要学习的前端UI</div> </li> <li><a href="/article/1899417099495862272.htm" title="600条最强 Linux 命令总结（非常详细）零基础入门到精通，收藏这一篇就够了" target="_blank">600条最强 Linux 命令总结（非常详细）零基础入门到精通，收藏这一篇就够了</a> <span class="text-muted">网安导师小李</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>一、基本命令uname-m显示机器的处理器架构uname-r显示正在使用的内核版本dmidecode-q显示硬件系统部件(SMBIOS/DMI)hdparm-i/dev/hda罗列一个磁盘的架构特性hdparm-tT/dev/sda在磁盘上执行测试性读取操作系统信息arch显示机器的处理器架构uname-m显示机器的处理器架构uname-r显示正在使用的内核版本dmidecode-q显示硬件系统部</div> </li> <li><a href="/article/1899416342138777600.htm" title="如何在PHP中实现API版本管理：保持向后兼容性" target="_blank">如何在PHP中实现API版本管理：保持向后兼容性</a> <span class="text-muted">奥顺互联V</span> <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>如何在PHP中实现API版本管理：保持向后兼容性在现代Web开发中，API（应用程序编程接口）是连接前端和后端的关键桥梁。随着业务需求的不断变化，API的版本管理变得尤为重要。良好的版本管理策略不仅能够确保新功能的顺利引入，还能保持向后兼容性，避免对现有客户端造成破坏性影响。本文将探讨如何在PHP中实现API版本管理，并保持向后兼容性。1.为什么需要API版本管理？API版本管理的主要目的是在不破</div> </li> <li><a href="/article/1899412180600680448.htm" title="Web端测试时，接口返回200，页面有没显示，可能时什么原因？" target="_blank">Web端测试时，接口返回200，页面有没显示，可能时什么原因？</a> <span class="text-muted">海姐软件测试</span> <a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>需从系统架构、前后端交互、测试方法三个维度展开分析，结合具体场景给出可落地的排查方案：一、核心原因分析（按优先级排序）前端渲染异常JS脚本执行错误（如语法错误导致页面渲染中断）DOM元素未正确加载（XHR异步请求未完成时触发渲染）CSS样式冲突（display:none/visibility:hidden导致元素不可见）数据解析错误接口返回字段缺失（如缺少关键展示字段id）数据格式不符合预期（如字</div> </li> <li><a href="/article/1899400197226688512.htm" title="我与DeepSeek读《大型网站技术架构》（3）" target="_blank">我与DeepSeek读《大型网站技术架构》（3）</a> <span class="text-muted">诺亚凹凸曼</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>大型网站架构的核心要素《大型网站技术架构：核心原理与案例分析》第三章聚焦于大型网站架构的核心要素，从技术维度剖析了构建高可用、高性能、可扩展系统的关键设计方向。1.五大核心架构要素(1)性能（Performance）目标：快速响应用户请求，优化用户体验。关键策略：前端优化：CDN加速静态资源、合并压缩JS/CSS、浏览器缓存。服务端优化：缓存（Redis/Memcached）、异步处理（消息队列）</div> </li> <li><a href="/article/1899397170772111360.htm" title="JavaScript模块化开发的演进历程" target="_blank">JavaScript模块化开发的演进历程</a> <span class="text-muted">IronKee</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</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>写在前面的话js模块化历程记录了js模块化思想的诞生与变迁历史不是过去，历史正在上演，一切终究都会成为历史拥抱变化，面向未来延伸阅读-JavaScript诞生（这也解释了JS为何一开始没有模块化）JavaScript因为互联网而生，紧随着浏览器的出现而问世1990年底，欧洲核能研究组织（CERN）科学家Tim，发明了万维网（WorldWideWeb），最早的网页只能在操作系统的终端里浏览，非常不方</div> </li> <li><a href="/article/1899384937878974464.htm" title="Dash 简介" target="_blank">Dash 简介</a> <span class="text-muted">tankusa</span> <a class="tag" taget="_blank" href="/search/dash/1.htm">dash</a> <div>Dash是一个基于Python的开源框架，专门用于构建数据分析和数据可视化的Web应用程序。Dash由Plotly团队开发，旨在帮助数据分析师、数据科学家和开发人员快速创建交互式的、基于数据的Web应用，而无需深入掌握前端技术（如HTML、CSS和JavaScript）。Dash的核心优势在于其简单易用性和强大的功能。通过Dash，用户可以使用纯Python代码来构建复杂的Web应用，而无需编写繁</div> </li> <li><a href="/article/1899375098146648064.htm" title="Zookeeper【概念（集中式到分布式、什么是分布式 、CAP定理 、什么是Zookeeper、应用场景、为什么选择Zookeeper 、基本概念） 】(一)-全面详解（学习总结---从入门到深化）" target="_blank">Zookeeper【概念（集中式到分布式、什么是分布式 、CAP定理 、什么是Zookeeper、应用场景、为什么选择Zookeeper 、基本概念） 】(一)-全面详解（学习总结---从入门到深化）</a> <span class="text-muted">童小纯</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%A4%A7%E5%85%A8---%E5%85%A8%E9%9D%A2%E8%AF%A6%E8%A7%A3/1.htm">中间件大全---全面详解</a><a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>作者简介：大家好，我是小童，Java开发工程师，CSDN博客博主，Java领域新星创作者系列专栏：前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步如果感觉博主的文章还不错的话，请三连支持一下博主哦博主正在努力完成2023计划中：以梦为马，扬帆起航，2023追梦人目录Zookeeper概念_集中式到分布</div> </li> <li><a href="/article/1899366676525281280.htm" title="Yarn：包管理优化与工作空间的最佳实践" target="_blank">Yarn：包管理优化与工作空间的最佳实践</a> <span class="text-muted"></span> <div>在现代前端开发中，包管理工具是不可或缺的工具之一。Yarn作为一个快速、可靠且安全的包管理工具，相对于npm，提供了一些独特的功能和优化，尤其是在工作空间管理和性能优化方面尤为突出。本文将深入探讨Yarn的专业使用，包括其工作空间的强大功能、性能优化技术以及在大型项目中的最佳实践。Yarn简介Yarn是由Facebook开发的一个JavaScript包管理工具，它旨在解决npm的一些关键问题，如安</div> </li> <li><a href="/article/1899361476049694720.htm" title="数字IC前端设计究竟怎样？薪资前景如何？" target="_blank">数字IC前端设计究竟怎样？薪资前景如何？</a> <span class="text-muted">IC观察者</span> <a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E6%88%90%E7%94%B5%E8%B7%AF/1.htm">集成电路</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E6%8B%9FIC/1.htm">模拟IC</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E6%8B%9F%E7%89%88%E5%9B%BE/1.htm">模拟版图</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E6%8B%9F%E7%89%88%E5%9B%BE%E5%85%A5%E9%97%A8/1.htm">模拟版图入门</a> <div>数字ic前端岗位介绍：数字ic前端设计处于数字IC设计流程的前端，属于数字IC设计类岗位的一种。数字ic前端设计主要分成几种层次的设计：IPlevel，unitlevel，fullchip/SoClevel，gatelevel等。作为数字IC前端工程师，为了让写的RTL代码没有bug，会经常与验证工程师要求debugcase；为了了解芯片整体架构和功能属性，还要与架构工程师打交道；还要与后端工程师</div> </li> <li><a href="/article/1899360717161689088.htm" title="tauri + vue3 如何实现在一个页面上局部加载外部网页？" target="_blank">tauri + vue3 如何实现在一个页面上局部加载外部网页？</a> <span class="text-muted">bug菌¹</span> <a class="tag" taget="_blank" href="/search/%E5%85%A8%E6%A0%88Bug%E8%B0%83%E4%BC%98%28%E5%AE%9E%E6%88%98%E7%89%88%29/1.htm">全栈Bug调优(实战版)</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/CSDN%E9%97%AE%E7%AD%94%E8%A7%A3%E6%83%91%28%E5%85%A8%E6%A0%88%E7%89%88%29/1.htm">CSDN问答解惑(全栈版)</a><a class="tag" taget="_blank" href="/search/tauri/1.htm">tauri</a><a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a> <div>本文收录于「Bug调优」专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！问题描述  tauriv1（1.6左右）+vue3我想在vue3前端页面上在一个页面而不是window.open打开一个新的窗口去加载外部网页我想在一个页面中局部中间加载一个外部网页（试过</div> </li> <li><a href="/article/1899359709018779648.htm" title="有趣的学习Python-第十篇：Python的“魔法宝库”：标准库之旅" target="_blank">有趣的学习Python-第十篇：Python的“魔法宝库”：标准库之旅</a> <span class="text-muted">王盼达</span> <a class="tag" taget="_blank" href="/search/%E6%9C%89%E8%B6%A3%E7%9A%84%E5%AD%A6%E4%B9%A0Python/1.htm">有趣的学习Python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Python不仅是一门强大的编程语言，更像是一座充满宝藏的“魔法宝库”，里面装满了各种各样的“魔法工具”（标准库）。这些“魔法工具”可以帮助你轻松地完成各种任务，从文件操作到网络编程，从数据处理到性能优化。接下来，让我们一起探索Python的“魔法宝库”，看看这些“魔法工具”到底有多神奇！10.1操作系统接口：与“魔法世界”互动os模块就像是一个“魔法接口”，可以帮助你与操作系统进行互动。你可以用</div> </li> <li><a href="/article/1899350382295969792.htm" title="Monorepo与pnpm：前端项目管理的完美搭档" target="_blank">Monorepo与pnpm：前端项目管理的完美搭档</a> <span class="text-muted">秋の本名</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/pnpm/1.htm">pnpm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/mojo/1.htm">mojo</a> <div>一、什么是pnpmpnpm又称performantnpm，翻译过来就是高性能的npm。1.节省磁盘空间提高安装效率pnpm通过使用硬链接和符号链接（又称软链接）的方式来避免重复安装以及提高安装效率。硬链接：和原文件共用一个磁盘地址，相当于别名的作用，如果更改其中一个内容，另一个也会跟着改变符号链接（软链接）：是一个新的文件，指向原文件路径地址，类似于快捷方式官网原话：当使用npm时，如果你有100</div> </li> <li><a href="/article/1899349620543254528.htm" title="CentOS停更；阿里发布全新操作系统（Anolis OS）" target="_blank">CentOS停更；阿里发布全新操作系统（Anolis OS）</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> <div>镜像下载、域名解析、时间同步请点击阿里云开源镜像站Linux系统对于Java程序员来说，就好比“乞丐手里的碗”，任何业务都离不开他的身影，因为服务端的广泛使用，也因此衍生出了各种不同的发行版，其中我个人用的最多、且最喜欢的就是CentOS；不幸的是，2021年底CentOS8宣布停止了维护；不过，喜欢CentOS的朋友们不用为此而难过；21年的云栖大会上，阿里云发布全新操作系统“龙蜥”（Anoli</div> </li> <li><a href="/article/1899343573246078976.htm" title="web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript" target="_blank">web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript</a> <span class="text-muted">IT-司马青衫</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>‍静态网站的编写主要是用HTMLDⅣV+CSSJS等来完成页面的排版设计‍，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。精彩专栏推荐【作者主页——获取更多优质源码】【web前端期末大作业——毕设项目精品实战案例(1</div> </li> <li><a href="/article/1899339285023223808.htm" title="Webpack打包构建流程" target="_blank">Webpack打包构建流程</a> <span class="text-muted">码上跑步</span> <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>webpack的打包构建流程为什么需要打包？在前端有非常多的资源，如css、js、vue、vue、图片、字体等。有些资源需要加工处理1.ts->jsts-loader2.css->css-loader+style-loader3.图片->file-loader+url-loader4.html->html-webpack-plugin需要对产物进行优化optimization（webpack优化配</div> </li> <li><a href="/article/1899338906130771968.htm" title="webpack" target="_blank">webpack</a> <span class="text-muted">码上跑步</span> <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>webpack介绍webpack是一个构建工具,实现了模块化管理项目.他的工作方式是用各种loader将各种资源转化为js文件或者对js文件进行压缩编译亦或对静态资源进行处理.官网:webpack由来模块化存在一些问题1.ESM的兼容性问题2.模块文件过多,网络请求频繁3.前端的所有资源包括html和css都需要模块化构建工具应运而生,需要一个集编译,模块打包,支持不同的资源的模块打包工具.Web</div> </li> <li><a href="/article/1899333108369518592.htm" title="前端实现版本更新自动检测✅" target="_blank">前端实现版本更新自动检测✅</a> <span class="text-muted">水煮白菜王</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</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><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> <div>作者简介：水煮白菜王，一位资深前端劝退师文章专栏：前端专栏，记录一下平时在博客写作中，总结出的一些开发技巧和知识归纳总结✍。感谢支持目录一、背景二、实现原理2.1逻辑2.2一些好处三、具体实现3.1工程化封装3.2关键方法解析脚本哈希获取：对比逻辑：四、全部代码4.1vue34.2vue2五、注意事项与常见问题5.1可能出现的问题5.2浏览器兼容方案一、背景在现代Web应用中，部署前端版本更新后及</div> </li> <li><a href="/article/1899333110311481344.htm" title="什么是XSS" target="_blank">什么是XSS</a> <span class="text-muted">藤原千花的败北</span> <a class="tag" taget="_blank" href="/search/web%E6%BC%8F%E6%B4%9E/1.htm">web漏洞</a><a class="tag" taget="_blank" href="/search/xss/1.htm">xss</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a> <div>文章目录前言1.前端知识2.什么是XSS3.漏洞挖掘4.参考前言之前对XSS的理解就是停留在弹窗，认为XSS这种漏洞真的是漏洞吗？安全学习了蛮久了，也应该对XSS有更进一步的认识了。1.前端知识现代浏览器是一个高度复杂的软件系统，由多个核心组件协同工作，旨在高效、安全地呈现网页内容并执行交互逻辑。对一般用户来讲，其主要功能就是向服务器发出请求，在窗口中展示用户所选择的网络资源。这里所说的资源一般是</div> </li> <li><a href="/article/1899329200700059648.htm" title="springMVC RestFul接口设计模式详解，包括前后端设计详解。@GetMapping、@PostMapping、@PutMapping@DeleteMapping@PathVariable" target="_blank">springMVC RestFul接口设计模式详解，包括前后端设计详解。@GetMapping、@PostMapping、@PutMapping@DeleteMapping@PathVariable</a> <span class="text-muted">漫慢丶</span> <a class="tag" taget="_blank" href="/search/springmvc/1.htm">springmvc</a><a class="tag" taget="_blank" href="/search/restful/1.htm">restful</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>目录1、什么是RestFul接口设计模式2、使用该接口设计模式后端还需要配置什么3、使用该接口设计模式前端需要注意什么4、Controller具体实现方式1、什么是RestFul接口设计模式RestFul这是一种springmvc接口的设计模式，用来区别不同类型的请求，来匹配控制器处理映射。例如请求URL为/test/那么中根据Get、put、post等请求方式，就可以具体映射到对应的控制器方法。</div> </li> <li><a href="/article/1899328443783376896.htm" title="学习笔记09——并发编程之线程基础" target="_blank">学习笔记09——并发编程之线程基础</a> <span class="text-muted">码代码的小仙女</span> <a class="tag" taget="_blank" href="/search/%E9%AB%98%E7%BA%A7%E5%BC%80%E5%8F%91%E5%BF%85%E5%A4%87%E6%8A%80%E8%83%BD/1.htm">高级开发必备技能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>线程基础1.1进程与线程的区别，Java中线程的实现（用户线程与内核线程）进程是操作系统分配资源的基本单位，而线程是CPU调度的基本单位。每个进程有独立的内存空间，而同一进程内的线程共享内存.可以从资源分配、切换开销、通信方式和独立性四个方面来比较两者的区别资源分配进程：操作系统分配资源（如内存、文件句柄等）的基本单位，拥有独立的地址空间。线程：隶属于进程，共享进程的资源（如内存、文件等），是CP</div> </li> <li><a href="/article/1899325164030586880.htm" title="C语言开发以及维护用到的工具简介" target="_blank">C语言开发以及维护用到的工具简介</a> <span class="text-muted">812503533</span> <a class="tag" taget="_blank" href="/search/%E8%93%A6%E7%84%B6%E5%9B%9E%E9%A6%96---%E5%86%8D%E7%9C%8BC%E8%AF%AD%E8%A8%80/1.htm">蓦然回首---再看C语言</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>C语言作为一门经典的编程语言，广泛应用于系统编程、嵌入式开发、操作系统内核等领域。经过第一部分的介绍，已经可以实现一些最简单的功能了，比如文字版本的计算器，猜数字小游戏，通过调整输出格式从而输出优美的图形等等，那么在未来的实际使用中，使用一些什么工具去进行c语言的编辑，查看，编译，运行等等，本文将做简单的介绍，后续再慢慢完善相关的内容。1、编辑器所有语言在编写的时候使用的工具就叫做编辑器，C语言程</div> </li> <li><a href="/article/1899317091039768576.htm" title="【推荐项目】 043-停车管理系统" target="_blank">【推荐项目】 043-停车管理系统</a> <span class="text-muted">蜗牛 | ICU</span> <a class="tag" taget="_blank" href="/search/%E6%8E%A8%E8%8D%90%E9%A1%B9%E7%9B%AE/1.htm">推荐项目</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>043-停车管理系统介绍使用springbootvuejsmysql技术搭建框架。智能停车管理系统描述后端框架：采用SpringBoot与MySQL的强强联合，为系统提供稳健、高效的服务支撑。前端框架：前端选用Vue.js，打造流畅、美观的用户交互界面。管理员功能：用户信息管理：轻松管理用户信息，包括新增、编辑、删除及查询用户。界面清晰，操作便捷，确保用户数据的安全与准确。车位信息管理：实时查看车</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>