做全栈攻城狮-每日更新原创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

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

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