2024年前端最全学习基础HTML、CCS、JavaScript 知识实现抽奖页面(1)，Web前端开发面试题目及答案

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

background-repeat 定义背景图像显示⽅式，例如纵向平铺、横向平铺

background-position 定义背景图像在元素哪个位置

background-attachment 定义背景图像是否随内容⽽滚动

background:url(images/11.jpg) no-repeat;定义背景图像不重复出现

• 盒⼦模型

外边距margin，边框border，内边距padding

对于child块标签，边框到⽗标签之间的距离是外边距margin，边框是border，⽽child的内容到边框的距离就叫做内边距padding，他们都是有上下左右之分。

⾏为层JavaScript

---

• avaScript是⼀⻔编程语⾔，有很多的内容，⽐如变量、操作符、分⽀循环语句、函数⽅法等等，再深⼊还有⾯向对象、原型、闭包、作⽤域等等内容

1. 动态改变⻚⾯内容

HTML⻚⾯是静态的，⼀旦编写，内容是⽆法改变的。JavaScript可以弥补这个不⾜，可以将内容动态地显示在⽹⻚中。

2. 动态改变⽹⻚的外观

JavaScript通过修改⽹⻚元素的CSS样式，达到动态地改变⽹⻚的外观。

3. 验证表单数据

我们常⻅的在各⼤⽹站中的注册中的验证功能，就是JavaScript实现的。

4. 响应事件

JavaScript是基于事件的语⾔。例如点击⼀个按钮弹出⼀个对话框，就是⿏标点击触发的事件

⻚⾯中试试看

• 实现点击改变子颜色和点击显示倒计时

标题一

标题二

段落内容

段落内容

段落内容

段落内容

文本标签1也叫做文本行标签

文本标签2也叫做文本行标签

<span class=“test2” id=“content2” οnclick=“clickme()”>文本标签3也叫做文本行标签

块标签

块标签

块标签

我是列 我跨越俩列 我是列 我是列 我跨越俩行 我是列 我是列 我是列 我是列

实现抽奖页面

=====================================================================

• 效果展示

源代码

---