沭阳做网站好的,职业培训机构资质,服务平台网站设计,物流信息平台网站建设一、CSS的三种使用方式
CSS#xff08;层叠样式表#xff09;用于定义网页的样式和布局。以下是CSS的三种使用方式#xff1a;
1. 内联样式
内联样式是最直接的应用方式#xff0c;它通过HTML标签的style属性来定义。
代码示例#xff1a;
h1 stylecolor: …一、CSS的三种使用方式
CSS层叠样式表用于定义网页的样式和布局。以下是CSS的三种使用方式
1. 内联样式
内联样式是最直接的应用方式它通过HTML标签的style属性来定义。
代码示例
h1 stylecolor: blue; background-color: brown;行内样式示例/h1特点
仅影响设置了该样式的单个标签。不利于维护和复用。
2. 内嵌样式
内嵌样式在HTML文档的head部分使用style标签定义可以影响当前页面中的所有匹配的标签。
代码示例
headstyleh1 {color: aqua;text-align: center;font-size: 50px;}/style
/head
bodyh1内嵌样式01/h1h1内嵌样式02/h1
/body特点
仅限于当前页面。方便统一页面样式。
3. 外部样式表
外部样式表通过link标签引用一个外部的CSS文件可以跨页面影响多个标签。
代码示例
headlink relstylesheet hrefstyles.css
/head外部CSS文件styles.css
h1 {color: aqua;text-align: start;font-size: 50px;background-color: azure;
}特点
跨页面复用样式。便于维护和更新。
二、JavaScript的三种使用方式
JavaScript是用于网页交互的脚本语言以下是它的三种使用方式
1. 元素绑定事件
通过HTML元素的事件属性如onclick来绑定JavaScript代码。
代码示例
button onclickalert(hello world!);点击我/button特点
适用于简单的交互。
2. 内嵌JavaScript
在HTML文档中使用script标签直接写入JavaScript代码。
代码示例
scriptalert(你好);
/script特点
适合快速原型开发。
3. 外部JavaScript文件
通过script标签的src属性引用外部的JavaScript文件。
代码示例
script srcscript.js/script外部JavaScript文件script.js
alert(我有一个毛衫);特点
代码模块化便于维护。
三、JavaScript的三种输出方式
JavaScript提供了以下三种输出方式
弹窗输出alert主界面显示document.write控制台输出console.log
代码示例
headscriptalert(第一种输出方式弹窗);/script
/head
bodyscriptdocument.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(103, a b, br); // 结果10313// 减法运算document.write(10-3, a - b, br); // 结果10-37// 乘法运算document.write(10*3, a * b, br); // 结果10*330// 除法运算document.write(10/3, a / b, br); // 结果10/33.3333333333333335// 取余数运算document.write(10%3, a % b, br); // 结果10%31// 自增运算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^31000// 复合赋值运算document.write(ab, a b, br); // 先输出a的值10然后aab变为13//关系运算符document.write(ab,ab,br); //返回boolean类型document.write(ab,ab,br);document.write(ab,ab,br);//等于document.write(ab,ab,br);//全等于全等要求类型也相等//逻辑运算符document.write(ab,ab,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循环。break和continue的运用。
// 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);//break和continue
//break结束循环
//求输入数值的平均数
var i0,t0;
while(true){t;var numprompt(输入一个数字);inum;if(num0){break;}
}
i/t;
document.write(平均值为i); //continue跳出本次循环
//输出10以内偶数
for(i10;i0;i--){if(i%2!0){continue;}document.write(i);}
