【HTML】HTML標籤大全

標籤預設值

元素	display
address、article、aside、blockquote、body、dd、details、div、dl、dt、fieldset、figcaption、figure、footer、form、frame、frameset、h1、h2、h3、h4、h5、h6、header、hr、html、iframe、noframes、legend、p、ul、center、dir、menu、nav、ol、pre、summary、section	block
map、output、q、span	inline
input、select、img	inline-block
area、datalist、head、link、param、title、style、script	none
table	table
tr	table-row
thead	table-header-group
tbody	table-row-group
tfoot	table-footer-group
caption	table-caption
col	table-column
colgroup	table-column-group
td、th	table-cell
li	list-item

網頁初步結構

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63


<!DOCTYPE html>
<html lang="zh-tw"> <!--整份網頁文件，用來包<head>、<body>標籤-->  
    <head>
        <title>網頁標題</title>
        
        <meta charset="UTF-8"> <!--網頁編碼-->
        
        <!--favicon生產網址：https://realfavicongenerator.net/-->
        <link rel="shortuct icon" href="favicon.icon">
        <link rel="bookmark" href="favicon-32x32.png">
        <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
        <link rel="manifest" href="site.webmanifest"> <!--應用程式相關的資訊(json格式)-->
        <link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="theme-color" content="#ffffff">

        <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--自動將IE瀏覽器升級-->
        
        <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
        <!--響應手機版，首次載入頁面的縮放比emmet快速語法meta:vp-->
        <!--device-width畫面寬度-->
        <!--device-height畫面高度-->
        <!--initial-scale初始縮放比-->
        <!--minimum-scale最小可縮放比-->
        <!--maximum-scale最大可縮放比-->
        <!--user-scalable使用者是否可縮放-->

        <meta http-equiv="refresh"  content="5" url="...">
        <!--進入該網站後5秒後，自動轉跳至其他網頁-->

        <meta name="description" content="網頁說明"> <!--內容建議以，分隔-->
        <meta name="keywords" content="網頁關鍵字"> <!--Google已不看，可改放在說明-->
        <meta name="author" content="網頁作者">
        <meta name="robots" content="noindex"> <!--讓搜尋引擎不要索引這個網頁-->

        <meta property="og:title" content="顯示的FB標題">
        <meta property="og:description" content="FB描述的內容">
        <meta property="og:type" content="website"> <!--網站類型-->
        <meta property="og:url" content="FB上的網址">
        <meta property="og:site_name" content="網站名稱">
        <meta property="og:image" content="顯示的圖片網址">

        <link rel="stylesheet" href="all.css"> <!--引入檔案連結--> 
        <base target="_blank"> <!--定義該網頁的連結方式-->
    </head>
    <body>
        <header>頁首</header>
        <nav>選單列/導覽列</nav>
        <main>主要內容，用來包article、aside標籤</main>
        <article>用來包section標籤</article>
        <section>用來包一段文章h*、p標籤</section>
        <aside>側邊欄</aside>
        <footer>頁腳</footer>
        <details>用來包summary標籤</details>
        <summary>顯示詳細信息</summary>
        <mark>強調的內容(黃底)</mark>
        <time>顯示日期時間</time>
        <script src="引入js檔案連結"></script>
    </body>
</html>

webmanifest

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


{
    “name”: “simpleWeb”,
    “short_name”: “simpleWeb”,
    “start_url”: “https://simpleWeb.com”,
    “description”: “A simply readable Hacker News app.”,
    “theme_color”: “#ffffff”,
    “background_color”: “#ffffff”,
    “display”: “standalone”,
    “icons”: [
        {
            “src”: “/android-chrome-192x192.png”,
            “sizes”: “192x192”,
            “type”: “image/png”
        },
        {
            “src”: “/android-chrome-512x512.png”,
            “sizes”: “512x512”,
            “type”: “image/png”
        }
    ]
}

文字類標籤

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


<h1>一級標題</h1>

<h2>二級標題</h2>

<h3>三級標題</h3>

<h4>四級標題</h4>

<h5>五級標題</h5>

<h6>六級標題</h6>

<p>內文</p>

<mark>highlight文字</mark>

<del>被刪除的內容文字</del>

<s>不準確的內容刪除線</s>

<b>純粗體文字</b>

<strong>強調語意的粗體</strong> 

<i>語音或技術用語的斜體</i>

<em>純斜體文字</em> 

<u>文字下底線</u>

<ins>補充的內容</ins> <!--插入被編輯過的新文字-->
cite="連結網址" <!--解釋該段文字被插入或修改的原因-->
datatime="2018-05" <!--插入或被修改的時間-->

