![](https://img-blog.csdnimg.cn/direct/3bbfa06dfb6048f49854c8f6e7498422.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
从0开始学前端
文章平均质量分 87
欢迎进入前端开发的世界!本专栏在为完全没有经验的初学者提供一条清晰而系统的学习路径,帮助你从零基础起步,逐步成为一名前端开发者。
mls学习小记
这个作者很懒,什么都没留下…
展开
-
从0开始学前端 学习目录
前端开发是一个快速发展的领域,学习前端不仅仅是掌握技术和工具,更是一个不断适应和学习新事物的过程。本指南提供了一个结构化的学习框架,但真正的进步来自于不断的实践和探索。祝你在前端的旅途上不断前行,探索更多的可能性!原创 2024-01-24 10:20:21 · 726 阅读 · 0 评论 -
react渲染对比传统dom操作
当组件的状态发生变化时,React 会首先在虚拟 DOM 上进行变更,然后通过一个叫做“协调”(Reconciliation)的过程计算出与上次渲染相比实际 DOM 需要变更的最小差异,最后把这些差异应用到真实的 DOM 上。在只改变单个 DOM 节点内容的情况下,直接使用 JavaScript 来操作 DOM 很可能会比 React 的虚拟 DOM 更快,因为这里涉及到的操作非常简单,直接操作避免了虚拟 DOM 的比较和更新过程。这样的操作不会引起复杂的 DOM 重绘或重排,因此开销很小。原创 2024-02-05 19:42:00 · 432 阅读 · 0 评论 -
html怪异模式
怪异模式(Quirks Mode)是浏览器的一种兼容性模式,它允许浏览器模拟老旧的、非标准的行为来兼容那些为古老浏览器设计的网页。在早期的互联网发展时期,许多网站是为了当时的主流浏览器(如早期的Internet Explorer和Netscape)特定的非标准行为而设计的。随着web标准的发展,这些行为被认为是错误的,新的浏览器版本开始支持标准的web技术。原创 2024-02-05 19:35:57 · 336 阅读 · 0 评论 -
Web Workers
Web Workers允许开发人员运行脚本操作在网页的背景线程中,而不会影响用户界面的响应性。由于JavaScript通常在单个线程上运行,耗时的任务可能会导致用户界面的延迟。通过使用Web Workers,开发人员可以在不同的线程上执行复杂计算,提高应用程序的性能和用户体验。原创 2024-02-05 18:56:32 · 308 阅读 · 0 评论 -
http常见问题
自从1991年HTTP/0.9首次提出以来,HTTP已经经历了几个重要的版本更新,以适应互联网技术的发展和性能需求的提高。虽然HTTP/1.1取得了显著的进步,但它仍然存在一些性能问题,如队头阻塞(Head-of-Line Blocking,HOL blocking)。:HTTP自身不保存之前的交互状态,每次请求都是独立的。方法通常不是幂等的,因为它用来提交数据,每提交一次都可能在服务器上创建新的资源或触发新的动作。在HTTP协议中,“安全” 和 “幂等” 的概念是根据请求方法的预期效果来定义的。原创 2024-02-05 10:14:55 · 603 阅读 · 0 评论 -
httpGET POST区别
定义和用途:数据传输:限制和安全性:幂等性和缓存:定义和用途:数据传输:限制和安全性:幂等性和缓存:头信息:安全性:副作用和使用场景:服务器端处理:可用性:GET`请求的数据是附加在URL并不能证明post请求能安全 明文传输都会被抓包窃取数据暴露:数据大小限制:服务器日志和浏览器历史:缓存和书签:语义清晰性:对抗网络嗅探:然而,重要的是要注意请求并不是绝对安全的。不论是还是,如果没有使用HTTPS,请求数据都是以明文形式通过网络传输的,这意味着在客户端和服务器之间的任何点,数据都可能被拦截。因此,对于敏感原创 2024-02-04 11:51:14 · 898 阅读 · 0 评论 -
从0开始学前端 第一课:前端开发入门 - HTML基础
前端开发涉及创建网站的用户界面,即用户直接与之互动的部分。使用HTML、CSS和JavaScript等技术,前端开发者可以构建网站的结构、样式和交互功能。原创 2024-01-24 10:42:30 · 348 阅读 · 0 评论 -
从0开始学前端 第二课:HTML文本元素
这个练习覆盖了HTML文本元素的基本用法,通过创建实际的HTML代码并查看浏览器中的结果,你可以加深对这些概念的理解。记住,实践是学习编程的关键。继续练习,尝试不同的标签和属性,以掌握HTML的基础知识。每个段落标签自动带有上下边距,表示段落间的空白。预计输出效果:显示为“访问谷歌搜索”,点击可以跳转到谷歌的主页。预计输出效果:显示一个文本段落,在浏览器中会被渲染为文本块。是最高的级别,通常用于主标题,而。是最低级别,用于次要的标题。生成的是带有项目符号的列表,生成的是带有数字编号的列表。原创 2024-01-24 10:56:08 · 781 阅读 · 0 评论 -
从0开始学前端 第三课:结构化内容元素
掌握这些元素是前端开发的基础,可以帮助我们创建出清晰、易于理解的网页布局。在实际开发中,你需要根据具体内容来填充这些结构化元素,同时添加更多CSS样式和JavaScript功能来增强网站的交互性和视觉效果。下面是一个网页框架的示例,它使用了本课学习的结构化内容元素。请记住,这只是一个简单的示例,实际的内容应更加丰富和具体。元素位于页面或区块的底部,用于包含版权信息、联系信息和其他链接。元素通常位于页面或区块的顶部,用于介绍内容或包含导航链接。页面的旁边会出现一个包含标题和文本内容的区块。原创 2024-01-24 11:12:06 · 340 阅读 · 0 评论 -
从0开始学前端 第四课:HTML表格内容元素
一个有三列(商品名称、价格、数量)和四行数据的表格,其中最后一行是总数量,第一列宽度为200px,表头背景色为灰色。HTML表格用于在网页上展示数据。表格由行(Rows)和列(Columns)构成,便于阅读和理解。一个有两列(姓名和年龄)和两行数据(张三、30 和 李四、28)的表格。一个表格,第一列的背景色为黄色,第二列的背景色为绿色。一个表格,其中“姓名”这一标题单元格横跨两行。原创 2024-01-24 11:26:48 · 872 阅读 · 0 评论 -
从0开始学前端 第五课:HTML表单元素
HTML表单用于收集用户输入。表单能够包含输入字段,如文本字段、复选框、单选按钮、提交按钮等。一个完整的注册表单,包含用户名、密码、生日、性别、自我介绍和职业选项,以及提交和重置按钮。三个按钮,分别是提交、重置表单以及一个弹出"Hello World!一个多行文本框用于输入个人简介,以及一个下拉选择框用于选择性别。一个带有用户名和密码输入框,以及一个登录提交按钮的表单。原创 2024-01-24 11:37:20 · 850 阅读 · 0 评论 -
从0开始学前端 第六课:图像和多媒体元素
在网页中显示宽度为300像素,高度为200像素的图片,图片无法显示时会显示“示例图片”作为替代文本,并且当鼠标悬停时显示“图片标题”。应选择SVG格式,因为SVG是矢量格式,无论放大到什么程度都不会失真,非常适合logo等图形。选择一个适合的图像格式,将公司logo插入到网站的页眉中,解释为何选择该格式。在网页中插入一张宽度为640像素的图片,并确保图片能够适应不同屏幕大小。解析:这段代码创建了一个音频播放器,用户可以使用控件播放、暂停和调整音量。创建一个视频播放器,视频默认静音,并且在循环播放。原创 2024-01-24 11:49:16 · 772 阅读 · 0 评论 -
从0开始学前端 第七课:脚本和元数据元素,基本文档元素
事件处理程序来确保在文档完全加载后再弹出消息。这是确保DOM加载完成后再执行脚本的常见做法。部分设置文档的标题、字符集为UTF-8,以及添加页面描述和关键词的元数据。部分,我们设置了HTML文档的标题、字符集以及为搜索引擎优化的元数据。创建一个HTML文档,为它设置正确的Doctype,并在HTML的。元素,在页面加载完成后弹出一条消息"页面加载完成"。元素,我们引入外部CSS文件。元素的样式,即字体颜色为蓝色。元素的字体颜色设置为蓝色。在HTML文档中使用。元素中,我们直接定义了。原创 2024-01-24 11:54:42 · 383 阅读 · 0 评论 -
从0开始学前端 第八课:CSS简介
CSS是什么CSS的作用与重要性CSS的发展史。原创 2024-01-24 14:34:45 · 361 阅读 · 0 评论 -
从0开始学前端 第九课:CSS基础 - 语法与选择器
它是CSS规则的重要组成部分,可以根据元素的名称、id、类、属性等进行选择。元素选择器直接使用HTML元素的名称来选择所有相应的元素。的元素字体大小为36px,颜色为深蓝色(navy)。后跟类名来选择具有该类名的元素。属性选择器根据元素的属性及属性值来选择元素。元素的文本颜色变为红色,并且文本居中对齐。的HTML元素文本颜色变为红色。元素文本颜色变为绿色。后跟ID来选择具有该ID的唯一元素。的HTML元素的背景颜色变为蓝色。元素的字体大小将设置为24像素。类的元素背景颜色变为黄色。元素的边框颜色变为红色。原创 2024-01-24 14:42:55 · 379 阅读 · 0 评论 -
从0开始学前端 第十课:CSS中的伪类与伪元素
元素的第一个字母将变为蓝色,字体大小为2em,并加粗。伪元素用于向元素添加装饰性内容。伪类用于定义元素的特殊状态。:无,此部分为理论知识。元素文本颜色将变为紫色。原创 2024-01-24 14:47:57 · 353 阅读 · 0 评论 -
从0开始学前端 第十一课:CSS的应用 - 在HTML中应用CSS的三种方式
在本课中,学习者将了解并学会如何在HTML文档中应用CSS样式。标签内的文本将应用蓝色字体且字体大小为18像素。段落中的文本颜色为蓝色,字体大小为18像素。外部样式表是一个单独的CSS文件,通过。内部样式表位于HTML文档内部,通常在。标签的文本颜色被设置了新的样式。行内样式直接在HTML元素中通过。在这个例子中,文档的背景色和。标签的文本颜色将变为绿色。是外部样式表的文件名。标签在HTML文档的。原创 2024-01-24 14:53:13 · 769 阅读 · 0 评论 -
从0开始学前端 第十二课:CSS盒模型
一个宽度为300像素的盒子(不包含padding和border),周围有20像素的填充,5像素的黑色边框,和15像素的外边距。CSS盒模型是CSS布局的基础,它决定了元素如何在页面中占据空间。一个宽度为200像素的盒子,周围有20像素的填充,5像素的黑色边框,和10像素的外边距。盒子的实际宽度仍然是200像素,但这200像素包括了内容、填充和边框的宽度。:三个盒子并列排列,它们之间有30像素的空隙。:盒子的实际宽度仍然是300像素,但宽度现在包括了内容、填充和边框。,意味着宽度和高度只包括内容。原创 2024-01-24 15:26:46 · 361 阅读 · 0 评论 -
从0开始学前端 第十三课: 浮动与定位
浮动是一种CSS布局技术,允许元素脱离文档流,并可以向左或向右移动,直到它的外边缘紧靠包含块或另一个浮动元素。定位的元素可以脱离文档流,并可以放置在页面上的任意位置。定位是一个复杂的概念,因为它涉及到多种类型的定位方式。在浏览器中显示四种不同颜色和不同定位方式的盒子。粘性定位的盒子在滚动到页面顶部时固定。在浏览器中显示三个灰色的正方形盒子,它们将从左至右排列,每个盒子之间有一定间距。通过这些练习,你可以更好地理解CSS中浮动和定位的工作原理及其影响。接下来是一个包含各种定位示例的HTML页面。原创 2024-01-24 15:38:40 · 404 阅读 · 0 评论 -
从0开始学前端 第十四课:布局与定位(二)
完成本课后,你应该能够使用Display属性控制元素的显示方式,使用Flexbox创建灵活的一维布局,以及使用Grid布局制作复杂的二维布局。属性是用来控制元素如何显示在页面上的CSS属性。它可以改变元素的布局行为和周围元素的布局关系。记得在编码过程中,多尝试和变化参数,这样可以加深你对每个属性如何影响布局的理解。: Flexbox是一个强大的一维布局工具,允许你快速设计灵活的布局结构。: Grid布局允许你在二维空间内(行和列)对元素进行布局。原创 2024-01-24 15:49:03 · 842 阅读 · 0 评论 -
从0开始学前端 第十五课:文本、字体颜色和背景
此练习将帮助你实践如何使用CSS来改变文本样式和设置背景。在完成练习后,你会更加熟悉CSS的基础使用,包括字体和背景的控制。在这一课中,我们将探索如何通过CSS更改文本样式、字体颜色以及如何设置元素的背景。文本样式可以通过多种CSS属性来设置,包括字体大小、字体样式、文本对齐等。这段代码将段落文本的字体大小设置为16像素。: 设置文本在元素内的水平对齐方式。: 设置文本的风格,如斜体。: 设置背景图片的初始位置。: 设置元素的背景颜色。: 设置元素的背景图片。的元素设置一个背景图片。: 设置文本的大小。原创 2024-01-24 15:53:38 · 652 阅读 · 0 评论 -
从0开始学前端 第十六课:响应式设计基础
响应式网页设计(Responsive Web Design,RWD)指的是能够自适应不同屏幕大小和分辨率的网页设计。一个响应式的网页能够在手机、平板电脑和桌面电脑上提供良好的浏览体验,无需为每种设备做特定的设计。流式布局是一种灵活的布局方式,通常使用百分比来设置宽度,使元素宽度随着屏幕或容器大小的变化而变化。媒体查询是响应式设计中的核心技术,允许你根据不同的屏幕尺寸或设备特性应用不同的CSS样式。框架,如Bootstrap,提供了预设的响应式设计组件和工具类,可以简化响应式网页的开发。/* 通用样式 */原创 2024-01-24 16:50:58 · 352 阅读 · 0 评论 -
从0开始学习前端 第十七课:动画和过渡
适当和恰到好处的动画可以提升网站的专业感和吸引力。过渡是CSS中的一种效果,可以在元素从一种样式变化到另一种样式时,让变化显示得更平滑、自然。要创建过渡效果,你需要指定两样东西:你想要过渡的CSS属性,以及过渡效果的持续时间。:背景颜色将在红色和黄色之间不断变化,每次动画持续4秒,这个动画会无限次数地播放,并且每次播放方向交替。使用CSS动画,你可以创建复杂的动画序列,它不仅包括状态之间的过渡,还可以在多个关键帧之间定义样式。上时,它的宽度在2秒内线性地从初始值增加到300px,过渡将在1秒后开始。原创 2024-01-24 16:53:53 · 389 阅读 · 0 评论 -
从0开始学习前端 十九课:介绍JavaScript
理解JavaScript是什么以及它的主要用途了解JavaScript的简要历史明白JavaScript和Java的本质区别认识JavaScript在网页和Web应用中的角色。原创 2024-01-24 17:15:06 · 353 阅读 · 0 评论 -
从0开始学习前端 第二十课:JavaScript入门
【代码】从0开始学习前端 第二十课:JavaScript入门。原创 2024-01-24 17:21:19 · 375 阅读 · 0 评论 -
从0开始学前端 第二十一课:控制结构 - 条件语句与循环
通过这些练习,你将加深对JavaScript控制结构的理解。记住,多练习和实际编码是掌握这些概念的关键。原创 2024-01-25 09:07:49 · 853 阅读 · 0 评论 -
从0开始学前端 第二十二课:函数
在本课结束后,你将能够:定义函数预计输出效果: 调用将在控制台输出"Hello, Alice!"。调用函数预计输出效果: “Hello, Alice!”。参数和返回值预计输出效果: 上述代码将输出"8"。匿名函数和箭头函数预计输出效果: 第一个例子会输出"Hello, Anonymous!“,第二个例子会输出"6”。课后练习定义和调用函数:使用参数和返回值:实践匿名函数和箭头函数:定义和调用函数:输出应该是"15"。使用参数和返回值:原创 2024-01-25 09:08:09 · 802 阅读 · 0 评论 -
从0开始学前端 第二十三课:JavaScript 数组基础
数组经过了前面的操作且包含操作后的结果。如果你在实际的练习中重置了。数组,请用你当前数组的结果来预期输出。以上代码示例和预计输出都假定。原创 2024-01-25 09:08:22 · 876 阅读 · 0 评论 -
从0开始学前端 第二十四课:JavaScript对象
在JavaScript中,一个对象是一个包含多个值的复合数据类型。每个值都有一个与之关联的名称,这个名称被称为“键”(或属性名),而值可以是数据或者函数。对象可以被视为一个存储属性(键值对)的容器。通过这些练习,你将加深对JavaScript对象的理解,并学会如何操作对象的属性。完成本课后,你应该能够创建你自己的对象,并对其进行一系列操作。你可以使用对象字面量来创建对象,这涉及到使用大括号。你可以通过点表示法或括号表示法来访问对象的属性。原创 2024-01-25 09:09:11 · 380 阅读 · 0 评论 -
从0开始学前端 第二十五课:JavaScript中的类(Class)基础概念
类(Class)是JavaScript的一个高级语法,用于创建对象和实现对象的继承。在ES6之前,JavaScript使用函数和原型链来模拟类的行为。但现在,原创 2024-01-25 09:20:07 · 944 阅读 · 0 评论 -
从0开始学前端 第二十六课:JavaScript中的类(Class)高级话题
完成这些练习后,你将对JavaScript类的高级特性有更深入的理解,包括访问器属性、类表达式、私有成员、静态成员以及链式调用的使用。在这一课,我们将深入探索JavaScript中类(Class)的更高级的特性。Getter和Setter访问器方法允许你控制对类中属性的访问和赋值。,可以实现链式调用,这样可以连续调用同一个对象上的多个方法。静态方法和属性是与类本身相关联的,而不是与类的实例相关联。私有字段和方法是类的属性和方法,它们只能在类的内部访问。类表达式提供了定义类的另一种方式,类似于函数表达式。原创 2024-01-25 09:22:52 · 948 阅读 · 0 评论 -
从0开始学前端 第二十七课:原型和原型链
原型链是JavaScript中实现继承的主要机制。每个对象都有一个指向其原型对象的链,并且这个原型对象也有自己的原型,以此类推,直到一个对象的原型是。通过这些练习,你将更好地理解原型和原型链的工作方式以及如何在JavaScript中实现继承。属性,这个属性是一个指向原型对象的指针。当你使用构造器创建一个新对象时,这个对象内部的。方法来判断对象是否是某个构造函数的实例。在ES6之后,JavaScript提供了。关键字来创建类,但在底层仍然使用原型链。通过设置对象的原型到另一个对象的。原创 2024-01-25 09:53:06 · 830 阅读 · 0 评论 -
从0开始学前端 第二十八课:DOM简介与探索DOM节点
理解DOM是什么以及它的作用。了解DOM与HTML的关系。学习浏览器中如何表示DOM。掌握DOM节点的类型和属性。学习DOM节点之间的关系,包括父节点、子节点和兄弟节点。DOM(文档对象模型)是一种与平台和语言无关的接口,允许程序和脚本动态访问和更新文档的内容、结构和样式。DOM将HTML文档表述为一个节点树,允许开发者使用JavaScript来操作这些节点,从而改变文档的结构、样式和内容。浏览器解析HTML文档,创建一个在内存中的DOM树,这个树反映了文档的结构。原创 2024-01-25 09:56:34 · 847 阅读 · 0 评论 -
从0开始学前端 第二十九课:选择元素
这些练习的目的是让你熟悉DOM选择和操作,理解它们如何影响页面的内容和外观。通过实践,你将更好地理解选择器的使用场景和潜在陷阱。这个方法返回一个HTMLCollection,包含文档中所有具有指定标签名的元素。这个方法返回一个HTMLCollection,包含文档中所有具有指定类名的元素。这个方法可以通过ID选择一个特定的元素。// 预计输出:"Hello, World!返回文档中匹配指定CSS选择器的第一个元素。返回所有匹配的元素的一个NodeList。// 预计输出:"类选择器一"原创 2024-01-25 14:30:33 · 342 阅读 · 0 评论 -
从0开始学前端 第三十课:元素的样式与属性
完成这些练习后,你应该能够理解如何通过JavaScript与元素的样式和属性交互,这是前端开发中实现动态用户界面的关键技能。DOM元素的样式可以通过JavaScript直接获取和设置,这通常用于动态更改页面的外观。// 预计输出:"http://example.com"// 使用classList API。// 同样应用highlight类。// 应用highlight类。// 移除highlight类。// 切换highlight类。// 预计输出:"blue"// 将文本颜色更改为红色。原创 2024-01-25 14:32:11 · 757 阅读 · 0 评论 -
从0开始学前端 第三十一课:创建、插入与删除节点
完成这些练习后,你应该能够熟练掌握如何通过JavaScript创建、插入和删除DOM节点,这是动态网页开发的基础技能。创建节点后,可以使用多种方法将节点插入到DOM中。此外,也可以创建文本节点,并将其与元素节点结合。// 插入新的到第一个之前。在JavaScript中,可以使用。// 将文本节点附加到元素。// 将元素添加到body。在较新的浏览器中,可以直接调用。方法来删除DOM中的节点。// 创建新的元素。方法创建新的元素节点。'欢迎学习前端开发!原创 2024-01-25 14:34:29 · 360 阅读 · 0 评论 -
从 0开始学前端 第三十二课:事件基础
事件是Web页面中发生的动作或者发生的事情,例如点击按钮、按下键盘键、移动鼠标等。在JavaScript中,我们可以监听并响应这些事件,以创建交互式的网页应用。原创 2024-01-25 14:36:09 · 359 阅读 · 0 评论 -
从0开始学前端 第三十三课:表单与输入事件
通过这些练习,你将能够了解如何处理用户输入和表单事件,这是创建交互式网页应用时不可或缺的技能。可以使用JavaScript来获取或设置用户在表单元素中输入的值。HTML表单元素用于收集用户输入,常见的表单元素包括。'密码长度必须大于8个字符'// 防止表单默认提交行为。原创 2024-01-25 14:38:20 · 362 阅读 · 0 评论 -
从0开始学前端 第三十四课:动态内容与渲染性能
更新后的内容原创 2024-01-25 14:41:17 · 758 阅读 · 0 评论 -
从0开始学前端 第三十五课:DOM遍历与修改
完成这些练习后,你将更加熟悉DOM的遍历和修改方法,这对于进行DOM操作和页面内容动态更新非常重要。属性会返回节点的子节点集合,包括元素节点、文本节点和注释节点。DOM树是由节点构成的,我们可以使用不同的属性来遍历这些节点。它需要两个参数:新节点和将被替换的旧节点。作为参数,它将进行深克隆,包括克隆节点的所有子节点;// 将根据子节点数量输出不同数字,包括文本节点。属性返回同一父节点下的紧接着的下一个节点。或不传参数,它将进行浅克隆,只克隆节点本身。属性返回某个节点的父节点。原创 2024-01-25 14:44:14 · 968 阅读 · 0 评论