Web开发新手入门：如何引入CSS与JS文件及推荐文件结构

一、引入CSS文件 #

直接用<link>标签放在HTML的<head>标签里即可，这是标准且通用的做法。示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个页面</title>
  <!-- 引入外部CSS文件 -->
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

• rel="stylesheet"是必填属性，用来告诉浏览器这是样式文件；
• href填写CSS文件的相对路径：如果CSS和HTML在同一目录，直接写文件名（比如href="main.css"）；如果CSS放在styles文件夹里，就写styles/main.css。

二、引入JavaScript文件 #

新手推荐两种写法，能有效避免DOM未加载完成就执行JS导致的元素找不到问题：

1. 放在<body>末尾（最稳妥） #

把<script>标签放在</body>结束标签的前一行，确保页面所有元素加载完成后再执行JS：

<body>
  <!-- 页面内容 -->
  <div id="demo">Hello World</div>

  <!-- 引入外部JS文件 -->
  <script src="scripts/main.js"></script>
</body>

2. 放在<head>里加defer属性 #

如果一定要把JS放在<head>里，必须加上defer属性，它会让浏览器等DOM渲染完成后再执行JS：

<head>
  <meta charset="UTF-8">
  <title>我的第一个页面</title>
  <script src="scripts/main.js" defer></script>
</head>

新手别乱用async，它会让JS下载完成后立刻执行，可能打断DOM渲染，容易引发意外问题。

三、适合新手的简洁项目结构 #

初期别搞过于复杂的结构，先从清晰易维护的基础结构入手，示例：

my-first-project/
├── index.html          # 主页面文件（必须放在根目录，方便直接访问）
├── styles/             # 专门存放CSS的文件夹
│   └── main.css        # 主样式文件，所有基础样式都写在这里
├── scripts/            # 专门存放JS的文件夹
│   └── main.js         # 主脚本文件，所有基础逻辑都写在这里
└── assets/             # 静态资源文件夹（图片、字体、图标等）
    ├── images/
    └── fonts/

• 后续项目变大后，可以再细分：比如styles里新增components/存放按钮、卡片这类组件的样式；scripts里新增utils/存放格式化时间、字符串处理这类工具函数。
• 文件名统一用小写+短横线分隔（比如header-style.css），别用驼峰或大写，符合Web开发通用规范。

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