html网页标签，图像标签，链接标签，锚链接，邮件链接

一方1

已于 2022-10-26 15:40:33 修改

阅读量608

点赞数

文章标签： html 前端 dreamweaver

于 2022-10-26 11:51:39 首次发布

本文链接：https://blog.youkuaiyun.com/m0_67737085/article/details/127529717

版权

本文详细介绍了HTML的基本结构和常用标签，包括DOCTYPE声明、标题、段落、换行、水平线、字体样式等。重点讲解了图像标签的src、alt属性，以及链接标签的用法，包括基础链接、图片链接、目标窗口设置、锚链接和邮件链接。通过对HTML标签的掌握，可以创建功能丰富的网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Html 1-4

1.html的基本结构


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

</body>

</html>

（上面的代码为初始代码）

注释:

DOCTYPE声明：告诉浏览器，使用什么规范。

head：标签代表网页头部。

body：标签代表网页主体。

title ：网页标题。

meta：描述性标签，它用来描述我们的网站的一些信息。

title网页标题是什么呢，我们修改上述初始代码为：


<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <meta charset="UTF-8">
<!-- title网页标题   -->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
</body>

</html>

我们注意到title标签里面的内容改为了：我的第一个网页。然后运行结果为：

meta的作用：

我们修改代码并在body主体部分加入一些语言如Hello world！，代码如下。


<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，它用来描述我们的网站的一些信息    -->
<!--    meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords"content="学习">
    <meta name="description"content="来这里好好学习">
<!-- title网页标题   -->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello world！
</body>
</html>

2.HTML网页基本标签

1.标题标签

一级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
</body>
</html>

运行结果

2.段落标签

如果我们直接把一部分文本放进body主题，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
冬眠假期刚刚结束
我还有点糊涂
鸟儿在头顶把森林叫醒
春天空气让我很舒服
天上太阳已红扑扑
看起来很模糊
远处山坡有几棵小树
去年冬眠前我没记住
</body>
</html>

上述是吧熊出没一部分歌词放进了body主体，我们看一下运行结果如何。

我们看到歌词没有达到我们的预期结果，而是紧挨着的，非常的不美观，这就需要我们的段落标签了。我们再次修改代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
<p>冬眠假期刚刚结束</p>
<p>我还有点糊涂</p>
<p>鸟儿在头顶把森林叫醒</p>
<p>春天空气让我很舒服</p>
<p>天上太阳已红扑扑</p>
<p>看起来很模糊</p>
<p>远处山坡有几棵小树</p>
<p>去年冬眠前我没记住</p>
</body>
</html>

修改加入段落标签后发现，我们的运行结果达到了预期的结果。

3.换行标签

我们可以使用段落标签让每一句歌词占一行，同时我们也可以使用换行标签来达到目的。修改代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
<p>冬眠假期刚刚结束</p>
<p>我还有点糊涂</p>
<p>鸟儿在头顶把森林叫醒</p>
<p>春天空气让我很舒服</p>
<p>天上太阳已红扑扑</p>
<p>看起来很模糊</p>
<p>远处山坡有几棵小树</p>
<p>去年冬眠前我没记住</p>

<!--换行标签-->
冬眠假期刚刚结束<br/>

我还有点糊涂<br/>

鸟儿在头顶把森林叫醒<br/>

春天空气让我很舒服<br/>

天上太阳已红扑扑<br/>

看起来很模糊<br/>

远处山坡有几棵小树<br/>

去年冬眠前我没记住<br/>
</body>
</html>

我们看到在换行标签作用下也达到了目的。但是我们和段落标签比较发现。换行标签每一行都比较紧凑，而段落标签则是每一行都有一定的间距。

4.水平线标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
<p>冬眠假期刚刚结束</p>
<p>我还有点糊涂</p>
<p>鸟儿在头顶把森林叫醒</p>
<p>春天空气让我很舒服</p>
<p>天上太阳已红扑扑</p>
<p>看起来很模糊</p>
<p>远处山坡有几棵小树</p>
<p>去年冬眠前我没记住</p>

