位置: 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辅助创作,对此你怎么看?

  • 讲好一个品牌故事,你必须学会的四大黄金原则(如何讲好一个品牌故事)

    讲好一个品牌故事,你必须学会的四大黄金原则(如何讲好一个品牌故事)

  • 360摄像头怎么恢复出厂设置(360摄像头怎么恢复出厂设置解绑手机)

    360摄像头怎么恢复出厂设置(360摄像头怎么恢复出厂设置解绑手机)

  • 网易云取消收藏歌单的方法是什么(网易云取消收藏的歌怎么找回)

    网易云取消收藏歌单的方法是什么(网易云取消收藏的歌怎么找回)

  • 华为p40镜头需要贴膜吗(p40镜头需要保护吗)

    华为p40镜头需要贴膜吗(p40镜头需要保护吗)

  • mate20pro充电动画设置(华为p20充电动画)

    mate20pro充电动画设置(华为p20充电动画)

  • mate30刷屏率(华为mate30 屏幕刷新率)

    mate30刷屏率(华为mate30 屏幕刷新率)

  • 相册打不开是什么原因(相册打不开是什么意思)

    相册打不开是什么原因(相册打不开是什么意思)

  • 1920x1200分辨率是几k(1920x1200分辨率是超清)

    1920x1200分辨率是几k(1920x1200分辨率是超清)

  • 计算机m+是什么键(计算机m+是什么意思)

    计算机m+是什么键(计算机m+是什么意思)

  • qq字符怎么取消(qq怎样取消字符)

    qq字符怎么取消(qq怎样取消字符)

  • 畅连视频怎么使用(畅连视频场景)

    畅连视频怎么使用(畅连视频场景)

  • airpods能跟华为匹配吗(airpods能跟华为电脑连接吗)

    airpods能跟华为匹配吗(airpods能跟华为电脑连接吗)

  • 温度太低电脑开不了机(温度低了电脑不能开机吗?)

    温度太低电脑开不了机(温度低了电脑不能开机吗?)

  • vivoy67上市时间(vivoy67a上市时间)

    vivoy67上市时间(vivoy67a上市时间)

  • leftctrl是哪个键(left ctrl)

    leftctrl是哪个键(left ctrl)

  • ios13怎么不能更新app了(苹果手机ios13.0怎么更新不了)

    ios13怎么不能更新app了(苹果手机ios13.0怎么更新不了)

  • 快手为什么换不了头像(快手为什么换不了名字)

    快手为什么换不了头像(快手为什么换不了名字)

  • 如何把两个表格合并到一起(如何把两个表格的数据匹配到一起)

    如何把两个表格合并到一起(如何把两个表格的数据匹配到一起)

  • 淘宝查心在哪里查(淘宝怎么查心数)

    淘宝查心在哪里查(淘宝怎么查心数)

  • soul怎么看来访(soul查看访客)

    soul怎么看来访(soul查看访客)

  • 台式电脑怎么连接无线网(台式电脑怎么连wifi)

    台式电脑怎么连接无线网(台式电脑怎么连wifi)

  • pop使用的端口号是(pop3端口号是多少默认)

    pop使用的端口号是(pop3端口号是多少默认)

  • 快手注销账号要多久(快手注销账号要多久才搜索不到)

    快手注销账号要多久(快手注销账号要多久才搜索不到)

  • 怎么将微博上的视频保存到手机中(怎么将微博上的视频保存到手机相册)

    怎么将微博上的视频保存到手机中(怎么将微博上的视频保存到手机相册)

  • 微信怎么取消听筒模式(微信怎么取消听筒播放)

    微信怎么取消听筒模式(微信怎么取消听筒播放)

  • 拼多多怎么加入购物车(拼多多怎么加入购物车一起下单)

    拼多多怎么加入购物车(拼多多怎么加入购物车一起下单)

  • 电话黑名单能收到短信吗(电话黑名单能收到对方短信吗?)

    电话黑名单能收到短信吗(电话黑名单能收到对方短信吗?)

  • 电脑重装系统失败

    电脑重装系统失败

  • ReadTimeoutError: HTTPSConnectionPool(host=‘cdn-lfs.huggingface.co‘, port=443)

    ReadTimeoutError: HTTPSConnectionPool(host=‘cdn-lfs.huggingface.co‘, port=443)

  • 最早的手机是什么(最早的手机是哪一年)

    最早的手机是什么(最早的手机是哪一年)

  • 【集群】Slurm作业调度系统的使用(集群怎么写)

    【集群】Slurm作业调度系统的使用(集群怎么写)

  • 从卷积神经网络(CNN)到图卷积神经网络(GCN)详解(卷积神经网络结构)

    从卷积神经网络(CNN)到图卷积神经网络(GCN)详解(卷积神经网络结构)

  • 递延所得税资产和负债怎么理解
  • 什么是所得税税负
  • 教育附加税税率多少?
  • 支付货代运费账务处理
  • 企业所得税抵扣项
  • 集装箱维护是做什么的
  • 小规模纳税检查怎么做
  • 企业年金如何缴费标准
  • 持有待售的固定资产减值可以转回吗
  • 不同外币之间的折算
  • 企业土地是不是都应该缴纳房产税?
  • 什么样的企业用交税
  • 土地租赁需要交土地使用税吗
  • 牵引车需要交车船税吗
  • 企业拆迁补偿款会计分录
  • 税控盘基本信息设置
  • 一般纳税人以清包工方式
  • 顾问费的个税怎么扣
  • 应交增值税进项税额借贷方向
  • 本月收到外汇怎么做账
  • 计提专项借款本月利息会计分录
  • 小规模税局代增值税专用发票怎么交税
  • 建筑服务预交税款怎么计算的
  • 进口增值税可以抵扣销项税额吗
  • 怎么把公司账户的钱转到个人账号
  • 怎么保存win10锁屏界面
  • 现金流量表与资产负债表不符
  • 其他债权投资期末公允价值的变动应当计入
  • win10应用商店下载的软件在哪
  • ubuntu22.04更换RTX 4090显卡后,安装驱动和pytorch记录
  • macos itunes
  • G40/50-70、SR1000随机Linux改安装Win7系统的实现方法
  • win10待机屏幕图片设置
  • 备用金借款有利息吗
  • 未入账发票可以作废吗
  • 苹果手机麦克风模式关闭了,怎样才能打开?
  • 核准类减免税有哪些项目
  • 房地产土地使用税征收标准
  • vue移动和pc两套代码
  • 会计账务处理年限规定
  • php中定义常量的函数是什么
  • php swoole框架
  • php十进制转二进制算法
  • php -v
  • 六自由度机器人简图
  • npm install 的 --save 选项是什么?
  • vue.3
  • 资产负债表上应付账款是负数
  • 服装店快递费
  • 工伤保险赔付计算
  • 子公司分公司和办事处账务上的区别有哪些
  • 上海电子税务局网站
  • 银行存款产生的利息收入
  • 税务相关政策的解读
  • 小规模纳税人享受3%征收率减按1%征收,销售额计算公式
  • 行政单位要不要税号?
  • 外币收款怎么做账
  • 银行三证合一是哪三证
  • 境外所得税税收抵免操作指南
  • 计入固定资产的条件
  • sql中函数 判断是否是null
  • 通用SQL存储过程分页以及asp.net后台调用的方法
  • mysql中怎么修改数据
  • windows server 2008 r2最大支持内存
  • avcodec.dll是什么意思
  • 苹果电脑安装了双系统怎么恢复苹果系统
  • c盘esd是什么文件夹
  • 本地hosts文件存在问题
  • windows 8.1 with update (multiple editions)
  • win10系统中怎么打开IE浏览器
  • win10桌面预览功能怎么打开
  • androidstudio listview
  • bootstrap怎么学
  • 加密批处理代码
  • css和js应如何在html中放置
  • [置顶]马粥街残酷史
  • 烟叶税属于中央税还是地方税
  • 我们如何理解税收意义
  • 国税注销需要什么资料
  • 法院拍卖的预售房产怎么交税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设