HTML知识点（第二次）

最新推荐文章于 2024-05-21 18:25:04 发布

Neko_Tea

最新推荐文章于 2024-05-21 18:25:04 发布

阅读量85

点赞数

分类专栏： HTML入门文章标签： html

本文链接：https://blog.csdn.net/m0_52949799/article/details/113484487

版权

HTML入门专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML知识点（第一次）

HTML的入门知识点（二）

5.图片标签

图片标签用于向当前页面中引入一个图片

使用**img标签**来引入外部图片，img标签是一个自结束标签

img这种元素属于替换元素 （基于块和行内元素之间，具有两种元素的特点）

属性：

src 属性指定的时外部图片的路径
alt 图片的描述，这个描述默认情况下不显示，有些浏览器会在图片无法加载时显示

搜索引擎会根据alt中的内容来识别图片，如果不写alt图片属性识别图片不会被搜索引擎所搜索到

width 图片的宽度（单位是像素）
height 图片的高度（单位是像素）

- 宽度和高度中如果只修改了一个，则另一个会等比例缩放

注意：

一般情况下在pc端，不建议修改图片的大小，需要多大的图片就裁多大（像素原因，图片可能模糊）

但是在移动端，经常需要对图片进行缩放（大图缩小）

图片的格式：

jpeg（jpg）

- 支持的颜色比较丰富，不支持透明效果，不支持动图

- 一般用来显示照片

 <img src="./img/1.jpg" alt="企鹅">

- 支持的颜色比较少，支持简单透明，支持动图

- 颜色单一的图片，动图

- 支持的颜色丰富，支持复杂透明，不支持动图

- 颜色丰富，复杂透明图片（转为网页而生）

webp

- 这种是谷歌新推出的专门用来表示网页中的图片的一种格式

- 它具备其他图片格式的所有优点，而且文件还特别小

- 缺点：兼容性不好

base64（将图片加密解密）

- 将图片使用base64进行编码，这样可以将图片转化为字符，通过字符的形式引入图片

- 一般都是一些需要和网页一起加载的图片才会使用base64

引用图片时：

可以引用外部图片
```
<img src="./img/1.jpg" alt="企鹅">
```

可以通过外部路径引用图片

<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2964373120,3287636031&fm=26&gp=0.jpeg" alt="二次元">

注意：

对于这几种图片的格式应用时需要对其进行选择后应用

当效果一样，用小的

当效果不一样，用效果好的

需要在效果与大小之间取得一个平衡

6.音视频标签

audio 标签用来向页面中引入一个外部的音频文件

视频文件引入时，默认情况下不允许用户自己控制播放和停止

属性：

controls 是否允许用户控制播放，有就可以控制，没有就不可以
autoplay 决定音频文件是否自动播放

- 如果设置了autoplay 则音乐在打开页面时会自动播放

- 但是目前来讲大部分浏览器都不会自动对音乐进行播放

loop 决定音乐是否循环播放

样例：

<audio src="./source/audio.mp3" controls autoplay loop></audio>

音视频格式：

一、音频格式

1. 通过src属性来指定外部文件的路径

<audio src="./source/audio.mp3" controls autoplay loop></audio>

2. 通过source来指定文件的路径

<audio controls>
            <source src="./source/audio.mp3">
            <source src="./source/audio.ogg">
            <!-- 
                两个文件不会同时使用，第一个能用就完事了，如果第一个不能用就用第二个，如果都不能用就不会显示
             -->
</audio>

3. 通过type指定文件类型

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

二、视频格式

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

7.内联框架

用于向当前页面中引入一个其他页面

属性：

sec 指定要引入的网页的路径

frameborder 指定内联框架的边框

样式：

<iframe src="https://www.qq.com" width="800" height="600" frameborder="1"></iframe>

注意：

frameborder不写时默认值为0

其取值：

	-  1 ---> 有边框
	-  2 ---> 无边框

Neko_Tea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML知识点（第二次）

HTML的入门知识点（二）5.图片标签图片标签用于向当前页面中引入一个图片使用**img标签**来引入外部图片，img标签是一个自结束标签img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）属性：src 属性指定的时外部图片的路径alt 图片的描述，这个描述默认情况下不显示，有些浏览器会在图片无法加载时显示搜索引擎会根据alt中的内容来识别图片，如果不写alt图片属性识别图片不会被搜索引擎所搜索到width 图片的宽度（单位是像素）
复制链接

扫一扫