<small>較小的文字</small>

<sub>較小的文字(下方)</sub>

<sup>較小的文字(上方)</sup>

<q>" "(符號)</q>

<span>不換行(行內元素)</span>

<abbr title="javascript">JS</abbr> <!--語意(滑鼠比著會顯示)-->

<blockquote>引用的文字(縮排)</blockquote> <!--文章章節內容引用-->

全域屬性(Global Attributes)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<div class="..."></div>
id="..." <!--設定元素唯一值--> 
class="..." <!--設定元素的樣式類別-->  
style="background-color:red" <!--設定元素css樣式-->  
title="..." <!--設定元素的標題--> 
data-*="..." <!--自定義屬性值-->  
lang="en" <!--設定元素內容語言--> 
dir="auto" <!--(預設值)--> 
dir="ltr" <!--文字顯示方向(左到右)--> 
dir="rtl" <!--文字顯示方向(右到左)--> 
accesskey="K" <!--設定元素的快捷鍵--> 
tabindex="3" <!--設定元素按下tab時的跳格順序--> 
contenteditable="true" <!--內容可編輯-->  
contenteditable="false" <!--內容不可編輯-->  
draggable="true" <!--元素可被點擊拖動--> 
draggable="false" <!--元素不可被點擊拖動--> 
translate="true" <!--設定元素內容能被自動翻譯--> 
translate="false" <!--設定元素內容不能被自動翻譯--> 
spellcheck="true" <!--啟動firefox瀏覽器拼字檢查--> 
spellcheck="false" <!--關閉firefox瀏覽器拼字檢查--> 
hidden <!--隱藏--> 

無序清單(ul)

1
2
3
4
5


<ul>
    <li>項目一</li>
    <li>項目二</li>
    <li>項目三</li>
</ul>

有序清單(ol)

1
2
3
4
5
6
7


<ol>
    <li>項目一</li>
    <li>項目二</li>
    <li>項目三</li>
</ol>
start="數字" <!--設定數列起頭編號--> 
reversed <!--讓數列反向呈現--> 

描述清單(dl)

1
2
3
4


<dl>
    <dt>項目標題</dt>
    <dd>項目敘述</dd>
</dl>

連結(a)

1
2
3
4
5
6
7


<a href="超連結網址">字字字</a>
title="滑鼠停留顯示的文字" 
target="_blank" <!--另開新視窗--> 
target="_self" <!--以現在視窗開啟--> 
target="_parent" <!--開啟於父層框架--> 
style="text-decoration:none" <!--隱藏文字底線--> 
download="xxx.jpg" <!--直接下載圖片--> 

用來包所有可點擊的元件

圖片(img)

1
2
3


<img src="圖片網址" alt="視障人士閱讀或圖片無法顯示時的名稱">
ismap <!--設定圖片是影像地圖的一部分-->
srcset <!--搭配media可在不同瀏覽裝置裡載入不同內容(網址)-->

圖片注意事項

<img>預設值是display:inline-block會有白色空隙

1
2
3
4
5
6


img{
    display: block;
    max-width: 100%;
    object-fit: cover;
    object-fit: center center;
}

讓圖片保持1:1

1
2
3


<div class="container">
    <div class="item">content</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


