![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端入门学习
文章平均质量分 54
麻瓜呀
前端小小白
展开
-
JavaScript-流程控制语句(笔记)
流程控制语句条件语句if语句if语句是条件语句, 也称为选择语句. 它通常结合else一起使用, 表示如果…就…否则…if (测试条件) { // 语句块1 // 当测试条件为真, 则执行这里} else { // 语句块2 // 当测试条件为假, 则执行这里}案例1: 输入一个数字, 如果这个数是偶数, 则弹出对话框显示’偶数’, 否则弹出对话框显示’‘奇数’’let a = Number(prompt('请输入一个数字'));if (a %原创 2022-04-11 21:38:12 · 1006 阅读 · 0 评论 -
JavaScript基本数据类型(笔记)
检测数据类型使用typeof 运算符可以检测数据类型, 可以直接写在浏览器控制台进行检测, 也可以通过console.log输出到浏览器控制台1. Number数据类型科学计数法:<script> console.log(3e8); // e表示有多少0(零); console.log(3e-5); console.log(0.3e5);</script>控制台输出结果是3000000000.00003300原创 2022-04-03 22:46:17 · 995 阅读 · 0 评论 -
前端入门: 前端开发主要有哪些层? 语言和功能分别是什么
前端开发主要有哪些层? 语言和功能分别是什么?分为三层, 结构层, 样式层, 行为层1. 结构层语言html, 功能搭建页面骨架,描述文档的语义,放置页面的小部件2. 样式层语言是css, 功能是美化页面,搭建网页的布局结构,功能作用使用浮动,盒模型等相关css属性搭建出体系和结构,以及文本和css3的一些属性来美化和装饰页面3. 行为层语言是JavaScript,功能是给页面添加交互效果,实现表单验证,实现动态交互,实现数据请求和收发等等...原创 2022-04-02 22:42:02 · 1882 阅读 · 0 评论 -
JavaScript变量的定义方式
JavaScript变量的定义方式:varetconst实际开发中能用const就不用let, 能用let就不用var三者区别区别(面试题)var会进行声明的提升, 称为预解析;var声明的变量没有会计作用域的概念(不是指函数), 它会挂载到全局window;var允许重复声明同名变量, 前面会被后面覆盖let和const是es6新特性const 常量, 不能更改...原创 2022-03-31 20:38:47 · 1205 阅读 · 0 评论 -
JavaScript - 语句
一. 表达式和语句表达式:表达式是一组代码的集合,JavaScript解释器会将其计算出一个结果语句:js 整句或命令,js 语句是以分号结束(可以省略)比如: if语句 for 循环语句区别:表达式计算出一个值,但语句用来自行以使某件事发生(做什么事)表达式 3 + 4语句 alert() 弹出对话框其实某些情况,也可以把表达式理解为语句,因为它是在计算结果,也是做事二. 分支语句根据条件选择执行代码,这种就叫分支结构分支语句可以让我们有选择性的执行想要的代码分支语原创 2022-03-16 10:42:38 · 243 阅读 · 0 评论 -
JavaScript - 运算符
一. 算术运算符数学运算符也叫算术运算符,主要包在这里插入图片描述括加、减、乘、除、取余(求模)。+:求和-:求差*:求积/:求商%:取模(取余数)开发中经常作为某个数字是否被整除算术运算符执行的优先级顺序同时使用多个运算符编写程序时,会按着某种顺序先后执行,我们称为优先级。JavaScript中 优先级越高越先被执行,优先级相同时以书从左向右执行。乘、除、取余优先级相同加、减优先级相同乘、除、取余优先级大于加、减使用 () 可以提升优先级总结: 先乘除取余后加减,原创 2022-03-16 01:24:04 · 1261 阅读 · 0 评论 -
JavaScript-类型转换
类型转换一. 为什么需要类型转换JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚。坑: 使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。console.log('10000'+'2000') //输出结果100002000此时需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成我们需要的数据类型。二.隐式转换某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐原创 2022-03-15 23:49:47 · 65 阅读 · 0 评论 -
JavaScript数据类型-基本数据类型
数据类型计算机世界中的万事万物都是数据。计算机程序可以处理大量的数据,为什么要给数据分类?1.更加充分和高效的利用内存2.也更加方便程序员的使用数据JS 数据类型整体分为两大类:基本数据类型number 数字型string 字符串型boolean 布尔型undefined 未定义型null 空类型引用数据类型object 对象function 函数array 数组一. 数字类型JavaScript 中的正数、负数、小数等 统一称为 数字类型注: JS原创 2022-03-15 23:33:16 · 2652 阅读 · 0 评论 -
JavaScript-变量
一. 变量是什么用户输入的数据我们如何存储起来?答案:变量变量:白话:变量就是一个装东西的盒子。通俗:变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆。注意:变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。二. 变量的使用1.声明变量:要想使用变量,首先需要创建变量(专业说法: 声明变量)语法:let 变量名声明变量有两部分构成:声明关键字、变量名(标识)let 即关键字 (let: 允许、许可、让、要原创 2022-03-15 23:06:01 · 1449 阅读 · 0 评论 -
JavaScript介绍
一. JavaScript是什么?JavaScript 是一种运行在客户端(浏览器)的编程语言二. 浏览器中的JavaScript组成是什么?ECMAScript( 基础语法 )、web APIs (DOM、BOM)三. JavaScript 书写位置内联 JavaScript内部 JavaScript外部 JavaScript内部 JavaScript直接写在html文件里,用script标签包住规范:script标签写在上面拓展: alert(‘你好,js’) 页原创 2022-03-15 22:43:58 · 1565 阅读 · 0 评论 -
移动端登录页面(2)-less样式结构练习
步骤二 : less样式结构@import url(./base.less); /* 引入全局样式 */body { background: url('../images/bg.png') no-repeat top / 10rem;}.layout { .box { width: 8.5rem; height: 10.5rem; background-color: #fff; margin: 5rem auto 0; border: 1px so原创 2022-03-10 18:51:35 · 1519 阅读 · 0 评论 -
移动端登录页面-(1)HTML结构搭建练习
目标: 利用css样式布局, 实现登录页面效果效果图:步骤一: 搭建html结构<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-sc原创 2022-03-10 18:48:53 · 4037 阅读 · 2 评论 -
CSS(flex布局)
CSS(flex布局)移动端网页布局一般用Flex布局模型一. Flex的优势和特点浏览器提倡的布局模型,页面渲染性能高布局简单、方便避免浮动脱标的问题兼容性较高(不兼容低版本浏览器)二. 组成部分弹性容器(父级, 添加display:flex的盒子)弹性盒子(子级)主轴(默认水平)侧轴(默认垂直)三. 主轴对齐方式使用justify-content调节元素在主轴的对齐方式justify-content: 属性值属性值作用flex-start默认值原创 2022-03-05 19:40:16 · 168 阅读 · 0 评论 -
CSS 文字限制换行加溢出显示为省略号
/* 存放两行文字溢出显示为省略号 */.twoLine { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}原创 2022-03-05 19:20:05 · 133 阅读 · 0 评论 -
CSS3 空间转换和动画
一. 空间转换使用transform属性实现元素在空间内的位移、旋转、缩放等效果平移transform:translateZ() : 可以实现z轴方向的位置偏移(z轴是指垂直屏幕向外的轴)transform:translate3d(x,y,z)旋转transform:rotateZ() : 平面旋转就是围绕Z轴旋转transform:rotateX()transform:rotateY()transform:rotate3d(x,y,z,deg) : x,y,z的作用是描述一原创 2022-03-04 20:20:28 · 77 阅读 · 0 评论 -
字体图标, 平面转换, 背景渐变
一. 字体图标优点:本质是文字, 缩放不失真, 可任意改变图标颜色;轻量级, 降低服务器压力;简洁的小图标都可以用字体图标;可用外链接在线图标库, 不用将图标的资源文件下载到本地, 减少本地项目的体积,为以后的项目上线打包做准备二. 平面转换 transform平移transform:translate取值:可以正负具体的像素单位;百分比(参照盒子自身尺寸)transform:translateX();transform:translateY();如果transla原创 2022-03-04 20:01:22 · 84 阅读 · 0 评论 -
CSS布局(选择器扩展: 链接伪类选择器, 焦点伪类选择器, 属性选择器)
一. 链接伪类选择器场景:常用于选中超链接的不同状态选择器语法:选择器语法功能a:link { }选择a链接 未访问过 的状态a:visited { }选择a链接 访问过 的状态a:hover { }选中 鼠标悬停 的状态a: active { }选中 鼠标按下 的状态注意点:如果需要同时实现以上四种伪类状态效果,需要按照 LVHA 顺序书写其中 :hover伪类选择器 使用更为频繁,常用于选择各类元素的悬停状态二. 焦点伪类选择器场景:用于原创 2022-02-25 20:55:51 · 179 阅读 · 0 评论 -
用CSS画三角形技巧(面试题)
场景:在网页中展示出小三角形时,除了可以使用图片外,还可以使用代码完成。实现原理:利用盒子边框完成实现步骤:设置一个盒子设置四周不同颜色的边框将盒子宽高设置为0,仅保留边框得到四个三角形,选择其中一个后,其他三角形(边框)设置颜色为透明通过调整不同边框的宽度,可以调整三角形的形态...原创 2022-02-25 20:45:41 · 202 阅读 · 0 评论 -
CSS布局(定位+装饰)
网页常见布局方式标准流块级元素独占一行 → 垂直布局行内元素/行内块元素一行显示多个 → 水平布局浮动可以让原本垂直布局的 块级元素变成水平布局定位可以让元素自由的摆放在网页的任意位置一般用于 盒子之间的层叠情况一. 定位定位的常见应用场景可以解决盒子与盒子之间的层叠问题定位之后的元素层级最高,可以层叠在其他盒子上面可以让盒子始终固定在屏幕中的某个位置使用定位的步骤设置定位方式属性名:position常见原创 2022-02-25 20:42:02 · 291 阅读 · 0 评论 -
css样式补充(精灵图, 背景图片大小, 文字和盒子阴影, 过渡)
css样式补充一. 精灵图介绍场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度例如:需要在网页中展示8张小图片• 8张小图片分别发送 → 发送8次• 合成一张精灵图发送 → 发送1次使用步骤创建一个盒子通过PxCook量取小图片大小,将小图片的宽高设置给盒子将精灵图设置为盒子的背景图片通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position:x y (原创 2022-02-25 14:17:42 · 431 阅读 · 0 评论 -
CSS布局(浮动)
一. 浮动的作用早期的作用:图文环绕现在的作用:网页布局场景:让垂直布局的盒子变成水平布局,如:一个在左,一个在右二. 浮动代码属性名:float属性值:属性名效果left左浮动right右浮动三. 浮动的特点浮动元素会脱离标准流(简称:脱标),在标准流中不占位置相当于从地面飘到了空中浮动元素比标准流高半个级别,可以覆盖标准流中的元素浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动浮动元素会受到上面元素边界的影响浮原创 2022-02-22 08:35:32 · 192 阅读 · 0 评论 -
CSS布局(结构伪类选择器与伪元素)
一. 结构伪类选择器使用结构伪类选择器 在HTML中定位元素作用与优势:作用:根据元素在HTML中的结构关系查找元素优势:减少对于HTML中类的依赖,有利于保持代码整洁场景:常用于查找某父级选择器中的子元素选择器选择器说明E:first-child {}匹配父元素中第一个子元素, 并且是E元素E:last-child {}匹配父元素中最后一个子元素, 并且是E元素E:nth-child(n) {}匹配父元素中第n个子元素, 并且是E元素E原创 2022-02-22 08:14:59 · 176 阅读 · 0 评论 -
CSS盒子模型
掌握盒子模型 边框、内边距、外边距 的设置方法一. 盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子盒子模型CSS 中规定每个盒子分别由:内容区域(content)内边距区域(padding)边框区域(border)外边距区域(margin)二. 内容的宽度和高度作用:利用 width 和 height 属性默认原创 2022-02-19 19:00:08 · 139 阅读 · 0 评论 -
CSS三大特点
继承性特性:子元素有默认继承父元素样式的特点(子承父业)可以继承的常见属性:colorfont-style、font-weight、font-size、font-familytext-indent、text-alignline-height……注意点:可以通过调试工具判断样式是否可以继承图继承的应用 - 好处:可以在一定程度上减少代码 - 常见应用场景:可以直接给ul设置 list-style:none 属性,从而去除列表默认的小圆点样式直接给body标签设..原创 2022-02-19 08:03:45 · 915 阅读 · 0 评论 -
CSS元素显示模式
块级元素属性:display:block显示特点:独占一行(一行只能显示一个)宽度默认是父元素的宽度,高度默认由内容撑开可以设置宽高代表标签:div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……行内元素属性:display:inline显示特点:一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高代表标签:•a、span 、b、u、i、s、strong、ins、em、del……行内块元素属性..原创 2022-02-16 20:34:20 · 140 阅读 · 0 评论 -
CSS背景相关属性
背景颜色属性名:background-color(bgc)属性值:颜色取值:关键字、rgb表示法、rgba表示法、十六进制……注意点:背景颜色默认值是透明: rgba(0,0,0,0) 、transparent背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色背景图片属性名:background-image(bgi)属性值:background-image: url('图片的路径')注意点:• 背景图片中url中可以省略引号•..原创 2022-02-16 20:19:36 · 430 阅读 · 0 评论 -
CSS 选择器进阶
复合选择器后代选择器: 空格作用:根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素选择器语法:选择器1 选择器2 { css }结果:在选择器1所找到标签的后代(儿子、孙子、重孙子…)中,找到满足选择器2的标签,设置样式注意点:后代包括:儿子、孙子、重孙子……后代选择器中,选择器与选择器之前通过 空格 隔开子代选择器:>作用:根据 HTML 标签的嵌套关系,选择父元素 子代中 满足条件的元素选择器语法:选择器1 > 选择器2 {..原创 2022-02-16 19:21:35 · 275 阅读 · 0 评论 -
CSS字体和文本样式
CSS字体和文本样式字体样式字体大小: font-size数字+px字体粗细: font-weight正常: normal或400; 加粗: bold或700字体样式: font-style正常: normal; 倾斜italic字体类型: font-family字体类型: font属性连写文本样式text-indent文本缩进取值:数字+px数字+em(推荐: 1em=当前标签的font-size的大小)text-align文本原创 2022-02-16 08:15:17 · 389 阅读 · 0 评论 -
CSS入门: css介绍与基础选择器
CSS的介绍CSS的中文名称: 层叠样式表CSS的作用: 给页面中的HTML标签设置样式CSS的语法规则:<style> p { color: red;}</style>p 是选择器, color是属性名, red是属性值CSS常见属性:css常见属性作业color文字颜色font-size字体大小background-color背景颜色width宽度height高度注意点:CSS标..原创 2022-02-15 09:32:20 · 351 阅读 · 0 评论 -
HTML字符实体
常见字符实体场景:在网页中展示特殊符号效果时,需要使用字符实体替代结构:&英文;常见字符实体:原创 2022-02-14 08:36:12 · 882 阅读 · 0 评论 -
HTML语义化标签
没有语义的布局标签-div和span场景:实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签div标签:一行只显示一个(独占一行)span标签:一行可以显示多个有语义的布局标签(了解)场景:在HTML5新版本中,推出了一些有语义的布局标签供开发者使用标签:标签名语义header网页头部nav网页导航footer网页底部aside网页侧边栏sectoin网页区块article网页文章..原创 2022-02-14 08:29:29 · 65 阅读 · 0 评论 -
HTML表单标签
input系列标签的基本介绍场景:在网页中显示收集用户信息的表单效果,如:登录页、注册页标签名:inputinput标签可以通过type属性值的不同,展示不同效果type属性值:标签名type属性值说明inputtext文本框, 用于输入单行文本inputpassword密码框, 用于输入密码inputradio单选框, 用于多选一inputcheckbox多选框, 用于多选多inputfile文件选择, 用于之后上传文..原创 2022-02-14 08:22:01 · 185 阅读 · 0 评论 -
html表格标签
表格标签完成一个简单的表格,需要由几个标签组成?分别表示什么?tr标签:表格每行td标签:对于主题的每一项内容表格基本标签的嵌套规范是什么?table > tr > td表格相关属性场景:设置表格基本展示效果常见相关属性:属性名属性值效果border数字边框宽度width数字表格宽度height数字表格高度注意点:实际开发时针对于样式效果推荐用CSS设置表格标题和表头单元格标签场景:在表原创 2022-02-13 20:38:42 · 144 阅读 · 0 评论 -
HTML列表
HTML列表列表的应用场景场景: 在网页中按照行展示关联性的内容,如: 新闻列表, 排行榜, 账单等特点: 按照行的方式, 整齐显示内容种类: 无序列表, 有序列表, 自定义列表无序列表场景:在网页中表示一组无顺序之分的列表, 如: 新闻列表标签组成:标签名说明ul表示无序列表的整体, 用于包裹li标签li表示无序列表的每一项, 用于包含每一行的内容注意点:ul标签中只允许包含li标签li标签可以包含人员内容有序列表场景原创 2022-02-13 15:23:52 · 130 阅读 · 0 评论 -
HTML标签学习(下)
路径的介绍场景: 页面需要加载图片, 需要先找到对应的图片同理: 页面需要找到图片, 也是要通过路径才能找到路径可分为:绝对路径 (了解)相对路径 (常用):概念普及:当前文件: 当前的html网页目标文件: 要找到的图片相对路径: 从当前文件开始时处罚找目标文件的过程相对路径分类:同级目录: 当前文件和目标文件在同一个目录中(代码步骤: VS Code操作: 直接敲./后, 会自动提示同级目录文件,直接选择目标文件)下级目录: 目标文件在下级目录中(代码步骤: VS原创 2022-02-12 15:19:50 · 314 阅读 · 0 评论 -
HTML标签学习(上)
标题标签场景: 在新闻和文章的页面中, 都离不开标题, 用来突出显示文章主题代码: h系列标签<h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6>语义: 1~6级标题, 重要程度一次递减特点:文字都有加粗文字都有变大,..原创 2022-02-11 17:15:25 · 428 阅读 · 0 评论 -
Web前端入门基础认知
目标: 认识网页组成和五大浏览器, 民去Web标准的构成, 使用HTML骨架搭建出一个网页前端基础概念铺垫:网页的基本组成元素: 文字, 图片, 音频, 视频, 超链接等五大浏览器 + Web标准HTML初体验HTML: 超文本标记语言HTML骨架结构VS Code的使用语法规范:HTML的注释标签的构成: 双标签/单标签标签的属性: 属性名= “属性值”标签的关系: 父子 + 兄弟...原创 2022-02-11 15:58:31 · 473 阅读 · 0 评论 -
HTML标签的属性
标签的完整结构图属性注意点:标签的属性写在开始标签内部标签上可以同时存在多个属性属性之间以空格隔开标签名与属性之间必须以空格隔开属性之间没有顺序之分双标签的属性需要卸载开始标签还是结束标签中?开始标签标签上可以同时存在几个属性?多个标签名与属性值件, 属性与属性之间以什么隔开?空格...原创 2022-02-11 15:49:11 · 793 阅读 · 0 评论 -
HTML的概念
HTML介绍HTML (Hyper Text Markup Language) 中文译为: 超文本标记语言专门用于网页开发的语言, 主要通过HTML标签对网页中的文本, 图片, 音频, 视频等内容进行描述HTML中是通过什么来对网页中的文本, 图片, 音频, 视频等内容进行描述的?HTML标签HTML标签示例:我要变粗<strong>我要变粗</strong>HTML页面固定结构网页类似于一篇文章:每一页文章内容是有固定的结构的, 如:开头, 正文,原创 2022-02-11 11:03:36 · 410 阅读 · 0 评论 -
前端学习 - Web标准
Web标准中分成三个构成:构成语言说明结构HTML页面元素和内容表现CSS网页元素的外观和位置等页面样式(如:颜色, 大小等)行为JavaScript网页模型的定义与页面交互Web标准的记忆方法Web标准要求页面实现: 结构, 表现, 行为三层分离结构:HTML (决定了身体)表现: CSS (决定了样式美观)行为: JavaScript (决定了交互的动态效果)Web标准的构成有哪些?分别通过什么语言表示?结构:HTML→页面元素表原创 2022-02-10 20:55:25 · 234 阅读 · 0 评论