Web前端-4-html-图片标签
图片标签
1)<img>标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失
败时显示的文字,以及对搜索引擎和盲人读屏软件的支持。
2)<img>标记创建的是被引用图像的占位空间,语法格式如下。
像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址即
url分为绝对地址和相对地址。
<img src="url" alt="description" width="value" height="value" />
<img>标记的作用是嵌入图像,
3)图片标记含多个属性,如下。
属性值 | 说 明 |
src | 图像地址 |
alt | 添加图像的代替文字 |
width/height | 设置图像宽度/高度 |
border | 设置图像边框 |
①src属性
src属性为必须属性,其他属性为可选项。src属性用于指定图像文件所在的路径,这个路径可以是相对路径也可以是绝对路径。
②alt属性
alt属性用于添加图像的替代文。<img>标记的alt属性用于添加图像的替代文字,若图片没有被下载,图片位置会显示此替代文字,起到提醒说明的作用。
③title属性
当浏览网页时,若图像下载完成,鼠标放在图像上时,鼠标旁会出现此替代文字。
④width/height属性
width/height属性用于设置图像宽度/高度。<img>标记的属性width和height用来设置图像的宽度和高度,默认情况下,网页中显示的图像保持原图的尺寸。即不设置图像的宽度和高度,图像大小与原图一致。
⑤border属性
图像默认是没有边框的,除非图像在a元素内部。<img>标记的border属性可以为图像定义边框的宽度,既可增加或者去掉(border="0")图像的边框。边框颜色默认为黑色。
4)图片地址(一般相对地址用的多)
“ ./ ” 表示当前文件所在目录下,比如:“./pic.jpg” 表示当前目录下的pic.jpg的图片,这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录,比如:“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>图片标签</title> </head> <body><img src="./weimei.jpeg" alt="这是一张唯美的图片" title="图片标题" width="50" height="50"><img src="../image/hua.jpeg" alt="这是一张花的图片" title="图片标题" width="100" height="100"> </body> </html>
Web前端-4-html-图片标签相关推荐
- 苹果手机html查看器在哪,web前端案例-苹果手机图片查看器
web前端群,189394454,有视频.源码.学习方法等大量干货分享 image.png
- web前端之html图片操作详解从零开始(三)----img标签
<!DOCTYPE html> <html><head><title>Image.html</title><meta http-equ ...
- html取消图片选中效果,web前端:取消a标签在移动端点击时的背景颜色
背景(background)属性定义元素的背景效果元素的背景区包括前景之下直到边框边界的所有空间.因此,内容框与内边距都是元素背景的一部分,且边框画在背景上.css允许应用纯色作为背景,也允许使用背景 ...
- WEB前端之html img标签引用本地图片
我觉得语法大家都应该明白怎么写 <img src="img/demo.PNG">很简单 但是我在第一次写的时候总是出现图片加载不出来的情况 然后发现 只要把图片文件夹放 ...
- 【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片
此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后我本来还想多找几道来做做 ...
- web前端复习系列[1]——标签
<h1>一般用于网站标题. 加入强调语气,使用<strong>和<em>标签.<em> 表示强调,<strong> 表示更强烈的强调.并且在 ...
- Web前端实现一个图片放大镜
文章目录 图片放大镜效果 实现过程 一.UI界面 主要样式设置 二.加载缩略小图 三.缩略图事件监听 四.实现放大 总结 固定尺寸 在一些电商网站上,经常看到有商品图片被放大查看的功能,包括另外一些图 ...
- 怎么把http图片改成背景图HTML,web前端:将图片设置成页面的背景-网页页面设置...
如题,字面上的意思,今天小编,就是来跟大家说一下,一个网页做一个图片背景! 将图片设置成背景,那么先找背景素材,这个背景素材可以到各大图片网站找! 那么为什么今天小编要讲这个呢? 在做一个网页中,如果 ...
- web前端基础(05htmlimg标签和滚动标签)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
- web前端——div和span标签
div和span标签都是用来帮助页面进行排版的,它们两个没有自己的语意. div:块级元素,所谓的块级元素,就是可以通过css设置宽高等一些大小的样式,这样的元素标签称为块级元素.块级元素的特点是自己 ...
最新文章
- 优达学城《DeepLearning》2-1:卷积神经网络
- springmvc是如何和前端页面联系起来的
- 让ASP程序在服务器中自动运行
- MSB3721 命令““C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.0\bin\nvcc.exe“ 已退出 返回代码为1
- 卡尔曼滤波器算法(Kalman Filter)—— 数学推导,图文并茂
- QuickContact分析及其弹出窗口实现
- go 写文件_如何在 Ubuntu 20.04 上安装 Go
- Windows学习总结(17)——Windows 15个重要运行命令
- 每秒上百万次的跨数据中心写操作,Uber是如何使用Cassandra处理的?
- 通过PCA算法对iris数据集进行降维处理
- java 场景面试题_Java面试场景整理收录
- C语言if语句的基本用法
- chromium官方文档
- 前后端传参(二)之数组对象
- 微信公众号开发(一)--开发模式与编辑模式
- element导航菜单添加搜索功能
- Windows Sever 2008 本地安全策略之登陆策略
- 纯Java搭建SS开发环境
- upfst是什么函数C语言,一种基于KF和STUPF组合滤波的SINS大方位失准角初始对准方法技术...
- [小程序项目] 使用微信开发者工具 新闻小项目 轮播图 新闻列表页 点击跳转新闻详情页 登录 获取用户基本信息