位置: IT常识 - 正文

〖大前端 - 基础入门三大核心之 html 篇⑩〗- 图片标签(大前端2021)

编辑:rootadmin
〖大前端 - 基础入门三大核心之 html 篇⑩〗- 图片标签

推荐整理分享〖大前端 - 基础入门三大核心之 html 篇⑩〗- 图片标签(大前端2021),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:大前端包括啥,大前端包括啥,大前端2021,大前端2021,大前端课程,前端 大前端,大前端需要掌握什么技能,大前端技术,内容如对您有帮助,希望把文章链接给更多的朋友!

大家好,我是 哈士奇 ,一位工作了十年的"技术混子", 致力于为开发者赋能的UP主, 目前正在运营着 TFS_CLUB社区。

💬 人生格言:优于别人,并不高贵,真正的高贵应该是优于过去的自己。💬

📫 如果文章知识点有错误的地方,请指正!和大家一起学习,一起进步👀

🔥 如果感觉博主的文章还不错的话,还请 👍 关注、点赞、收藏三连支持 👍 一下博主哦

🏆 CSDN博客专家认证、新星计划第三季全栈赛道MVP 、华为云享专家、阿里云专家博主 🏆

专栏系列(点击解锁)学习路线(点击解锁)知识定位 🔥Python全栈白皮书🔥 零基础入门篇 以浅显易懂的方式轻松入门,让你彻底爱上Python的魅力。 语法进阶篇 主要围绕多线程编程、正则表达式学习、含贴近实战的项目练习 。 自动化办公篇 实现日常办公软件的自动化操作,节省时间、提高办公效率。 自动化测试实战篇 从实战的角度出发,先人一步,快速转型测试开发工程师。 数据库开发实战篇 掌握关系型与非关系数据库知识,提升数据库实战开发能力。 爬虫入门与实战 更新中 数据分析篇 更新中 前端入门+flask 全栈篇 更新中 django+vue全栈篇 更新中 拓展-人工智能入门 更新中 🔥全域运营实战白宝书🔥 运营角色认知篇 初识运营,明晰运营的学习路径 高转化文案速成篇 三种文案形式,抓住特点才能下笔如有神。 策划活动与执行篇 更新中 新媒体运营篇 更新中 社区运营篇 更新中 私域社群运营篇 更新中 运营数据分析篇 更新中 低成本渠道推广篇 更新中 网络安全之路 踩坑篇 记录学习及演练过程中遇到的坑,便于后来居上者 网安知识扫盲篇 三天打鱼,不深入了解原理,只会让你成为脚本小子。 vulhub靶场漏洞复现 让漏洞复现变得简单,让安全研究者更加专注于漏洞原理本身。 shell编程篇 不涉及linux基础,最终案例会偏向于安全加固方向。 [待完结] WEB漏洞攻防篇 2021年9月3日停止更新,转战先知社区等安全社区及小密圈 渗透工具使用集锦 2021年9月3日停止更新,转战先知社区等安全社区及小密圈 点点点工程师 测试神器 - Charles 软件测试数据包抓包分析神器 测试神器 - Fiddler 一文学会 fiddle ,学不会倒立吃翔,稀得! 测试神器 - Jmeter 不仅是性能测试神器,更可用于搭建轻量级接口自动化测试框架。 RobotFrameWork Python实现的自动化测试利器,该篇章仅介绍UI自动化部分。 Java实现UI自动化 文档写于2016年,Java实现的UI自动化,仍有借鉴意义。 MonkeyRunner 该工具目前的应用场景已不多,文档已删,为了排版好看才留着。

文章目录⭐️ 图片标签🌟 <img> 标签🌟 <img> 标签的 alt 属性🌟 网页上支持的图片格式🌟 相对路径&绝对路径

前面我们学习了标题标签、段落标签、列表标签等,都是在网页上插入文本格式的内容,那么网页上常见的图片、视频音频、超级链接等是怎么插入的呢?这就用到了多媒体标签,多媒体标签包括图片标签、超级链接、音频和视频。

⭐️ 图片标签

接下来,就开启 “多媒体与语义化标签” 的学习之路吧,从 “图片标签” 开始学习!

🌟 标签

图片标签就是<img>标签,img是image(图片)的缩写。用来在网页中插入图片。

我们先来看一个例子:

浏览效果如下:

〖大前端 - 基础入门三大核心之 html 篇⑩〗- 图片标签(大前端2021)

在使用<img >标签时,需要注意,我们的图片必须要复制到项目文件夹中,拿上面的例子来说,这个 “哈士奇” 的图片存放在了 first_porject\images 下面,与我的当前文件(图片标签.html)属于同一个项目文件夹,这样我们才能读取到这张图片。

PS:在实际项目中,网站用到的图片一般都会集中存放到一个images或img文件夹中,方便管理使用。比如下面这个路径:

