HTML知识点(第一次)
HTML的入门知识点(二)
5.图片标签
图片标签用于向当前页面中引入一个图片
使用**img标签**来引入外部图片,img标签是一个自结束标签
img这种元素属于替换元素 (基于块和行内元素之间,具有两种元素的特点)
属性:
-
src 属性指定的时外部图片的路径
-
alt 图片的描述,这个描述默认情况下不显示,有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片,如果不写alt图片属性识别图片不会被搜索引擎所搜索到
-
width 图片的宽度(单位是像素)
-
height 图片的高度(单位是像素)
- 宽度和高度中如果只修改了一个,则另一个会等比例缩放
注意:
一般情况下在pc端,不建议修改图片的大小,需要多大的图片就裁多大(像素原因,图片可能模糊)
但是在移动端,经常需要对图片进行缩放(大图缩小)
图片的格式:
- jpeg(jpg)
- 支持的颜色比较丰富,不支持透明效果,不支持动图
- 一般用来显示照片
<img src="./img/1.jpg" alt="企鹅">
- gif
- 支持的颜色比较少,支持简单透明,支持动图
- 颜色单一的图片,动图
- png
- 支持的颜色丰富,支持复杂透明,不支持动图
- 颜色丰富,复杂透明图片(转为网页而生)
- 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 ---> 无边框