iT邦幫忙

2024 iThome 鐵人賽

DAY 4
0

列表:
HTML 中有兩種類型的列表:無序列表和有序列表,以及一種特殊的描述列表。

無序列表(Unordered List)

  • 使用 <ul> 標籤來定義無序列表,列表項目使用 標籤來定義。
  • 順序沒有特殊意義,通常會使用圓點符號來表示每一個項目。
    https://ithelp.ithome.com.tw/upload/images/20240918/20169395u2mJwO5fEW.png

有序列表(Ordered List):

  • 使用 <ol> 標籤來定義有序列表,列表項目依然使用 <li> 標籤來定義。
  • 順序有意義,通常會使用數字來排列每一個項目。
    https://ithelp.ithome.com.tw/upload/images/20240918/201693954fTcTaAhDm.png
    描述列表(Description List):
    使用 <dl> 來定義描述列表,使用 <dt> 標籤來定義描述項的名稱,使用 <dd> 來定義描述內容。
    https://ithelp.ithome.com.tw/upload/images/20240918/20169395bIfikpoXKL.png
    表格:
    HTML 表格由 <table> 標籤定義,包含行(<tr>)和列(<td>)。表格標題可以使用 <th>標籤來定義,但目前的網頁排版已經很少人用表格來做了。
    基本表格結構:
<table>
        </tr>
        <tr>
          <td>第一欄</td>
          <td>第二欄</td>
        </tr>
</table>

表格標籤說明

  • <table>:定義表格的整體。
  • <tr>:定義表格中的一行。
  • <th>:定義表頭單元格,通常會顯示成加粗並置中。
  • <td>:定義表格中的數據單元格。

實作:

 <h1>HTML 列表與表格</h1>

  <h2>無序列表</h2>
  <ul>
    <li>蘋果</li>
    <li>香蕉</li>
    <li>橘子</li>
  </ul>

  <h2>有序列表</h2>
  <ol>
    <li>早上起床</li>
    <li>吃早餐</li>
    <li>去上課</li>
  </ol>

  <h2>描述列表</h2>
  <dl>
    <dt>HTML</dt>
    <dd>超文本標記語言,用於創建網頁。</dd>
    <dt>CSS</dt>
    <dd>層疊樣式表,用於控制網頁的外觀樣式。</dd>
  </dl>

  <h2>簡單的表格</h2>
  <table border="1">
    <tr>
      <th>產品</th>
      <th>價格</th>
      <th>數量</th>
    </tr>
    <tr>
      <td>筆記本電腦</td>
      <td>$1000</td>
      <td>2</td>
    </tr>
    <tr>
      <td>滑鼠</td>
      <td>$20</td>
      <td>5</td>
    </tr>
    <tr>
      <td>鍵盤</td>
      <td>$50</td>
      <td>3</td>
    </tr>
  </table>

網頁會呈現下圖:
https://ithelp.ithome.com.tw/upload/images/20240918/20169395HtHullOtZ1.png

我發現我結語好像寫來寫去都是學了些什麼,所以我打算之後都不寫結語了,哈哈/images/emoticon/emoticon01.gif


上一篇
DAY 3:文本格式化標籤
下一篇
DAY 5:HTML 表單元素
系列文
前端基礎:HTML 和 CSS 的 30 天學習之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言