HTML的学习笔记2

媒体标签

图片标签

图片标签用于在网页中显示图片
将图片引入网页的标签为

1
<img src="" alt="" >

标签写的位置在body中，要使用img标签要展示对应的效果，需要借助标签的属性进行设置。

img标签中src=””是标签的属性,其中src是标签的属性名=””是标签的属性值。
在写代码时要注意代码之间的空格，属性之间用空格隔开，属性之间没有先后顺序。
要引入当前的文件夹中的图片的代码是。

1
./要引入的图片.jpg

img中的alt=””属性作用是替换文本，当图片无法显示的时候显示的文字。
img标签中可以加入title属性，他的属性作用是在鼠标放在图片上时有提示性文子。
img标签中可以添加width标签和height标签，它们的属性值(作用)是使图片更改相应的宽度和高度。
注意

  • 如果只设置了width或height中的一个，另一个没设置的会自动设置图片等比例缩放(此时图片不会变形)。
  • 如果width和height两个同时设置了，如果设置不当此时图片可能会变形。
    对于width和height两个属性工作中一般只写其中一个值，另一个会进行等比例缩放，好处是图片不会变形。

路径

使用需求为页面要加载图片，需要相对应的图片位置
路径分为两种：

  • 绝对路径
  • 相对路径

绝对路径

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始
例如

1
2
盘符开头： D：\mnochen\123.jpg
完整的url地址：https://mnchen.cn/

相对路径

相对路径是从当前文件夹开始出发找寻目标文件

  • 在同级的文件夹中一般用./或直接写出当前文件名。

    1
    2
    方法一：<img src="需要的目标文件夹.jpg">
    方法二：<img src="./目标文件夹.jpg">

  • 在下级文件夹中一般是先写出需要进入的文件夹名后再写需要引用的文件。

    1
    方法：<img src="举例文件夹/需要的目标文件.jpg">

  • 在上级文件夹中一般是使用../来进行引入。

    1
    方法：<img src="../需要进入的上级文件夹/需要的目标文件.jpg">

音频标签

音频标签的应用场景是在页面中插入音频。

1
代码为：<audio src="" controls></audio>

audio标签中常用的属性名有src(音频的路径)、control(显示播放的控件)、autoplay(自动播放，注部分浏览器不支持)、loop(循环播放)。
音频标签目前只支持三种格式：MP3、wav、ogg

视频标签

视频标签的应用场景是在页面中插入视频。

1
代码为：<video src="" controls><.video>

video标签中常用的属性名与音频标签一致。
注意在谷歌浏览器中想要使用autoplay标签自动播放时要配合muted静音标签一起使用。

链接标签

链接标签的使用场景是点击之后从一个页面跳转到另一个页面

1
代码为：<a href="./目标网页.html">超链接</a>

代码特点：

  • 双标签，内部可以包裹内容
  • 如果需要a标签点击之后去指定的页面，需要设置a表签的href属性
    如果要跳转到其他网页要使用完整的网址如https://mnchen.cn
    当开发网站初期的时候，还不知道要跳转的网址时，href的属性可以填#号来代替(#号通常代表为空链接)。
    我们可以通过target属性来更改网址打开的方式
    1
    2
    在target标签中写入_self 时，会在当前的窗口跳转(会覆盖原网页)，代码如 target="_self"
    在target标签中写入_blank 时，会在新窗口中进行跳转(保留原网页)，代码如 target="_blank"
    在a标签中target属性的默认值为_self