一、CSS的三种使用方式
CSS（层叠样式表）用于定义网页的样式和布局。以下是CSS的三种使用方式：
1. 内联样式
内联样式是最直接的应用方式，它通过HTML标签的style属性来定义。
代码示例：
<h1 style="color: blue; background-color: brown;">行内样式示例</h1>
特点：
- 仅影响设置了该样式的单个标签。
- 不利于维护和复用。
2. 内嵌样式
内嵌样式在HTML文档的<head>部分使用<style>标签定义，可以影响当前页面中的所有匹配的标签。
代码示例：
<head><style>h1 {color: aqua;text-align: center;font-size: 50px;}</style>
</head>
<body><h1>内嵌样式01</h1><h1>内嵌样式02</h1>
</body>
特点：
- 仅限于当前页面。
- 方便统一页面样式。
3. 外部样式表
外部样式表通过<link>标签引用一个外部的CSS文件，可以跨页面影响多个标签。
代码示例：
<head><link rel="stylesheet" href="styles.css">
</head>
外部CSS文件（styles.css）：
h1 {color: aqua;text-align: start;font-size: 50px;background-color: azure;
}
特点：
- 跨页面复用样式。
- 便于维护和更新。
二、JavaScript的三种使用方式
JavaScript是用于网页交互的脚本语言，以下是它的三种使用方式：
1. 元素绑定事件
通过HTML元素的事件属性（如onclick）来绑定JavaScript代码。
代码示例：
<button onclick="alert('hello world!');">点击我</button>
特点：
- 适用于简单的交互。
2. 内嵌JavaScript
在HTML文档中使用<script>标签直接写入JavaScript代码。
代码示例：
<script>alert("你好！");
</script>
特点：
- 适合快速原型开发。
3. 外部JavaScript文件
通过<script>标签的src属性引用外部的JavaScript文件。
代码示例：
<script src="script.js"></script>
外部JavaScript文件（script.js）：
alert("我有一个毛衫");
特点：
- 代码模块化，便于维护。
三、JavaScript的三种输出方式
JavaScript提供了以下三种输出方式：
- 弹窗输出（alert）
- 主界面显示（document.write）
- 控制台输出（console.log）
代码示例：
<head><script>alert("第一种输出方式弹窗");</script>
</head>
<body><script>document.write("第二种输出方式主界面显示<br>");console.log("第三种输出方式控制台输出");</script>
</body>
四、ECMAScript变量命名规则
ECMAScript是JavaScript的语言标准，变量命名遵循以下规则：
- 以字母、下划线（_）或美元符号（$）开头。
- 后续字符可以是字母、数字、下划线或美元符号。
代码示例：
var num = 100;
var $name = "张三";
var _age = 25;
五、使用prompt函数进行输入
prompt函数用于显示可提示用户输入的对话框。
代码示例：
var num0 = prompt("请输入一个数字：", 0);
var num1 = prompt("请输入一个数字：", 0);
alert(num0 + "*" + num1 + "=" + num0 * num1);
注意：
prompt函数获得的数据为字符串类型，如果需要进行计算，需要进行类型转换。
六、数据类型与相关函数
JavaScript的数据类型包括数值、字符串、布尔值和对象。以下是具体的示例代码，展示了如何获取变量的类型，并转换数据类型以进行计算。
数值（Number）
var num0 = 10;
document.write(num0, typeof(num0));
结果：10 number
字符串（String）
var string0 = 'hello';
document.write(string0, typeof(string0));
结果：hello string
布尔值（Boolean）
var bool = true;
var FF = 1 < 0;
document.write(bool, typeof(bool), '<br>', FF, typeof(FF));/* true = 1
false = 0结果：true boolean false boolean
对象（Object）
在JavaScript中，函数也是一种对象。
function sayHello() {alert('Hello, World!');
}
document.write(typeof(sayHello));
结果：function
类型转换
如果需要进行计算，我们需要确保数据类型正确。以下是一些常用的数据类型转换方法：
- 转换为字符串：使用
toString()方法或String()函数。
var num0 = 10;
var stringNum = num0.toString();
document.write(stringNum, typeof(stringNum));
结果：10 string
- 转换为数字：使用
parseInt()或Number()方法。
var num0 = prompt("请输入一个数字：", 0);
var num1 = prompt("请输入一个数字：", 0);
var numSum = parseInt(num0) * parseInt(num1);
alert(numSum);
注意：
parseInt()和Number()函数会将字符串转换为数字。- 如果字符串不能转换为数字，它们会返回
NaN（不是一个数字）。
七、运算符
常见运算符
var a = 10, b = 3;// 加法运算document.write('10+3=', a + b, '<br>'); // 结果：10+3=13// 减法运算document.write('10-3=', a - b, '<br>'); // 结果：10-3=7// 乘法运算document.write('10*3=', a * b, '<br>'); // 结果：10*3=30// 除法运算document.write('10/3=', a / b, '<br>'); // 结果：10/3=3.3333333333333335// 取余数运算document.write('10%3=', a % b, '<br>'); // 结果：10%3=1// 自增运算document.write(a++, '<br>'); // 先输出a的值（10），然后a自增1变为11// 自减运算document.write(--a, '<br>'); // 先a自减1变为10，然后输出a的值10// 幂运算document.write('10^3=', a ** b, '<br>'); // 结果：10^3=1000// 复合赋值运算document.write('a+=b', a += b, '<br>'); // 先输出a的值（10），然后a=a+b变为13//关系运算符document.write('a>b',a>b,'<br>'); //返回boolean类型document.write('a<=b',a<=b,'<br>');document.write('a==b',a==b,'<br>');//等于document.write('a===b',a===b,'<br>');//全等于，全等要求类型也相等//逻辑运算符document.write('a&&b',a&&b,'<br>');//与或非document.write('a||b',a||b,'<br>');document.write('!a',!a,'<br>');八、代码结构
在JavaScript中，代码的结构非常重要，它决定了代码的执行顺序和逻辑。以下是代码结构的三种基本类型：
1. 顺序结构
顺序结构是最基本的代码结构，代码按从上到下的顺序执行。所有代码主函数都属于这种结构。
// 示例代码
console.log('这是顺序结构');
2. 选择（分支）结构
选择结构根据不同的条件选择执行不同的代码块。JavaScript中的选择结构主要包括单分支、双分支和多分支。
- 单分支：如果条件为真，则执行相应的代码块。
if (number % 2 == 0) {alert(number, '是偶数');
}
- 双分支：根据两个条件中的任意一个，执行相应的代码块。
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {alert('闰年');
} else {alert('平年');
}
- 多分支：根据不同的条件，执行多个代码块。
if (score >= 90) {alert('优秀');
} else if (score >= 80) {alert('良好');
} else if (score >= 70) {alert('中等');
} else if (score >= 60) {alert('及格');
} else {alert('不及格');
}
3. 循环结构
循环结构用于重复执行一段代码，直到满足某个条件为止。JavaScript中的循环主要包括for循环、while循环和do-while循环。
// for循环
for (var i = 0; i < 10; i++) {console.log(i);
}// while循环
var i = 0;
while (i < 10) {console.log(i);i++;
}// do-while循环
var i = 0;
do {console.log(i);i++;
} while (i < 10);
