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

HTML相关知识

前言

准备工作

标签的具体分类（二）

前言

本系列博客将分享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头像的链接）：

html 复制代码

<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链接的位置。

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

html 复制代码

<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>

html 复制代码

<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 />

在浏览器中的效果如下：

比如，点击衣服，我们就可以跳转到衣服的区域：

可以看到，在需要跳转到的位置（目标位置 ）设置id值 ，在书签中使用"# + id值"实现向锚点的跳转。

特别的，在锚链接中还有一个属性叫做name，使用方法与id相同。

*其实id在所有html标签中都可以用（name只能在锚链接中有此效果），它是一种选择器，在未来的CSS系列中我会拿出来讲*

预告和回顾

在我的HTML第四期博客中，将会继续介绍HTML的基本标签，包括列表，表格和表单的概念，并会加上实际的案例。

对HTML感兴趣的朋友，也可以看看我的主页专栏：

专栏 | HTML相关知识http://t.csdnimg.cn/Xuel5

后话

在全栈领域，博主也只不过是一个普通的初学者而已。关于这篇博客，主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

==期待与你在下一期博客中再次相遇==

【H2O2】