文章目录:
-
1.HTML图片标签
- 1.1 图像标签-基本使用
- 1.2 图像标签-属性
-
1.3 路径
- 1.3.1 相对路径
- 1.3.2 绝对路径
-
2.超链接标签
-
3.音频标签
-
4.视频标签
1.HTML图片标签
1.1 图像标签-基本使用
作用:在网页中插入图片。
<img src="图片的URL">
src用于指定图像的位置和名称，是的必须属性。
本地图片的使用
图片拖拽到文件夹里
<img src="./+自动出的窗口选择图片">
vs code有提示功能
1.2 图像标签-属性
前两个属性是重点,后两个不是重点,后期可以通过css来设置
<img src="./图片.jpg" width='600'>
浏览器默认等比例缩放
<img src="./dog.jpg" title="这是一只狗">
<img src="./cat1.jpg" alt="这是一只猫">
- 属性名=“属性值”
- 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
1.3 路径
路径指的是查找文件时，从起点到终点经历的路线。
路径分类:
- 相对路径:从当前文件位置出发查找目标文件
- 绝对路径:从盘符出发查找目标文件
Windows电脑从盘符出发
Mac电脑从根目录出发
1.3.1 相对路径
. 代表当前文件所在的文件夹
.. 当前文件上一级文件夹
/ 进入某个文件夹里面
1.3.2 绝对路径
绝对路径-从盘符出发查找目标文件
- Windows 电脑从盘符出发
- Mac 电脑从根目录(/)出发
<img src="C:\images\mao.jpg">
- Windows默认是\，其他系统是/，建议统一写为/
2.超链接标签
作用:点击跳转到其他页面。
<a href="https://www.baidu.com">跳转到百度</a>
href 属性值是跳转地址，是超链接的必须属性
举例说明:
<a href="https://www.baidu.com/">跳转到百度</a>
本地文件跳转,相对路径查找:
<a href="./01-标签的写法.htm1">跳转到01-标签的写法</a>
链接跳转成为一个新的页面,加入target属性
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>
开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转
<a href="#">空链接</a>
3.音频标签
文章来源：https://www.toymoban.com/news/detail-824685.html
<audio src=" ./media/music.mp3"></audio>
在HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词
<audio src=" ./media/music.mp3" controls></ audio>
4.视频标签
<video src="视频的URL"></video>
举例:
<video src="./3956.MP4" controls></video>
文章来源地址https://www.toymoban.com/news/detail-824685.html
到了这里，关于【前端web入门第一天】02 HTML图片标签 超链接标签的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术3（HTML5、CSS3、JavaScript ）超链接，target，scrolling,marginwidth,frameborder,iframe——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/753014-1.png)
![[HTML]Web前端开发技术16（HTML5、CSS3、JavaScript ）表格课后练习网页标题：域标签的使用网页标题：美家装饰联系我们网页标题：登录界面网页标题问卷调查——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/01/820808-1.png)
