Web前端开发课堂笔记

只想睡觉真君 · 發表於 2026-3-14 11:58:00

Web前端开发课堂笔记

一、工具准备

1.1 开发工具：HBuilder

操作：新建项目 → 选择 Web项目。
项目存放路径：D:\web\（如果该文件夹不存在，请先新建）。
项目命名：建议使用自己的英文名或姓名全拼。

1.2 浏览器环境

核心要求：安装 谷歌浏览器（Chrome）。
测试原则：
1. 先保证代码在 Chrome 上正常显示（行业标准）。
2. 再去测试火狐（Firefox）等其他浏览器。
3. 不建议使用 IE 等老旧浏览器进行开发测试。

二、行业背景与 HTML5 的重要性

2.1 HTML5（H5）的革命性意义

硬件变革：从“PC 互联网”时代（在电脑上运行）跨越到“移动互联网”时代（在手机上浏览操作）。
统一标准：解决了过去标准不统一的问题（如淘汰了 Flash 插件）。
原生支持：H5 自身就支持视频、音频、动画（Canvas 等），无需安装额外插件，是重要的里程碑。

2.2 版本的更迭（了解即可）

第一代 HTML 诞生于 1990 年代（距今约 30 多年）。
关于 HTML5 版本的题目需要记忆，因为它解决了跨平台、跨浏览器的问题，增加了新特性。
HTML5之前的HTML标准版本是HTML4.01

三、新建项目后的基础知识

3.1 新建项目后的默认结构

通常会默认生成 index.html 等文件。
新建项目后默认有css，js，img文件夹，和index.html文件

3.2 认识 HTML 标记/标签

定义：凡是由 < 和 > 括起来的尖括号内容，就是一个标记（也叫标签）。
课堂练习：分析下面这 10 行代码中的 5 个标记。
- 示例标记：<html>、<head>、<meta>、<title>、<body>。
- 注意：<!DOCTYPE html> 比较特殊，它不是 HTML 标签。

3.3 标准 HTML 文件的文档头

第一行必须写：
```
<!DOCTYPE html>
```
作用：这行代码是写给浏览器的“声明”，告诉浏览器：“我这份文件是用 HTML5 写的，请你按照 HTML5 的标准去解析翻译。”
生活化理解：就像你跟老外对话前，先声明“我要开始说英语了，请你按英语来听”。

3.4 HTML 文件的结构关系

类比《红楼梦》人物关系：
- 就像复杂的家族图谱一样，HTML 标签之间也有层级关系（父子、兄弟）。
- <html> 是最大的根节点，相当于“贾母”。
- 它下面通常有两个“孩子”：<head> 和 <body>。
如何判断关系：
- 看缩进。缩进越多的，是子级；缩进相同的，是同级（兄弟）。

结构图示：

<!DOCTYPE html>    <!-- 这不是标签，是声明 -->
<html>      <!-- 根节点（贾母） -->
    <head>    <!-- 第一个孩子 -->
        <meta>    <!--head第一个孩子-->
        <title></title>  <!--head第二个孩子-->
    </head>
    <body>    <!-- 第二个孩子 -->
        <!-- 页面可见内容 -->
    </body>
</html>

四、代码分离操作

1、为什么要进行代码分离？

遵循W3C标准：W3C是国际中立性技术标准组织，推荐将HTML、CSS、JavaScript分离。
好处：代码更清晰、易维护、符合最佳实践。

2、分离CSS样式

定位样式代码：
- 在HTML文件中找到<style>标签及其内容
- 可使用HBuilder的代码折叠功能，将这部分代码折叠起来，便于观察整体结构。
剪切样式：
- 选中所有样式代码，剪切（Ctrl+X）。
新建CSS文件：
- 在项目文件夹中右键 → 新建 → CSS文件。
- 命名示例：style.css。
粘贴并保存：
- 将剪切的样式代码粘贴到style.css中。
- 立即保存（Ctrl+S）。
链接CSS到HTML：
- 回到HTML文件，在原来<style>的位置使用<link>标签引入外部CSS：
```
<link rel="stylesheet" href="style.css">
```
- 注意：如果已有多个CSS文件，需选择正确的文件（如style.css）。
保存HTML并预览：
- 保存HTML文件，刷新浏览器，确认样式正常显示。
- 测试：可临时注释掉<link>行，刷新页面看样式是否消失，验证分离成功。

3、分离JavaScript脚本

定位脚本代码：
- 找到<script>标签及其内部JavaScript代码（也是30多行）。
剪切脚本：
- 选中所有JavaScript代码，剪切。
新建JS文件：
- 在项目文件夹中右键 → 新建 → JavaScript文件。
- 命名示例：script.js。
粘贴并保存：
- 将剪切的代码粘贴到script.js中。
- 立即保存。
链接JS到HTML：
- 回到HTML文件，在原来<script>的位置使用<script src>标签引入外部JS：
```
<script src="script.js"></script>
```
- 注意选择正确的JS文件（如script2.js？根据实际命名选择）。
保存HTML并预览：
- 保存HTML文件，刷新浏览器，功能应保持不变。

4、最终效果

HTML文件变得非常简洁，只保留结构骨架和外部文件链接。
所有样式集中在.css文件，所有脚本集中在.js文件。
浏览器预览效果与分离前完全一致。

来源：https://www.cnblogs.com/jayl12/p/19717241

Web前端开发课堂笔记

Web前端开发课堂笔记

一、 工具准备

1.1 开发工具：HBuilder

1.2 浏览器环境

二、 行业背景与 HTML5 的重要性

2.1 HTML5（H5）的革命性意义

2.2 版本的更迭（了解即可）

三、 新建项目后的基础知识

3.1 新建项目后的默认结构

3.2 认识 HTML 标记/标签

3.3 标准 HTML 文件的文档头

3.4 HTML 文件的结构关系

四、代码分离操作

1、为什么要进行代码分离？

2、分离CSS样式

3、分离JavaScript脚本

4、最终效果

瀏覽過的版塊

一、工具准备

二、行业背景与 HTML5 的重要性

三、新建项目后的基础知识