html怎么在网页标题栏上添加图标

2023-10-31

需求

像下图这样给网页标题栏加个图标
在这里插入图片描述

方法

需要先把图片格式转换为.ico类型
在这个网址在线转换很方便:https://www.easyicon.net/covert/
<head></head>加一行来显示图标(注意,如果加入了没有效果,检查一下路径是否正确,文件名是否正确)
在网页标题左侧显示:<link rel="icon" href="图标地址" type="image/x-icon">
在收藏夹显示图标:<link rel="shortcut icon" href="图标地址" type="image/x-icon">

示例


<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no"> 
  <title>
    MarioHome
  </title> 
  
  <link rel="icon" href="./mario.ico" type="image/x-icon">  //在网页标题左侧显示图标
  <link rel="shortcut icon" href="./mario.ico" type="image/x-icon">  //在收藏夹显示图标

  <script type="text/javascript" src="D:\\jQuery\\jquery.js"></script>
  <style>

.search { position: relative; width: 78%; margin: 0px auto; padding-left: 3.4em; font-size: 14px;}
.search:after{ clear:both;content:'.'; display:block;clear:both;height:0; visibility:hidden; overflow:hidden;}

.search_t { float: left; width: 78%; height: 60px;margin-left: 0px;  margin-top: 20%; padding-left: 20px; padding-right: 20px; font-size: 18px;/* border: 1px solid #cdcdcd; */border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
.search_b { float: right;  width: 200px; height: 60px;margin-left: 0px;margin-top: 20%;padding-left: 0px; padding-right: 0px; font-size: 18px;/* border: 1px solid #cdcdcd; */border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
.background_{ background:url("./background.jpg") no-repeat; background-size: 100%;}
  </style> 
</head> 

<body class="background_">

<form class="search" action="http://www.baidu.com/baidu" target="_blank">
 <input class="search_t" type=text name=word size=40 placeholder="Input Content">
 <input class="search_b" type="submit" value="搜索"/>
</form>

</body>

效果

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html怎么在网页标题栏上添加图标 的相关文章

  • 开发日志:微信公众号网页开发的调试工具

    在这里记录一下开发时有用到的一些工具 VConcole调试工具 手机端的H5调试工具 http debugx5 qq com
  • WebGL 实践篇(五)三维图形的绘制及矩阵变换、正射投影

    一 三维 F 的绘制 1 着色器 按照上一篇提到的矩阵变换 我们可以直接在顶点着色器中加入相应的矩阵变换 这样就可以简化着色器代码 通过变量传入矩阵的值也便于之后矩阵变换的修改 三维图形的绘制相比于二维图形只在参数类型上有一些变化 注意ve
  • 兼容ios不支持的日期格式

    前段时间开发了一个关于订单展示的页面 要求根据时间筛选出离当前时间最近的订单信息进行展示 因为服务器返回的时间格式都是 YYYY MM DD 也没想那么多 直接拿过来就用了 在安卓上排序都很正常 在测试的时候发现苹果手机展示的订单根本就没有
  • 前端学习之常见标签的使用(2)

    目录 h标签 p标签 br标签 字符实体 img标签 a标签 mailto链接 base标签 锚点 div span video H5新增 audio H5新增 h标签 h标签 标题标签 在HTML中 一共有六级标题标签 h1 h6 在显示
  • 【HTML】用户名、身份证号、邮箱、验证

    为了使页面不是那么突兀 特地导入了这俩个bootstrap框架相关的包
  • SSD目标检测流程深入理解

    前言 SSD是经典的一阶目标检测网络框架 特点是速度快 网络简洁 主要思想 1 数据增强 包括光学变换和几何变换 2 网络骨架 SSD在VGG基础上延伸了4个卷积模块 生成不同尺度的特征图 3 PriorBox与多层特征图 在不同尺度设置预
  • 看天气WeatherCan V1.0 ---气象数据分析系统web版

    版权声明 本文为CSDN博主 老郭1 的原创文章 遵循CC 4 0 BY SA版权协议 转载请附上原文出处链接及本声明 原文链接 https blog csdn net HZGJF article details 104772394 Wea
  • EduCoder_web实训作业--JavaScript学习手册七:JS循环语句

    第一关 Begin var sum 0 var i 2 while i lt a var j 2 while j lt i if i j 0 能被整除 不是质数 break 不需要再判断 j 除数加1 继续测试是不是质数 if j i 还是
  • ADS2020.2安装

    双击安装包中的 exe文件 开始安装 安装结束后 直接点击退出 然后将crack文件夹中的两个文件夹 分别复制到刚刚的安装路径下 分别替换12个和2个同名文件 注意 这两个文件夹的名字要和刚刚安装的文件夹的名字一致 就是将Crack文件夹中
  • html5自带属性验证表单必填

    html5自带属性验证表单必填 2014年02月25日 Html5 共 366字 字号 小 中 大 6条评论 阅读 6 515 次 为了防止恶意注册 通常会验证表单必填 实现方法以js为主 略微麻烦 今天才发现 html5如今已自带验证表单
  • 前端移动Web第四天案例:阿里百秀首页-响应式布局(bootstrap框架)

    阿里百秀首页案例 技术选型 方案 我们采取响应式页面开发方案 技术 bootstrap框架 设计图 本设计图采用 1280px 设计尺寸 1 页面布局分析 2 屏幕划分分析 屏幕缩放发现 中屏幕 和 大屏幕布局 是一致的 因此我们列 定义为
  • 基于vue-cli3模板的axios封装项目

    为了更便捷的使用项目框架 本模板为空白项目 但是已经为大家封装了axios方法和post get请求 内有基础案例 请大家按着自己项目需要进行修改使用 axios interceptors response use response gt
  • ElementUi常用组件创建前端页面

    elementui 创建前端页面
  • JS有小数保留两位,整数不显示小数

    在很多时候要展示数据 会有各种小数处理 碰到页面的数据要根据不同的情况展示不同格式的数据 比如得到的数据是一个小数 现在要将小数保留两位 而整数则不显示小数点 显示整数格式 使用toFixed n 方法 toFixed 2 里面的2表示保留
  • css中float用法

    float浮动 指将指定元素悬浮于所在整体之上 即将垂直排列的元素转换为水平同行显示 平时写出的HTML是具有先后顺序的 对于这个顺序我们称之为标准流 而浮动则是脱离标准流的另一个独立标准 下面给出float定义 float left 左浮
  • 表格嵌套与合并

  • 微信小程序:图片高度设置无效问题

    控制台查看元素 显示其style中多了一个没有设置的高度值 找了很久发现是因为image标签设置了mode widthFix 此时高度会自适应 样式中设置高度无效
  • align-content 设置多行下的子元素排列方式 代码和图片展示

    align content 适用于 换行 多行 的情况下 单行无效 可以设置上对齐 居中拉伸和平均分配剩余空间等属性值 属性值 flex start 默认值 在侧轴头部开始排列 flex end 在侧轴尾部开始排列 center 在侧轴中间
  • webpack5 配置&使用 文档(大全)

    一 起步 1 基本安装 首先我们创建一个目录 初始化 npm 然后 在本地安装 webpack 接着安装 webpack cli 此工具用于在命令行中运行 webpack mkdir webpack demo cd webpack demo
  • localStorage和sessionStorage和Cookie的区别

    localStorage和sessionStorage和Cookie是前端开发中三种常见的临时存储客户端会话信息或者数据的方法 它们都存储在客户端中 区别 一 三者存储的有效时期不同 1 Cookie存储的有效时期可以设置 一般在浏览器关闭

随机推荐

  • c1047: [编程入门]报数问题[报3退出]

    有n人围成一圈 顺序排号 从第1个人开始报数 从1到3报数 凡报到3的人退出圈子 问最后留下的是原来的第几号的那位 输入 初始人数n 输出 最后一人的初始编号 样例输入复制 3 样例输出复制 2 思路 约瑟夫环问题 需要考虑 1 成环 即当
  • 2023年软件测试常见面试题100%问必背全套教程

    随着数字化时代的到来 软件测试越来越受到重视 在未来的几年里 软件测试将继续成为信息技术领域中的热门职业之一 如果你是一名正在寻找或准备进入软件测试行业的人 那么这套常见面试题全套教程对你来说会非常有用 这套教程旨在帮助你了解2023年软件
  • Hdfs页面操作文件出现 Permission denied: user=dr.who, access=WRITE, inode=“/“:hadoop:supergroup:drwxr-xr问题解决

    错误描述 Permission denied user dr who access WRITE inode hadoop supergroup drwxr xr x 先开始一直纠结我是用hadoop用户登录操作的 为什么会是dr who d
  • eNSP之安全策略的配置

    命令行模式 FW firewall zone trust 进入trust区域 FW zone trust add int g1 0 0 把g1 0 0加入trust区域 undo add int g1 0 0 取消加入 FW firewal
  • C语言题目解析(一)

    C语言题目解析 1 打印 1 100之间的奇数 1 1 题目描述 1 2 解法思路 1 3 代码 1 4 运行结果 2 打印9 9乘法 诀表 2 1 题目描述 2 2 解题思路 2 3 解法代码 2 4 运行结果 3 打印素数 3 1 题目
  • 禁用cookie和私密浏览模式情况下localstorage需要注意的问题

    localstorage是html5新增的一个功能 用于本地存储 主要解决cookie存储量小的问题 官方建议每个网站最多存储5M大小 localstorage相关的函数 cookieEnabled 移动端在使用localstorage需要
  • TCP和UDP详解

    本篇文章主要是从运输层协议概述 UDP TCP 可靠传输的工作原理 TCP首部格式 TCP可靠传输的实现 TCP流量控制 TCP的拥塞控制 TCP的连接管理这几个方面进行解析 不对之处还望指出 喜欢的可以点赞关注一下 谢谢 一 运输层协议概
  • 写一段js代码,完成字段校验规则:字段的长度必须介于6-20位之间,必须包含大小写字母和数字。...

    var regex new RegExp a z A Z 0 9 a zA Z0 9 6 20 if regex test fieldValue 校验通过 else 校验不通过
  • Dynamics 365 自动化发布工具Spkl介绍

    本篇主要是为了后面讲述CI CD时用到的工具做一个说明 先奉上spkl的github地址 没听说过的可以去查看下 挺不错的工具 我们主要用这个工具来部署WebResource Plugin和Workflow Activities 以及后续的
  • 一篇搞定SpringCloud面试(两万字)

    本文来自一位非常卷的在校学生写的学习笔记 哎 这样太卷了 作为一个苦逼的在读大学生 又要面临半年一度的期末考试了 因为上课没听 我啥都不会 什么通信原理 单片机 饶了我吧 给你们看看我上课在干啥你就知道我为啥啥都不会了 上课笔记 emmm
  • 群晖 NAS WebDAV服务手机ES文件浏览器远程访问【无公网IP内网穿透】

    iOS开发上架主页 在强者的眼中 没有最好 只有更好 我们是移动开发领域的优质创作者 同时也是阿里云专家博主 关注我们的主页 探索iOS开发的无限可能 我们与您分享最新的技术洞察和实战经验 助您在移动应用开发领域取得成功 欢迎访问我们的微信
  • 【YOLO v7】论文笔记

    YOLO v7 论文笔记 文章地址及源码 文章 https arxiv org abs 2207 02696 源码 https github com WongKinYiu yolov7 研究背景及主要贡献 针对目标群体 执行实时目标检测的计
  • docker安装seata1.5.2及其使用

    前言 最近进行了seata的安装和使用 对照网上的文章和文档进行安装配置使用的过程中绕了不少弯路 现在完成工作之后写一篇博文对此进行总结和记录 直接上案例 首先要注意Spring Cloud Alibaba Spring Cloud Spr
  • 了解并使用Xposed 框架神器

    什么是Xposed框架 Xposed 框架是个神器 帮助文档 关于Xposed框架的安装以及使用 https sspai com post 24538 Xposed下载地址以及模块库 https repo xposed info modul
  • 使用Qt Creator开发动态链接库,并在程序中调用(动态链接库)

    在 QT 中 一般将驱动 动态库 dll文件一概而论 一路下一步 至工程建立 dynamiclibrary h ifndef DYNAMICLIBRARY H define DYNAMICLIBRARY H include dynamicl
  • 以日期作为ts切片文件名问题的解决过程

    一 需求 EasyDarwin使用FFmpeg来保存流媒体 以多个ts分片形式存在 但由于EasyDarwin调用FFmpeg命令时 没有对生成名字做处理 所以默认生成的ts文件名都是out0 ts out1 ts 这种名称意义不大 需要以
  • 【华为OD机试真题 Java】最长连续子序列

    前言 本专栏将持续更新华为OD机试题目 并进行详细的分析与解答 包含完整的代码实现 希望可以帮助到正在努力的你 关于OD机试流程 面经 面试指导等 如有任何疑问 欢迎联系我 wechat steven moda email nansun09
  • 22款常用微信小程序UI框架推荐!

    22个好看 常用的微信小程序UI组件库推荐 1 WeUI 地址 https developers weixin qq com miniprogram dev extended weui 预览码 2 ColorUI 地址 https gith
  • flutter 数据持久化之sqflite

    sqflite 是一款轻量级的关系型数据库 类似SQLite 支持iOS和Android 适用于存储数据库 表类型的数据 使用 添加依赖 dependencies flutter sdk flutter sqflite插件 sqflite
  • html怎么在网页标题栏上添加图标

    需求 像下图这样给网页标题栏加个图标 方法 需要先把图片格式转换为 ico类型 在这个网址在线转换很方便 https www easyicon net covert 在加一行来显示图标 注意 如果加入了没有效果 检查一下路径是否正确 文件名