在HTML文件中CSS文件与JS文件如何引用

注释代码  

<!-- 注释内容 -->
 

一、引用外部 CSS 文件

<!-- 1. 同一目录下的CSS文件（若CSS和HTML在同一文件夹） -->
<link rel="stylesheet" href="style.css">

<!-- 2. 子目录中的CSS文件（如css文件夹下的style.css） -->
<link rel="stylesheet" href="css/style.css">

<!-- 3. 上级目录中的CSS文件（如从index.html引用../other/demo.css） -->
<link rel="stylesheet" href="../other/demo.css">

<!-- 4. 绝对路径（如网络地址） -->
<link rel="stylesheet" href="https://example.com/style.css">

关键属性说明：

  • rel="stylesheet"：固定值，表明当前链接的是样式表文件。
  • href：                   指定 CSS 文件的路径（必填），支持相对路径或绝对路径。

 

二、引用外部 JS 文件

<!-- 方式1：放在<body>结束标签前（推荐，确保DOM加载后执行） -->
<body>
  <!-- 页面内容 -->
  <script src="JS文件的路径"></script>
</body>

<!-- 方式2：放在<head>中（需配合defer/async属性，避免阻塞渲染） -->
<head>
  <script src="JS文件的路径" defer></script>  <!-- 或 async -->
</head>

关键属性说明：

  • src：指定 JS 文件的路径（必填），支持相对路径或绝对路径（同 CSS 的路径规则）。
  • defer（可选）：脚本会并行下载，但会在 HTML 解析完成后按顺序执行（适合依赖 DOM 或有顺序要求的脚本）。
  • async（可选）：脚本会并行下载，下载完成后立即执行（不保证顺序，适合独立脚本，如统计代码）。

 

<!-- 1. 子目录中的JS文件（如js文件夹下的main.js） -->
<script src="js/main.js"></script>

<!-- 2. 上级目录中的JS文件 -->
<script src="../lib/utils.js"></script>

<!-- 3. 网络地址的JS文件 -->
<script src="https://example.com/jquery.js"></script>

<!-- 4. 带defer的头部引用（确保顺序执行） -->
<head>
  <script src="js/a.js" defer></script>
  <script src="js/b.js" defer></script>  <!-- 会在a.js之后执行 -->
</head>

注意事项：

  • CSS 的 <link> 标签必须放在 <head> 中，否则可能导致页面短暂 “无样式”。
  • JS 的 <script> 若不使用 defer/async，建议放在 <body> 结束前，避免脚本执行时 DOM 未加载完成（导致无法操作元素）。

 

链接跳转-跳转实现页面切换

方式 1：使用 <a> 标签（推荐，最简单）

<!-- 注册按钮（核心：通过a标签跳转） -->
    <a href="register.html" class="btn register-btn">没有账号？点击注册</a>

方式 2：使用 <button> 标签 + JavaScript

<!-- 注册按钮（通过button+JS跳转） -->
<button class="btn register-btn" onclick="goToRegister()">没有账号？点击注册</button>

<script>
  // 跳转函数：点击按钮后执行
  function goToRegister() {
    window.location.href = "register.html"; // 跳转到注册页面
  }
</script>
  • 方式 1 通过 <a> 标签的 href 属性直接指定目标页面路径，是 HTML 原生的跳转方式，简单高效。
  • 方式 2 通过按钮的 onclick 事件触发 JavaScript 函数，利用 window.location.href 改变当前页面的 URL，实现跳转（适合需要在跳转前添加额外逻辑的场景，比如验证）。
  •  

 

posted @ 2025-11-18 12:08  麦麦提敏  阅读(18)  评论(0)    收藏  举报