HTML,CSS与JS前端基础课堂笔记

HTML、CSS与JS 前端基础入门笔记

---

目录

• 一、三者核心作用
• 二、三者关系与类比
• 三、关键知识点补充
• 四、极简实践示例
• 五、总结

---

一、三者核心作用

1. HTML：网页骨架

• 全称：HyperText Markup Language（超文本标记语言）
• 作用：定义页面结构与内容（标题、段落、按钮、图片等）
• 文件后缀：.html / .htm（二者无本质区别，.htm 为早期系统遗留格式）

2. CSS：页面样式

2. CSS：页面美化

• 全称：Cascading Style Sheets（层叠样式表）

• 作用：控制页面样式与布局（颜色、字体、边距、排版等）

• 引入方式：
3. JavaScript（JS）：页面交互

• 作用：实现页面动态交互（实时时间、表单验证、点击反馈等）

• 引入方式：

• 全称：Cascading Style Sheets（层叠样式表）
• 作用：控制页面外观与布局（颜色、字体、边距、排版等）
• 引入方式：

<link rel="stylesheet" type="text/css" href="css/style.css">
二、三者关系类比
语言 定位 类比 
HTML 结构层 人体骨骼 
CSS 表现层 皮肤与穿搭 
JS 行为层 动作与交互 

三、关键知识点

1. .htm 与 .html：无功能差异，现代开发推荐使用 .html

2. 引入外部文件时，使用相对路径（如 css/style01.css）

3. 核心分工：HTML 搭结构 → CSS 做美化 → JS 加交互
四、总结

• HTML 决定页面「有什么」

• CSS 决定页面「长什么样」

• JS 决定页面「能做什么」

• 三者协作，构成完整的前端页面