最全前端知识点（2），2024年最新干货精讲-CSDN博客

本文链接：https://blog.csdn.net/tencentes/article/details/138935206

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

link标签引入

rel：声明引入文件的类型 shortcut icon

type：声明引入文件的格式

href：引入图片路径

相对路径：本地保存路径

./+文件名：同级

…/+文件名：上级

/+文件名：下级

绝对路径：服务器地址

<html>
<head>
<meta charset="utf-8"/>
<title>小图标</title>
<!-- 绝对路径 -->
<link rel="shortcut icon" type="image/x-icon" href="https://小图标名字复制>
<!-- 相对路径 -->
<link rel="shortcut icon" type="image/x-icon" href="../本地名字复制>

</head>
<body>

</body>
</html>

图片标签

html图片标签

img：定义这是图片标签

src：图片的引入路径

相对路径：本地保存路径

./+文件名：同级

…/+文件名：上级

/+文件名：下级

绝对路径：服务器地址

width：定义图片的宽数字+像素（px）

height：定义图片的高数字+像素（px）

注：当只设置宽或者高时，图片相对于的宽或者高会等比例缩放

alt：图片丢失或损失时，出现的替换文字

title：当鼠标悬浮于图片上时，出现提示文字

<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8" />
<title>图片标签</title>
</head>
<body>

<img src="./图片文件名" width="100%" height="200px"/>

</body>
</html>

超链接锚链接

html超链接

a：定义超链接

href：定义跳转的路径（相对路径绝对路径）

targht：定义网页目标跳转位置（默认值）

-self：当前窗口打开

-blank：在新窗口打开

-top：在最高级页面打开

-parent：在父级窗口打开

html锚链接

定义网页跳转到相应位置

1、给需要跳转的目标位置html的标签添加id属性，a标签还可以使用name属性

不能全是数字或者汉字，只能以_或者英文字母开头（_one / one）

2、给点击跳转的a标签的href添加属性值或者name属性值 href=“#one”

<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8" />
<title>超链接 锚链接</title>
</head>
<body>

<a href="绝对路径"  target="-self" >点击</a>
<a href="相对路径">点击</a> 


<h1 id="one">顶部</h1>
<a id="one" name="three">顶部</a>

<a href="#one">点击跳转顶部</a>



![img](https://img-blog.csdnimg.cn/img_convert/1a6997d9528a4f9e7ad87349ccf14bb3.png)
![img](https://img-blog.csdnimg.cn/img_convert/d8cc348638463d9428792d522e217b3a.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**