Web前端开发课堂笔记

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样式

  1. 定位样式代码：

    • 在HTML文件中找到<style>标签及其内容
    • 可使用HBuilder的代码折叠功能，将这部分代码折叠起来，便于观察整体结构。

  2. 剪切样式：

    • 选中所有样式代码，剪切（Ctrl+X）。

  3. 新建CSS文件：

    • 在项目文件夹中右键 → 新建 → CSS文件。
    • 命名示例：style.css。

  4. 粘贴并保存：

    • 将剪切的样式代码粘贴到style.css中。
    • 立即保存（Ctrl+S）。

  5. 链接CSS到HTML：

    • 回到HTML文件，在原来<style>的位置使用<link>标签引入外部CSS：
      <link rel="stylesheet" href="style.css">
    • 注意：如果已有多个CSS文件，需选择正确的文件（如style.css）。

  6. 保存HTML并预览：

    • 保存HTML文件，刷新浏览器，确认样式正常显示。
    • 测试：可临时注释掉<link>行，刷新页面看样式是否消失，验证分离成功。

3、分离JavaScript脚本

  1. 定位脚本代码：

    • 找到<script>标签及其内部JavaScript代码（也是30多行）。

  2. 剪切脚本：

    • 选中所有JavaScript代码，剪切。

  3. 新建JS文件：

    • 在项目文件夹中右键 → 新建 → JavaScript文件。
    • 命名示例：script.js。

  4. 粘贴并保存：

    • 将剪切的代码粘贴到script.js中。
    • 立即保存。

  5. 链接JS到HTML：

    • 回到HTML文件，在原来<script>的位置使用<script src>标签引入外部JS：
      <script src="script.js"></script>
    • 注意选择正确的JS文件（如script2.js？根据实际命名选择）。

  6. 保存HTML并预览：

    • 保存HTML文件，刷新浏览器，功能应保持不变。

4、最终效果

  • HTML文件变得非常简洁，只保留结构骨架和外部文件链接。
  • 所有样式集中在.css文件，所有脚本集中在.js文件。
  • 浏览器预览效果与分离前完全一致。
posted @ 2026-03-14 11:58  liu123wz  阅读(0)  评论(0)    收藏  举报