持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第28天,点击查看活动详情
前言
大家好呀,我是L同学。在上篇文章html知识点总结(一)中,我们学习了html相关知识点,包括html结构、html元素、head元素、body元素等相关知识点。今天,在这篇文章中,我们将学习img元素、a元素、等相关知识点。
img元素
HTML 元素将一份图像嵌入文档。img是image单词的所以,是图像、图像的意思,事实上img是一个可替换元素( replaced element )。
img有两个常见的属性:
- src属性:source单词的缩写,表示源。是必须的,它包含了你想嵌入的图片的文件路径。
- alt属性:不是强制性的,有两个作用:
作用一:当图片加载不成功(错误的地址或者图片资源不存在),那么会显示这段文本。
作用二:屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义。
某些其他属性目前已经不再使用,比如width、height、border。
设置img的src时,需要给图片设置路径。网络图片是一个URL地址,网络图片的设置非常简单,给一个地址即可。本地电脑上的图片,后续会和html一起部署到服务。
本地图片的路径有两种方式:
- 绝对路径(几乎不用):从电脑的根目录开始一直找到资源的路径。
- 方式二:相对路径(常用):相当于当前文件的一个路径。
.代表当前文件夹(1个.),可以省略。..代表上级文件夹(2个.)。
对于网页来说,不管什么操作系统(Windows、Mac、Linux),路径分隔符都是/,而不是 \。
a元素
在网页中我们经常需要跳转到另外一个链接,这个时候我们使用a元素。HTML <a> 元素(或称锚(anchor)元素)定义超链接,用于打开新的UR。
a元素有两个常见的属性:
- href:Hypertext Reference的简称,用于指定要打开的URL地址,也可以是一个本地地址。
- target:该属性指定在何处显示链接的资源:
- _self:默认值,在当前窗口打开URL
- _blank:在一个新的窗口中打开URL
锚点链接可以实现跳转到网页中的具体位置。锚点链接有两个重要步骤:(1)在要跳到的元素上定义一个id属性(2)定义a元素,并且a元素的href指向对应的id。