IT課程 HTML基礎 015_HTML5新特性

HTML5新特性

HTML5 是 HTML 的最新版本，它引入了許多新的標籤、屬性和功能，大大增強了 web 的功能和互動性。

HTML5 中的一些有趣的新特性：

用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar、date、time、email、url、search

`<canvas>`

HTML5 <canvas> 元素用於在網頁中繪製圖形。<canvas> 元素基於 JavaScript 的繪圖 API，可以用於創建各種圖形，包括圖表、圖形、動畫等。

示例：

1
<canvas width="500" height="500">
2
    您的瀏覽器不支持 HTML5 canvas 標籤。
3
</canvas>
4
<script>
5
    const canvas = document.querySelector("canvas");
6
    // 獲取繪圖上下文
7
    const ctx = canvas.getContext("2d");
8
    // 繪製圓形
9
    ctx.beginPath();
10
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
11
    ctx.fillStyle = "yellow";
12
    ctx.fill();
13
</script>

效果：

示例效果

`<svg>`

HTML5 SVG 元素用於在網頁中創建 SVG 圖形。SVG 圖形是基於 XML 的矢量圖形，可以無損縮放，適合用於各種目的，包括：

SVG 元素包括：

<svg> 元素：定義 SVG 圖形的根元素。
<path> 元素：定義路徑形狀。
<rect> 元素：定義矩形形狀。
<circle> 元素：定義圓形形狀。
<ellipse> 元素：定義橢圓形形狀。
<line> 元素：定義直線。
<polygon> 元素：定義多邊形。
<polyline> 元素：定義折線。
<text> 元素：定義文本。
<g> 元素：定義組，用於將 SVG 元素分組在一起。
<defs> 元素：定義全局屬性，可用於應用於多個 SVG 元素。

示例：

1
<svg width="500" height="500">
2
  <circle cx="250" cy="250" r="100" fill="yellow" />
3
</svg>

效果：

示例效果

SVG 和 Canvas 都是用於在網頁中創建圖形的工具。它們都具有各自的優點和缺點，適用於不同的場景。

SVG 是基於 XML 的矢量圖形，可以無損縮放。這意味著 SVG 圖形可以以任意大小顯示，而不會失去質量。SVG 圖形還可以使用 CSS 和 JavaScript 進行操作和動畫化。

Canvas 是基於 JavaScript 的繪圖 API，可以創建位圖圖形。這意味著 Canvas 圖形不能無損縮放，但可以使用 JavaScript 創建更複雜的圖形。Canvas 圖形還可以使用 JavaScript 進行操作和動畫化。

SVG 和 Canvas 的具體區別：

特性	SVG	Canvas
圖像類型	矢量	位圖
縮放	無損	有損
圖形類型	矩形、圓形、路徑等	任意
操作	CSS、JavaScript	JavaScript
動畫	CSS、JavaScript	JavaScript
文件大小	通常較小	通常較大
可訪問性	優秀	一般

SVG 適用於場景：
- 需要無損縮放的圖形，例如圖標、徽標、插圖
- 需要使用 CSS 和 JavaScript 進行操作和動畫化的圖形
Canvas 適用於場景：
- 需要創建複雜圖形的場景，例如遊戲、動畫
- 需要使用 JavaScript 進行複雜操作的場景

HTML5表單

HTML5 引入了一些新的輸入類型和屬性，以增強表單的功能和易用性。

新的表單元素：

<datalist> 元素：用於 <input> 元素的預定義選項列表。

示例：

1
<label for="browser">選擇瀏覽器：</label>
2
<input list="browsers" id="browser" name="browser" autocomplete="off">
3
<datalist id="browsers">
4
  <option value="Chrome">
5
  <option value="Firefox">
6
  <option value="Safari">
7
  <option value="Edge">
8
  <option value="Opera">
9
</datalist>

效果：

示例效果

元素	描述
`<datalist>`	定義一個用於 `<input>` 元素的預定義選項列表。
`<output>`	表示計算的結果。
`<keygen>`	為表單創建密鑰對，通常用於密鑰交換。
`<progress>`	定義任何類型的任務的進度條。
`<meter>`	衡量已知範圍內的標量值或分數。

新的表單屬性：

<form> / <input> autocomplete 屬性：規定 form 或 input 域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。

示例：

1
<form action="demo-form.php" autocomplete="on">
2
  尊姓：<input type="text" name="fname"><br>
3
  大名：<input type="text" name="lname"><br>
4
  郵箱：<input type="email" name="email" autocomplete="off"><br>
5
  <input type="submit">
6
</form>

效果：

示例效果

