从零开始学前端:链接跳转 --- 今天你学习了吗?(Day03)
从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(Day03)
复习:从零开始学前端:HTML的一些文本格式化标签、快捷键、和特殊符号 — 今天你学习了吗?(Day02)
文章目录
- 从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(Day03)
前言
欢迎大家来到2022年,你们元旦过得怎么样,有没有很有意思的事情发生,我的一年以《穿过寒冬拥抱你》结束,事情并没有跌宕起伏,却很符合现实,整个故事平平淡淡,只有其中的一对老夫妻,让我感动了,后来看到好多影评人都说这是个烂剧,大家看过这部剧嘛?对此有什么看法呢?我的元旦以《李茂扮太子》而结束,属实是给我本就圆满的元旦画上了一个大结局,属实搞笑,大家有机会可以去看看哈~ 新的一年还要继续努力呀~ 把之前拉下的课程补上,大家一起加油。 ------ 一个人必须不停地写作,才能不被茫茫人海湮灭。
第三节课:整堂课主要是讲了链接的使用
一、图片标签
在HTML标签中,标签用于定义
HTML
页面中的图像。
就比如小米官网中的商品图片,都是利用我们的图片标签来制作的。
怎么来引入一张图片呢?就是使用img
标签,语法规则为
- 单词image的缩写,意为图像。
src
是标签的必须属性,它用于指定图像文件的路径和文件名。
二、属性
什么是属性呢?
所谓属性:简单理解就是属于这个图像标签的特性。其中"图像的URL"就是我们的src的属性值了。属性为HTML元素提供附加信息。HTML属性HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。
三、目录文件夹和根目录文件夹
- 目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关教材,比如html文件、图片等
- 根目录:打开目录文件夹的第一层就是根目录。
四、相对路径
相对路径 | 符号 | 说明 |
---|---|---|
同一级 | ./ | 图片位于HTML文件同一级
|
下一级 | / | 图片文件位于HTML下一级
|
上一级 | …/ | 文件位于HTML文件上一级
|
上上级 | …/…/ | 文件位于HTML文件上上级
|
五、绝对路径
- 是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
- 例如:
我们也可以直接复制网络上的地址使用:
六、图片标签的属性
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性(没有的话,图片显示不出) |
alt | 文本(程序员自定义) | 替换文本,图像不能显示的时候显示alt里面的属性值 |
title | 文本(程序员自定义) | 提示文本,当鼠标放在图像上面,显示的提示信息 |
width | 大小(单位像素) | 设置图片宽度 |
height | 大小(单位像素) | 设置图片高度 |
boeder | 大小(单位像素) | 设置图片边框的粗细 |
*建议:当我们设置图片大小(宽高)的时候,不要把高度和宽度同时定死,这样做的图片会失真、变形。所以我们建议图片一般设置刚度或则宽度,只设置其中一个边就可以。
七、图像标签的注意点
- 图像标签可以拥有多个属性,必须写在标签名的后面。
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
- 属性采取键值对的格式,即key="value"的格式,属性=“属性值”。
八、问答
- 图像标签的哪个属性是必须要写的?
src路径属性必须要写 - 请说出图像标签中alt和title属性区别?
alt是当图片显示不出来替换图片的属性。Title是当鼠标移到图片上面的时候显示的图片标题。
九、图片标签的路径总结
图片路径分为:
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如:
十、链接标签
在HTML标签中,标签用于定义超链接,作用是从一个页面链接到另一个页面
链接的语法格式:文字或图像
a----anchor的缩写 意为:锚。
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性)当此标签引用href的时候,他就具有了超链接的功能了 |
target | 用于指定链接页面打开的方式,其中target=”_self” 为默认值,表示在自身页面打开当属性值为:target=”_blank” 的时候,表示在新的窗口页面打开。 |
十一、链接的分类
外部链接:例如百度
。
内部链接:内部网页的跳转(自己写的页面地址跳转,为内部网页链接)。
空链接: 当还没有链接跳转的地址,用# 来代替。
下载链接:地址链接的是文件 .exe
或者 .zip
等压缩形式的文件。
网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。
锚点链接:点击链接可以快速定位到页面中的某个位置。
在链接文本的href属性中,设置属性值为#名字的形式,如第2集
。
找到目标位置标签,里面添加一个id属性=刚才的名字,如:
第2集介绍
。
预习:从零开始学前端:表格制作 — 今天你学习了吗?(Day04)
------少年辛苦终身事,莫向光阴惰寸功。