web-dev-qa-db-ja.com

「Uncaught SyntaxError:最初の行の予期しないトークン<」

私はこの質問が何度も聞かれたことを知っていますが、私の問題の解決策を見つけることができません。

ローカルマシンではすべて問題ありませんが、サーバー(000webhost)にファイルをアップロードすると、6つのエラーがあり、これらのエラーの説明は

キャッチされていないSyntaxError:予期しないトークン<

前もって感謝します。

私のウェブサイトのドメイン

これは私のHTMLです

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="Welcome to my personal web site (web presentation). My name is Aleksandar Mitrović. I am frontend developer from Belgrade, Serbia.
        I am interested in web development. My occupation is Professional Electrical and Computer Engineer.">
    <meta name="keywords" content="Web presentation, Personal web site, Licni sajt, Frontend developer, Web sajt, Web developmenta, Personal web presentation">
    <meta name="author" content="Aleksandar Mitrović">

    <title>Personal web presentation | Aleksandar Mitrović</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

    <!-- HTML5 shim and Respond.js for 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]-->

    <!--Favicons-->
    <link rel="Apple-touch-icon" sizes="57x57" href="/Apple-touch-icon-57x57.png">
    <link rel="Apple-touch-icon" sizes="60x60" href="/Apple-touch-icon-60x60.png">
    <link rel="Apple-touch-icon" sizes="72x72" href="/Apple-touch-icon-72x72.png">
    <link rel="Apple-touch-icon" sizes="76x76" href="/Apple-touch-icon-76x76.png">
    <link rel="Apple-touch-icon" sizes="114x114" href="/Apple-touch-icon-114x114.png">
    <link rel="Apple-touch-icon" sizes="120x120" href="/Apple-touch-icon-120x120.png">
    <link rel="Apple-touch-icon" sizes="144x144" href="/Apple-touch-icon-144x144.png">
    <link rel="Apple-touch-icon" sizes="152x152" href="/Apple-touch-icon-152x152.png">
    <link rel="Apple-touch-icon" sizes="180x180" href="/Apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/Android-chrome-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/manifest.json">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-TileImage" content="/mstile-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <!--End of favicons-->

    <!--Nav scroll-->
    <script src="js/navScroll.js"></script>
    <!--End nav scroll-->

    <!--Section scroll-->
    <script src="js/sectionScroll.js"></script>
    <!--End section scroll-->

    <!--Toggle button on click change FA icon scroll-->
    <script src="js/ToggleButtonChanges.js"></script>
    <!--End of  Toggle button on click change FA icon scroll-->

    <!--Contact map-->
    <script src="js/contactMap.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
    <!--End contact map-->

    <!--Aminations-->
    <link rel="stylesheet" href="animation/animate.css">
    <!--End of animations-->

    <!--Font awesome-->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <!--End of font awesome-->

    <!--Style.css-->
    <link rel="stylesheet" href="stylesheets/screen.css">
    <!--End of style.css-->


