HTML 基礎(1)-常用html tag /表單欄位

by | 12 月 19, 2024 | 程式 | 0 comments

Views: 6

標準的瀏覽器主要只認得三種語言，HTML、Javascript、CSS，

  1. HTML負責網頁內容
  2. CSS負責網頁樣式
  3. Javascript負責控制流程。

HTML程式碼-標記式程式語言

標記式語言（英語：markup language），也稱置標語言、標記式語言、標誌語言、標識語言、標示語言，是一種將文字（Text）以及文字相關的其他資訊結合起來，展現出關於該網頁結構和資料的電腦文字編碼。與文字相關的其他資訊（包括例如文字的結構和連結等）與原來的文字結合在一起，但是使用標記（markup）進行標識。 From WIKI

簡單的說使用標記去包裹內容，標示內容屬於什麼範疇。

HTML的結構

前文說到，HTML程式是使用標記，我們第一個學的標記就是<html></html>，這個標記用途就是告訴瀏覽器這是網頁檔。

<html>
  <!-- 這裡面是網頁的程式碼 -->
</html>
<html>
  <head>
    <!-- 網頁的一些設定放這 -->
  </head>
  <body>
    <!-- 這裡放網頁的內容 -->
  </body>
</html>

HTML的註解

<!-- 註解 -->

標記全部小寫

注意HTML的標記全部都是小寫，雖然大寫也可以正常顯示，但標準是小寫。

開始練習

image

image

  1. 先在桌面建立一個資料夾，HTML做為我們練習的
  2. HTML資料夾內建立HTML01的資料夾

使用Visual Studio 開啟資料夾

開啟資料夾 顯示其它選項 以Code開啟

  1. 對HTML01資料夾→按右鍵→顯示其他選項（Windows 11）→以 Code開啟

Visual Studio Code畫面說明

Visual Studio Code說明

新增index.html

網站的首頁普遍是這兩種index.html或default.html

Explore

新增檔案

Visual Studio Code從這邊開始寫程式

新增後就可以開始寫了

Visual Studio Code 寫HTML

這邊請自己敲鍵盤，才能體會其中的細節

程式碼自動完成

輸入標記，然後按下鍵盤的TAB，Visual Studio會自動幫你補完HTML程式碼，這個自動的功能稱為Zen-Coding

html TAB → <html></html>

<!-- 練習輸入html 再按下最左側的Tab按鈕會自動幫您補為完整的html標籤  -->
<html></html>

使用html描述頁面的結構

<html><!-- 開頭的html表示所有介於它結束的內容都是HTML碼 -->
  <head>
    <!-- 網頁的設定、共用樣式 -->
  </head>
  <body>
    <!-- 網頁的內容寫在這邊 -->
  </body>
</html>

先自己手key將上面的程式碼keyin

html程式碼001

加入第一個內容

<html><!-- 開頭的html表示所有介於它結束的內容都是HTML碼 -->
  <head>
    <!-- 網頁的設定、共用樣式 -->
  </head>
  <body>
    <!-- 網頁的內容寫在這邊 -->
    <h1>我喜歡寫程式</h1>
  </body>
</html>

寫完之後按下CTRL+S儲存

啟動Live Server瀏覽效果

image

對著程式碼按下右鍵，Open With Live Server，就可以用瀏覽器，這邊有個開發上的小技巧就是讓螢幕併排

開發小技巧 分割螢幕

HTML標記詳解

標記 tag / elenent

<p>雞腿便當，要切不要辣</p>
  1. <p>，這是一個p標記的開頭，p是paragraph的意思，在英文中這個p稱p tag或p element，tag跟element兩個字可以混用
  2. 「雞腿便當，要切不要辣」這段被包住的表示是內文
  3. </p>代表結束標記，大多數的tag都是這樣成對的

屬性 attributes

<p lang="zh-tw">雞排要切不要辣 路邊野花香</p>
  1. lang是屬性名，小寫，不同的標記有不同的屬性可用，後續會陸續介紹有哪些可用的屬性值。
  2. zh-tw是屬性值，用於賦予該標記更多的資訊或設定，屬性值必須包在雙引號當中。
  3. 這個範例是用於告訴瀏覽器段落內的文字是屬於台灣中文

常用的Html標記

  1. <h1>標題</h1>，有h1-h6 數字越小標題級數越小
  2. <p>內文</p>，paragraph 段落，文章的內容放在此
  3. <span>文字</span>，段落內的某一小段文字要改樣式就會用span包起來。
  4. <a href="連結網址">連結顯示的文字</a>，超連結。
  5. <img href="圖片網址" alt="替代文字" />，圖片
  6. <div>區塊</div>，用於將內容分區塊
  7. <ol><li></li></ol>項目清單（123號碼）
  8. <ul><li></li></ul>項目清單（無123號碼）
  9. <br> 或 </br> 強制換行
  10. <hr> 或 </hr> 分隔線
  11. <form></form>表單，之後會詳細介紹
  12. <table></table>表格，之後會詳細介紹

