WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞
網頁設計基礎課程目錄

1-2. HTML <標籤> 有哪些?(小字典)


HTML 是什麼?

超文本標記語言(HyperText Markup Language)簡稱:HTML,HTML元素是構建網站的基石元素,由 W3C 定義和維護。

HTML 檔案的基本架構

加強認識 HTML <標籤>語法格式

頭尾包含式標籤

<body> ........ </body>   網頁內容框
<h1> ........ </h1>   標題1的框架 (h1~h6)
<p> ........ </p>   段落文字內容的框架
<a> ........ </a>   有連結的範圍
<div> ........ </div>   一個"區塊框架"

無結尾單行式標籤

<meta>   檔頭資訊宣告設定
<img>   插入影像(圖片)
<br>   換行不換段
<hr>   分隔線

框架類標籤

NO 標籤 說明 HTML5 英文參考網 簡中參考網
1 <header> 定義網頁頁首的區域。 V w3schools runoob
2 <footer> 定義網頁頁尾的區域。 V w3schools runoob
3 <main> 定義網頁主要內容區域。 V w3schools runoob
4 <nav> 定義網頁導覽區域。 V w3schools runoob
5 <section> 定義一個區段範圍。 V w3schools runoob
6 <aside> 定義一個側邊區域範圍。 V w3schools runoob
7 <article> 定義文章。 V w3schools runoob
8 <figure> 定義圖形影像的區塊。 V w3schools runoob
9 <figcaption> 定義 figure 的標題。 V w3schools runoob
10 <div> 單純是一個框。   w3schools runoob
11 <h1> ~ <h6> 標題1、標題2、標題3、標題4、標題5、標題6。   w3schools runoob
12 <p> 一個段落框。   w3schools runoob
13 <ul> 無序號的清單框架。   w3schools runoob
14 <ol> 有序號的清單框架。   w3schools runoob
15 <li> 清單框架中的一個清單項目。   w3schools runoob

文中局部區域類標籤

NO 標籤 說明 HTML5 英文參考網 簡中參考網
1 <a> 定義連結的區域。   w3schools runoob
2 <span> 局部文字區域。   w3schools runoob
3 <small> 定義局部小型文字區域。   w3schools runoob
4 <strong> 定義局部區域文字粗體,<b>也是表現粗體。   w3schools runoob
5 <em> 定義局部區域文字斜體,<i>也是表現斜體。   w3schools runoob
6 <mark> 內容文字亮底呈現。 V w3schools runoob
7 <img> 定義一個影像。   w3schools runoob
8 <iframe> 定義一個內置框架,框架內連結顯示指定的網頁。   w3schools runoob
9 <button> 定義一個按鈕。   w3schools runoob

功能類標籤

NO 標籤 說明 HTML5 英文參考網 簡中參考網
1 <!--   --> HTML語言中的註解。   w3schools runoob
2 <br> 分行不分段 ( 表示一個區塊中或段落文字中強迫分行 )。   w3schools runoob
3 <hr> 分隔線。   w3schools runoob
4 <a> 定義連結的區域。   w3schools runoob
5 <img> 定義顯示一個影像。   w3schools runoob
6 <iframe> 定義一個內置框架,框架內連結顯示指定的網頁。   w3schools runoob
7 <button> 定義一個按鈕。   w3schools runoob
8 <progress> 定義顯示進度條。 V w3schools runoob
9 <canvas> 定義一個畫布區域,這個區域由 JS 程式來設計與控制。 V w3schools runoob
10 <svg> 是可縮放的向量圖形 ( Scalable Vector Graphics ) 的縮寫。
可直接以 <img> 插圖顯示,也可以運用 svg 的原始碼再配合 JS 程式設計與控制。
V w3schools runoob

表格類標籤

NO 標籤 說明 HTML5 英文參考網 簡中參考網
1 <table> 定義為一個表格。   w3schools runoob
2 <tr> 定義表格中的一個橫列。   w3schools runoob
3 <th> 定義表格中的標題儲存格(預設文字粗體置中)。   w3schools runoob
4 <td> 定義表格中的一般儲存格。   w3schools runoob
5 <thead> 定義表格中的首區。   w3schools runoob
6 <tbody> 定義表格中的內容區。   w3schools runoob
7 <tfoot> 定義表格中的尾區。   w3schools runoob

表單類標籤

NO 標籤 說明 HTML5 英文參考網 簡中參考網
1 <form> 定義一個表單的區域。   w3schools runoob
2 <input> 表單中的輸入欄位、選項欄位、表單按鈕(由 type 屬性來決定)。   w3schools runoob
3 <textarea> 表單中輸入可以換行的段落文字區域。   w3schools runoob
4 <select> 表單中定義下拉式選單的區域。   w3schools runoob
5 <option> <select> 中定義下拉式選單的一個選項。   w3schools runoob
6 <datalist> 定義可輸入過濾項目的下拉式選單。 V w3schools runoob
7 <label> 定義與表單欄位相關連的區域。   w3schools runoob

影音類標籤

NO 標籤 說明 HTML5 英文參考網 簡中參考網
1 <video> 定義一個視訊影片的區域。 V w3schools runoob
2 <audio> 定義一個音訊的區域。 V w3schools runoob
3 <source> 定義音訊或視訊的檔案所在。 V w3schools runoob

更多介紹

分類方式 英文參考網 簡中參考網
HTML 標籤依 "字母順序" 參考列表 w3schools runoob
HTML 標籤依 "功能分類" 參考列表 w3schools runoob
HTML 標籤 Tutorial 教程引導學習 w3schools runoob
HTML5 新標籤新屬性介紹   runoob