【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,/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>
</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,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"><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,/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><a href="#">空链接</a><a href="http://www.sogou.com"><img src="./1.png" title="点击跳到搜狗"></a>
</body>
</html>