前端傻瓜式入门No.1

电商前端视觉回归测试实战:基于Pixelmatch的像素级对比方案 视觉回归测试是前端工程中保障UI一致性的关键技术,其核心原理是通过对比页面截图来检测非预期的视觉变化。这项技术的价值在于能够捕捉那些功能测试难以覆盖的像素级偏差,例如布局偏移、颜色渲染差异等,从而在频繁迭代的现代Web开发中,尤其是在电商、内容平台等强视觉驱动的应用场景里,成为线上用户体验的重要防线。Pixelmatch作为一个轻量、高性能的纯JavaScript像素对比库,凭借其卓越的速度和可配置的精度,成为构建定制化视觉测试流程的理想引擎。通过结合Puppeteer进行自动化截图,并集成到CI/CD流水 阅读详情
本文总结一些自己前端学习中的想法与收获,适合新手程序员入门前端与纠正我的错误并与我探讨,也欢迎大牛们的指点。


Part 1:
什么是前端?

个人理解的前端,目前还处于比较低级的层次,就是写页面呀。按照设计图构建出相符的页面,添加应有的动画效果,接收一些后台传过来的数据并显示在网页上。

接着我们当然要严格要求自己,完善自己的作品啊。比如我们应该看我们做出的网页在各种浏览器上能不能按照预期的效果显示出来,因为有的浏览器可能读不懂我们写的部分代码,如果它们读不懂我们就应该写出它们能读懂的代码。同时我们也要追求一蛤代码的优化,使自己的网页能够尽快的打开(说是一个网页最好能在2s内打开),我们的代码也要写的优雅,便于浏览器的读写,我们自己的读写与其他程序员的读写。

比较深层次的前端,我还没有接触到,像js的原型链,闭包什么的,我还没有学习使用过。对于node.js,angular等技术,也在我的学习清单上,会在业余时间好好研究。

我的目标就是成为一个优秀的前端。


Part 2:

开始 html!

前端的开始就是自己写一个html网页吧。


这就是我的第一个页面。

其实感觉编程就像小时候玩的搭积木,想要完成一个完整的网页,我们就要在相应的位置放上相应的积木。

整个网页是放在一个叫<html></html>的大积木块里,这个大的积木块由一个叫<head></head>和一个叫<body></body>的积木块构成。

head部分主要就是一些网页的信息背景,大概可以理解成这个积木的名字,采用的形状规范等一些信息。

body部分就是显示在我们眼前的网页主体,这部分需要显示成什么样的,我们就用不同的积木块来搭建它,这些积木块就是我们所说的html标签。这些积木块有不同的大小形状用途,具体可以参照w3cschool的html教程,需要怎样的积木就去查它的名字,然后把它拼到我们的body大积木块中。


Part 3:

css 美化!

之前我们所写的html页面,我们所搭建的积木,因为默认的积木块是只有默认的样子的,大多数都没有颜色,有的必须独自占一行,不让别的积木块跟它在一起,基本上大多数的积木块都不会再我们所期望的位置和颜色。这时候我们就需要css,它的学名就叫做层叠样式表。

更形象的形容css的话,我觉得应该是一套可以给积木涂颜色,修改积木大小,修改积木属性的工具箱。

我们先通过一个叫选择器的东西选取到我们要改它样式的积木块,不用觉得选择器什么的很高端,之前的html标签,也就是我们的小积木块,我们都可以给它们自己的名字,赋予它们id或者class,选择器就是通过.class名或者#id名,获得它,可以这样理解:诶,那个id叫h1的积木过来,我要改你的形状,诶,那个class叫xxx里面的class叫***的积木过来,你也要被涂点颜色,之类的。

通过选择器获取到标签之后,我们就可以改它的各个属性。

width改它的宽度,height改高度,border给它边框,background给它背景颜色,等等,各种属性同样也可以在w3c的css教程里找到。

css还需要注意的就是盒子模型,定位的概念。这个我准备再写一篇专门介绍一蛤,这两样东西主要就是确定我们的小积木块在我们大积木块中的位置,可以让我们想要的东西在我们想要的地方显示出来。

css的引用也是要学一蛤的地方,有3种引用的方法,一种是在每个标签里使用,一种是在网页的头部使用,一种是在外部写好后引入,w3c的教程也有讲的很清楚。


基本上掌握了html和css,就能写出简单好看的静态页面了,有兴趣的同学可以试试做一蛤百度首页,有不会的地方就百度。应该还算是挺简单的。自学能力和解决问题的能力也是一个程序猿非常重要的地方。


未完待续.....