標籤混用

多數的標籤是可以嵌套的，類似這樣。

<h3>宋馬麟溪山行旅圖　軸</h3>
<p>
    關山逮秋仲。<br />
    旅客問程時。<br />
    焦墨含蕭颯。<br />
    層峯益奥奇。<br />
    遵途據蹇跛。<br />
    望瀑坐厜㕒。<br />
    世學無些欠。<br />
    豈誠逺所為。<br />
    <small>癸巳（西元一七七三年）秋月。御題。</small><br />
    <img
    src="https://digitalarchive.npm.gov.tw/Image/Stream?ImageId=882742&code=1324249853&maxW=600&maxH=600"
    alt="溪山行旅圖 取自故宮Open data"
    />
</p>

宋馬麟溪山行旅圖　軸

超連結標籤<a></a>

相關文件

超連結標籤是非常常用的標籤，這邊特別說一下裡面有哪些常見用法

開新視窗

<a href="連結的檔案或文件" target="_blank">連結文字</a>

target=”_blank” 這個屬性是告訴瀏覽器按下去時候要開啟一個新連結

下載檔案 download屬性

<a href="連結的檔案或文件" download>連結文字</a>

這個常用在連結pdf或圖片，當需求是按下去時候會下載到使用者電腦時候會這樣寫

圖片連結（裡面包img 標籤)

<a href=""><img src="連結內的圖片"></a>

什麼都不做的連結

<a href="#" onclick="do_something()">刪除</a>

這個用法是讓連結當成按鈕來用，按下去會呼叫某個js函數，常用在js 控制流程上。

練習

  • 使用h1~h6製作標題
  • 使用p 加入一段文字
  • 加入連結 指向google.com
  • 插入一張圖片(網址https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Wikipedia_logo_red.png/240px-Wikipedia_logo_red.png) 替代文字為「範例圖片」
  • 用ol建立一個有序清單，清單內容為：奶茶、紅茶、咖啡、小火車
  • 用ul建立一個無序清單，清單內容為：土雞、緞木香菇、米酒、薑黃粉
  • 用hr建立分隔線
  • 使用p建立一段文字，一行一個字
    我
    想
    打
    藍
    球
<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML 常用tag練習</title>
  </head>
  <body>
    <h1>標題1</h1>
    <h2>標題2</h2>
    <h3>標題3</h3>
    <h4>標題4</h4>
    <h5>標題5</h5>
    <h6>標題6</h6>
    <p>出得起香蕉請得起猴子</p>
    <a href="http://www.google.com">Google搜尋</a>
    <div>
      <p>猴子跟猴子在一起強大</p>
    </div>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Wikipedia_logo_red.png/240px-Wikipedia_logo_red.png"
      alt="維基百科logo"
    />
    <ol>
      <li>奶茶</li>
      <li>紅茶</li>
      <li>咖啡</li>
      <li>小火車</li>
    </ol>
    <ul>
      <li>土雞</li>
      <li>緞木香菇</li>
      <li>米酒</li>
      <li>薑黃粉</li>
    </ul>
    <hr />
    <p>我<br />想<br />打<br />籃<br />球</p>
    
  </body>
</html>

html常用tag執行畫面

常用文字格式相關html代碼

  1. <b>粗體</b>或<strong>粗體</strong>
  2. <i>斜體</i>或<em>斜體</em>
  3. <u>底線</u>
  4. 100<sup>2</sup>上標，例如1002
  5. CO<sub>2</sub>下標，例如CO2
  6. <del>刪除</del>

練習-文字html代碼

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <title>HTML 練習</title>
</head>
<body>
    <!-- 1. 粗體 -->
    <!-- 在這裡加上代碼 -->

    <!-- 2. 斜體 -->
    <!-- 在這裡加上代碼 -->

    <!-- 3. 底線 -->
    <!-- 在這裡加上代碼 -->

    <!-- 4. 上標 -->
    <!-- 在這裡加上代碼 -->

    <!-- 5. 下標 -->
    <!-- 在這裡加上代碼 -->

    <!-- 6. 刪除線 -->
    <!-- 在這裡加上代碼 -->
</body>
</html>

這是一段重要的文字

這是一段特別的說明

加底線的文字

100²

CO₂

已刪除內容

練習解答

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML 練習</title>
  </head>
  <body>
    <!-- 1. 粗體 -->
    這是一段<b>重要的文字</b>
    <!-- 2. 斜體 -->
    <i>這是一段特別的說明</i>
    <!-- 3. 底線 -->
    <u>加底線的文字</u>
    <!-- 4. 上標 -->
    100<sup>2</sup>
    <!-- 5. 下標 -->
    CO<sub>2</sub>
    <!-- 6. 刪除線 -->
    <del>已刪除內容</del>
  </body>
</html>

