前端开发基础学习
关注
分享
扫一扫
文章平均质量分 62
包含 HTML CSS基础知识点以及练手项目 持续更新中 更新完毕后可以使用这个小专栏进行前端开发基础的学习~
----------------------2021.6.7更新-------------
主要方向后端开发 前端进行同步学习
敲代码的小提琴手
半路弃坑AI科研，专心学习前端开发的23届计算机学院学生，热爱前端并为之奋斗ing~希望能和大家多多交流 一起进步！
展开
-
【JS底层知识】我们给变量赋值时 赋值内容是什么？变量内存空间保存的是什么？
简单学习下 从JS底层的角度来看 我们给对象赋值之后 会发生的事情原创 2021-09-21 11:19:56 · 401 阅读 · 1 评论 -
展开运算符 ... 的用法
... 展开运算符的方法原创 2021-09-08 17:30:14 · 350 阅读 · 0 评论 -
JS 变量声明 const let var
JS变量声明 const let var的区别原创 2021-07-28 13:01:24 · 542 阅读 · 3 评论 -
简易学习JavaScript的Data对象 并且利用js完成简易倒计时功能
简易倒计时功能的完成）灵感来源：知识点涉及：Data对象格式化日期 年月日星期格式化时间 时分秒Data总的毫秒数（时间戳）重点： 倒计时案例有待改进灵感来源：京东的秒杀页面学习了js的Data对象之后我们也可以实现类似的功能哦~接下来 我们先复习一下Data对象的一些细则然后再完成这个肥肠重要的 倒计时案例~看完本文后 我们会对 时间戳 的印象更加深刻嗷~知识点涉及：为了完成这个小案例 我们需要了解的知识：js的内置对象：Data利用Data对象达成目的Data对象初步感知D原创 2021-02-16 13:58:49 · 1221 阅读 · 0 评论 -
JavaScript对象要点记录——利用Math对象-随机数方法random()进行随机数生成&随机点名~
利用Math对象中的random函数进行一个随机点名的应用Math.random();//返回一个随机的小数x 0<=x<1//可以查阅MDN文档 其中内容很详细console.log(Math.random());//获得随机数//应用：得到两个数之间的随机整数 并且 包含这两个整数function getRandom(min,max){ return Math.floor(Math.random()*(max-min+1))+min;//固定的算法}//检验con原创 2021-02-13 23:12:05 · 694 阅读 · 1 评论 -
JavaScript基础语法要点记录-函数返回值相关规则【需要记住！】
// 函数返回值注意事项1.return 后面的代码不会被执行！2.return 只能返回一个值（如果有多个值，最终返回值为最后一个）3.函数的返回值为[xxx,xxx,xxx]——结果输出的是一个数组，可以用来进行多个计算结果的获得。4.我们的函数如果有return 则返回的是 return 后面的值，如果函数没有 return 则返回undefined// 1. return 终止函数function getSum(num1,num2){ return num1 + num2;原创 2021-02-01 12:25:57 · 224 阅读 · 0 评论 -
前端疑难困惑小笔记-5 CSS3中的nth-child(n) 选择器 用案例把知识点分析得明明白白~
选择器作用nth-child(n)选择器的作用：nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是一个数字，一个关键字，或者一个公式。W3school给的例子<!DOCTYPE html><html><head><style> p:nth-child(2){background:#ff0000;}</style></head><body><h原创 2021-02-21 12:13:28 · 670 阅读 · 3 评论 -
前端疑难困惑小笔记-4 CSS学习中 background-color属性在盒子模型中控制了哪部分的背景颜色呢
background-color这个属性可以用来控制盒子背景的颜色 但是控制的是哪一块儿呢我们举个简单的例子来看一下【1】边框透明的情况<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2021-02-21 10:29:25 · 481 阅读 · 2 评论 -
前端爱好者的小白学习之路 4-2 CSS学习笔记-一篇就看懂浮动 重点：清除浮动；浮动特性-脱标
实际开发中常用的三种布局方式有：（不包括移动端学习的新的布局方式）浮动 标准流 定位想要做好web开发 就一定要学好这三种摆放盒子的方法~这篇小文儿 就来总结一下 浮动 的相关知识什么是浮动？CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。在之前的学习中 我们布局都使用的标准流 但在实际开发中 好多问题用标准流无法解决 这时候 我们的“浮动“就闪亮登场啦！标准流的使用场景纵向的盒子放在一列的时候原创 2021-02-18 21:35:30 · 1038 阅读 · 2 评论 -
前端疑难困惑小笔记-3 巧用margin和定位达到特定网页效果
问题引入逛电脑端淘宝的时候我们经常可以看到随着我们的鼠标移动 会出现这样的效果——出现了一个框框！如何做到这个框框 相信大家也都轻车熟路使用ul li:hover;再设置边框的颜色但是如果在盒子紧贴在一起的时候我们如果只是简单地使用如上的方法会出现什么样的效果呢？我们简单举例来探索一下举例探索初步解决方法使用如上代码 创造出紧贴在一起的几个盒子当我们简单地添加之后，效果——诶。。蓝色边框没惹 那咋办嘛利用定位 我们有两个手段来解决这个问题。改进方法一盒子没有定位—原创 2021-02-13 21:16:51 · 161 阅读 · 1 评论 -
前端爱好者的小白学习之路 4-1 CSS学习笔记-盒子模型基础知识
经过前面一个阶段对HTML CSS基础语法的学习之后 我们已经可以写出来一个简单的网页了HTML基础知识总结CSS基础语法总结但这些想要做好网页布局 只有那些基础知识肯定是不够的诶（学会了这些基础知识 我们只能对网页中单一的一块内容进行设计或者是凌乱地对一整片网页进行布局 太不系统啦！）所以我们引入了“盒子模型”这个概念，不理解盒子模型 是不能清晰明了地写出来一个网页的~我们看到的网页中一个个分块显示的内容，其实就是一个个的盒子作为一名初入前端领域的小白肯定是要从盒子模型开始 像搭积原创 2021-02-10 01:49:11 · 2707 阅读 · 3 评论 -
前端疑难困惑小笔记-2 盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;其中：h-shadow 必需的。水平阴影的位置。允许负值v-shadow 必需的。垂直阴影的位置。允许负值blur 可选。模糊距离spread 可选。阴影的大小color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表inset 可选。从外层的阴影（开始时）改变阴影内侧阴影水平阴影h-shadow：必选 正——阴影向右偏移垂直阴影v-shadow：必选 正——阴影向下偏移原创 2021-02-01 16:56:09 · 296 阅读 · 0 评论 -
前端爱好者的小白学习之路-2 从0基础到学会HTML（超文本标记语言）入门前端 这一篇小白文就够了~
文章目录1.写在前面2.笔者的学习方式3.HTML开学！4.根据菜鸟教程总结的笔记4.1 学习之前要了解的4.2 菜鸟教程HTML笔记直通车[1]HTML基础概念HTML标签HTML 元素[2]HTML基础html标题html段落html链接html图像HTML元素【3】HTML属性【4】HTML折行【5】文本格式化标签HTML文本格式化标签HTML链接*HTML写链接的时候要始终将正斜杠添加到子文件夹减少HTTP请求HTML 头部[6]HTML 图像图像标签（ ）和源属性（Src）Atl属性图像高度与宽的原创 2021-01-26 21:21:03 · 5103 阅读 · 10 评论 -
前端爱好者的小白学习之路-2【补充】 学会HTML你能写出来什么样子的页面？
作为笔者另一篇文章的补充本文基本素材以及练习思路来自 黑马程序员 pink老师~【1】练习最基础页面的写法~页面效果预览代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2021-01-26 21:20:02 · 798 阅读 · 4 评论 -
前端爱好者的小白学习之路-3 CSS学习笔记-用CSS来提升网页开发的效率 学扎实CSS基础语法 麻麻再也不用担心我的网页页面布局太丑辣
更多细节请参考CSS参考手册1.写在前面关于CSS基础语法【1】相比于HTML 内容及难度上有明显的提升【2】CSS用来美化布局网页【3】CSS中最为困难的地方 就是 布局结构只有熟练地掌握了CSS语法基础 才能理解之后更复杂的知识点并灵活地利用这些知识去进行 网页的布局阅读完此文 你会得到——菜鸟教程文章目录1.写在前面2.我的学习方式CSS基础语法CSS背景简写属性的顺序background-position的详情CSS文本文本颜色文本缩进文本对齐方式文本修饰文本转换更多文本属性…更多原创 2021-01-30 01:35:29 · 2250 阅读 · 4 评论 -
前端疑难困惑小笔记-1 行内（内联）元素 块级元素 内联块状元素
行内（内联）元素、块级元素特性设置行内元素不可以设置宽、高 但是块级元素可以display:inline-block;//同时具有行内元素与块级元素的属性*块元素：<div> <p> <h1> <ul> <ol> <table> <form>【1】width height 即宽高设置有效【2】即使设置了宽度，盒子依旧独占一行*内联元素：<a> <span> <br>原创 2021-02-01 16:17:54 · 269 阅读 · 0 评论