HTML常用佈局標籤：提升網頁顏值！不可不知的HTML佈局技巧全解析！

云端源想發表於2024-03-14
HTML網頁

在HTML的世界裡，一切都是由容器和內容構成的。容器，就如同一個個盒子，用來裝載各種元素；而內容，則是這些盒子裡的珍寶。理解了這一點，我們就邁出了探索HTML佈局的第一步。

在HTML中，佈局標籤主要用於控制頁面的結構和樣式。本文將介紹一些常用的佈局標籤及其使用方法，並透過程式碼示例進行演示。

一、理解佈局的重要性

佈局在我們前端開發中擔任什麼樣的角色呢？想象一下，你面前有一堆散亂的積木，無序地堆放在那裡。

而你的任務，就是將這些積木按照圖紙拼裝成一個精美的模型。HTML佈局標籤的作用就像那張圖紙，它指導瀏覽器如何正確、有序地顯示內容和元素，確保網頁的結構和外觀既美觀又實用。

下面我們就來看看在HTML中常用的基礎佈局標籤有哪些，如何使用這些佈局標籤完成我們的開發目標。

二、常用的佈局標籤

1、div標籤

div標籤是一個塊級元素，它獨佔一行，用於對頁面進行區域劃分。它可以包含其他HTML元素，如文字、圖片、連結等。透過CSS樣式可以設定div的佈局和樣式。

示例程式碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>

<div>這是一個div元素

</div>

</body>
</html>

執行結果：

2、span標籤

span標籤是一個內聯元素，它不獨佔一行，用於對文字進行區域劃分。它主要用於對文字進行樣式設定，如字型、顏色等。與div類似，span也可以包含其他HTML元素。
示例程式碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .text {
    color: blue;
    font-size: 20px;
  }
</style>
</head>
<body>

<p>這是一個<span>span元素</span>。</p>

</body>
</html>

執行結果：

3、table標籤

table標籤用於建立表格，它包含多個tr（行）元素，每個tr元素包含多個td（單元格）或th（表頭單元格）元素。

<table> 定義一個表格，<tr> 定義表格中的行，而 <td> 則定義單元格。透過這三個標籤，我們可以建立出整齊劃一的資料表，讓資訊的展示更加直觀明瞭。

需要注意的是：

  • <table>和</table>標記著表格的開始和結束。
  • <tr>和</tr>標記著行的開始和結束，幾組表示該表格有幾行。
  • <td>和</td>標記著單元格的開始和結束，表示這一行中有幾列。

示例程式碼：

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
</body>
</html>

執行結果：

4、form標籤

<form>標籤的主要作用是定義一個用於使用者輸入的HTML表單。這個表單可以包含各種輸入元素，如文字欄位、核取方塊、單選按鈕、提交按鈕等。
<form>元素可以包含以下一個或多個表單元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。

示例程式碼：

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    display: flex;
    flex-direction: column;
  }
</style>
</head>
<body>

<form>
  <label for="username">使用者名稱：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密碼：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

</body>
</html>

執行結果：

5、列表標籤

1）無序列表

  • 指沒有順序的列表專案
  • 始於<ul>標籤，每個列表項始於<li>
  • type屬性有三個選項：disc實心圓、circle空心圓、square小方塊。 預設屬性是disc實心圓。

示例程式碼：

<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>預設的無序列表</li>
<li>預設的無序列表</li>
<li>預設的無序列表</li>
</ul>
<ul>
<li type = "circle">新增circle屬性</li>
<li type = "circle">新增circle屬性</li>
<li type = "circle">新增circle屬性</li>
</ul>
<ul>
<li type = "square">新增square屬性</li>
<li type = "square">新增square屬性</li>
<li type = "squaare">新增square屬性</li>
</ul>
</body>
</html>

執行結果：

也可以使用CSS list-style-type屬性定義html無序列表樣式。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合程式碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這裡前往學習哦！

2）有序列表

  • 指按照字母或數字等順序排列的列表專案。
  • 其結果是帶有前後順序之分的編號,如果插入和刪除一個列表項，編號會自動調整。
  • 始於<ol>標籤，每個列表項始於<li>。

示例程式碼：

<ol>
<li>預設的有序列表</li>
<li>預設的有序列表</li>
<li>預設的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
<li value ="20">第四項</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
</ol>

執行結果：

同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。

3）自定義列表

  • 自定義列表不僅僅是一列專案，而是專案及其註釋的組合。
  • 以<dl>標籤開始。每個自定義列表項以<dt>開始。每個自定義列表項的定義以<dd>開始。
  • 用於對術語或名詞進行解釋和描述，自定義列表的列表項前沒有任何專案符號。
    基本語法：
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>

<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>
  • <dl>即“definition list（定義列表）”，
  • <dt>即“definition term（定義名詞）”，
  • 而<dd>即“definition description（定義描述）”。

示例程式碼：

<dl>
<dt>計算機</dt>
<dd>用來計算的儀器</dd>

<dt>顯示器</dt>
<dd>以視覺方式顯示資訊的裝置</dd>
</dl>

執行結果：

以上就是HTML中常用的佈局標籤及其使用方法。在實際開發中，還可以結合CSS和JavaScript來實現更復雜的佈局和互動效果。

掌握了這些HTML常用佈局標籤，你已經擁有了構建網頁的基礎工具。記住，好的佈局不僅需要技術，更需要創意和對細節的關注。現在，開啟你的程式碼編輯器，開始你的佈局設計之旅吧！

相關文章