Skip to content

HTML5 簡介

當然可以。以下是基於兩層結構的 HTML5 教學內容，針對前端工程師的需求，特別強調代碼樣式使用四個空格進行縮排。

基本結構與標籤

HTML5 基本結構

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>標題</title>
</head>
<body>
    <h1>歡迎學習 HTML5</h1>
    <p>這是一個段落。</p>
</body>
</html>
  • <!DOCTYPE html> 聲明使用 HTML5。
  • <html> 標籤包裹整個頁面內容。
  • <head> 包含了元數據，如 <meta>, <title>。
  • <body> 包含了顯示在網頁上的內容。

文字與段落

<h1>標題 1</h1>
<p>這是一個段落。使用四個空格作為縮排，保持代碼整潔。</p>
  • <h1> 到 <h6> 表示不同級別的標題。
  • <p> 用於段落。

新元素與結構

結構性元素

<header>
    <h1>網站標題</h1>
</header>
<nav>
    <ul>
        <li>首頁</li>
        <li>聯絡我們</li>
    </ul>
</nav>
<article>
    <h2>文章標題</h2>
    <p>文章內容...</p>
</article>
<footer>
    <p>版權信息</p>
</footer>
  • <header> 通常包含網站或頁面的標題和標誌。
  • <nav> 用於導航鏈接。
  • <article> 表示獨立的內容區塊。
  • <footer> 通常包含作者信息和版權信息。

表單與輸入元素

<form>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form>
  • <form> 標籤定義了用於用戶輸入的表單。
  • <input> 可以有多種類型，如 text, submit。

實戰練習

  1. 創建一個簡單的網頁：使用 HTML5 模板，添加標題、段落、圖像。
  2. 練習使用結構性元素：建立一個包含頭部、導航欄、主內容和底部的佈局。
  3. 建立一個表單：包括文本輸入和提交按鈕，了解基本的表單元素。

參考資料: - HTML Tutorial