网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑:jimmy 日期: 2024/12/24 浏览:3 次 )

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

在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公共页面提取作为公用代码的方法
下一篇:Canvas 文本填充线性渐变的使用详解
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?