美文网首页
8、img标签

8、img标签

作者: 小黄不头秃 | 来源:发表于2022-05-24 00:16 被阅读0次

一、img标签介绍

图片用于向当前页面引入一个外部的图片
用img标签来实现引入图片,img是一个自结束的标签,所以不是成对的。
img标签属于替换元素,基于块和行内元素之间
属性:

  • src属性指定的外部的图片的路径(规则与超链接一样,可以使用相对路径也可以使用网页链接。)
    相对路径
    ./(默认)表示当前文件的目录
    ../表示上一级目录
  • alt属性是对图片的描述,这个描述默认情况下隐藏,没显示图片出来显示
  • width图片的宽度
  • height图片的高度

宽度和高度中若只修改了一处,另外一个会等比例缩放
在pc段不建议修改图片的大写;需要多大裁剪多大。但是在移动端需要对图片进行缩放(大图缩小)

二、网页中常用的图片格式

  • jpg(jpeg):色彩丰富,不支持动图,不支持透明效果,一般显示照片;
  • gif:色彩比较少,支持简单透明,支持动图;
  • png:支持的色彩丰富,支持复杂透明,不支持动图,转为网页而生;
  • webp:谷歌新推出的表示网页中的一种格式;
    显示效果一样用文件内存小的。

三、代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片</title>
</head>
<body>
     <h1>Small yello man</h1>
     <p>相对路径</p>
     <img width="800" src="../photo/1.jpg" alt="小黄人">
     <br>
     <h1>夏目友人帐</h1>
     <p>网页链接</p>
     <img width="800" src="https://c-ssl.duitang.com/uploads/item/201510/04/20151004141633_kKUjw.thumb.700_0.jpeg" alt="猫咪老师">
</body>
</html>

相关文章

  • 8、img标签

    一、img标签介绍 图片用于向当前页面引入一个外部的图片用img标签来实现引入图片,img是一个自结束的标签,所以...

  • img,picture,video,audio,script标签

    img 毫无疑问我们最熟悉的替换型标签就是 img 标签了,几乎每个前端都会日常使用 img 标签。 img 标签...

  • css3~图片垂直居中

    2017.03.07 img外部div标签: img标签: html代码:

  • 基础标签简介(img/br/a/base/列表/表格/表单/vi

    img标签: img标签中的img其实是英文image的缩写,所以img标签的作用, 就是告诉浏览器我们需要显示一...

  • HTML图像

    HTML图像-图像标签和源属性(Src) 在HTML中,图像由标签定义。是空标签,意...

  • 二,常见HTML标签

    一,img标签 1,什么是img标签? img其实就是image的缩写,所以这个标签的作用是,告诉浏览器要显示...

  • img标签

    格式: src 是 source 的缩写。""内填写图片的路径,分为绝对和相对,相对路径即网页的.html文件所在...

  • 通用型漏洞-- xss大全

    (1)普通的XSS JavaScript注入 (2)IMG标签XSS使用JavaScript命令 (3)IMG标签...

  • CSS 文字环绕图片

    前言 img是行内元素,因为img标签不会独占一行。之所以img可以设置其宽高,是因为img标签既是行内元素,还是...

  • nth-child选择器疑惑

    li标签中包含多个img标签。当用nth-child()标签选定img图片时。li:nth-child(1)...

网友评论

      本文标题:8、img标签

      本文链接:https://www.haomeiwen.com/subject/cmndprtx.html