【前端web入门第一天】02 HTML图片标签 超链接标签

文章目录:

• 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.音频标签

<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>