HTML：02-1.html
基本功能实现：
- <a>和<img>标签联合使用及<img src="#"> 图片资源绝对路径引用
- JS使用：行内式、内嵌式、引入外部JS
- <input>标签：输入标签文本框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>C10-第二周</title><style>.center-text {text-align: center;}.large-text {font-size: 12px;}form label{display: inline-block;width: 50px;text-align: right;}/* input{width: 240px;height: 35px;} */.container {/* 避免浮动元素溢出容器 */overflow:hidden;display: grid;/* 直接指定每列的宽度比例 */grid-template-columns: 1.5fr 1fr 1fr;}.column {border: 1px solid #000;padding: 10px;}</style> </head> <body><script>// ①JS内嵌式function confirmNavigation() {// 弹出确认对话框if (!confirm("你确定要离开这个页面吗？")) {// 如果用户选择“取消”，则阻止导航 event.preventDefault();}} </script> <p align="center"><a href="https://www.magedu.com/" title="马哥教育" onclick="confirmNavigation()"><img src="https://www.magedu.com/wp-content/uploads/2018/12/2018122312035677.png" alt="马哥教育官网"></a> </p> <hr> <form name="登录"><p align="center"><label>用户名</label><input type="text" value="admin" readonly><br><label>密码</label><input type="password" placeholder="密码" maxlength="20"><br><br><input type="submit"></p> </form><hr> <p class="center-text"><!-- ②JS行内式 --><input type="button" value="点我点我" onclick="alert('点图片可以跳转')" /> </p><!-- ③引入外部JS文件 --> <script src="02.js"></script> <p class="center-text" onclick="confirmTest()"><a href="#">点我测试</a></p><hr> <br> <div class="container"><div class="column"><dl class="large-text"><dd>判断题</dd><dd><p>（1）Java 既是解释语言也是编译语言。</p><p>（2）Javascript 中，严格区分大小写。</p><p>（3）Javascript 中的常量包括 String、Number、Boolean、Null、Undefined、Object。</p><p>（4）关于代码中的「引号」，在HTML标签中推荐使用双引号，JS 中推荐使用单引号。</p><p>（5）typeof 是用来判断变量类型，也是运算符，一元运算符，只需要一个操作数。</p><p>（6）任何数据类型和 undefined 运算都是 NaN；任何值和 null 运算，null 可看做 0 运算。</p></dd></dl></div><div class="column"><dl class="large-text"><dd>描述下列代码中“+”的作用(加、字符串连接、正号)</dd><dd><p>（1）console.log("年龄：" + 20); //字符串连接</p><p>（2）console.log(11+22+33); //算术运算</p><p>（3）console.log("网络+安全"); //纯粹字符</p><p>（4）var a = 1;var b = 2;console.log("a" + b); //字符串连接</p><p>（5）var a = 1;var b = 2;console.log("a + b"); //纯粹字符</p></dd></dl></div><div class="column"><dl class="large-text"><dd>计算下述代码的打印值(连续执行)</dd><dd><p>（0）var a = 10;var b = 10;</p><p>（1）console.log(a++); //10</p><p>（2）console.log(++a); //12</p><p>（3）console.log(--b); //9</p><p>（4）console.log(b--); //9</p></dd></dl></div> </div> <p class="center-text" style="color: red;">console控制台查看执行结果</p> </body> </html>
JS：02.js
function confirmTest() {var a = prompt("请随便输入点什么东西吧");if (a) {alert("你的输入：" + a);}else {alert("你没有输入任何内容");} }console.log("--------------------------------“+”的作用--------------------------------"); console.log("年龄：" + 20); console.log(11+22+33); console.log("网络+安全"); var a = 1;var b = 2;console.log("a" + b); var a = 1;var b = 2;console.log("a + b"); console.log("------------------------------'++'--'的作用------------------------------"); var a = 10;var b = 10; console.log(a++); console.log(++a); console.log(--b); console.log(b--);
![[Flink] Flink 序列化器](https://blog-static.cnblogs.com/files/johnnyzen/cnblogs-qq-group-qrcode.gif?t=1679679148)
