显然，我的html没有根本性的错误，因为它在浏览器中呈现。是否有任何可以提供帮助的分享html5向导？
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Oryx Technologies</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/normalize.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/bootstrap.min.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/owl.carousel.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/owl.theme.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/animate.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/slicknav.min.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/responsive.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<video poster="" id="bgvid" autoplay muted loop>
<source src="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/Jon%20Hopkins%20-%20Immunity%20(Rowbyte%20Plexus).mp4.webm" type="video/webm">
<source src="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/Jon%20Hopkins%20-%20Immunity%20(Rowbyte%20Plexus).mp4" type="video/mp4">
</video>
<section class="intro" id="home">
<div class="menu-bar menu">
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="logo">
<a href=""><im src="images/logo.png" alt="" title="" height="40px" style="float: left;"/></a>
</div>
</div>
<div class="col-md-8">
<ul class="list-unstyled" id="main-menu">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#features">Facebook</a></li>
<li><a href="#testimonial">Twitter</a></li>
<li><a href="#screenshots">LinkedIn</a></li>
<li><a href="#contact">Website</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Menu Ends here -->
<div class="intro-content">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 intro-image">
<img src="images/logo.png" alt="" />
</div>
<div class="col-md-8 col-sm-6 col-xs-12 intro-texts">
<h1>Welcome to Oryx Technologies Intranet Portal</h1>
<p>Explore Your Posibilities | Run With Oryx</p>
<p>Collabrative | Intelligent | Secure</p>
<ul class="list-unstyled">
<li><a href="">Human Resources</a></li>
<li><a href="https://oryxtech.sharepoint.com/Finance/Pages/default.aspx">Finance</a></li>
<li><a href="">Sales </a></li>
<li><a href="">Technology </a></li>
<li><a href="">Operations </a></li>
<li><a href="">Marketing </a></li>
<li><a href="">Projects </a></li>
<li><a href="">Investors </a></li>
<li><a href="">Business Partners </a></li>
<li><a href="">Technology Partners</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Intro Section Ends -->
<section class="features" id="features">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 wow fadeIn">
<h2>Employee Self Services</h2>
</div>
<div class="col-md-3 col-sm-6 wow fadeInLeft">
<div class="single-service">
<p style="background:#EE3867;"><i class="fa fa-pencil"></i></p>
<h3>Submit a Leave Application</h3>
<p><a href="http://www.w3schools.com/html/">Click Me</a></p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInLeft">
<div class="single-service">
<p style="background:#3DB39D;"><i class="fa fa-pencil"></i></p>
<h3>Claim an Expense</h3>
<p><a href="http://www.w3schools.com/html/">Click Me</a></p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInRight">
<div class="single-service">
<p style="background:#57C7ED;"><i class="fa fa-pencil"></i></p>
<h3>Follow a Request</h3>
<p><a href="http://www.w3schools.com/html/">Click Me</a></p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInRight">
<div class="single-service">
<p style="background:#324E5C;"><i class="fa fa-pencil"></i></p>
<h3>Submit a Petty Cash Request</h3>
<p><a href="http://www.w3schools.com/html/">Click Me</a></p>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section Ends Here -->
<section class="app-screenshot">
<div class="container" id="screenshots">
<div class="row">
<div class="col-md-12 wow fadeInUp">
<h2>Case Studies</h2>
</div>
<div id="owl-example" class="owl-carousel col-md-12 wow fadeInUp">
<div><img src="images/casesstdtg.png" alt="" /></div>
<div><img src="images/ateis.png" alt="" /></div>
<div><img src="images/wadi.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
</div>
</div>
</div>
</section>
<!--Other Features Ends Here-->
<!-- App Screenshot Ends Here-->
<!--Testimonial Section Ends Here-->
<section class="clients-logo" id="clients">
<div class="container">
<div class="row">
<div id="clients-logo" class="owl-carousel col-md-12 wow slideInRight">
<div><img src="images/linkedin.png" alt="" /></div>
<div><img src="images/twitter.png" alt="" /></div>
<div><img src="images/facebook.png" alt="" /></div>
<div><img src="images/facebook.png" alt="" /></div>
<div><img src="images/skype.png" alt="" /></div>
<div><img src="images/google-plus.png" alt="" /></div>
</div>
</div>
</div>
</section>
<!-- Clients Logo Section Ends Here -->
<!-- Price List Section Ends Here -->
<!-- About App Section Ends Here -->
<!-- Get App Section Ends Here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-example").owlCarousel({
items : 4,
navigation : false,
navigationText : ["prev","next"],
paginationNumbers: true
});
$("#testimonial-carousel").owlCarousel({
items : 1,
itemsCustom : true,
itemsDesktop : [1199,1],
itemsDesktopSmall : [980,1],
itemsTablet: [768,1],
itemsTabletSmall: true,
itemsMobile : [479,1],
singleItem : true,
itemsScaleUp : true,
responsive : true
});
$("#clients-logo").owlCarousel({
items : 6,
paginationNumbers : false,
navigation : false,
});
});
</script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
// target element id
var id = $(this).attr('href');
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $(id).offset().top;
// animated top scrolling
$('body, html').animate({scrollTop: pos}, 1000);
});
</script>
<script type="text/javascript">
// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').css('background','#000').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
<script src="js/jquery.slicknav.min.js"></script>
<script>
$(function(){
$('#main-menu').slicknav();
});
</script>
</body>
</html>