WEB前端开发入门分享
关注
分享
扫一扫
文章平均质量分 95
以基础知识为基，逐步讲述前端开发工程师的入门教程
Oliver尹
跌倒了爬起来就好
展开
-
聊一聊一些关于npm、pnpm、yarn的事
整理了最近的闲聊，话题是前端各个包管理器，如果分享的不对或者有异议的地方，麻烦请及时告诉我~耐心看完，也许你会有所收获~10-15分钟左右；初级，最好对Node有一个基础认知；通过本文，你能大致知道npm，pnpm，yarn这些包管理工具的介绍及一些常用命令；nrm；原创 2024-04-09 10:48:05 · 1924 阅读 · 0 评论 -
《Vue3+TS》Vite的初体验及和webpack的初比对
Vite，发音 **/vit/，**可以说是今年大火的一个**前端构建工具**，其实在推出1.0版本的时候就可以初步的看出其功能的强大，只不过一直仅限于关注一下的状态，并未主动尝试去了解学习，随着尤大的近来的一再推荐，甚至直言用了vite就再也回不去webpack了之后就彻底点燃了我的兴趣，好吧，我也要学习一下（PS：卷不动了，卷不动了，大佬们不要动不动就彻底新干一个东西出来了，来不及学.....）原创 2022-05-11 23:16:12 · 2605 阅读 · 2 评论 -
css命名规则
之前一直没有了解过还有这方面的规则，很惭愧，警示一下自己。- 文件名必须由小写字母、数字、中划线组成- 文件必须用UTF-8编码，使用UTF-8（非BOM），在HTML中指定UTF-8编码，在CSS中则不需要特别指定因为默认就是UTF-8。- 单个CSS文件避免过大（建议少于300行）外联CSS文件适用于全站级和产品级通用的大文件。内联CSS文件适用于在一个或几个页面共用的CSS。...转载 2018-06-20 08:36:10 · 464 阅读 · 0 评论 -
《规范》前端编码规范
概述本规范旨在为前端程序的开发者提供规范化最新的指导，可用于程序员个人编译环境以及研发团队集成环境等场合的代码规范化检查；不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的；方针【强制】违反该项将被认为代码存在严重缺陷，前端程序团队必须遵守；【推荐】违反该项将被认为代码存在轻微缺陷，根据具体产品特性的不同，选择性地遵守；【参考】违反该项可被认为代码存在优化空间，从产品持续优化及人员技能提升的角度，参考使用环境要求【强制】Node.js 12 或更高版本，你可以使用 nvm原创 2021-02-28 14:54:46 · 834 阅读 · 0 评论 -
HTML（四） 样式，脚本的插入使用
样式样式的插入方式的几种方式：第一种：行内样式通过元素的style属性，style="font-size:16px"缺点：（1）大量的重复代码，维护困难（2）特殊效果无法实现，如：鼠标的移入等<span style="font-size:16px">你号！</span>第二种：内嵌样式通过style元素实现，<style&g...原创 2018-06-11 22:22:05 · 972 阅读 · 0 评论 -
HTML（一）HTML基础知识
简介html全称：Typer Text Markup Language，是一种超文本标记语言，当页面以特定的标记格式编写完成后，浏览器通过解析html文档将内容解析并展示出来，也就是我们看到的网页。html文件分为三个部分文档申明，告诉浏览器以那种方式解析html文档，例：在html5中的<!DOCTYPE html>，告诉网页这是个遵循h5规则的网页; 文档头部，<...原创 2018-06-06 20:57:26 · 358 阅读 · 0 评论 -
HTML（二） 元素分类
根据元素的作用，我们大致把元素分为以下几种：根元素，文档元数据，内容分区，分组内容，文本级语意，嵌入内容，表格，表单，脚本，交互，编辑。 根元素：即html元素，表示整个文档的根，是一个顶级元素，其他元素必须是该元素的后代，换句话说，除了文档声明，第一个标签就是html标签，然后其他的元素都是这个元素的子元素；<!DOCTYPE html><html>...原创 2018-06-07 20:49:45 · 1579 阅读 · 0 评论 -
HTML（三）文档标题，元数据
文档的标题，也就是打开浏览器后，显示在页卡上的名字，内容写在页面上的<head>里面的子元素<title></title>里的内容; 该标签只支持文本内容，假如写了<title><a href="#">这是一个标题</a></title>,输出的内容会是：<a href=&原创 2018-06-07 22:07:36 · 437 阅读 · 0 评论 -
HTML（五） 内容分区元素和超链接元素
内容分区元素在《元素分类》一文中中，大致为html中的元素分类了一下，本文重点讲述了内容分区元素；内容分区元素，简单的说，就是将页面划分区域的元素，比如有一块地方是标题，有一块地方是导航，还有一块地方是网页的主体内容，底部内容等等； article<article> 标签规定独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发;...原创 2018-06-14 22:29:21 · 2721 阅读 · 0 评论 -
前端学习 预习课程（css）
css：分外联，内联，行内样式外联：<link type="text/css" href="" rel="stylesheet"></link>内联：<style></style>行内：<a style="font-size:14px"></a>css注释手段：/原创 2018-06-24 10:31:09 · 392 阅读 · 0 评论 -
HTML（六） 文本元素
文本元素我个人的理解就是用来表述文字的标签； <p>xxxxx</p>：表示当前的内容是一个段落；<pre><pre>：表示预定义格式的文本，这个文本中的内容会将里面的格式完整的显示出来，类似于空格，换行这种都会原本的显示出来；<blockquote></blockquote>：表示内容是引用的，如果要标识引用...原创 2018-06-17 11:04:59 · 346 阅读 · 0 评论 -
HTML（七） 列表元素
列表分类三类，无序列表，有序列表，自定义列表 1.<ul><li></li></ul>无序列表这个元素没什么好说的，就是不断在ul里面嵌入li，每个li没有顺序之分，也是网页中最常用的一种列表 2.<ol><li></li><ol>有序列表<ol&a原创 2018-06-17 12:10:42 · 640 阅读 · 0 评论 -
HTML（八） img，热点，音视频元素，iframe
<img>（注意：没有闭合标签），常用属性有以下src：图片的引用地址 alt：图片不能显示的时候显示的内容 width：图片的宽度 height：图片的高度 srcset：根据分辨率显示不同的图片，以宽度描述的话以w结尾，以像素密度描述的话以x结尾，和size共同使用 sizes：做一个响应式例如（宽度描述）：<img sec=".../img.png" ...原创 2018-06-17 16:05:20 · 849 阅读 · 0 评论 -
HTML（九）表格元素
<table>表示二维数据，但是不应该做布局使用，早起使用table布局，但是现在即使不用h5的新标签，那么也应该使用div布局 <caption></caption>：表示表格的标题<colgroup></colgroup>：表示表格的一组列表span：表示列数<colgroup span=2 width=50...原创 2018-06-17 20:02:13 · 331 阅读 · 0 评论 -
CSS（三） 选择器
简单选择器：通过元素类型，class，id或者*匹配的一个或多个元素通过元素类型匹配的称作：标签选择器，例如 p{color:red}，设置所有的p元素里的字体颜色为红色 通过class匹配的称作：类选择器，例如 .coll{ color:red}，设置所有class中带有coll类名的元素里的字体颜色为红色 通过id匹配的称为：id选择器，例如 #coll{ color:red}，设置i...原创 2018-06-29 17:36:51 · 378 阅读 · 0 评论 -
HTML（十）表单内容
表单这部分是网页上的一个重点，实际应用中有很多地方都用到了表单，下面大概介绍以下表单的流程，具体请看下一章节；表单的使用过程大致有：构建表单-》配置表单-》验证表单-》服务器处理 构建表单所有的表单都是from组成的（注意，按钮只可以是button）<form> <div><label>姓名:<input></la...原创 2018-06-18 15:10:11 · 407 阅读 · 0 评论 -
HTML（十一） 表单内容-详解
标准里，表单里的控件大致有以下这些label：一个字段标签，包裹input时，点击字段也可以将焦点集中在输入框 output：标签定义不同类型的输出，比如脚本的输出 input：收集用户的输入信息 object：定义一个嵌入的对象 fieldest：把控件集合起来 meter：标签定义已知范围或分数值内的标量测量 select：做一些菜单项的选择 progress：进度条 te...原创 2018-06-18 16:40:45 · 295 阅读 · 0 评论 -
CSS（四） 选择器 二
继承initial（初始）：设置成这个后，属性值会取决于浏览器 inherit（继承）：设置成这个值后，会继承父元素的值，例如border:inherit，那么border会继承父元素的值 unset（未设置）：重置为未设置的状态，如果该元素本身支持继承，那么会设置成inherit，如果本身不支持继承，那么会设置成initial层叠浏览器对多个样式来源进行叠加，最终确定结果的过程，简...原创 2018-06-29 22:18:36 · 343 阅读 · 0 评论 -
CSS（五）文本
文本样式文字大小：font-size 文字样式：font-family 字体加粗：font-weight 字体倾斜：font-style 行高：line-height：2em合并：font:[[<font-style>||<font-variant>||<font-weight>||<font-stretch>]?<font-...原创 2018-06-30 13:37:15 · 201 阅读 · 0 评论 -
CSS（六） 盒模型
所有文档元素都会生成一个矩形框，用来描述这个文档元素在布局中所占的空间大小，而这个矩形框，我们在CSS中称作为盒模型，每个盒模型都有：外边距，边框，填充，内容 块级元素block常见的有<div><p><h1>....<h6><ol><ul><dl><table>&l原创 2018-06-30 16:34:22 · 292 阅读 · 0 评论 -
CSS（七） 背景
background-color背景颜色，值为color值，例如#ffffff，或者一个rgb/rgba值，如果是rgba值，背景色有透明度的时候，并不会造成内容变透明，只会造成背景透明background-image可以写多个，多个用,号隔开，如果有多张图片，那么会叠加起来，并不是前面的找不到生效后面的，写在前面的在上层，写在后面的在下层如果又有颜色，又有图片，那么颜色会在图片的...原创 2018-07-01 16:23:37 · 219 阅读 · 0 评论 -
CSS（八） display和position
display，指元素呈现框的类型常见的有，display:none|inline|block|inline-block|table...块级元素block：会新开始一行并且尽可能的撑满容器，并且此元素的前后默认带有换行符，可设置宽高并且显示 例如p,h1,div行内元素：只占据它对应标签的边框内所包含的空间，此元素强制设置成行内元素，不可设置宽高并同行显示，例如：span bu...原创 2018-07-01 16:47:05 · 864 阅读 · 0 评论 -
CSS（一）photoshop相关及切图
当我们拿到设计稿时，需要把设计稿制作成页面，因此就需要用到photoshop，然后使用photoshop切图关于阴影拾取色的时候，如果阴影的颜色包含透明度，那么阴影就不应该写成16进制颜色如：#f5f5f5，因为这种写法无法表示透明度，应该写成rgba的方式，rgba可以表示透明度 切图1.独立图层切图方法一：（1）新建空白文件（2）找到图形的图层（3）拖拽图形或图...原创 2018-06-27 11:38:18 · 374 阅读 · 0 评论 -
CSS（九） float
float，浮动布局，常用的值有left,right,none设置之后，默认宽度为文档宽度，同时脱离文档流，向指定的方向异动设置了浮动之后，脱离文档流但会相互影响，不会重叠期间，如果父元素没有设置高度，若子元素脱离文档流，会导致父元素没有内容而收缩如何设置父元素的高度没有收缩，那么就用到了clear属性在浮动后面加上<div style="clear:both...原创 2018-07-02 20:43:02 · 200 阅读 · 0 评论 -
CSS（十） flex
flex，又叫，弹性布局，在移动端是最常用的布局方式(因为移动端的浏览器版本都比较高，电脑端要兼容ie，因此...)w3c提出的新的布局方式，传统的为：display+float+position布局，而flex可以更方便，快速，完整，响应式的实现页面布局通过dislay:flex，设置指定容器为flex布局flex横向的主轴（X轴）叫做main-axis，其中左侧起始的位置叫做...原创 2018-07-02 21:55:31 · 349 阅读 · 0 评论 -
javaScript预习（一） 简介
简单的说，html是内容，css是格式，javascript是动作（数据交互，数据处理）document.write("hello world");document，文档，页面，通常称作为“对象”. 运算符，和+，-之类的一样write()，动作“hello world”，字符串（字符串是需要用双引号或单引号括起来的，参数则不用），动作的内容简单的说就是 . 这个运算...原创 2018-07-10 22:29:03 · 267 阅读 · 0 评论 -
javaScript预习（九） window
浏览器的全局对象是window 所有的全局变量实际都是window的成员，比如：var a=12;console.log(a); //输出：12console.log(window.a);输出：12另外可以通过for(var x in window)｛document.write(x+"<br/>")｝，输出所有的window对象成员当然，JavaScrip...原创 2018-07-16 10:38:27 · 206 阅读 · 0 评论 -
javaScript预习（十）document
doucment，代表当前这个文档我们可以通过，循环输出查看页面到底有哪些成员for(var x in document) document.write(x+"<br />")document.image //此时，输出的[object HTMLCollection]，//代表是一个对象（object），而collection表示这个是一个容器也就是数组...原创 2018-07-16 20:57:27 · 201 阅读 · 0 评论 -
javaScript（一）简介和语法
1995年，网景公司，Brendan Eich(布兰登·艾奇)之父简介ES是语言规范，JavaScript是规范的实现之一，基本上可以认为，两者是一个意思JavaScritp，最常见的运行环境就是浏览器和node.js（服务的语言）前端工程师必须学会的三种语言：HTML（控制页面的结构），CSS（控制页面的外观），JavaScript（控制页面的行为）推荐：外链的方式引入h...原创 2018-07-16 21:52:08 · 175 阅读 · 0 评论 -
CSS（十一）变形
transformtransform:none|<tarnsform-function>+rotate:默认顺时针旋转translate:平移，移动多少距离，两个值，第一个X轴，第二个Y轴（假如只有一个值，表示X轴），比如：transform:translate(50px，20%)，沿X轴正方向移动50PX距离,Y轴移动20%（参照物是自己）scale:缩放，<n...原创 2018-07-03 22:19:37 · 289 阅读 · 0 评论 -
CSS（二） css简介和语法
CSS，全称：Cascading Style Sheets，中文名为层叠样式表，引入css样式一共有三种方法，内联，内嵌，外联，通常我们使用外联的方式，可维护性强，方便跨文档使用 语法格式规则集css由一个个规则集组成了css样式，而规则集由选择器和一个声明块组成选择器：一串用连接符分隔的一个或多个简单选择器 声明块：{开始， }结束，包含了一个或多个属性声明注释以/*...原创 2018-06-28 21:35:04 · 226 阅读 · 0 评论 -
CSS（十二）动画
transitiontransition-property:none|<single-transition-property>["," <single-transition-property>]*，表示哪些属性要执行动画过程transition-duration:<time>[,<time>]*，动画的执行时间transition-tim...原创 2018-07-04 22:13:57 · 442 阅读 · 0 评论 -
javaScript（二）数据类型
JS共有七大数据类型JS的数据类型一共分为两大类：原始类型，对象类型。原始类型包括：Number（数值），String（字符串），boolean（布尔值），Symbol（字符，这个类型是ES6新增的），Null（一般表示无），Undefined（一般表示未定义）对象类型：除了原始类型的都是对象，对象是键值对的集合，值可以是原始值，也可以是对象NumberJS不区分整数和浮...原创 2018-07-17 22:39:43 · 185 阅读 · 0 评论 -
javaScript（三） 操作符与表示式
操作符算数运算符（+、-、*、/、%、**） 一元运算符（++、--、+、-） 赋值运算符（=、*=、/=、%=、+=、-=） 相等运算符（==，！=，===，！==） 关系运算符（>、<、>=、<=） 位操作符（~、&、|、^、<<、>>、>>>） 逻辑运算符（！、&&、||） 条件运算符原创 2018-07-17 23:15:58 · 199 阅读 · 0 评论 -
CSS（十三）字体图标（css）
字体图标使用自定义字体的方式，实现图标优点：（1）很容易的任意缩放（2）很容易的改变颜色（3）很容易的拥有透明效果（4）很容易的产生阴影（5）可以得到CSS很好的支持（6）浏览器支持很好（IE8+）字体图标库http://fontello.com/http://www.iconfont.cn/ /*常用，阿里巴巴*/引入@font-fac...原创 2018-07-05 22:27:11 · 356 阅读 · 0 评论 -
javaScript（四） 语句
条件语句if (条件) {语句} else {语句}，示例：var a=65;if(a>=70){console.log("a")}else if(a>=60){console.log("b")}else{console.log("c")}switch(表达式){case 值1: 语句 break;case 值2: 语句...原创 2018-07-18 21:37:35 · 145 阅读 · 0 评论 -
javaScript（五） 函数
概述子程序是一个大型程序中的某部分代码，有一个或多个语句块组成，它负责完成某项特定任务，而且相较于其他代码，具备有独立性，一般会有输入参数和返回值，提供对过程的封装和细节的隐藏；在JS中子程序被称作函数，也就是function，如果函数挂挂载在一个对象上，就称它为对象的方法；函数基础使用关键字function定义，通常用2种方式：函数的声明语句和函数的表达式//函数声明f...原创 2018-07-19 15:29:26 · 312 阅读 · 0 评论 -
javaScript预习（二）判断
判断当if或者else if后面括号里的关系值为true时，执行后面括号里的程序，如果都不符合，则执行else大括号里面的程序if(){}else if(){}else{}如果if else后面没有大括号，代表只有后面一条语句是属于if else的，第二条开始就不是了，示例：if(a>b) alert("1");else alert("2"...原创 2018-07-12 22:10:40 · 194 阅读 · 0 评论 -
javaScript预习（三）循环
whilewhile语句让同一段代码可以重复执行很多次，while会判断括号里的是否为真，如果为真，那么会一直执行大括号里的代码，直到结果为false才会跳出循环while(count<=a){ alert(count); count=count+1;}求最大公约数的循环：var u=42;var v=22;var temp=v;whi...原创 2018-07-13 09:26:49 · 247 阅读 · 0 评论 -
javaScript（十） Date
Date在开发中实际的应用：日期的展示 倒计时 时间的展示 日历控件通过Date构造函数创建一个新的对象，如：var time=new Date()Date()的参数可以是一个整数，代表这距离1970-1-1的时间Date(year,mouth[,date[,hours[,minutes[,second[,ms]]]]]) //年，月，日，小时，分钟，秒，毫秒，注意，这边...原创 2018-07-24 22:53:59 · 287 阅读 · 0 评论