图片标签 [HTML][web前端]

2024-07-02 06:12:31

图片标签

图片标签的作用就是向当前页面中引入一个外部图片

通过img标签来引入外部图片

img标签是一个自结束标签(自闭和标签)
img标签中的src属性用于指定图片的路径(路径的规则和超链接的规则是一样的)
- 但是我们可以发现超链接中是href属性指定路径,而图片这里我们是使用src属性指定路径,这个其实是因为我们的超链接是一种引用,而图片是一种引入
  - 对于引用我们都是使用href,对于引入我们都是使用src
img标签中的alt属性是对图片的描述
- 这个描述在默认情况之下是不会显示的 , 浏览器会在无法加载这张图片的时候显示这个描述 , 比如图片的路径错误的时候这个图片肯定是加载失败的,这个时候就会显示出我们的图片描述
- 那么这个图片描述有什么作用?
  - 搜索引擎会根据alt中的内容来识别图片,如果不写alt属性,则图片不会被搜索引擎所收录
    - 我们如果给我们的网页中的图片加上描述, 这个时候浏览器就会将我们的有描述的图片收录下来,等到我们的用户搜索的时候如果我们的图片的描述和用户搜索的内容相似,这个时候浏览器就会有可能会将我们被收录的照片显示出来,用户还可以根据搜索的图片,比如这个照片就是我们的网页中的图片,这个时候用户还可以根据这个图片直接进入到我们的网页中
      - 所以对于我们想要被浏览器检索到的图片我们就一定要加上alt属性(也就是加上对图片的描述),但是对于我们不想被浏览器检索到的图片或者说是一些私密照片我们则不要加alt属性(也即是不要添加描述)
img标签中的width属性用于设置图片的宽度(单位是像素)
img标签中的height属性用于设置图片的高度(单位是像素)
- 注意: 宽度和高度中如果我们只修改了一个,则另一个会等比例缩放 – > 也就是保持图片的原比例,如果保持图片的原比例图片看起来会在水平或者垂直方向看上去有一些扭曲
- 我们在pc端不建议修改图片的大小: (需要多大就裁多大的图片就可以了)
  - 因为如果我们是将大图片缩小,这个时候就有一些浪费内存(因为如果我们是裁一个小的图片,这个时候占用的内存肯定会更少)
  - 如果是小图片放大,这个时候可能会导致图片失真(也即是看起来有点"模糊")
- 我们的移动端(手机端),经常需要对图片进行大图缩小的处理 --> 为了保证图片的清晰度

img既不属于块元素,也不属于行内元素,而是属于替换元素

替换元素是基于块元素和行内元素之间的一种元素
哪里体现出了img是一种替换元素?
- 我们网页中写一个img标签,在img标签的src属性中指定一个本机的或者网络上的图片的地址,然后我们就可以发现在网页中显示的不是img标签中的地址的文字内容,而是将这些地址对应的文字内容替换成了一张图片,因此我们将img称之为替换元素

图片标签 [HTML][web前端]相关推荐

php web裁剪图片上传,WEB前端实现裁剪上传图片功能
最后的效果如下: 这里面有几个功能,第一个是支持拖拽,第二个压缩,第三个是裁剪编辑,第四个是上传和上传进度显示,下面依次介绍每个功能的实现: 1. 拖拽显示图片拖拽读取的功能主要是要兼听html5的 ...
web html常用标签含义,WEB前端开发之HTML：常用标签知多少
今天来介绍一下html常用标签基本结构标题元素 ● ~ 标签用于定义标题其中的重要性最高,而的重要性最低.(权重) ● 标签通常用于最顶层的标题. ●一个html文档之中一般只有一个标题 ...
html取消图片选中效果,web前端：取消a标签在移动端点击时的背景颜色
背景(background)属性定义元素的背景效果元素的背景区包括前景之下直到边框边界的所有空间.因此,内容框与内边距都是元素背景的一部分,且边框画在背景上.css允许应用纯色作为背景,也允许使用背景 ...
css 设置表格右边有图片_20个web前端HTML5初学者实用CSS代码技巧
在本文中,我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边 ...
文字放在图片的下面 web前端网页布局
效果图: 源代码: <!DOCTYPE html> <html> <head> <style>div.box{width:800px;height:30 ...
前端如何实现音乐盒胶盘的转动_郑州Web前端入门教程之如何实现图片优化？
统计数据显示,图片内容已经占据互联网内容总量的62%,因此想要优化网站性能,图片绝对是优化的热点和重点.图片优化是Web前端工程师必须要掌握的知识点,在接下来的郑州Web前端入门教程就给大家讲解一下如 ...
040_初识 web 前端 HTML 超文本标记语言
文章目录 1. web前端开发技术 2. HTML 页面结构 3. HTML 标签 3.1 文本标签 3.2 换行标签 3.3 列表标签 3.3 div 和 span 标签 3.4 图片标签 3.5 ...
前端(一)——HTML之基本标签、图片标签、超链接、锚链接
文章目录 1. 定义 2. 发展史及优势 2.1 发展史 2.2 优势 3. W3C标准 4. HTML的基本结构 5. 网站的基本标签 5.1 标题标签 5.2 段落标签 5.3 水平线标签 5.4 ...
Web前端技术分享：img标签下方出现空隙的问题解决方案
很多初学小伙伴在写页面的时候碰到过一个问题,当我们用一个div直接包裹img,img的下方会出现3px间距,如图代码如下: 为什么会出现这种情况呢? 因为img是一种类似text的标签元素,在结束的 ...

最新文章

热门文章