网页基本标签_网页标签-优快云博客

本文链接：https://blog.youkuaiyun.com/Massimo__JAVA/article/details/124913082

这篇博客介绍了HTML的基础标签，包括初始标签、基本标签如段落和标题，图像标签的使用，以及如何创建链接进行页面跳转。

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

一、初始标签介绍

<!-- DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部-->
<head>
<!-- meta描述性标签，它用来描述我们网站的一些信息 -->
<!-- meta一般用来做SE0-->
    <meta charset="UTF-8">
    <meta name="keywords" content="java初学者，马西莫">
    <meta name="description" content="来这个地方可以学习Java">

<!--  Title网页标题  -->
    <title>我的第一个网页</title>
</head>

<!--body标签代表网页主体-->
<body>
<h2>Hello Massimo</h2>
</body>
</html>

效果：
在这里插入图片描述
查看页面源代码：

二、基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--自动补全标签快捷键：例如 h1 + tab键-->

<!--段落标签-->
<p>两只老虎    两只老虎</p>

<p>跑得快   跑得快</p>

<p>一只没有   耳朵</p>

<p>一只没有   尾巴</p>

<p>真奇怪     真奇怪</p>

<p>真奇怪   真奇怪</p>

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

<!--换行标签-->
北海虽赊 <br> 扶摇可接 <br> 东隅已逝 <br> 桑榆非晚

<!--粗体、斜体-->
<h1>字体样式标签</h1>

粗体：<stong>I love you</stong>
斜体：<em>I love you</em>

<br/>

<!--idea的html注释快捷键：ctrl + /-->

<!--特殊符号-->
空        格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br>
大于符号：&gt;
小于符号：&lt;
版权符号：&copy;


</body>
</html>

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

三、图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
src：图片地址（必填）
相对地址（推荐使用） ， 绝对地址
../   ----表示上一级目录

alt：图片显示失败出现的文字
title:鼠标悬停提示文字
width:图像宽度
height:图像高度
-->

<img src="../resource/image/tp.jpg" alt="高脚杯" title="悬停文字" width="300" height="300">

</body>
</html>

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

四、链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--a标签
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
        ___blank  在新标签中打开
        ___self   在自己的网页中打开，默认
-->
<a name="top">顶部</a>
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>

<br>

<a href="1.我的第一个网页.html">
    <img src="../resource/image/tp.jpg" alt="高脚杯" title="悬停文字" width="300" height="300">
</a>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resource/image/tp.jpg" alt="高脚杯" title="悬停文字" width="300" height="300">
    </a>
</p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resource/image/tp.jpg" alt="高脚杯" title="悬停文字" width="300" height="300">
    </a>
</p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resource/image/tp.jpg" alt="高脚杯" title="悬停文字" width="300" height="300">
    </a>
</p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resource/image/tp.jpg" alt="高脚杯" title="悬停文字" width="300" height="300">
    </a>
</p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resource/image/tp.jpg" alt="高脚杯" title="悬停文字" width="300" height="300">
    </a>
</p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resource/image/tp.jpg" alt="高脚杯" title="悬停文字" width="300" height="300">
    </a>
</p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resource/image/tp.jpg" alt="高脚杯" title="悬停文字" width="300" height="300">
    </a>
</p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resource/image/tp.jpg" alt="高脚杯" title="悬停文字" width="300" height="300">
    </a>
</p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resource/image/tp.jpg" alt="高脚杯" title="悬停文字" width="300" height="300">
    </a>
</p>

<!--锚链接
1、需要一个标记
2、跳转到标记
#
-->
<a name="down">底部</a>
<a href="#top">点击跳转到顶部</a>
</body>
</html>