自学HTML第二天

、昨天对HTML有了基本的认识

下面就是今天所学的内容啦，发车发车

今天首先学习的是HTML图片的应用，那么如何再网页上实现放入图片呢，上代码！

<img src="" alt="">

<img src="1.jpg" alt="这是der的照片" title="这是title文字" width="200">

首先，放入图片的标签是 img 用vscode会自动生成第一行的代码，

那么src代表的就是你的图片所在的位置（我这里用的是相对地址，也建议用相对地址）

alt 就是在图片因为各种原因显示失败的时候，所显示的字

 效果就是如图所示

title 所展现的效果 就是你把鼠标悬停在图片上时，鼠标旁边就会浮现一串字，

width 的效果就是定义图片的宽度 当然也有高度的标签 但是之推荐用一个！因为浏览器会等比例缩放，你如果自定义高度宽度，可能会使图片变形，故而达不到效果！！

在学习图片应用的过程中也学会了路径相关的知识 上代码！

<img src="123/1.jpg" alt="" width="100">

这里的123/1.jpg的意思是进入和此网站所在地址相同的123文件夹里，获取123文件夹里的图片，也就是获取下一级文件夹里的图片

<!-- 上级 -->
<img src="../1.jpg" alt="" width="200">

这里就是上一级的文件获取方法   ../    两点一斜杠

<!-- src是属性名，“”放属性值 -->
    <!-- 一个标签可以放多个属性，属性之间用空格隔开，并且没有顺序 -->
    <!-- <img src="图不显示就会显示替换文本" alt="替换文本"> -->
    <!-- title文字是鼠标悬停再图片上显示的文本，不仅仅可以用与图片 -->
    <!-- width,height只写了一个另一个会等比例缩放，所以只用写一个就可！保证图片不 变形 -->

这里是学习过程中所做的注释

学习完图片的处理后我又学习了音频 视频 和超链接的处理

想要在网页上放音频就需要 audio 标签 上代码！

在vscode中输入audio后会生成以下第一行代码

<audio src=""></audio>

<audio src="123/采访录音 4.mp3" controls loop></audio>

src的处理是和图片一样的，不同的是这里需要加入 controls 不然的话你的网页依旧是空空如也

加入controls的效果是出现这样一个标准，你就可以播放音频啦

 

 这里就是处理音频的常用属性啦

音频完事接下来就是视频的处理啦

想要加入视频 需要的标签是 video 

<video src=""></video>

输入video效果如上，这里处理的方法基本不变

<video src="123/2.mp4" controls width="300" autoplay muted loop></video>

和音频不同的是，视频的大小是可以和控制图片的大小一样操作 而且 如果光用生成的代码而不加入属性的话，视频在网页中没有办法播放只会是一张图片 ，想要视频可以播放还是需要controls属性效果如下

 获得一个进度条控制台

 这里和音频的用法是一样的，唯一不同的是，音频无法自动播放，而视频是可以的

但是依旧有条件

<video src="123/2.mp4" controls width="300" autoplay muted loop></video>
autoplay需要和muted搭配食用

自动播放的前提就是静音！ muted的效果就是静音

视频结束后就到了连接部分啦

想要实现链接的跳转需要的标签是 只需要在vscode输入 a 即可，就会生成以下代码

<a href=""></a>

href的意思就是跳转到你所输入的连接

应用如下

<a href="https://www.bilibili.com/">跳转到b站</a>

实现的效果如下

就会出现这样一行紫色的字，你点击紫色的字，网页就会自动跳转到你所输入的网址，但是这种跳转是会覆盖你此时的网页，想要另起一个新的网页的方法有两种，

第一种就是你在点击跳转的同时按下ctrl就可以新生成一个网页了

第二种就是需要你在写代码的时候规定他另起网页跳转了 看代码

<a href="https://www.bilibili.com/" target="_blank">b站</a>

 这里加入了 target 属性，详解见下图

 

本来今天就该到此为止的，但是闲来无事，便多学了一点，思虑片刻后决定后续内容还是放入明天的打卡内容中，方便复习的时候有针对性

明天见LD 

打卡第二天