<!--换行标签-->
冬眠假期刚刚结束<br/>

我还有点糊涂<br/>

鸟儿在头顶把森林叫醒<br/>

春天空气让我很舒服<br/>

天上太阳已红扑扑<br/>

看起来很模糊<br/>

远处山坡有几棵小树<br/>

去年冬眠前我没记住<br/>
<body/>

</body>
<!--水平线标签-->
<hr>
</body>
</html>

[

我们可以看到在页面最底下便生成了水平线。

5.字体样式标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
<p>冬眠假期刚刚结束</p>
<p>我还有点糊涂</p>
<p>鸟儿在头顶把森林叫醒</p>
<p>春天空气让我很舒服</p>
<p>天上太阳已红扑扑</p>
<p>看起来很模糊</p>
<p>远处山坡有几棵小树</p>
<p>去年冬眠前我没记住</p>

<!--换行标签-->
冬眠假期刚刚结束<br/>

我还有点糊涂<br/>

鸟儿在头顶把森林叫醒<br/>

春天空气让我很舒服<br/>

天上太阳已红扑扑<br/>

看起来很模糊<br/>

远处山坡有几棵小树<br/>

去年冬眠前我没记住<br/>
<body/>

</body>
<!--水平线标签-->
<hr>
<!--字体样式标签-->
<h1>粗体</h1>
<strong>好好学习</strong>
<h1>斜体</h1>
<em>好好学习</em>
</body>
</html>

我们看到对应生成了粗体和斜体。粗体：内容。斜体：内容。

6.特殊符号

空格  ：&nbsp；
大于号：&gt;
小于号：&lt;
版权号：&copy;
等等......

3.图像标签

1.src+tab快捷输入图像标签代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--图像标签-->
<!--src+tab输入图像标签代码-->
<!--src图像地址-->
<!--../代表上一级目录-->
<img src="../resource/image/1.jpg" alt="">
</body>
</html>

src里面输入的是图片资源路径。

alt里面输入的便是当图片无法显示时浏览器页面显示的文字。代码如下（此时我们把图片路径故意改错，让图片无法显示。）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--图像标签-->
<!--src+tab输入图像标签代码-->
<!--src图像地址-->
<!--../代表上一级目录-->
<img src="../resource/image/1.jpg" alt="头像">
</body>
</html>

我们可以看到图片路径错误，便显示了alt里面的内容：头像。

2.扩展

可以在图像标签代码中加入悬停文字：title=“内容”。图片高度：hight=“高度”。图片宽度：weight=“宽度”。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--图像标签-->
<!--src+tab输入图像标签代码-->
<!--src图像地址-->
<!--../代表上一级目录-->
<!--alt里面输入的便是当图片无法显示时浏览器页面显示的文字。-->

<img src="../resource/image/1.jpg" alt="头像" title="悬停文字" height="30" weight="30">
</body>
</html>

我们可以看到图片高度和宽度发生了改变，如果鼠标放在图片上还有悬停文字。

4.链接标签（超链接）

a+tab便可快捷输入链接标签代码（）。

1.首先我们看一下最基础的链接标签代码，代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--链接标签a+tab输入链接标签代码-->
<!--href必须填，代表要跳转到哪个页面-->
<a href=""></a>
<a href="https://www.bilibili.com/">点击我跳转到B站</a>
</body>
</html>

我们需要注意href里面必须需要填写内容，内容便是一个链接（上述以B站链接为例）。然后在其后面输入信息。便可完成基本的链接代码。我们看一下运行结果。

然后我们点击标签跳转。

到这里我们便完成了最基本的链接标签代码。

2.接下里我们尝试通过图片进行跳转，这里便是在链接标签里插入图片超链接。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--链接标签a+tab输入链接标签代码-->
<!--href必须填，代表要跳转到哪个页面-->
<a href="https://www.bilibili.com/">点击我跳转到B站</a>
<hr>
<!--插入图片超链接-->
<a href="https://www.bilibili.com/"><img src="../resource/image/2.png" alt="头像" title="跳转到B站"></a>
</body>
</html>

这里我们便完成了图片链接的插入。我们通过点击图片也能直接跳转至B站。

3.窗口打开位置target=“”

通过前两个页面跳转我们注意到页面跳转总是在本窗口打开，我们可以通过target来改变窗口打开位置。例如我们要想在新窗口进行跳转，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--链接标签a+tab输入链接标签代码-->
<!--href必须填，代表要跳转到哪个页面-->
<!--target表示窗口在哪里打开，其中填入的_blank表示在新窗口打开，
_self表示在本窗口打开（默认情况下也是在本窗口打开）-->
<a href="https://www.bilibili.com/">点击我跳转到B站</a>
<hr>
<!--插入图片超链接-->
<a href="https://www.bilibili.com/" target="_blank">
    <img src="../resource/image/2.png" alt="头像" title="跳转到B站">
</a>
</body>
</html>

我们在href里面添加了target，其中的_blank表示代行窗口打开，另外_self表示在本窗口打开。默认情况下就是在本窗口打开。通过target="_blank"的添加，我们便完成了跳转在新窗口打开的设置。

4.锚链接

通过链接标签，我们不仅可以实现页面跳转。我们还可以通过设置锚链接进行特殊的跳转。例如，回到本页面的顶部，跳转到本页面或其他页面的具体某个位置。

下面我们来设置锚链接，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--<a name="name">顶部</a>定义锚链接跳转位置-->
<a name="top"></a>
<!--链接标签a+tab输入链接标签代码-->
<!--href必须填，代表要跳转到哪个页面-->
<!--target表示窗口在哪里打开，其中填入的_blank表示在新窗口打开，
_self表示在本窗口打开（默认情况下也是在本窗口打开）-->
<a href="https://www.bilibili.com/">点击我跳转到B站</a>
<hr>
<!--插入图片超链接-->
<a href="https://www.bilibili.com/" target="_blank">
    <img src="../resource/image/2.png" alt="头像" title="跳转到B站">
</a>
<a href="#top">点我回到顶部</a>
</body>
</html>

我们可以看到我们在顶部加入一个此处可添加内容这个通过name确定跳转标记，其中的top可以修改。然后在底部添加了链接标签点我回到顶部，这是跳转的标签函数。通过这两个代码我们便可实现指定位置跳转，而且不局于一个窗口，还可以跳转到其他窗口页面的指定位置。

4.1锚链接之跳转到其他页面的指定位置

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--<a name="name">顶部</a>定义锚链接跳转位置-->
<a name="top"></a>
<!--链接标签a+tab输入链接标签代码-->
<!--href必须填，代表要跳转到哪个页面-->
<!--target表示窗口在哪里打开，其中填入的_blank表示在新窗口打开，
_self表示在本窗口打开（默认情况下也是在本窗口打开）-->
<a href="https://www.bilibili.com/">点击我跳转到B站</a>
<hr>
<!--插入图片超链接-->
<a href="https://www.bilibili.com/" target="_blank">
    <img src="../resource/image/2.png" alt="头像" title="跳转到B站">
</a>
<a href="#top">点我回到顶部</a>
<!--跳转到其他页面的指定位置-->
<a href="1.我的第一个网页.html#111">跳转到1.我的第一个页面</a>

如下1.我的第一个网页.html页面的代码

<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，它用来描述我们的网站的一些信息    -->
<!--    meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords"content="学习">
    <meta name="description"content="来这里好好学习">
<!-- title网页标题   -->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello world！
<a name="111"></a>
</body>
</html>

和同一页面跳转是几乎相同的，主要区别是在href后不仅需要跳转标记的名字，还需要跳转到另一个页面的链接。

5.功能性链接

5.1邮件链接

邮件链接：mailto其功能可以跳转发送给某人邮件。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--邮箱链接，mailto-->
<a href="mailto:529209274@qq.com">点击联系我</a>
</body>
</html>

点击便可发送邮件给这个邮件地址。