Python全棧開發學習--HTML 5--標籤--Day8

HTML5 概述

HTML5是HTML最新的修訂版本，由萬維網聯盟（W3C）於2014年10月完成標準制定。目標是取代1999年所制定的HTML 4.01和XHTML 1.0標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到匹配當代的網絡需求。

一、HTML 5 新增元素

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

二、HTML5 新增元素速查表

元素	描述
canvas	用於在網頁上繪製圖形
svg	用於在網頁中插入矢量圖
MathML	數學標記語言，是一種基於XML（標準通用標記語言的子集）的標準，用來在互聯網上書寫數學符號和公式的置標語言。
video	用於在網頁中播放視頻
audio	用於在網頁中播放音頻
input	表單輸入框類型
form	表單元素
語意元素	沒有特殊的意義，傳統的元素通過不同的語義明確其在頁面中位置

三、HTML5 新增元素具體使用方法

3.1 canvas

<canvas> 標籤定義圖形容器，比如圖表和其他圖像，您必須使用腳本（通常是JavaScript)）來繪製圖形。可以通過多種方法使用 canvas 繪製路徑,盒、圓、字符以及添加圖像等

3.1.1 用法

需要指定一個id屬性 (腳本中經常引用), width 和 height 屬性定義的畫布的大小.

<canvas id="myCanvas" width="200" height="100"></canvas>

3.2 svg

3.2.1 矢量圖的概念

矢量圖是根據幾何特性來繪製圖形，矢量可以是一個點或一條線，矢量圖只能靠軟件生成，文件佔用內在空間較小，因爲這種類型的圖像文件包含獨立的分離圖像，可以自由無限制的重新組合。它的特點是放大後圖像不會失真，也就是說當我們放大一張圖片的時候不會出現類似於馬賽克的小方塊，和分辨率無關，適用於圖形設計、文字設計和一些標誌設計、版式設計等。

3.2.2 用法

HTML5 中，能夠將 SVG 元素直接嵌入 HTML 頁面中SVG 代碼以 <svg> 元素開始，包括開啓標籤 <svg> 和關閉標籤 </svg> 。這是根元素。width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
 具體詳見svg的使用方法 
</svg>

3.3 MathML

3.3.1 用法

<math xmlns="http://www.w3.org/1998/Math/MathML">
	具體的數學公式
</math>

3.4 video

大多數視頻是通過插件（比如 Flash）來顯示的。然而，並非所有瀏覽器都擁有同樣的插件。HTML5 規定了一種通過 video 元素來包含視頻的標準方法。

3.4.1 用法

帶有兩個源文件的視頻播放器。瀏覽器需要選擇它所支持的源文件（如果都支持則任選一個）：

<video width="320" height="240" controls>
  <source src="video1.mp4" type="video/mp4">
  <source src="video2.ogg" type="video/ogg">
</video>

3.4.2 視頻文件格式

3.5 audio

3.5.1 用法

<source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件

control 屬性供添加播放、暫停和音量控件。

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

3.5.2 音頻格式

3.6 input

3.6.1 type="color"

<input type="color" name="favcolor">

用在input字段主要用於選取顏色

3.6.2 type="date"

<input type="date" name="bday">

從一個日期選擇器選擇一個日期

類似字段還有：type="datetime"、type="datetime-local"、type="month"、type=“time”、type=“week”

3.6.3 type="email"

在提交表單時，會自動驗證 email 域的值是否合法有效:

E-mail: <input type="email" name="email">

3.6.4 type="number"

<input type="number" name="quantity" min="1" max="5">

使用下面的屬性來規定對數字類型的限定：

3.6.5 type=“range”

定義一個不需要非常精確的數值（類似於滑塊控制）:

<input type="range" name="points" min="1" max="10">

3.5.6 type="url"

在提交表單時，會自動驗證 url 域的值。

 <input type="url" name="homepage">

3.7 form元素

3.7.1 <datalist>

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

使用 <input> 元素的列表屬性與 <datalist> 元素綁定.

請輸入瀏覽器：
<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

3.7.2 <keygen>

當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
私鑰（private key）存儲於客戶端，公鑰（public key）則被髮送到服務器。公鑰可用於之後驗證用戶的客戶端證書（client certificate）。

這個暫時不知道用法，等到用到的時候在具體研究。

3.7.3 <output>

將計算結果顯示在 <output> 元素，用於腳本或者其他計算的輸出

<input type="number" id="a" value="50">
+
<input type="number" id="b" value="50">
=
<output name="x" for="a b"></output>

3.7.4 表單新屬性

HTML5 的 <form> 和 <input>標籤添加了幾個新屬性.
（1）autocomplete：表單提交後，刷新頁面表單會自動填充之前填入的數據

	（1.1）用法：
	autocomplete=“on”
	autocomplete=“off”

（2）novalidate：添加該屬性後，表單域無需驗證，例如，email等需要驗證的表單元素

<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

<input>新屬性：

（1）autofocus：提交後自動聚焦（類似於提交後表單保持顏色填充狀態等）
（2）form：引用表單外的其他表單元素

<form action="demo-form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>
 
Last name: <input type="text" name="lname" form="form1">

（3）formaction：覆蓋form元素中的action屬性

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

（4）formenctype：表單提交到服務器的數據編碼 (只對form表單中 method=“post” 表單)。覆蓋 form 元素的 enctype 屬性。
注意： 該屬性與 type=“submit” 和 type=“image” 配合使用。

<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 提交">
</form>

（5）formmethod：屬性定義了表單提交的方式。覆蓋了 form元素的 method 屬性。

/*第一個input使用get方法*/
/*第二個input使用post方法*/
<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

（6）formnovalidate：提交時無需驗證
（7）placeholder：placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。

 <input type="text" name="fname" placeholder="請輸入姓名">

（8）required： 屬性規定必須在提交之前填寫輸入域（不能爲空）

不能爲空的input字段:

Username: <input type="text" name="usrname" required>

3.8 語義元素

<article> 定義文章

<aside> 定義文章的側邊欄

<figure> 一組媒體對象以及文字

<figcaption> 定義 figure 的標題

<footer>定義頁腳、一個頁腳通常包含文檔的作者，著作權信息，鏈接的使用條款，聯繫信息等

<header>定義頁眉

<hgroup>定義對網頁標題的組合

<nav>定義導航

<section> 定義文檔中的區段、比如章節、頁眉、頁腳或文檔中的其他部分。

<time>定義日期和時間

<dialog>定義一個對話框