关于Html页面标题格式缩进

首页课程实战体系课手记专栏慕课教程

关于Html页面标题格式缩进

来源：3-25 编程练习

Agony498

2021-04-02 21:14:55

问题描述：

以下是我联系的code，我遇到的问题是网页输出结果如下图。同样是h1，蔬菜和水果还有运动都不对齐，在不停的往后缩进。我也不知道是哪里出现问题了，请老师能够解答。谢谢。

相关代码：

<html>
<head>
<meta charset="UTF-8">
<title>自主页面</title>
</head>
<body>
<a name="top">这里是顶部</a><br />
<!--设置水果锚点链接-->
<a href="#fruit">水果</a><br>
<!--设置蔬菜锚点链接-->
<a href="#vege">蔬菜</a><br>
<!--设置运动锚点链接-->
<a href="#sport">运动</a>

<!--设置水果标题-->
<h1><a name="fruit">水果</a></h1>
<ul>
    <li>西红柿</li>
    <li>黄瓜</li>
    <li>土豆</li>
    <li>芹菜</li>
    <li>蒜台</li>
    <li>西葫芦</li>
    <li>香菇</li>
    <li>菠菜</li>
    <li>豆角</li>
    <li>油菜</li>
    <li>香蕉</li>
    <li>苹果</li>
    <li>葡萄</li>
    <li>梨</li>
    <li>西瓜</li>
    <li>樱桃</li>
    <li>菠萝</li>
    <li>橙子</li>
    <li>柚子</li>
    <li>芒果</li>
<ul>  
<!--设置返回顶部链接-->
<a href="#top">返回顶部</a>

<!--设置蔬菜标题-->
<h1><a name="vege">蔬菜</a></h1>
<ol>
    <li>西红柿</li>
    <li>黄瓜</li>
    <li>土豆</li>
    <li>芹菜</li>
    <li>蒜台</li>
    <li>西葫芦</li>
    <li>香菇</li>
    <li>菠菜</li>
    <li>豆角</li>
    <li>油菜</li>
    <li>香蕉</li>
    <li>苹果</li>
    <li>葡萄</li>
    <li>梨</li>
    <li>西瓜</li>
    <li>樱桃</li>
    <li>菠萝</li>
    <li>橙子</li>
    <li>柚子</li>
    <li>芒果</li>
<ol>  
<!--设置返回顶部链接-->
<a href="#top">返回顶部</a>

<!--设置运动标题-->
<h1><a name="sport">运动</a></h1>
<ol>
    <li>西红柿</li>
    <li>黄瓜</li>
    <li>土豆</li>
    <li>芹菜</li>
    <li>蒜台</li>
    <li>西葫芦</li>
    <li>香菇</li>
    <li>菠菜</li>
    <li>豆角</li>
    <li>油菜</li>
    <li>香蕉</li>
    <li>苹果</li>
    <li>葡萄</li>
    <li>梨</li>
    <li>西瓜</li>
    <li>樱桃</li>
    <li>菠萝</li>
    <li>橙子</li>
    <li>柚子</li>
    <li>芒果</li>
    <li>西红柿</li>
    <li>黄瓜</li>
    <li>土豆</li>
    <li>芹菜</li>
    <li>蒜台</li>
    <li>西葫芦</li>
    <li>香菇</li>
    <li>菠菜</li>
    <li>豆角</li>
    <li>油菜</li>
    <li>香蕉</li>
    <li>苹果</li>
    <li>葡萄</li>
    <li>梨</li>
    <li>西瓜</li>
    <li>樱桃</li>
    <li>菠萝</li>
    <li>橙子</li>
    <li>柚子</li>
    <li>芒果</li>
<ol>

<br>



<!--设置返回顶部链接-->
<a href="#top">返回顶部</a>

</body>
</html>