- 博客(58)
- 收藏
- 关注
RSS订阅原创 数据类型-1.25弹出网页警示框
【注意：alert 引号里边是不允许随意自己换行的，会报波浪线 错误】<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" cont.
2020-09-24 23:21:58
284
原创 数据类型-1.24字符串型String
2.3字符串型String字符串型 可以是 引号中 的任意文本 ，其语法为双引号"" 和 单引号 ‘’因为html 里使用双引号 所以js里推荐使用单引号。常见错误❌因为没有加引号 会被认为是js代码，但js没有这些语法 <script> // 常见错误 Uncaught ReferenceError: 错错错 is not defined var str = 错错错 ; console.log(str); <
2020-09-21 21:23:52
211
原创 数据类型-1.22数字型Number
1.数据类型的简介1.3数据类型的分类JS把数据类型分为两类：简单数据类型 （Nunmer、String、Boolean、Undifined、Null ）复杂数据类型（object ）2.简单数据类型2.1简单数据类型（基本数据类型）简单数据类型说明默认值Number数字型，包含 整形和浮点型值 如 21、0.210Boolean布尔值类型 ，如 ture 、false ，等价于 1 和 0falseString字符串类型，如 “张三” 注
2020-09-12 08:25:56
739
原创 数据类型-1.21数据类型的简介-为什么需要数据类型-JS是一种 弱类型 或者说 动态语言
1.数据简介1.1为什么需要数据类型在计算机中，不同的数据所占用的存储空间是不同的，为了方便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。（类比生活：一个瘦的人可以睡一个单人床，那一个胖胖的人睡一个双人床。一个瘦的人睡一个双人床太浪费空间了）简单来说，数据类型 就是数据的类别型号，比如 姓名 “张三” 年龄 18 这些数据的类型是不一样的。变量是用来存放数据的容器那么，变量属于哪一种数据类型呢？1.2变量的数据类型【JS是一种 弱类型 或者说
2020-09-12 08:25:45
364
原创 数据类型-1.18交换两个变量的值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.
2020-09-12 08:25:04
147
原创 数据类型-1.17变量的命名规范
1.变量name 这个名字 比较特殊<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
2020-09-12 08:24:38
99
原创 数据类型-1.16变量语法扩展
1.变量1.4变量语法扩展1.更新变量一个变量被重新赋值后，它的原有的值就会被覆盖，变量值将以最后一次的赋值为准。<script> // 1.更新变量 var myname = '小小'; console.log(myname); myname = '大大'; console.log(myname); </script>2.同时声明多个变量同时声明多个变量，只需要写一个var，多个变量名之间用英文逗号隔开。// 2.声明
2020-09-12 08:24:27
72
原创 数据类型-1.15变量案例弹出用户名
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.
2020-09-12 08:24:16
82
原创 数据类型-1.14变量案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.
2020-09-12 08:24:03
224
原创 数据类型-1.13变量的使用
变量在使用时分为两步：1.声明变量 2.赋值1.声明变量//声明变量var age ; // 声明一个名称为age的变量var 是JS 的一个关键字，用来声明变量 （variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员去管。age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间2.变量的使用2.赋值age = 10 ; //给 age 这个变量赋值为10//把10给age//把10存到age 里边去= 用来把 右边的
2020-09-12 08:23:42
143
原创 数据类型-1.12什么是变量--本质：变量是程序在**内存**中申请的一块用来*存放数据***的空间**。
1.变量的概述1.1什么是变量白话：变量就是一个装东西的盒子通俗：变量是用于存放数据的容器。我们可以通过变量名获取数据，甚至可以修改数据【比如：把用户输入的变量保存下来，以供后边使用】1.2变量的本质本质：变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间，一个房间就可以看做是一个变量。【先申请一间房间—>然后再住进去】如何找到这个房间呢？通过房间号码即，通过变量名，找到这个变量...
2020-09-10 19:54:07
965
原创 数据类型-1.11变量导读
目标：能够说出变量的主要作用能够写出变量的初始化能够说出变量的命名规范能够画出变量是如何在内存中存储的能够写出交换变量的案例变量概述变量的使用变量语法扩展变量命名规范交换变量案例...
2020-09-10 19:37:23
65
原创 数据类型-1.10JS输入输出语句-1.alert(msg)2.-console.log(msg)-3.prompt(info)
输入内容–>程序内部去处理–>结果 -->把结果返回给用户3.JS输入输出语句方法说明归属alert(msg)浏览器弹出警示框浏览器console.log(msg)浏览器控制台打印输出信息浏览器prompt(info)浏览器弹出输入框，用户可以输入浏览器 <script> // 这是一个输入框 prompt('请输入你的年龄'); //alert 弹出警示框 输出的 展示
2020-09-10 19:32:47
206
原创 数据类型-1.9JS注释
<script> // 1.单行注释 Ctrl + / /* 2.多行注释 默认 Shift + Alt + A 2.多行注释 vscode中可以 修改多行注释的快捷键：Ctrl + Shift +/ */ </script>
2020-09-10 18:55:19
66
原创 数据类型-1.8JS三种书写位置-行内-内嵌-外部
1.初识JS1.6JS初体验JS有3种书写位置，分别为行内、内嵌、外部1.行内JS<input type="button" value="唐伯虎" onclick="alert('秋香姐')">可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick注意单引号双引号的使用：在HTML中，我们推荐使用双引号；在JS中我们推荐使用单引号可读性差，在html中编写大量JS代码时，不方便阅读引号易错，引号多层嵌套匹配时，非常容易弄混特殊情况下才使
2020-09-10 17:46:52
263
原创 数据类型-1.7JS的三个组成部分-ECMAScript-DOM-----文档对象模型-BOM-----浏览器对象模型
1.初识JS1.5JS的组成1.ECMAScriptECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上两者都是ECMAScript语言的实现和扩展ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准2.DOM-----文档对象模型（后续，学习API的时候再详细解释）文档对象模型（DocumentOb
2020-09-10 17:26:00
549
原创 数据类型-1.6浏览器执行JS的过程-*浏览器本身并不会执行JS代码，而是通过内置JS引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转化为机器语言）
1.初识JS1.4浏览器执行JS简介浏览器由两部分组成：渲染引擎(内核)和JS引擎(JS解释器0渲染引擎：用来解释HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkitJS引擎：也称JS解释器。用来读取网页中的JS代码，对其处理后运行，比如chrome浏览器的V8（最快的JS引擎）浏览器本身并不会执行JS代码，而是通过内置JS引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转化为机器语言），然后由计算机去执行，所以JS语言归为脚本语言会 逐行 解释
2020-09-10 17:03:51
188
原创 数据类型-1.4JavaScript初识导读-1.5初识JS-是一种运行在客户端的脚本语言- 脚本语言：不需要编译，运行过程由js解释器（js引擎）逐行解释并执行。
能够说出JavaScript是什么能够知道JavaScrip的发展史能够说出浏览器执行JavaScript的原理能够说出JavaScript由哪三部分组成能够写出JavaScript三个输入输出语句1.初始JS1.1JS历史布兰登.艾奇，1995年利用10天完成JS的设计在网景公司工作，原来叫做LiveScript，后来在于Sun合作之后将其改为JavaScript1.2JS是什么JS是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思）脚本语言：不需要编译
2020-09-10 16:50:57
677
原创 数据类型-1.3-计算机基础-存储-单位换算
2.计算机基础2.1计算机的组成软件是运行在硬件上边的。2.2数据的存储1.计算机内部使用二进制 0 1 来表示数据2.所有的数据，包括文件、图片等最终都是以二进制数据（0 1 ）的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中。4.硬盘、内存都是保存的二进制数据。2.3数据存储单位bit<Byte<KB<GB<TB位（bit） : 1bit可以保存一个0或者1（最小的存储单位）字节（Byte） ：1B=8b千字节（KB）：1KB=
2020-09-10 16:23:07
145
原创 数据类型-1.1-计算机基础导读-1.2-编程语言
能够说出什么是编程语言能够区分编程语言和标记语言的不同能够说出常见的数据存储单位以及换算关系能够说出内存的主要作用以及特点1.编程语言1.1编程就是让计算机为解决某个问题而使用某种程序 设计语言编写程序代码，并最终得到结果的过程。...
2020-09-10 13:39:40
93
原创 CSS定位-6.3绝对定位-position: absolute；--是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位--好好看6，7例子
1.什么是绝对定位（1.）是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位【好好理解这句话】即，【绝对定位，是相对于，已经定位的父元素进行定位的，就是，它会从它的父元素一点一点往上层去找，（如果它的父元素的定位属性是除了position:static 之外的其他的呢，它就以它的父元素作为参考点；如果它的父元素就是普普通通的static，那么它就继续往上找，如果都不是，就找到了body这一块，也
2020-09-01 22:15:30
632
原创 CSS定位属性-6.2相对定位-position: relative；--注意几个加粗标黑的地方-相对定位并不会让元素脱离标准流-通常和位置属性top、left、bottom、right一起使用
【两步走定位的模式，重难点和位置 】1.什么是相对定位相对定位是指元素相对于标准文档流中其的默认位置，来进行定位的当position属性值设置为relative时，开启相对定位模式**相对定位并不会让元素脱离标准流 **因此相对定位也不会影响到周围其它元素的排布实际使用时，相对定位一般都是和位置属性一起使用。因为单独使用，你也看不到啥效果啊【如果不和位置属性一起使用，只是单纯设置position: relative; 而已，那它还是会在原来的那个坑里，不会有什么变化】例如：.box {
2020-09-01 18:21:23
869
原创 CSS定位-6.1定位属性-使用position属性来表示定位-static、relative、absolute、fixed---z-index该属性只有在position值为absolute时才有效
1.定位属性定位属性用于设置元素在页面中的位置使用position属性来表示定位它的值可以设置为 static（标准流布局）、relative（相对布局）、absolute（绝对布局）、fixed（固定布局）默认值为static，表示标准流布局2.定位位置在使用 1.定位属性 定位元素位置的时候，可以指定上下左右四个属性来控制元素的位置top用于设置元素定位时距离上部的偏移距离bottom用于设置元素定位时距离下部的偏移距离left用于设置元素定位时距离左侧的偏移距离right用于设置元
2020-09-01 11:21:13
930
原创 CSS浮动-5.4实战案例-三列布局-使用双飞翼布局---不理解为啥？？太难了
1.如何实现一个三列布局【网页中常用的布局方式，中间是网页的内容主体，两侧是两个边栏，放置一些导航呀，广告呀，新闻呀等等】实现一个左中右布局左右两侧宽度固定中间内容宽度能够自适应圣杯布局略掌握一个就好~2.双飞翼布局！！！【很厉害，专门用于解决上边那种布局难题的。也是大厂面试中经常考察的知识点。】第一步：使用float属性让左中右三列浮动第二步：使用负margin属性让左右两列与中间列处于同一水平线上第三步：在中间列增加一个div内容元素，设置margin值为左右两列的宽度最后，别忘
2020-08-31 20:20:09
267
原创 CSS浮动-5.3常用技巧清除浮动-clearfix方案h；- .clearfix:after {content: ““；clear: both；display: block；三；个；可；选护航}
大厂开发当中经常使用的清除浮动的方案：clearfix方案使用伪元素after在父元素尾部添加一个元素对这个添加的伪元素应用清除浮动的样式必备三大样式：content、clear、diaplay可选三大样式：height、font-size、visibility（可见不可见） height: 0px;font-size: 0px;visibility: hidden;【可选样式，主要为了保证呀，我们在实际开发的过程中，浏览器的兼容性能更好一些。他们的目标只有一个，就是要保证after伪类不在页
2020-08-31 17:07:43
2863
原创 CSS浮动-5.2消除浮动-总的来说，介绍了两种方法-1- .clear {clear: both； } ＜div class=“clear“＞＜/div＞ 2-overflow: hidden；
清除浮动 我是正在游泳的left 我是正在游泳的right 上例，会造成父元素塌陷，即，box div高度变成0但是，我们又不能给其设置固定的height的方法去解决这个问题，因为这样的话，他就不能自适应高度了。那这个问题如何解决呢？答：本节所学 clear可以解决.clear { clear: both; } 1.为什么要清除浮动？元素...
2020-08-30 22:47:29
131
原创 CSS浮动-5.1浮动比较重要-使用folat属性来设置元素的浮动-left-right-none
1.什么叫浮动浮动是指将元素脱离文档流向左或者向右布局
2020-08-30 21:34:44
468
原创 CSS盒模型-4.5display属性-block、inline、inline-block以及大厂经常面试的问题-消除间隙body {font-size: 0px；}
1.神奇的display属性disply属性用于控制元素如何显示（内联/块级）当属性值为block时，会将元素以块级元素的方式显示当属性值为inline时，会将元素以内联元素的方式显示当属性值为inline-block时，会将元素以内联块级元素的方式显示，会同时具有这两个显示特性【给div设置宽高，就可以看出其也具有块级元素的特性了（因为，只有给块级元素设置宽高才有效果。对于给内联元素设置宽高是不生效的，没有作用，内联元素的大小，取决于内容的多少）】当属性值为none时，元素将会被隐藏例如：.
2020-08-30 16:28:53
226
原创 CSS盒模型-4.4外边距-margin左右属性值设为autoa时，可以设置元素左右居中显示-大厂面试中，经常问道的一个关于margin的问题！非常重要！块级叠加40内联60
1.什么是外边距外边距是指元素边框之外的区域设置外边距会在元素外围创建额外的空白空间外边距的作用是控制元素和元素之间的距离使用margin属性来设置外边距还可以使用margin-top、margin-bottom、margin-left、margin-right 分别控制元素不同方向的外边距属性值可以是长度值或者百分比，如果为长度值，不能为负值...
2020-08-30 12:11:20
690
原创 CSS盒模型-4.3边框-border-style、border-width、border-color、--复合属性--border-top、right、bottom、left
1.边框围绕元素内容和边距的一条边线使用属性border代表边框我们可以使用边框属性精确控制这条线的样式、宽度、颜色2.边框样式使用border-style设置边框的样式属性还可分别设置上下左右四条边框的样式属性默认值为none，表示无边框还可以设置多种样式，分别为dotted（点状）、dasheed（虚线）、solid（实线，最常用）、double（双边线）、groove、ridge、inset、outset3.边框宽度使用border-width设置边框的宽度属性和边框样式一样，还
2020-08-27 17:45:08
1938
原创 CSS盒模型-4.2-内边距-重要的是padding简写-（padding-top、padding-right、padding-bottom、padding-left）、 padding为简写属性
1.什么是内边距内边距是指在HTML元素内容和边框之间的区域使用CSS属性padding来表示属性值为长度或百分比，默认值是0注意取长度值时，不能为负值百分比值相当于父元素的长度比例2.内边距的各个小属性使用padding-top定义上内边距使用padding-right定义右内边距使用padding-bottom定义下内边距使用padding-left定义左内边距padding为简写属性例如：.box1 { padding :20px;}.box2 { padding-top
2020-08-27 16:10:07
649
原创 CSS盒模型-4.1-一个盒模型是由4大部分组成的 元素内容（content）物品、内边距（padding）泡沫、边框（border）纸壳盒、外边距（margin）
1.什么叫盒模型盒模型，英文叫做Box Modle所有的HTML元素都可以看作一个盒子模型我们可以把盒模型就想象成为一个盒子盒模型中主要用来对HTML元素进行布局时使用2.盒模型的作用浏览器在渲染页面的时候就会根据VSS盒模型的规则，将所有的HTML元素表示成为一个矩形的盒子，之后CSS的相关属性就作用在这些盒子上，决定了盒子的大小位置和属性特性，最终显示出来3.盒模型的构成一个盒模型是由4大部分组成的元素内容（content）物品、内边距（padding）泡沫、边框（border）纸壳盒
2020-08-27 14:42:59
1295
原创 CSS常用属性-3.5背景-1.background-color-2.background-image-3.-repeat-4.-position-5.-attachment-6.background
1.background-color用来设置元素的背景颜色默认值为 transparent（透明的）3种方式直接设置颜色 颜色名、十六进制颜色、rgb函数颜色名red、十六进制颜色 #ff0000、rgb函数rgb(255,0,0)2.background-image通用来设置元素的背景图片默认值 none还可以设置一个图片的url地址，来作为背景图片3.background-repeat（平铺）主要用来配合background-image属性一起使用，用来设置背景图片的平铺方式（默认
2020-08-23 22:08:08
173
原创 CSS常用属性-3.4-列表-1.list-style-image-2.list-style-position-3.list-style-type-4.list-style
列表属性 总而言之，就是干一件事，就是控制列表的图标1 list-style-image用于指定一个图片作为列表项前面的标记默认值为none可以设置一个图片的 url 作为标记图片2 list-style-position用于设置在什么位置显示列表项前面的标记默认值为outside 外面（在li外部）还可设置为inside 里面（在li内部）【内 外 这边，自己打开开发者工具就能理解了】3 list-style-type用于设置列表项前面图标的类型默认值为dis
2020-08-23 12:22:17
311
原创 CSS常用属性-3.3元素尺寸-1.width-height-2.min-width、min-height-3max-width、max-height
1.宽度和高度使用width属性定义宽度使用height属性定义高度属性值为 auto 、 长度 150px 、百分比2.最小宽度和最小高度（一个元素的下限，最低的值）使用min-width属性定义最小宽度使用min-height属性定义最小高度【如果其宽高度，已经大于最小宽高，那就按照其该有的宽高显示呗】例如 效果是100pxwidth:50px;min-width: 100px;效果是200pxwidth:200px;min-width: 100px;3.最大宽度和
2020-08-23 11:11:23
838
原创 CSS常用属性-3.2文本-1color-2line-height-3对齐方式text-align-4方向direction-5缩进text-indent-6text-decoration7间隔8阴影
文本1.颜色使用color属性来设置文本的颜色属性值可以是颜色名、十六进制颜色值、RGB三原色颜色值2.行高 （可以使每行上下间距加大）使用line-height属性来设置文本行高默认值为 normal其它属性值 可以为长度值、百分比3.对齐方式使用text-align属性来设置文本的对齐方式属性值有 默认left左 right右 center中4.方向使用direction属性设置文本的方向属性值有 ltr(左) 、rtl(右)7：40...
2020-08-23 10:41:44
169
原创 CSS常用属性-3.1字体文字-1.字体font-family-2.尺寸font-size-3.样式font-style-4.粗细font-weight-5.简写属性font
1.字体使用font-family属性来定义文字的字体属性值为字体的名称，可以设置多个字体名称，浏览器会按照顺序使用它第一个支持的字体（本地电脑有没有安装改字体）相当于 字体优先级列表介绍几个常用的字体：1.常用的英文字母字体衬线字体serif ; 从显示形状来说，比较花哨，在字体边缘有一些修饰的效果，主要是用于标题的显示非衬线字体sans-serif; 比较圆润，在显示上，没有花哨的修饰，一般用于正文的显示等宽字体 每个字体都等宽 font-family: monospace;/
2020-08-22 21:08:11
595
原创 CSS的选择器-2.5-选择器权重-通配符0-标签1-类、伪类、属性10-id100-内联1000-特殊最高!imporant
前边，我们学习了很多种的选择器，接下来我们来探讨一下 这些选择器如果都作用在一个元素上，那到底哪个选择器，最终能够生效呢？1.什么是选择器的权重一个小例子引发的思考再回味一下层叠样式表单的本质【div {color: green;color: blue;color: red;}】2.权重规则通配符选择器的权重：0标签选择器的权重：1类、伪类、属性选择器的权重：10id选择器的权重：100内联样式的权重：1000特殊处理：! important(强制使用某一属性)如 ：
2020-08-22 14:32:18
589
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人