当我在localhost:5000中运行html站点时,该站点中的所有文本都将作为链接显示

当我在localhost:5000中运行html站点时,该站点中的所有文本都将作为链接显示,html,twitter-bootstrap,Html,Twitter Bootstrap,我有一个非常简单的网站HTML,但当我在localhost中运行它时,所有不在导航栏、jumbotron等内容中的文本都会自动显示为链接(显示为蓝色、带下划线、可单击并显示在页面顶部),我看不出任何原因。我正在使用Python/Flask/Bootstrap/Virtual Studio代码。下面是一个屏幕截图,显示了我的意思: 这是我的代码: <!DOCTYPE html> <html lang="en"> <head> <meta char

我有一个非常简单的网站HTML,但当我在localhost中运行它时,所有不在导航栏、jumbotron等内容中的文本都会自动显示为链接(显示为蓝色、带下划线、可单击并显示在页面顶部),我看不出任何原因。我正在使用Python/Flask/Bootstrap/Virtual Studio代码。下面是一个屏幕截图,显示了我的意思:

这是我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Complete Bootstrap 4 Website Layout</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
    <link href="style.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
    <a class="navbar-brand" href="{{url_for('hello_world')}}"><img src="{{url_for('static', filename='img/logo.png')}}"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Crap</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Crud</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Cheesey Potato</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Scorpion</a>
            </li>

        </ul>
    </div>



</div>
</nav>

<!--- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
    <li data-target="#slides" data-slide-to="0" class="active"></li>
    <li data-target="#slides" data-slide-to="1"></li>
    <li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="{{url_for('static', filename='img/background.png')}}">
        <div class="carousel-caption">
            <h1 class="display-2">HELLO!</h1>
            <h3>WELCOME</h3>
            <button type="button" class="btn btn-outline-light btn-lg">click here</button>
            <button type="button" class="btn btn-primary btn-lg">no click here actually</button>
        </div>
    </div>
    <div class="carousel-item">
            <img src="{{url_for('static', filename='img/background2.png')}}">
    </div>
    <div class="carousel-item">
            <img src="{{url_for('static', filename='img/background3.png')}}">
    </div>
</div>
</div>


<!--- Jumbotron -->
<div class="container-fluid">
<div class="row jumbotron">
    <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
        <p class="lead">This is an example site.</p>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
        <a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
    </div>

</div>
</div>


<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
    <div class="col-12">
        <h1 class="display-4">Morning!</h1>

    </div>
    <hr>
    <div class="col-12">
        <p class="lead">Welcome to my website</p>
    </div>
</div>  
</div>


<!--- Three Column Section -->
<div class="container-fluid padding">
<div class="row text-center padding">
    <div class="col-xs-12 col-sm-6 col-md-4">
        <i class="fas fa-fish fa-5x text-danger"></i>
        <h3>Fish</h3>
        <p>Browse freshwater and exotic fish</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
        <i class="fas fas fa-dog fa-5x"></i>
        <h3 class="text-danger">Dogs</h3>
        <p>Browse our pedigrees</p>
    </div>
    <div class="col-sm-12 col-md-4">
        <i class="fas fas fa-otter fa-5x"></i>
        <h3>Otters</h3>
        <p>Check out our new range of otters</p>
    </div>
</div>
<hr class="my-4">
</div>


<!--- Two Column Section -->
<div class="container-fluid padding">
<div class="row padding">
    <div class="col-md-12 col-lg-6">
        <h2>If you build it...</h2>
        <p>According to Platts estimates and to thermal coal traders who spoke to Platts, 
            Russian producers continue to seek domination on the European market and have been 
            putting in a lot of effort to grab more market shares on the Asian markets such as South 
            Korea and Taiwan.</p>
        <p>Last year, the average free on board (FOB) coal prices for the Atlantic and Pacific markets were 
            both higher compared to 2017, which could be a big incentive for Russia to continue producing and 
            exporting more coal to seaborne destinations, according to Platts.</p>
        <p>Russia’s Energy Minister Alexander Novak briefed on Thursday President Vladimir Putin on the Russian 
            energy sector production in 2018, saying that the coal production of around 433 million tons was 
            planned to be reached in 2020. Russia plans to invest around $22.4 billion 
            (1.5 trillion Russian rubles) in its coal industry and port infrastructure, Novak told Putin.</p>       
    </div>

</div>

</div>

完整的引导4网站布局
你好 欢迎 点击这里 不,点击这里

这是一个示例站点

网络托管 早晨!

欢迎访问我的网站

鱼 浏览淡水和异国鱼类

狗 浏览我们的血统

水獭 看看我们的新水獭系列


如果你建造它。。。 根据普拉茨的估计和与普拉茨交谈的热煤交易商, 俄罗斯生产商继续寻求在欧洲市场上的主导地位,并一直在努力 在南亚等亚洲市场上投入大量精力,以抢占更多的市场份额 韩国和台湾

去年,大西洋和太平洋市场的平均船上交货(FOB)煤炭价格为 与2017年相比,这两个数字都更高,这可能是俄罗斯继续生产和销售产品的一大激励因素 普拉茨表示,向海运目的地出口更多煤炭

俄罗斯能源部长亚历山大·诺瓦克(Alexander Novak)周四向总统弗拉基米尔·普京(Vladimir Putin)简要介绍了俄罗斯能源计划 能源部门2018年的产量,表示约4.33亿吨的煤炭产量 计划在2020年实现。俄罗斯计划投资约224亿美元 (1.5万亿俄罗斯卢布)用于煤炭工业和港口基础设施,诺瓦克告诉普京。


我没有任何未关闭的链接,所以我不明白它为什么会这样做。如果有人能帮忙,那就太好了,谢谢。链接问题出现在代码的“三列”和“两列”部分。

似乎您忘记关闭某个锚定标记。另一方面

<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>

标记在这里?

不是html专家,但我在第84行注意到了 网络托管

你还没关门
正如我所说,不是html专家,但我希望我能帮上忙:D

有一个额外的div和缺少的标记。留下评论,突出问题所在。C

<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
    <a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
 // Missing an </a> tag in above line, also incorrect by html5 spec to include a button within an a tag but that's a separate problem.
</div>
 </div>
 </div> // Extra div here

上面一行中的标记,根据html5规范,在标记中包含按钮也是不正确的,但这是一个单独的问题。
//这里有额外的div

它看起来像是一个
div
被错误地关闭了。可能还值得指出的是,将按钮嵌套在锚点中并没有真正意义(哪个元素应该接收单击?),谢谢,我确实忘记了关闭a标记。同样感谢你让我知道如何将按钮嵌套在a标记中-我只是在遵循一个教程,这就是它显示的方式B,不知道为什么。如果我只是删除a标记并将按钮嵌套在div中,它会工作吗?