当前位置：首页 > news >正文

JavaScript 基础 - 第1天

news 2026/4/8 22:40:02

介绍

掌握 JavaScript 的引入方式，初步认识 JavaScript 的作用

引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：

内部方式

通过 script 标签包裹 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 内联形式：通过 script 标签包裹 JavaScript 代码 --><script>alert('嗨，欢迎来传智播学习前端技术！')</script>
</body>
</html>

外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --><script src="demo.js"></script>
</body>
</html>

如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --><script src="demo.js">// 此处的代码会被忽略掉！！！！alert(666);  </script>
</body>
</html>

注释和结束符

通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：

单行注释

使用 // 注释单行代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 注释</title>
</head>
<body><script>// 这种是单行注释的语法// 一次只能注释一行// 可以重复注释document.write('嗨，欢迎来传智播学习前端技术！');</script>
</body>
</html>

多行注释

使用 /* */ 注释多行代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 注释</title>
</head>
<body><script>/* 这种的是多行注释的语法 *//*更常见的多行注释是这种写法在些可以任意换行多少行都可以*/document.write('嗨，欢迎来传智播学习前端技术！')</script>
</body>
</html>

注：编辑器中单行注释的快捷键为 ctrl + /

结束符

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 结束符</title>
</head>
<body><script> alert(1);alert(2);alert(1)alert(2)</script>
</body>
</html>

实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;

输入和输出

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

输出

JavaScript 可以接收用户的输入，然后再将输入的结果输出：

alert()、document.wirte()

以数字为例，向 alert() 或 document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。

输入

向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 输入输出</title>
</head>
<body><script> // 1. 输入的任意数字，都会以弹窗形式展示document.write('要输出的内容')alert('要输出的内容');
// 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号prompt('请输入您的姓名:')</script>
</body>
</html>

变量

理解变量是计算机存储数据的“容器”，掌握变量的声明方式

变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）

<script>// x 符号代表了 5 这个数值x = 5// y 符号代表了 6 这个数值y = 6//举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！
// 将用户输入的内容保存在 num 这个变量（容器）中num = prompt('请输入一数字!')
// 通过 num 变量（容器）将用户输入的内容输出出来alert(num)document.write(num)
</script>

声明

声明(定义)变量有两部分构成：声明关键字、变量名（标识）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和赋值</title>
</head>
<body><script> // let 变量名// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语// age 即变量的名称，也叫标识符let age</script>
</body>
</html>

关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 let 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

赋值

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和赋值</title>
</head>
<body><script> // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语// age 即变量的名称，也叫标识符let age// 赋值，将 18 这个数据存入了 age 这个“容器”中age = 18// 这样 age 的值就成了 18document.write(age)// 也可以声明和赋值同时进行let str = 'hello world!'alert(str);</script>
</body>
</html>

关键字

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：

以下是使用 let 时的注意事项：

允许声明和赋值同时进行
不允许重复声明
允许同时声明多个变量并赋值
JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项：

允许声明和赋值同时进行
允许重复声明
允许同时声明多个变量并赋值

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let，后期会更进一步介绍二者间的区别。

变量名命名规则

关于变量的名称（标识符）有一系列的规则需要遵守：

只能是字母、数字、下划线、$，且不能能数字开头
字母区分大小写，如 Age 和 age 是不同的变量
JavaScript 内部已占用于单词（关键字或保留字）不允许使用
尽量保证变量具有一定的语义，见字知义

注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body><script> let age = 18 // 正确let age1 = 18 // 正确let _age = 18 // 正确
// let 1age = 18; // 错误，不可以数字开头let $age = 18 // 正确let Age = 24 // 正确，它与小写的 age 是不同的变量// let let = 18; // 错误，let 是关键字let int = 123 // 不推荐，int 是保留字</script>
</body>
</html>

常量

概念：使用 const 声明的变量称为“常量”。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致

const PI = 3.14

注意：常量不允许重新赋值,声明的时候必须赋值（初始化）

数据类型

计算机世界中的万事成物都是数据。

计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：

注：通过 typeof 关键字检测数据类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> // 检测 1 是什么类型数据，结果为 numberdocument.write(typeof 1)</script>
</body>
</html>

数值类型

即我们数学中学习到的数字，可以是整数、小数、正数、负数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> let score = 100 // 正整数let price = 12.345 // 小数let temperature = -40 // 负数
document.write(typeof score) // 结果为 numberdocument.write(typeof price) // 结果为 numberdocument.write(typeof temperature) // 结果为 number</script>
</body>
</html>

JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。

字符串类型

通过单引号（ ''）、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已
必要时可以使用转义符 \，输出单引号或双引号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> let user_name = '小明' // 使用单引号let gender = "男" // 使用双引号let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了let str1 = '' // 这种情况叫空字符串documeent.write(typeof user_name) // 结果为 stringdocumeent.write(typeof gender) // 结果为 stringdocumeent.write(typeof str) // 结果为 string</script>
</body>
</html>

布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> //  pink老师帅不帅？回答 是 或 否let isCool = true // 是的，摔死了！isCool = false // 不，套马杆的汉子！
document.write(typeof isCool) // 结果为 boolean</script>
</body>
</html>

undefined

未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> // 只声明了变量，并末赋值let tmp;document.write(typeof tmp) // 结果为 undefined</script>
</body>
</html>

注：JavaScript 中变量的值决定了变量的数据类型。

类型转换

理解弱类型语言的特征，掌握显式类型转换的方法

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 隐式转换</title>
</head>
<body><script> let num = 13 // 数值let num2 = '2' // 字符串
// 结果为 132// 原因是将数值 num 转换成了字符串，相当于 '13'// 然后 + 将两个字符串拼接到了一起console.log(num + num2)
// 结果为 11// 原因是将字符串 num2 转换成了数值，相当于 2// 然后数值 13 减去 数值 2console.log(num - num2)
let a = prompt('请输入一个数字')let b = prompt('请再输入一个数字')
alert(a + b);</script>
</body>
</html>

注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换。

补充介绍模板字符串的拼接的使用

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

Number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 隐式转换</title>
</head>
<body><script>let t = '12'let f = 8
// 显式将字符串 12 转换成数值 12t = Number(t)
// 检测转换后的类型// console.log(typeof t);console.log(t + f) // 结果为 20
// 并不是所有的值都可以被转成数值类型let str = 'hello'// 将 hello 转成数值是不现实的，当无法转换成// 数值时，得到的结果为 NaN （Not a Number）console.log(Number(str))</script>
</body>
</html>

JavaScript 基础 - 第1天

介绍掌握 JavaScript 的引入方式，初步认识 JavaScript 的作用引入方式 JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式…...

编程日记 2024/2/3 17:21:02

人口增长问题 T1063

#include<bits/stdc.h> using namespace std; int main(){int n;double x;cin>>x>>n;for(int i1;i<n;i){xx*1.001;}printf("%.4lf",x);return 0; }...

编程日记 2024/2/3 17:18:59

2024年Java算法面试题

2024年Java实战面试题（北京）_java 5 年面试-CSDN博客一、波菲那契递归 System.out.println("banc " banc(10)) public static int banc(int n){if( n0 ){return 0;}else if( n1 ){return 1;}else{return banc(n-1) banc(n-2);} } 二、冒…...

编程日记 2024/2/3 17:15:56

C#——三角形面积公式

