时间：2023-07-05 00:21:01 | 来源：网站运营
时间：2023-07-05 00:21:01 来源：网站运营
前端三剑客 HTML、CSS、JavaScript 入门到上手：
在线咨询
<html> <head> <title>第⼀个⻚⾯</title> </head> <body> hello world </body></html>这三个标签组成了一个html的主体，也是一个最简单的页面。每个标签，都分成了开始标签和结束标签，是成对出现的，标签之间可以嵌套。ctrl + / 快捷键可以快速注释/取消注释。
<!-- 我是注释 -->注释不会显示在界面上，目的是提高代码的可读性。标题标签有6个：<h1>...<h6> 数字越大，字体越小段落标签是用 <p> 来定义的段落标签保证了每一个段落是存在在一行的，并且距离下一个段落中间会空有一行的间距。下面我们用lorem生成一个随机的比较长的字符串再来测试一下我们的<p>标签的展示效果：段落标签是用 <br> 来定义的和<p>不一样的是，<br>他只会进行换行，不会分段使每段之间有一个空行，且 br 标签是一个“单标签”，只有开始标签，没有结束标签。<a href="https://www.baidu.com">这是超链接，点击跳转到百度</a内部链接<a href="htmlDemo1.html">跳转到自己文件夹中的另外一个html网页</a>空链接<a href="#">这是一个空连接</a>下载链接<a href = "cat.zip">点击下载这个压缩包 </a>锚点链接类似于目录，点击之后会跳转到本页面中的特定的位置。
表单标签是用户和页面交互的重要手段，是要让用户来“输入”的。form 标签
用<form> </form>来创建一个表单标签，借助 form 就可以允许用户输入一些信息，并且提交到 服务器 上。input 标签
onclick表示在点击元素的时候触发，触发的内容就是 " " 里的代码， 会被浏览器直接执行。这里的alert就是弹出一个对话框。<button onclick="alert('hello HTML')">这是一个按钮</button>来实现。每一个 html 元素(标签)，都可以设置一个唯一的 id，在一个页面中，id 的取值不能重复。select 标签
通过这个 id 属性，在 input 标签设置选中框操作上搭配 label 标签，实现通过点击文字，也能选中的效果。
可以实现一个下拉菜单textarea 标签
是一个可以指定多行编辑框的标签
div 默认是一个块级元素（独占一行）前面的标签，都是 “有语义” 的标签，每个标签都有一个明确的 “角色”；
span 默认是一个行内元素（不独占一行）
每一个 CSS 语句包含两个部分：选择器 + 应用的属性
在某个标签中，引入 style 属性，来指定样式
写在 style 标签中，嵌入到 html 内部的样式内联样式只适合于特别简单的情况，如果样式比较复杂，不建议用这种写法
把 CSS 代码单独提取出来，放到一个 .css 文件中，然后在 html 代码里，通过 link 标签，来引入该 CSS 文件。
选择器的功能就是选中页面的元素(标签)
用 html 的一个标签名写的选择器
在 CSS 代码中创建一个类名，此时具有该类名的元素，都会应用上相关的 CSS 属性
给被选中的元素(标签)，设置个 id 属性
直接选中页面上的所有元素，一般最大的用途是 取消浏览器的默认样式经典写法：
实现选择器能够选中 某个元素 里面的后代元素的方法，用多个选择器组合使用
一种选择器嵌套另外一种选择器的方式
并列的写多个选择器
body { font-family: '微软雅⿊'; font-family: 'Microsoft YaHei'; }② 字体大小p { font-size: 20px; }③ 字体粗细p { font-weight: bold; font-weight: 700; }④ 文字样式/* 设置倾斜 */font-style: italic;/* 取消倾斜 */font-style: normal;color: red;color: #ff0000;color: rgb(255, 0, 0);在 rgb 中通过不同的分量拉不同的值，就能得到不同的颜色。rgba ：透明度。text-indent: [值];background-color: [指定颜⾊]② 背景图片background-image: url(...);③ 背景平铺background-repeat: [平铺⽅式]background-size: length|percentage|cover|contain;<input type="button" value="点我一下" onclick="alert('haha')">注意, JS 中字符串常量可以使用单引号表示, 也可以 使用双引号表示.<script> alert("haha");</script>3. 外部式<script src="hello.js"></script>alert("hehe");注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行).var name = 'zhangsan';var age = 20;var 是 JS 中的关键字, 表示这是一个变量.使用变量
= 在 JS 中表示 “赋值”, 相当于把数据放到内存的盒子中. = 两侧建议有一个空格
每个语句最后带有一个 ; 结尾. JS 中可以省略 ; 但是建议还是加上.
注意, 此处的 ; 为英文分号. JS 中所有的标点都是英文标点.
初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来.
初始化的值如果是数字, 那么直接赋值即可.
console.log(age); // 读取变量内容age = 30; // 修改变量内容为啥动漫中的角色都是要先喊出技能名字再真正释放技能?代码示例: 弹框提示用户输入信息, 再弹框显示.
就是因为变量要先声明才能使用.
var name = prompt("请输入姓名:");var age = prompt("请输入年龄:");var score = prompt("请输入分数");alert("您的姓名是: " + name);alert("您的年龄是: " + age);alert("您的分数是: " + score);也可以把三个输出内容合并成一次弹框var name = prompt("请输入姓名:");var age = prompt("请输入年龄:");var score = prompt("请输入分数");alert("您的姓名是: " + name + "/n" + "您的年龄是: " + age + "/n" + "您的分数是: " + score + "/n");+ 表示字符串拼接, 也就是把两个字符串首尾相接变成一个字符串./n 表示换行JavaScript 中还支持使用 let 定义变量. 用法和 var 基本类似. 用法上的差异此处暂时不讨论.理解 动态类型
var a = 10; // 数字var b = "hehe"; // 字符串随着程序运行, 变量的类型可能会发生改变.var a = 10; // 数字a = "hehe"; // 字符串这一点和 C Java 这种静态类型语言差异较大.C, C++, Java, Go 等语言是静态类型语言. 一个变量在创建的时候类型就确定了, 不能在运行时发生改变.
如果尝试改变, 就会直接编译报错.
var a = 07; // 八进制整数, 以 0 开头var b = 0xa; // 十六进制整数, 以 0x 开头var c = 0b10; // 二进制整数, 以 0b 开头注意:各种进制之间的转换, 不需要手工计算, 直接使用计算器即可.特殊的数字值
var max = Number.MAX_VALUE;// 得到 Infinityconsole.log(max * 2);// 得到 -Infinityconsole.log(-max * 2);// 得到 NaNconsole.log('hehe' - 10);注意:1 / Infinityconsole.log(isNaN(10)); // falseconsole.log(isNaN('hehe' - 10)); // truevar a = "haha";var b = 'hehe';var c = hehe; // 运行出错如果字符串中本来已经包含引号咋办?var msg = "My name is "zhangsan""; // 出错var msg = "My name is /"zhangsan/""; // 正确, 使用转义字符. /" 来表示字符串内部的引号. var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号转义字符/n///'/" /tvar a = 'hehe';console.log(a.length);var b = '哈哈';console.log(b.length);结果:42单位为字符的数量var a = "my name is ";var b = "zhangsan";console.log(a + b);注意, 数字和字符串也可以进行拼接var c = "my score is ";var d = 100;console.log(c + d);注意, 要认准相加的变量到底是字符串还是数字console.log(100 + 100); // 200console.log('100' + 100); // 100100boolean 原本是数学中的概念 (布尔代数).Boolean 参与运算时当做 1 和 0 来看待.
在计算机中 boolean 意义重大, 往往要搭配条件/循环完成逻辑判断.
console.log(true + 1);console.log(false + 1)这样的操作其实是不科学的. 实际开发中不应该这么写.var a;console.log(a)undefined 和字符串进行相加, 结果进行字符串拼接console.log(a + "10"); // undefined10undefined 和数字进行相加, 结果为 NaNconsole.log(a + 10);var b = null;console.log(b + 10); // 10console.log(b + "10"); // null10注意:null 和 undefined 都表示取值非法的情况, 但是侧重点不同.
null 表示当前的值为空. (相当于有一个空的盒子)
undefined 表示当前的变量未定义. (相当于连盒子都没有)
&& 与: 一假则假|| 或: 一真则真! 非& 按位与| 按位或~ 按位取反^ 按位异或<< 左移>> 有符号右移(算术右移)>>> 无符号右移(逻辑右移)// 形式1if (条件) { 语句}// 形式2if (条件) { 语句1} else { 语句2}// 形式3if (条件1) { 语句1} else if (条件2) { 语句2 } else if .... { 语句...} else { 语句N} 条件 ? 表达式1 : 表达式2条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值.注意, 三元表达式的优先级是比较低的.
switch (表达式) { case 值1: 语句1; break; case 值2: 语句2: break; default: 语句N;}用户输入一个整数, 提示今天是星期几var day = prompt("请输入今天星期几: ");switch (parseInt(day)) { case 1: console.log("星期一"); break; case 2: console.log("星期二"); break; case 3: console.log("星期三"); break; case 4: console.log("星期四"); break; case 5: console.log("星期五"); break; case 6: console.log("星期六"); break; case 7: console.log("星期日"); break; default: console.log("输入有误");}while (条件) { 循环体;}执行过程:var num = 1;while (num <= 10) { console.log(num); num++;}代码示例2:计算 5 的阶乘var result = 1;var i = 1;while (i <= 5) { result *= i; i++;}console.log(result)var i = 1;while (i <= 5) { if (i == 3) { i++; continue; } console.log("我在吃第" + i + "个李子"); i++;}我在吃第1个李子我在吃第2个李子我在吃第4个李子我在吃第5个李子代码示例:找到 100 - 200 中所有 3 的倍数var num = 100;while (num <= 200) { if (num % 3 != 0) { num++; // 这里的 ++ 不要忘记! 否则会死循环. continue; } console.log("找到了 3 的倍数, 为:" + num); num++;}var i = 1;while (i <= 5) { if (i == 3) { break; } console.log("我在吃第" + i + "个李子"); i++;}我在吃第1个李子我在吃第2个李子代码示例: 找到 100 - 200 中第一个 3 的倍数var num = 100;while (num <= 200) { if (num % 3 == 0) { console.log("找到了 3 的倍数, 为:" + num); break; } num++;}// 执行结果找到了 3 的倍数, 为:102for (表达式1; 表达式2; 表达式3) { 循环体}for (var num = 1; num <= 10; num++) { console.log(num);}**代码示例2:**计算 5 的阶乘var result = 0;for (var i = 1; i <= 5; i++) { result *= i;}console.log("result = " + result);// Array 的 A 要大写var arr = new Array();使用字面量方式创建 [常用]var arr = [];var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"注意: JS 的数组不要求元素是相同类型.var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];console.log(arr);console.log(arr[0]);console.log(arr[1]);console.log(arr[2]);arr[2] = '小猫凯迪';console.log(arr);如果下标超出范围读取元素, 则结果为 undefinedconsole.log(arr[3]); // undefinedconsole.log(arr[-1]); // undefined注意: 不要给数组名直接赋值, 此时数组中的所有元素都没了.相当于本来 arr 是一个数组, 重新赋值后变成字符串了.
var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];arr = '小猫凯迪';var arr = [9, 5, 2, 7];arr.length = 6;console.log(arr);console.log(arr[4], arr[5]);2. 通过下标新增var arr = [];arr[2] = 10;console.log(arr)此时这个数组的 [0] 和 [1] 都是 undefinedvar arr = [9, 5, 2, 7, 3, 6, 8];var newArr = [];for (var i = 0; i < arr.length; i++) { if (arr[i] % 2 != 0) { newArr.push(arr[i]); }}console.log(newArr);var arr = [9, 5, 2, 7];// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个arr.splice(2, 1);console.log(arr);// 结果[9, 5, 7]arr.length, length 使用的时候不带括号, 此时 length 就是一个普通的变量(称为成员变量, 也叫属性)// 创建函数/函数声明/函数定义function 函数名(形参列表) { 函数体 return 返回值;}// 函数调用函数名(实参列表) // 不考虑返回值返回值 = 函数名(实参列表) // 考虑返回值function hello() { console.log("hello");}// 如果不调用函数, 则没有执行打印语句hello();// 调用函数hello();// 定义函数function hello() { console.log("hello");}sum(10, 20, 30); // 302.如果实参个数比形参个数少, 则此时多出来的形参值为 undefinedsum(10); // NaN, 相当于 num2 为 undefined. JS 的函数传参比较灵活, 这一点和其他语言差别较大. 事实上这种灵活性往往不是好事.var add = function() { var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum;}console.log(add(10, 20)); // 30console.log(add(1, 2, 3, 4)); // 10console.log(typeof add); // function此时形如 function() { } 这样的写法定义了一个匿名函数, 然后将这个匿名函数用一个变量来表示.JS 中函数是一等公民, 可以用变量保存, 也可以作为其他函数的参数或者返回值.
// 全局变量var num = 10;console.log(num);function test() { // 局部变量 var num = 20; console.log(num);}function test2() { // 局部变量 var num = 30; console.log(num);}test();test2();console.log(num);// 执行结果10203010创建变量时如果不写 var, 则得到一个全局变量.function test() { num = 100;}test();console.log(num);// 执行结果100另外, 很多语言的局部变量作用域是按照代码块(大括号)来划分的, JS 在 ES6 之前不是这样的.if (1 < 2) { var a = 10;}console.log(a);var num = 1;function test1() { var num = 10; function test2() { var num = 20; console.log(num); } test2();}test1();// 执行结果20执行 console.log(num) 的时候, 会现在 test2 的局部作用域中查找 num. 如果没找到, 则继续去 test1 中查找. 如果还没找到, 就去全局作用域查找.在 ES6 中也引入了 class 关键字, 就能按照类似于 Java 的方式创建类和对象了.2. JavaScript 对象不区分 “属性” 和 “方法”
List<String> list = new ArrayList<>()然后我们可以写一个方法:void add(List<String> list, String s) { list.add(s); }我们不必关注 list 是 ArrayList 还是 LinkedList, 只要是 List 就行. 因为 List 内部带有 add 方法.function add(list, s) { list.add(s)}add 对于 list 这个参数的类型本身就没有任何限制. 只需要 list 这个对象有 add 方法即可. 就不必像 Java 那样先继承再重写绕一个圈子.原出处：CSDN
原作者：阿布～
原文链接：https://blog.csdn.net/weixin_46448719/article/details/124383884
关键词：入门