Ubuntu 12.04 + OpenCart 1.5.x LAMP部署全指南 LAMP栈是Linux环境下Web应用的基础运行框架,其核心由Linux操作系统、Apache Web服务器、MySQL数据库和PHP编程语言构成。理解各组件间的版本兼容性、模块依赖与权限协作机制,是保障电商系统稳定上线的关键技术前提。本文聚焦经典技术组合——Ubuntu 12.04 LTS与OpenCart 1.5.x的深度适配实践,解析PHP扩展缺失、MySQL严格模式冲突、.htaccess重写失效等高频故障根因,并提供可复用的初始化脚本、权限模型与SQL碎片治理方案,适用于老旧系统维护、LAMP底层 阅读详情

相关推荐

div+css精品教程 傻瓜式教学

div+css精品教程 傻瓜式教学div+css精品教程 傻瓜式教学div+css精品教程 傻瓜式教学div+css精品教程 傻瓜式教学div+css精品教程 傻瓜式教学div+css精品教程 傻瓜式教学

前端傻瓜式极其简单的豪华炫丽的分页器tpage使用教程

地址 :https://gitee.com/tiddar/jsbasic/tree/master/20192021 演示地址:https://tiddar.gitee.io/jsbasic/20192021/pager.html 使用教程: 引入tpage.js(或tpage.min.js),tpage.css文件 在html建立一个元素 在js脚本里构造出一个PageNation对...

tiddar的博客 1464

C#与AutoCAD插件开发实战:从零构建你的第一个自定义命令

本文为AutoCAD插件开发新手提供了一份完整的C#实战指南。从搭建Visual Studio开发环境、添加AutoCAD .NET API引用,到编写并注册第一个“Hello AutoCAD”自定义命令,再到实现一个交互式绘制十字线的实用命令,详细讲解了核心代码结构与调试技巧。文章旨在帮助工程师和设计师利用C#自动化重复绘图任务,显著提升工作效率。

weixin_29294597的博客 434

前端开发环境搭建

安装Node.js 1.下载地址:Node.js 2.安装Node.js(傻瓜式安装) 双击“node-v16.14.0-x64.msi”,开始安装node.js,自定义安装在D:\install\nodejs文件夹下。 安装完成后,在cmd控制台输入:node -v,控制台将打印出版本号,则表示安装成功 该引导步骤会将node.exe文件安装到D:\install\nodejs目录下,并将该目录添加进PATH环境变量 安装npm 由于新版的node.js已经集成了npm,所以在第2步时npm也一并安装

qq_35457469的博客 4815

国社科基金申报书“选题与说明依据”用AI怎么写?借助Gemini 3 Pro一次理清研究演进逻辑

研究进展部分要明确指出已有研究的不足与局限,比如方法不足、数据或材料受限、研究视角单一等等局限,之后要找准研究切入点,自然引申出自己的研究问题。为提升课题申报书的质量,学术史梳理要遵循述评结合、中外结合、新老结合的原则,不仅“述”,更要“评”,兼顾国内研究与国际学术动态,统筹经典研究与最新成果。它是对选题的整体概述,需阐明研究的具体问题、视角以及核心概念。2)存在问题或争议:结合已有研究或实践现状,指出该领域在理论建构、测量工具、实践应用或研究结论方面仍存在的不足、空白或争议,明确研究的必要性;

智能AI让学术科研更容易 942

从工具选型到落地实践:吃透 SAP Fiori Launchpad 配置工具体系

摘要: SAP Fiori Launchpad配置远非简单添加应用和分配角色,涉及技术目录、业务目录、Spaces/Pages等多层管理。官方推荐新工具分工:技术目录用FLPAM维护应用定义,业务目录用FLPCM编排应用组合,Spaces/Pages优化用户体验布局,而传统Groups模式已被标记弃用。这种分层治理模式(定义层-编排层-展示层)能有效解决传输混乱、升级兼容性问题,尤其适合大规模项目实施。关键在于区分技术配置与业务呈现,避免将所有功能堆砌在单一旧工具中。(149字)

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 103

傻瓜式前端开发-华为商业应用开发云(快速部署商业应用)

傻瓜式前端开发-华为商业应用开发云(快速部署商业应用) 开发平台 当然在这之前你先得申请一个开发者的账号https://devcenter.besclouds.com 平台的开发环境地址:https://dev.besclouds.com/studio/index.html#/ 这就是商业应用开发云的开发平台了App Studio了,可以看到,我已经做了两个管理系统,但两个系统前后却花了我不足一...

qq_44158529的博客 631

【部署】Kimi 接入OpenClaw完整步骤及关键注意事项