.container{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background-color: red;
}
.item{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

讓圖片保持16:9

1
2
3


<div class="container">
    <div class="item">content</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


.container{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%; //9 ÷ 16 × 100% = 56.25%
    background-color: red;
}
.item{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#
#### 進階圖片
#
```html
<figure>包覆圖片描述用
    <img src="圖片網址" alt="視障人士閱讀或圖片無法顯示時的名稱">
    title="滑鼠停留顯示的文字"
    width="圖片寬度"
    height="圖片高度" 
    loading="lazy" <!--延遲載入圖片，可提提升效能--> 
    <figcaption>圖片敘述</figcaption>
</figure>

表格(table)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<table>
    <tr> 
        <th>Month</th> 
        <th>Savings</th>
    </tr>
    <tr>
        <td>Sum</td>
        <td>$180</td>
    </tr>
    <tr>
    <td>January</td>
    <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$80</td>
    </tr>
</table>

進階表格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


<table>
width="表格寬度" 
border="框線粗度" 
border="0" <!--無框線-->
colspan="水平合併幾格" 
rowspan="垂直合併幾格" 
rowspan="0" <!--垂直合併到底-->
cellspacing="表格欄位間距"
cellpadding="表格欄位的留白距"
    <caption>用來描述表格</caption>
    <colgroup> <!--欄群組-->
        <col span="1" style="background-color: red"/> <!--第一欄-->
        <col span="1" style="background-color: yellow"/> <!--第二欄-->
    </colgroup>
    <thead>
        <tr> <!--tr列-->
            <th>Month</th> <!--th表頭-->
            <th>Savings</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
</table>

音訊(audio)

1
2
3
4
5
6
7
8


<audio src="檔案連結"></audio>
type="audio/mpeg" <!--音訊類型-->
type="audio/ogg" <!--音訊類型-->
autoplay <!--自動播放-->
controls <!--出現撥放控制按鈕-->
loop <!--自動循環播放-->
preload <!--進入網頁時優先載入-->
muted <!--靜音->

影片(video)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<video src="影片連結" controls></video>
width="影片寬度"
height="影片高度"
type="video/mp4" <!--影片類型-->
type="video/ogg" <!--影片類型-->
poster <!--未按下播放前顯示圖片-->
autoplay <!--自動播放-->
controls <!--出現撥放控制按鈕-->
loop <!--自動循環播放-->
preload <!--進入網頁時優先載入-->
muted <!--靜音->

按鈕(button)

1
2
3
4
5
6
7
8


<button>按鈕</button>
disabled <!--禁止點擊-->
type="button" <!--單純按鈕-->
type="reset" <!--清空按鈕-->
type="submit" <!--送出按鈕-->
name="按鈕名稱"
value="按鈕的值"
onclick="location.href='要前往的網址'"

下拉選單(select)

1
2
3
4
5


<select>
    <option>選項一</option>
    <option>選項二</option>
    <option>選項三</option>
</select>

群組選單

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<select>
name="選單名稱"
disabled <!--禁用選單-->
required <!--必填選單-->
multiple <!--多選選單(按住ctrl鍵)-->
multiple size="一次顯示幾格選單"
    <optgroup label="群組一標題"> <!--區分項目名稱(不可選)-->
        <option>選項一</option>
        selected <!--預選項目-->
        disabled <!--禁用項目-->
        value="選單的值"
        <option>選項二</option>
        <option>選項三</option>
    </optgroup>
    <optgroup label="群組二標題">
        <option>選項一</option>
        <option>選項二</option>
    </optgroup>
</select>

文字輸入欄(textarea)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<textarea>文字欄位預設文字</textarea>
name="欄位名稱"
cols="可以打幾個字元"
rows="可以打幾行"
maxlength="最多字數"
minlength="最少字數" 
placeholder <!--輸入欄提示訊息-->
disabled <!--禁用狀態-->
readonly <!--不可編輯-->
required <!--必填欄位-->

內崁框架(iframe)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<iframe src="崁入網址"></iframe>
width="框架寬度" 
height="框架高度" 
frameborder="框架線框粗度" 
frameborder="0" <!--無線框-->
scrolling="no" <!--不要捲軸-->
<object data="崁入網址" type="檔案類型">
    <param name="參數名稱" value="參數值">
</object>

<embed src="崁入網址" type="檔案類型">

表單(form)

1
2
3
4
5
6
7
8


<form action="..."> <!--將資料送去哪-->
method="get" <!--將資料直接放在網址上-->
method="post" <!--將資料放在http傳輸包中送出-->
name="對應資料庫" <!--label和input要一樣-->
    <label for="mail">e-mail：</label>
    <input id="mail" type="text" name="e-mail" placeholder="請輸入電子信箱">
    <input type="submit" value="送出">
</form>

按送出後name的值會顯示在http上，email="輸入框裡的值"

單選按鈕(radio)

1
2
3
4
5
6


<form action="..."> 
    <label for="mail">性別：</label>
    <input id="mail" type="radio" name="sex" value="man"> 男生
    <input id="mail" type="radio" name="sex" value="woman"> 女生
    <input type="submit" value="送出">
</form>

核取方塊(checkbox)

1
2
3
4
5
6
7


<form action="..."> 
    <label for="hobby">興趣：</label>
    <input id="hobby" type="checkbox" name="hobby" value="movie"> 看電影
    <input id="hobby" type="checkbox" name="hobby" value="music"> 聽音樂
    <input id="hobby" type="checkbox" name="hobby" value="comic"> 看漫畫
    <input type="submit" value="送出">
</form>

自訂核取方塊(checkbox)

1
2
3
4


<label class="checkbox-label">記住此帳號
    <input class="checkbox-input" type="checkbox">
    <span class="checkbox-span"></span>
</label>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59


.checkbox-label{
    position: relative;
    color: #ffffff;
    padding-left: 1.5rem;
    line-height: 1rem;
    cursor: pointer;

    &:hover{
        .checkbox-span{
            background-color: rgba(#ffffff, 0.8);
        }
    }

    .checkbox-input{
        width: 0;
        height: 0;
        opacity: 0;
    }

    .checkbox-span{
        position: absolute;
        top: 0;
        left: 0;
        width: 1rem;
        height: 1rem;
        background-color: #ffffff;
        transition: 0.3s;

        &:before{
            content: "";
            width: 13px;
            height: 3px;
            background-color: #000000;
            transform: translate(4px, 7px) rotate(-45deg);
        }

        &:after{
            content: "";
            width: 8px;
            height: 3px;
            background-color: #000000;
            transform: translate(0px, 7px) rotate(45deg);
        }

    }

    .checkbox-input:checked ~ .checkbox-span{
        background-color: green;
    }

    .checkbox-input:checked ~ .checkbox-span::before{
        display: block;
    }

    .checkbox-input:checked ~ .checkbox-span::after{
        display: block;
    }

}

輸入(input)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


<input>按鈕/輸入欄
required <!--必填欄位-->
readonly <!--只能閱讀、不能編輯欄位-->
disabled <!--不可用欄位-->
autofocus <!--載入頁面時自動focus-->
pattern="\d{10}" <!--必須連續出現10個數字(手機號碼格式)-->
pattern="\d{4}/\d{2}/\d{2}" <!--YYYY/MM/DD(日期格式)-->
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}" <!--信箱格式-->
value="值(預設內容)"
placeholder="輸入提示訊息"
name="值的名稱"
autocomplete="off" <!--點擊欄位時不出現常用值-->
type="text" <!--輸入文字欄位-->
type="search" <!--搜尋欄-->
type="tel" <!--電話輸入欄位-->
type="url" <!--網址輸入欄位-->
type="email" <!--信箱輸入欄位-->
type="date" value="預設值" min="最小值" max="最大值" <!--日期輸入欄位-->
type="time" value="預設值" min="最小值" max="最大值" <!--時間輸入欄位-->
type="number" value="預設值" min="最小值" max="最大值" step="節數" <!--數字輸入欄位-->
type="range" value="預設值" min="最小值" max="最大值" step="節數" <!--數字滑動範圍-->
type="color" <!--顏色選擇器-->
type="password" <!--輸入密碼欄位-->
type="submit" <!--送出按鈕-->
type="reset" <!--重設表單-->
type="hidden" <!--隱藏資料-->
type="image" <!--圖片送出按鈕-->
type="file" accept="image/jpeg" multiple <!--檔案上傳按鈕(多選)-->
type="button" <!--按鈕-->
type="textarea" <!--多行文字輸入欄-->
inputmode="none" <!--沒有鍵盤-->
inputmode="numeric" <!--只有數字沒有符號-->
inputmode="tel" <!--數字＃＊＋-->
inputmode="decimal" <!--數字＋.-->
inputmode="email" <!--英文＠-->
inputmode="url" <!--英文.com-->
inputmode="search" <!--換行鍵＝前往-->

其他

1
2
3
4
5
6
7
8
9


<br>換行

<hr>水平線

<address>文章、作者、地址資訊標籤(斜體)</address>

<pre>文字編排不受改變的呈現</pre>

<code>程式碼</code>

腳本(script)

1
2
3
4


<script src="..."></script>
language="en" <!--腳本語言種類-->
async <!--以非同步的方式加載資源，加載成功後會中斷頁面解析，立即執行資源內容-->
feter <!--以非同步的方式加載資源，加載成功後會在ready前執行資源內容-->

html

【HTML】HTML標籤大全

文字、清單、連結、連結、表格、影片、音訊、按鈕、選單、輸入欄、內崁框架

【HTML】HTML標籤大全

文字、清單、連結、連結、表格、影片、音訊、按鈕、選單、輸入欄、內崁框架

標籤預設值

網頁初步結構

webmanifest

文字類標籤

全域屬性(Global Attributes)

無序清單(ul)

有序清單(ol)

描述清單(dl)

連結(a)

圖片(img)

圖片注意事項

讓圖片保持1:1

讓圖片保持16:9

表格(table)

進階表格

音訊(audio)

影片(video)

按鈕(button)

下拉選單(select)

群組選單

文字輸入欄(textarea)

內崁框架(iframe)

表單(form)

單選按鈕(radio)

核取方塊(checkbox)

自訂核取方塊(checkbox)

輸入(input)

其他

腳本(script)

其他相關