【html】基础（一）

本专栏内容为：前端专栏记录学习前端，分为若干个子专栏，html js css vue等

💓博主csdn个人主页：小小unicorn
⏩专栏分类：js专栏
🚚代码仓库：小小unicorn的代码仓库🚚
🌹🌹🌹关注我带你学习编程知识

什么是html?

html是超文本标记语言。

超文本：文本，声音，图片，视频，表格等等…
标记：由许许多多的标签组成

而我们的html页面是运行在浏览器上的。

VScode环境搭建

编写环境由很多，在这里我们还是推荐搭配vscode。

首先安装：
我们直接在官网下载vscode即可。
在这里插入图片描述
下载好后。新建一个文件夹，并在目录下常见后缀为html的文件：

然后呢，为方便我们写代码更方便，我们可以安装三个插件：

第一个：
在这里插入图片描述
第二个：

第三个：

html结构

第一个html页面

首先打开我们的记事本，并在记事本编写hello world，注意保存时将后缀保存成html的形式：
在这里插入图片描述

我们点击他：

我们看到，他在网页了打印出来了我们刚写进去的内容。

显然这个写法是不标准的，没有标签啊。

html文件结构

<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>

完整的代码应该是这样的。但是这里面的标签到底是什么意思呢？我们一个一个解释

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.

在这里插入图片描述
其中标签又可以分为单标签和双标签，我们标签满足一个结构，DOM树，DOM 是 Document Object Mode (文档对象模型) 的缩写.也可以说所有的标签都是html的子标签，而我们的head和body标签可以理解他们是兄弟标签，每一个标签就相当于是一个对象，程序员可以通过代码拿到这些对象，拿到之后就可以对这些对象进行增删查改。
在这里插入图片描述

接下来我们对笔记本里面的内容进行修改，将我们的标签也写上：

在这里插入图片描述
会发现跟之前结果是一样的。
我们按一下F12，调出开发者模式，会发现源码跟我们一样。

在这里插入图片描述

快速生成代码框架

我们用vscode写代码时，我们可以

直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架

在这里插入图片描述
看这个框架里面：

在这里插入图片描述

常见标签

在之前我们知道了html标签，头标签，接下来我们将学习几个常用的标签：

注释标签

注释不会显示在界面上. 目的是提高代码的可读性

<!-- 我是注释 -->

ctrl + / 快捷键可以快速进行注释/取消注释.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 我是一个注释 -->
</body>
</html>

我们运行一下：
在这里插入图片描述
会发现什么都没有，我们调出开发者模式

注释原则：

要和代码逻辑一致.
尽量使用中文.
不要传递负能量.

标题标签

有六个, 从 h1 - h6. 数字越大, 则字体越小.字体越来越细

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

结果：
在这里插入图片描述

段落标签

我们先在网上找一段话：

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
   素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
     中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
   的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
    移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
        实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
     苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
     同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
        这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
     花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
     1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
        这点，在文章后面的部分还会讲到
   在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
     定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
    独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
    设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
   也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
     些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。

直接运行：
在这里插入图片描述
发现很乱，没有层次，我们加上段落标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 我是一个注释 -->
    unicorn
    <h1>unicorn</h1>
    <h2>unicorn</h2>
    <h3>unicorn</h3>
    <h4>unicorn</h4>
    <h5>unicorn</h5>
    <h6>unicorn</h6>
    <p>css中的1px并不等于设备的1px</p>
    <p>在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
        素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
        中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
        的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
        移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
        实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
        苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
        同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
        这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
        花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。</p>
    <p>还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
        1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
        这点，在文章后面的部分还会讲到</p>
    <p>在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
        定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
        独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
        设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
        也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
        些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。</p>
</body>
</html>

在这里插入图片描述
这样层次感就更明显了
注意：

p 标签之间存在一个空隙
当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
自动根据浏览器宽度来决定排版.
html 内容首尾处的换行, 空格均无效.
在 html 中文字之间输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行, 而是相当于一个空格’

换行标签

br 是 break 的缩写. 表示换行

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
< br/> 是规范写法. 不建议写成 < br>

直接想在哪换行，加在后面即可。

格式化标签

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>strong 加粗</strong>
    <b>b 加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>
</body>
</html>

在这里插入图片描述

图片标签

img 标签必须带有 src 属性. 表示图片的路径.