<img src="images/husky.png">

图片插入网页的本质:

图片本质上没有被插入网页中,只是被引入到了网页中。所以我们如果要将图片标签的代码上传到服务器上时,需要把src里的图片也一起上传到服务器,否则服务器找不到src路径对应的图片也就无法显示在网页中了。

🌟 标签的 alt 属性

alt属性是alternate(替代品)的缩写,它是对图像的文本描述,不是强制性的。

<img src="images/husky.png" alt="TFS_CLUB">alt属性的作用:当网页由于某种原因(如:网速太慢或者图片不小心被删除or无法加载图像时,浏览器会在页面上显示alt属性中的文本。还有一个作用,如果浏览网页的人需要网页朗读器朗读网页,会朗读alt中的文本。

<img> 标签的 width、height属性

想要设置网页图片的大小时,就需要用到width、height属性。分别设置宽度和高度,单位是像素,注意必须写单位。

width和height不需要两个一起设置,也可以只设置一个。比如只设置宽度width,height则会按图片的原始比例自动缩放。

🌟 网页上支持的图片格式

格式描述.bmpwindows画图软件默认保存的格式,位图.gif支持动图,如表情包.jpeg(.jpg)有损压缩图片,用于照片.png便携式网络图像,可以又损也可以无损。用于logo、背景图形等,支持透明和半透明.svg矢量图片.webp最新的压缩算法非常优秀的图片格式

大致了解一下这几种格式的特点就可以,我们最常用的就是 .jpg 和 .png 格式。

🌟 相对路径&绝对路径

相对路径:描述从当前文件出发,找到图片的路径。相对路径如果需要回退层级,使用"../"的写法

绝对路径:描述图片的精准地址。生活中,我们的收货地址就是一个绝对地址。

下面举个例子来帮助大家理解:

代码示例:

<!--相对路径:--><img src="../images/husky_1.png" alt="TFS_CLUB"><!--绝对路径:找了百度首页的图片的路径举例--><img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682330425-2d94b2ccde14b5e.png">

浏览效果如下:

本文链接地址:https://www.jiuchutong.com/zhishi/300689.html 转载请保留说明!

上一篇:lslogins命令 显示系统中现有用户的相关信息(ls -lh命令)

下一篇:CSDN接入AIGC辅助创作,对此你怎么看?

  • sonypsp3000说明书(sonypsp3000)(sonypsp3006怎么使用)

    sonypsp3000说明书(sonypsp3000)(sonypsp3006怎么使用)

  • vivo x27的wifi二维码在哪里(vivo手机wifi二维码在哪里)

    vivo x27的wifi二维码在哪里(vivo手机wifi二维码在哪里)

  • matebook14有几个接口(matebook14有几个版本)

    matebook14有几个接口(matebook14有几个版本)

  • 怎么才能让f2不当音量键(怎么才能让f2不弹窗)

    怎么才能让f2不当音量键(怎么才能让f2不弹窗)

  • OPPO手机屏幕关闭时间怎么调整(oppo手机屏幕关闭继续摄像)

    OPPO手机屏幕关闭时间怎么调整(oppo手机屏幕关闭继续摄像)

  • 抖音极速版刷视频一直显示很遗憾(抖音极速版刷视频能赚钱吗)

    抖音极速版刷视频一直显示很遗憾(抖音极速版刷视频能赚钱吗)

  • 社区网络宽带延迟高是什么原因(什么叫社区宽带延迟)

    社区网络宽带延迟高是什么原因(什么叫社区宽带延迟)

  • xp系统开机加载不进去

    xp系统开机加载不进去

  • e51650v2相当于什么cpu(e51650v2相当于什么水平)

    e51650v2相当于什么cpu(e51650v2相当于什么水平)

  • 华为rioul00什么型号(华为rloul00)

    华为rioul00什么型号(华为rloul00)

  • 苹果微信支付无效(苹果微信支付无效下载不了软件)

    苹果微信支付无效(苹果微信支付无效下载不了软件)

  • 荣耀9时间设置(荣耀时间设置在手机哪里)

    荣耀9时间设置(荣耀时间设置在手机哪里)

  • 手机上面出个hd收费吗(手机上面出个HD怎么取消)

    手机上面出个hd收费吗(手机上面出个HD怎么取消)

  • 苹果6手机怎么一键加速(苹果6手机怎么清理内存)

    苹果6手机怎么一键加速(苹果6手机怎么清理内存)

  • 乐视手机怎么删除通讯录(乐视手机怎么删除自带软件)

    乐视手机怎么删除通讯录(乐视手机怎么删除自带软件)

  • 一加7T怎么开启放大手势(一加7t怎么开启打字振动)

    一加7T怎么开启放大手势(一加7t怎么开启打字振动)

  • web安全从哪几个方面考虑(web安全主要分为几个方面)

    web安全从哪几个方面考虑(web安全主要分为几个方面)

  • 目前最窄下巴的手机(目前最窄下巴的女人面相)

    目前最窄下巴的手机(目前最窄下巴的女人面相)

  • 华为p20怎么看海拔高度(华为p20手机怎么看海拔高度)

    华为p20怎么看海拔高度(华为p20手机怎么看海拔高度)

  • b450主板支持win7吗(b450主板支持几代锐龙)

    b450主板支持win7吗(b450主板支持几代锐龙)

  • 暴风影音如何投屏(暴风影音怎么投放电视)

    暴风影音如何投屏(暴风影音怎么投放电视)

  • 抖音可以移除粉丝吗(抖音可以移除粉丝关注吗)

    抖音可以移除粉丝吗(抖音可以移除粉丝关注吗)

  • 为什么微信要点开才能收到信息(为什么微信要点开才能收到视频)

    为什么微信要点开才能收到信息(为什么微信要点开才能收到视频)

  • 微信小程序【获取用户昵称头像和昵称(附源码)】(微信小程序获取位置信息的权限在哪里修改位置)

    微信小程序【获取用户昵称头像和昵称(附源码)】(微信小程序获取位置信息的权限在哪里修改位置)

  • 钉钉消息防撤回功能研究与实现-可查看历史消息[文件/图文/管理员/链接 撤回拦截](钉钉防止撤回)

    钉钉消息防撤回功能研究与实现-可查看历史消息[文件/图文/管理员/链接 撤回拦截](钉钉防止撤回)

  • 吴中区个体户如何办理
  • 企业所得税的起征点
  • 税务专业是什么学位
  • 暂估入库后怎么冲回
  • 城建税减半从什么时候开始
  • 未达起征点附加税还需要扣税嘛
  • 固定资产新规则
  • 税盘抵扣的会计分录
  • 非金融企业和金融企业
  • 以前年度损益调整会计分录
  • 账户未认证
  • 用友t3固定资产计提折旧后没有凭证
  • 所得税汇算清缴调整项目
  • 贷款损失准备对不良贷款的比率称作
  • 总公司发工资子公司代缴个税
  • 计提费用的时候可以计提税金吗
  • 按期汇总缴纳印花税可以退税吗
  • 开票方与受票方的区别
  • 发票的金额可以答应客户多开
  • 不增税、免税、零税率的差异
  • 如果月初忘记抄税直接开票怎么办
  • 吊车租赁费计入什么会计科目
  • 公司账户转账给个人账户有限额吗?
  • 企业的低值易耗品主要包括什么等
  • 失业保险费退还计入什么科目
  • 金蝶迷你版年结账套怎么结转下年
  • 货物装卸过程中由于操作不当或违反操作规程
  • 收到汽车报废补贴怎么做账?
  • 勒索病毒文件怎么恢复
  • edge浏览器设置主页网址
  • ajax不刷新页面
  • php怎么配置环境
  • 2020香港回归23年
  • 银行承兑汇票挂失手续费收费标准
  • react connect用法
  • pytorch example
  • 前端发起请求怎么设置
  • ajax获取php数据
  • 什么是跨域以及解决方法
  • 不得免征和抵扣税额是什么意思
  • 应收款挂账会计分录
  • 帝国cms采集标签
  • 帝国cms专题
  • 织梦相关文章调用
  • 收到政府扶贫款如何做分录
  • 城市维护建设税,教育费附加,地方教育费附加
  • sql server新增数据
  • win7系统安装包在哪个文件夹
  • 出租车定额发票代码含义
  • 公司借个人款利息产生个人所得税公司可以承担吗
  • 会计记错账有什么后果
  • 上月的普票下月可以记账么
  • 以前年度损益调整在利润表中怎么填
  • 应付账款已付款应该怎样记账
  • 单位买另一单位的保险
  • 小规模一季度不超过30万是不含税吗
  • 银行有哪几种转型方式
  • 每个单位都要缴纳五险一金吗
  • 建造合同收入
  • 新公司初始建账
  • sql2008r2镜像
  • Win10预览版桌面图标和任务栏不翼而飞怎么办?
  • vistaie9安装所需更新补丁
  • centos怎么执行脚本
  • ubuntu桌面版安装教程
  • 如何解决孩子多动
  • vsftp查看状态
  • centos更改文件所有者和组
  • node 线程 进程
  • 5.2光源
  • node.js go
  • unity shader lerp
  • ssh执行远程命令 参数
  • 在xml文件里使用的命令
  • unity ugui源码
  • js发送请求的几种方式
  • 广东etc政策
  • 河北省职称证去哪里查
  • 罗湖税务局在哪
  • 电信业八大争议事件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设