C10-02-HTML示例

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" autocomplete="off" readonly><br>
        <label>密码</label>
        <input type="password" placeholder="密码" autocomplete="off" maxlength="20"><br><br>
        <input type="submit">
    </p>
</form>
  
<hr>
<p class="center-text">
    <!-- ②JS行内式 有时alert()会被安全设备过滤，可以使用print()代替-->
    <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--);

 

posted @ 2024-08-20 13:25  起点·漫步前行  阅读(22)  评论(0)    收藏  举报