第三次总结
图片标签
图片标签,顾名思义是用于在当前网页中添加图片的标签,形式如下:
**<img src="(图片地址)alt=" (图片描述) " **
实现代码:
<body>
<img src="./img/QQ图片20201122182118.png" alt="小可爱">
<!-- 图片可以用本地的图片,也可以用网上的图片,网上的图片地址通过"右键点击图片 ———>复制图片地址"得到 -->
<!-- 图片格式不限(吧),还可以用gif动图-->
<!-- alt属性用于描述图片内容,不是一定要写,有的浏览器在图片加载不出来的时候就会显示图片描述的文字,搜索引擎也可以通过输 入图片描述的内容找到该图片 -->
</body>
-
还可以在img标签中添加width和height属性来改变图片的大小(但一般在pc端不建议使用,移动端则经常需要对图片进行缩放)
==p.s:==这两个属性若一次只改一个,图片会按比例同时更改宽和高
实现代码:
<body> <img width="100" src="./img/QQ图片20201122182118.png" alt="小可爱"> <!--所填数字的单位是像素 --> </body>
<body>
<img width="100" height="200" src="./img/QQ图片20201122182118.png" alt="小可爱">
</body>
内联框架(用的不多,了解就好)
用于向当前页面引入一个其他的页面,形式如下:
< ifame src="(引入的页面的地址)" width="" height="" frameborder="(引入页面的边框)">< / iframe >
实现代码:
<body>
<iframe src="https://www.baidu.com/ " width="400" height="400" frameborder="0"></iframe>
<!-- frameborder后面的值只能填0或者1,填0没有边框,填1有边框-->
</body>
==p.s:==此处若编辑器开了Live Serve插件,要想网页显示出想要的效果还需要重新刷新
这个是frameborder的值为1或者没有设置的情况;
这个是frameborder的值为0的情况,可以看到此时没有边框;
在网页中引入音频和视频
引入本地音频
形式如下:
<body>
<audio src="./sound/神山羊 - 青い棘.mp3" controls autoplay loop></audio>
<!-- src属性依然是要输入文件的地址 -->
<!-- controls属性写上的时候页面上就会显示个可以控制音频的窗口,没写就没有 -->
<!-- autoplay属性控制自动播放,一样也是写了就能自动播放,没写就不能;但现在一般的浏览器都是默认不自动播放,写了也没用,但有的还可以 -->
<!-- loop属性控制循环播放,也是有就能没有就不能 -->
</body>
引入本地视频
形式如下:
<body>
<video src="./video/VID20200825201439.mp4 " width="400" height="400" controls></video>
<!-- 基本和引入音频没差 -->
</body>
引用网上的视频
穷人版
使用前面说的内联框架,一般的视频网站上都有分享的选项,其中可以选择复制通用代码,将这段代码复制到编辑器中即可。
实现代码:
<body>
<iframe src="//player.bilibili.com/player.html?aid=78951789&bvid=BV1fJ411k7DF&cid=134974447&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<!-- 可以在src属性后面设置width和height属性调整大小 -->
</body>
一般开发者
花钱。