屬性	描述
`autocomplete`	指定輸入字段是否應啟用自動完成功能。
`novalidate`	禁止瀏覽器對表單進行驗證。
`form`	指定 `<input>` 元素所屬的表單，使其與特定表單相關聯。
`formaction`	指定在提交表單時使用的 URL。
`formenctype`	指定在提交表單時使用的編碼類型（例如，`application/x-www-form-urlencoded` 或 `multipart/form-data`）。
`formmethod`	指定在提交表單時使用的 HTTP 方法（例如，`get` 或 `post`）。
`formnovalidate`	提交表單時禁用瀏覽器的表單驗證。
`formtarget`	指定在提交表單後打開的目標窗口或框架。
`height`	設置 `<input type="image">` 元素的高度。
`width`	設置 `<input type="image">` 元素的寬度。
`list`	指定與 `<input>` 或 `<textarea>` 元素相關聯的 `<datalist>` 元素的 id。
`min`	指定 `<input>` 元素的最小值。
`max`	指定 `<input>` 元素的最大值。
`pattern`	定義在提交表單時驗證輸入字段的正則表達式。
`placeholder`	提供對輸入字段的簡短提示，僅在字段為空時顯示。
`required`	指定輸入字段是否為必填字段。
`step`	指定 `<input>` 元素的合法數字間隔。

新的 input 類型：

1
<form action="/submit" method="post">
2
  <label for="name">姓名：</label>
3
  <input type="text" id="name" required />
4
  <br>
5
  <label for="email">電子郵件地址：</label>
6
  <input type="email" id="email" required />
7
  <br>
8
  <label for="birthday">出生日期：</label>
9
  <input type="date" id="birthday" required />
10
  <br>
11
  <label for="phone">電話號碼：</label>
12
  <input type="tel" id="phone" required />
13
  <br>
14
  <input type="submit" value="提交" />
15
</form>

效果：

示例效果

類型	作用
color	用於輸入顏色值。
date	用於輸入日期值。
datetime-local	用於輸入日期和時間值。
email	用於輸入電子郵件地址。
file	用於上傳文件。
month	用於輸入月份值。
number	用於輸入數字值。
range	用於輸入範圍值。
search	用於輸入搜索字符串。
tel	用於輸入電話號碼。
time	用於輸入時間值。
url	用於輸入 URL 地址。

[!小結]

元素	作用	是否推薦
新增元素
`<canvas>`	定義圖形，比如圖表和其他圖像。該標籤基於JavaScript 的繪圖API。	推薦
`<audio>`	定義音頻內容	推薦
`<video>`	定義視頻（video 或者movie）	推薦
`<source>`	定義多媒體資源`<video>` 和`<audio>`	推薦
`<track>`	定義音頻或視頻的字幕或翻譯	推薦
`<datalist>`	定義選項列表。請與input 元素配合使用該元素，來定義input 可能的值。	推薦
`<keygen>`	規定用於表單的密鑰對生成器字段。	推薦
`<output>`	定義不同類型的輸出，比如腳本的輸出。	推薦
`<article>`	定義頁面獨立的內容區域。	推薦
`<aside>`	定義頁面的側邊欄內容。	推薦
`<bdi>`	允許您設置一段文本，使其脫離其父元素的文本方向設置。	推薦
`<dialog>`	定義對話框。	推薦
`<figure>`	定義包含圖像或其他可視內容的區域。	推薦
`<footer>`	定義頁面或部分頁面的底部區域。	推薦
`<header>`	定義頁面或部分頁面的頭部區域。	推薦
`<main>`	定義頁面的主要內容區域。	推薦
`<mark>`	定義重要或突出顯示的文本。	推薦
`<meter>`	定義進度或值範圍。	推薦
`<nav>`	定義頁面或部分頁面的導航區域。	推薦
`<progress>`	定義進度條。	推薦
`<time>`	定義日期或時間。	推薦
`<wbr>`	允許在文本中插入可斷行的字符。	推薦
已棄用或不推薦元素
`<acronym>`	定義首字母縮寫詞。建議使用 `<abbr>` 元素代替。	推薦
`<applet>`	定義Java 小程序。建議使用JavaScript 或其他現代技術代替。	不推薦
`<basefont>`	設置頁面中所有文本的默認字體大小和顏色。建議使用CSS 來設置文本樣式。	不推薦
`<big>`	設置文本的字體大小。建議使用CSS 來設置文本樣式。	不推薦
`<center>`	強制文本居中對齊。建議使用CSS 來設置文本對齊方式。	不推薦
`<dir>`	定義目錄列表。建議使用 `<ul>` 元素代替。	不推薦
`<font>`	設置文本的字體大小、顏色、樣式等。建議使用CSS 來設置文本樣式。	不推薦
`<frame>`	定義框架。建議使用iframe 元素代替。	不推薦
`<frameset>`	定義框架集。建議使用iframe 元素代替。	不推薦
`<noframes>`	為不支持框架的瀏覽器提供替代內容。建議使用JavaScript 來判斷瀏覽器是否支持框架，並根據情況顯示或隱藏內容。	不推薦
`<strike>`	設置文本的刪除線。建議使用CSS 來設置文本樣式。	不推薦
`<tt>`	設置文本的等寬字體。建議使用CSS 來設置文本字體。	不推薦

HTML5新特性

<canvas>

<svg>

HTML5表單

新的表單元素：

新的表單屬性：

新的 input 類型：

評論

`<canvas>`

`<svg>`