文章目录:
-
- [1.1 图像标签-基本使用](#1.1 图像标签-基本使用)
- [1.2 图像标签-属性](#1.2 图像标签-属性)
- [1.3 路径](#1.3 路径)
- [1.3.1 相对路径](#1.3.1 相对路径)
- [1.3.2 绝对路径](#1.3.2 绝对路径)
1.HTML图片标签
1.1 图像标签-基本使用
作用:在网页中插入图片。
html
<img src="图片的URL">
src用于指定图像的位置和名称,是的必须属性。
本地图片的使用
图片拖拽到文件夹里
html
<img src="./+自动出的窗口选择图片">
vs code有提示功能
1.2 图像标签-属性
前两个属性是重点,后两个不是重点,后期可以通过css来设置
html
<img src="./图片.jpg" width='600'>
浏览器默认等比例缩放
<img src="./dog.jpg" title="这是一只狗">
<img src="./cat1.jpg" alt="这是一只猫">
- 属性名="属性值"
- 属性写在尖括号里面,标签名后面,标签名和属性之间用空格隔开,不区分先后顺序
1.3 路径
路径指的是查找文件时,从起点到终点经历的路线。
路径分类:
- 相对路径:从当前文件位置出发查找目标文件
- 绝对路径:从盘符出发查找目标文件
Windows电脑从盘符出发
Mac电脑从根目录出发
1.3.1 相对路径
html
. 代表当前文件所在的文件夹
.. 当前文件上一级文件夹
/ 进入某个文件夹里面
1.3.2 绝对路径
绝对路径-从盘符出发查找目标文件
- Windows 电脑从盘符出发
- Mac 电脑从根目录(/)出发
html
<img src="C:\images\mao.jpg">
- Windows默认是\,其他系统是/,建议统一写为/
2.超链接标签
作用:点击跳转到其他页面。
html
<a href="https://www.baidu.com">跳转到百度</a>
href 属性值是跳转地址,是超链接的必须属性
举例说明:
html
<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.音频标签
html
<audio src=" ./media/music.mp3"></audio>
在HTML5 里面,如果属性名和属性值完全一样,可以简写为一个单词
<audio src=" ./media/music.mp3" controls></ audio>
4.视频标签
html
<video src="视频的URL"></video>
举例:
<video src="./3956.MP4" controls></video>