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

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

前言


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


上半部分呢,主要讲述的是路径的选择,这个是至关重要的,前边也说过,路径不仅仅局限于图片的选择,以后的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”,我们直接看例子:



效果如下:



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


a标签及属性的使用


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


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


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



效果如下:



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


第一种,网络地址跳转


我们直接跳到百度首页,代码如下:


右键选择浏览器中打开:



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


第二种,本地文件跳转


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



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



效果如下:



点击之后:



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


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


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


我们举个例子:



目前,零基础这个文件夹里,有两个文件,“a标签.html”这个文件里的代码如下:



跳转地址为同目录的“远程图片加载.html”文件,target属性为_blank,在新的窗口打开,我们看下效果:



点击后,打开新的窗口进行展示:



上边的例子,大家可以实际操作一下。


之前说过,a标签,不仅仅可以是文字,也可以是图片,比如我们给上边的“远程图片加载.html”这个文件里的图片,加上超链接,让它跳转到百度,代码如下:



效果如下:



点击图片后,跳转到了百度



简单吧,所以啊,老铁们,网页制作啊,没什么好难的,轻轻松松都能学会,下一篇我们会讲述table表格标签,敬请期待!


相关文章
|
6月前
|
移动开发 JavaScript 前端开发
分享88个表单按钮JS特效,总有一款适合您
分享88个表单按钮JS特效,总有一款适合您
54 1
|
6月前
|
存储 移动开发 JSON
分享86个表单按钮JS特效,总有一款适合您
分享86个表单按钮JS特效,总有一款适合您
64 1
|
6月前
会跳舞的网站引导页HTML源码
这套引导页源码非常好看,网址也不会不停的动起来给人一种视觉感很强烈 简单修改一下里面的地址就行看,非常简单!
29 0
会跳舞的网站引导页HTML源码
|
6月前
|
移动开发 JSON JavaScript
分享76个表单按钮JS特效,总有一款适合您
分享76个表单按钮JS特效,总有一款适合您
51 5
|
6月前
|
前端开发 容器
|
6月前
|
移动开发 JavaScript 前端开发
分享123个JS特效弹出层,总有一款适合您
分享123个JS特效弹出层,总有一款适合您
86 0
开心档之HTML 属性
【摘要】 HTML 属性属性是 HTML 元素提供的附加信息。HTML 属性HTML 元素可以设置属性属性可以在元素中添加附加信息属性一般描述于开始标签属性总是以名称/值对的形式出现,比如:name="value"。属性实例HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:实例<a href="http://www.kxdang.com/topic/">这是一个链接</a>HTM...
|
前端开发 网络架构
利用html和css制作一个简单的网页(端午快乐)
利用html和css制作一个简单的网页(端午快乐)
451 0
利用html和css制作一个简单的网页(端午快乐)
|
机器学习/深度学习 前端开发 IDE
「趣学前端」昨天画了一张小滑板,今天看我用CSS让它滑起来
用技术实现梦想,用梦想打开创意之门。今天分享前端CSS中的transform知识点。
141 1