LOHAS的论坛回复_云社区-华为云

ID: hw68436052第二阶段-第一章内容：数据类型数据类型:基本数据类型(值类型)1.Number:用于任何类型的数字:整数或浮点数2.String:用于字符串:一个字符串可以包含一个或多个字符串3.Boolean：用于true和false4.null：用于未知的值5 undefined：未定义6.Symbol：唯一的标识符7.BigInt：用于任意长度的整数引用类型普通对象数组对象正则对象Date对象Object：用于更复杂的数据结构"JavaScript中有八种基本的数据类型(前七种为基本的数据类型也称原始类型)而Object为复杂数据类型"type操作符console.log(typeof aaa);//undefined,这个变量没有定义但是不会报错,aaa此时是变量console.log(typeof 1.1);//number数字型console.log(typeof '1');//string 字符型console.log(typeof true);// 布尔类型 booleanconsole.log(typeof {});//object 是一个对象console.log(typeof function(){});// function 是一个方法,也是属于object类型的js里万物皆对象console.log(typeof null);//object(1) null 是一个空指针console.log(typeof Symbol("id"));//symboltypeof null 的结果是object这其实是不对的,官方也承认了这是运算符的问题,现在只是为了兼容性留了下来。是javascript语言的一个错误**NumberJavaScript 中的变量可以保存任何数据。变量在前一刻可以是个字符串,下一刻就可以变成 number类型://没有错误let message = 'hello';message = 1234;允许这种操作的编程语言称为动态类型的编程语言。JavaScript中有八种基本的数据类型。Number类型let n = 123;n = 12.45;number类型代表整数和浮点数。八进制 0~7 程序里面数字前面加0 表示八进制let num = 011;console.log(num); //转为十进制就是9十六进制 0-9 a-f 数字前面加0x表示十六进制let num1 = 0x9;console.log(num);数字型最大值:console.log(Number.MAX_VALUE);//1.7976931348623157e+308数字型最小值:console.log(Number.MIN_VALUE);//5e-324数字可以有很多操作,比如。+ - * / % 等等。除了常规数字,还有特殊数值也属于这种类型 :Infinity、-Infinity 和 NaN。Infinity无穷大 ∞。大于任何值我们可以通过除以 0来得到它:alert(1 / 0); //InfinityisNaN()这个方法用来判断非数字并且返回一个值,如果是数字返回的是false,如果不是数字返回的是trueconsole.log(isNaN(25));//falseconsole.log(isNaN("呵呵"));//trueisNaN检测当前值是否是有效数字,返回true代表不是有效数字,返回false是有效数字isNaN(12)===falseisNaN('1')===falseisNaN(true)===falseisNaN(false)===falseisNaN(null)===falseisNaN(undefined)===trueisNaN({name:9})===trueisNaN([11,12])===trueisNaN([12])===falseisNaN检测的机制首先验证当前要检测的值是否为number类型的，如果不是,浏览器会默认的把值转换为数字类型把非数字类型转换为数字其它基本类型转换为数字,直接使用Number这个方法转换的,如果当前字符串中出现任意一个非有效数字结果则为NaN当检测的值已经是数字类型，是有效数字返回false,不是返回trueNAN的比较NaN == NaN:false NaN和谁都不相等检测是否为有效数字if(isNaN(num)){ // 检测是否为有效数字}BigInt 类型在JavaScript中 " number"类型无法代表大于 253 (或者小于-253)的整数。通过n附加到整数字段的末尾来创建BigIntconst bigInt = 12312312312231231313131313n;兼容性问题目前 Firebox和 Chrome 已经支持 BigInt了,但 Safari/IE/Edge 还没有。String类型JavaScript中的字符必须被括在引号里。let str = '哈哈';let str1 = "你猜"let phease = `can embed ${str}`;转义符\开头常用的转义符:\n 换行\ 斜杠\\' 单引号\" 双引号\t tab缩进\b 空格案例: alert('锄禾日当午\n"汗滴和下土"');字符串长度通过字符length属性可以获取整个字符串长度let str = 'This is a cat';console.log(str.length);//13字符串拼接多个字符串之间可以使用 + 进行拼接可以加任何类型的。 let name= 'vue'; console.log(name+'真棒!')//vue真棒! console.log('12'+24);//1224 console.log(12+24);//36新增属性：反引号是功能扩展引号。他们允许我们通过变量和表达式包装在${...}中,来将它们嵌入到字符串中。例如:let name = "json";//嵌入一个变量alert(`helo,${name}！`);//helo,json！${...}内的表达式会被计算,计算结果会成为字符串的一部分。可以再${...}内放置任何东西:名为name的变量，或者1 +1的算数表达式。需要注意的是，这仅仅在反引号内有效,其它引号不允许这种嵌入。alert("the result is ${ 1 + 1 }");//使用双引号不会计算 ${...}Boolean类型(逻辑类型)boolean 类型仅包含两个值:true 和 false通常用于存储 yes或 no的值:true|yes，false | nolet num = 5 > 6;console.log(num); // falsenull 值特殊的 null值不属于上述任何一种类型。它构成一个独立的类型,只包含 null 值let age = null;null 仅仅代表一个无、空或值未知的特殊值undefined特殊值 undefined 和 null一样自成类型。undefined的含义是未被赋值。如果一个变量已被声明，那么它的值就是 undefined:let x;alert(x);// 弹出undefinedobject 类型和 symbol 类型object 类型是一个特殊类型。其它所有的数据类型都被称为原生类型,因为他们的值只包含一个单独的内容(字符串、数字或者其它)。symbol类型用于创建对象的唯一标识符。typeof运算符typeof 运算符返回参数的类型。当我们想要分别处理不同类型值得时候,或者想快速进行数据类型检验时，非常有用。它支持两种语法形式：1.作为运算符:typeof x2.函数形式:typeof(x)对 typeof x 的调用会以字符串的形式返回数据类型：typeof undefined // "undefined"typeof true // "boolean"typeof alert //"function"typeof "foo" //"string"typeof Symbol("id") // "symbol"typeof 0 // "number"typeof null //"object"总结JavaScript 中有八种基本的数据类型 (前七种为基本数据类型,也称原始类型,而object为复杂数据类型)。number 用于任何类型的数字：整数或浮点数,在 ±253范围内的整数。bigint 用于任意长度的整数。string 用于字符串:一个字符串可以包含一个或多个字符。Boolean用于 true和 false。null 用于未知的值。undefined 用于未定义的值。symbol唯一的表示符。object 更复杂的数据类型。第二章运算符重点1：前置递增和后置递增前置递增：++n先自增，后赋值后置递增：n++先赋值，后自增重点2：逻辑中断【当数值或表达式参与逻辑运算时】&&（与运算）短路逻辑：语法：表达式1 && 表达式2；如果第一个表达式的值为真，则返回表达式2如果第一个表达式的值为假，则返回表达式1执行逻辑：当表达式1为真的时候，继续执行表达式2，此时无论表达式2是真还是假都会返回表达式2的结果（因为此时表达式2为真时&&运算的结果为“真&&真”直接返回表达式2的结果。若表达式2为假时&&运算的结果为“真&&假”应该返回“假”。所以当表达式1为真时程序不会中断，会继续执行表达式2！！！）当表达式1为假的时候，由于&&运算只要有一个为假即结果为假，所以此时无需判断表达式2的真伪，直接返回表达式1。所以当表达式1为假时，程序会中断表达式2的执行！！！||（或运算）短路逻辑：语法：表达式1 || 表达式2；如果第一个表达式的值为真，则返回表达式1如果第一个表达式的值为假，则返回表达式2执行逻辑：当表达式1为真的时候，由于||运算只要有一个真即结果为真，所以此时无需判断表达式2的真伪，直接返回表达式1，此时程序会中断表达式2的执行！！！当表达式1为假的时候，程序会继续判断表达式2的真伪，并且无论表达式2是真还是假都会直接返回表达式2。（因为此时表达式2为真时，||运算结果为“假||真”应该返回表达式2；若表达式2为假，||运算结果为”假||假“也会返回表达式2。但是此种情况并不会中断表达式2的执行，当表达式1为假的时候表达式2是会继续执行的！！！）重点3：三元运算符：“？：”语法：条件表达式？表达式1 ：表达式2如果条件表达式为真，则返回表达式1的值，否则返回表达式2的值。例：var num = 10;var result = num > 5 ? 'yes' : 'no'; //'yes'重点4：switch语句语法结构：switch(表达式) {case value1:执行语句1;break;case value2:执行语句2;break;...default:执行最后的语句;}注意事项：1、表达式的值和case的值必须是全等（===）关系才能匹配成功。2、当case匹配条件后没有break打断语句时，程序执行完对应的执行语句后会继续执行下一条case语句。第三章循环1、循环的目的减少需要重复执行的代码，解决实际问题中有规律性的重复操作是循环存在的目的，在js中，主要有三种类型的循环语句： for循环 while循环 do...while循环2、for循环语法结构在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句 for循环执行过程 1)首先执行里面的计数器变量 var i = 1 但这句话在for 里面只执行一次 2)当i = 100 来判断是否满足条件，如果满足条件就去执行循环体不满足条件退出循环 3)最后去执行 i++ 更新变量i（递增）第一轮结束 4)接着去执行 i = 100 如果满足条件就去执行循环体不满足条件退出循环第二轮直至循环完全结束断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程吕可以看到各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下断点调试可以帮我们观察程序的运行过程浏览器中按F12 --> source --> 找到需要调试的文件 --> 在程序的某一行设置断点 WAtch：览视，通过watch可以监视变量的值的变化，非常的常用 F11：程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会要求记住调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧 for循环重复执行相同代码 for循环重复执行不同代码 for循环重复某些操作 for 循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算 for循环案例双重for循环很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个5行5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现 for循环小结 1）for循环可以重复执行某些相同代码 2）for循环可以重复执行些许不同的代码，因为我们有计数器 3）for循环可以重复执行某些操作，比如算术运算符加法操作 4）随着需求增加，双重for循不可以做更多、更好看的效果 5）双重for循环，外层循环一次，内层for循环全部执行 6）for循环是循环条件和数字直接相关的循环 7）分析要比写代码更重要 8）一些核心算法想不到，但是要学会，分析它执行过程 9）举一反三，自己经常总结，做一些相似的案例

