<!--
1.img标签中的img其实是英文image的缩写
所以img标签的作用, 就是告诉浏览器我们需要显示一张图片
2.img标签格式: <img src="">
其实img标签中的src是英文source的缩写
所以img标签中的src就是用来告诉img标签, 需要显示的图片名称
3.注意点
- 和H系列标签/p标签还有Hr标签不一样, img标签不会独占一行
- 如果我们手动指定了img标签显示的图片的宽度和高度, 有可能会导致图片变形, 那么如果又想指定宽度和高度, 又不想让图片变形. 我们可以只指定宽度和高度其中的一个值即可
- 只要指定了高度, 系统会自动根据高度计算出宽度, 只要指定了宽度, 系统会自动根据宽度计算出高度, 并且都是等比拉伸的, 也就是说不会变形
4.img中的其它属性
width: 宽度
height: 高度
所以在img标签中width/height这两个属性的作用, 就是用来告诉img标签将来需要显示的图片有多宽有多高
如果img标签没有指定需要显示的图片的宽高, 那么系统会按照图片默认的宽高来显示
如果img标签指定的宽高, 那么系统会按照指定的宽高来显示
title: 用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容
alt其实是英文alternate的缩写, 它的作用就是用于告诉浏览器, 当需要显示的图片找不到时显示什么内容
--><img src="images/QRCode.jpg"><img src="images/QRCode.jpg" width="300" height="478"><img src="images/QRCode.jpg" width="100" height="478"><img src="images/QRCode.jpg" height="178"><img src="images/QRCode.jpg" width="100"><img src="images/QRCode.jpg" width="100" title="这个是江哥的微信二维码图片"><img src="images/QRCode1.jpg" width="100" alt="对不起, 你需要查看的图片不见了">
<!--
br标签, 如何在HTML中换行? 可以使用br标签
1. br标签作用: 换行
2. br标签格式: <br>
3. br标签的注意点:
3.1多个br标签可以连续使用, 使用了多少个br标签就会换多少行
3.2由于HTML的作用就是用来给文本添加语义, 而br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签
--><!--只设置了img标签的src属性<br><br><br>--><!--<img src="QRCode.jpg"><br>--><!--设置了img标签的src和width以及height属性<br>--><!--<img src="QRCode.jpg" width="300" height="478"><br>--><!--设置了img标签的src和width以及height, 但是宽高不是等比拉伸的<br>--><!--<img src="QRCode.jpg" width="100" height="478"><br>--><!--设置了img标签的src和height属性<br>--><!--<img src="QRCode.jpg" height="178"><br>--><!--设置了img标签的src和width属性<br>--><!--<img src="QRCode.jpg" width="100"><br>--><!--设置了img标签的src和width以及title属性<br>--><!--<img src="QRCode.jpg" width="100" title="这个是江哥的微信二维码图片"><br>--><!--设置了img标签的src和width以及alt属性<br>--><!--<img src="QRCode1.jpg" width="100" alt="对不起, 你需要查看的图片不见了"><br>--> <p>只设置了img标签的src属性</p> <p><img src="images/QRCode.jpg"></p> <p>设置了img标签的src和width以及height属性</p> <p><img src="images/QRCode.jpg" width="300" height="478"></p> <p>设置了img标签的src和width以及height, 但是宽高不是等比拉伸的</p> <p><img src="images/QRCode.jpg" width="100" height="478"></p> <p>设置了img标签的src和height属性</p> <p><img src="images/QRCode.jpg" height="178"></p> <p>设置了img标签的src和width属性</p> <p><img src="images/QRCode.jpg" width="100"></p> <p>设置了img标签的src和width以及title属性</p> <p><img src="images/QRCode.jpg" width="100" title="这个是江哥的微信二维码图片"></p> <p>设置了img标签的src和width以及alt属性</p> <p><img src="images/QRCode1.jpg" width="100" alt="对不起, 你需要查看的图片不见了"></p>
<!--
路径问题
其实想给src属性赋值有两种方式
1.通过相对路径赋值(掌握)
相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径
1.1同级
同级就是"图片"和".html文件"存储在同一个文件夹中
格式: src="QRCode.jpg"
含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片
1.2下级
下级就是"存储图片的文件夹"和".html文件"在同一个文件夹中
格式: src="images/QRCode.jpg"
含义: 在.html文件所在的文件夹中找到名称叫做images的文件夹
然后再在images文件夹中找到名称叫做QRCode.jpg的图片
1.3上级
上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中
格式: src="../QRCode.jpg"
含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫做QRCode.jpg
其中../代表找到当前文件夹的上一级文件夹
2.通过绝对路径赋值(了解)
绝对路径就是每次都从指定的盘符开始查找
格式: src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg"
含义: 在C盘下找到Users文件夹, 然后在Users文件夹中找到Jonathan_Lee文件夹, 然后在Jonathan_Lee文件夹中找到Desktop文件夹, 然后在Desktop文件夹中找到HTML基础文件夹, 然后在HTML基础文件夹中找到名称叫做QRCode.jpg的图片
注意:
1.路径中不要出现中文, 否则可能出现未知问题
2.如果是通过"相对路径"来指定图片, 不能跨盘符
2.1例如.html文件在C盘, 那么不能去查找D盘图片
--><img src="QRCode.jpg"><img src="images/QRCode.jpg"><img src="../QRCode.jpg"><img src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg" >
<!--
什么是a标签?
a标签的作用: 就是用于控制页面与页面之间跳转的
a标签的格式: <a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
a标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转
_self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self
_blank: 用于在新的选项卡中跳转, 也就是新建界面跳转
a标签中还有一个属性, 叫做title. a标签中的title和img标签中的title一样, 都是用来控制鼠标悬停时显示的提示文本的
注意点:
1.a标签不仅可以让文字可以点击, 还可以让图片也能够被点击
2.一个a标签必须有一个href属性, 否则a标签不知道要跳转到什么地方
3.如果通过a标签的href属性指定一个URL地址, 那么必须在地址前面加上http://或https://
4.a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址
-->
<a href="https://www.nuomi.com/?cid=002540">糯米</a>
<a href="https://binjiejw.tmall.com/category-1080022346.htm?search=y&parentCatId=1080019249&parentCatName=%A1%A4?catName=??%A1%A4???????spm=a220o.1000855.w5001-10945243352.20.Fq84rf&scene=taobao_shop&ali_trackid=30_e27f91873d121ea29b062a117ba2991b&spm=a21bo.50862.201862-4.1.9GysHu#bd"> <img src="images/QRCode.jpg" width="150"></a>
<a href="08-br标签.html">08-br标签.html</a>
<a href="test/demo/10-路径练习.html">10-路径练习.html</a>
<a href="https://www.nuomi.com/?cid=002540" target="_self">糯米</a>
<a href="https://www.nuomi.com/?cid=002540" target="_blank">糯米</a>
<a href="https://www.nuomi.com/?cid=002540" target="_blank" title="江哥提示: 会跳转到百度糯米的首页">糯米</a>
<title>11-base标签</title> <base target="_blank"></head><body><!--
base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开
注意点:
1.base标签必须写在head标签的开始标签和结束标签之间
2.如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行
--><a href="https://www.nuomi.com/?cid=002540" target="_self">糯米</a>
<a href="http://news.baidu.com/">新闻</a>
<a href="https://www.hao123.com/">hao123</a>
<a href="http://map.baidu.com/">地图</a>
<a href="http://v.baidu.com/">视频</a>
<a href="http://tieba.baidu.com/">贴吧</a>
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