已知三角形的三个边，求面积，可以使用海伦公式。因此，可以执行得到三角形面积公式的计算方法代码如下： /** / <summary>* / 三角形面积公式* / </summary>* / <param name"a">边长a</param>*…...

编程日记 2024/2/3 17:14:55

tcpdump在手机上的使用

首先手机得root才可以，主要分析手机与手机的通信协议我使用的是一加9pro， root方法参考一加全能盒子、一加全能工具箱官方网站——大侠阿木 (daxiaamu.com)https://optool.daxiaamu.com/index.php tcpdump，要安装在/data/local/tmp下要arm6…...

编程日记 2024/2/3 17:13:54

Unity 输出html5_mob649e8157aaee的技术博客_51CTO博客 Unity打包WebGL报Unable to parse Build/*.framework.js.gz This can happen if build compression was......._unable to load file build/out.framework.js.gz! che-CSDN博客...

编程日记 2024/2/3 17:11:52

认识 SYN Flood 攻击

文章目录 1.什么是 SYN Flood 攻击？2.半连接与全连接队列3.如何防范 SYN Flood 攻击？增大半连接队列开启 SYN Cookie减少 SYNACK 重传次数参考文献 1.什么是 SYN Flood 攻击？ SYN Flood 是互联网上最原始、最经典的 DDoS（Distri…...

编程日记 2024/2/3 17:08:50

Node需要了解的知识

Node能执行javascript的原因。浏览器之所以能执行Javascript代码，因为内部含有v8引擎。Node.js基于v8引擎封装，因此可以执行javascript代码。Node.js环境没有DOM和BOM。DOM能访问HTML所有的节点对象，BOM是浏览器对象。但是node中提供了cons…...

编程日记 2024/2/3 17:06:48

网络服务综合实验项目

目录实验要求运行环境基础配置业务需求实验步骤一、基础配置 1.1、配置静态IP 1.1.1、在192.168.159.130中配置 1.1.2、在192.168.159.131中配置编辑 1.2、修改主机名及hosts映射 1.2.1、在192.168.159.130中配置 1.2.2、编辑配置hosts文件 1.2.3、重启…...

编程日记 2024/2/3 17:05:47

工厂模式与抽象工厂模式

如有错误或有补充，以及任何的改进意见，请在评论区留下您的高见工厂模式工厂模式是一种创建型设计模式。在工厂模式中，类的实例化过程通常是通过一个专门的工厂类来完成的，而不是直接在客户端代码中进行的。这样可以提供更好的…...

编程日记 2024/2/3 17:03:45

Springboot整合Websocket实现ws和wss连接

1. 引入pom依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.7.10</version> </dependency>2. 新建websocket配置文件 import org.springf…...

编程日记 2024/2/3 17:02:44

CSC联合培养博士申请亲历|联系外导的详细过程

在CSC申报的各环节中，联系外导获得邀请函是关键步骤。这位联培博士同学的这篇文章，非常详细且真实地记录了申请过程、心理感受，并提出有益的建议，小编特推荐给大家参考。 2024年国家留学基金委公派留学项目即将开始，其…...

编程日记 2024/2/3 17:00:42

没有外网Nginx如何配置如何开启https

判断是否支持open-ssl 在服务器执行如下命令 openssl version没有则安装open-ssl，由于服务器没有外网，可以离线安装openssl-3.0.1.tar.gz，我是在有网的服务器直接下载的，然后再上传到这台无网的服务器上 wget https://www.open…...

编程日记 2024/2/3 16:56:39

【Docker篇】Linux安装Docker、docker安装mysql、redis、rabbitmq

1.Linux安装docker 官方帮助文档：Install Docker Engine on CentOS | Docker Docs 1.1安装命令 # 1. 卸载之前的dockersudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate…...

编程日记 2024/2/3 16:55:38

WPF应用程序(.Net Framework 4.8) 国际化

1、新建两个资源字典文件zh-CN.xaml和en-US.xaml，分别存储中文模板和英文模板 (1) zh-CN.xaml <ResourceDictionary xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml&q…...

编程日记 2024/2/3 16:53:36

Elasticsearch：Geoshape query

Geoshape 查询可以用于过滤使用 geo_shape 或 geo_point 类型索引的文档。 geo_shape 查询使用与 geo_shape 或 geo_point 映射相同的索引来查找具有与查询形状相关的形状的文档，并使用指定的空间关系：相交（intersect）、包含(con…...

编程日记 2024/2/3 16:51:34

安装配置sqoop

一、了解Sqoop 1、Sqoop产生的原因 A. 多数使用hadoop技术的处理大数据业务的企业，有大量的数据存储在关系型数据中。 B. 由于没有工具支持，对hadoop和关系型数据库之间数据传输是一个很困难的事。以上是sqoop产生的主要原因，也因此Sqoop主要用于hadoop与关系型数据库之…...

编程日记 2024/2/3 16:47:29

数据结构——实验01-线性表的链式存储和操作

一、实验内容二、算法思想与算法实现 1、解题思想 （1）逆序创建链表La就是使用头插法创建一个链表，所谓头插法就是在创建链表时始终将新元素插入到头结点之后，而正序创建链表Lb就是使用尾插法创建一个链表，所谓尾插法…...

编程日记 2024/2/3 16:46:28

十分钟上手vue！

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。一 vue.js的导入及使用 vue安装…...

编程日记 2024/2/3 16:45:27

day37WEB攻防-通用漏洞XSS跨站权限维持钓鱼捆绑浏览器漏洞

目录 XSS-后台植入 Cookie&表单劫持（权限维持） 案例演示 XSS-Flash 钓鱼配合 MSF 捆绑上线 1、生成后门 2、下载官方文件-保证安装正常 3、压缩捆绑文件-解压提取运行 4、MSF 配置监听状态 5、诱使受害者访问 URL-语言要适当 XSS-浏览器网马…...

编程日记 2024/2/3 16:44:26

.NET 9边缘安全加固：如何用Minimal Hosting + Certificate Pinning + TPM2.0 attestation构建可信执行边界？

第一章：.NET 9边缘安全加固：Minimal Hosting Certificate Pinning TPM2.0 attestation构建可信执行边界在边缘计算场景中，设备物理暴露、网络不可信及固件供应链风险显著提升了运行时攻击面。.NET 9通过Minimal Hosting模型精简启动路径&a…...

编程新知 2026/4/8 21:51:37

轴向磁通电机仿真避坑指南：ANSYS Maxwell 3D建模时气隙与对称性的7个关键设置

轴向磁通电机3D仿真进阶指南：从参数校准到高效求解的实战技巧轴向磁通电机因其紧凑结构和高效能特性，正在新能源车、航空航天等领域获得广泛应用。但不同于传统径向电机，其三维电磁场分布的复杂性使得仿真过程常成为工程师的"噩梦"…...

编程新知 2026/4/8 21:31:23

基于深度学习的yolo交通信号灯检测与分类项目红绿灯识别道路标识识别(数据集+模型+gui界面)

交通信号灯检测与分类项目详细介绍 yolov9交通信号灯检测与分类项目项目概述随着自动驾驶技术的迅速发展，交通信号灯的准确检测和分类对于确保车辆的安全性和效率至关重要。本项目——交通信号灯检测与分类（Traffic Light Detection and Classificatio…...

编程新知 2026/4/8 21:21:17

光伏电站全流程软件产品核心功能解析

随着光伏产业规模化发展，电站管理已进入全流程数字化管控时代，一款优质的光伏电站全流程软件，需覆盖项目开发、施工建设、智能运维、数据决策全链路，精准破解各环节痛点，为电站高效运营提供技术支撑。结合行业实践&…...

编程新知 2026/4/8 20:44:57

yojimbo完全配置手册：从基础设置到高级调优

yojimbo完全配置手册：从基础设置到高级调优【免费下载链接】yojimbo A network library for client/server games written in C 项目地址: https://gitcode.com/gh_mirrors/yo/yojimbo yojimbo是一个专为C游戏开发设计的网络库，专注于客户端/服务…...

编程新知 2026/4/8 20:04:22

FPGA新手必看：用Vivado在EGo1开发板上点亮七段数码管（附完整代码与约束文件）

FPGA实战：从零实现EGo1开发板的七段数码管驱动第一次接触FPGA开发的朋友，往往会被硬件描述语言和开发工具链的复杂性吓退。但当你真正在开发板上点亮第一个LED或数码管时，那种成就感是无与伦比的。本文将带你用Vivado工具链，在EG…...

编程新知 2026/4/8 19:07:14

ANIMATEDIFF PRO企业级部署：API服务化与WebUI双模式运行指南

ANIMATEDIFF PRO企业级部署：API服务化与WebUI双模式运行指南 1. 项目概述与核心价值 ANIMATEDIFF PRO是一个基于先进AnimateDiff架构的专业级文生视频渲染平台，专为追求电影级视觉效果的内容创作者和AI艺术家设计。这个平台集成了Realistic Vision V5.…...

编程新知 2026/4/8 18:59:02

从PPO到ORPO：LLaMA Factory强化学习算法技术详解

在大语言模型的偏好对齐训练中，算法选择直接影响训练成本和最终效果。LLaMA Factory 支持从经典的 PPO 到最新的 DPO、SimPO、KTO、ORPO 等多种强化学习算法，但它们的原理差异、适用场景和资源开销各不相同。本文系统梳理五大算法的理论基础、关键公式和工程实现，通过 Onli…...

编程新知 2026/4/8 18:53:00

hyn/multi-tenant数据库管理最佳实践：分离策略、迁移与种子数据

hyn/multi-tenant数据库管理最佳实践：分离策略、迁移与种子数据【免费下载链接】multi-tenant Run multiple websites using the same Laravel installation while keeping tenant specific data separated for fully independent multi-domain setups, previously…...

编程新知 2026/4/8 18:02:27

英飞凌TC397芯片深度解析：从规格表到应用实战

1. TC397芯片的硬件架构解析第一次拿到英飞凌TC397芯片的规格书时，我被密密麻麻的参数表格吓了一跳。作为一款面向汽车电子领域的高性能多核MCU，它的硬件架构设计确实有很多独到之处。经过几个实际项目的磨合，我发现理解这些参数背后的设计逻…...

编程新知 2026/4/8 17:47:46

介绍