HTML入門

Khrushchefox發表於2024-10-17
HTML

HTML

結構

<!-- 註釋 -->
<!DOCTYPE html>
<html>
  <head>
    <title>標題</title>
  </head>
  <body>
    <!-- 主體內容 -->
  </body>
</html>

html 元素包括標籤和內容，標籤中可以包含屬性

<p class="editor-note">屬性效果</p>

元素

  • 雙標籤元素

<標籤名> 內容 </標籤名>

  • 單標籤元素（空元素）, 用於沒有內容的元素

<標籤名>: <img /> <br />

  • 塊級元素: 標題, 段落, 列表, 表格, 表單, div等
  • 行內元素: span, a等

雙標籤元素之間的關係：

  • 巢狀關係
  • 並列關係

常用元素

文字相關元素

  1. 標題元素 h．
    h1~h6
  2. 段落元素 p.
    <p>內容</p>
  3. 加粗 b, strong; 斜體 i; 下劃線 u; 刪除線 s

超文字相關元素

  1. 超越普通文字, 如多媒體:

    1. 圖片(img 元素)
      <img src="檔案路徑/檔名.字尾名" />
    2. 音訊(audio 元素)
    3. 影片(video 元素)

  2. 超連結, a.
    <a href="統一資源定位符(URL)">文字</a>
    URL: "protocol 😕/ hostname[:port] / path"

列表元素

  1. 無序列表(ul: unordered list)
    <ul>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    </ul>
  2. 有序列表(ol: ordered list)
    <ol>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    </ol>
  3. 描述列表(dl: description list)
    <dl>
    <dt>語言</dt>
    <dd>Python</dd>
    <dd>Java</dd>
    </dl>

表單元素

<form action="url" method="get/post" name="表單名稱">
  各種表單控制元件
</form>
  1. input元素
    <input type="屬性值" value="你好">
type值 說明
text 單行輸入欄位
button 可點選按鈕
radio 單選按鈕
checkbox 核取方塊
hidden 隱藏的輸入欄位
file 輸入欄位和"瀏覽"按鈕
submit 提交按鈕

  1. textarea元素

    <textarea>
  文字
</textarea>

  2. select元素

    <select>
  <option>選項1</option>
  <option>選項2</option>
</select>

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>07-學生資訊表</title>
  </head>
  <body>
    <form action="">
      <!-- 姓名 -->
      姓名: <input type="text" placeholder="請輸入使用者名稱" /> <br />
      密碼: <input type="password" placeholder="請輸入密碼" /> <br />

      <!-- 
        1. label: for屬性跟radio的id聯動
        2. 透過設定相同的name屬性, 實現多個單選框的關聯
      -->
      性別: <input type="radio" id="male" name="gender" />
      <label for="male">男</label>
      <input type="radio" id="female" name="gender" />
      <label for="female">女</label> <br />

      愛好: <input type="checkbox" id="eat" name="hobbies" />
      <label for="eat">吃飯</label>
      <input type="checkbox" id="sleep" name="hobbies" />
      <label for="sleep">睡覺</label>
      <input type="checkbox" id="game" name="hobbies" />
      <label for="game">打遊戲</label> <br />

      城市:
      <select name="city">
        <option value="beijing" default>北京</option>
        <option value="wuhan">武漢</option>
        <option value="shanghai">上海</option>
      </select>
      <br />

      個性簽名:
      <textarea>武漢中地數碼-華農聯合實訓</textarea>
    </form>
  </body>
</html>

表格元素

<table width="600px" border="1" cellspacing="0">
  <caption>
    xx中學高一課程表
  </caption>
  <tr>
    <th>週一</th>
    <th>週二</th>
    <th>週三</th>
    <th>週四</th>
    <th>週五</th>
  </tr>

  <tr>
    <td>語文</td>
    <td>地理</td>
    <td>語文</td>
    <td>地理</td>
    <td>數學</td>
  </tr>
  <tr>
    <td>英語</td>
    <td>美術</td>
    <td>語文</td>
    <td>政治</td>
    <td>微機</td>
  </tr>
</table>
table屬性 值 說明
align left
center
right		 表格位置
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 背景顏色
border pixels 邊框寬度
cellpadding pixels
%		 單元邊緣與其內容之間的空白
cellspacing pixels
%		 單元格之間的空白
width pixels
%		 表格寬度

相關文章