言

大家可能都知道img标签是怎么设置默认图片的，但是你知道background-img是如何设置默认图片的嘛？

JS监听

<img src="图片的url地址" alt="图片描述" onerror="this.src='默认图片的url地址'"/>

这里是应用了img标签的onerror事件，当加载失败就用默认图片地址。但是这里可能出现如果默认图片地址也加载不出来，或者失败，在IE内核的浏览器下就会反复加载，出现死循环，最后造成堆栈溢出错误。因此， 需要用下面两种方法解决：

1. 更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小，并且存在。
2. 控制 onerror 事件只触发一次，需要增加这句话：this.onerror=null。

<img src="图片的url地址" alt="图片描述" onerror="this.src='默认图片的url地址';this.onerror=null"/>

background-img

background是可以设置多个背景图片的，最前面的优先级越高，所以如果javan1.jpg没有就好显示第二个javan2.jpg，如果还没有就好显示第三个javan3.jpg。

第一种：

background: url("javan1.jpg") 0 0 no-repeat,
 url("javan2.jpg") 200px 0 no-repeat,
 url("javan3.jpg") 400px 201px no-repeat;

第二种：

background-image: url("javan1.jpg"), url("javan2.jpg"), url("javan3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat; 
background-position: 0 0, 200px 0, 400px 201px;

需要注意的是：IE8及更早浏览器不支持CSS3 background-image，即不支持多背景和使用渐变作为背景图像。

拓展-CSS渐变

background-image: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

上面这种CSS语法我们经常见到，可能有人看不懂具体的意思，其实上面的些符号含义与正则表达式有很多一致之处：

1. [] 在正则中表示一个字符类，这里，你可以理解为一个小单元。
2. | 表示候选。也就是“或者”的意思，要么前面的，要么就后面的。
3. ? 为量词，表示0个或1个，言外之意就是，你可以不指定方向，直接渐变色走起。
4. + 也是量词，表示1个或者更多个。因此，终止颜色是不可缺少的。例如：linear-gradient(red)是酱油命，白板。
5. <> 中的是关键字，主要是让开发人员知道这里应该放些什么内容。

水平渐变

{
 background-image: linear-gradient(left, red 100px, yellow 200px);
}

左上角渐变

{
 background-image:linear-gradient(left top, red 100px, yellow 200px);
}

公告

喜欢小编的点击关注，了解更多资源！

全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

主要内容：这是HTML课程的第五课，主要讲解HTML的图片和超链接。让自己设计的网页更加多元素。

上节回顾

在上节中主要讲解了HTML的文字标签和格式标签。上篇请戳→→04程序员定要学HTML，字体段落标签介绍，60秒搞定

其实如果没有记住也无所谓。毕竟这些标签都是HTML中比较常用的，在以后的相关的案例中也会使用。此系列教程主要讲解HTML从基础到精通。自己能够设计一个完整的前端网页项目。

程序员写代码

图片

在HTML中添加图片其实很简单，就是添加一个img的标签。

图片标签的语法

一般有src、alt、width、height四种属性就够用了。

效果：

图片的显示效果

图片路径的写法

src表示的是图片的路径，这里面的值应该怎么写呢？

（1）html文件和图片在相同一个文件夹下。

HTML文件和图片文件在相同的目录下，可以直接书写文件的名称。

写文件名的写法，如上面的HTML

（2）图片在HTML文件所在目录的文件夹内：

如图：

图片文件在文件夹内

此时需要加上文件夹名称，并加上“/”表示下层目录：

下层目录的图片写法

（3）图片文件在上层目录

如果图片在HTML文件所在的上层目录，则需要写“..”表示向上一级。如图：

上层目录

超链接

超链接就是可以链接到某个资源的东西，比如我们打开百度首页搜索后，产生的就是超链接：

这些蓝字超链接

这些蓝色的文字标题，我们点击之后可以跳转到新的网站。这就是超链接。下面我们自己写一个超链接：

超链接的写法

超链接预览

超链接中的属性

超链接中的潮涌属性包括：href（网页地址）、title（说明描述）、target（打开网页的位置）、name（名称）。

其中href支持带有任何协议的连接。title是对超链接的说明。

程序员

target包括四个值：

_blank

在新的窗口打开连接

_self

在当前窗口打开超链接

_parent

在父窗口打开超链接，这个后面会说，不常用

_top

在整个窗口中打开被链接文档。

每天一个知识点，带你迈向软件编程大神，一起努力吧。