课时21.img标签(掌握)
1.img标签中的img其实是英文image的缩写,所以img标签的作用,就是告诉浏览器我们需要显示一张图片
2.img标签格式:<img src=" "> img是标签名称,src是属性
其实img标签中的src是英文source的缩写,所以img标签中的src就是用来告诉img标签,需要显示的图片名称
3.注意点:
和H系列标签/p标签/还有hr标签不一样,img标签不会独占一行(可以用开发者工具中element来验证,选中img标签,看下是否占据一整行)
如果我们手动指定了img标签显示的图片的宽度和高度,有可能会导致图片变形了,那么如果又想指定宽度和高度,又不想图片变形,我们可以只指定宽度和高度其中一个值即可,如果只指定了宽度,系统会自动计算高度,如果指定了高度,系统会自动计算宽度,并且都是等比例拉伸的,也就是说不会变形的。
4.其它的一些属性:
width:宽度
height:高度
所以在img标签中width/height这两个属性的作用,就是用来告诉img标签将来需要显示图片有多宽多高
如果img标签没有指定需要显示的图片的宽高,那么系统会按照图片默认的宽高来显示,如果img标签指定了宽高,那么系统会按照指定的宽高来显示
title:用于告诉浏览器,当鼠标悬停在图片上时,需要弹出的描述框中显示什么内容
alt:其实是英文alternate的缩写,是“交换,替换”的意思,它的作用就是用于告诉浏览器,当需要显示的图片找不到时显示什么内容
课时21.img标签(掌握)的更多相关文章
- 课时21:函数:lambda表达式
目录: 一.lambda表达式 二.介绍两个BIF:filter()和map() 三.课时21课后习题及答案 ********************* 一.lambda表达式 *********** ...
- 课时54.audio标签(掌握)
1.什么是audio标签? 播放音频 格式: <audio src=""> </audio> 也是由于同样的适配问题,所以出现了第二种格式 <audi ...
- 课时26.a标签其它属性(掌握)
4.a标签的href属性除了可以指定一个网络地址以外,还可以指定一个本地地址 a标签中还有一个属性,叫做title,a标签中的title和img标签中的title一样,都是用来控制鼠标悬停时显示的提示 ...
- 课时56.marquee标签(理解)
这个标签是比较特殊的,不是html5中的新增标签 在W3C官方文档中找不到这个标签,也就是说不是官方推荐的标签 但是各大浏览器对这个标签的支持也非常不错,而且效果也非常不错 1.什么是marquee标 ...
- 课时53.video标签第二种格式(掌握)
由于视频数据非常非常的重要,所以五大浏览器厂商都不愿意支持别人都视频格式,所以导致了没有一种视频格式是所有浏览器都支持的,这个时候W3C为了解决这个问题,所以推出了第二种video标签的格式 如何查看 ...
- 课时53.video标签(掌握)
这节课来学习一下html5中新增的标签,我们先来看一下,html5中新增了哪些标签? 打开W3school的网页,点击参考手册中的HTML/HTML5标签,有一个按字母顺序排列的标签,但凡标签后面带有 ...
- 课时47.datalist标签(了解)
1.datalist标签 作用:给输入框绑定待选项 2.datalist格式: <datalist> <option>待选项内容</option> </dat ...
- 课时46.label标签(掌握)
我们点击QQ注册页面,发现了一个问题,当我们点击密码两个字的时候,输入框聚焦了,而点击确认密码的时候,输入框也聚焦了,而我们上节课做的页面,这么点击,并不聚焦 1.默认情况下文字和输入框是没有关联关系 ...
- 课时18.h标签和p标签以及hr标签(掌握)
如何在webstorm中利用快捷键创建一个新的html的文件? 同时按下键盘上的ctrl+alt+insert(windows) 同时按下键盘上的ctrl+alt+n(os) h标签系列(header ...
随机推荐
- EasyTouch3.16 初步使用
- Hadoop 3节点集群无法成功启动zookeeper
今天在集群上跑程序的时候遇到了zookeeper无法成功启动的问题,先分别启动了主节点和从节点的zookeeper进程,并且通过jps也看到zookeeper进程已经启动了,但通过指令查看进程状态的时 ...
- U盘安装Ubuntu15.04 出现boot failed: please change disks and press a key to continue
1.根据国内的教程,用Ultraiso制作了一个Ubuntu15.04的U盘启动盘,在装系统的时候提示如下错误:boot failed: please change disks and press a ...
- Timer控制开始、停止例子【转】
public partial class Form1 : Form { static public bool flag; public Form1() ...
- IoC和AOP使用扩展。。。
实现依赖的多种方式. 1.理解构造注入. 2.掌握使用p命名空间实现属性注入. 3.理解不同的数据类型的注入方式. 4.如何通过构造注入为业务类注入所依赖的数据访问层对象,实现保存用户数据功能. 5. ...
- 北航oo作业第二单元小结
类的设计: 首先,我对我的思路进行整体的说明,由于我的三次作业,思路是继承的,所以做总体的说明 第一, Main类,Main类自身并没有功能,他的功能只是构造需要的电梯线程和输入线程. 其中,第三 ...
- SVG矢量图【转】
var iconArray=[ //'circle', //实心圆 //'rect', //矩形 //'roundRect', //圆角矩形 //'triangle', //三角形 //'diamon ...
- 条件注解@Conditional
通过活动的profile,可以获得不同的Bean.Spring4提供了一个更通用的基于条件的Bean的创建,即使用@Conditonal注解 @Conditional根据满足某一个特定条件创建一个特定 ...
- URL最大长度问题
在http协议中,其实并没有对url长度作出限制,往往url的最大长度和用户浏览器和Web服务器有关,不一样的浏览器,能接受的最大长度往往是不一样的,当然,不一样的Web服务器能够处理的最大长度的UR ...
- JNI教程
一.什么是JNI JNI(Java Native Interface ),它是Java SDK的一部分,主要用于实现Java对其他语言编写的代码和库的调用,比如C和C++.JNI提供的API也能让JV ...