WEB前端入门
文章平均质量分 88
前端入门学习之路,前端学习指南
艾编程前端技术
艾编程,现在还是一个学习web前端全栈工程师的宝藏账号
展开
-
HTTP 和 HTTPS 有何不同?一文带你全面了解
HTTP是一种互联网数据传输协议,用于在网络服务器和客户端之间进行数据传输。作为万维网的基础,HTTP协议允许网络浏览器向网络服务器发送请求,服务器则会返回响应。HTTP协议基于文本,因此传输的数据是人类可读的格式。具体而言,HTTP协议是基于请求-响应模式运行的,在传输控制协议(TCP)之上进行传输。当客户端(通常是Web浏览器)向服务器发送请求时,它将发送HTTP请求消息。服务器将以HTTP响应消息的形式进行回应,其中包含请求类型、标头和正文等信息。原创 2023-03-01 23:44:54 · 1676 阅读 · 1 评论 -
前端加薪必备:掌握这10个利于SEO优化的HTML标签吧
简单易懂的 HTML 标签使用可以显著提高您网站的搜索引擎优化,让您的网站在搜索结果中更具优势。在这里,我为您总结了前 10 个必要的 HTML 标签,让您的网站更友好、更容易被搜索引擎和用户发现,让您的网站领先于竞争对手。记住,使用正确的标签,避免滥用标签或不相关关键字。除此之外,您需要持续更新网站内容,提高用户体验,才能获得持久的 SEO 成功。转载 2023-02-24 22:51:57 · 514 阅读 · 0 评论 -
JavaScript Web API实战:7个小众技巧让你的网站瞬间提升用户体验
随着技术的日新月异,为开发人员提供了令人难以置信的新和。但据了解,在中,只有被开发人员积极使用。让我们来看看一些有用的,它们可以帮助您将网站推向月球!原创 2023-02-22 23:54:01 · 228 阅读 · 0 评论 -
记住这12个要点,你也能打造出让HR和技术主管前一亮的前端简历
简短明了地介绍自己的背景和能力,让技术主管能够快速了解你的专业能力。原创 2023-02-21 20:14:09 · 348 阅读 · 0 评论 -
从零入门Vue.js!六步学习路线和知识体系盘点详解!
Vue.js是一款流行的JavaScript前端框架,它允许开发者轻松地构建交互性强的用户界面。原创 2023-02-18 23:53:53 · 1136 阅读 · 0 评论 -
CSS 中的 BFC 是什么,有什么作用?
BFC,即“块级格式化上下文”(Block Formatting Context),是 CSS 中一个重要的概念,它指的是一个独立的渲染区域,让块级盒子在布局时遵循一些特定的规则。BFC 的存在使得我们可以更好地控制文档流,处理浮动、清除浮动等问题。原创 2023-02-16 22:07:33 · 790 阅读 · 0 评论 -
Web前端CSS清除浮动的5种方法
根据实际情况选择适合的方法,需要注意兼容性和语义性问题。在移动端,清除浮动布局的方法与在桌面端是相同的。原创 2023-02-15 21:09:51 · 1661 阅读 · 0 评论 -
自学前端最容易犯的10个的错误,入门学前端快来看看
在前端学习过程中,有很多常见的误区,包括过度关注框架和库、缺乏实践、忽视算法和数据结构、忽视浏览器兼容性、缺乏团队合作经验、忽视可访问性、重构次数过多、没有关注性能、缺乏设计知识以及没有持续学习等。要避免这些误区,应该注重基础知识的掌握,多进行实践练习,关注可访问性、性能和设计等方面,并且持续学习前端新技术和最佳实践。原创 2023-02-14 21:06:56 · 2228 阅读 · 2 评论 -
每个程序员必学的10个Git命令
希望在团队中处理代码时有效协作并跟踪更改的程序员来说,版本控制至关重要。Git 是一个版本控制系统,允许您跟踪修订、识别文件版本并在必要时恢复旧版本。具有一定编程经验的用户可以相当轻松地开始使用 Git,但要掌握所有高级功能并不容易。在本文中,我将向您展示一些最有用的命令,它们将使您成为 Git 专家。原创 2023-02-06 23:16:26 · 297 阅读 · 0 评论 -
编写干净代码的 9 条必须知道的规则
您是否厌倦了盯着一堆连您的猫都不会碰的代码?别再看了。在这篇文章中,我将告诉您 9 条规则,将您的烂尾代码变成艺术品。所以喝杯咖啡,坐下来负责你的代码!原创 2023-02-02 21:38:34 · 255 阅读 · 0 评论 -
前端CSS网页布局新技术(双屏和折叠屏手机)解决方案
三星 Galaxy Fold 和 Surface Duo 以及华为mate X等系列折叠屏手机问世至今已有三年多的时间。此后,三星 Galaxy Z Fold 3 和 Galaxy Z Flip 3、华为mate X2S、荣耀magic V系列等手机均已上市。可折叠设备可供购买,目前正在被消费者使用,随之而来的是我们作为开发人员可以开始探索这种新型设备和响应式设计的下一个发展的机会。转载 2023-02-01 23:06:09 · 635 阅读 · 0 评论 -
你可能不知道的20个Git命令,但真的很实用
如果您曾经浏览过git 手册(或 run man git),那么您会注意到 git 的功能比我们大多数人每天使用的要多得多。很多这些命令都非常强大,可以让你的生活更轻松(其他命令有点小众,但仍然很高兴知道)。这篇文章概述了我最喜欢的 20 个未充分使用的 git 功能,您可以使用它们来提升您的开发过程,给您的同事留下深刻印象,帮助您回答 git 面试问题,最重要的是 - 玩得开心!原创 2023-01-14 23:20:44 · 824 阅读 · 0 评论 -
快来领取你的JavaScript正则表达式速查表
如果我们想对字符串进行相关(增、删、改、查、检索)操作,就可以用接下来的正则表达式实现什么是正则表达式那么今天为大家分享一个整理完整的常用正则表达式的规则与示例,希望对你学前端这条路上更加有帮助!原创 2022-12-31 20:49:01 · 605 阅读 · 0 评论 -
10 个你需要熟悉的 CSS3 属性
CSS 属性被分为不同的类型,如字体属性、文本属性、边框属性、边距属性、布局属性、定位属性、打印属性等。对于初学者来说,需要熟悉并掌握这些属性。前面我们已经了解了30个CSS选择器,但是新的CSS3属性呢?为此小编也特意整理了10个你需要熟悉的CSS3属性,来我们一起了解下吧!转载 2022-12-29 22:00:45 · 337 阅读 · 0 评论 -
分享20个Javascript中的数组方法,收藏
什么是数组?与其他编程语言中的数组一样,Array对象允许在一个变量名称下存储多个项的集合,并且具有用于执行常见数组操作的成员。原创 2022-12-28 20:14:21 · 468 阅读 · 0 评论 -
JavaScript普通函数与箭头函数有怎样的区别?
比较点普通函数箭头函数具体案例简写/箭头函数如果没有参数,同时函数体的返回值只有一句,则{}和return都可以省略。1、函数简写this指向this总是指向调用它的对象,如果作为构造函数,它指向创建的对象实例箭头函数的this指向的是父级作用域的this,是通过查找作用域链来确定 this 的值,也就是说看的是上下文的this,指向的是定义它的对象,而不是使用时所在的对象。2、this指向this改变call()、apply()、bind()等方法能改函数中this的指向。原创 2022-12-27 21:12:56 · 1004 阅读 · 0 评论 -
前端CSS Flex布局8大重难点知识,收藏起来吧
如果我们每一行显示的个数为 n,那我们可以最后一行子项的后面加上 n-2 个 span 元素,span 元素的宽度和其它子项元素宽度一样,但不用设置高度。为什么是添加 n-2 个 span 元素呢?当最后一行只有 1 个子元素时,他会默认靠左,不用处理当最后一行子元素正好时,我们就不用关心这个问题。所以要去掉这两种情况,只需要加 n-2 个 span 元素就好。原创 2022-12-20 21:06:31 · 356 阅读 · 0 评论 -
JavaScript DOM的性能优化详解
重排(回流)当渲染树(render tree)中的一部分或全部因为元素的规模尺寸、大小等改变时,浏览器需要重新计算元素在设备视口(viewport)内的确切位置和大小,需要重新布局render树,这个过程为回流(重排)。重绘当页面元素样式改变(如 color、background-color、visibility),但不影响元素在文档流中的的位置时,浏览器只需将新样式赋予元素并进行重新绘制render树操作,这个过程为重绘。回流必将引起重绘,但重绘不一定会引起回流什么情况会发生重排(回流)原创 2022-12-16 00:46:15 · 707 阅读 · 0 评论 -
彻底搞懂JavaScript防抖与节流
防抖的概念在连续的事件中,只需触发最后一次回调,也就是将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay(延迟)时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。应用场景搜索框输入查询、手机号、邮箱验证输入检测。只需用户最后一次输入完,再发送请求窗口大小resize。只需窗口调整完成后,计算窗口大小,防止重复渲染。什么是节流使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。节流应用场景。原创 2022-12-14 22:53:05 · 759 阅读 · 0 评论 -
前端入门教程:CSS标准盒模型和怪异盒模型区别
一张图来理解盒模型的5个属性父子间间距,通过给父元素设置padding来实现兄弟间间距,通过给元素设置margin来实现。原创 2022-12-13 23:00:16 · 388 阅读 · 0 评论 -
CSS固定定位与粘性定位4大企业级案例
前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例。如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。属性值描述relative 相对定位相对于自身正常位置进行位置的调整absolute 绝对定位相对于其最近的定位的父元素进行位置调整。fixed 固定定位相对于浏览器窗口进行位置调整sticky 粘性定位是基于用户的滚动位置来定位。固定定位相对于浏览器窗口进行定位,其它与绝对定位的特性一致。原创 2022-12-11 00:13:15 · 614 阅读 · 0 评论 -
CSS 绝对定位 7 大应用场景实战案例分享
今天我们来分享web前端CSS定位中的position:absolute绝对定位的应用场景案例的相关场景!绝对定位是CSS中非常中啊哟的知识点,接下来我我们会通过7个不同的层面结合7个不同的案例来展开讲解!绝对定位元素的特性绝对定位元素常见用法合集。原创 2022-12-09 17:08:26 · 628 阅读 · 0 评论 -
CSS相对定位3大应用场景5个实战应用案例详解
我发现,作为学习Web前端开发的同学最大的痛苦莫过于,学了一堆知识,但到了实际的应用开发中不知道如何灵活运用。今天决定再上一干货,一个个来讲清楚关于定位系列实际应用场景,先从相对定位position: relative;开始相对定位3大应用场景:微调元素位置、提升元素层级、作为绝对定位元素参考对象相对定位5个应用案例:搜索框、图文对齐、滑动动画、弹性菜单、柱形图正在上传…重新上传取消定位作为css中非常重要的一个知识点,在实际开发中那就像家常菜一样,时时都会出现,同时在面试中也是200%会被问到的。原创 2022-12-09 00:07:47 · 377 阅读 · 0 评论 -
CSS Margin中5个经典布局解决方案,重难点知识,记得收藏复习
前几天我在面试前端开发同学的时候,有问到关于margin基础布局相关内容的过程中,发现很多同学基本解释不清楚,今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。可以尝试动手试一试,有什么疑问 !可随时交流,有问必答 。margin 纵向重叠(合并)问题元素垂直排列时,第一个元素的下外边距与第二个元素的上外边距会发生合并,合并后的间距就是两者中最大的那个值。答案: item1与item4之间间距为 20px解析:因为中间两个box中没有内容也没有边框线,原创 2022-12-07 21:12:52 · 370 阅读 · 0 评论 -
54个CSS重难点整理,12-24篇,进阶高薪必需要掌握的知识点
本次我把CSS中的重难点整理出来,总共54个核心知识点,供大家复习,希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点,同时也是面试必问的内容。因为涉及的内容较多,我分5篇内容发出来,好逐一进行让大家消化这些内容,本次我把前13-24个CSS重难点整理出来,具体内容如下:以下图为例来讲解① 两者都是引用外部 CSS 的方式 @import方式可直接在style标签中引入外部CSS,也可以在css文件中引用外部css② 两者的区别区别点link@import从属关系link是HTML提原创 2022-12-06 21:53:45 · 255 阅读 · 0 评论 -
10种常用JS代码功能常规写法和优雅写法的对比发现,这差异也太大了吧
当我们刚开始学习JS代码时,我们只需要掌握JS中对应知识点就好,随着对JS代码的熟悉程度,我们就要思考如何写出更优雅,更简洁的代码。接下来我分享10种常用JS代码功能,通过常规写法和优雅写法的对比,来体现其优雅和简洁性。代码中用了ES6新特性,如果你对ES6不了解,可以先收藏好。在后期的VUE中,基本都在和ES6打交道。常规写法利用concat方法来合并数组优雅写法利用ES6中的...扩展运算符来合并数组2、数组中取值常规写法利用数组下标一个一个从数组中取数据优雅写法利用ES6的解构赋原创 2022-12-06 20:17:06 · 296 阅读 · 0 评论 -
快来领取,33个常用JavaScript功能已封装成方法,拿来即用
在实际开发中,为了提高开发的效率,我们会把常用到的功能封装成方法,这样后期开发需要,拿来即用。这里分享33个在实际开发中经常需要用到的功能(已封装成方法),分享给到大家。2、获取url参数3、本地存储4、cookie操作【set,get,del】5、Js获取元素样式【支持内联】6、时间格式化7、原生ajax操作8、fetch请求的封装9、设备判断:android、ios、web10、判断是否为微信11、文本复制功原创 2022-12-04 22:00:45 · 139 阅读 · 0 评论 -
学前端到了CSS阶段,你一定要掌握这9大防御式开发技能
防御性编程是一种细致、谨慎的编程方法(习惯)。我们在写代码时常会有“以防万一”的心态,把以防万一有可能出现的情况提前考虑进去,规避以免以防万一出现带来的问题。应用防御性编程技术,你可以侦测到可能被忽略的错误,防止可能会导致灾难性后果的“小毛病”的出现,在时间的运行过程中为你节约大量的调试时间。比如我们在写下面这个效果时,如果只是按设计师设计效果来开发,我们就不会考虑标题内容过长的问题。但是在实际的应用中,数据是从后台加载而来,标题的字数就有可能过长,过长之后就会导致标题溢出折行的效果如下图,带来不好的体验。原创 2022-12-03 20:05:01 · 308 阅读 · 0 评论 -
5大CSS重点、难点、易错点总结,入门学前端必看
最近跟粉丝同学反馈,CSS中知识点多,在学习过程中,学到后边忘记前面。有些相似的内容很容搞混,弄得自己学起来特别的吃力和头痛。要对这些容易搞混点的做好区分,最好的办法就是把他们整合到一起来对比总结分析。做我的粉丝我宠你, 于是,我分了上中下两篇来把这些易错的难点整理出来,本篇内容概要:CSS中不同属性值%百分比单位计算;line-height的继承问题img图片和 display: inline-block;产生空白间隙的3种解决方案?什么叫优雅降级和渐进增强?CSS选择器权重;原创 2022-12-03 00:18:41 · 786 阅读 · 0 评论 -
教你用CSS从零做漂亮网页,这样学习前端太有成就感了
层叠样式表(Cascading Style Sheet,简称:CSS)是为网页添加样式的代码。本节将介绍 CSS 的基础知识,并解答类似问题:怎样将文本设置为黑色或红色?怎样将内容显示在屏幕的特定位置?怎样用背景图片或颜色来装饰网页?CSS 究竟什么来头?和 HTML 类似,CSS 也不是真正的编程语言,甚至不是标记语言。它是一门样式表语言,这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说,要选择一个 HTML 页面里所有的段落元素,然后将其中的文本改成红色,可以这样写 CSS:原创 2022-05-17 19:51:52 · 968 阅读 · 0 评论 -
入门前端看过来,手把手带你轻松上手html的实操
超文本标记语言 (英语:Hypertext Markup Language,简称:HTML) 是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是:一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示,本文将对 HTML 及其功能做一个基本介绍。HTML 到底是什么?HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言。HTML 由一系列的元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。 一对标签(tags)可以为一..原创 2022-05-16 21:09:38 · 200 阅读 · 0 评论 -
前端专业人士都会用到什么软件和工具?
在做前端开发之前,我们要知道前端人到底会用到哪些软件,这些软件分别是什么!今天和大家分享的一些软件当中,有些是全新的可以替代之前的软件;原创 2022-05-13 21:05:40 · 418 阅读 · 0 评论 -
在美国做前端开发,你能拿到多少薪水?
我们很多时候都非常羡慕在国外的开发人员,那么在美国开发人员的薪资是多少,那个城市的工资水平更高一点,那个公司待遇更好,管理文化方式更好,本期笔记为大家分享下!Web 前端开发人员 & 全栈开发人员的薪资和岗位需求 美国哪些地区的工资更高! 在美国哪些公司工资更高! 美国主流的技术有哪些,需要掌握怎样的技能? 网友对于美国公司通过评分、薪酬、文化、成长空间、工作生活的平衡、管理等方式 TOP 前五名!在美国,前端开发人员的平均工资为每年 102,237 美元,每年有 3,920 美元的原创 2022-05-11 20:04:57 · 765 阅读 · 0 评论 -
JavaScript入门到精通,需要掌握的技能盘点
JavaScript是当今使用的最重要的 Web 开发语言之一。它使您可以为您的网站添加广泛的功能特性,从最基本得到最高级的。因此,无论您是专家级开发人员还是刚起步的初学者,您都需要了解某些关键的JavaScript技术才能取得成功。以下就为你盘点下!异步编程:大多数软件开发人员同步编写 JavaScript 写代码的时候,这意味着在执行一段代码时,一次只执行一行代码(按照代码出现的顺序)。这会对性能效率发挥来说是不友好的,因为您需要等待每个操作完成后再进行下一个操作。异步编程可以通过使用技原创 2022-04-27 15:43:42 · 245 阅读 · 0 评论 -
轻松易懂的CSS学习权威指南来了
被CSS吓到了?消除恐惧的权威指南原创 2022-04-18 22:21:32 · 297 阅读 · 0 评论 -
大白话教你看懂前端html,前端入门html教程
HTML 或**超文本标记语言** 允许 Web 用户使用元素、标签和属性创建和构造部分、段落和链接。然而,值得注意的是,HTML 不被视为一种编程语言,因为它不能创建动态功能。原创 2022-04-15 22:17:41 · 588 阅读 · 0 评论 -
那些你从不使用的 HTML 属性,背后竟大有文章,赶快了来了解下
快速总结 ↬在这篇文章中,Louis Lazaris 描述并演示了一些有趣的 HTML 属性,您可能听说过也可能没有听说过,并且可能会发现它们非常有用,可以在您的项目中亲自使用。一月份,麦迪逊卡纳[问她的推特粉丝今年你想要学习或更深入地学习哪些语言/技术?typescript、next.js、react、graphql、solidity、node,这几个是哪个呢- 麦迪逊卡纳 (@Madisonkanna)2022 年 1 月 3 日但是我的答案很简单:HTML。而且我一点也没.转载 2022-04-15 14:30:55 · 229 阅读 · 0 评论 -
为什么很多优秀的程序员都喜欢写博客,这个秘密终于被我发现了
你会写博客吗?你有养成好的习惯去写博客吗?在看这篇文章之前,我先提出这两个问题!好了,我们进入正文,来看看很多互联网大佬什么热爱写博客,从博客中收获到了什么,我们来一起看看!原创 2022-04-13 21:40:12 · 538 阅读 · 0 评论 -
这5个可以提高前端开发效率的 Chrome扩展程序,建议你尝鲜体验下
扩展程序是个性化的小程序,可以为你的浏览器添加新功能。你可以通过Chrome 应用商店添加扩展程序来定制Chrome使用体验。以下是我用来保持专注和提高开发效率的五个 Chrome 扩展程序:1. WappalyzerWappalyzer是一个神奇的扩展程序,它通过列出网站使用的软件和技术向用户展示它是如何开发的。2. CSSViewerCSSViewer可以显示网页上任何元素的 CSS 参数。这个扩展程序能让你简单地使用光标来显示元素的...原创 2022-04-13 15:11:35 · 776 阅读 · 0 评论 -
给程序员的 8 个提高开发效率的建议
作为一名开发人员,保持高效并不容易。这是一项精神压力大的工作,会很快耗尽精力,也需要大量的注意力。原创 2022-04-08 16:05:44 · 3749 阅读 · 0 评论