【HTML】标签下合集~~~

news2024/11/23 15:16:44

😊博主页面：鱿年年

👉博主推荐专栏：《WEB前端》👈

💓博主格言：追风赶月莫停留，平芜尽处是春山❤️

一、图像标签和路径（重点）

1.图像标签

2.路径

二、超链接标签（！！！）

1.超链接的语法格式

2.超链接的分类

一、图像标签和路径（重点）

1.图像标签

2.路径

在实际工作中，我们的文件不能随便乱放，否则用起来很难很快的速度找到他们，因此我们需要一个文件夹来管理他们。

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。

（2）Vscode打开目录文件夹：

文件---打开文件夹，选择目录文件夹，后期非常方便管理文件。

路径

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images）,这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为：

1.相对路径

2.绝对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录文件。简单来说，就是图片相对于HTML页面的位置。

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如<img src="csdn.gif"/>
下一级路径	/	图像文件位于HTML文件下一级如<img src=" images/csdn.gif"/>.
上一级路径	.../	图像文件位于HTML文件上一级如<img src="../csdn.gif"/>

同一级路径

下一级路径

上一级路径

注意：相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里说的上一级，下一级和同一级就是图片相对于HTML页面的位置。

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如，“D:\web\img\logo.gif”或完整的网络地址“https://www.itcast.cn/images/logo.gif”。

二、超链接标签（！！！）

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另外一个页面。

1.超链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>

单词anchor的缩写，意为：锚。

链接中的两个属性作用如下：

属性	作用
href	用于指定链接目标的URL地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

2.超链接的分类

1.外部链接：例如<a href="http://www.qq.com">腾讯</a>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部链接</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="https://www.csdn.net/" target="_blank">CSDN</a>
     target 打开窗口的方式 默认值是_self 当前窗口打开页面 _blank 新窗口打开页面
    <a href="http://www.qq.com" target="_blank">腾讯</a>
</body>
</html>

代码实现：

2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="indax.html">首页</a>。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部链接</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="https://www.csdn.net/" target="_blank">CSDN</a>
     target 打开窗口的方式 默认值是_self 当前窗口打开页面 _blank 新窗口打开页面
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    <h4>2.内部链接：网站内部页面之间的相互链接</h4>
    <a href="05-图像标签.html" target="_blank">图像标签</a>
</body>
</html>

3.空链接：如果当时没有确定链接目标时，<a href="#">首页</a>。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部链接</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="https://www.csdn.net/" target="_blank">CSDN</a>
     target 打开窗口的方式 默认值是_self 当前窗口打开页面 _blank 新窗口打开页面
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    <h4>2.内部链接：网站内部页面之间的相互链接</h4>
    <a href="05-图像标签.html" target="_blank">图像标签</a>
    <h4>3.空连接：#</h4>
    <a href="#">地址</a>
</body>
</html>

4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部链接</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="https://www.csdn.net/" target="_blank">CSDN</a>
     target 打开窗口的方式 默认值是_self 当前窗口打开页面 _blank 新窗口打开页面
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    <h4>2.内部链接：网站内部页面之间的相互链接</h4>
    <a href="05-图像标签.html" target="_blank">图像标签</a>
    <h4>3.空连接：#</h4>
    <a href="#">地址</a>
    <h4>4.下载连接：地址链接的是文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="img.zip">下载文件</a>
</body>
</html>

5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接的。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部链接</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="https://www.csdn.net/" target="_blank">CSDN</a>
     target 打开窗口的方式 默认值是_self 当前窗口打开页面 _blank 新窗口打开页面
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    <h4>2.内部链接：网站内部页面之间的相互链接</h4>
    <a href="05-图像标签.html" target="_blank">图像标签</a>
    <h4>3.空连接：#</h4>
    <a href="#">地址</a>
    <h4>4.下载连接：地址链接的是文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="img.zip">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.qq.com"><img src ="img.jpg"/></a>
</body>
</html>