本文详细介绍了如何将Kimi AI接入OpenClaw系统的完整步骤。首先需确保环境满足OpenClaw版本要求和系统支持,然后通过配置向导完成本地网关设置和Kimi模型接入,包括API密钥配置。文章提供了详细的命令操作和界面截图指导,并重点说明了安全警告处理、服务状态检查、API密钥有效性验证等关键注意事项。最后还展示了Kimi流量消耗明细和问题排查方法,帮助用户顺利完成接入并解决常见问题。整个流程清晰明了,涵盖了从环境准备到最终验证的全部环节。

海兰 7186

傻瓜式搭建一个vue项目(学不会揍我)

话不多说,操作go go 1.安装Node.js,官方说明:Node.js® 是一个基于Chrome V8 引擎的 JavaScript 运行时环境。 中文官网地址:Node.js --- 选择长期维护版即可,安装 2.检测安装Node.js安装情况 打开cmd命令行,输入指令:node --version 出现如下版本号,安装成功 3.将nodejs的包管理器npm指向淘宝镜像, 输入指令:npm install -g cnpm –regist...

New_Wang的博客 867

【R语言】基于Biomod2集成平台探究物种分布区的构建流程(SDMs)

我为什么想要写这个内容呢?其实我已经想了很久了,但是一直没有把所有的代码给理清楚,此外这将是我之后研究的主要方向。本博客讲述了如何基于Biomod2集成平台构建物种分布模型的全流程,以及我在使用该模型时的一些心得,同时还有我提供的一些小福利(一键处理代码),可以十分快捷的帮助你完成SDMs的构建,写出你的中英文论文。

amyniez的博客,欢迎交流讨论 3889

简要介绍 | 两阶段点云目标检测:理论与实践

目标检测是计算机视觉中的一个重要任务,其目的是识别和定位图像中的物体。对于二维图像,这已经有许多有效的方法。然而,对于三维数据(如由LiDAR生成的点云数据),目标检测则更为复杂。

NLOS的博客 1307

前端基础——HTML傻瓜式入门(2)

前端基础——HTML傻瓜式入门(2)

AntonyCheng的博客 938

详细介绍用MATLAB实现基于A*算法的路径规划(附完整的代码,代码逐行进行解释)(一)--------A*算法简介和环境的创建

   本系列文章主要介绍基于A*算法的路径规划的实现,并使用MATLAB进行仿真演示。    一、 A*算法简介       A*(A-Star)算法是一种静态路网中求解最短路径最有效的直接搜索方法,也是解决许多搜索问题的有效算法。算法中的距离估算值与实际值越接近,最终搜索速度越快。      公式表示为: f(n)=g(n)+h(n),其中, f(n) 是从初始状态经由状态n到目标状态的代价估计,g(n) 是在状态空间中从初始状态到状态n的实际代价,h(n) 是从状态n到目标状态的最佳路径的估计代价。

慕羽★的博客 7万+

前端傻瓜式入门No.2

个人前端的相关知识感受总结。

github_36089478的博客 945

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

WEB前端学习

第一日:软件的安装和下载   1.百度搜索推荐使用webStorm前端神器进行开发,傻瓜式安装不必多说!      激活 前提:修改本地的hosts配置文件(/etc/hosts) 最后一行新增这句话:0.0.0.0 account.jetbrains.com       然后去 http://idea.lanyus.com/ 这个网站生成一个激活码放在打开的activetion cod...

weixin_30640291的博客 71

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

‌零代码爬虫的“傻瓜式”操作:小白也能上手

打开Web Scraper:在Chrome中访问目标网站(如),右键点击页面,选择“检查”打开开发者工具。在开发者工具面板顶部,切换到“Web Scraper”标签。创建新任务点击“Create new sitemap”(创建新站点地图),输入任务名称(如“产品爬取”)。点击“Add new selector”(添加选择器),这会弹出一个可视化界面。设置选择器在页面上移动鼠标,高亮显示你想爬取的元素(如产品标题、价格或图片)。例如,爬取产品列表时,点击一个产品标题,工具会自动识别类似元素。

2501_93879649的博客 537

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

typeorm 更新_Nest+TypeORM助你成为1%全栈工程师

1%全栈工程师在技术圈子里, 一个人若是自称全栈, 往往会遇到以下两种情况.如果前端自称全栈, 那么请回答:如何实现LRU缓存机制?MySQL的数据如何恢复到任意时间点?使用Redis有哪些好处?存储过程与触发器的区别?JVM垃圾收集器有哪些?谈谈优劣势比较?如果后端自称全栈, 那么请回答:元素浮动有哪些缺陷?如何用纯CSS实现一个三角形?如何实现寄生组合继承?谈谈JS的事件循环?AMD与CMD的...

