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标签（掌握）的更多相关文章

  1. 课时21：函数：lambda表达式

    目录: 一.lambda表达式 二.介绍两个BIF:filter()和map() 三.课时21课后习题及答案 ********************* 一.lambda表达式 *********** ...

  2. 课时54.audio标签（掌握）

    1.什么是audio标签? 播放音频 格式: <audio src=""> </audio> 也是由于同样的适配问题,所以出现了第二种格式 <audi ...

  3. 课时26.a标签其它属性（掌握）

    4.a标签的href属性除了可以指定一个网络地址以外,还可以指定一个本地地址 a标签中还有一个属性,叫做title,a标签中的title和img标签中的title一样,都是用来控制鼠标悬停时显示的提示 ...

  4. 课时56.marquee标签（理解）

    这个标签是比较特殊的,不是html5中的新增标签 在W3C官方文档中找不到这个标签,也就是说不是官方推荐的标签 但是各大浏览器对这个标签的支持也非常不错,而且效果也非常不错 1.什么是marquee标 ...

  5. 课时53.video标签第二种格式（掌握）

    由于视频数据非常非常的重要,所以五大浏览器厂商都不愿意支持别人都视频格式,所以导致了没有一种视频格式是所有浏览器都支持的,这个时候W3C为了解决这个问题,所以推出了第二种video标签的格式 如何查看 ...

  6. 课时53.video标签（掌握）

    这节课来学习一下html5中新增的标签,我们先来看一下,html5中新增了哪些标签? 打开W3school的网页,点击参考手册中的HTML/HTML5标签,有一个按字母顺序排列的标签,但凡标签后面带有 ...

  7. 课时47.datalist标签（了解）

    1.datalist标签 作用:给输入框绑定待选项 2.datalist格式: <datalist> <option>待选项内容</option> </dat ...

  8. 课时46.label标签（掌握）

    我们点击QQ注册页面,发现了一个问题,当我们点击密码两个字的时候,输入框聚焦了,而点击确认密码的时候,输入框也聚焦了,而我们上节课做的页面,这么点击,并不聚焦 1.默认情况下文字和输入框是没有关联关系 ...

  9. 课时18.h标签和p标签以及hr标签（掌握）

    如何在webstorm中利用快捷键创建一个新的html的文件? 同时按下键盘上的ctrl+alt+insert(windows) 同时按下键盘上的ctrl+alt+n(os) h标签系列(header ...

随机推荐

  1. linux 向文本指定位置写入内容

    sed -i "37 r a.txt" test.txt ====== 向test.txt 的第37行后,也就是38行后写入a.txt的内容 sed -i "38i aa ...

  2. Murano 网址一览

    [Murano_Meeting] http://eavesdrop.openstack.org/#Murano_Meeting [Murano_Meeting_Agenda] https://wiki ...

  3. Maven的学习资料收集--（七） 构建Spring项目

    在这里,使用Maven构建一个Spring项目 构建单独项目的话,其实都差不多 1. 新建一个Web项目 参考之前的博客 2.修改 pom.xml,添加Spring依赖 <project xml ...

  4. PHP面向对象编程一

    php面向对象编程(一)   类与对象关系: 类就像一个人类的群体 我们从类中实例化一个对象 就像是制定一个人. 面向对象程序的单位就是对象,但对象又是通过类的实例化出来的,所以我们首先要做的就是如何 ...

  5. js和JQuery中offset等属性对比

    HTML: 内容在滚动条下面 <div id="outerDiv"> <div id="myDiv" class="myDiv&qu ...

  6. 锁丶threading.local丶线程池丶生产者消费者模型

    一丶锁 线程安全: 线程安全能够保证多个线程同时执行时程序依旧运行正确, 而且要保证对于共享的数据,可以由多个线程存取,但是同一时刻只能有一个线程进行存取. import threading v = ...

  7. 表格<table>

    <table> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> ...

  8. 页面中引入百度地图，实例化后影响html5的表单元素date的上下箭头

    复现步骤: 使用百度地图的JavaScript的API,引入文件地址"http://api.map.baidu.com/api?key=&v=1.1&services=tru ...

  9. Java图形界面开发—简易登录注册小程序

    登录注册小代码,将学过的一些小知识融合在一起进行了使用,加深印象.本例中如果有注释不详细的地方,详见其它博客. Java程序操作数据库SQLserver详解 功能介绍:简单的登录注册系统,使用了数据库 ...

  10. WebUploader实现采集图片的功能

    项目最开始用百度团队的文件上传组件做了个物料照片采集的功能,后来做员工头像采集时竟然不知道怎么使用了. 参照官方Demo: http://fex.baidu.com/webuploader/getti ...