詳細解釋html標簽，每種html標簽的含義和用法

雲端運算與程式碼 2023年05月12日 11:21 711 訪客

1. `<html>` 標簽：

`<html>` 標簽用於定義 HTML 文檔的開始和結束。在 `<html>` 中，我們可以包含 `<head>` 和 `<body>` 標簽，以便定義文檔的頭部和主體部分。在 HTML5 中，我們可以省略 `<html>` 標簽。

詳細解釋html標簽，每種html標簽的含義和用法第1张

例子：

<html>
  <head>
    <title>文章標題</title>
  </head>
  <body>
    <p>在這篇文章中，我想要分享我的思考和經驗。隨著社會的不斷發展，我們需要不斷學習和適應新的環境和挑戰。希望我的分享能夠給讀者帶來一些啟示和幫助。</p >
  </body>
</html>

2. `<head>` 標簽：

`<head>` 標簽定義了文檔的頭部，包含文檔的元數據，如標題、關鍵詞等信息，不會在瀏覽器窗口中顯示。我們可以在 `<head>` 中包含 `<title>`、`<meta>`、`<link>`、`<style>`、`<script>` 等標簽。

例子：

以下是一個使用 `<head>` 標簽定義文檔頭部信息的 HTML 代碼：

```

<!DOCTYPE html>
<html>
  <head>
    <title>這是文檔的標題</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <h1>這是文章的主題</h1>
    <p>這是文章的正文內容</p>
  </body>
</html>

```

其中：

- `<title>` 標簽定義了文檔的標題；

- `<meta>` 標簽用於設置頁面的元數據，如編碼格式、關鍵詞等；

- `<link>` 標簽用於引入外部樣式表；

- `<script>` 標簽用於引入外部腳本文件或者內嵌 JavaScript 代碼；

- 此外還可以包含其他的元數據信息，如 Open Graph Protocol 等。

3. `<title>` 標簽：

`<title>` 標簽用於定義文檔的標題。瀏覽器會將 `<title>` 中的文本顯示在瀏覽器的標題欄或標簽頁上。`<title>` 標簽應該放在 `<head>` 中。

例子：

<html>
  <head>
    <title>這是文檔的標題</title>
  </head>
  <body>
    <h1>這是文章的主題</h1>
    <p>這是文章的內容。</p>
  </body>
</html>

4. `<body>` 標簽：

`<body>` 標簽定義文檔的主體部分，包含頁面的所有內容，如文本、圖像、視頻等。`<body>` 標簽應該放在 `<html>` 中。

例子：

<html>
  <head>
    <title>這是文檔的標題</title>
  </head>
  <body>
    <h1>這是文章的主題</h1>
    <p>這是文章的內容。</p>
    <img src="https://oss.qunapu.com/upload/2023/05/202305111683812052443796.jpg" alt="這是例子圖片">
  </body>
</html>

5. `<p>` 標簽：

`<p>` 標簽定義一個段落。一系列連續的文本或行內元素會被組合成一個段落。

例子：

例如，以下是一個使用 `<p>` 標簽定義了一個段落的 HTML 代碼：

```

<html>
  <head>
    <title>這是文檔的標題</title>
  </head>
  <body>
    <h1>這是文章的主題</h1>
    <p>這是文章的第一個段落。</p>
    <p>這是文章的第二個段落。</p>
  </body>
</html>

```

6. `<img>` 標簽：

`<img>` 標簽用於定義圖像。`<img>` 元素必須包含 src 屬性，該屬性指定圖像的 URL。`<img>` 元素可以包含 alt、width、height、srcset、sizes 等屬性。

例子：

以下是一個使用 `<img>` 標簽顯示圖片的 HTML 代碼：

```

<html>
  <head>
    <title>這是文檔的標題</title>
  </head>
  <body>
    <h1>這是文章的主題</h1>
    <p>下面是一張圖片：</p>
    <img src="https://oss.qunapu.com/upload/2023/05/202305111683812052443796.jpg" alt="這是例子圖片" width="500" height="200">
  </body>
</html>

```

其中，`src` 屬性指定了圖片的 URL，`alt` 屬性指定了圖片的替換文本（在圖片無法加載時顯示），`width` 和 `height` 屬性指定了圖片的寬度和高度，以確保圖片能正確地顯示出來。我們還可以使用 `srcset` 和 `sizes` 屬性指定不同屏幕大小下顯示不同尺寸（寬度）的圖片。