<img src="rose.jpg">

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中.
在这里插入图片描述

示例1

使用相对路径: 创建一个 1 目录和 html 同级, 并放入一个 rose2.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <img src="./1.png">
</body>
</html>

运行结果：
在这里插入图片描述

示例2：

第二种相对路径：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <img src="./1.png">
    <img src="./test/2.png">
</body>
</html>

运行结果：
在这里插入图片描述

示例3

第三种相对路径：
访问上级目录的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <img src="./1.png">
    <!-- <img src="./test/2.png"> -->
    <img src="../3.png">
</body>
</html>

在这里插入图片描述

示例4

第一种绝对路径：
使用绝对路径1: 最好使用 / , 不要使用 \

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <img src="./1.png">
    <!-- <img src="./test/2.png"> -->
    <!-- <img src="../3.png"> -->
    <img src="Z:/Code/html/1/1.png">
</body>
</html>

在这里插入图片描述

示例5

第二种绝对路径：
使用绝对路径2: 使用网络路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <!-- <img src="./1.png"> -->
    <!-- <img src="./test/2.png"> -->
    <!-- <img src="../3.png"> -->
    <img src="data:image/jpeg;base64,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">
</body>
</html>

在这里插入图片描述
img 标签的其他属性

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片
失衡.
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"
border="5px">

注意:

属性可以有多个, 不能写到标签之前
属性之间用空格分割, 可以是多个空格, 也可以是换行
属性之间不分先后顺序
属性使用 “键值对” 的格式来表示.

超链接标签a

在这里插入图片描述
href: 必须具备, 表示点击后会跳转到哪个页面

<a href="http://www.baidu.com">百度</a>

外部链接: href 引用其他网站的地址
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <!-- <img src="./1.png"> -->
    <!-- <img src="./test/2.png"> -->
    <!-- <img src="../3.png"> -->
    <img src="data:image/jpeg;base64,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">
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