常用表單html代碼

  1. <lable>欄位標題</lable>
  2. <input type="text" value="預設值" placeholder="提示文字" /> 單行文字輸入框
  3. <input type="password" /> 登入的密碼
  4. <input type="checkbox" value="代表值" /> 勾選框（複選）
  5. <input type="radiobutton" value="代表值" /> 勾選框（單選）
  6. <input type="number" value="預設值" /> 數字
  7. <input type="file" /> 檔案上傳
  8. <input type="button" value="按鈕文字內容" /> 數字
  9. <textarea></textarea> 多行文字輸入框
  10. <select> <option>選項</option></select>選項
  11. <br>或</br>，換行
  12. <button type="button">按鈕</button>

表單的輸入欄位一定要有name屬性，不然到後端時候送出會沒有那個欄位

練習1 登入畫面

畫面要求:

  1. 帳號（單行文字輸入框）
  2. 密碼（密碼輸入框）
  3. 記住我(checkbox)
  4. 送出

程式要求:

  1. 欄位要有標題 Lable
  2. 欄位要有 name

登入畫面

問題解答 
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表單範例</title>
</head>
<body>
    <h1>登入表單</h1>
    <form action="" method="POST">
        <!-- 帳號 -->
        <label for="username">帳號：</label>
        <input type="text" id="username" name="username" placeholder="請輸入帳號" required>
        <br><br>
        
        <!-- 密碼 -->
        <label for="password">密碼：</label>
        <input type="password" id="password" name="password" placeholder="請輸入密碼" required>
        <br><br>
        
        <!-- 記住我 -->
        <input type="checkbox" id="remember" name="remember">
        <label for="remember">記住我</label>
        <br><br>
        
        <!-- 提交按鈕 -->
        <button type="submit">登入</button>
    </form>
</body>
</html>

練習2 午餐滿意度問卷調查

  1. 姓名(textbox)
  2. 部門(select option)，有財務部、品保部、水保部。
  3. 主餐(radio)：素食便當、雞腿便當、低熱量養生便當
  4. 點心(checkbox)：烤布丁、草苺蛋糕、杯子蛋糕、巧克力冰淇淋、紅茶、可樂
  5. 評分(number)：1-5 滿分5
  6. 意見(textarea)
  7. 附件(file)
  8. 送出意見(button)

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>意見回饋表單</title>
</head>
<body>
    <h1>意見回饋表單</h1>
    <form action="/submit-feedback" method="POST" enctype="multipart/form-data">
        <!-- 姓名 -->
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" placeholder="請輸入姓名" required>
        <br><br>

        <!-- 部門 -->
        <label for="department">部門：</label>
        <select id="department" name="department" required>
            <option value="finance">財務部</option>
            <option value="quality">品保部</option>
            <option value="water">水保部</option>
        </select>
        <br><br>

        <!-- 主餐 -->
        <label>主餐：</label>
        <input type="radio" id="vegetarian" name="main_meal" value="vegetarian" required>
        <label for="vegetarian">素食便當</label>
        <input type="radio" id="chicken" name="main_meal" value="chicken">
        <label for="chicken">雞腿便當</label>
        <input type="radio" id="low_calorie" name="main_meal" value="low_calorie">
        <label for="low_calorie">低熱量養生便當</label>
        <br><br>

        <!-- 點心 -->
        <label>點心：</label>
        <input type="checkbox" id="pudding" name="snacks[]" value="pudding">
        <label for="pudding">烤布丁</label>
        <input type="checkbox" id="strawberry_cake" name="snacks[]" value="strawberry_cake">
        <label for="strawberry_cake">草苺蛋糕</label>
        <input type="checkbox" id="cupcake" name="snacks[]" value="cupcake">
        <label for="cupcake">杯子蛋糕</label>
        <input type="checkbox" id="ice_cream" name="snacks[]" value="ice_cream">
        <label for="ice_cream">巧克力冰淇淋</label>
        <input type="checkbox" id="black_tea" name="snacks[]" value="black_tea">
        <label for="black_tea">紅茶</label>
        <input type="checkbox" id="cola" name="snacks[]" value="cola">
        <label for="cola">可樂</label>
        <br><br>

        <!-- 評分 -->
        <label for="rating">評分：</label>
        <input type="number" id="rating" name="rating" min="1" max="5" placeholder="請輸入1-5的分數" required>
        <br><br>

        <!-- 意見 -->
        <label for="feedback">意見：</label>
        <textarea id="feedback" name="feedback" rows="4" cols="50" placeholder="請輸入您的意見"></textarea>
        <br><br>

        <!-- 附件 -->
        <label for="attachment">附件：</label>
        <input type="file" id="attachment" name="attachment">
        <br><br>

        <!-- 送出按鈕 -->
        <button type="submit">送出意見</button>
    </form>
</body>
</html>

HTML通用的標籤屬性

html tag最重要的三個屬性

  1. class 指定套用樣式，或作為標記群組使用。
  2. id 唯一值，用來識別特定的元素。
  3. name 名稱，表單送出的欄位用name識別。

這三個屬性在後續學到js的時候非常常用

0 Comments

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *