C10-02-HTML示例

起点·漫步前行發表於2024-08-20
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" 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--);

相關文章