在这里插入图片描述
内部链接: 网站内部页面之间的链接. 写相对路径即可.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <!-- <img src="./1.png"> -->
    <!-- <img src="./test/2.png"> -->
    <!-- <img src="../3.png"> -->
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAJQAuAMBIgACEQEDEQH/xAAcAAAABwEBAAAAAAAAAAAAAAAAAgMEBQYHAQj/xAA/EAABAwIEAwUECQIEBwAAAAABAAIDBBEFEiExBkFRExQiYXEygZHBByNCUmKhsdHw4fEVJTOSFiQ0Q1Nygv/EABoBAAIDAQEAAAAAAAAAAAAAAAIDAAEEBQb/xAAiEQACAgICAgMBAQAAAAAAAAAAAQIRAyExQQQSEyIyQgX/2gAMAwEAAhEDEQA/AORvzMud+a6SkIWuaTfLbySq8+egHFA+0+T7w/RSo1UE2QxyNeNwVNtcDYjUEaJcxkGKtSg0SbClWNLtkuwyLoz2WMSM6lw+Iuo76Q8RbTYJ3MH62rOWw5NBFz+gUnWDscZhcNA4NN/O9lnHHuId84hqCDeOACGMX003PxJ/JdPxo+7TMHkS9Ysrz35iSiBELkLrpnMYe6GqLdAyMb7TwEQLFWC69AMc+fhHD5I6mOmDqGnEjnsLu0HiGW4v+i88GqjAu2+psDZarQ/SXg8OH4fStpqwxU1KyCWN0bbSEa3362t6eap8g0W8CSulhjwispDoBKKinHida7jd2pF9gAEmYaxlPUOqaY9rcCSnhNxKy+jmt5EEAehGirU/H3CdZlvTVlHLzkjjP6AWPrunlJiXCtdE58ONu70NQZNCNdOV/iitA0yA+lujdGcErjd14HQOc4WdcG7bjrYlNOE8bbPTsoZ7ieMEMsNHNHz1Ur9LWK01Tw/g8TJc076p8gDiC7I1mTMbdTr71UOCQ12KyuO7Yjl87kJc1cRuN1JF8BXC5EuuXWZGoNdcLkUlEzIrKD5l1JFyChDocu5tE3zoGRck6QuXaKWw2XtKVuvsnKf56KAMvkn2C1IFQ6I6B4v8EMlouL2TzdE4hlfGbsI96atdolWlIY8bcRzx2hqQ3I5odnPLTW6xWslM9RJK46veXfE3Wsccuc3hmqewEublHuJDT+qyKZwBXW8D8WcvzdSSEnHUrlydGjVFuXusE6jaGjZdGzCxB0b7alE7vfMRewHXdOvaJspaLD8lNA0i7pSXEnkP7KmyJWRVZQ9hTxuLd3fJHwukdVns2jnyUrjVM40zH/ZYQB6nROuBoA+rcSNAQfd/Ahb0F67ISqoJafLdpAcLglNCOoIcFplbhLJYQyQaG9j0JVDxWjdRVDo5rtsdCVcZWSUCNlDpDcvcXAWFzeymeCpizGTG4WL43A+5RvgLfFYdDdS3DLo4cVa55aM7C0O6lSb0DFbReMy4XImZcLlmNQcuRSUUuRS5EUGJQSZcgiKoCFl0Lq5B0QjguRSGCdkv3XbeXP5pW10DFdQtE+yUb8ks2UdVCxSPbGGk3SolcktDLHOOxmswWtp2+0+F2X13H5gLE53XcTrqtl7V+Ui+4WQ4rD2GIVMQNw2QhdH/AD3SaMPmK6Y2jOXVOWOLxpdMrEWFlMYXQSStuWkroPRiirHWD4eameOM7yG5tyaFYqqEvrmwRgfVtDdORP7BHwxkOGxmaUt7RwsNNgEnh9VFLWl0odYnxOAvp/ZLsNRoUxuj/wAk7XLYZ228/wCWv70lwDF/zEp5dmD+Z/dTXFFTSz4Lkp7Bo2btZQ3CTnRzTtZG5zuyboPUq/5L9fsXAxyVUvdaYBzjo5x2b5pQcF4bWVB7001b2izi52Vg+G6c0ddTRxwxvtTsPtuJA19UvU47DRxdnQs7Qg7tOyS3Lo1/HFLYWk4Wwim/6ShpIyDa/Zi496djhbCZHGV1LTvnJ1eY2qNpaiWsiE5PO5aFJ4dEAXSMkPaNd4SOhHNU2+yKMa0iGxThmop7upnZ2X0adHD91X5MzXlrgWuB1B3C02iqH1lM50rLW21/NZvjDycSqNvbKkWKnFIblyKXIma6KSmIWGLkEmSgrsg7C6F0MKWjivuuSdATaEqGpdkLeadQwtvshbCSGjInu2aU5iopX8rJ8xobySscl3ZWAO62S2MSGb6BzIXve8eFhdYeQUG/DsNxTDBEyhYM8AkE4FiSRe6tbnZoajPocp0HpZZ/whiJtPhdQ7K+EOEf/rz+B/VbPFTadCcsop0yBhwEQYlHTSuzZza43CuGH4ZC0WiZlZnIHoNP3TR1A+IMxR7TpJqBrYdf50Vpwumy00DRqQwanr/LrXKTM2OC6K3xE2looXMY0dqSGZjqdkjSY3h+FN7m+ilLoyO0cW6gm2/xCl6zAnVVeZ2nKWm40uLptWcLCtrTUzPOclpeGiwkI66eXVHCSrYE4ST0N+I3wPoXlkeV9xytZDhONtNicQJ0mjs79fmn2K4TU1UdrX1aNBYAXCWhwaopqxlQPYjj0t1uP2VuS6KhF+1sPxBTRxu7y1gI5gjdU049UVNdHRwRsbeUscHXJFudtAFqgw2Osi+uGYObZUXEcM7jXPYYQ+S5aHtbq5SDXYzPGXKF+E8Sq2V09DnYGEXDhrc7aK10LXU9Q7MXGXWwJVfwLBJKaQVEgtI7eNv2B+6s1OBJibfxBLm1eg8UdbJ3DmmKgs7cDXzWY4q8OxKqAPsykLVJHBlOR5LH8UqI/wDH62Fh1aRmtyP8IVxQvNyduil2iJm1K4XIhR0uQSbigoCyeYEswIjAlmBcs6SFGBOYrDUkJBrSdt0Wbwtu623icdgENWFdI7WYnDE7I47X2UrhkdRX04mp43RxfekblB9OqZ8IcPNxKR2IV8ZMZeXMDtLt5aK/PpwWWtZotlA2AWrH4yatmWfkNOkU2soZ2NJbOGu5louR+6x7iKKfC+I5XwvIf2gkje0W3/huvRE9IJWGw36rJvpRwjs4hVNiyyROs8Doea2YsShwZsmVz5HuFOZjfAs0rBaejqezlaNNDYg/BysWBkTUzM2hAsR0I0WX8K8SU2DU+LUuIdsYK6Bob2QuRINj+atX0Z4u+uopIqiXPURO8ZJ1cDsVMsNWH4+X7UX+OnaeiP3djRbRGhfZuqUfILckhI2vYyqY42sve1klBkfc38KGItdJHcXNnC4Cb0lZBD4HNcBvqEQDQ7wedpZLTl3iiOgO+U7I8lDE9/bOaC7qqxJirIcajljJa0XbIeRB/rZXKle2eMFrgR5IqJGSY0iijjacrRbW+iSw6Jsta6TXwgAeRTrEm9jF4d3JTCKcxw5nbk3KHslhsTf2cBt0WETVRPEk0rtp5Xj1sSAtvx59oS4crlYLKARDK0HP2twfeSnQRjzPZYs46gIpf+IJu/fTY6ollGgbHJddBNwdEFaKLi0JZqSalWrks6gvH1StFR/4pO6n17uD9c8c/wAKbRNlqZm01P7bt3fdHVXPCaKKlgjhhFg7wjTU66lNw4/Z2KyTpEhFE2mpWMYAAbEWGw6J6ACB0ITeuOUN00zBLQuDmg9OS6cV9TnSexoxwAewn2XWKqn0oU7KjAmSgAk+B3xuFZql3ZVz2t2e0FQ/HMQl4cneb5YmhzfMogGzznXRGKVzL3yEi6keEMZdguMRzF1oZPBKPLko6ql7eomf1cTZNRujatUUnTs9G01bHJE17HAtcLgg8lyuqxAzM65A+7qsj4S4onw0MpKgl9Ns0n7PktKoqplXE17H5mkXFlinD1Z0IZfZDuLFqR7PFO0HoUxrq+he3wzMNjyKWqsLZUtzBjc3VRNThcrRl7rGfPLa6pD4qLWyPxHFKRt+zaHOHTmp3grGXmMRTjLY2Fzfw8lAT4e8HNMAGt+yNlXMUx6XD66nFIfrIX5366W5hOUbRkyTjCX1Nornd4niYT7V3EdOik6cARDRVjDMRgrYqargfmilYC0+qtUWrfDY380laY/2TiQHEsuSgnP3WE/ksXp487Kdp6krauLYS/CKprdHOidY+5ZHSxZbOI0DQAnRZkn+gzhsuW0Sjhp6JPdQE5ZBBBWiC8nEOKxF2bDiGs0cctwD7lYsLqZarDoaiRoa+Ruaw0sLqlQYlC28XbPcS7R19rq6cL08uJYxBCXyCmhhjkkZfQki9visuTGuKNkZ92W/AaDu1N20otLN1+y1WOhGeYSAeFjdPkmGUSVGXN9UwWJ6+SlqWzICbWub+gCZjjWhOSRzENKa/MG6FG8EAeSLWuvC8bi2iZYfNcXPILUuDI+TuKOAqYRsbWcfkovjiqih4WrTI4C7coHXRSOKuyQNk6SLNfpQxp8sNPhUB8ThmLbclaIzJj4ZbXvbRcDbhFOjj+qUjNtTqjBQ4gdlt1CtPDuMTUT2hpLoubb7KqWIItzCe0UpidZxt6oJRTQSdGyYRjVJVNGWQB3NpOqd1dZGWGzgB5rIGSuqHtyOIym12myZY1XVjZCxlXMGDSwefik/ArHryKVF04p4hpqOMxRvbJUuGjGm9vMrNamYukc5xJe43cepQZcMc4nXc+aRfqQOgT4wUTPOTkzU/osxDtMNmoZDcxPzMvyDj+91r1I0GnjNuS8+/RxUuix+OO/hmiIPqNR816Dw+/co772WbKqkascriN8TgE8ZYRoRZZHi1D/h9fJCNWe0w+R5LY6s2jJHRZFxDUCfGpraBvh/nxVRJLginBJpZ/NJW1RiwqCBCChBnRYPRBk83fJDHEwuc8xEWA3t1Wu8F0UUWF97jFu8hrmktt4ALBZ5QYFNNFJRxxvibOxrD2kmbd3i25gLXYo2UtGIYwGsijygDkALJLals0JVwjtE4X13LiSet1Mh/ZQe5Q+HMLnRN5nxH0T6rkysLb7nRNxq9ic0ug0r2mFznCwtuovDfbceSfTHNQvHMtUfhrszW25BPM4fiB4jwqSQ7MOb3LC8fnccTqK2TxPHh95bcfC4+C2rjE2wWRm3aED3DUj8linFf1NdXU4GgnuD5ZAAoiypSgjQ6lHhsX2PNFlac4uCL66o0A8d0YItFqxwO7dQrFh7In1MPasbJE/Lma4XBFrKuQ2Ikv0U1QT5YI3O+y223moiMnnxQRS92o6WOLwZpHjUtG2iqWOgd8MYGx2Vzw2NxonVM3+rUOzejfsj4fqqJi8wkxGZzLlofYH0VgJjaZ1m2SQ1IQcS4pRjdQVQRYeBL/8AFNA0feN/9pXpChFqdg6Lzr9HDO04tpvwhzvy/qvRdGPqQPJZc36NWL8DXE5OziefwlYvNJ2lTLIdc8jiD71r+PPAppCfulZFVxtpavuxe0va1rnC+rdNihguySCu2SJ3Szkk/QowQhQQJXVdEND4Zpe8YiH5btiGa5Vnr3Nsxjd3kXUbwrHlopH5SMz/AIp1VvzTkN1sbDzKyQVRNcnciTw1tmSS7XOVvoEjiMlsh5Ap4G9hTsj+63X1UViEgLcq2wVIwZJXIeQuD4HDyKZ4cMrmnkEegfdhaeiJSusS1GLYOKIhUYcGj/zAX9dPmsJ4reJ8bqiNjIb+4W+S3/Ffq8Kke77Az/DX5LztigcJWSu3kbnPv/uouQuiJrP+z5MskY9LlOawA5MvJuqbN9koig8fhjeVJYcwzywU7d3OIv5c/wArqI7TQtU1w/c1cch0ABAPnzRFFurZ2w4cXbZIyfgFmhuW6721V5xuS+H1Avp2RHx0+apB1UKSEwCl2gltm7otrK08GHAIHunxiQ9sXWiDmktYPvE7XVPQSQrwJU0uFY02orX9mwxluYtOhuFuFDjeHywZqaqjn00Ebrn+ix51BgLamWqnxuF8L3l7YKNhc4A6gXOyNPjojgNJgtN3GncPFIDeV/q5KlD3djVP0Rf8bxcyNmdFI3PG02IOjT8ysfpJZ3OdUTkyOc4Pe83cSSnDpXBhAfIP/pNo5XRRTRxuyteGtIHOzr/JEsdIW8jbLDe+qTkXYz4AOiLJsldjQi6iIKFG30kbYKKJsegDB+ib0bRJXwB2ozX+aCCQujU+yXqXEi/koPEHHOEEFrXBhlyL0ejbjdcwpvaYhUh1yGGzQuIKyiTx5jTh5ZbwuY6/+0rzljBvBDfky1/RdQURaId/+mkB9r0QQRkGv2verDhDiIae333D8kEFYKJXGT/lcvoFT49XuQQULYpLoBZcBOVBBUUS1BEDhbKgk5zKWHpYf3TqI3OwQQQp7CktBn7FNDs5BBG+Ba5LAzZFk2XUEhmnoSQQQVFH/9k=">
    <a href="http://www.baidu.com">百度</a><br>
    <a href="1_1.html">点我跳转到 1.html</a>
</body>
</html>

在这里插入图片描述
空链接: 使用 # 在 href 中占位.

<a href="#">空链接</a>

点空连接没有反应

网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    小小unicorn<br>
    <!-- <img src="./1.png"> -->
    <!-- <img src="./test/2.png"> -->
    <!-- <img src="../3.png"> -->
    <img src="data:image/jpeg;base64,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">
    <a href="http://www.baidu.com">百度</a><br>
    <a href="1_1.html">点我跳转到 1.html</a>
    <a href="#">空链接</a>
    <a href="http://www.sogou.com">
        <img src="./1.png" title="点击跳到搜狗">
    </a>
</body>
</html>