03 2022 档案

摘要:如果经常需要给数字变量添加或减去1,就可以使用递增(++)或(--)运算符来完成。 想要变量自己加 1 num = num + 1 比较麻烦 var num = 1; num = num + 1; //++num num = num + 1; console.log(num); // 3 // 前置 阅读全文
posted @ 2022-03-31 19:18 罗砂 阅读(95) 评论(0) 推荐(0) 编辑
摘要:表达式:都是由数字运算符、变量等以能求得数值的有意义排列方法所得的组合 简单理解:是由数字、运算符、变量等组合的式子 console.log(1 + 1); // 2 就是返回值 var num = 1 + 1; 是由数字、运算符、变量等组成的式子 我们称为表达式 1 + 1 在我们程序里 2 = 阅读全文
posted @ 2022-03-31 19:07 罗砂 阅读(50) 评论(0) 推荐(0) 编辑
摘要:+ - * / 都被称为运算符 % 取余数 浮点数值的最高精度是17位小数,但进行算计计算时其精确度远远不如整数。(不要直接判断浮点数是否相等!) console.log(1 + 1); //2 console.log(1 - 1); //0 console.log(1 * 1); //1 cons 阅读全文
posted @ 2022-03-31 18:53 罗砂 阅读(32) 评论(0) 推荐(0) 编辑
摘要:代表空、否定的值会转换为false , 如 * 、0 、 NaN、null、undefined 其余的值会被转换为true console.log(Boolean("")); //false console.log(Boolean(0)); //false console.log(Boolean(N 阅读全文
posted @ 2022-03-31 13:54 罗砂 阅读(51) 评论(0) 推荐(0) 编辑
摘要:思路: 先弹出第一个输入框,提示用户输入第一个值 保存起来 再弹第二个框,提示用户输入第二个值 保存起来 把这两个值相加,并将结果赋值给新的变量(需要数值转化) 弹出警示框( alert ) , 把计算的结果输出(输出结果) var num1 = prompt("输入第一个值"); var num2 阅读全文
posted @ 2022-03-31 13:22 罗砂 阅读(154) 评论(0) 推荐(0) 编辑
摘要:var year = prompt("请输入您的出生日期"); var age = 2022 - year; alert("您今年已经" + age + "岁了"); 思路: 弹出一个输入框(prompt),让用户输入出生年份(用户输入) 把用户输入的值用变量保存起来,然后用今年的年份减去变量值,结 阅读全文
posted @ 2022-03-31 11:44 罗砂 阅读(67) 评论(0) 推荐(0) 编辑
摘要:方式 说明 案例 parselnt(string)函数 将string转成整数数值 parselint('78') parseFloat(string)函数 将string类型转成浮点数数值型 parselint('78.21') Number()强制转换函数 将string类型转换为数值型 Num 阅读全文
posted @ 2022-03-31 10:59 罗砂 阅读(77) 评论(0) 推荐(0) 编辑
摘要:数据类型就是把一种数据类型的变量转换成另外一种数据类型 通常会实现的三种方式转换: 一般我们会选择一种自己感觉比较顺手的方式进行转换 转换为字符串类型 方式 说明 案例 toString() 转成字符串 var num = 1; alert(num.toString()) Strijng()强制转换 阅读全文
posted @ 2022-03-31 10:36 罗砂 阅读(92) 评论(0) 推荐(0) 编辑
摘要:var num = 10; console.log(typeof num); //输出结果是number var str = "张三"; console.log(str); //输出结果是string var flag = true; console.log(flag); //输出结果是boolea 阅读全文
posted @ 2022-03-31 09:51 罗砂 阅读(50) 评论(0) 推荐(0) 编辑
摘要:布尔值类型有两个值:true和false,其中true 表示真(对的),而false表示假(错的)。 var flag = true; //布尔型 var flag1 = flase; //布尔值 console.log(flag + 1); //true 换成数值型的话当 1 来看 console 阅读全文
posted @ 2022-03-31 09:28 罗砂 阅读(105) 评论(0) 推荐(0) 编辑
摘要:1.弹出一个输入框(prompt), 让用户输入年龄(用户输入) 2.把用户输入的值变量保存起来,把刚才输入的年龄与所需要输出的字符串拼接(程序内部处理) 3.使用alert输出出来警示框(输出结果) var age = prompt("请输入你的年龄"); var str = "您的年龄是" + 阅读全文
posted @ 2022-03-31 08:59 罗砂 阅读(194) 评论(0) 推荐(0) 编辑
摘要:获取字符串的长度 字符串有许多个字符组成,这些字符的数量就是字符串的长度 var num1 = "我是帅气多金,没有头发的程序员!"; // 获取字符串的长度 console.log(num1.length); 一共16个字符 字符串拼接 多个字符之间可以使用 + 进行拼接,其拼接方式为 字符串+任 阅读全文
posted @ 2022-03-30 23:09 罗砂 阅读(97) 评论(0) 推荐(0) 编辑
摘要:<script> alert( "女人,你别一天天处个对象,\n就跟养个爹似的,别忘了,男人就的管,\n女人就的惯。是不能反过来的,\n他让干嘛就干嘛?女人也是人,别把自己不当人。" ); </script> 主要运用 \n 换行语义符进行换行 阅读全文
posted @ 2022-03-30 22:48 罗砂 阅读(40) 评论(0) 推荐(0) 编辑
摘要:字符串引号嵌套 字符串型可以是引号中的任意文本,其语法为双引号“ ” 和 单引号 ‘ ’ <script> var num1 = "程序员都是'高富帅'"; //单引号嵌套双引号 var num2 = "程序猿都是高富帅"; //双引号嵌套单引号 // 常见错误 要是一单一双搭配会报错 var nu 阅读全文
posted @ 2022-03-30 22:40 罗砂 阅读(38) 评论(0) 推荐(0) 编辑
摘要:用来判断一个变量是否为非数字的类型,返回true或者false <script> // isNaN( ) 这个方法用来判断非数字 并且返回一个值 // 如果是数字返回的是 false 如果不是数字返回的是true console.log(isNaN(12)); //false console.log 阅读全文
posted @ 2022-03-30 21:15 罗砂 阅读(85) 评论(0) 推荐(0) 编辑
摘要:简单数据类型 说明 默认值 Number 数字型,包含了正数值和浮点型值,如21、0.21 0 Boolean 布尔值类型,如true、false,等价于1和0 false String 字符串类型,如“张三”注意js里面,字符串都带引号 “” Undefined var a; 声明了变量a但是没有 阅读全文
posted @ 2022-03-30 20:36 罗砂 阅读(128) 评论(0) 推荐(0) 编辑
摘要:为什么需要数据类型 在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,用于定义了不同的数据类型。 简单来说,数据类型就是数据的类型型号。比如姓名“张三”,年龄18,这些数据的类型是不一样的。 变量的数据类型 变量是用来存储值的所在处,他们都 阅读全文
posted @ 2022-03-30 17:19 罗砂 阅读(78) 评论(0) 推荐(0) 编辑
摘要:js是编程语言有很强的的逻辑性在里面: 实现这个要求的思路 先怎么做后怎么做 我们需要一个临时变量 帮我们 把a1 给临时变量 c 把a2 里面的李四给a1 把临时变量里面的值给a2 <script> var c; var a1 = "张三"; var a2 = "李四"; c = a1; a1 = 阅读全文
posted @ 2022-03-30 16:42 罗砂 阅读(36) 评论(0) 推荐(0) 编辑
摘要:变量的命名规范 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成,如:usrAge,num01,_name 严格区分大小写。var app; 和var App;是两个变量 不能以数字开头。18age 是错误的 不能是关键字、保留字。例如:var、for、while 变量名必须 阅读全文
posted @ 2022-03-30 15:46 罗砂 阅读(138) 评论(0) 推荐(0) 编辑
摘要:更新变量 一个变量被重置赋值后,它原有的值就会被覆盖,变量值将于最后一次赋的值为准 上一个值会被下一个值覆盖掉 <script> var a = "张学友"; console.log(a); a = "刘德华"; console.log(a); </script> 同时声明多个变量 同时声明多个变量 阅读全文
posted @ 2022-03-30 14:48 罗砂 阅读(28) 评论(0) 推荐(0) 编辑
摘要:弹出一个输入框,提示用户输入姓名 弹出一个对话框,输入用户刚才输入的姓名 <script> // 用户输入名字 存储到一个 myname的变量里面 var a = prompt("请输入用户名"); // 请输入名字 alert(a); </script> 阅读全文
posted @ 2022-03-30 14:37 罗砂 阅读(70) 评论(0) 推荐(0) 编辑
摘要:题目:有个叫卡卡西的在旅馆登记的时候前台让他填一张表,这张表里的内容要存到电脑上,表中的内容有:姓名、年龄、邮箱、家庭住址和工资,存储后需要把这些内容显示出来 :我叫卡卡西,住在木叶村,今年30岁,我的邮箱是kakaxi@itcast.cn,工资是2000 <script> var a = "我叫卡 阅读全文
posted @ 2022-03-30 14:25 罗砂 阅读(43) 评论(0) 推荐(0) 编辑
摘要:变量的使用分为两步:1.声明变量 2.赋值 第一步声明变量 <script> // 声明变量 var a; //声明一个名称为 a 的变量 </script> var 是一个JS声明变量的关键词,使用关键词声明后,计算机会自动为变量分配内存空间,不需要程序员管 a 是定义的变量名,通过变量名来访问内 阅读全文
posted @ 2022-03-30 14:04 罗砂 阅读(64) 评论(0) 推荐(0) 编辑
摘要:变量是存储数据的容器 变量名只能是 字母、数字或下划线的任意组合 变量名的第一个字符不能是数字 阅读全文
posted @ 2022-03-30 13:27 罗砂 阅读(61) 评论(0) 推荐(0) 编辑
摘要:为了方便信息的输入输出,JS中提供了一些输出语句,其常用的语句是 <script> alert("让用户看到的警示框"); console.log("让程序员见到的控制台输出信息"); prompt("页面上显示的输入框"); </script> alert("让用户看到的警示框"); consol 阅读全文
posted @ 2022-03-30 13:13 罗砂 阅读(352) 评论(0) 推荐(0) 编辑
摘要:<script> // 单行注释 ctrl + / /* 多行注释 默认的快捷键 shift + alt +a */ </script> 阅读全文
posted @ 2022-03-30 11:27 罗砂 阅读(50) 评论(0) 推荐(0) 编辑
摘要:跟css不能说一模一样但是很像:行内、内嵌、外链 行内: <input type="button" value="关羽" onclick="alert('关二爷')" /> 内嵌: <script> alert("你挑着担,我牵着马"); </script> 外链: 在html文件中引入js, 在j 阅读全文
posted @ 2022-03-30 11:08 罗砂 阅读(32) 评论(0) 推荐(0) 编辑
摘要:一部分ECMAScript ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,他往往被称为javascript或JScript,但实际上后两者是ECMAScript语言的实现和扩展。 ECMAScript : ECMAScript规定 阅读全文
posted @ 2022-03-30 10:46 罗砂 阅读(47) 评论(0) 推荐(0) 编辑
摘要:浏览器分为两部分 渲染引擎和js引擎 渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的bink,老版本的webkit JS引擎:也称为JS翻译器,用来读取网页中的JavaScript代码,对其处理后台运行,比如谷歌浏览器的V8 浏览器本身并不会执行JS代码,而是通过内置Java 阅读全文
posted @ 2022-03-30 10:24 罗砂 阅读(174) 评论(0) 推荐(0) 编辑
摘要:JavaScript是一种运行在客户端的脚本语言。 脚本语言:不需要编译,运行过程中由js翻译器(js引擎)逐行来进行解释并执行。 javaScript 的作用 (表单动态校检(密码强度检测)JS生产的最初目的) 做网页特效 服务器开端(Node.js) 桌面程序(Electron) App(Cor 阅读全文
posted @ 2022-03-30 09:50 罗砂 阅读(24) 评论(0) 推荐(0) 编辑
摘要:编程语言可以做出很多行为上的动画效果和页面交互的功能,编程语言需要有很强的逻辑性 阅读全文
posted @ 2022-03-30 09:18 罗砂 阅读(22) 评论(0) 推荐(0) 编辑
摘要:js是计算机在网页上做出的交互功能 阅读全文
posted @ 2022-03-30 09:08 罗砂 阅读(45) 评论(0) 推荐(0) 编辑
摘要:像素: 屏幕是由一个一个发光的小点构成,这一个个的小点就是像素 分辨率,1920 x 1080 说的就是屏幕中小点的数量 在前端开发中像素要分成两种情况讨论:css像素 和 物理像素 物理像素,上述所说的小点点就属于物理像素 CSS像素,编写网页时,我们所用像素都是css像素 浏览器在显示网页时,需 阅读全文
posted @ 2022-03-29 22:27 罗砂 阅读(86) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-29 21:20 罗砂 阅读(69) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-29 16:01 罗砂 阅读(30) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-29 15:02 罗砂 阅读(25) 评论(0) 推荐(0) 编辑
摘要:网页中字体大小最小是12px,不能设置一个比12像素还小的字体 如果我们设置了一个小于12px的字体,则字体自动设置为12 0.13333333vw = 1px 5.33333vw = 40px 阅读全文
posted @ 2022-03-29 11:02 罗砂 阅读(54) 评论(0) 推荐(0) 编辑
摘要:vw是由视口的宽度计算的 不同的设备完美视口的大小是不一样的 iPhone6 375 iPhone6plus 414 由于不同设备视口和像素比不同,所以同样的375像素在不同的设备下意义是不一样的. 比如在iPhone6中 375就是全屏,而到了 plus 中375就会缺一块 所以在移动端开发时,就 阅读全文
posted @ 2022-03-29 10:42 罗砂 阅读(933) 评论(0) 推荐(0) 编辑
摘要:移动端默认的视口大小是980px(css像素), 默认情况下,移动端的像素比就是 980/移动端宽度 (980/750) 如果我们直接在网页中编写移动端代码,这样在9980的视口下,像素比是非常不好 导致网页中的内容非常非常的小 编写移动页面时,必须要确保有一个比较合理的像素比: lcss像素 对应 阅读全文
posted @ 2022-03-29 10:09 罗砂 阅读(93) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-29 09:21 罗砂 阅读(29) 评论(0) 推荐(0) 编辑
摘要:/* 设置自动换行 */ flex-wrap: wrap; 原图: 效果: /* 简写属性 */ flex-flow: row wrap; /* 居中排列 */ justify-content: center; /* 元素左靠*/ justify-content: flex-start; /* 元素 阅读全文
posted @ 2022-03-28 22:59 罗砂 阅读(26) 评论(0) 推荐(0) 编辑
摘要:flex(弹性盒) 比浮动方便 是css中有一种布局手段,它主要用来替代浮动来完成页面的布局 flex可以使元素具有弹性,让元素可以跟随页面的大小的而改变而改变 弹性容器 要使用弹性盒,必须先将一个元素设置为弹性容器 我们通过 display 来设置弹性容器 display:flex 设置为块级弹性 阅读全文
posted @ 2022-03-28 13:44 罗砂 阅读(240) 评论(0) 推荐(0) 编辑
摘要:// 混合函数,在混合函数中可以直接设置变量 // .p5(@w:100px,@h:100px,@bg-color:red ){ .p5(@w,@h,@bg-color ){ width: @w; height: @h; background-color: @bg-color; } // 必须得按照 阅读全文
posted @ 2022-03-28 10:04 罗砂 阅读(41) 评论(0) 推荐(0) 编辑
摘要:.box1 { width: 300px; height: 100px; background-color: chartreuse; .box2 { width: 100px; height: 100px; background-color: aqua; color: rgb(226, 55, 55 阅读全文
posted @ 2022-03-28 09:46 罗砂 阅读(227) 评论(0) 推荐(0) 编辑
摘要:.box1 { width: 300px; height: 100px; background-color: chartreuse; .box2 { width: 100px; height: 100px; background-color: aqua; color: rgb(226, 55, 55 阅读全文
posted @ 2022-03-28 09:01 罗砂 阅读(50) 评论(0) 推荐(0) 编辑
摘要:less是一门预处理语言 less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式 在less中添加许多的特性,像对变量的的支持、对mixin的支持…… …… less的语法大体上和css语法一致,但是less中增添了许多对CSS的扩展, 所以浏览器无法直接执行less代码,要执 阅读全文
posted @ 2022-03-27 22:59 罗砂 阅读(58) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-27 19:45 罗砂 阅读(22) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-e 阅读全文
posted @ 2022-03-27 13:35 罗砂 阅读(44) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-e 阅读全文
posted @ 2022-03-27 13:18 罗砂 阅读(25) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-27 11:43 罗砂 阅读(24) 评论(0) 推荐(0) 编辑
摘要:动画和过渡类似,都可实现动态效果 不同点是过渡需要在某个属性发生变化时才会触发 动画可以自动触发 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" c 阅读全文
posted @ 2022-03-27 09:40 罗砂 阅读(28) 评论(0) 推荐(0) 编辑
摘要:通过过渡可以指定一个属性发生变化的切换方式 通过过渡可以创建一些非常好的效果,提升了用户体验 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" con 阅读全文
posted @ 2022-03-26 22:08 罗砂 阅读(31) 评论(0) 推荐(0) 编辑
摘要:表单在现实生活中用于提交数据 在网页中可以使用表单,网页中的表单用于将本地的数据提交给远程的服务器 使用form标签创建一个表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X- 阅读全文
posted @ 2022-03-26 20:32 罗砂 阅读(14) 评论(0) 推荐(0) 编辑
摘要:表格 一个<tr></tr>等于一行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name 阅读全文
posted @ 2022-03-26 19:15 罗砂 阅读(23) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-26 17:20 罗砂 阅读(29) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-26 11:42 罗砂 阅读(29) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-26 09:15 罗砂 阅读(25) 评论(0) 推荐(0) 编辑
摘要:背景颜色 改变元素背景的颜色:background-color: 颜色; 在背景插入图片 background-image 可以同时设置背景图片和背景颜色,设置背景颜色将会图片的背景颜色 如果背景的图片小于元素,则背景图片会自动在元素中平铺 如果背景的图片大于元素,将会一个部分背景无法完全显示 如果 阅读全文
posted @ 2022-03-25 22:57 罗砂 阅读(75) 评论(0) 推荐(0) 编辑
摘要:行高line height 行高指的是文字占有的实际高度 可以通过line-height来设置高度 行高可以直接指定一个大小(px em) 也可以直接指定一个整数 如果是一个整数的话,行高将会是字体的指定倍数 字体框 字体框就是字体存在的格子,设置font-size实际上就是在设置字体框的高度 行高 阅读全文
posted @ 2022-03-25 21:43 罗砂 阅读(162) 评论(0) 推荐(0) 编辑
摘要:字体的样式 color 设置字体颜色 font-family:"设置字体"可以同时设置多个字体可以在网页上下载更多样式的字体 font-size:"设置字号大小" 阅读全文
posted @ 2022-03-25 20:33 罗砂 阅读(99) 评论(0) 推荐(0) 编辑
摘要:z-index属性可以设置元素在页面上谁先优先显示 数字越大优先显示越先 z-index: 填写数字; 阅读全文
posted @ 2022-03-25 19:20 罗砂 阅读(29) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-25 16:41 罗砂 阅读(47) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-25 16:21 罗砂 阅读(27) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-25 16:12 罗砂 阅读(40) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-25 16:06 罗砂 阅读(30) 评论(0) 推荐(0) 编辑
摘要:BFC解决高度塌陷 定义:BFC(Block Formatting Context)全称是块级格式化上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式,就会 阅读全文
posted @ 2022-03-25 15:14 罗砂 阅读(73) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-25 14:51 罗砂 阅读(21) 评论(0) 推荐(0) 编辑
摘要:left 元素左浮动 right 元素右浮动 元素设置浮动之后会从文档流中脱离,不再占用文档流中的位置 设置浮动以后元素向父元素的左侧或者右侧移动 浮动元素不会从父元素中移除 浮动元素向左或向右移动时,不会超过它前面的其他浮动元素 <!DOCTYPE html> <html lang="en"> < 阅读全文
posted @ 2022-03-25 13:51 罗砂 阅读(28) 评论(0) 推荐(0) 编辑
摘要:阴影 第一个值 水平偏移量 设置阴影的水平位置 正数向右移动 负数向左移动 第二个值 垂直偏移量 设置阴影的水平位置 正数向下移动 负数向上移动 第三个值 阴影的模糊程度 第四个值 阴影的颜色 效果: 圆角 可以用像素改变也可以用百分比 阅读全文
posted @ 2022-03-25 13:19 罗砂 阅读(29) 评论(0) 推荐(0) 编辑
摘要:盒子的大小可以用width宽度和height高度 长宽度计算:长度边框+内边距+原本的长度 5px+10px+200px=215px 阅读全文
posted @ 2022-03-25 11:57 罗砂 阅读(49) 评论(0) 推荐(0) 编辑
摘要:在做网页时写出的元素在网页中总会有边距这样看起来会很别扭,那我们该怎么把它改成没有边距呢? 方法一: 在style中给body设置 body{ maring:0; padding:0; }; 这样就解决了 方法二 去浏览器中输入网址就可以复制重置浏览器样式的内容 网址:https://meyerwe 阅读全文
posted @ 2022-03-25 11:29 罗砂 阅读(30) 评论(0) 推荐(0) 编辑
摘要:行内元素的盒模型 行内元素不支持设置宽度和高度 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局 行内元素可以设置border,垂直方向的border不会影响到页面的布局 行内元素可以设置maring,垂直方向maring不会影响布局 display 用来设置元素显示的类 阅读全文
posted @ 2022-03-25 10:59 罗砂 阅读(33) 评论(0) 推荐(0) 编辑
摘要:垂直的外边距重叠(折叠) 相邻的垂直方向外边距会发生重叠现象 父子元素重叠 父子元素间相邻的外边距,子元素会传递给父元素(上外边距) 父子外边距的折叠会影响到页面的布局,必须要进行处理 如上图绿色的div被包在蓝色div里,但是用外边距给绿色的div设置距离蓝色的div也被影响到了 解决方法: 只要 阅读全文
posted @ 2022-03-25 10:23 罗砂 阅读(33) 评论(0) 推荐(0) 编辑
摘要:外边距 跟内边距不一样,外边距是挪动位置 margin和padding使用方法是一样的 上右下左 一共有四个方向的外边距: margin-top 上外边距,设置一个正数,元素就会从上往下移动,如果设置为负数就会从下往上移动 margin-right margin-bottom margin-left 阅读全文
posted @ 2022-03-25 09:19 罗砂 阅读(128) 评论(0) 推荐(0) 编辑
摘要:内边距(padding) 内容区和边框之间的区域就是内边距 一共有四个方向的内边距, padding-top paading-right padding-bottom padding-left 上图,绿色的区域就是内边距 盒子可见的大小,由内容区、内边距 和 边框共同决定的 阅读全文
posted @ 2022-03-25 08:56 罗砂 阅读(93) 评论(0) 推荐(0) 编辑
摘要:边框有边框三要素: 线宽,线型,线的颜色 格式 单写线宽 一般默认值都是3个像素 border-width可以用来指定四个方向的边框宽度值的情况 四个值:上 右 下 左 三个值:上 左右 下 两个值:上下 左右 一个值:上下左右 除了border-width还有一组border-xxx-width; 阅读全文
posted @ 2022-03-24 22:47 罗砂 阅读(155) 评论(0) 推荐(0) 编辑
摘要:网页是一个由多层结构组成通过css来设置每一层的样式,最底层被称为文档流 我们所创建的元素默认都在文档流中进行排列 元素主要有两个状态:在文档流中和不在文档流中(脱离文档流) 阅读全文
posted @ 2022-03-24 22:08 罗砂 阅读(29) 评论(0) 推荐(0) 编辑
摘要:HSL background-color:hsl(10,10%,10%);每一种颜色的范围在 0 - 255 (0% - 100%)之间语法:hsl(色相,饱和度,亮度)H 色相(0-360)S 饱和度(0% - 100%)L 亮度(0% - 100%) 阅读全文
posted @ 2022-03-24 22:07 罗砂 阅读(64) 评论(0) 推荐(0) 编辑
摘要:em是相对于元素的字体大小来计算 1em就等于1个font-size em就等于1个font-size rem是相对于html根元素的字体大小来改变的 阅读全文
posted @ 2022-03-24 22:06 罗砂 阅读(22) 评论(0) 推荐(0) 编辑
摘要:RGB是三原色分别是红色、绿色、蓝色 background-color:rgb(255,255,255);每一种颜色的范围在 0 - 255 (0% - 100%)之间语法:RGB(红色,绿色,蓝色) 阅读全文
posted @ 2022-03-24 22:06 罗砂 阅读(193) 评论(0) 推荐(0) 编辑
摘要:像素(px) 在屏幕上有一个个小正方形构成不同屏幕的大小,像素个数量也不同百分比(%) 将属性值设置为相对于父元素属性的百分比 如:父元素是200px子元素是父元素的50%,那么子元素就是父元素的二分之一也就是100px 阅读全文
posted @ 2022-03-24 22:05 罗砂 阅读(96) 评论(0) 推荐(0) 编辑
摘要:<p>李四<a>王五</a></p> 给p标签写样式被包在p标签里的a标签也会被改变样式、a标签继承了p标签的样式 阅读全文
posted @ 2022-03-24 22:04 罗砂 阅读(17) 评论(0) 推荐(0) 编辑
摘要:选择器的优先级 行内样式 的优先级是1000id选择器 的优先级是100类和伪类选择器 的优先级是10元素选择器的 的优先级是1 优先级越高,就越优先显示 优先级相同时就会优先使用靠下的样式 阅读全文
posted @ 2022-03-24 22:04 罗砂 阅读(27) 评论(0) 推荐(0) 编辑
摘要:属性名包含指定属性元素 p[title]{} 属性名=属性值 选择含有指定属性值的元素 p[title=asd]{} 属性名^=属性值选择属性以指定值开头的元素 p[title^=asd]{} 属性名$=属性值选择属性以指定值结尾的元素 p[title$=asd]{} 阅读全文
posted @ 2022-03-24 22:03 罗砂 阅读(21) 评论(0) 推荐(0) 编辑
摘要:子元素选择器 父元素>子元素 后代元素选择器 祖先 后代 后代选择器比子元素选择器范围广 阅读全文
posted @ 2022-03-24 22:02 罗砂 阅读(26) 评论(0) 推荐(0) 编辑
摘要:选择器就是给标签设置名字 id 选择器 class选择器 *选择器(通配选择器) 页面上所有元素都会被设置样式 不用设置名字 阅读全文
posted @ 2022-03-24 22:01 罗砂 阅读(28) 评论(0) 推荐(0) 编辑
摘要:选择器、和声明块 选择器: 通过编写元素的名字来设置样式比如:p标签 设置一个p标签的样式,页面中的所有p标签的样式都会变化 声明块: 声明块就是写在元素中的属性属性值 阅读全文
posted @ 2022-03-24 21:59 罗砂 阅读(18) 评论(0) 推荐(0) 编辑
摘要:行内式 <p style="color: red">李白不写诗</p> 内联式 在body外写上<style></style>标签可以在标签里设置样式 外链式 在编译器的目录中新建一个css的文件然后在文件中写上需要加样式的元素给元素设置样式; 那怎么在HTML文件使用css文件呢? 需要用 lin 阅读全文
posted @ 2022-03-24 21:58 罗砂 阅读(26) 评论(0) 推荐(0) 编辑
摘要:CSS是层叠样式表 用来为元素添加样式 要用style来设置样式 行内的<p style="样式 例如 :color:red;">行内方法</p> 阅读全文
posted @ 2022-03-24 21:54 罗砂 阅读(23) 评论(0) 推荐(0) 编辑
摘要:controls是允许播放 loop是循环 autoplay是自动播放 ​<audio src="./yp/特特的歌 - 你走以后1.0.mp3" controls loop autoplay></audio> 这是插入视频的视频标签 <video src="视频的路径"></video> 阅读全文
posted @ 2022-03-24 21:52 罗砂 阅读(31) 评论(0) 推荐(0) 编辑
摘要:双标签 下面src="中链接别的网页,在自己的页面中会出现一个区域"可以用宽高调节 <iframe src="http://www.百度.com"></iframe> 阅读全文
posted @ 2022-03-24 21:49 罗砂 阅读(24) 评论(0) 推荐(0) 编辑
摘要:图片要选最小的 图片的格式有四种分别是:jpg、png、gif、webp jpg 支持颜色比较丰富,不支持透明效果,不支持动图 一般来显示照片 png 支持颜色丰富,支持复杂透明,不支持动图(常用) 颜色丰富,复杂透明图片(为网页而生) gif 支持的颜色比较少,支持简单透明、支持动图 颜色单一的图 阅读全文
posted @ 2022-03-24 21:48 罗砂 阅读(338) 评论(0) 推荐(0) 编辑
摘要:<img src="">引号中填写图片的路径然后在浏览器中显示图片 " 可以插入外部图片 "可以在浏览器中复制图片网址填写在src="图片地址" alt属性:就是在图片在某种原因显示不出来时显示出来的文本; 可以用width来控制图片的宽度 用height来控制图片的高 阅读全文
posted @ 2022-03-24 21:47 罗砂 阅读(32) 评论(0) 推荐(0) 编辑
摘要:超链接的相对路径:可以链接在自己的编译器的目录中的HTML页面 <a herf="./路径"></a> ./是链接文件当前所在目录的页面 ../是链接在目录的上一级目录中的页面 阅读全文
posted @ 2022-03-24 21:43 罗砂 阅读(108) 评论(0) 推荐(0) 编辑
摘要:<a herf="#id名"></a> 锚点链接只需要在herf设置 #(id名字)目标的元素名字 在页面上就可以实现锚点链接 阅读全文
posted @ 2022-03-24 21:43 罗砂 阅读(43) 评论(0) 推荐(0) 编辑
摘要:在css中所有的元素都设置为了一个方形的区域 每个盒模型都有边框,外边距,内边距和内容区 div是一个典型的盒子 div想要在页面上显示就要给它设置属性 属性: 宽度width 高度height 边框border 边框有边框三要素: 线型、线宽度、线颜色 背景颜色background-color 阅读全文
posted @ 2022-03-24 21:39 罗砂 阅读(23) 评论(0) 推荐(0) 编辑
摘要:<a herf="路径"></a> a标签中的herf可以链接,这个链接被称为超链接, a标签不可以嵌套自身之外任何标签都可以嵌套在内, herf:是链接跳转的路径 阅读全文
posted @ 2022-03-24 19:19 罗砂 阅读(138) 评论(0) 推荐(0) 编辑
摘要:列表分有三种:有序列表、无序列表、定义列表 无序列表 ​ 内容 内容 内容 内容 ​ 有序列表 ​ ​ <li>有序</li> <li>有序</li> <li>有序</li> </ol> 定义列表 ​ ​ <dt>结构</dt> <!-- 使用dd对dt里的内容进项解释--> <dd>页面上的结构< 阅读全文
posted @ 2022-03-24 19:17 罗砂 阅读(19) 评论(0) 推荐(0) 编辑
摘要:块元素:通过块元素对页面的布局 行内元素:行内元素就是书写元素 阅读全文
posted @ 2022-03-24 19:16 罗砂 阅读(20) 评论(0) 推荐(0) 编辑
摘要:结构清晰,方便阅读 比如: <br>就是一个换行标签 em就是斜体标签 <h1>h1就是标题标签</h1>依次往下<h2> h2标题标签,……h6</h2> 阅读全文
posted @ 2022-03-24 19:14 罗砂 阅读(25) 评论(0) 推荐(0) 编辑
摘要:例:<p>今天 天气真好</p>在HTML中中间多余的空格都会被浏览器隐藏这是需要用&nbsp实体(转义字符)&nbsp相当于是空格属性(少用) 其他&实体符的名字: &nbsp空格 &gt大于号 &lt小于号 &copy版权符号 阅读全文
posted @ 2022-03-24 19:13 罗砂 阅读(65) 评论(0) 推荐(0) 编辑
摘要:十进制 平时用的数字都是十进制 特点:满10进1 计数:0、1、2、3、4、5、6、7、8、9、10、11、12…… 二进制 特点:满2进1 计数:0、1、10、11、100、101、110、111、120 单位数字2个(0-1) 八进制 特点:满8进1 计数:0、1、2、3、4、5、6、7、10、 阅读全文
posted @ 2022-03-24 19:12 罗砂 阅读(118) 评论(0) 推荐(0) 编辑
摘要:自结束标记简单来说就是单标记、比如<img /> 、<input/>; 注释就是在网页上看不到的文本在代码中用于表明代码的意思, <!--这里的内容页面看不到 --> 阅读全文
posted @ 2022-03-24 19:11 罗砂 阅读(33) 评论(0) 推荐(0) 编辑
摘要:在标签中有双标签和单标签,标签里可以设置属性样式,样式不能乱写,属性里面设置属性值 阅读全文
posted @ 2022-03-24 19:11 罗砂 阅读(66) 评论(0) 推荐(0) 编辑
摘要:表明内容意思 比如:一首诗;标记就可以给文本表明哪个是标题 作者、内容等作用; <HTML></HTML>是根标签每个页面只能写一个;所有标签必须写在这个标签里面; <head></head>是页面的头部,<title></title>要在<head>标签里面写 <title>这里的内容在网页的标题 阅读全文
posted @ 2022-03-24 19:05 罗砂 阅读(67) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示