【转】你所不知道的HTML<head/>头标签
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了【转】你所不知道的HTML<head/>头标签，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含15485字，纯文字阅读大概需要23分钟。
内容图文
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，不区分大小写。
charset
声明文档使用的字符编码，
html5 之前网页中会这样写：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
这两个是等效的，具体可移步阅读：
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>
<h4>meta标签分类</h4>
<p>meta标签根据属性的不同，可分为两大部分：http-equiv 和 name 属性。</p>
<p>http-equiv：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。<br />name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于浏览器，搜索引擎等机器人识别，等等。</p>
<h4>推荐使用的meta标签</h4>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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>
<h4>为移动设备添加 viewport</h4>
<p><code>viewport</code> 可以让布局在移动浏览器上显示的更好。 通常会写</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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 class="brush:php;toolbar:false"><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 class="brush:php;toolbar:false"><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 class="brush:php;toolbar:false"><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>
<h4>SEO 优化部分</h4>
<ul>
<li>页面标题<code><title></code>标签(head 头部必须)
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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 class="brush:php;toolbar:false"><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 class="brush:php;toolbar:false"><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 class="brush:php;toolbar:false"><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 class="brush:php;toolbar:false"><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>
<h4>百度禁止转码</h4>
<p>通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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>
<h4>不推荐的 meta 属性</h4>
<p>下面是不推荐使用的 meta 属性，因为它们采用率低，或已弃用：</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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;"> 最好使用 或 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>
<h3>link 标签</h3>
<p>说到 link 标签，估计大家的第一反应和我一样，就是引入外部CSS样式文件的，不错，这是 link 标签最最常用的功能。不过它还有很多别的用处，比如这是浏览器 favicon 图标，touch图标等等。</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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>
<h4>rss订阅</h4>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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>
<h4>不推荐的link标签</h4>
<p>以下是不推荐使用的链接关系：</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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>
<h4>favicon 图标</h4>
<p>IE 11, Chrome, Firefox, Safari, Opera支持<code></code>形式设置：</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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></code>形式设置，只通过将命名为<code>favicon.ico</code>的文件放置在网站根目录中实现。</p>
<p>比较详细的 favicon 介绍可参考：</p>
<ul>
<li>所有关于网站图标（和触摸图标）</li>
<li>favicon 对照表</li>
</ul>
<h2>浏览器及平台详细说明</h2>
<h3>QQ 浏览器（X5 内核）</h3>
<p>QQ 浏览器（X5 内核）同样适用于微信，QQ等第三方应用页面开发。</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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>
<h3>360浏览器</h3>
<p>设置 360 浏览器渲染模式：<code>webkit</code> 为极速内核，<code>ie-comp</code> 为 IE 兼容内核，<code>ie-stand</code> 为 IE 标准内核。</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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 class="brush:php;toolbar:false"><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>
<h3>UC 浏览器</h3>
<h4>设置屏幕方向</h4>
<p>portrait 为横屏，landscape 为竖屏。</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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>
<h4>设置全屏</h4>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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>
<h4>设置适应屏幕排版（缩放是否显示滚动条）</h4>
<p>UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 uc-fitscreen=yes，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><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>
<h4>排版模式</h4>
<p>UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排
</p>
<h4 class="article-section-summary">内容总结</h4>
<blockquote>
<p>
以上是互联网集市为您收集整理的<strong>【转】你所不知道的HTML<head/>头标签</strong>全部内容，希望文章能够帮你解决<strong>【转】你所不知道的HTML<head/>头标签</strong>所遇到的程序开发问题。
如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
</p>
</blockquote>
<h4 class="article-section-remark">内容备注</h4>
<blockquote>
<p>
<strong>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。</strong>
</p>
</blockquote>
<h4 class="article-section-mobile">内容手机端</h4>
<div class="copynotice">
<div class="qrcode"></div>
<div class="60903a298bfb3 copynoticetxt">
<p>扫描二维码推送至手机访问。</p>
<p>本文链接：<a href="https://qyyshop.com/info/394403.html" title="【转】你所不知道的HTML<head/>头标签">https://qyyshop.com/info/394403.html</a></p>
</div>
</div>
<hr>
<div class="label pull-right authsource">来源：【匿名】</div>
</div>
</div>
<div class="article-prenext ibox float-e-margins">
<div class="ibox-content"><div class="left-list"><a target="_self" href=https://qyyshop.com/info/394404.html>【上一篇】实现发送短信验证码后60秒倒计时</a><a target="_self" href=https://qyyshop.com/info/120193.html>【下一篇】PHP 和 HTML</a></div></div>
</div>
<div class="article-more ibox float-e-margins jclist detailMoreInfo">
<div class="ibox-title">
<a href="https://qyyshop.com/info/394403/pages1/" target="_blank" class="label pull-right" title="更多【【转】你所不知道的HTML<head/>头标签】教程文章相关的互联网学习教程文章">更多 ► </a>
<h5>【【转】你所不知道的HTML<head/>头标签】教程文章相关的互联网学习教程文章</h5>
</div>
<div class="ibox-content">
<div class="list-item"><h3><a href="https://qyyshop.com/info/1328961.html" target="_blank" title="HTML中button标签点击实现页面跳转">HTML中button标签点击实现页面跳转【代码】</a></h3><p>方法1：使用onclick事件<input type="button" value="按钮"
onclick="javascrtpt:window.location.href=‘http://www.baidu.com/‘" />或者直接使用button标签<button onclick="window.location.href = ‘https://www.baidu.com/‘">百度</button>
方法2：在button标签外套一个a标签<a href="http://www.baidu.com/"><button>百度</button>
</a>或使用<a href="http://www.baidu.com/"><input type="button" value=‘百度‘></a>
...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1328898.html" target="_blank" title="HTML表格标签">HTML表格标签【代码】</a></h3><p><table>表格标签 常用属性： border指定边框 width宽 height高，内容多不用指定，自动适应 bgcolor背景颜色 align对齐方式，控制表格 background背景图片<caption>表格标题<th>表头单元格<tr>行 常用属性： bgcolor背景颜色 align对齐方式，控制内容 background背景图片<td>列table>tr>td【此时按下Tab（制表键），输入内容中间和后面都不能留有空格和换行等内容】 表格合并 colspan跨列 ...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1328507.html" target="_blank" title="如何使用JS脚本从HTML中分离图片标签与文本，替换文本中指定的内容并加粗（原创）">如何使用JS脚本从HTML中分离图片标签与文本，替换文本中指定的内容并加粗（原创）【代码】</a></h3><p>var html=‘ddfsdfsdfdsd dfsdfsdffds<img _src="http://localhost:8490/60E86EA7-FE7B-44BF-8270-4DF2036B2118.PNG" data-latex="x=\frac {-b\pm \sqrt {{b}^{2}-4ac}} {2a}" src="http://localhost:8490/60E86EA7-FE7B-44BF-8270-4DF2036B2118.PNG" class="kfformula">dfsdfsrewewrererew ds<img _src="http://localhost:8490/60E86EA7-FE7B-44BF-8270-4DF2036B2118.PNG" data-latex="x=\frac {-b\pm \sqrt {{b}^{2}-4ac}} {2a}...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1327849.html" target="_blank" title="HTML5 常用标签属性">HTML5 常用标签属性【代码】</a></h3><p><input type="submit" value="提交" autofocus="on" formaction="b.jsp"><input type="submit" value="提交" formaction="c.jsp">提交不同的界面 上传<input type="file" multiple="multiple">multiple 允许上传多个文件<input type="text" pattern="[0-9]{6}" required="required" placeholder="请输入六位邮箱" title="格式不正确"> pattern里面填正则 required不能为空 placeholder提示内容 title错误后的提示信息原文：http:...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1327714.html" target="_blank" title="HTML标签总结">HTML标签总结【代码】</a></h3><p>1. HTML常用标记：属性值需要带等号连接，属性值需要带引号(单、双引号都可以文本标题：h1~h6
i. h1:一般应用在网页文章标题，网站的logo处
ii. h2:新闻稿件的标题，或者是二级标题处
iii. h3:新闻稿件居多，布局元素中有加粗效果
iv. h4~h6:根据实际情况选择应用段落文本：p空格：  (能够实现空出一个字符)换行：<br/>水平线：<hr/>加粗：
i. <b>加粗的内容</b> 只是显示加粗
ii. <strong>强调的内容</strong> 突出的文...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1327313.html" target="_blank" title="解决JSON包含HTML标签无法显示的问题">解决JSON包含HTML标签无法显示的问题</a></h3><p>主要是将json无法识别的字符进行转义 function dotran($str) { $str = str_replace(‘"‘,‘//"‘,$str); $str = str_replace("/r/n",‘//r//n‘,$str); $str = str_replace("/t",‘//t‘,$str); $str = str_replace("//",‘//‘,$str); $str = str_replace("/b",‘//b‘,$str); return $str; }这样返回的数据就可以正常显示，下面是转换后的内容：jsontext=‘{"jqry":[{"id":"12...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1325399.html" target="_blank" title="HTML5笔记1——HTML5的发展史及标签的改变">HTML5笔记1——HTML5的发展史及标签的改变【代码】【图】</a></h3><p>记得第一次接触HTML5还是在《联信永益》实习那会儿（2011），当时一个项目技术选型的时候面临两种选择，分别是Silverlight和HTML5，记得当年用的最新的IE浏览器版本还是IE9，才刚刚开始支持HTML5。后来考虑到当时各个版本的浏览器对HTML5的支持都不怎么好，最终公司还是选择了Silverlight，想不到多年以后Silverlight没落了，HTML5却随着移动互联网的兴起而焕发出强大的活力。HTML5的发展路程一路走来，我们回顾一下HTML的发展之路...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1324797.html" target="_blank" title="html页面标签元素总结">html页面标签元素总结【代码】【图】</a></h3><p>html页面标签元素总结 前言 学习python的flask架构对于有丁点C功底的人来说代码问题研究研究还能勉强跟得上脚步，但是html前端就蒙圈了，完全小菜比一枚。故此总结下我目前接触过的标签以及经常需要用的小功能(例如下拉框，单选框等等)。本篇仅从为w3c官网http://www.w3school.com.cn/收藏以供自己日后方便使用。PART I ：常用的html标签 1.1 基础篇 标签 描述 <!DOCTYPE> 定义文...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1323453.html" target="_blank" title="一个完整的html 每个标签的含义">一个完整的html 每个标签的含义【代码】</a></h3><p>1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 5<title>无标题文档</title> 6<script type="text/javascript" src="js/index.js"></script...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1322921.html" target="_blank" title="html5 form表单常用标签">html5 form表单常用标签【代码】</a></h3><p><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<form><!-- 电子邮箱属性。 --><input type="email"><input type="submit"><!-- 在移动端会有键盘切换 电话号码 --><input type="tel"><input type="submit"><!-- 提示输入正确的网址 --><input type="url"><input type="submit"><!-- 搜索 --><input type="search"><input type="submit"><!-- 可控制条 --><input type="r...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1321442.html" target="_blank" title="超级简单却不知道：html标签的嵌套规则">超级简单却不知道：html标签的嵌套规则</a></h3><p>XHTML的标签有许多：div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候，是可以将它们无限嵌套的，但是，嵌套也需要有一定规则，不能任由自己的个人习惯胡乱嵌套，那么，html标签的嵌套规则有哪些呢？ 一、HTML 标签包括 块级元素(block)、内嵌元素（inline） 1、块级元素 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签： address、blockquote、...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1320731.html" target="_blank" title="JS HTML标签尺寸距离位置定位计算">JS HTML标签尺寸距离位置定位计算【图】</a></h3><p>四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全文高：document.body.scrollHeight网页被卷去的高：...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1320380.html" target="_blank" title="html标签中英文对照,更好理解html标签">html标签中英文对照,更好理解html标签</a></h3><p>HTML标签英文全称中文释义aAnchor锚abbrAbbreviation缩写词acronymAcronym取首字母的缩写词address Address地址dfn Defines a Definition Term定义定义条目kbd Keyboard键盘（文本）samp Sample示例（文本var Variable变量（文本）tt Teletype打印机（文本）codeCode源代码（文本）prePreformatted预定义格式（文本 ）blockquote Block Quotation区块引用语cite ...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1319613.html" target="_blank" title="HTML标签marquee实现滚动效果">HTML标签marquee实现滚动效果【代码】</a></h3><p>页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.语法：<marquee>...</marquee>； 说明：在标记之间添加要进行滚动的内容。重要属性：1.滚动方向direction（包括4个值：up、 down、 left和 right） 语法：<marquee direction="滚动方向">...</marquee>2.滚动方式behavior（scro...</p></div><div class="list-item"><h3><a href="https://qyyshop.com/info/1318649.html" target="_blank" title="freemarker 集成 sitemesh 装饰html页面 shiro 标签">freemarker 集成 sitemesh 装饰html页面 shiro 标签</a></h3><p>guest标签：验证当前用户是否为“访客”，即未认证（包含未记住）的用户； shiro标签：<shiro:guest></shiro:guest> ； freemark中： <@shiro.guest> </@shiro.guest> user标签：认证通过或已记住的用户 shiro标签：<shiro:user> </shiro:user> ；freemark中： <@shiro.user> </@shiro.user> authenticated标签：已认证通过的用户。不包含已记住的用户，这是与user标签的区别所在。 shiro标签：<shiro:auth...</p></div>
</div>
</div>
</div>
<div class="article-extend col-sm-3 pdr0">
<div class="extend-tags ibox float-e-margins jctopten"><div class="ibox-title"><h5>HTML - 相关标签</h5></div><div class="ibox-content containerMidPadding"><div class="left-list"><a target="_blank" href="https://qyyshop.com/tags-42508/" title="html2canvas">html2canvas</a><a target="_blank" href="https://qyyshop.com/tags-45627/" title="html5canvas">html5canvas</a><a target="_blank" href="https://qyyshop.com/tags-88106/" title="html5css3">html5css3</a><a target="_blank" href="https://qyyshop.com/tags-29440/" title="html5开发工具">html5开发工具</a><a target="_blank" href="https://qyyshop.com/tags-98433/" title="html5入门">html5入门</a><a target="_blank" href="https://qyyshop.com/tags-101007/" title="html5视频教程">html5视频教程</a><a target="_blank" href="https://qyyshop.com/tags-55914/" title="html5特效">html5特效</a><a target="_blank" href="https://qyyshop.com/tags-104377/" title="html5网站">html5网站</a><a target="_blank" href="https://qyyshop.com/tags-117316/" title="html5小游戏">html5小游戏</a><a target="_blank" href="https://qyyshop.com/tags-138786/" title="html5新特性">html5新特性</a></div></div></div>
<div class="class-extend-typethird ibox float-e-margins">
<div class="ibox-title"><h5>HTML - 技术教程分类</h5></div>
<div class="ibox-content father-left-list-type containerMidPadding">
<div class="left-list left-list-type">
<a target="_self" href="https://qyyshop.com/web-html-tutorial/" title="HTML 教程 技术教程文章">
HTML 教程
</a> <a target="_self" href="https://qyyshop.com/web-html-intro/" title="HTML 简介 技术教程文章">
HTML 简介
</a> <a target="_self" href="https://qyyshop.com/web-html-editors/" title="HTML 编辑器 技术教程文章">
HTML 编辑器
</a> <a target="_self" href="https://qyyshop.com/web-html-basic/" title="HTML 基础 技术教程文章">
HTML 基础
</a> <a target="_self" href="https://qyyshop.com/web-html-elements/" title="HTML 元素 技术教程文章">
HTML 元素
</a> <a target="_self" href="https://qyyshop.com/web-html-attributes/" title="HTML 属性 技术教程文章">
HTML 属性
</a> <a target="_self" href="https://qyyshop.com/web-html-headings/" title="HTML 标题 技术教程文章">
HTML 标题
</a> <a target="_self" href="https://qyyshop.com/web-html-paragraphs/" title="HTML 段落 技术教程文章">
HTML 段落
</a> <a target="_self" href="https://qyyshop.com/web-html-formatting/" title="HTML 文本格式化 技术教程文章">
HTML 文本格式化
</a> <a target="_self" href="https://qyyshop.com/web-html-links/" title="HTML 链接 技术教程文章">
HTML 链接
</a> <a target="_self" href="https://qyyshop.com/web-html-head/" title="HTML 头部 技术教程文章">
HTML 头部
</a> <a target="_self" href="https://qyyshop.com/web-html-css/" title="HTML CSS 技术教程文章">
HTML CSS
</a> <a target="_self" href="https://qyyshop.com/web-html-images/" title="HTML 图像 技术教程文章">
HTML 图像
</a> <a target="_self" href="https://qyyshop.com/web-html-tables/" title="HTML 表格 技术教程文章">
HTML 表格
</a> <a target="_self" href="https://qyyshop.com/web-html-lists/" title="HTML 列表 技术教程文章">
HTML 列表
</a> <a target="_self" href="https://qyyshop.com/web-html-blocks/" title="HTML 区块 技术教程文章">
HTML 区块
</a> <a target="_self" href="https://qyyshop.com/web-html-layouts/" title="HTML 布局 技术教程文章">
HTML 布局
</a> <a target="_self" href="https://qyyshop.com/web-html-forms/" title="HTML 表单 技术教程文章">
HTML 表单
</a> <a target="_self" href="https://qyyshop.com/web-html-iframes/" title="HTML 框架 技术教程文章">
HTML 框架
</a> <a target="_self" href="https://qyyshop.com/web-html-colors/" title="HTML 颜色 技术教程文章">
HTML 颜色
</a> <a target="_self" href="https://qyyshop.com/web-html-colornames/" title="HTML 颜色名 技术教程文章">
HTML 颜色名
</a> <a target="_self" href="https://qyyshop.com/web-html-colorvalues/" title="HTML 颜色值 技术教程文章">
HTML 颜色值
</a> <a target="_self" href="https://qyyshop.com/web-html-scripts/" title="HTML 脚本 技术教程文章">
HTML 脚本
</a> <a target="_self" href="https://qyyshop.com/web-html-entities/" title="HTML 字符实体 技术教程文章">
HTML 字符实体
</a> <a target="_self" href="https://qyyshop.com/web-html-url/" title="HTML URL 技术教程文章">
HTML URL
</a> <a target="_self" href="https://qyyshop.com/web-html-quicklist/" title="HTML 速查列表 技术教程文章">
HTML 速查列表
</a> <a target="_self" href="https://qyyshop.com/web-html-summary/" title="HTML 总结 技术教程文章">
HTML 总结
</a> <a target="_self" href="https://qyyshop.com/web-html-xhtml/" title="XHTML 简介 技术教程文章">
XHTML 简介
</a> <a target="_self" href="https://qyyshop.com/web-html-media/" title="HTML 媒体(Media) 技术教程文章">
HTML 媒体(Media)
</a> <a target="_self" href="https://qyyshop.com/web-html-object/" title="HTML 插件 技术教程文章">
HTML 插件
</a> <a target="_self" href="https://qyyshop.com/web-html-examples/" title="HTML 实例 技术教程文章">
HTML 实例
</a> <a target="_self" href="https://qyyshop.com/web-html-refbyfunc/" title="HTML 标签列表（功能排序） 技术教程文章">
HTML 标签列表（功能排序）
</a> <a target="_self" href="https://qyyshop.com/web-html-refstandardattributes/" title="HTML 属性 技术教程文章">
HTML 属性
</a> <a target="_self" href="https://qyyshop.com/web-html-refeventattributes/" title="HTML 事件 技术教程文章">
HTML 事件
</a> <a target="_self" href="https://qyyshop.com/web-html-refcanvas/" title="HTML 画布 技术教程文章">
HTML 画布
</a> <a target="_self" href="https://qyyshop.com/web-html-refavdom/" title="HTML 音频/视频 技术教程文章">
HTML 音频/视频
</a> <a target="_self" href="https://qyyshop.com/web-html-tagscolorname/" title="HTML 颜色名 技术教程文章">
HTML 颜色名
</a> <a target="_self" href="https://qyyshop.com/web-html-charsetscharsets/" title="HTML 字符集 技术教程文章">
HTML 字符集
</a> <a target="_self" href="https://qyyshop.com/web-html-tagsascii/" title="HTML ASCII 技术教程文章">
HTML ASCII
</a> <a target="_self" href="https://qyyshop.com/web-html-refentities/" title="HTML ISO-8859-1 技术教程文章">
HTML ISO-8859-1
</a> <a target="_self" href="https://qyyshop.com/web-html-tagssymbols/" title="HTML 符号 技术教程文章">
HTML 符号
</a> <a target="_self" href="https://qyyshop.com/web-html-tagslanguagecodes/" title="HTML 语言代码 技术教程文章">
HTML 语言代码
</a> <a target="_self" href="https://qyyshop.com/web-html/">
html 全部
</a>
</div>
</div>
</div>
<div class="class-extend-topten ibox float-e-margins jctopten">
<div class="ibox-title">
<h5>HTML - 最新教程</h5>
</div><div class="ibox-content containerMidPadding"><div class="left-list"><a target="_self" href="https://qyyshop.com/info/1329311.html" title="AJAX基础（三）——DOM基础及DOM操纵HTML">AJAX基础（三）——DOM基础及DOM操纵HT...</a><a target="_self" href="https://qyyshop.com/info/1329254.html" title="MVC中使用HTML Helper类扩展HTML控件">MVC中使用HTML Helper类扩展HTML控件</a><a target="_self" href="https://qyyshop.com/info/1329240.html" title="HTML5基础">HTML5基础</a><a target="_self" href="https://qyyshop.com/info/1329086.html" title="网页开发学习笔记五: HTML行内块级元素">网页开发学习笔记五: HTML行内块级元素</a><a target="_self" href="https://qyyshop.com/info/1328961.html" title="HTML中button标签点击实现页面跳转">HTML中button标签点击实现页面跳转</a><a target="_self" href="https://qyyshop.com/info/1328943.html" title="html5shiv.js让吃屎的IE6、IE7、IE8支持html5去吧">html5shiv.js让吃屎的IE6、IE7、IE8支持...</a><a target="_self" href="https://qyyshop.com/info/1328898.html" title="HTML表格标签">HTML表格标签</a><a target="_self" href="https://qyyshop.com/info/1328794.html" title="HTML 特殊字符彻底剖析">HTML 特殊字符彻底剖析</a><a target="_self" href="https://qyyshop.com/info/1328739.html" title="HTML5安全风险之Web Storage攻击详解">HTML5安全风险之Web Storage攻击详解</a><a target="_self" href="https://qyyshop.com/info/1328695.html" title="关于HTML的入门要点">关于HTML的入门要点</a></div></div>
</div>
<div class="class-extend-toptenview ibox float-e-margins jctopten">
<div class="ibox-title"><h5>HTML - 最热教程</h5></div>
<div class="ibox-content containerMidPadding"><div class="left-list"><a target="_self" href="https://qyyshop.com/info/391416.html" title="html5代码如何实现进度条功能？（示例）">html5代码如何实现进度条功能？（示例）</a><a target="_self" href="https://qyyshop.com/info/326989.html" title="javascript中html字符串转化为jquerydom对象的方法_javascript技巧">javascript中html字符串转化为jquerydo...</a><a target="_self" href="https://qyyshop.com/info/388889.html" title="HTML5实战与剖析之CSS选择器——getElementsByClassName()方法">HTML5实战与剖析之CSS选择器——getEle...</a><a target="_self" href="https://qyyshop.com/info/387558.html" title="html5中设置或返回音频/视频是否应该被静音的属性muted">html5中设置或返回音频/视频是否应该被...</a><a target="_self" href="https://qyyshop.com/info/391556.html" title="HTML5获取设备信息">HTML5获取设备信息</a><a target="_self" href="https://qyyshop.com/info/321432.html" title="jQuery打印指定区域Html页面并自动分页_jquery">jQuery打印指定区域Html页面并自动分页...</a><a target="_self" href="https://qyyshop.com/info/350590.html" title="jQuery+HTML5+CSS3制作支持响应式布局时间轴插件">jQuery+HTML5+CSS3制作支持响应式布局时...</a><a target="_self" href="https://qyyshop.com/info/344309.html" title="JS+HTML5实现上传图片预览效果完整实例【测试可用】">JS+HTML5实现上传图片预览效果完整实例...</a><a target="_self" href="https://qyyshop.com/info/206595.html" title="php删除html标签和标签内的内容的方法总结">php删除html标签和标签内的内容的方法总...</a><a target="_self" href="https://qyyshop.com/info/210128.html" title="XMLHttpRequest中responseText如何获取指定<div>的内容，而不是整个HTML的内容">XMLHttpRequest中responseText如何获取...</a></div></div>
</div>
</div>
</div>
<textarea id="forcopy" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"></textarea>
<div class="footer"><div class="pull-right">By：<a href="https://qyyshop.com/default.html" target="_blank">互联网集市</a></div><div><a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow"> 闽ICP备17012310号-6</a><strong>Copyright</strong> 互联网集市 © 2021</div></div>
</div>
</div>
<script src="/app_themes/core.js"></script>
<link href="/app_themes/skin_manage/hplus/css/plugins/toastr/toastr.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
// 事件初始化
$(function () {
detailview('jiaocheng', '394403', $.cookie('_qwejklaa'));
$("#subfav").click(function () {
detailfav();
});
});
function detailfav() {
detailfavsource('jiaocheng','394403',$.cookie('_qwejklaa'));
}
var countnoticecopy = 0;
jQuery('.qrcode').qrcode({
render: "canvas"
, width: 94
, height: 94
, correctLevel: 0
, foreground: "#1ab394" // 前景色
, background: "#FFF" // 底色
, text: "https://qyyshop.com/info/394403.html"
});
$("pre").click(
function (e) {
//console.log(e);
//console.log(e.currentTarget.innerText);
// 复制代码
copyText_NoMessage(e.currentTarget.innerText);
toastr.success('复制成功代码段，包含代码字符数量' + e.currentTarget.innerText.length+"。", '代码复制提醒');
}
);
$("pre").hover(
function (e) {
if (countnoticecopy === 0) {
console.log(countnoticecopy);
countnoticecopy = 1;
toastr.success('鼠标单击即可复制代码段。','代码复制提醒');
}
}
);
</script>
</body>
</html><span style='display:none' class='static'>2024-07-26 04:07:40<span>