【前端】【HTML5+CSS3+JS】学习笔记总结-EW帮帮网

HTML5、CSS3 和 JavaScript（JS）是构建现代网页与 Web 应用的三大核心技术，三者分工明确又协同工作，共同实现网页的结构、样式与交互功能。

一、三者的核心作用：各司其职

1. HTML5：网页的 “结构骨架”

HTML5 是 HyperText Markup Language（超文本标记语言）的第五代标准，核心作用是定义网页的内容结构和语义—— 相当于给网页搭建 “骨架”，告诉浏览器 “这里是标题”“这里是图片”“这里是段落”，不负责美观或交互。

核心功能：
- 用标签（如 <header>、<nav>、<article>、<footer>）组织内容，让结构更清晰、语义更明确（区别于早期 HTML 只有 <div> 的模糊结构）；
- 原生支持多媒体元素（<video>、<audio>），无需依赖 Flash 即可嵌入视频 / 音频；
- 新增表单控件（如 <input type="date">、<input type="range">），简化表单开发；
- 提供离线存储（LocalStorage、SessionStorage）、地理定位（Geolocation）等 Web API，扩展网页能力。

2. CSS3：网页的 “外观样式”

CSS3 是 CSS的第三代标准，核心作用是控制网页的视觉表现—— 相当于给 “骨架” 穿上 “衣服”，定义颜色、字体、布局、动画等，让网页更美观、更符合设计需求。

核心功能：
- 控制基础样式：字体（font-family）、颜色（color）、间距（margin/padding）；
- 实现灵活布局：Flexbox（弹性布局）、Grid（网格布局），解决不同屏幕尺寸的适配问题；
- 新增视觉效果：圆角（border-radius）、阴影（box-shadow）、渐变（linear-gradient）；
- 支持动画与过渡：@keyframes（自定义动画）、transition（平滑过渡），无需 JS 即可实现简单动效（如 hover 时按钮变色、元素平移）。

3. JavaScript（JS）：网页的 “交互大脑”

JavaScript 是 Web 端的脚本语言，核心作用是实现网页的动态交互与逻辑处理—— 相当于给网页注入 “大脑”，让网页能 “响应操作”“处理数据”“动态更新内容”，是实现 “活的” 网页的关键。

核心功能：
- 响应用户操作：监听点击（click）、输入（input）、滚动（scroll）等事件，执行对应逻辑（如点击按钮弹出弹窗、输入内容实时验证）；
- 动态操作 DOM：修改 HTML 结构（如新增 / 删除元素、修改文本内容）、修改 CSS 样式（如点击后切换主题色）；
- 处理数据：发起网络请求（fetch/XMLHttpRequest）获取后端数据（如加载新闻列表、提交表单），处理数据计算（如购物车价格统计）；
- 实现复杂功能：定时器（setTimeout）、本地存储读写、Canvas 绘图、Web 游戏等。

【学习前置】

HTML5、CSS3 和 JavaScript 学习可以参考大神博客文章：轻松的小希-CSDN博客

一、HTML5

重点： HTML5 复习知识链接

（1）HTML基础知识
（2）HTML5知识

快捷键：

（1）VSCode中输入英文感叹号后回车便可自动生成

（2）标签只需要输入一个，再按下Tab键就可以自动生成标签闭合

示例：输入 a，再按下Tab键就自动输出以下内容

<a href="" target=""></a>

HTML 是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言

超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)
标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言

HTML示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>网页标题</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

<!DOCTYPE html>表示当前页面用HTML5版本来显示网页，它不是一个html标签（它不包括在html标签里面）,它是一个文档类型声明标签
lang="en"规定了元素内容所用的语言是英语，基本所有主流浏览器都支持lang属性，因为可以帮助搜索引擎更快的解析网页内容；lang="zh-CN"则规定了元素内容所用的语言是中文
charset是字符集的意思，“UTF-8”被称为“万国码”，基本包括了所有国家会用到的字符；这个属性是必须设置的，不然页面会乱码，<title>标签指定了这个网页的标题

二、CSS3

重点： CSS3 复习知识链接

（1）CSS3

（2）CSS入门学习

（3）CSS3 菜鸟教程

CSS3是CSS（层叠样式表）的最新版本，它引入了许多新特性，使网页设计更加灵活和富有创意。在本文中，我们将介绍CSS3的一些新特性，包括选择器、布局、动画和变形效果。

一、选择器

CSS3引入了一些新的选择器，使得选择元素更加灵活。

属性选择器：可以根据元素的属性选择相应的元素。

input[type="text"] {
    border: 1px solid #ccc;
}

伪类选择器：可以选择元素的特殊状态。

a:hover {
    color: red;
}

子选择器：可以选择某个元素的子元素。

ul > li {
    list-style: none;
}

相邻兄弟选择器：可以选择某个元素的相邻兄弟元素

h2 + p {
    font-style: italic;
}

二、布局

CSS3引入了一些新的布局方式，使得网页设计更加灵活。例如：

弹性布局（Flexbox）：可以轻松地实现自适应布局

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

多列布局（Columns）：可以实现多列布局。

.container {
    columns: 2;
}

三、动画

CSS3引入了一些新的动画效果，可以轻松地实现动态效果。例如：

过渡（Transition）：可以平滑地过渡一个样式属性到另一个。

button {
    background-color: #ccc;
    transition: background-color 0.3s ease;
}
button:hover {
    background-color: red;
}

四、变形效果

CSS3引入了一些新的变形效果，可以实现更加丰富的视觉效果。例如：

旋转（Rotate）：可以实现元素的旋转。

Copy code
img {
    transform: rotate(45deg);
}

缩放（Scale）：可以实现元素的缩放。

img {
    transform: scale(1.5);
}

倾斜（Skew）：可以实现元素的倾斜

.div:hover {
            transform:skew(0,30deg);
            transform-origin: left top;
        }

平移（Translate）：可以实现元素的平移

img {
    transform: translate(50px, 50px);
}

透视（Perspective）：可以实现元素的透视效果

.container {
    perspective: 1000px;
}
.box {
    transform: rotateY(45deg);
}

三、JavaScript

重点： JavaScript 复习知识链接

（1）JS快速入门

（2）JavaScript 知识大全

（3）jQuery学习

JS学习内容看上面3篇文章就可以了

【前端】【HTML5+CSS3+JS】学习笔记总结