前端
文章平均质量分 69
格子学前端
这个作者很懒,什么都没留下…
展开
-
JavaScript基础之字符串对象
文章目录前言1.基本包装类型2.字符串的不可变3.根据字符返回位置4.根据位置返回字符5.字符串操作方法6.replace()7.split()前言1.基本包装类型为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法我们看看下面代码有什么问题? <script> var str = 'zhangsan' c原创 2022-04-20 08:53:59 · 511 阅读 · 18 评论 -
JavaScript基础之数组对象
文章目录1.数组对象的创建2.检测是否为数组3.添加删除数组元素4.数组排序5.数组索引6.数组转化为字符串7.其他方法7.1 concat()7.2 slice()7.3 splice()1.数组对象的创建创建数组对象的两种方式:字面量方式new Array() <script> //字面量方法 let arr1 = [1, 3, 5] //new Array() let arr2 = new Array() </script>原创 2022-04-08 10:14:07 · 336 阅读 · 12 评论 -
JavaScript基础之Math、Data对象
文章目录1.Math对象2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结1.Math对象Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用 Math 中的成员Math对象的常用属性、方法有: <script> Math.PI //圆周率 Math.random() //返回一个[0,1)之间的随机数 Math.flo原创 2022-04-06 08:19:44 · 633 阅读 · 23 评论 -
JavaScript基础之对象
文章目录前言1.创建对象1.1利用字面量创建对象2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结前言在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等对象是由属性和方法组成的:1.属性:事物的特征,在对象中用属性来表示(常用名词2.方法:事物的行为,在对象中用方法来表示(常用动词)1.创建对象在 JavaScript 中,现阶段我们可以采用三种方式创建对象(obj原创 2022-04-05 09:22:58 · 461 阅读 · 18 评论 -
JavaScript基础之作用域、预解析
文章目录前言1.作用域1.1全局作用域1.2局部(函数)作用域1.3JS 没有块级作用域(ES6之前)2.变量的作用域2.1全局变量2.2局部变量2.3区别3.作用域链4.预解析4.1变量预解析(变量提升)4.2函数预解析(函数提升)前言通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突!!注意:此文章不考虑ES6语法1.作用域1.1全局作用域作用于所有代原创 2022-04-04 08:35:35 · 272 阅读 · 13 评论 -
JavaScript基础之函数
文章目录前言1.函数的使用2.函数的参数1.形参和实参2.形参和实参个数不匹配3.函数的返回值1.return语句2.return 终止函数3.return 的返回值4.break、continue、return 的区别4.arguments的使用5.函数的两种声明方式1.自定义函数方式(命名函数)2.函数表达式方式(匿名函数)前言函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。1.函数的使用函数在使用时分为两步:声明函数和调用函数①声明函数 &原创 2022-04-02 12:32:56 · 515 阅读 · 21 评论 -
JavaScript之数组
文章目录前言1.创建数组1.利用 new 创建数组2.利用数组字面量创建数组2.数组的索引(下标)3.遍历数组4.数组的长度5.数组中新增元素1.通过修改 length 长度新增数组元素2.通过修改数组索引新增数组元素6.举例应用1.翻转数组2.数组排序前言数组(Array) 是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。1.创建数组JavaScript 中创建数组有两种方式:①利用 new 创建数组②利原创 2022-04-01 08:48:59 · 362 阅读 · 18 评论 -
JavaScript之循环语句
文章目录前言1.for循环2.双重for循环3.while循环4.do while循环5.continue6.break前言1.for循环在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句<script> for (初始化变量; 条件表达式; 操作表达式) { // 循环体内部 }</script>举例:求1,2,3…99,100的和&原创 2022-03-31 09:39:55 · 1554 阅读 · 15 评论 -
JavaScript基础之运算符
文章目录前言1.算术运算符1.1浮点数的精度问题1.2递增和递减运算符2.比较(关系)运算符3.font-size4.font-style5.字体属性复合写法6.字体属性总结前言运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号1.算术运算符概念:算术运算使用的符号,用于执行两个变量或值的算术运算运算符描述实例+加10 + 20 =30-减10 - 20 =-10*乘10 * 20 =200/除原创 2022-03-29 08:26:03 · 896 阅读 · 19 评论 -
JavaScript数据类型归纳
文章目录1.数据类型1.1基本数据类型(不包括ES6)1.1.1Number2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结1.数据类型在代码运行时,变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后, 变量就确定了数据类型JS 把数据类型分为两类:基本数据类型(Number,String,Boolean,Undefined,Null)复杂数据类型(Object)1.1基本数据类型(不包括ES6原创 2022-03-28 08:27:24 · 366 阅读 · 25 评论 -
JavaScript基础语法(上)
文章目录1.注释1.1单行注释1.2多行注释2.输入输出语句3.变量3.1变量初始化3.2声明变量特殊情况3.3变量的命名规范1.注释1.1单行注释<script> // 格子学前端</script>快捷键:ctrl + / (让光标位于需要注释的那一行上,并使用快捷键)1.2多行注释<script> // HTML // CSS // JavaScript</script>快捷键:ctrl + / (原创 2022-03-26 09:08:13 · 992 阅读 · 28 评论 -
JavaScript初识
文章目录前言1.JavaScript简介2.浏览器执行JS简介①渲染引擎②JS 引擎3.JS的组成①ECMAScript②DOM文档对象模型③BOM浏览器对象模型前言JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言1.JavaScript简介JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思)脚本语言: 不需要编译,运行过程中由 js 引擎 逐行来进行解释并执行现在也可以基于 Nod原创 2022-03-25 08:30:46 · 305 阅读 · 14 评论 -
CSS3基础之3D转换
文章目录1. 三维坐标系2. 3D位移translate3d3. 透视perspective3.1`translateZ`4. 3D旋转`rotate3d`5. 3D呈现`transform-style`1. 三维坐标系三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的x轴: 水平向右 注意: x 右边是正值,左边是负值y轴: 垂直向下 注意: y 下面是正值,上面是负值z轴: 垂直屏幕 注意: 往外面是正值,往里面是负值tips: 3D 转换我们主要学习工作中最常用的3原创 2022-03-24 08:04:59 · 850 阅读 · 19 评论 -
CSS3基础之动画
文章目录前言1.用keyframs定义动画2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结前言动画animation是CSS3中新增的内容之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。1.用keyframs定义动画2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结...原创 2022-03-23 08:50:18 · 1438 阅读 · 16 评论 -
CSS3基础之filter、calc函数、transition过渡
文章目录1.CSS3盒子模型1. 1 content-box1. 2 border-box2.滤镜filter3.calc函数4.transition过渡1.CSS3盒子模型CSS3 有两种不同的盒模型,可以分别通过设置box-sizing的content-box或border-box这两个属性来得到1. 1 content-box<style> div { box-sizing: content-box; }</style>c原创 2022-03-22 08:17:17 · 836 阅读 · 20 评论 -
CSS3基础之2D转换
文章目录1.2D转换1.1移动translate1.2旋转rotate1.3旋转中心点transform-origin2.缩放scale3.2D转换综合写法4.2D转换总结1.2D转换**转换(transform)**是可以实现元素的位移,旋转,缩放等效果移动:translate旋转:rotate缩放:scale在CSS中的二维坐标系1.1移动translate2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位<style> div原创 2022-03-21 08:16:03 · 609 阅读 · 32 评论 -
CSS3之新增选择器
文章目录1.属性选择器1.利用属性选择器就可以不借助于类或者id选择器2.属性选择器还可以选择 属性 = 值的某些元素3.属性选择器可以选择属性值开头的某些元素4.属性选择器可以选择属性值结尾的某些元素2.结构伪类选择器2.1 `E:first-child` 和`E:last-child`2.2 `nth-child(n)`2.3`E:first-of-type`和`E:last-of-type`3.伪元素选择器1.属性选择器属性选择器可以根据元素特定的属性来选择元素,这样就可以不用借助于类或者i原创 2022-03-19 08:41:45 · 730 阅读 · 16 评论 -
CSS基础之元素的隐藏与显示
文章目录前言1.display显示隐藏2.visibility显示隐藏3.overflow溢出显示隐藏4.display与visibility的区别前言类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现,这时候我们就需要用到元素的隐藏和显示1.display显示隐藏display属性用于设置一个元素应如何显示<style> div { display: block; /* 同时具有转换为块级元素和显示元素的作用原创 2022-03-18 08:12:50 · 879 阅读 · 20 评论 -
CSS基础之定位
文章目录前言1.定位的组成2.静态定位static3.相对定位relative4.绝对定位absolute5.子绝父相6.固定定位fixed7.粘性定位sticky8.定位模式总结前言定位可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置,并且可以压住其他盒子1.定位的组成定位 = 定位模式 +边偏移定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:值语义static静态定位relative相对原创 2022-03-17 08:33:36 · 419 阅读 · 20 评论 -
HTML基础标签汇总
文章目录一、HTML 文档结构1.基本结构标签2.文档类型声明标签3.lang语言种类4.字符集二、标签1.标题标签2.段落标签3.换行标签4.文本格式化标签5.盒子标签6.图像标签7.超链接标签8.特殊字符9.表格标签10.列表标签11.表单标签一、HTML 文档结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-原创 2022-03-13 09:50:41 · 1812 阅读 · 46 评论 -
CSS基础之盒子模型
文章目录前言1.盒子模型的组成2.边框(border)3.内边距(padding)4.外边距(margin)①外边距典型应用②外边距合并③清除内外边距前言css页面布局三大重点: css 盒子模型 、 浮动 、 定位1.盒子模型的组成border(边框)content(内容)padding(内边距)margin(外边距)2.边框(border)CSS 边框属性允许你指定一个元素边框的样式和颜色边框由三部分组成:边框宽度(粗细)、边框样式、边框颜色属性作用原创 2022-03-12 08:34:51 · 345 阅读 · 18 评论 -
CSS基础之CSS三大特性
文章目录1.层叠性2.继承性3.优先级1.层叠性所谓层叠性是指多种CSS样式的叠加,它是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性覆盖掉原则:样式冲突,遵循的原则是就近原则。 哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠2.继承性子标签会继承父标签里面的某些样式,例如文本颜色和字号等Tips:恰当地使用继承可以简化代码,降低CSS样式的复杂性3.优先级当同一个元素指定多个选择器,就会有优原创 2022-03-11 08:49:03 · 1013 阅读 · 24 评论 -
CSS基础之CSS背景
文章目录前言1.background-color2.background-image3.background-repeat4.background-position5.background-attachment6.背景复合写法7. 背景半透明8.背景总结前言通过 CSS 背景属性,可以给页面元素添加背景样式,包括background-color、background-image、background-repeat、background-position等1.background-color<原创 2022-03-09 07:41:53 · 413 阅读 · 25 评论 -
CSS基础之CSS元素显示模式
原创 2022-03-07 08:29:30 · 222 阅读 · 16 评论 -
CSS基础之CSS复合选择器
原创 2022-03-05 08:03:26 · 313 阅读 · 26 评论 -
CSS基础之CSS文本属性
文章目录前言1.color2.text-align3.font-size4.text-decoration5.text-indent6.line-height7.文本属性总结前言CSS 文本属性可以设置文本的 外观,比如文本颜色、对齐文本、装饰文本、文本缩进、行间距的等1.colorcolor属性用于定义文本的颜色 <style> div { color: blue; } </style>原创 2022-03-03 08:19:37 · 2142 阅读 · 23 评论 -
CSS基础之CSS字体属性
文章目录前言1.font-family2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结前言CSS 字体属性用于定义字体系列、大小、粗细和文字样式(如斜体)1.font-familyCSS 使用 font-family属性设置文本的字体系列 <style> div { font-family: Arial, "Microsoft Yahe", "微软雅黑"; }原创 2022-03-01 12:13:55 · 684 阅读 · 20 评论 -
CSS基础之CSS选择器
CSS选择器前言一、基础选择器分类1.标签选择器2.类选择器3.类选择器-多类名4.id选择器5.通配符选择器总结前言要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。一、基础选择器分类1.标签选择器标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式 <style> 标签名 { 属性1: 属性值1; ..原创 2022-01-24 12:50:23 · 528 阅读 · 15 评论 -
CSS基础之CSS简介
CSS简介前言一、什么是CSS?二、CSS语法规范三、CSS代码风格1.样式格式书写2.空格规范前言如果说HTML是网页内容的载体,那么CSS就是网页的外衣。CSS与HTML一样,都是网页的的重要组成元素,两者相辅相成,缺一不可一、什么是CSS?CSS是层叠样式表的简称,有时我们也会称之为CSS样式表或级联样式表。与HTML类似,CSS也是一种标记语言,它主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边框等)以及版面的布局和外观显示样式等。C..原创 2022-01-23 10:12:37 · 613 阅读 · 13 评论 -
HTML常用标签之表单标签
HTML常用标签之表单标签前言一、表单域二、表单元素1.input 输入表单元素2.select 下拉表单元素3.textarea 表单元素前言在网页中,我们需要跟用户进行交互,手机用户资料,此时就需要用到表单标签在HTML中,一个完整的表单通常由表单域、表单控件(表单元素)和提示信息三个部分构成一、表单域表单域是一个包含表单元素的区域在HTML标签中,<form>标签用于定于表单域,以实现用户信息的收集和传递<form>会把它范围内的表单元素信息提交给服务..原创 2022-01-21 21:42:18 · 3436 阅读 · 20 评论 -
HTML常用标签之列表标签
列表标签前言一、无序列表Tips二、有序列表Tips三、自定义列表Tips四、代码实现总结前言列表标签的主要作用是页面布局,它相比表格标签,更加整齐、整洁、有序,作为布局更加自由和方便关于表格标签可以点这里→HTML常用标签之表格标签一、无序列表<ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义,基本语法格式如下~Tips无序列表的各个列表项之间没有顺序之分,是并列的<ul>只能嵌套<..原创 2022-01-20 08:38:29 · 8310 阅读 · 16 评论 -
HTML常用标签之表格标签(合并单元格)
表格标签之合并单元格前言一、合并单元格的方式二、目标单元格三、删除单元格四 、代码实现总结前言关于表格标签基础点这里→HTML常用标签之表格标签在某些特殊情况下我们需要把多个单元格合并成一个单元格,这时候我们就需要用到表格标签中的合并单元格操作。一、合并单元格的方式跨行合并rowspan="合并单元格的个数"跨列合并colspan="合并单元格的个数"二、目标单元格我们只需将代码写入目标单元格即可实现合并单元格的操作跨行:最上侧单元格为目标单元格跨列:最左侧单元..原创 2022-01-16 20:14:17 · 9009 阅读 · 16 评论 -
HTML常用标签之表格标签
表格标签的主要作用是显示、展现数据,使得数据的显示非常规整,提高可读性。先来介绍三个最常用的表格标签:1. <table> </table> 适用于定义表格的标签2. <tr> </tr>用于定义表格中的行,必须嵌套在<table> </table>中3. <td> </td>用于定义表格中的单元格,必须嵌套在<tr> </tr>中下面来看看它们的具体实现~<!DOCTY原创 2022-01-13 14:00:00 · 2394 阅读 · 0 评论 -
HTML中的特殊字符
在HTML页面中,有一些特殊的符号无法直接使用,我们可以使用下面的特殊字符来进行代替在以上的特殊字符中我着重介绍一下空格、小于、大于这三个比较常用的字符1. 空格符 在html中我们不能直接通过打空格的方式来隔开文字,而是应该在文字间插入空格符 (nbsp的全称是No-Break Space,意为不间断空格)2. 小于号 <小于号<的英文全称是less than,在这里我们可以借助英文全称来记忆它~3. 大于号 >原创 2022-01-12 20:38:37 · 12886 阅读 · 0 评论 -
HTML常用标签之注释标签
在HTML文档中添加一些便于阅读和理解的但又不需要显示在页面中的文字时,我们可以使用注释标签。注释标签的具体使用格式为 <!-- ‘内容’ -->,下面我们来看看具体代码的实现~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2022-01-12 20:16:16 · 2963 阅读 · 0 评论 -
HTML常用标签之超链接标签
超链接标签<a>用于定义超链接,作用是从一个页面链接到另一个页面,超链接标签有几个属性比较重要,下面来简单介绍一下1. href <a href="跳转目标地址"></a>href用于指定链接目标的url地址,它是超链接标签的必须属性,简单用法如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-eq原创 2022-01-09 14:00:00 · 1170 阅读 · 0 评论 -
HTML常用标签之图像标签
图像标签<img>用于定义HTML页面中的图像,它有多种属性,下面简单介绍一下它的一些重要属性1. src <img src="图像URL"/> src是`<img>`标签的必须属性,用于指定图像文件的路径,我们可以通过在src属性中写入图片关于html文件的相对路径或者绝对路径来达到使网页中显示图片的目的,具体操作如下~<!DOCTYPE html><html lang="en"><head> <meta原创 2022-01-08 23:21:16 · 5356 阅读 · 0 评论 -
HTML常用标签之div和span标签
<div>和<span>可以抽象地理解为盒子标签,但它们彼此也有一些差别,具体的用法如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=原创 2022-01-09 09:30:00 · 616 阅读 · 1 评论 -
HTML常用标签之文本格式化标签
文本格式化标签有很多种,包括粗体、斜体、删除线、下划线等,下面的这张表格简单地介绍了文本格式化标签地使用标签地具体使用,见以下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont原创 2022-01-08 22:18:24 · 1590 阅读 · 1 评论 -
HTML常用标签之换行标签
最近在学习html,在这里分享下自己的学习笔记~换行标签<br/>,简单易懂,咱们直接来看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de原创 2022-01-08 22:05:07 · 18438 阅读 · 1 评论