</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <i class="fa fa-bars" aria-hidden="true"></i>

                </button>
                <a class="navbar-brand" href="#hero"><img src="img/logo.png" width="110" height="23"></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#hero">Home <span class="sr-only">(current)</span></a></li>
                    <li><a href="#aboutMe">About us</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#experience">Skills & Experience</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <div class="hero" id="hero">
        <div class="container-fluid">
            <video autoplay loop class="hero-video" poster="img/hero.jpg">
                <source src="video/Hello-World.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
                <source src="video/Hello-World.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
            </video>

            <div class="row">
                <div class="hero-content animated fadeIn">
                    <h1 class="hero-content-title">Welcome to my web presentation</h1>
                    <h2 class="hero-content-subTitle">My name is Aleksandar Mitrović, I'm a <span>frontend developer</span> living in Belgrade, Serbia.</h2>
                </div>
            </div>

            <div class="row">
                <a href="#aboutMe" class="hero-scroll animated fadeIn">
                    <i class="fa fa-angle-double-down fa-2x bounce" aria-hidden="true"></i>
                    Scroll down
                </a>
            </div>
        </div>
    </div>

    <section id="aboutMe" class="aboutMe">
        <div class="container">

            <div class="row">
                <div class="sectionTitle">
                    About me
                </div>
            </div>

            <div class="row">
                <div class="aboutMe-image">
                    <img src="http://s7.postimg.org/54pch8kyz/image.jpg">
                </div>
            </div>

            <div class="row">
                <div class="aboutMe-content">
                    <p>I am a student of final year school of electrical engineering and computer science of applied studies in Belgrade, majoring in new computer technology.</p>
                    <p>Occupation: Professional Electrical and Computer Engineer.</p>
                    <p>I finished middle electrical school in Belgrade.</p>
                    <p>I am a person with adventurous spirit and trips for me represent a kind of hobby.</p>
                    <p>Besides programming I have a great interest for history and social sciences.</p>
                    <p>In my free time I prefer drawing.</p>
                    <p>Knowledge of English and German language.</p>
                    <p>Active driver B category.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="portfolio" id="portfolio">
        <div class="container-fluid">

            <div class="row">
                <div class="sectionTitle sectionTitle-color--white">
                    Portfolio
                </div>
            </div>

            <div class="row">
                <a href="http://sf1group.staging.creitiveapps.com/sr" target="_blank">
                    <div class="col-sm-4 portfolio-article">
                        <img src="img/sf1group.png">
                        <div class="portfolio-article-title">
                            SF1 Group
                        </div>
                    </div>
                </a>
                <a href="http://www.gradjevinar.rs/sr" target="_blank">
                    <div class="col-sm-4 portfolio-article">
                        <img src="img/gradjevinar.png">
                        <div class="portfolio-article-title">
                            Gradjevinar
                        </div>
                    </div>
                </a>
                <a href="http://globtour.staging.creitiveapps.com/hr" target="_blank">
                    <div class="col-sm-4 portfolio-article">
                        <img src="img/globtour.png">
                        <div class="portfolio-article-title">
                            Globtour
                        </div>
                    </div>
                </a>
                <a href="http://jadranekspres.staging.creitiveapps.com/en" target="_blank">
                    <div class="col-sm-4 portfolio-article">
                        <img src="img/jadranekspres.png">
                        <div class="portfolio-article-title">
                            Jadranekspres
                        </div>
                    </div>
                </a>
                <a href="#portfolio">
                    <div class="col-sm-4 portfolio-article">
                        <img src="http://www.snopes.com/wordpress/wp-content/uploads/2016/04/the-farm-below-the-mountain.jpg">
                        <div class="portfolio-article-title">
                        </div>
                    </div>
                </a>
                <a href="#portfolio">
                    <div class="col-sm-4 portfolio-article">
                        <img src="http://images.8tracks.com/cover/i/000/933/114/44813.original-6904.jpg?rect=128,0,768,768&q=98&fm=jpg&fit=max">
                        <div class="portfolio-article-title">
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <section class="experience" id="experience">
        <div class="sectionTitle">
            Skills & Experience
        </div>

        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
                    <div id="skill1" class="experience-skill-circle"></div>
                    <h2 class="experience-skill-title">Html5 / Bootstrap</h2>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
                    <div id="skill2" class="experience-skill-circle"></div>
                    <h2 class="experience-skill-title">Css3 / Sass</h2>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
                    <div id="skill3" class="experience-skill-circle"></div>
                    <h2 class="experience-skill-title">Javascript / Jquery</h2>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
                    <div id="skill4" class="experience-skill-circle"></div>
                    <h2 class="experience-skill-title">Php / Mysql</h2>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
                    <div id="skill5" class="experience-skill-circle"></div>
                    <h2 class="experience-skill-title">Wordpress</h2>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
                    <div id="skill6" class="experience-skill-circle"></div>
                    <h2 class="experience-skill-title">Photoshop</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 experience-content">
                    <h1>Internship for Frontend developer ( 4 months )</h1>
                    <p>I had internship for frontend developer in digital agency "Creitive" in Belgrade.</p>

                    <p>On internship i was working with:</p>
                    <ul>
                        <li>-HTML5 ( BOOTSTRAP ) / CSS3 ( SASS, COMPASS, BEM Methodology )</li>
                        <br>
                        <li>-JAVASCRIPT (JQUERY)</li>
                        <br>
                        <li>-PHP</li>
                    </ul>

                    <p>Framework i was working with:</p>
                    <ul>
                        <li>-PHP FRAMEWORK LARAVEL</li>
                    </ul>

                    <p>OS i was working with:</p>
                    <ul>
                        <li>-LINUX</li>
                    </ul>

                    <p>Version control system i was working with:</p>
                    <ul>
                        <li>-GIT</li>
                    </ul>

                </div>
            </div>
         </div>
    </section>

    <section class="contact" id="contact">
        <div class="container">

            <div class="row">
                <div class="sectionTitle">
                    Contact
                </div>
            </div>

            <div id="map" class="col-sm-12"></div>

            <div class="row">
                <div class="contact-info">

                    <a href="tel:+381656761810" class="contact-info-link">
                        <i class="fa fa-mobile" aria-hidden="true"></i> +381 65 6761 810
                    </a>
                    <a href="mailto:[email protected]" class="contact-info-link">
                        <i class="fa fa-envelope" aria-hidden="true"></i> [email protected]
                    </a>
                </div>

                <form name="contactform" method="post" action="send_form_email.php" class="form" id="forms">
                    <div class="col-sm-6">
                        <label for="name">Full name</label>
                        <input type="text" id="name" name="name" maxlength="50" size="50px" min="5" required>

                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" required>

                        <label for="phone">Phone</label>
                        <input type="number" id="phone" name="phone" size="50">
                    </div>

                    <div class="col-sm-6 ">
                        <label for="comment">Comment</label>
                        <textarea id="comment" name="comment" minlength="5" maxlength="1000" cols="25" required></textarea>
                        <input type="submit" value="Send" class="btn btn-contact">
                    </div>
                </form>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="row">
                <div class="footer-logo">
                    <a href="#hero"><img src="img/logo.png" width="110" height="23"></a>
                </div>
            </div>
            <div class="row">
                <div class="footer-social">
                        <a href="https://www.facebook.com/tadija.stefanovic.5" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                        <a href="https://www.linkedin.com/in/aleksandar-mitrovic-155590b6?trk=nav_responsive_tab_profile_pic" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                    </div>
                </div>
            <div class="row">
                <div class="footer-credits">
                        Copyright 2016 Aleksandar Mitrović
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

    <!-- Script for circles percents on section skills & experiences  -->
    <script src="js/circlePercentProgress.js"></script>
    <!-- End of script for circles percents on section skills & experiences  -->

    <!-- Script for options of circles percents on section skills & experiences  -->
    <script src="js/circlePercentProgressOptions.js"></script>
    <!-- End of script for options for circles percents on section skills & experiences  -->

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
6
Aleksandar

それは簡単です:あなたのコードにはたくさんの壊れたリンクがあります。たとえば、js/navScroll.jsというスクリプトをインクルードしようとしていますが、ファイルは実際にはjs/navscroll.jsという名前です

リンクが壊れると、000webhostの404エラーページへのリダイレクトが発生します。これはHTMLドキュメントであるため、<で始まります。

ブラウザは、CSSまたはJSファイルを期待して、予期しないトークンについて文句を言います。

26
Chris G