图片标签
主要是讲解 在html 中 怎么将图片放入其中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签（难点）</title>
<!-- 首先 先了解一个关于路径的问题
1.路径问题（URL）：
>.绝对路径
从盘符开始的路径（也就是从根目录开始）
因为在绝对路径的方式下，稍微改一下文件的保存位置，
则我们所需要的内容不能正常的提取出来，这时，要考虑使用相对路径
>.相对路径
从当前位置开始 （也就是我们书写代码的.html文件开始）
表示当前位置的方式是 使用 ./
表示上一级的方式是 使用 ../
-->
</head>
<body >
<!--
2.图片标签的导入方式 -->
<!-- 1.引入网络链接的导入方式 src：源（来源地址 url） -->
<!-- <img src="https://wx1.sinvaimg.cn/mw690/006l025HWlgy1dsnvsjcl4jej351c3s0kjp.jpg" >
这个照片是别人博客上的照片可能有加密，没有查看URL的权限所以并不能访问成功-->
<imgsrc="https://img2.baidu.com/it/u=3026395688,422145629&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="">
<imgsrc="https://image.baidu.com/search/detailct=503316480&z=0&ipn=d&word=%E9%B2%B8%E9%B1%BC&step_word=&hs=0&pn=23&spn=0&di=7400427937490534401&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf8&oe=utf8&in=&cl=2&lm=-1&st=undefin ed&cs=1086678049%2C118833843&os=3387924429%2C2989561529&simid=1086678049%2C118833843&adpicid=0&lpn=0&ln=1698&fr=&fmq=1725 781151348_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined©right=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fup.deskcity.org%2Fpic_source%2F78%2F88%2Ff7%2F7888f7156de78a3ad90c790652e131d0.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B1jfhvtpy_z%26e3B562AzdH3F15ogs5w1AzdH3F8d89cm0cax8nn9_z%26e3Bip4s&gsm=1e&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsMiwxMyw3LDYsNSwxMiw5&lid=12265281604030884449" alt="">
<!-- 第一个链接直接指向图片，更适合直接在<img>标签中使用。
第二个链接指向的是一个包含图片详情的页面，不能直接在<img>标签中使用。
（第二个链接是我直接复制的页面的网址，显然这是不正确的）
-->
<hr>
<!-- 2.绝对路径 引入-->
<img src="E:\web\codedaima\01.html\1.4多媒体标签\jy.webp" alt="">
<!-- 3.相对路径 引入 -->
<img src="./jy.webp" alt="">
<img src="../1.3块级标签及行内标签/jy.webp" alt="">
<!--多一个点表示在上一目录去寻找 ../../ 一个../ 代表跳出一个文件夹 最高可以到根盘上-->
<!--
3.面试题 \ / 正反斜杠有什么区别
话术： 面试官， 我测试过
\ 是windows系统的分隔符，一般要加转义符号\\ 存在兼容性问题，有的时候在Linux系统中可能不会识别
/ 是通用的 一般情况下不存在兼容性问题
-->
<!--
4.常见图片属性
src：图片地址 1.网络地址 2.绝对路径 3.相对路径
alt：图片加载失败时，输出的提示信息 （测试这个的时候 将图片地址写错就行）
windth：设置图片的宽度
height：设置图片的高度
title：在鼠标在图片上时，所呈现的提醒信息（给图片设置一个图片信息）
vspace: 设置图片的垂直边距
hspace：设置图片的水平边距
以上的宽高 边距 的单位都是px
-->
<!-- 4.测试常用属性 -->
<img src="./jy.webp"
alt="图片加载失败"
width="500px"
height="500px"
title="这是一头大鲸鱼"
vspace="100px">
</body>
</html>
<!--
body:
背景属性：
background：指定文档的背景图像。
bgcolor：设置文档的背景颜色。 后期在改变背景颜色时 使用backgroud-color 较多 可以都试试。
-->
视频和音频
学会将视频或音频加入网页 （略作了解即可 后期应该会联网播放 这种还是主要运用在本地上的文件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>视频和音频</title>
<!--
1.音频 --audio
2.视频 --video
公用属性--
>.controls 相当与上一个播放器 视频和音频总要有播放器才能播放 这是一个必选项
>.src 和之前一样对应的是文件的地址
>.autoplay 自动播放---
但是大多数浏览器都会用户体验太差，所以会拦截播放
>.muted 静音播放 由用户自己选择是否需要打开声音
-->
</head>
<body>
<audio src="./shiyan.mp4" controls></audio>
<video src="./shiyan.mp4" controls></video>
</body>
</html>
