搜索
首页web前端html教程HTML head 头标签详细介绍_HTML/Xhtml_网页制作

HTML head 头标签详细介绍_HTML/Xhtml_网页制作

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 04:36 PM
headhtml

HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。

DOCTYPE

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

DTD(Document Type Definition) 声明以 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。公共 DTD，名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(ISO)注册，+表示是，-表示不是。组织即组织名称，如：W3C。类型一般是 DTD。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是 DTD 语言的 ISO 639 语言标识符，如：EN 表示英文，ZH 表示中文。XHTML 1.0 可声明三种 DTD 类型。分别表示严格版本，过渡版本，以及基于框架的 HTML 文档。

●HTML 4.01 strict

XML/HTML Code复制内容到剪贴板
  1. nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
●HTML 4.01 Transitional

XML/HTML Code复制内容到剪贴板
  1. nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
●HTML 4.01 Frameset

XML/HTML Code复制内容到剪贴板
  1. nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  
●最新 HTML5 推出更加简洁的书写，它向前向后兼容，推荐使用。

XML/HTML Code复制内容到剪贴板
  1. nbsp;html>  

在 HTML中 doctype 有两个主要目的。

●对文档进行有效性验证。

它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 DTD 并检查合法性，只有当手动校验页面时才启用。

●决定浏览器的呈现模式

对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。

●非怪异（标准）模式
●怪异模式
●部分怪异（近乎标准）模式 关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE 标签，可详细阅读模式？标准！的内容。

charset

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

XML/HTML Code复制内容到剪贴板
  1. meta charset="utf-8">  

html5 之前网页中会这样写：

XML/HTML Code复制内容到剪贴板
  1. meta http-equiv="Content-Type" content="text/html; charset=utf-8">  

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

lang属性

　　简体中文 

XML/HTML Code复制内容到剪贴板
  1. html lang="zh-cmn-Hans">  

　　繁体中文

XML/HTML Code复制内容到剪贴板
  1. html lang="zh-cmn-Hant">    

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

优先使用 IE 最新版本和 Chrome

XML/HTML Code复制内容到剪贴板
  1. meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  

　　360 使用Google Chrome Frame

XML/HTML Code复制内容到剪贴板
  1. meta name="renderer" content="webkit">  

　　360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入

XML/HTML Code复制内容到剪贴板
  1. meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  

　　这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。

　　相关链接：浏览器内核控制 Meta 标签说明文档

百度禁止转码

　　通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加 

XML/HTML Code复制内容到剪贴板
  1. meta http-equiv="Cache-Control" content="no-siteapp" />  

　　相关链接：SiteApp 转码声明


SEO 优化部分

页面标题

