前端的初学日记（HTML终篇）Day4

最新推荐文章于 2024-06-26 15:59:39 发布

Mothes

最新推荐文章于 2024-06-26 15:59:39 发布

阅读量66

点赞数 2

文章标签：前端 html 音频视频

本文链接：https://blog.csdn.net/Mothes/article/details/128458961

版权

图片标签

图片标签用于向当前页面引入一个外部图片
img：使用img标签来引入外部图片，img标签是一个自结束标签，img这种元素属于替换元素（基于块和行内元素之间）具有两种元素的特点。
src：src属性指定的是外部图片的路径（路径规则跟超链接是一样的）
alt：alt元素用于图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜素引擎所收录。
width 设置图片的宽度（单位是像素）
height 设置图片的高度
宽度和高度如果只修改一个，则另一个会等比例缩放。
例：

<body>
<img width="200" height="200" src="https://img.wendangwang.com/pic/2c7b0815455635a18b32390a925d76fc816947b9/1-720-jpg_6-960-0-0-960.jpg" alt="魅力中国">
</body>

效果如下：（注：请用编译器运行）

注意：一般在pc端，不建议修改图片的大小
这个时候我们需要注意一个问题，避免大图缩小浪费内存，小图放大图片失帧，一般需要多大的图片就裁多大，但在移动端，经常需要对图片进行缩放。

图片的格式

jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图（一般用来显示照片）
gif：支持的颜色比较少，支持简单透明，支持动图（颜色单一的图片、动图） png：支持的颜色丰富，支持复杂透明，不支持动图（专为网页而生）
webD：这种格式是谷歌推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，文件还小。（缺点：兼容性不好，老浏览器可能不能用）

以上遵循效果一样用小的，效果不一样用效果好的。
base64：将图片使用64编码，这样可以将图片转换为字符，通过字符的形式来引入图片。
一般都是一些需要和网页一起加载的图片才会使用base64
（上网搜索base64 点击图片转换base64）

内联框架

iframe内联框架用于像当前页面中引入一个其他页面
src指定要引入的网址的路径
frameborder指定内联框架的边框 0=有 1=无
格式如下：（注：在编译器运行）

<body>
<iframe src="https://www.runoob.com/html/html-tutorial.html" width="800" height="600" frameborder="1"></iframe>
</body>

内联框架一般不会被搜索引擎检索

音频视频的引进

mp3、mp4文件如何引进
可创建photo文件，将自己所需的音频视频拖进去

音频

audio标签用来向页面中引入一个外部的音频文件，音频文件引入时，默认情况下不允许用户自己控制播放停止，这时候需要加controls，controls设置是否允许用户控制播放，不用赋值。
格式如下：（注：在编译器运行）

<body>
<audio src="./photo/audio.mp3" controls></audio>
</body>

————————————————————————————————————————————————————————
autoplay设置音频文件是否自动播放
格式如下：（注：在编译器运行）

<body>
<audio src="./photo/audio.mp3" controls autoplay></audio>
</body>

如果设置了autoplay，则音乐会再打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放
自动播放这个标签在开发中需要指定width=" " height=" " type=“audio/mp3”
————————————————————————————————————————————————————————
loop设置音乐是否循环播放·
（如果出现不支持的情况，可以试着切换浏览器的版本，例IEedge点F12出现一个控制台点击Edge可以切换iE8或其它版本）
除了通过src来指定外部文件的路径以外，还可以通过source来指定文件
格式如下：（注：在编译器运行）

<body>
<audio src="./photo/audio.mp3" controls></audio>
<!--上下两种效果是一样的 -->
  <audio controls>
    <source src="./photo/audio.mp3">
  </audio>
</body>

————————————————————————————————————————————————————————
解析代码时浏览器先解析<source src="./photo/audio.mp3">再解析<source src="./photo/audio.ogg">以此类推，一直到最后解析不出来会出现文字提醒
格式如下：（注：在编译器运行）

<body>
  <audio controls>
    对不起您的浏览器不支持播放音频！请升级浏览器！
    <source src="./photo/audio.mp3">
    <source src="./photo/audio.ogg">
  </audio>
</body>

效果如下：

对不起您的浏览器不支持播放音频！请升级浏览器！

————————————————————————————————————————————————————————
想在老版本里引入一些音视频文件需要embed标签
格式如下：（注：在编译器运行）

<embed src="./photo/audio.mp3" type="audio/mp3">

如果想都支持放在一起，source走到前面走不到embed
格式如下：（注：在编译器运行）

<body>
  <audio controls>
    对不起您的浏览器不支持播放音频！请升级浏览器！
    <source src="./photo/audio.mp3">
    <source src="./photo/audio.ogg">
    <embed src="./photo/audio.mp3" type="audio/mp3" width="300" height="200">
  </audio>
</body>

效果如下：

对不起您的浏览器不支持播放音频！请升级浏览器！

————————————————————————————————————————————————————————

视频

video使用video标签来向网页引入一个视频，使用方式基本上是一样的
格式如下：（注：在编译器运行）

<video controls>
    <source src="./photo/flower.webm">
</video>

IE8版本格式如下：

<video controls>
    <source src="./photo/flower.webm">
    <source src="./photo/flower.mp4">
    <embed src="./photo/flower.mp4" type="video/mp4">
</video>