02HTML-<img>
一、img的属性:alt/title
alt属性是替换名字,是给搜索引擎抓取使用,当图片显示不出来时,就会显示出alt的内容;
title 属性是提示文字,当鼠标移到图片上的时候会显示出来,大部分的标签都会有这个属性
*******************************alt和title属性的区别******************************
** alt属性:
alt属性是为了在文档中图像不能显示的时候,提供给用户的文字说明。(alt text)
目标元素:img/area/input:image
图像不能显示的情况:
用户的浏览器不支持图像显示,或者图像显示被禁止
视觉障碍或者使用屏幕阅读器的用户
注意事项:
有文字的图像,通常会将alt设置为该文字
装饰性的图片可以设置alt=””,但是不能忽略,否则文字浏览器或屏幕浏览器会显示图片的文件名
alt的长度应该遵循“尽可能短,尽需要长”
** title属性
title属性能够为元素提供额外信息,(tool tip)
目标元素:除了HTML/head/meta/title/script/base/basefont/param外的所有元素
主要用途:
为链接添加描述性文字
为图像提供额外的说明信息
二、设置图片加载错误时的显示默认图
在js中有onload、onerror两个事件,可在图片中加入,修改于的src地址,这样可改善网络差或者图片丢失时的用户体验:
- <img src="img/3.jpg" onload="this.src='default.jpg'" onerror="this.src='error.jpg'"/>
在使用js时,为了避免’的嵌套,可以
- onerror=javascript:this.src="data:images/icon2.png"
三、图片下莫名的间隙问题
原理:vertical默认基线(baseline)对齐
理解:vertical-align指定了inline元素/table-cell元素的垂直对齐方式,默认值是baseline对齐,要注意的是,该对齐是元素相对于相邻文字的基线对齐的,以图片为例,我们假设在图片相邻有一个字母x,事实上,字母x非常特殊,他恰好是处于同元素内的中线(middle)和基线(baseline)中间的位置,也就是说图片相对于基线对齐,而基线和底线也是有距离的,这段距离所呈现的空白,也就是莫名间隙出现的原因。
* 那么在没有文字的情况下为什么也会出现间隙呢,,
在H5的文档声明下,块状元素内部的内联元素的行为表现看,就好像块元素的内部有一个(有可能是两个)没有实体,看不见的空白节点,所以内部的inline元素相对于这个节点基线对齐,就产生了元素与父级之间的间隙。由于文字x的高度与line-height相关,而font-size又影响line-height,所以这个间隙的大小可以通过line-height/font-size进行间接的控制。
解决方法:
- 给元素设置vertical-align:top/middle/bottom;
- 对图片设置display:block;
*** vertical-align对块元素不起作用
- 在不影响布局的情况下,设置浮动/绝对定位
- 设置块元素的行高足够小
- 设置font-size
由于font-size间接控制line-height,所以这种方法本质上还是改变的行高
**一个inline-block元素,如果里面没有inline内联元素,或者他的overflow不是visible,则该元素的基线就是其margin底边缘,否则,他的基线就是元素中最后一行内联元素的基线。
02HTML-<img>的更多相关文章
- Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...
- [笔记]猿计划(WEB安全工程师养成之路系列教程):02HTML头部标签
1.什么是HTML? HTML是用来描述网页的一种语言 HTML——超文本标记语言(Hyper Text Markup Language) HTML不是编程语言,是一种标记语言 标记语言是一套标记标签 ...
- 02-HTML之head标签
head标签 head内常用标签表 标签 类型 意义 <title></titile> 双闭合标签 定义网页标题 <style></style> 双闭合 ...
- 02html基础
02_html 1.几个标签 1.1 meta标签 meta标签的属性有name和http-equiv,其中name属性用于描述网页,对应于content(网页内容). <meta name=& ...
- 02- HTML网页基础知识与浏览器介绍
1.认识网页 网页主要由文字,图像和超链接等元素构成.当然,除了这些元素,网页还可以包含音频,视频,以及flask等. 如图所示就是一个网页: 网页是如何形成的呢? 它是由前端人员写的代码,经过浏览器 ...
- HTML 基本标签02
02-html基本标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- HTML5入门必知
第一部分 认识HTML 一.认识HTML 1.HTML HTML:超文本标签语言Hyper Text Markup Language HTML:网页源代码. 浏览器:"解释和执行" ...
- 第五模块:WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天)
点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天) 课程大纲 1.这一期比之前的Python培新课程增加了很多干货:Linux ...
- Java菜鸟到大牛学习路线培训教程
第1阶段(Java程序员) - Java语言基础 - 101 JavaSE -01-常见Dos命令.Java历史.Java跨平台.配置Path环境变量.第一个HelloWorld例子 -02-配置JA ...
随机推荐
- PyQt5(1)——Qt Designer初探
相关环境配置我们就不介绍了(网上有很多教程) Qt Designer 是一款十分强大的GUI工具,生成的文件为 .UI文件 可以通过命令转化为Py文件,简单来说我们可以通过拖拽方式生成界面,在通过简 ...
- 2016级算法第一次练习赛-C.斐波那契进阶
870 斐波那契进阶 题目链接:https://buaacoding.cn/problem/870/index 思路 通过读题就可以发现这不是一般的求斐波那契数列,所以用数组存下所有的答案是不现实的. ...
- 自己写的第一个Schema文件
<Schema name="FinSchema" description="财务模式" measuresCaption="财务模式"& ...
- HihoCoder - 1513 bitset处理五维偏序
题意:给出\(n<3e4\)个有序组\((a,b,c,d,e)\),求对第\(i\)个有序组有多少个\(j\)满足\((a_j<a_i,b_j<b_i,c_j<c_i,d_j& ...
- 未来一年的13大手机APP开发趋势
无论是欢呼出租车,保存票据,订购披萨还是在线购物,您可以立即联系到什么设备?你的智能手机 这是您需要的朋友,在如何查找信息和简化日常任务方面发挥着不可或缺的作用. 移动技术以光速增长; 我们不能否认手 ...
- APP的功能分类及打包与发布的分类方式
智能手机的出现改变了我们的生活,同时各种各样的APP充斥在我们的手机当中.那么我先现在在来熟悉一下APP的分类及其用途:工具类.社交类.信息类.娱乐类.生活类等几大类.我么了解了APP的用途分类,那么 ...
- 基于Metronic4.1的Bootstrap脚本样式说明
虽说Bootstrap作为当下最流行的响应式的UI,但是对于一些在Bootstrap基础上扩展的UI的资料算是少之又少.这里楼主结合这一个月的辛酸把那些脚本跟样式整理一下下... 关于Metronic ...
- php将“\\”转换成“\”的例子
str_replace('\\\\', '\\', $url);
- CCF 出现次数最多的数 201312-1
出现次数最多的数 问题描述 试题编号: 201312-1 试题名称: 出现次数最多的数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个正整数,找出它们中出现次数最多的 ...
- SpringMVC的json交互
一.注解说明 1.@RequestBody 作用:@RequestBody注解用于读取http请求的内容(字符串),通过springmvc提供的HttpMessageConverter接口将读到的内 ...