weixin_33895554的博客 586

使用gulp构建前端(一)

为什么80%的码农都做不了架构师?>>> ...

weixin_33943836的博客 108

vue-cli(vue脚手架)快速搭建前端项目——Vue系列博客一

vue脚手架vue-cli搭建前端项目,并且路由分模块

Tang5ge的博客 1万+

typeorm_Nest+TypeORM助你成为1%全栈工程师

1%全栈工程师在技术圈子里, 一个人若是自称全栈, 往往会遇到以下两种情况.如果前端自称全栈, 那么请回答:如何实现LRU缓存机制?MySQL的数据如何恢复到任意时间点?使用Redis有哪些好处?存储过程与触发器的区别?JVM垃圾收集器有哪些?谈谈优劣势比较?如果后端自称全栈, 那么请回答:元素浮动有哪些缺陷?如何用纯CSS实现一个三角形?如何实现寄生组合继承?谈谈JS的事件循环?AMD与CMD的...

weixin_30290193的博客 317

WinBoat:国产Linux上运行Windows办公软件的傻瓜式解决方案

Wine作为成熟的Windows API翻译层,为Linux原生运行Windows程序提供了底层支撑,但其复杂的依赖管理、注册表配置与中文环境适配长期构成普通用户使用门槛。WinBoat并非Wine替代品,而是面向国产化办公场景深度定制的图形化封装引擎,通过预置模板(如Office 2016、金蝶K3、电子税务局)、自动依赖注入、中文输入法桥接及国密算法集成,将Wine转化为开箱即用的生产力工具。它直击‘wine failed to load ntdll.dll’等典型报错根源,解决麒麟V10、统信UOS等

weixin_30647423的博客 421

GPT-4o免费工作流:零代码实现类GPT-5级傻瓜式AI办公

大语言模型的实用价值正从‘能对话’跃迁至‘能办事’,其核心不在于参数规模升级,而在于交互范式重构与使用门槛压缩。GPT-4o作为当前OpenAI官方免费开放的最先进多模态模型,已具备低延迟、高响应质量与原生语音图像理解能力;依托浏览器端轻量封装、结构化提示工程与自动化触发机制,可构建免API、免注册、免配置的落地工作流。该方案聚焦真实办公场景——合同审查、文书润色、会议纪要生成、报错诊断等,通过责任转移(如自动登录管理、上下文分段、格式标准化)实现‘一句话指令→结果直达’闭环,让非技术用户真正享受AI生产力

weixin_30394669的博客 327

mybatis plus使用雪花算法_mybatis-plus maven代码生成器

前言初次接触mybatis plus是17年末,当时的版本是2.0+,在那之前公司使用的mybatis框架是tk.mybatis,也是衍生于mybatis的一款扩展框架。当时拿mybatis plus与tk相比虽然觉得plus功能已经足够强大了(如逻辑删除、sql打印插件、分页插件、雪花算法生成id等),但plus到了3.0之后新增的函数式编程才让我觉得开发者的体验质变版的提升,不会再出现字段输错...

weixin_30624185的博客 849

分享6款yyds的可视化搭建开源项目

之前我一直在研究低代码可视化相关的技术和产品, 也主导过很多可视化搭建项目, 主要目的是降低企业研发成本和缩短产品交付周期, 随着互联网技术的发展也陆陆续续有很多优秀的技术产品问世, 接下来我就和大家分享几款非常有价值的可视化搭建项目, 助力企业数字化转型.1. Formily——阿里巴巴统一前端表单解决方案上面我们看到的就是Formily的编辑器的截图, 它是由阿里技术团队开发, 完全开源, 我...

趣谈前端 1143

Node.js 是什么?Node.js 安装及配置环境 入门指南!

Node.js 是一个强大的 JavaScript 运行时环境,使开发者能够在服务器端构建高性能的网络应用程序。通过本文,我们了解了 Node.js 的基本概念、安装方法、环境配置,并通过一个简单的实践案例体验了 Node.js 的用法。要深入学习 Node.js,建议查阅官方文档和相关学习资源。Node.js 怎么按行读取文件?一文讲解 Node.js 按行读取文件的方法Node.js 的 assert 是什么?怎么使用 node.js 的assert 模块?Node.jsnpm。

396
下一篇: 前端傻瓜式入门No.2
泰穆格尔赛
博客等级 码龄10年 9粉丝 6原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值