对于这个 JavaScript，"rel" 应该是什么？

Question

在这里的预览中一切正常，但是当我在任何其他软件中使用运行时，JavaScript 却没有 link - 我知道这是因为两个事情：

不管有没有 JavaScript 被 linked
它只是没有按预期执行 - JavaScript 旨在使当您单击菜单按钮时所有项目都出现，但是 none这正在这里发生。

我试过制作rel="script"，但没有任何效果。

var open = false;

function Drop(n) {
 var i;
 if (open == false) {
  for (i = n; i < 5; i++) {
   Drp(i)
  }
  open = true
 } else if (open == true) {
  for (i = n; i < 5; i++) {
   Cls(i)
  }
  open = false
 }
}

function Drp(n) {
 var elem = document.getElementsByClassName("menu-con")[n];
 var pos = -1 * window.innerHeight - n * 100;
 var id = setInterval(frame, 5);

 function frame() {
  if (pos >= -10) {
   clearInterval(id);
   elem.style.top = 0 + 'px';
  } else {
   pos += 10;
   elem.style.top = pos + 'px';
  }
 }
}

function Cls(n) {
 var elems = document.getElementsByClassName("menu-con")[n];
 var poss = 0;
 var ids = setInterval(frames, 5);

 function frames() {
  if (poss <= -1 * window.innerHeight) {
   clearInterval(ids);
   elems.style.top = -1 * window.innerHeight + 'px';
  } else {
   poss += -7 - n * 2;
   elems.style.top = poss + 'px';
  }
 }
}

* {box-sizing: border-box;max-width: 100%;font-family: 'Gruppo', cursive;}
html,body {height: 100%;margin: 0;padding: 0;background:rgb(240,240,240)}

.menu-icon {width: 50px;height: 50px;position: fixed;top: 0;right: 0;margin: 10px 15px;transform:scale(0.8);padding: 0;cursor: pointer;z-index:20}
.menu-bar {width: 50px;height: 5px;background: rgb(190,190,190);position: absolute;transition: all 0.3s;}
.menu-bar1 {margin-top: 9px}
.menu-bar2 {margin-top: 23px}
.menu-bar3 {margin-top: 37px}
.menu-icon.hover .menu-bar1 {-webkit-transform: rotate(45deg) scaleX(0.7);margin-top: 22px;}
.menu-icon.hover .menu-bar2 {opacity: 0}
.menu-icon.hover .menu-bar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;}

.menu {width: 100%;height: 100%;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.menu-con {-webkit-flex-grow: 1;flex-basis: 0;flex-grow: 1;display: -webkit-flex;display: flex;-webkit-justify-content:space-around;position:relative;top:-100%;transition:all 0.5s}
.menu-con p:before {content: ""; display: block;position:absolute;top:0;left:0;z-index:1;width:100%;height: 100%;opacity: 1;background: rgba(0,0,0,0);-webkit-transition: all 0.5s;transition: all 0.5s;}
.menu-con:hover p:before {background: rgba(0,0,0,0.2)}
.menu-con p {height:20px;-webkit-align-self:center;color:white;font-size:25px;z-index:2;cursor:pointer}
@media screen and (max-width: 600px) {.menu-con {min-width:50%}}
@media screen and (max-width: 350px) {.menu-con {min-width:100%}}

<link href=style.css rel="stylesheet">
<link href="main.js">
<div class="menu-icon" onclick="this.classList.toggle('hover');Drop(0)">
 <div class="menu-bar menu-bar1"></div>
 <div class="menu-bar menu-bar2"></div>
 <div class="menu-bar menu-bar3"></div>
</div>
<div class="menu">
 <div class="menu-con" style="background:IndianRed;"><p>HOME</p></div>
  <div class="menu-con" style="background:rgb(160,160,170);"><p>GALLERY</p></div>  
  <div class="menu-con" style="background:mediumseagreen;"><p>PRODUCTS</p></div> 
  <div class="menu-con" style="background:teal;"><p>ABOUT</p></div> 
  <div class="menu-con" style="background:rgb(70,70,70);"><p>CONTACT</p></div>
</div>

Answer 1

您可以通过以下方式包含 JavaScript 文件 - 这些示例展示了如何在 HTML4 和 HTML5 中使用 <script> 元素导入脚本（Script element - Basic usage):

<!-- HTML4 -->
<script type="text/javascript" src="javascript.js"></script>

<!-- HTML5 -->
<script src="main.js"></script>

我的建议是使用以下 HTML5 一个：

<script src="main.js"></script>

The HTML script element is used to embed or reference executable code; this is typically used to embed or refer to JavaScript code.

来源：The Script element

Link 用于样式表，您可以在这里进一步阅读： HTML link Tag

Answer 2

要包含 js，您必须使用

<script type="text/javascript" src="main.js"></script>

对于这个 JavaScript，"rel" 应该是什么？

What should the "rel" be for this JavaScript?

javascript

html

css

hyperlink

rel