進階用法 初學者不適讀


HTML

基本架構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 匯入css 用link標籤-->
    <link rel="stylesheet" href="index.css">
    <!--網站標題 -->
    <title>Document</title>
    <style>
        /* css也可以寫在這*/
    </style>
</head>
<body>
	  <!--網站內容-->
</body>
<!--導入JS檔-->
<script src="index.js"></script>
</html>

input

Date

讓使用者選擇日期

  1. <input type="datetime-local"> : 選擇年月日及時間
  2. <input type="date">:選擇日期(年、月、日)。
  3. <input type="time">:選擇時間(時、分)。
  4. <input type="month">:選擇月份和年份。
  5. <input type="week">:選擇年份和周數。

placeholder

預設顯示文字

按鈕

包含標題的下拉選單

<div class="dropdown">
    <label for="dropdown">選擇一個選項:</label>
    <select id="dropdown">
        <option value="" disabled selected>請選擇一個選項</option>
        <option value="option1">選項 1</option>
        <option value="option2">選項 2</option>
        <option value="option3">選項 3</option>
    </select>
</div>

disabled selected 表 無法選擇此選項