一、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地址,这样可改善网络差或者图片丢失时的用户体验:
    

  1. <img src="img/3.jpg" onload="this.src='default.jpg'" onerror="this.src='error.jpg'"/>

  在使用js时,为了避免’的嵌套,可以

    

  1. 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>的更多相关文章

  1. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  2. [笔记]猿计划(WEB安全工程师养成之路系列教程):02HTML头部标签

    1.什么是HTML? HTML是用来描述网页的一种语言 HTML——超文本标记语言(Hyper Text Markup Language) HTML不是编程语言,是一种标记语言 标记语言是一套标记标签 ...

  3. 02-HTML之head标签

    head标签 head内常用标签表 标签 类型 意义 <title></titile> 双闭合标签 定义网页标题 <style></style> 双闭合 ...

  4. 02html基础

    02_html 1.几个标签 1.1 meta标签 meta标签的属性有name和http-equiv,其中name属性用于描述网页,对应于content(网页内容). <meta name=& ...

  5. 02- HTML网页基础知识与浏览器介绍

    1.认识网页 网页主要由文字,图像和超链接等元素构成.当然,除了这些元素,网页还可以包含音频,视频,以及flask等. 如图所示就是一个网页: 网页是如何形成的呢? 它是由前端人员写的代码,经过浏览器 ...

  6. HTML 基本标签02

    02-html基本标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  7. HTML5入门必知

    第一部分 认识HTML 一.认识HTML 1.HTML HTML:超文本标签语言Hyper Text Markup Language HTML:网页源代码. 浏览器:"解释和执行" ...

  8. 第五模块:WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

  9. 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天)

    点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天) 课程大纲 1.这一期比之前的Python培新课程增加了很多干货:Linux ...

  10. Java菜鸟到大牛学习路线培训教程

    第1阶段(Java程序员) - Java语言基础 - 101 JavaSE -01-常见Dos命令.Java历史.Java跨平台.配置Path环境变量.第一个HelloWorld例子 -02-配置JA ...

随机推荐

  1. PyQt5(1)——Qt Designer初探

    相关环境配置我们就不介绍了(网上有很多教程) Qt Designer 是一款十分强大的GUI工具,生成的文件为 .UI文件  可以通过命令转化为Py文件,简单来说我们可以通过拖拽方式生成界面,在通过简 ...

  2. 2016级算法第一次练习赛-C.斐波那契进阶

    870 斐波那契进阶 题目链接:https://buaacoding.cn/problem/870/index 思路 通过读题就可以发现这不是一般的求斐波那契数列,所以用数组存下所有的答案是不现实的. ...

  3. 自己写的第一个Schema文件

    <Schema name="FinSchema" description="财务模式" measuresCaption="财务模式"& ...

  4. 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& ...

  5. 未来一年的13大手机APP开发趋势

    无论是欢呼出租车,保存票据,订购披萨还是在线购物,您可以立即联系到什么设备?你的智能手机 这是您需要的朋友,在如何查找信息和简化日常任务方面发挥着不可或缺的作用. 移动技术以光速增长; 我们不能否认手 ...

  6. APP的功能分类及打包与发布的分类方式

    智能手机的出现改变了我们的生活,同时各种各样的APP充斥在我们的手机当中.那么我先现在在来熟悉一下APP的分类及其用途:工具类.社交类.信息类.娱乐类.生活类等几大类.我么了解了APP的用途分类,那么 ...

  7. 基于Metronic4.1的Bootstrap脚本样式说明

    虽说Bootstrap作为当下最流行的响应式的UI,但是对于一些在Bootstrap基础上扩展的UI的资料算是少之又少.这里楼主结合这一个月的辛酸把那些脚本跟样式整理一下下... 关于Metronic ...

  8. php将“\\”转换成“\”的例子

    str_replace('\\\\', '\\', $url);

  9. CCF 出现次数最多的数 201312-1

    出现次数最多的数 问题描述 试题编号: 201312-1 试题名称: 出现次数最多的数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个正整数,找出它们中出现次数最多的 ...

  10. SpringMVC的json交互

    一.注解说明 1.@RequestBody  作用:@RequestBody注解用于读取http请求的内容(字符串),通过springmvc提供的HttpMessageConverter接口将读到的内 ...