7. `<a>` 標簽：

`<a>` 標簽用於定義超鏈接。`<a>` 元素必須包含 href 屬性，該屬性指定鏈接的 URL。`<a>` 元素可以包含 title、target、download 等屬性。

例子：

以下是一個使用 `<a>` 標簽創建超鏈接的 HTML 代碼：

```

<html>
  <head>
    <title>這是文檔的標題</title>
  </head>
  <body>
    <h1>這是文章的主題</h1>
    <p>通過超鏈接訪問其他網頁：</p>
    <a href=" " target="_blank" title="打開例子網頁">跳轉到示例站點</a>
  </body>
</html>

```

其中，`href` 屬性指定了鏈接的 URL，`target` 屬性指定了鏈接的打開方式，`_blank` 表示在新窗口中打開鏈接。`title` 屬性指定了滑鼠懸停在鏈接上時顯示的文本。我們還可以使用 `download` 屬性指定鏈接下載資源。

8. `<ul>` 和 `<li>` 標簽：

`<ul>` 標簽定義無序列表，包含一組無序的列表項。列表項由 `<li>` 標簽定義，可以包含任意 HTML 元素。

例子：

以下是一個使用 `<ul>` 和 `<li>` 標簽定義無序列表的 HTML 代碼：

```

<!DOCTYPE html>
<html>
  <head>
    <title>這是文檔的標題</title>
  </head>
  <body>
    <h1>這是文章的主題</h1>
    <p>這是文章的正文內容</p>
    <ul>
      <li>列表項 1</li>
      <li>列表項 2</li>
      <li>列表項 3<ul>
            <li>嵌套列表項 1</li>
            <li>嵌套列表項 2</li>
        </ul>
      </li>
      <li>列表項 4</li>
    </ul>
  </body>
</html>

```

其中：

- `<ul>` 標簽定義了一個無序列表；

- `<li>` 標簽定義了列表項，可以包含任意 HTML 元素；

- 可以嵌套無序列表，創建更復雜的列表結構。

9. `<ol>` 和 `<li>` 標簽：

`<ol>` 標簽定義有序列表，包含一組有序的列表項。列表項由 `<li>` 標簽定義，可以包含任意 HTML 元素。`<ol>` 元素可以包含 start、reversed、type 等屬性。

例子：

以下是一個使用 `<ol>` 和 `<li>` 標簽定義有序列表的 HTML 代碼：

```

<!DOCTYPE html>
<html>
  <head>
    <title>這是文檔的標題</title>
  </head>
  <body>
    <h1>這是文章的主題</h1>
    <p>這是文章的正文內容</p>
    <ol start="3" type="I">
      <li>列表項 1</li>
      <li>列表項 2</li>
      <li>列表項 3<ol reversed>
            <li>嵌套列表項 1</li>
            <li>嵌套列表項 2</li>
        </ol>
      </li>
      <li>列表項 4</li>
    </ol>
  </body>
</html>

```

其中：

- `<ol>` 標簽定義了一個有序列表；

- `<li>` 標簽定義了列表項，可以包含任意 HTML 元素；

- `<ol>` 元素可以包含 start、reversed、type 等屬性，分別用於設置列表項的起始編號、倒序排列和列表類型；

- 可以嵌套有序列表，創建更復雜的列表結構。

10. `<table>`、`<tr>`、`<th>`、`<td>` 標簽：

`<table>` 標簽定義表格，`<tr>` 標簽定義表格行，`<th>` 標簽定義表頭單元格，`<td>` 標簽定義表格數據單元格。

例子：

以下是一個使用 `<table>`、`<tr>`、`<th>`、`<td>` 標簽定義表格的 HTML 代碼：

```

<!DOCTYPE html>
<html>
  <head>
    <title>這是文檔的標題</title>
  </head>
  <body>
    <h1>這是文章的主題</h1>
    <p>這是文章的正文內容</p>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年齡</th>
          <th>性別</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>小明</td>
          <td>18</td>
          <td>男</td>
        </tr>
        <tr>
          <td>小紅</td>
          <td>20</td>
          <td>女</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

```

其中：

- `<table>` 標簽定義了一個表格；

- `<thead>` 標簽定義了表格的表頭，包含一行或多行表頭單元格；

