图片标签、图片格式、内联框架

最新推荐文章于 2021-07-13 13:42:57 发布

守住⒈份信仰°

最新推荐文章于 2021-07-13 13:42:57 发布

阅读量251

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_43648337/article/details/108305063

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

img元素

img元素是自结束标签，用于向当前页面引入图片，是替换元素，介于块元素和行元素之间（具有两种元素的特点）
属性：
src属性指定的是图片的路径（路径规则和超链接相同，即可以是站内资源也可是站外资源）。
alt属性是图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，同时搜索引擎也是根据该描述识别图片的内容，如果不写该属性则不会被搜索引擎收录。
width属性指定图片的宽度。（单位是像素）
height属性指定图片的高度。（单位是像素）
注：宽度和高度中如果只修改一个，另一个会等比例缩放。一般在pc端不建议修改图片大小，要多大裁多大；但在移动端，经常需要对图片缩放（大图缩小）

图片格式

jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图；一般用来显示照片
gif：支持的颜色比较少，支持简单透明，支持动图；用来显示颜色单一的图片，动图
png：支持的颜色丰富，支持复杂透明，不支持动图；用来显示颜色丰富，复杂透明的图片（专为网页而生）
webp：谷歌推出的专门用来表示网页图片的一种格式，具备其他图片格式的所有优点，而且文件还特别小。主要缺点：兼容性不好，一些浏览器不支持
图片格式使用原则：
效果相同用小的，效果不同用效果好的
base64（非图片格式）
可以使用base64来将图片编码成字符，通过字符的形式引入图片，一般都是需要和网页一起加载的图片才使用base64。使用方法：直接百度搜索base64，在线转换。

内联框架（iframe元素）

用于向当前页面引入另一个页面，引入的页面不会被搜索引擎检索
属性：src指定要引入网页的路径，frameborder设置引入网页的边框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <img src="图片路径" width="宽度" height="高度" alt="图片描述">
  <iframe src="http://www.baidu.com" width="500" height="500" frameborder="0"></iframe>
</body>
</html>