---
tags: html5
---
# HTML5
[TOC]
* * *
## HTML Index:
```html
<!DOCTYPE html> (表示使用 html5 版本)
<html>(root element)
<head>(標題相關)
<meta charset="utf-8">
<style></style>
<link rel="stylesheet" href="file.css">
Css相關定義可以在這裡導入, 直接定義(style)或是用(link)
<script type="text/javascript" src="file.js"></script>
JavaScript相關使用(script)導入, 可直接定義也可以使用額外檔案.js
(Css & JavaScript 都可以隨時導入, 但習慣放在head)
<title></title>(標題網頁名稱) 只能有一個"title"
</head>
<body>(主要網頁內容)
內容
</body>
</html>
```
## HTML Tags:
```html
<!-- 註解 --> (Ctrl + /) 整行加註解
<b>粗體</b>
<strong>著重</strong> (stress emphasis of its contents)
<i>斜體</i>
<em>強調</em> (strong importance for its contents)
<u>下底線</u>
<del>刪除線</del>
<mark>螢光筆</mark>
<hX> X=1~6 由大至小的標題(會自己分段)</hX> (heading)
<p>段落</p> (paragraph)
<br/> 斷行符號 (break)
<hr/> 一條水平線
<center>內容置中</center>
<pre>原始排版</pre>
<div class="">(內容區塊設定) class來統一設定</div> 設定通用區域
<font color="rrggbb" size=n>文字格式 大小顏色</font> (rgb 16位元)0~f
<small>內容縮小</small>
<big>內容放大</big>
<sup>上標</sup>
<sub>下標</sub>
```
* * *
## 清單(list):
`1. <ul>無序清單(Unordered lists)</ul> <li>列表內容</li>`
```html
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
```
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
* * *
`2. <ol>有序清單(Ordered lists) start=起始值 type=類型</ol> <li>列表內容</li>`
```html
<ol start=4>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
```
<ol start=4>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
* * *
## 列表(table): <tr>table row <th>table head(粗體) <td>table data
```html
<thead> <tbody> <tfoot> 列表的分群！
<table> <!-- 宣告表 -->
<tr> <!-- row -->
<th>(c0)</th> <!-- columns element -->
<th>(c1)</th>>
</tr>
<tr>
<td>(00)</td>
<td>(01)</td>
</tr>
<tr>
<td>(10)</td>
<td>(11)</td>
</tr>
</table>
```
<thead> <tbody> <tfoot> 列表的分群！
<table> <!-- 宣告表 -->
<tr> <!-- row -->
<th>(c0)</th> <!-- columns element -->
<th>(c1)</th>>
</tr>
<tr>
<td>(00)</td>
<td>(01)</td>
</tr>
<tr>
<td>(10)</td>
<td>(11)</td>
</tr>
</table>
* * *
## 圖片(image):
```html
<img src="" alt="">
<img src="位置" alt="圖片無法顯示的說明" width="寬" height="高"(px)>
alt (alternative) 這個屬性:
在網頁瀏覽者無法正確看到圖片時，你希望對他們呈現什麼樣的說明文字。
指限制單一寬高 會按照比例縮放
```
* * *
## 互動式tags:
```html
<a href="https://www.google.com.tw/">連結名稱</a> 超連結(link)
<a href="#id.val">連結名稱</a> 移動到id = id.val tag的位置
<a href="URL#id.val">連結名稱</a> 超連結到網址URL的網頁 id = id.val tag的位置
連結屬性:target 連結方式
<embed type="video/quicktime" src="" width="300" height="300"> 音樂連結
```
* * *
## 表單:
<form class=""
action=送出目的地(URL)空白的話就是傳給自己
method=資料傳送方式> 把資料回傳(把要回傳的資料包在form)
內容(input, textarea, select, button...等)
</form>
### 輸入input:
> ```html
> <input type=Y name=X value=""> type類型, value預設值
> ```
>
> #### input屬性(放在表單form中):
>
> | type: | | | |
> | :----------------- | :------ | :--------------------------------------- | --- |
> | **submit** | 送出按鈕 | 送出表單(form)中資料 | |
> | **image** | 圖像送出按鈕 | 送出表單(form)中資料 (圖片按鈕) | |
> | **reset** | 重設按鈕 | 復原表單(form)初始狀態 | |
> | **button** | 通用按鈕 | 用來激發JavaScript呼叫事件...等的按鈕 | |
> | **text** | 輸入欄位 | 文字框放入資料, `maxlength` 可以限制資料長度 | |
> | **search** | 搜尋欄位 | 文字框的一個類別 | |
> | **tel** | 電話欄位 | 文字框的一個類別 | |
> | **url** | 網址欄位 | 文字框的一個類別 | |
> | **email** | 電子郵件欄位 | 文字框的一個類別 | |
> | **number** | 數字欄位 | "限定"輸入數字, `step` 設置最小單位 | |
> | **password** | 密碼輸入欄位 | 文字框的一個類別 文字被遮蔽 | |
> | **hidden** | 隱藏欄位 | 不需要user輸入, 但使用上需要這個變數 | |
> | **range** | 範圍拉桿 | 產生一個範圍拉桿 | |
> | **color** | 顏色方框 | 顏色選擇方框 | |
> | **radio** | 選擇題(單選) | 多個`name`相同的元素, 輸出選擇的value, `checked`(預選) | |
> | **checkbox** | 選擇題(複選) | 多個`name`相同的元素, 輸出選擇的value, `checked`(預選) | |
> | **file** | 選擇檔案 | 上傳檔案選擇 | |
> | **datetime** | UTC日期時間 | 時間相關 | |
> | **datetime-local** | 本地日期時間 | 時間相關 | |
> | **date** | 日期欄位 | 時間相關 | |
> | **month** | 月份欄位 | 時間相關 | |
> | **week** | 星期欄位 | 時間相關 | |
> | **time** | 時間欄位 | 時間相關 | |
>
> **autocomplete**(自動填入): on, off
>
> ### 按鈕:
>
> ```html
> <button type="button" name="button"></button>
> button屬性:
> type: submit(送出按鈕), reset(重設按鈕), button(通用按鈕)
> ```
>
> ### 下拉式選項:
>
> ```html
> <select size="n" class="" name=""> size:同時顯示幾個選項
> <optgroup label="群組名稱"> 選項群組(可有可無)
> <option value="">選項值</option> *n 個選項
> </optgroup>
> </select>
> ```
>
> * * *
>
> ## label綁定:
>
> ```html
> <label for="綁定input.id">選項內容</label> 選項的內容也可以點選(方便選擇)
> ```
>
> * * *
* * *
## 事件
因為... 所以... (Event="id.val=foobar")
### Form Events 表單事件
> | Events | 引發時機 |
> | ------------- | ------------- |
> | onblur | 當元素失去操作焦點時 |
> | onchange | 當元素改變時 |
> | oncontextmenu | 當觸發選單(快顯功能表)時 |
> | onfocus | 當元素獲得操作時 |
> | onformchange | 當表單發生改變時 |
> | onformimput | 當表單任何元素被輸入時 |
> | oninput | 當元素被輸入資料時 |
> | oninvalid | 當元素無法使用時 |
> | onselect | 當元素被選取時 |
> | onsubmit | 當表單資料被送出時 |
>
> ### Keyboard Events 表單事件
>
> | Events | 引發時機 |
> | ---------- | ----------- |
> | onkeydown | 當按下鍵盤按鍵時 |
> | onkeypress | 當按下並放開鍵盤按鍵時 |
> | onkeyup | 當放開鍵盤按鍵時 |
>
> ### Mouse Events 滑鼠事件
>
> | Events | 引發時機(放置元素內 表示在元素內發生) |
> | ------------ | --------------------------- |
> | onclick | 當單擊滑鼠時(按下放開) |
> | ondbclick | 當雙擊滑鼠時(按下放開x2) |
> | ondrag | 當元素被拖曳時 |
> | ondragend | 當元素被拖曳結束時 |
> | ondragenter | 當元素被拖曳到有效元素目標元素上時(接觸目標元素) |
> | ondragleave | 當元素被拖曳到有效元素目標元素之外時(離開目標元素) |
> | ondragover | 當元素被拖曳過有效元素目標元素時(觸碰又離開目標元素) |
> | ondragstart | 當元素的拖曳動作開始時 |
> | ondrop | 當元素的拖曳動作正在進行時 |
> | onmousedown | 當按下滑鼠時 |
> | onmouseup | 當放開滑鼠時 |
> | onmousemove | 當移動滑鼠指標時 |
> | onmouseout | 當滑鼠指標從元素離開時 |
> | onmouseover | 當滑鼠指標移到元素時 |
> | onmousewheel | 當滾動滾輪時 |
> | onscroll | 當捲軸元素開始捲動時 |
>
> ### Window Events 視窗事件
>
> | Events | 引發時機 |
> | -------------- | ----------- |
> | onafterprint | 當網頁文件列印之後 |
> | onbeforeprint | 當網頁文件列印之前 |
> | onbeforeunload | 當網頁文件載入之前 |
> | onblur | 當視窗失去操作焦點時 |
> | onfocus | 當視窗操獲得作焦點時 |
> | onerror | 當錯誤發生時 |
> | onhaschange | 當網頁文件改變時 |
> | onload | 當網頁文件開始載入時 |
> | onmessage | 當獲得傳遞資料時 |
> | onoffline | 當網頁文件離線時 |
> | ononline | 當網頁文件再線時 |
> | onpagehide | 當視窗隱藏時 |
> | onpageshow | 當視窗可見時 |
> | onpopstate | 當視窗遊覽歷程被改變時 |
> | onredo | 當網頁文件再次被執行時 |
> | onresize | 當調整視窗大小時 |
> | onstorage | 當網頁文件執行時 |
> | onundo | 當網頁文件取消執行時 |
> | onunload | 當使用者離開網頁時 |
>
> ### Media Events 媒體事件
>
> | Events | 引發時機 |
> | ------------------ | ------------------------------ |
> | onabort | 當遊覽器完全載入前中止提取媒體資料時 |
> | oncanplay | 當媒體需要因資料緩衝而中斷時 |
> | oncanplaythrough | 當媒體不需要因為緩衝而中斷時 |
> | ondurationchange | 當媒體長度改變時 |
> | onemptied | 當媒體資料元素突然變成空元素時 |
> | onended | 當媒體結束時 |
> | onerror | 當元素在載入時期發生錯誤時 |
> | onloadeddata | 當媒體資料在載入時 |
> | onloadedmetadata | 當載入媒體的播放時間長度與媒體資源大小等的資訊時 |
> | onloadstart | 當遊覽器開始載入媒體時 |
> | onpause | 當媒體資料暫停播放時 |
> | onplay | 當媒體資料開始播放時 |
> | onplaying | 當媒體資料正在播放時 |
> | onprogress | 當遊覽器正在播放時 |
> | onratechange | 當媒體資料的播放速度改變時 |
> | onreadystatechange | 當準備狀態被改變時 |
> | onseeked | 當媒體元素停止請求數據資料時(seeking屬性false) |
> | onseeking | 當媒體元素正在請求數據資料時(seeking屬性true) |
> | onstalled | 當取得媒體資料期間發生錯誤時 |
> | onsuspend | 當遊覽器開始取得媒體資料但在完成前停止時 |
> | ontimeupdate | 當媒體改變播放位置時 |
> | onvolumechange | 當媒體的音量被改變或是設為靜音時 |
> | onwaiting | 當媒體停止播放又恢復播放時 |
* * *
## tags(element)的全域屬性:
class(類別名稱, 方便套用相同的樣式)
id(識別名稱, 給JavaScript參照) 只使用英文和數字
style(CSS宣告)
dir(文字走向：ltr, rtl 兩種 left 2 right)
contenteditable(能否編輯)
draggable(能否拖曳)
lang(語言碼)
spellcherk(對於輸入的標籤, 開啟拼字檢查功能)
translate(是否翻譯)
title(補充資料)
* * *
Sign in with Wallet
Connect another wallet