【发布时间】：2015-12-12 08:07:42
【问题描述】：
我是 Spring 框架的新手，所以我使用的是 spring-boot。
所以HTML 页面的一部分，homepage.html 看起来像：
** 更新：发布完整的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="description" content="A one page template very useful on any kind of website niche"></meta>
<meta name="author" content="Bootstrap Wizard"></meta>
<link rel="shortcut icon" href="img/favicon.ico"></link>
<title>Homepage - Multipage Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"></link>
<!-- Google Font -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800" rel="stylesheet" type="text/css"></link>
<!-- Animate -->
<link href="css/animate/animate.css" rel="stylesheet"></link>
<!-- Fontawesome-->
<link rel="stylesheet" href="css/font-awesome.min.css"></link>
<!-- Owl Carousel -->
<link href="css/owl-carousel/owl.carousel.css" rel="stylesheet"></link>
<link href="css/owl-carousel/owl.theme.css" rel="stylesheet"></link>
<!-- Magnific Popup -->
<link href="css/magnific-popup/magnific-popup.css" rel="stylesheet" ></link>
<!-- Main-Style -->
<link href="css/style.css" rel="stylesheet"></link>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- wrapper -->
<div class="wrapper multipage">
<div class="preloader">
<div class="loader-item">
<img src="images/loading.gif" alt="loader"></img>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-custom nav-dark navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="bootstrapwizard logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="homepage.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="shortcodes.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Shortcodes <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="shortcodes.html#typo">Typography</a></li>
<li><a href="shortcodes.html#icons">icons</a></li>
<li><a href="shortcodes.html#counter">Counter</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</li>
<li><a href="index.html">Back to main</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- ./navigation -->
<!-- Slider -->
<div id="slider" class="fullSection">
<div class="container">
<!-- fullscreen-slider -->
<div id="fullscreen-slider" class="carousel slide wow bounceIn showdelay4" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#fullscreen-slider" data-slide-to="0" class="active"></li>
<li data-target="#fullscreen-slider" data-slide-to="1"></li>
<li data-target="#fullscreen-slider" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="slider-caption">
<i class="fa fa-cogs"></i>
<h2> MultiPurpose Theme</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper diam nec augue semper, in dignissim elit hendrerit. Quisque tempus arcu vulputate metus convallis elementum. Aenean rhoncus rutrum quam ut semper. </p>
<div class="page-scroll">
<a href="#icon-box" class="btn btn-custom btn-lg">Learn More</a>
</div>
</div>
</div>
<div class="item">
<div class="slider-caption">
<i class="fa fa-cogs"></i>
<h2> With LESS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper diam nec augue semper, in dignissim elit hendrerit. Quisque tempus arcu vulputate metus convallis elementum. Aenean rhoncus rutrum quam ut semper. </p>
<div class="page-scroll">
<a href="#icon-box" class="btn btn-custom btn-lg">Learn More</a>
</div>
</div>
</div>
<div class="item">
<div class="slider-caption">
<i class="fa fa-cogs"></i>
<h2> With LESS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper diam nec augue semper, in dignissim elit hendrerit. Quisque tempus arcu vulputate metus convallis elementum. Aenean rhoncus rutrum quam ut semper. </p>
<div class="page-scroll">
<a href="#icon-box" class="btn btn-custom btn-lg">Learn More</a>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#fullscreen-slider" role="button" data-slide="prev">
<!-- <span class="glyphicon glyphicon-chevron-left"></span> -->
<span class="fa fa-chevron-left"></span>
</a>
<a class="right carousel-control" href="#fullscreen-slider" role="button" data-slide="next">
<!-- <span class="glyphicon glyphicon-chevron-right"></span> -->
<span class="fa fa-chevron-right"></span>
</a>
</div>
<!-- fullscreen-slider -->
</div>
</div>
<!-- ./Slider -->
<!-- section -->
<div class="section">
<div class="container">
<div class="section-heading dark">
<h2>Our Services</h2>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="icon-box text-center wow fadeInLeft showdelay2">
<img src="images/icon1.png" alt="icon1" /></img>
<h3>Android Image</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit Quisque rutrum pellentesque imperdiet.</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="icon-box text-center wow fadeInUp showdelay2">
<img src="images/icon2.png" alt="icon2" /></img>
<h3>Apple Image</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit Quisque rutrum pellentesque imperdiet.</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="icon-box text-center wow fadeInRight showdelay2">
<img src="images/icon3.png" alt="icon3" /></img>
<h3>RSS Image</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit Quisque rutrum pellentesque imperdiet.</p>
</div>
</div>
</div>
<!-- ./row -->
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="icon-box text-center wow fadeInLeft showdelay2">
<i class="fa fa-android"></i>
<h3>Android Icon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit Quisque rutrum pellentesque imperdiet.</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="icon-box text-center wow fadeInUp showdelay2">
<i class="fa fa-apple"></i>
<h3>Apple Icon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit Quisque rutrum pellentesque imperdiet.</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="icon-box text-center wow fadeInRight showdelay2">
<i class="fa fa-rocket"></i>
<h3>Rocket Icon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit Quisque rutrum pellentesque imperdiet.</p>
</div>
</div>
</div>
<!-- ./row -->
</div>
</div>
<!-- ./section -->
<!-- section -->
<div class="section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<h2>Why Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. Vestibulum tristique vestibulum mauris eu mattis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. Vestibulum tristique vestibulum mauris eu mattis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. </p>
<button type="button" class="btn btn-sm btn-info">Readmore</button>
</div>
<div class="col-md-6 col-sm-6">
<h2>Other Services</h2>
<div class="panel-group dark" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">
First Accordion Heading
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. Vestibulum tristique vestibulum mauris eu mattis.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">
Second Accordion Heading
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. Vestibulum tristique vestibulum mauris eu mattis.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="">
Third Accordion Heading
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. Vestibulum tristique vestibulum mauris eu mattis.
</div>
</div>
</div>
</div>
<!-- end Accordion -->
</div>
</div>
<!-- /row -->
</div>
</div>
<!-- ./section -->
<!-- section -->
<div class="section">
<div class="container">
<div class="section-heading">
<h2>Our Works</h2>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img1.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img1.jpg" alt=""></img><div class="img_overlay"></div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img2.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img2.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img3.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img3.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img4.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img4.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
</div>
<!-- /row -->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img5.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img5.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img6.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img6.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img7.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img7.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="pic wow flipInX showdelay2">
<a href="images/img8.jpg" class="gallery-item"><img class="img-responsive img-thumbnail" src="images/img8.jpg" alt=""></img><div class="img_overlay"></div></a>
</div>
</div>
</div>
<!-- /row -->
</div>
</div>
<!-- ./section -->
<!-- section -->
<div class="section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="count-box dark wow fadeInUp showdelay2">
<i class="fa fa-smile-o"></i>
<h4>Happy Clients</h4>
<span class="count">1,000</span>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="count-box dark wow fadeInUp showdelay2">
<i class="fa fa-code"></i>
<h4>Working Hours</h4>
<span class="count">5,930</span>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="count-box dark wow fadeInUp showdelay2">
<i class="fa fa-coffee"></i>
<h4>Coffee Consumed</h4>
<span class="count">4,802</span>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="count-box dark wow fadeInUp showdelay2">
<i class="fa fa-thumbs-o-up"></i>
<h4>Solved Tickets</h4>
<span class="count">385</span>
</div>
</div>
</div>
<!-- ./row -->
</div>
</div>
<!-- ./section -->
<!-- section -->
<div class="section">
<div class="container">
<div class="section-heading">
<h2>Latest News</h2>
</div>
<!-- latest-news -->
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="featured-box item text-center">
<img class="img-responsive img-thumbnail" src="images/img5.jpg" alt=""></img>
<div class="featured-info">
<h3>Transportation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.</p>
<a href="#" class="btn btn-info">Read More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="featured-box item text-center">
<img class="img-responsive img-thumbnail" src="images/img6.jpg" alt=""></img>
<div class="featured-info">
<h3>Transportation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.</p>
<a href="#" class="btn btn-info">Read More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="featured-box item text-center">
<img class="img-responsive img-thumbnail" src="images/img7.jpg" alt=""></img>
<div class="featured-info">
<h3>Transportation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.</p>
<a href="#" class="btn btn-info">Read More</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="featured-box item text-center">
<img class="img-responsive img-thumbnail" src="images/img8.jpg" alt=""></img>
<div class="featured-info">
<h3>Transportation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.</p>
<a href="#" class="btn btn-info">Read More</a>
</div>
</div>
</div>
</div>
<!-- ./latest-news -->
</div>
</div>
<!-- ./section -->
<!-- section -->
<div class="section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-9">
<h3>This is a Callout Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit,</p>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-info btn-lg btn-callout">Buy me Now!</a>
</div>
</div>
</div>
</div>
<!-- ./section -->
<!-- footer -->
<footer class="footer section">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 wow fadeInUp showdelay2">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper quam fringilla ut. </p>
<button type="button" class="btn btn-sm btn-custom">Readmore.. </button>
</div>
<div class="col-md-3 col-sm-3 wow fadeInUp showdelay2">
<h3>Pages Links</h3>
<ul class="arrow">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Contact </a></li>
</ul>
</div>
<div class="col-md-3 col-sm-3 wow fadeInUp showdelay2">
<h3>Be Social</h3>
<div class="social">
<ul class="social-link">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
<!-- address -->
<div class="col-md-3 col-sm-3">
<div class="address wow fadeInUp showdelay2">
<h3>Address</h3>
<ul class="unstyled">
<li><i class="fa fa-map-marker"></i>25th Street, Suite 2 New York NY 10887</li>
<li><i class="fa fa-envelope"></i>email@domain.com</li>
<li><i class="fa fa-phone"></i>+40 (0) 231 1234 567</li>
<li><i class="fa fa-fax"></i>+40 (0) 123 1234 568</li>
</ul>
</div>
</div>
<!-- ./address -->
</div>
<!-- ./row -->
</div>
</footer>
<!-- ./footer -->
<!-- bottom-footer -->
<div class="bottom-footer">
<div class="container">
<div class="text-center">
© 2015 Fullscreen | <a href="http://bootstrapwizard.info">Bootstrapwizard.info </a>
</div>
</div>
</div>
<!-- ./bottom-footer -->
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- easing -->
<script src="js/easing/jquery.easing.1.3.js"></script>
<!-- wow -->
<script src="js/wow/wow.min.js"></script>
<!-- backstretch -->
<script src="js/backstretch/jquery.backstretch.min.js"></script>
<!-- owl carousel -->
<script src="js/owl-carousel/owl.carousel.js"></script>
<!-- Magnific Popup -->
<script src="js/magnific-popup/jquery.magnific-popup.js"></script>
<!-- waypoints -->
<script src="js/waypoints/waypoints.js"></script>
<!-- counterup -->
<script src="js/counterup/jquery.counterup.js"></script>
<!-- countdown -->
<script src="js/countdown/jquery.countdown.min.js"></script>
<!-- UIToTop -->
<script src="js/uitotop/jquery.ui.totop.min.js"></script>
<!-- jqbootstrapvalidator -->
<script src="js/jqbootstrapvalidation/jqBootstrapValidation.js"></script>
<!-- main -->
<script src="js/main.js"></script>
</body>
</html>
但是，当我运行 mvn spring-boot:run 时，我得到了：
2015-12-12 00:03:25.602 INFO 4291 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : FrameworkServlet 'dispatcherServlet': initialization completed in 16 ms
2015-12-12 00:03:25.869 ERROR 4291 --- [nio-8080-exec-1] o.thymeleaf.templateparser.ErrorHandler : [THYMELEAF][http-nio-8080-exec-1] Fatal error during parsing
org.xml.sax.SAXParseException: The element type "a" must be terminated by the matching end-tag "</a>".
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(ErrorHandlerWrapper.java:203) ~[na:1.8.0_45]
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.fatalError(ErrorHandlerWrapper.java:177) ~[na:1.8.0_45]
at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:441) [na:1.8.0_45]
at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:368) [na:1.8.0_45]
at com.sun.org.apache.xerces.internal.impl.XMLScanner.reportFatalError(XMLScanner.java:1436) [na:1.8.0_45]
白标错误页面
此应用程序没有显式映射 /error，因此您将其视为后备。
Sat Dec 12 00:03:25 PST 2015
There was an unexpected error (type=Internal Server Error, status=500).
Exception parsing document: template="homepage", line 60 - column 67
这对我来说毫无意义。第 60 行是 <a> 标记。我该如何解决这个问题？
更新：
注释掉第 60 行后，我看到了：
Sat Dec 12 00:15:26 PST 2015
There was an unexpected error (type=Internal Server Error, status=500).
Exception parsing document: template="homepage", line 166 - column 53
2015-12-12 00:15:26.313 ERROR 5385 --- [nio-8080-exec-1] o.thymeleaf.templateparser.ErrorHandler : [THYMELEAF][http-nio-8080-exec-1] Fatal error during parsing
org.xml.sax.SAXParseException: The element type "div" must be terminated by the matching end-tag "</div>".
【问题讨论】：
-
您说“您的页面的一部分看起来像”。页面的其余部分如何？你还有其他的a标签吗？
-
@dunni 有问题的错误是指页面的那个部分。
-
尝试评论
<a class="navbar-brand"部分以检查是否是那个 -
@RC。它有所作为。它现在在代码中的其他地方抱怨。但是我还是不明白为什么。
-
有很多错误：
<img src="images/logo.png" alt="bootstrapwizard logo">：缺少/关闭图片。<img src="images/icon2.png" alt="icon2" /></img>: 图像被关闭两次...使用 XML 编辑器，并修复它产生的所有语法错误。
标签： java html spring maven spring-mvc