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--);
标签：02,console,log,示例,++,JS,--,var,C10 From： https://www.cnblogs.com/cnblogsfc/p/18369288