ID: hw68436052CSS第三章 CSS常用属性字体使用font-family属性来定义文字的字体属性值为字体的名称，可以设置多个字体名称，浏览器会按照顺序使用它第一个支持的字体英文字体主要两种，分为衬线字体(serif)和非衬线字体(sans-serif)分为衬线字体(serif): 从显示形状来说比较花哨，在字体的边缘有一些修饰的效果，主要是用于标题的显示非衬线字体(sans-serif)：相对来说比较圆润，在显示上没有太花哨的修饰，主要是用于正文。等宽字体：这种字体每一个字符宽度都是相等的。如monospace衬线字体常用的是宋体，非衬线字体常用的是黑体。微软的windos平台常用的字体是微软雅黑。苹果mac系统常用的字体是PingFang SC(苹果操作系统的默认字体)是一种非衬线字体字体能否显示取决于本地电脑是否安装了此种字体。字体优先级列表字体尺寸使用font-size属性来定义文字的尺寸属性值为长度值，例如：30px(字体区域的高度，不是字体本身能看到的大小。能看到的大小相对小一些),也可以使用百分比，例如：50%。这个百分比是相对于它的父容器/父元素定义出来的。字体样式使用font-style属性设置文字为斜体默认属性值为normal显示标准效果当属性值为italic时显示倾斜效果，向右侧倾斜字体粗细使用font-weight属性设置文字的粗细默认值为normal，相当于400，显示效果为正常粗细当属性值为bold时，相当于700，显示为粗体当属性值为bolder时，显示更粗当属性值为lighter时，显示更细也可设置属性值为一个具体数值 100/200/300/400/500/600/700/800/900(只能设置这几个具体属性值)简写属性使用font属性来定义所有文字的样式，是一个大集合的属性。里面的某一个值可以省略。如果省略，就使用默认的样式。各个属性值用空格分隔设置字体大小是可以添加行高如30px/50px(50px为行高)font = font-family + font-size + font-style + font-weight例如：p{font: monospace 50px bold italic} 字体 .text1{ /*衬线字体 font-family: serif;*/ /*非衬线字体 font-family: sans-serif;*/ /*等宽字体*/ /* font-family: monospace; */ /* font-size: 30px; */ /* font-style: italic; */ /* font-weight: 100; */ font: italic 30px/50px bold serif;/*50px行高*/ dhgfgjfkgjkfgldljggj 华为云在线教育解决方案文本1、颜色使用color属性来设置文本的颜色属性值可以是颜色名，十六进制颜色值，RGB颜色值如color: red； color：#ff0000; color: rgb(192, 0 ,0) 2、行高使用line-height属性来设置文本行高键入lh显示属性默认值为：normal其他属性值为长度值，百分比3、对其方式使用text-alian属性来设置文本的对齐方式属性值有：left(左)、right(右)、center(中)方向使用direction属性设置文本的方向属性值有：ltr(左)、rtl(右)注意与对齐方式属性的区别缩进使用text-indent属性设置段落的首行缩进默认值为0，其它属性值有：长度值、百分比6、装饰线使用text-decoration属性设置文本的装饰线属性值有：underline(下划线)、overline(上划线)、line-through(中划线)默认值为none，表示没有线7间隔使用letter-spacing属性设置文本字符间隔的大小属性值为长度值，可为负值(文字有可能会重叠)8、阴影使用text-shadow属性来设置文本的阴影属性值为：X轴偏移量+Y轴偏移量+模糊距离+颜色例如：text-shadow: 10px 10px 5px gray 文本 .text{ color:rgb(192, 0 , 0); line-height: 50px; /* font-size: 50px; */ /* text-align: right; */ direction: ltr; text-indent: 2em; text-decoration: underline; letter-spacing: 10px; text-shadow: 5px 5px 3px yellow; } 默认属性值为normal显示标准效果当属性值为italic时显示倾斜效果，向右侧倾斜CSS中的文本属性主要是用来修饰HTML文档中的文本的。使用这些属性之后，可以给文本增加漂亮的样式。尺寸div默认占满一行，高度随内容。1、宽度和高度使用width属性定义宽度使用height属性定义高度属性值为：auto、长度、百分比2、最小宽度和最小高度使用min-width属性定义最小宽度使用min-height属性定义最小高度3、最大宽度和最大高度使用max-width属性定义最大宽度使用max-height属性定义最大高度尺寸 .text{ background: yellow; /* width: 200px; */ min-width: 100px; height: 500px; min-height: 100px; max-width: 500px; max-height: 200px; } 华为云宽度和高度作为CSS的尺寸属性，使用很普遍列表1、list-style-image用于指定一个图片作为列表项前面的标记默认值为none可以设置一个图片的url作为标记图片2、list-style-position用于设置在什么位置显示列表项前面的标记默认值为outside还可以设置为inside3、list-style-type用于设置列表项前面图标的类型默认值为disc，其它值：circle、square、decimal、none、lower-alpha、upper-alphalist-style这是一个简写属性list-style=list-style-image + list-style-position + list-style-typeul可通过list-style-type属性变成有序 list-style-type: decimal;其属性值可以省略几项例如：ul{list-style: decimal inside} 列表样式 .list1{ list-style-image: url(1.jpg); list-style-position: inside; list-style-type: square; } .list2{ list-style-type: square; } .list3{ list-style-type: decimal; } .list{ list-style: inside lower-alpha; } 华为手机华为笔记本华为电视华为手机华为笔记本华为电视华为手机华为笔记本华为电视华为手机华为笔记本华为电视华为手机华为笔记本华为电视华为手机华为笔记本华为电视背景1、background-color用来设置元素的背景颜色默认值为：transparent3种方法直接设置颜色：颜色名，十六进制颜色、rgb函数颜色名: red十六进制颜色： #ff0000rgb函数：rgb(255, 0, 0)2、background-image通用来设置元素的背景图片默认值为：none还可以设置一个图片的url地址，用来作为背景图片3、background-repeat主要用来配合background-image属性一起使用，用来设置背景图片的平铺方式默认值为：repeat, 还可以设置为沿X轴平铺(repeat-x)、沿Y轴平铺(repeat-y)、不平铺(no-repeat)4、background-position也是用来配合background-image属性一起使用，用来设置背景图片的起始点位置标默认为左上角零点位置位置参数：X轴方向left、center、right; Y轴方向top、center、bottom百分比：x轴位置x%, y轴位置y%长度：X轴离远点长度，Y轴离远点长度5、background-attachment用于设置背景图片固定或者跟随页面滚动默认值：scroll还可以设置为fixed6、background简写属性background=background-color + background-image + background-repeat + background-position + background-attachment可以全部设置，也可以省略其中几项列表样式 .bak{ height: 1000px; /* background-color: rgb(255, 0, 0); */ background-repeat: no-repeat; background-position: 100px 100px; background-attachment: scroll; */ background: url(）; } CSS 第四章 CSS盒模型CSS中非常重要的盒模型。1、什么叫盒模型盒模型，英文叫做Box Model所有的HTML元素都可以看做一个盒子模型我们可以把盒模型就想象成为一个盒子盒模型中主要用来对HTML元素进行布局时使用2、盒模型的作用浏览器在渲染页面的时候就会根据CSS盒模型的规则，将所有的HTML元素表示未一个个的矩形盒子，之后CSS的相关属性就作用在这些盒子上，决定了盒子的大小位置和属性等，最终显示出来3、盒模型的构成一个盒模型是由4大部分所组成的。元素内容(content)、内边距(padding)、边框(border)、外边距(margin)例如：.box{padding: 20px; border: 5px solid#000000; margin: 50px;}我是一个无情的div元素盒模型 .box { padding: 50px; border: 1px solid red; margin: 50px; } 华为云1、什么是内边距内边距是指在HTML元素内容和边框之间的区域使用CSS属性padding来表示属性值为长度值或百分比，默认值是0注意取长度值时不能为负值百分比值相当于父元素的长度比例2、内边距的各个小属性使用padding-top定义上内边距使用padding-right定义右内边距使用padding-bottom定义下内边距使用padding-left定义左内边距padding为简写属性内边距例如.box1{padding: 20px;}.box2{padding-top: 50px;}.box3{padding-right:10%;} 内边距 .box { /* padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; */ /* padding: 10px 20px 30px 40px; */ /* padding: 50px; */ /* padding: 50px 20px; */ /* padding: 50px 20px 10px; */ padding: 50px 20px 10px 20px; border: 1px solid red; } 华为云教育边框围绕元素内容和内边距的一条边线使用属性border代表边框我们可以使用边框属性精确控制这条线的样式、宽度、颜色2、边框样式使用border-style设置边框的样式属性还可以分别设置上下左右四条边框的样式属性默认值为none，表示无边框还可以设置多种样式，分别为dotted、dashed、solid、double、groove、ridge、inset、outset等3、边框宽度使用border-width设置边框的宽度属性和边框样式一样，还可分别设置上下左右四条边框的宽度使用3种标准边框：thin、medium、thick使用长度值作为宽度属性的属性值4、边框颜色使用border-color设置边框的颜色还可以分别设置上下左右四条边框的颜色和背景颜色属性一样，可以直接设置颜色名，十六进制颜色值或rgb函数值5、复合属性复合是指一次使用多种样式定义边框可以使用border-top、border-right、border-bottom、border-left分别定义四条边框的所有属性，属性值时样式、宽度和颜色，其中宽度和颜色可以省略还可以直接使用border属性一次性对四条边框同时设置，属性值同样是样式、宽度和颜色，其中宽度和颜色可以省略。外边距1、什么是外边距外边距是指元素边框之外的区域设置外边距会在元素外围创建额外的空白空间外边距的作用是控制元素和元素之间的距离使用margin属性来设置外边距还可以使用margin-top、margin-bottom、margin-left、margin-right分别控制元素不同方向的边距属性值可以是长度值或者百分比，如果为长度值，不能为负值当时使用margin简写属性时，取值的含义与padding相同2、居中显示margin有一个很常用的特殊用法，margin左右属性值为auto时，可以设置元素左右居中显示。margin-left：auto 左边距最大margin-right：auto 右边距最大margin：auto 元素居中显示。margin外边距特性：作用在两个div元素(块级元素)相加的时候，距离取决于最大外边距的元素的外边距。有一个重叠的过程。作用在两个span元素(内联元素)相加的时候，距离为margin加和。没有重叠的过程。外边距 .box { border: 1px solid black; margin-top: 50px; margin-left: 20px; margin-right: 100px; margin-bottom: 10px; margin: 10px 20px 30px 40px; margin: 50px; margin: 20px 50px; margin: 10px 20px 100px; /* margin: 50px auto; */ width: 200px; margin-left: auto; margin-right: auto; } .box1 { border: 1px solid #000000; margin: 20px; } .box2 { border: 1px solid #00ff00; margin: 40px; } 职业认证微认证块级元素元素高度取决于内容的高度，宽度取决于它的父元素。默认为父元素宽度。内联元素元素高度取决于内容的高度，宽度取决于内容的宽度。只有块级元素设置宽高才能生效，对于内联元素设置宽高是没有用处的。宽高取决于内容display属性1、神奇的display属性display能改变元素本身的布局特性。display属性用于控制元素如何显示当属性值为block时，会将元素以块级元素的方式显示。当属性值为inline时，会将元素以内联元素的方式显示当属性值为inline-block时，会将元素以内联块级元素的方式显示，会同时具有这两个显示特性当属性值为none时，元素将会被隐藏。还是存在的。例如.box1{display: inline;}.box2{display: block;}我是一个div块级元素，现在被当成内联元素显示了我是一个span内联元素，现在被当成块级元素显示 display .box1 { background-color: yellow; display: inline; } .box2 { background-color: green; display: block; } .box3 { display: inline-block; border: 1px solid #000; width: 200px; height: 100px; } .box4 { display: inline-block; border: 1px solid #000; width: 200px; height: 100px; } span { background-color: red; } 华为云1号--> 华为云2号内联元素间隙：去掉内联元素间回车和空格，可以去掉显示间隙。或者保留回车和空格，父元素设置font-size: 0px，子元素文字尺寸可继承，会显示0，不可见文字。可在子元素类选择器中重新设置字体大小。