- `<tr>` 標簽定義了表格的行，包含一個或多個單元格；

- `<th>` 標簽定義了表頭單元格，通常在單元格中加粗並居中顯示文本；

- `<td>` 標簽定義了表格數據單元格，通常左對齊顯示文本；

- `<tbody>` 標簽定義了表格的主體，包含一行或多行數據行單元格。

11. `<form>`、`<input>`、`<label>` 標簽：

`<form>` 標簽定義一個表單，通常包含多個表單輸入域，如文本輸入框、下拉框、復選框等。`<input>` 元素定義表單的輸入域，`<label>` 元素定義輸入域的標簽。

例子：

以下是一個使用 `<form>`、`<input>`、`<label>` 標簽定義表單的 HTML 代碼：

```

<!DOCTYPE html>
<html>
  <head>
    <title>這是文檔的標題</title>
  </head>
  <body>
    <h1>這是文章的主題</h1>
    <p>這是文章的正文內容</p>
    <form action="/submit" method="post">
      <label for="username">用戶名：</label>
      <input type="text" id="username" name="username" placeholder="請輸入用戶名" required>
      <br>
      <label for="password">密碼：</label>
      <input type="password" id="password" name="password" placeholder="請輸入密碼" required>
      <br>
      <label for="gender">選擇性別：</label>
      <select id="gender" name="gender">
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
      <br>
      <label for="interest">選擇愛好：</label>
      <br>
      <input type="checkbox" id="interest1" name="interest" value="reading">
      <label for="interest1">閱讀</label>
      <input type="checkbox" id="interest2" name="interest" value="sports">
      <label for="interest2">運動</label>
      <input type="checkbox" id="interest3" name="interest" value="music">
      <label for="interest3">音樂</label>
      <br>
      <input type="submit" value="提交">
    </form>
  </body>
</html>

```

其中：

- `<form>` 標簽定義了一個表單；

- `action` 屬性用於指定表單提交的 URL；

- `method` 屬性用於指定表單提交的方法，可以是 POST 或 GET；

- `<label>` 元素定義了表單輸入域的標簽，使用 `for` 屬性關聯了對應的輸入域；

- `<input>` 元素定義了表單的輸入域，通過 `type` 屬性指定類型，可以是文本輸入框、密碼輸入框、下拉框、單選框、復選框等；

- `id` 屬性用於標識輸入域；

- `name` 屬性用於指定輸入域的名稱，作為表單提交時的參數名；

- `value` 屬性用於設置輸入域的初始值；

- `placeholder` 屬性用於設置輸入域的占位符；

- `required` 屬性用於指定輸入域為必填項。

12. `<div>` 和 `<span>` 標簽：

`<div>` 標簽定義一個塊級（block-level）容器，用於組合其他 HTML 元素。`<span>` 標簽定義一個內聯（inline）容器，用於對其他文本或行內元素進行分組和樣式化。

例子：

以下是一個使用 `<div>` 和 `<span>` 標簽定義容器的 HTML 代碼：

```

<!DOCTYPE html>
<html>
  <head>
    <title>這是文檔的標題</title>
    <style>
      .wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f2f2f2;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: #444;
        color: #fff;
        text-align: center;
      }
      .text-red {
        color: red;
      }
      .text-bold {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="box">
        <span class="text-red">這是一個內聯容器，可以用於對文字進行樣式設置。</span>
        <br>
        <span class="text-bold">這也是一個內聯容器，可以用於對文字進行樣式設置。</span>
      </div>
    </div>
  </body>
</html>

```

其中：

- `<div>` 標簽定義了一個塊級容器，用於組合其他 HTML 元素；

- `<span>` 標簽定義了一個內聯容器，用於對其他文本或行內元素進行分組和樣式化；

- `class` 屬性用於指定 CSS 樣式名稱，可以通過 CSS 來設置容器的布局、樣式等；

- CSS 樣式 `.wrapper` 用於設置一個占滿屏幕的容器，居中顯示並顯示背景顏色；

- CSS 樣式 `.box` 用於設置一個寬高為 200px 的矩形容器，顯示在父容器中央，居中對齊並顯示背景顏色和文字顏色；

- CSS 樣式 `.text-red` 和 `.text-bold` 用於設置容器內的文字顏色和字體粗細等樣式。