【H2O2|全栈】关于HTML（3）HTML基础（二）

HTML相关知识

前言

准备工作

标签的具体分类（二）

本文中的标签在什么位置使用？

本期前置知识点

超文本

超文本引用和源属性

图片标签

锚链接

iframe

锚点

预告和回顾

后话

前言

本系列博客将分享HTML相关知识点。

上一期博客里讲述了部分标签的使用，本期博客将接着上一期来继续讲述一些具有二维属性或者多级层次的标签。

按照我的风格来说，其实我不太喜欢用书面语言来分享知识。比起单纯的科普，我的博文更像是一种语言风格类似于休闲聊天，但是又不缺乏严谨性的知识笔记，也就是我之前提到的——“杂谈”的形式。

初心呢就是主打分享，写的不好，多多包涵（嘻嘻）。

准备工作

软件：【参考版本】Visual Studio Code，有道云笔记

*关于有道云笔记的使用可以看我专栏的Markdown文档有关文章*

浏览器版本：Chrome

系统版本： Win10/11/其他非Windows版本

*我的电脑是Win10的版本，仅供参考*

标签的具体分类（二）

本文中的标签在什么位置使用？

本文中我们需要掌握的，是写在主体标签（body）中的各种标签。

本期前置知识点

超文本

首先知道一个概念，超文本（HyperText）并不局限于文字这一概念，它涵盖了广泛的可编码文件。

链接、图片、音频、视频等也属于超文本的范畴。

对于文字信息，我们可以直接使用字符（文字）直接插入双标签中。但是，对于超文本中的其他内容，标签就不能包裹住他们了。

我们一般使用属性来插入图片等内容，通常统一用链接或者地址的形式引入。

超文本引用和源属性

有一些标签的属性中，有一个属性叫href，全称是HyperText Reference，直译为超文本引用。

还有一些标签的属性中，有一个属性叫src，全称是source，直译为源。

这个两个属性可以设置一段路径（地址），比如说在线超文本的网页链接、本地超文本的路径（地址）。

比如说，我们访问网站时，浏览器上方的这一行内容就是一个网页链接：

而路径，则可以分为两种——绝对路径和相对路径。

绝对路径是从盘符开始，直到当前文件的路径。当文件发生移动后，绝对路径是会变化的，这样就会导致使用了绝对路径的代码需要被频繁地修改，即代码的可迁移性不好。

所以，在开发过程中，如果需要使用到本地的文件，最好使用相对路径。

相对路径可以理解为本文件到目标文件的相对位置关系，涉及到下面这些概念：

符号	含义
.	当前目录
..	父目录
/	分隔符，用于分隔目录和目录，或者目录和文件
\\	也是分隔符

为了方便理解，举个例子：

现在在这个“父文件夹”里，有下面两个子文件夹：

如果想要在index.html中定位到pic.png，代码如下：

../子文件夹2/pic.png

注意，从上一级往下一级找需要写出下一级文件夹的具体名称。

最后，注意src和href是有区别的，否则也不需要出现两个名称不同的属性名：

src: 本地已经下载好的/网络/资源，随着网页加载一起加载
href: 建立页面之间的联系/桥梁的作用，不会随着网页加载，使用时再加载

图片标签

图片标签img，全称是image，直译为图像。

在学习这个标签之前，我们需要认识一下图片的基本属性：

属性	描述
src	source 源属性引入图片的地址/路径
width	图片的宽度数字（单位默认px 像素）
height	图片的高度数字（单位默认px 像素）
title	当鼠标悬浮在图片的上方时显示的文字
alt	alter替换当图片损坏无显示时出现的文字
draggable	是否可拖拽 true可 false不可默认可拖拽

一个img标签最少需要有两个属性：src和alt，其中alt的内容可以为空。

使用以下代码定义一个大小为500*500px的示例图片（src使用的是我的csdn头像的链接）：

<img src="https://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1" 
    alt="我的头像" 
    width="500px" 
    height="500px" 
    title="H2O2的头"
    draggable="false">

在网页中显示的效果如下:

注意，如果只设置一个宽（或者高）的属性，则图片会被等比例缩放。

鼠标悬浮在图片上显示的文字（这个图我截不出来……）：

尝试拖动图片：无反应。draggable的默认值为true（如果不写这个是可以拖出来的）。

路径失效时的效果（路径上面随便输入乱码破坏）：

注意，如果图片加载失败，比如网络异常，也是有可能出现这个效果的。

锚链接

锚链接a，全称anchor，直译为（船）锚。

锚链接还有一个名字，叫“超链接”，用于定义超文本链接，可以是文本，图片，网页等。

锚链接是一种双标签，其中包裹的内容是可以显示出来的。在所有浏览器中，锚链接文字的默认外观如下：

链接类型
未被访问的链接	带有下划线而且是蓝色的
已被访问的链接	带有下划线而且是紫色的
活动链接（点击时）	带有下划线而且是红色的

对应效果：

锚链接的一些基本属性和对应含义如下：

属性	含义
href	超文本引用，规定链接的目标URL，即跳转的目标地址
target	规定在何处打开目标 URL。仅在 href属性存在时使用。
framename	框架的名字
id	用于创建一个HTML文档书签（网页锚点）。

其中，target具有4个属性值：

_blank	新窗口打开。
_parent	在父窗口中打开链接。
_self	默认，当前页面跳转。
_top	在当前窗体打开链接，并替换当前的整个窗体(框架页)。

想要理解target和framename的含义，我们首先需要知道框架的基本概念。

iframe

iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。

在网页中，使用<iframe>标签可以将一个网页嵌套在另一个网页中，实现网页间的相互联通。

在这里我们暂时不扩展讲该框架的内容，只需要对其概念有个基本了解即可。

简单做了一个框架的效果，由浏览器窗口嵌套两级iframe页面：

其中a页面和b页面都是两个被嵌入进来的单独的html文档。

对于全部的三层页面来说， _blank的效果都是在一个新页面里打开内容，_self的效果都是在当前页面里打开内容（默认）。

对于b页面来说，_parent在父级窗口打开就是在a页面中打开内容。

对于a，b页面来说，_top的效果就是在最高级页面，即顶级页面（浏览器窗口）打开，并覆盖所有框架效果。

锚点

id的作用是设置一个锚点。而在href中可以引用这个锚点，以此达到在页面其他的位置跳转到设置了锚点的a链接的位置。

因此，锚点常常用于网页书签的制作。比如购物网站的侧边书签栏，这里简易实现一下它的效果：

<style>
        #box {
            display: block;
            position: fixed;
            right: 50px;
            top: 300px;
            background-color: aqua;
        }

        .in {
            width: 50px;
            height: 50px; 
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

<div id="box">
        <div class="in"><a class="tag" href="#t1">水果</a></div>
        <div class="in"><a class="tag" href="#t2">饮料</a></div>
        <div class="in"><a class="tag" href="#t3">衣服</a></div>
        <div class="in"><a class="tag" href="#t4">日用</a></div>        
    </div>


    <a id="t1"></a>
    <h1>水果</h1>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <a id="t2"></a>
    <h1>饮料</h1>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <a id="t3"></a>
    <h1>衣服</h1>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <a id="t4"></a>
    <h1>日用</h1>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

在浏览器中的效果如下：