相关疑难解决方法(0)

HTML5中的属性引用是可选的.

引用它们的利弊是什么？

id=example                     <!--quotes optional-->
href=http://example.com        <!--quotes optional-->
class="example example-1"      <!--quotes required due to space-->
href="http://example.com/p=47" <!--quotes required due to '=' sign-->

更新:根据答案添加优势:

引用所有属性的优点:

• 所有编辑都可以妥善处理
• 更一致
• 更好的可移植性(更容易更改doctype)
• 更容易维护(特别是如果属性可能变空)
• 更容易"找到并替换"更改
• 更清洁的文档(如果你认为引用提高了可读性)
• ？

省略可选引号的优点:

• 文件大小略有减少
• 清洁文档(如果您喜欢最小文本)
• ？

通常,以多种尺寸提供favicon.ico被认为是一种很好的做法,因为这种方式在制作快捷方式或固定网站时看起来更好(IE9).虽然这样做会减少10倍,但这会导致网站加载速度变慢(在我的情况下,16x16的图标是1kb,16,32,64 = 30kb).

Facebook和雅虎等网站默认提供16x16的图标,大小不超过1kb,但是当您固定这些网站时,使用的图像大小合适.我假设只有在需要时才会加载更大的图片,从而解决了两难问题.我没有成功地弄清楚这些网站是如何做到这一点的.有人知道吗？

我对让大多数手机和浏览器工作的最简单方法感到困惑.

1)有些网站建议使用它就足够了:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-180x180.png">

这适用于iOS 8,应该由Android,BlackBerry,Windows等提供.

2)其他网站坚持必须明确指定每一个可能的图标:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" …

我正在读一篇文章:

为您的网站创建一个favicon以及为什么这么多文件？.

据他们说,如果你需要favicon用于各种目的,你需要为每个目的创建不同的(对于WIN8中的图块,对于Opera和Chrome中的快速拨号).

好的,没关系,我仍然使用16X16 .ico文件,我认为它适用于优化目的.

但是现在阅读完这些文章之后,我会遇到各种各样的问题(假设我使用photoshop为各种目的创建了各种图标):

- 如何检测应该向浏览器提供哪个图标(如何检测该浏览器要求favicon在地址栏中显示它？还是要保存为磁贴？或者用于快速拨号？)

- 如何在不损失连接速度的情况下将该特定图标提供给浏览器,因为图标大小？

- 为了指定的目的,html应该在html(文件)中添加()代码行？

目前我用16X16图标:

<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/><!-- IE8 -->

- 通过加载index.html页面上的所有图标,浏览器可以为所有子页面缓存它们吗？(将所有图标放在站点的根目录中？)

- 但是这会通过增加index页面本身的加载时间来影响网站的性能.

那么,无论如何都要检测需要favicon的目的,然后动态地(JavaScript例如使用)服务它,而不会失去页面加载的速度？另外如何拥有一个faviconfor chromes webstore？(即什么行的(html)代码).

希望这里的专家会帮助我.提前致谢.

PS:

我已经读过了:

1. 如何拥有多个favicon大小,但默认只提供16x16？,

2. 站点URL旁边的图像图标,

3. 目前在所有支持Favicons的浏览器中显示favicon的最佳方法是什么？,

4. 使用favicons的首选方式？和

5. 浏览浏览页面时,如何在浏览器的地址栏中添加图片？.

但它们很少或没有用.