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特性绘制简易版围棋效果
Sep 28 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 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 错误处理经验分享
2011/10/11 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
Vue表单验证插件的制作过程
2017/04/01 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
Python之pymysql的使用小结
2019/07/01 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
实习医生自我评价
2013/09/22 职场文书
大学毕业的自我鉴定
2013/10/08 职场文书
个性车贴标语
2014/06/24 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
你需要掌握的20个Python常用技巧
2022/02/28 Python
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android