为什么我的页面上的正文和html标签在Brackets中显示为红色?
问题描述:
我下载了一个关于响应式动画网站教程的练习文件,并且在我的代码编辑器(Brackets)页面末尾,body和html标签以红色显示,就好像有错误,我不知道为什么。谁能告诉我?为什么我的页面上的正文和html标签在Brackets中显示为红色?
另外,找出我自己的最佳方法是什么?我点击了“方括号”工具栏中的“调试”,但它给了我错误所在的行 - 页面上的167和168,仅此而已。帮助不大。谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Gym - Personal Training</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/waypoints.css">
<script src="js/query.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
</head>
<body>
<header>
<div id="header-inner">
<a href="index.html" id="logo"></a>
<nav>
<a href="a" id="menu-icon"></a>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="a">About</a></li>
<li><a href="a">Facility</a></li>
<li><a href="a">Pricing</a></li>
<li><a href="a">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!--- Start Slider -->
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
<div class="slide-wrap">
<section class="slider">
<ul class="slider1">
<li><img src="https://www.w3newbie.com/wp-content/uploads/chest-fly.png"></li>
<li><img src="https://www.w3newbie.com/wp-content/uploads/push-ups.png"></li>
<li><img src="https://www.w3newbie.com/wp-content/uploads/inside-gym.png"></li>
<li><img src="https://www.w3newbie.com/wp-content/uploads/training.png"></li>
</ul>
</section>
</div>
<script type="text/javascript">
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
});
$('.slider2').bxSlider({
pager:false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
controls:false,
});
</script>
<!--- End Slider -->
<div class="clearfix"></div>
<div id="inner-wrapper">
<!---Start Waypoints Delayd Animation --->
<section class="staggered-animation-container">
<section class="os-animation" data-os-animation="fadeInLeftBig" data-os-animation-delay=".3s">
<section class="one-third">
<div class="circle">
<td><i class="fa fa-users"></i></td>
</div>
<h3>Grade A Staff</h3>
<p>Here at The Gym we have the best trainsing staff in the tri-state area as we seek out and recruit talented trainers with all the right cetifications. Come in today and have a sit down with one of our trainers so we can help you meet your golas in the fastest way possible!</p>
</section>
</section>
<section class="one-third">
<div class="circle">
<td><i class="fa fa-map-marker"></i></td>
</div>
<h3>A Convenient Location</h3>
<p>Here at The Gym we have the best trainsing staff in the tri-state area as we seek out and recruit talented trainers with all the right cetifications. Come in today and have a sit down with one of our trainers so we can help you meet your golas in the fastest way possible!</p>
</section>
<section class="one-third">
<div class="circle">
<td><i class="fa fa-check-square-o"></i></td>
</div>
<h3>Check us out - free!</h3>
<p>Here at The Gym we have the best trainsing staff in the tri-state area as we seek out and recruit talented trainers with all the right cetifications. Come in today and have a sit down with one of our trainers so we can help you meet your golas in the fastest way possible!</p>
</section>
<div class="clearfix"></div>
<article>
<img src="https://www.w3newbie.com/wp-content/uploads/gym-classes.png" class="circle-image">
</article>
<aside>
<h3>Our Facility</h3>
<br>
<ul class="gym">
<li><h4>Unlimited wifi Connection</h4></li>
<li><h4>member music requests & voting</h4></li>
<li><h4>open 24 hours/7 days a week</h4></li>
<li><h4>cardio machine movie theater</h4></li>
</ul>
</aside>
<div class="clearfix"></div>
<section class="one-third">
<h3>Ladies Section</h3>
<img src="https://www.w3newbie.com/wp-content/uploads/ladies-gym.jpg">
<p>Included in our facility is a "ladies only" section of the gym where women can work out by themselves.</p>
</section>
<section class="one-third">
<h3>the gym floor</h3>
<img src="https://www.w3newbie.com/wp-content/uploads/gym-floor.jpg">
<p>Our gym is as spacious as they come. Enjoy scenic views from the cardio equipment on the third floor.</p>
</section>
<section class="one-third">
<h3>free weights</h3>
<img src="https://www.w3newbie.com/wp-content/uploads/free-weights.jpg">
<p>Our free weights section has an extensive collection of dumbbels and Olympic plates for body building.</p>
</section>
<!---End Inner Wrapper--->
<div class="clearfix"></div>
<footer>
<div id="footer-inner">
<section class="one-third" id="footer-third">
<h3>Contact</h3>
<p class="footer-contact">The Gym<br>
<b class="phone">555-555-5555</b><br><br>500 Washington Road<br>Seattle, WA 98101</p></section>
<section class="one-third" id="footer-third">
<h3>Social</h3>
<br>
<ul class="social">
<li><a href="https://www.facebook.com/w3newbie" target="_blank"><i class="fa fa-facebook"></i></a></li><li><a href="https://plus.google.com/+DrewRyan_3/posts" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="https://twitter.com/DrewOnCue" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.youtube.com/user/drewoncue" target="_blank"><i class="fa fa-youtube"></i></a></li>
</ul>
</section>
<section class="one-third" id="footer-third-last">
<h3>Pages</h3>
<br>
<h5>
<a href="index.html">home</a> <a href="#">about</a> <a href="#">facility</a> <a href="#">pricing</a>
<a href="#">contact</a>
</h5>
</section>
</div>
</footer>
<footer class="second">
<p>© The Gym, 2017</p></footer>
<!---End Waypoints Delayed Animation --->
</section>
</body>
</html>
答
尝试折叠所有嵌套的标签,看看你留下任何未正常关闭。
答
你把所有的意见错了,它的:<!-- COMMENT -->
,不<!--- --->
如何做到这一点?通过手动点击标签旁边的每个单独的箭头?如下面的截图所示,当我为div“inner-wrapper”执行此操作时,它显示红色的关闭div标签(实际上,我无法在此处粘贴屏幕截图 - 不知道为什么)。为什么?必须有结束标签。 –
是的,这正是你如何做到的。我正在手机上查看你的代码,但在我看来,你的内包装div永远不会关闭。它在哪里显示红色的结束标记?它是在身体的结束标记之前吗?因为那就是它应该展示的地方,我想。如果在body的结束标记之前没有结束标记,请尝试添加一个,看看错误是否消失。 – Sorix
对不起 - 另一个海报指出没有内包装结束标签,所以当我插入它(在评论“结束内包装”之前),这是它显示在红色的地方。但我按照你的建议做了,我把它放在身体标记之前,现在所有红色标记都消失了。奇怪的是,在视频中,它显示了一个关闭部分标记,后面紧跟在尾部之前的“end inner-wrapper here”注释之前的关闭div标记。不幸的是,当我在实时预览中查看页面时,第一个“三分之一”类部分不显示(在“幻灯片”div和旁边)。 –