HTML文件内嵌jQuery代码无法执行，独立JS文件也运行失败问题求助

故障排查及修复方法 #

• 核心故障原因：jQuery依赖未正确加载
  你当前使用的是相对路径引入jquery-3.3.1.js，如果该jQuery文件和当前HTML文件没有存放在同一目录下，浏览器会加载失败，导致全局$变量未定义，后续的jQuery入口函数将完全无法执行。
  你可以先插入原生JS测试语句验证基础JS执行能力，确认是不是jQuery的问题：

document.addEventListener('DOMContentLoaded', function() {
  alert("原生JS测试正常弹出")
})

如果上述代码可以正常弹出弹窗，即可100%确认是jQuery加载失败导致的问题，你需要核对本地jQuery文件的实际存放路径，保证引入路径和实际路径一致即可。

• 潜在异常点：HTML结构不规范
  当前代码缺失根<html>标签，meta charset放在了JS引入之后，link标签缺失rel="stylesheet"属性，这些不规范写法在部分浏览器下可能触发解析异常，间接导致脚本不执行。

修复后参考代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 请核对路径和本地jQuery文件实际存放路径一致 -->
  <script type="text/javascript" src="jquery-3.3.1.js"></script>
  <script type="text/javascript">
    $(function() {
      alert("Hello World");
    });
  </script>
  <link rel="stylesheet" href="../style/Home.css">
</head>
<body>
  <input type="text" name="username" placeholder="Username" id="user" />
  <input type="password" name="password" placeholder="password" id="pass" />
  <input type="submit" id="submitButton">
</body>
</html>

内容的提问来源于stack exchange，提问作者oas242