标签(head 头部必须) <br><br> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_3566')">复制内容到剪贴板</span> </div> <div id="code_3566"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">title</span><span class="tag">></span><span>your title</span><span class="tag"></span><span class="tag-name">title</span><span class="tag">></span><span>  </span></span></span></li> </ol> </div> </div> <p>页面关键词 keywords <br><br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5916')">复制内容到剪贴板</span> </div> <div id="code_5916"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"keywords"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"your keywords"</span><span class="tag">></span><span>   </span></span></span></li> </ol> </div> </div> <p><br>页面描述内容 description <br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8699')">复制内容到剪贴板</span> </div> <div id="code_8699"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"description"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"your description"</span><span class="tag">></span><span>  </span></span></span></li> </ol> </div> </div> <p>定义网页作者 author <br></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2733')">复制内容到剪贴板</span> </div> <div id="code_2733"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"author"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"author,email address"</span><span class="tag">></span><span>  </span></span></span></li> </ol> </div> </div> <p>定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 <br><br><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_1191')">复制内容到剪贴板</span></p> <div class="codeText"> <div id="code_1191"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"robots"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"index,follow"</span><span class="tag">></span><span>  </span></span></span></li> </ol> </div> </div> <p>相关链接：<a target="_blank" href="http://msdn.microsoft.com/zh-cn/library/ff724037(v=expression.40).aspx">WEB1038 - 标记包含无效的值</a> <br><br><strong>viewport</strong></p> <p>　　viewport 可以让布局在移动浏览器上显示的更好。 通常会写</p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2172')">复制内容到剪贴板</span> </div> <div id="code_2172"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span>  </span></span></span></li> </ol> </div> </div> <p>width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(<a href="http://bigc.at/ios-webapp-viewport-meta.orz">http://bigc.at/ios-webapp-viewport-meta.orz</a>)</p> <p>content 参数：</p> <p>width viewport 宽度(数值/device-width)<br>height viewport 高度(数值/device-height)<br>initial-scale 初始缩放比例<br>maximum-scale 最大缩放比例<br>minimum-scale 最小缩放比例<br>user-scalable 是否允许用户缩放(yes/no)<br>minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：</p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_4407')">复制内容到剪贴板</span> </div> <div id="code_4407"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, minimal-ui"</span><span class="tag">></span><span>  </span></span></span></li> </ol> </div> </div> <p>而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。</p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8954')">复制内容到剪贴板</span> </div> <div id="code_8954"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width,user-scalable=yes"</span><span class="tag">></span><span>  </span></span></span></li> </ol> </div> </div> <p>相关链接：<a target="_blank" href="http://www.qianduan.net/non-responsive-design-viewport.html">非响应式设计的viewport</a> <br><br>　　适配 iPhone 6 和 iPhone 6plus 则需要写： <br><span class="lantxt"><br>XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_4250')">复制内容到剪贴板</span></p> <div class="codeText"> <div id="code_4250"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=375"</span><span class="tag">></span><span>  </span></span></span></li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=414"</span><span class="tag">></span><span>  </span></span> </li> </ol> </div> </div> <p>大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。 <br><br><strong>　　ios 设备 <br><br></strong>　　添加到主屏后的标题（iOS 6 新增） </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_7738')">复制内容到剪贴板</span> </div> <div id="code_7738"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-title"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"标题"</span><span class="tag">></span><span> </span><span class="comments"><!-- 添加到主屏后的标题（iOS 6 新增） --></span><span>  </span></span></span></li> </ol> </div> </div> <p><br>是否启用 WebApp 全屏模式</p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5148')">复制内容到剪贴板</span> </div> <div id="code_5148"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-capable"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"yes"</span><span> </span><span class="tag">/></span><span> </span><span class="comments"><!-- 是否启用 WebApp 全屏模式 --></span><span>  </span></span></span></li> </ol> </div> </div> <p>设置状态栏的背景颜色</p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_5979')">复制内容到剪贴板</span> </div> <div id="code_5979"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"black-translucent"</span><span> </span><span class="tag">/></span><span>    </span></span></span></li> <li> <span></span><span class="comments"><!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 --></span><span>  </span> </li> </ol> </div> </div> <p>只有在 "apple-mobile-web-app-capable" content="yes" 时生效 <br><br>　　content 参数： <br><br>default 默认值。 <br>black 状态栏背景是黑色。 <br>black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。 <br><br><strong>禁止数字识自动别为电话号码</strong></p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_3828')">复制内容到剪贴板</span> </div> <div id="code_3828"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"format-detection"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"telephone=no"</span><span> </span><span class="tag">/></span><span> </span><span class="comments"><!-- 禁止数字识自动别为电话号码 --></span><span>  </span></span></span></li> </ol> </div> </div> <p>iOS 图标</p> <p>　　rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57x57 像素，必须有</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode60'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode60"> <br><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --><br> </div> <p>　　iPad，72x72 像素，可以没有，但推荐有</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode61'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode61"> <br><link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"> <!-- iPad，72x72 像素，可以没有，但推荐有 --><br> </div> <p>　　Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode62'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode62"> <br><link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --><br> </div> <p>　　Retina iPad，144x144 像素，可以没有，但推荐有</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode63'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode63"> <br><link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --><br> </div> <p>　　IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 适配iPhone 6 plus，则需要在中加上这段</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode64'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode64"> <br><link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"> <br> </div> <p><strong>iOS 启动画面<br><br></strong>官方文档：<a target="_blank" href="https://developer.apple.com/library/ios/qa/qa1686/_index.html">https://developer.apple.com/library/ios/qa/qa1686/_index.html</a> <br>参考文章：<a target="_blank" href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/">http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/</a> <br><br>iPad 的启动画面是不包括状态栏区域的。</p> <p>　　iPad 竖屏 768 x 1004（标准分辨率）</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode65'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode65"> <br><link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"> <!-- iPad 竖屏 768 x 1004（标准分辨率） --><br> </div> <p>　　iPad 竖屏 1536x2008（Retina）</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode66'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode66"> <br><link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"> <!-- iPad 竖屏 1536x2008（Retina） --><br> </div> <p>　　iPad 横屏 1024x748（标准分辨率）</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode67'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode67"> <br><link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"> <!-- iPad 横屏 1024x748（标准分辨率） --><br> </div> <p>　　iPad 横屏 2048x1496（Retina）</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode68'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode68"> <br><link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"> <!-- iPad 横屏 2048x1496（Retina） --><br> </div> <p>　　iPhone 和 iPod touch 的启动画面是包含状态栏区域的。</p> <p>　　iPhone/iPod Touch 竖屏 320x480 (标准分辨率)<br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode69'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode69"> <br><link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --><br> </div> <p>　　iPhone/iPod Touch 竖屏 640x960 (Retina)</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode70'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode70"> <br><link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --><br> </div> <p>　　iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode71'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode71"> <br><link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --><br> </div> <p>　　添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode72'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode72"> <br><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --><br> </div> <p>　　iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode73'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode73"> <br><link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"> <br><link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)"> <br> </div> <p><strong>Windows 8<br></strong>　　Windows 8 磁贴颜色</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode74'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode74"> <br><meta name="msapplication-TileColor" content="#000"> <!-- Windows 8 磁贴颜色 --><br> </div> <p>　　Windows 8 磁贴图标</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode75'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode75"> <br><meta name="msapplication-TileImage" content="icon.png"> <!-- Windows 8 磁贴图标 --><br> </div> <p>　　rss订阅</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode76'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode76"> <br><link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"> <!-- 添加 RSS 订阅 --><br> </div> <p>　　favicon icon</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode77'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode77"> <br><link rel="shortcut icon" type="image/ico" href="/favicon.ico"> <!-- 添加 favicon icon --><br> </div> <p>比较详细的 favicon 介绍可参考<a target="_blank" href="https://github.com/audreyr/favicon-cheat-sheet">https://github.com/audreyr/favicon-cheat-sheet<br></a><br><strong>移动端的meta <br><br></strong><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_8641')">复制内容到剪贴板</span></p> <div class="codeText"> <div id="code_8641"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, user-scalable=no"</span><span> </span><span class="tag">/></span><span>  </span></span></span></li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-capable"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"yes"</span><span> </span><span class="tag">/></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"black"</span><span> </span><span class="tag">/></span><span>  </span></span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>="format-detection"</span><span class="attribute-value">content</span><span>="</span><span class="attribute">telephone</span><span>=</span><span class="attribute-value">no</span><span>, </span><span class="attribute">email</span><span>=</span><span class="attribute-value">no</span><span>" </span><span class="tag">/></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"viewport"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"width=device-width, initial-scale=1, user-scalable=no"</span><span> </span><span class="tag">/></span><span>  </span></span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-capable"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"yes"</span><span> </span><span class="tag">/></span><span class="comments"><!-- 删除苹果默认的工具栏和菜单栏 --></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"apple-mobile-web-app-status-bar-style"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"black"</span><span> </span><span class="tag">/></span><span class="comments"><!-- 设置苹果工具栏颜色 --></span><span>  </span></span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"format-detection"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"telphone=no, email=no"</span><span> </span><span class="tag">/></span><span class="comments"><!-- 忽略页面中的数字识别为电话，忽略email识别 --></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="comments"><!-- 启用360浏览器的极速模式(webkit) --></span><span>  </span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"renderer"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"webkit"</span><span class="tag">></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="comments"><!-- 避免IE使用兼容模式 --></span><span>  </span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">http-equiv</span><span>=</span><span class="attribute-value">"X-UA-Compatible"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"IE=edge"</span><span class="tag">></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="comments"><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --></span><span>  </span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"HandheldFriendly"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"true"</span><span class="tag">></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="comments"><!-- 微软的老式浏览器 --></span><span>  </span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"MobileOptimized"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"320"</span><span class="tag">></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="comments"><!-- uc强制竖屏 --></span><span>  </span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"screen-orientation"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"portrait"</span><span class="tag">></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="comments"><!-- QQ强制竖屏 --></span><span>  </span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"x5-orientation"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"portrait"</span><span class="tag">></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="comments"><!-- UC强制全屏 --></span><span>  </span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"full-screen"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"yes"</span><span class="tag">></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="comments"><!-- QQ强制全屏 --></span><span>  </span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"x5-fullscreen"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"true"</span><span class="tag">></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="comments"><!-- UC应用模式 --></span><span>  </span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"browsermode"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"application"</span><span class="tag">></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="comments"><!-- QQ应用模式 --></span><span>  </span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"x5-page-mode"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"app"</span><span class="tag">></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="comments"><!-- windows phone 点击无高光 --></span><span>  </span> </li> <li> <span></span><span class="tag"><span class="tag-name">meta</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"msapplication-tap-highlight"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"no"</span><span class="tag">></span><span>  </span></span> </li> <li class="alt"> <span></span><span class="comments"><!-- 适应移动端end --></span><span>  </span> </li> </ol> </div> </div> <p><br>这是来自 <a href="http://weibo.com/toooobug" target="_blank">toobug</a> 的分享总结。</p> <p>　　更多的 meta 标签参考</p> <ul> <li><a href="http://code.lancepollard.com/complete-list-of-html-meta-tags/" target="_blank">COMPLETE LIST OF HTML META TAGS</a></li> <li><a href="http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013" target="_blank">18 Meta Tags Every Webpage Should Have in 2013</a></li> </ul> <p>　　参考文章：</p> <ul> <li><a href="https://github.com/yisibl/blog/issues/1" target="_blank">常用的 HTML 头部标签</a></li> <li><a href="https://gist.github.com/paddingme/6182708733917ae36331" target="_blank">html5_header</a></li> <li><a href="http://amazeui.org/css/" target="_blank">amazeui css</a></li> <li><a href="http://www.douban.com/note/170560091/" target="_blank">DOCTYPE</a></li> <li><a href="http://www.uisdc.com/ios8-ten-new-feature" target="_blank">WEB 工程师和设计师必学的 10 个 IOS 8 新鲜改变</a></li> </ul>
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
HTML：建立网页的结构HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

EditPlus 中文破解版

EditPlus 中文破解版

体积小，语法高亮，不支持代码提示功能

PhpStorm Mac 版本

PhpStorm Mac 版本

最新（2018.2.1 ）专业的PHP集成开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

显示更多

热门话题

gmail邮箱登陆入口在哪里
7489
15
CakePHP 教程
1377
52
steam的账户名称是什么格式
77
11
win11激活密钥永久
52
19
NYT连接提示和答案
19
41
显示更多