开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《Web前端开发精品课 HTML与CSS进阶教程》——1.5 浏览器标题栏小图标

简介:
+关注继续查看

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第1章,第1.5节,作者: 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.5 浏览器标题栏小图标

在浏览网页的时候,我们会发现几乎所有网站的页面在浏览器标题栏前面都会有一个小图标,如图1-3所示。


24dc164f2cc4e1a0f85029c5ed3f5b332acfcf61

图像198833.PNG

图1-3 浏览器标题栏小图标

想要实现这个效果,我们只需要在head标签添加一个link标签即可。

语法:

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

说明:
rel和type这两个属性的取值是固定形式,无需多讲。href属性取值为小图标的地址,这个地址是根据小图标在站点文件夹路径而定的,跟图片引用路径是一样的道理。

这里注意一下,小图标格式是.ico,而不是.jpeg、.png、.gif等格式。对于.ico格式的图标制作,我们可以搜索一下“在线icon”,会发现很多不错的在线工具,大家可以收藏一下。

举例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>绿叶学习网</title> 
   <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
</head>
<body>
</body>
</html>

在浏览器预览效果如图1-4所示。


<a href=https://yqfile.alicdn.com/5d757031fb961a28d7259629ef318a40c6f8f1f0.png" >

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载