HTML5中在title标题标签里设置小图标的方法


Posted in HTML / CSS onJune 23, 2020

一张网页,如果标题只有文字,那会显得特别单调;那么如何加入一个小图标呢,废话不说,代码展示。

在html中的<head>标签里:

<head>
  <meta charset="UTF-8">
  <title>叮叮书店</title>
  <link href="images/logo.ico" rel="icon" type="image/x-ico">
  <link href="style.css" rel="stylesheet" type="text/css">
 </head>

在这里简单说明一下:

但凡遇到自己不熟悉的东西时,其实都可以跟自己之前遇到过的相类比,从而得出它们身上的异同;

我们基本上已经知道CSS3可以引入外部样式表,<img也是通过外部引入的,那么图标也不例外,href=" "不能少,填入图标相对路径;

rel(relation 联系 就是与此html网页有什么联系,是它的什么)=" ",填入图标单词icon; type=" "这个经本人测试,加不加都不影响效果,但是可能对代码的可移植性有影响,所有还是加上比较好,image是图片类型,x-ico是一种图标格式,图标其实是多张相同显示图片的不同尺寸和发色数组合而成,是三维的,所以x-ico是完整格式的缩写,像24x24 32bit、32x32 32bit 之类的像素加色深的图标格式。

效果如下所示:

HTML5中在title标题标签里设置小图标的方法

到此这篇关于HTML5中在title标题标签里设置小图标的方法的文章就介绍到这了,更多相关HTML5标题里设置小图标内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 #HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 #HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 #HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 #HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 #HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 #HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 #HTML / CSS
You might like
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
在vs2010中调试javascript代码方法
2011/02/11 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
js解决movebox移动问题
2016/03/29 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
Redux实现组合计数器的示例代码
2018/07/04 Javascript
vue实现文件上传功能
2018/08/13 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
基于Python实现用户管理系统
2019/02/26 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
护理学专业推荐信
2013/12/03 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
推荐信范文大全
2015/03/27 职场文书
调解协议书范本
2016/03/21 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
Java并发编程必备之Future机制
2021/06/30 Java/Android