零基础10天学会网页制作第二天(中)之属性和a标签介绍

本文链接：https://blog.csdn.net/ming_147/article/details/124186331

去年的时候，自己专门写过针对网页制作的一系列课程，中间断更了，今年再接着续更，毕竟花了时间去写了，还是尽量的分享出来，希望能帮助到喜欢网页制作的朋友们。

上半部分呢，主要讲述的是路径的选择，这个是至关重要的，前边也说过，路径不仅仅局限于图片的选择，以后的css，javascript，以及网页的跳转等等，都会牵扯到路径，所以，才花费了较大篇幅去阐述，也希望大家能够引起重视。

还有一个知识点需要补充一下，上半部分呢，对于图片的路径都是采用的本地路径，如果我们要加载网上的某一张图片呢？这个其实更简单，直接可以把图片的地址写到src里，如下：

比如，这里有一个网上的图片地址：

https://avatar.csdnimg.cn/B/C/8/0_ming_147.jpg

代码如下：

效果如下：

以上的内容主要是针对上篇做了一个简单的补充，接下来我们讲述下面的课程，标签中的属性，什么是属性呢？其实就是某个附加信息，比如人，他的附加信息，有名字，有年龄，那么针对于标签，属性就是它的附加信息，有一个需要注意的，属性是写在标签内，也就是起始的标签内<>，虽然不区分大小写，但尽量和标签统一，使用小写字母；属性，是一个键值对，语法如下：

key="value"。

看到上边的语法，我们是不是想到了第一天讲述的img标签的用法，还记得吗？是不是里面也有个属性，src，如下图：

其实绝大多数属性都是这样呈现的，一般以双引号为主，有时候也会使用单引号；单双引号，表述是一致的，下面我们举个例子，新建一个网页，引入一个图片，如下图：

代码如下：

效果如下：

很简单的一个例子，只是展示一个图片，在实际开发中，一般我们会控制图片的大小，也就是图片的宽高，毕竟有的图片太大了，直接展示影响美观，怎么样控制宽高呢？这里就需要属性了，宽属性：wdith，高属性：height，我们分别使用一下：

把图片的宽调整为，宽100px，px是像素，也就是单位，下个课程，我们讲述一下，这里，我们先作为了解,px可以书写，也可以不写，默认就是像素单位。

代码如下：

效果如下：

有的朋友想问了，我明明只写了宽，没有写高，为什么显示这样呢？这个需要大家了解一下，如果，我们只仅仅的写了宽，或者只写了高，

那么对于img这个标签，它会按照你指定的大小，对另一个做等比例的缩放或放大处理，也就是说，本来图片宽100px，高100px，你改写了宽属性，设置width="20px"，那么随之的，高也会变成20px，这就是等比例的处理。

我们再看一个例子，同时设置宽和高：

代码如下：

效果如下：

两个属性都设置的话，那么它就会按照你设置的进行展示，有可能会出现图片的拉伸或压缩情况，这种情况的出现，是因为你的图片过大或者过小而导致的，在实际的开发中，我们也要考虑到这种情况，一般UI，会给我们标注图片的尺寸，或者比例，我们按照UI的标注去写，就没有问题。

上边两个就是img的属性，其实也没啥难的，无非就是控制宽高而以，需要注意一下，多个属性之间，我们使用空格隔开，我们再去看另一属性，alt属性，alt 属性用来为图像定义一串预备的可替换的文本，什么意思呢，就是在图片无法加载，或者加载错误的时候，所展示的文本信息，如下图，我们故意把图片的地址写错：

因为我们没有“life1.png”这张图片，加载肯定是错误的，我们看下效果：

以上是图片加载错误后，给用户展示的图片描述信息，如果说图片展示正常，用户鼠标滑过图片，就给出图片的描述，我们该如何设置呢？实现这种效果，我们就必须再去掌握它的另外一个属性“title”，我们直接看例子：

效果如下：

截图截不了这个效果，就用手机拍的，所以啊，老铁们，写这种技术文章是很耗时的，还麻烦给个关注哦，在这里谢谢了。

2、a标签及属性的使用

我们经常看到很多网页里，点击某个图片，或者点击某段文字，就跳转到了另一页面，比如淘宝，京东，点击商品后，就跳转到商品详情，今日头条或者网易新闻，点击某个新闻，就跳转了新闻详情，这是如何实现呢？其实绝大部分都可以用a标签来实现。

a标签呢，是一个超链接，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，我们可以点击这些内容来跳转到新的文档或者当前文档中的某个部分，当我们把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们先看下效果，href是a标签的属性，用来跳转的地址，类似img标签的src属性，都是指向的一个路径。

效果如下：

因为href里是空的，所以，目前的点击时没有一点效果的，下面我们练习下跳转，这里我们分为两种，一种是网络地址跳转，一种是本地文件跳转。

第一种，网络地址跳转

我们直接跳到百度首页，代码如下：

右键选择浏览器中打开：

点击跳转百度后，直接打开了百度首页，大家可以试一试，这里就不贴图了。

第二种，本地文件跳转

目前“a标签.html”和“远程图片加载.html”同属一个目录，在代码里，我们直接写文件的名字。

在“a标签.html”里代码如下：

效果如下：

点击之后：

基本上本地的文件跳转，和上半部分的图片的路径是一样的，如果对于路径，你已经很清晰了，那么文件在子目录或者在父目录，根目录，相信你也没有问题，无非就是"../"和“/”及文件夹的使用，这里就不举太多的例子了，毕竟之前已经花费了很大篇幅在说路径问题，如果你目前仍然对路径有不解，可以看看之前所讲的内容，或者看对应的第二天的视频，我也会重复去讲。

我们继续往下讲述，关于a标签的跳转，我们用到的是href属性，href里面对应的就是我们需要跳转的地址，可以是本地文件的跳转，也可以是网络地址的跳转，这个很简单了，就不过多做赘述了。

大家有没有发现，在上述的例子中，我们点击a标签后，跳转的页面都是在当前窗口打开的，在实际的开发中，如果说在新的窗口打开呢？那么我就需要a标签的另一个属性“target”，target这个属性,可以使得我们选择在当前页面或者新窗口进行打开，默认不写或者target=“_self”，是当前窗口，target=“_blank”，是在新的窗口打开。

我们举个例子：