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

文章目录:


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>
相关推荐
小旋风012342 分钟前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
热爱编程的小曾24 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin35 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox