html,第三课:链接基础

大家好,我是你们的“浪花一朵”。上篇文章中给大家介绍了html的段落与大字标题这两个双标签。今天我们将要学习双标签a。即为链接。如果是第一次看到我的文章,可以关注作者,然后翻看作者之前的课程哦!这篇文章的第五步至关重要,切记多看几遍.

零基础网页设计/前端/html,第三课:链接基础

现在我们进入正题:

第一步:先做一下基本操作,让网页内容和网页边缘没有间隙.

零基础网页设计/前端/html,第三课:链接基础

第二步:看一下链接的基本结构,href指的是『用来』“指定路径”的属性,href后面引号内的内容即为其“指定的路径”。有了链接,我们可以干很多事,比如,点击它过后①跳到另一个网页②下载文件,图片等③链接到同一个网页的指定位置.

零基础网页设计/前端/html,第三课:链接基础

第三步:目前我们不知道要链接到哪里?先用井号作为路径。把“链接”二字写在标签对之间,浏览器中打开后,可以看到链接的名称为“链接”,颜色为蓝色,有下划线,这是链接的基本样式,以后讲css之后会告诉大家怎么更改样式,如去掉下划线等.

零基础网页设计/前端/html,第三课:链接基础

下面是点击过后的样子,变成了紫色.

零基础网页设计/前端/html,第三课:链接基础

第四步:我们现在实现点击链接后链接到百度网页的效果,记住,网页一定要写全☞,如https://www.baidu.com,可以把后面的“链接”二字换成“百度”,更真实哦.

零基础网页设计/前端/html,第三课:链接基础

第五步:我们现在实现点击链接后下载文件的效果,首先将一个文件,比如一个压缩包放到html文件的同级目录下,然后把该文件的全名写在href属性中,记住,后缀名也不能少.

零基础网页设计/前端/html,第三课:链接基础

在浏览器中点击这个链接,在网页下方可以得到如下效果.

零基础网页设计/前端/html,第三课:链接基础

如,图片等其他文件,可以自己尝试,这里就不多说了.


第六步:加粗的这段代码































































d


复制粘贴一下,运行。先看代码(下面的图),可以看到我们给最上面的双标签a设置了一个id为a1,id很好理解,就相当于给了这个标签一个学号,方便点名,每一个标签只能有一个id。最底下的那个a标签的href属性后面的“#a1”就等于是对a1点名,根据第二步对href属性的介绍,可以得出,它指定的路径

id为a1的那个标签。可以看到后面有一个标签叫span,是个双标签,它的作用是圈住一段文字,对圈住的文字进行操作,注意☞
是『换行符』,他是单标签
。既然链接到a1的方法已经讲过了,如图箭头,那么,链接到s1是不是也能看懂呢?看不懂可以在评论区问我.

零基础网页设计/前端/html,第三课:链接基础

最后,你应该注意的是,网页中显示的文字是写在标签的什么位置上。还有,别忘了运行哦.

今天的文章到这里就结束了,如果还有什么问题或者好的建议,可以在评论区提出哦!听说动动手指点赞并转发的人会变帅或变美哦!


分享到:


相關文章: