整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML5第六節(jié) 表單的介紹

          HTML5第六節(jié) 表單的介紹

          單中所有表單元素都包含在form標(biāo)簽中

          <name>名字

          <action>數(shù)據(jù)提交

          <method>數(shù)據(jù)提交方式post不會(huì)有顯示和get 會(huì)有顯示


          1.文本框

          2.密碼框

          3.單選按鈕

          4.復(fù)選框

          5.下拉列表

          6.按鈕


          <input type>長(zhǎng)括號(hào)

          <value>提交


          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8" />

          <title></title>

          </head>

          <body>

          <form name="" action="" method="get">

          用戶名:<input type="text" name="">

          密碼:<input type="password" name="">

          <input type="submit" value="登入"><input type="reset" value="取消">

          </form>

          </body>

          </html>

          TML5 是第五個(gè)且是當(dāng)前的 HTML 版本,它是用于在萬(wàn)維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語(yǔ)言。本文將幫助讀者了解它。 -- Palak Shah

          本文導(dǎo)航
          • -新標(biāo)簽和元素 …… 08%

          • -HTML5 的高級(jí)功能 …… 16%

          • -地理位置 …… 16%

          • -網(wǎng)絡(luò)存儲(chǔ) …… 33%

          • -應(yīng)用緩存(AppCache) …… 44%

          • -視頻 …… 50%

          • -音頻 …… 61%

          • -畫布(Canvas) …… 71%

          • -HTML5 工具 …… 78%

          編譯自: http://opensourceforu.com/2017/06/introduction-to-html5/

          作者: Palak Shah

          譯者: geekpi

          HTML5 是第五個(gè)且是當(dāng)前的 HTML 版本,它是用于在萬(wàn)維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語(yǔ)言。本文將幫助讀者了解它。

          HTML5 通過 W3C 和Web 超文本應(yīng)用技術(shù)工作組Web Hypertext Application Technology Working Group之間的合作發(fā)展起來(lái)。它是一個(gè)更高版本的 HTML,它的許多新元素可以使你的頁(yè)面更加語(yǔ)義化和動(dòng)態(tài)。它是為所有人提供更好的 Web 體驗(yàn)而開發(fā)的。HTML5 提供了很多的功能,使 Web 更加動(dòng)態(tài)和交互。

          HTML5 的新功能是:

          • 新標(biāo)簽,如 <header> 和 <section>

          • 用于 2D 繪圖的 <canvas> 元素

          • 本地存儲(chǔ)

          • 新的表單控件,如日歷、日期和時(shí)間

          • 新媒體功能

          • 地理位置

          HTML5 還不是正式標(biāo)準(zhǔn)(LCTT 譯注:HTML5 已于 2014 年成為“推薦標(biāo)準(zhǔn)”),因此,并不是所有的瀏覽器都支持它或其中一些功能。開發(fā) HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個(gè)插件。

          新標(biāo)簽和元素

          • 語(yǔ)義化元素: 圖 1 展示了一些有用的語(yǔ)義化元素。

          • 表單元素: HTML5 中的表單元素如圖 2 所示。

          • 圖形元素: HTML5 中的圖形元素如圖 3 所示。

          • 媒體元素: HTML5 中的新媒體元素如圖 4 所示。

          圖 1:語(yǔ)義化元素

          圖 2:表單元素

          圖 3:圖形元素

          圖 4:媒體元素

          HTML5 的高級(jí)功能

          地理位置

          這是一個(gè) HTML5 API,用于獲取網(wǎng)站用戶的地理位置,用戶必須首先允許網(wǎng)站獲取他或她的位置。這通常通過按鈕和/或?yàn)g覽器彈出窗口來(lái)實(shí)現(xiàn)。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

          地理位置的一些用途是:

          • 公共交通網(wǎng)站

          • 出租車及其他運(yùn)輸網(wǎng)站

          • 電子商務(wù)網(wǎng)站計(jì)算運(yùn)費(fèi)

          • 旅行社網(wǎng)站

          • 房地產(chǎn)網(wǎng)站

          • 在附近播放的電影的電影院網(wǎng)站

          • 在線游戲

          • 網(wǎng)站首頁(yè)提供本地標(biāo)題和天氣

          • 工作職位可以自動(dòng)計(jì)算通勤時(shí)間

          工作原理: 地理位置通過掃描位置信息的常見源進(jìn)行工作,其中包括以下:

          • 全球定位系統(tǒng)(GPS)是最準(zhǔn)確的

          • 網(wǎng)絡(luò)信號(hào) - IP地址、RFID、Wi-Fi 和藍(lán)牙 MAC地址

          • GSM/CDMA 蜂窩 ID

          • 用戶輸入

          該 API 提供了非常方便的函數(shù)來(lái)檢測(cè)瀏覽器中的地理位置支持:

          if (navigator.geolocation) {

          // do stuff

          }

          getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設(shè)備的當(dāng)前地理位置。該位置被描述為一組地理坐標(biāo)以及航向和速度。位置信息作為位置對(duì)象返回。

          語(yǔ)法是:

          getCurrentPosition(showLocation, ErrorHandler, options);
          • showLocation:定義了檢索位置信息的回調(diào)方法。

          • ErrorHandler(可選):定義了在處理異步調(diào)用時(shí)發(fā)生錯(cuò)誤時(shí)調(diào)用的回調(diào)方法。

          • options (可選): 定義了一組用于檢索位置信息的選項(xiàng)。

          我們可以通過兩種方式向用戶提供位置信息:測(cè)地和民用。

          1. 描述位置的測(cè)地方式直接指向緯度和經(jīng)度。

          2. 位置信息的民用表示法是人類可讀的且容易理解。

          如下表 1 所示,每個(gè)屬性/參數(shù)都具有測(cè)地和民用表示。

          圖 5 包含了一個(gè)位置對(duì)象返回的屬性集。

          圖5:位置對(duì)象屬性

          網(wǎng)絡(luò)存儲(chǔ)

          在 HTML 中,為了在本機(jī)存儲(chǔ)用戶數(shù)據(jù),我們需要使用 JavaScript cookie。為了避免這種情況,HTML5 已經(jīng)引入了 Web 存儲(chǔ),網(wǎng)站利用它在本機(jī)上存儲(chǔ)用戶數(shù)據(jù)。

          與 Cookie 相比,Web 存儲(chǔ)的優(yōu)點(diǎn)是:

          • 更安全

          • 更快

          • 存儲(chǔ)更多的數(shù)據(jù)

          • 存儲(chǔ)的數(shù)據(jù)不會(huì)隨每個(gè)服務(wù)器請(qǐng)求一起發(fā)送。只有在被要求時(shí)才包括在內(nèi)。這是 HTML5 Web 存儲(chǔ)超過 Cookie 的一大優(yōu)勢(shì)。

          有兩種類型的 Web 存儲(chǔ)對(duì)象:

          1. 本地 - 存儲(chǔ)沒有到期日期的數(shù)據(jù)。

          2. 會(huì)話 - 僅存儲(chǔ)一個(gè)會(huì)話的數(shù)據(jù)。

          如何工作: localStorage 和 sessionStorage 對(duì)象創(chuàng)建一個(gè) key=value 對(duì)。比如: key="Name", value="Palak"。

          這些存儲(chǔ)為字符串,但如果需要,可以使用 JavaScript 函數(shù)(如 parseInt() 和 parseFloat())進(jìn)行轉(zhuǎn)換。

          下面給出了使用 Web 存儲(chǔ)對(duì)象的語(yǔ)法:

          • 存儲(chǔ)一個(gè)值:

          • localStorage.setItem("key1", "value1");

          • localStorage["key1"]="value1";

          • 得到一個(gè)值:

          • alert(localStorage.getItem("key1"));

          • alert(localStorage["key1"]);

          • 刪除一個(gè)值: -removeItem("key1");

          • 刪除所有值:

          • localStorage.clear();

          應(yīng)用緩存(AppCache)

          使用 HTML5 AppCache,我們可以使 Web 應(yīng)用程序在沒有 Internet 連接的情況下脫機(jī)工作。除 IE 之外,所有瀏覽器都可以使用 AppCache(截止至此時(shí))。

          應(yīng)用緩存的優(yōu)點(diǎn)是:

          • 網(wǎng)頁(yè)瀏覽可以脫機(jī)

          • 頁(yè)面加載速度更快

          • 服務(wù)器負(fù)載更小

          cache manifest 是一個(gè)簡(jiǎn)單的文本文件,其中列出了瀏覽器應(yīng)緩存的資源以進(jìn)行脫機(jī)訪問。 manifest 屬性可以包含在文檔的 HTML 標(biāo)簽中,如下所示:

          <html manifest="test.appcache">

          ...

          </html>

          它應(yīng)該在你要緩存的所有頁(yè)面上。

          緩存的應(yīng)用程序頁(yè)面將一直保留,除非:

          1. 用戶清除它們

          2. manifest 被修改

          3. 緩存更新

          視頻

          在 HTML5 發(fā)布之前,沒有統(tǒng)一的標(biāo)準(zhǔn)來(lái)顯示網(wǎng)頁(yè)上的視頻。大多數(shù)視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規(guī)定了使用 video 元素在網(wǎng)頁(yè)上顯示視頻的標(biāo)準(zhǔn)方式。

          目前,video 元素支持三種視頻格式,如表 2 所示。

          下面的例子展示了 video 元素的使用:

          <! DOCTYPE HTML>

          <html>

          <body>

          <video src=" vdeo.ogg" width="320" height="240" controls="controls">

          This browser does not support the video element.

          </video>

          </body>

          </html>

          例子使用了 Ogg 文件,并且可以在 Firefox、Opera 和 Chrome 中使用。要使視頻在 Safari 和未來(lái)版本的 Chrome 中工作,我們必須添加一個(gè) MPEG4 和 WebM 文件。

          video 元素允許多個(gè) source 元素。source 元素可以鏈接到不同的視頻文件。瀏覽器將使用第一個(gè)識(shí)別的格式,如下所示:

          <video width="320" height="240" controls="controls">

          <source src="vdeo.ogg" type="video/ogg" />

          <source src=" vdeo.mp4" type="video/mp4" />

          <source src=" vdeo.webm" type="video/webm" />

          This browser does not support the video element.

          </video>

          圖6:Canvas 的輸出

          音頻

          對(duì)于音頻,情況類似于視頻。在 HTML5 發(fā)布之前,在網(wǎng)頁(yè)上播放音頻沒有統(tǒng)一的標(biāo)準(zhǔn)。大多數(shù)音頻也通過 Flash 等不同的插件播放。但 HTML5 規(guī)定了通過使用音頻元素在網(wǎng)頁(yè)上播放音頻的標(biāo)準(zhǔn)方式。音頻元素用于播放聲音文件和音頻流。

          目前,HTML5 audio 元素支持三種音頻格式,如表 3 所示。

          audio 元素的使用如下所示:

          <! DOCTYPE HTML>

          <html>

          <body>

          <audio src=" song.ogg" controls="controls">

          This browser does not support the audio element.

          </video>

          </body>

          </html>

          此例使用 Ogg 文件,并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未來(lái)版本中使 audio 工作,我們必須添加一個(gè) MP3 和 Wav 文件。

          audio 元素允許多個(gè) source 元素,它可以鏈接到不同的音頻文件。瀏覽器將使用第一個(gè)識(shí)別的格式,如下所示:

          <audio controls="controls">

          <source src="song.ogg" type="audio/ogg" />

          <source src="song.mp3" type="audio/mpeg" />

          This browser does not support the audio element.

          </audio>

          畫布(Canvas)

          要在網(wǎng)頁(yè)上創(chuàng)建圖形,HTML5 使用 畫布 API。我們可以用它繪制任何東西,并且它使用 JavaScript。它通過避免從網(wǎng)絡(luò)下載圖像而提高網(wǎng)站性能。使用畫布,我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外,畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁(yè)面,如下所示:

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

          畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來(lái)實(shí)現(xiàn)繪制。所有繪畫應(yīng)在 JavaScript 中。

          <script type="text/javascript">

          var c=document.getElementById("myCanvas");

          var cxt=c.getContext("2d");

          cxt.fillStyle="blue";

          cxt.storkeStyle="red";

          cxt.fillRect(10,10,100,100);

          cxt.storkeRect(10,10,100,100);

          </script>

          以上腳本的輸出如圖 6 所示。

          你可以繪制許多對(duì)象,如弧、圓、線/垂直梯度等。

          HTML5 工具

          為了有效操作,所有熟練的或業(yè)余的 Web 開發(fā)人員/設(shè)計(jì)人員都應(yīng)該使用 HTML5 工具,當(dāng)需要設(shè)置工作流/網(wǎng)站或執(zhí)行重復(fù)任務(wù)時(shí),這些工具非常有幫助。它們提高了網(wǎng)頁(yè)設(shè)計(jì)的可用性。

          以下是一些幫助創(chuàng)建很棒的網(wǎng)站的必要工具。

          • HTML5 Maker: 用來(lái)在 HTML、JavaScript 和 CSS 的幫助下與網(wǎng)站內(nèi)容交互。非常容易使用。它還允許我們開發(fā)幻燈片、滑塊、HTML5 動(dòng)畫等。

          • Liveweave: 用來(lái)測(cè)試代碼。它減少了保存代碼并將其加載到屏幕上所花費(fèi)的時(shí)間。在編輯器中粘貼代碼即可得到結(jié)果。它非常易于使用,并為一些代碼提供自動(dòng)完成功能,這使得開發(fā)和測(cè)試更快更容易。

          • Font dragr: 在瀏覽器中預(yù)覽定制的 Web 字體。它會(huì)直接載入該字體,以便你可以知道看起來(lái)是否正確。也提供了拖放界面,允許你拖動(dòng)字形、Web 開放字體和矢量圖形來(lái)馬上測(cè)試。

          • HTML5 Please: 可以讓我們找到與 HTML5 相關(guān)的任何內(nèi)容。如果你想知道如何使用任何一個(gè)功能,你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設(shè)備的有用資源的列表,語(yǔ)法,以及如何使用元素的一般建議等。

          • Modernizr: 這是一個(gè)開源工具,用于給訪問者瀏覽器提供最佳體驗(yàn)。使用此工具,你可以檢測(cè)訪問者的瀏覽器是否支持 HTML5 功能,并加載相應(yīng)的腳本。

          • Adobe Edge Animate: 這是必須處理交互式 HTML 動(dòng)畫的 HTML5 開發(fā)人員的有用工具。它用于數(shù)字出版、網(wǎng)絡(luò)和廣告領(lǐng)域。此工具允許用戶創(chuàng)建無(wú)瑕疵的動(dòng)畫,可以跨多個(gè)設(shè)備運(yùn)行。

          • Video.js: 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網(wǎng)站,你應(yīng)該使用此工具。它使視頻看起來(lái)不錯(cuò),并且是網(wǎng)站的一部分。

          • The W3 Validator: W3 驗(yàn)證工具測(cè)試 HTML、XHTML、SMIL、MathML 等中的網(wǎng)站標(biāo)記的有效性。要測(cè)試任何網(wǎng)站的標(biāo)記有效性,你必須選擇文檔類型為 HTML5 并輸入你網(wǎng)頁(yè)的 URL。這樣做之后,你的代碼將被檢查,并將提供所有錯(cuò)誤和警告。

          • HTML5 Reset: 此工具允許開發(fā)人員在 HTML5 中重寫舊網(wǎng)站的代碼。你可以使用這些工具為你網(wǎng)站的訪問者提供一個(gè)良好的網(wǎng)絡(luò)體驗(yàn)。


          Palak Shah

          作者是高級(jí)軟件工程師。她喜歡探索新技術(shù),學(xué)習(xí)創(chuàng)新概念。她也喜歡哲學(xué)。你可以通過 palak311@gmail.com[1] 聯(lián)系她。


          via: http://opensourceforu.com/2017/06/introduction-to-html5/

          作者:Palak Shah[2] 譯者:geekpi 校對(duì):wxy

          本文由 LCTT 原創(chuàng)編譯,Linux中國(guó) 榮譽(yù)推出

          點(diǎn)擊“了解更多”可訪問文內(nèi)鏈接


          mail 類型用于郵件地址的輸入,很明顯,它只適用于郵箱輸入。

          使用格式如下:

          <input type="email" />

          如果你輸入的郵箱格式不正確,會(huì)提醒你格式錯(cuò)誤。

          url 類型是專門用來(lái)輸入網(wǎng)址的。

          使用格式如下:

          <input type="url" />

          也同樣會(huì)校驗(yàn)網(wǎng)址格式是否合法。

          number 類型用于數(shù)字的輸入,number 類型表單有以下屬性:

          屬性

          描述

          max

          輸入框允許的最大值。

          min

          輸入框允許的最小值。

          step

          合法的數(shù)字間隔,例如 step=2,則合法為:2、4、6、8。

          value

          默認(rèn)值。

          例如:設(shè)置默認(rèn)值為 5,步長(zhǎng)為 2,每點(diǎn) ?? 一次,數(shù)字 + 2。

          <input type="number" value="5" step="2" />

          range 類型用于包含一定范圍內(nèi)數(shù)值的輸入。與number不同的是,range顯示為進(jìn)度條。

          其使用格式為:

          <input type="range" />

          六種常用的日期選擇類型:

          • date
          • month
          • week
          • time
          • datetime
          • datetime-local

          統(tǒng)稱為 Date pickers:

          類型

          描述

          date

          選取年、月、日

          month

          選取年、月

          week

          選取年、周

          time

          選取時(shí)間小時(shí)、分鐘

          datetime

          選取年、月、日和 UTC 時(shí)間

          datetime-local

          選取年、月、日和本地時(shí)間

          例如,

          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <title>Document</title>
            </head>
            <body>
              <form>
                date: <input type="date" /> <br />
                datetime-local:<input type="datetime-local" /> <br />
                <input type="submit" value="提交" />
              </form>
            </body>
          </html>
          

          顯示效果如下:

          search 類型的 input 標(biāo)簽提供用于輸入搜索關(guān)鍵字的文本框,從外觀看 searchtext 是一樣的,功能也是相近的可以輸入任意的字符串。

          使用格式如下:

          <input type="search" />

          不能從外觀和功能上能發(fā)現(xiàn) search 類型和 text 類型的區(qū)別。那么我們?yōu)楹芜€要學(xué) search 類型呢?

          如果使用不同的瀏覽器去看,就會(huì)發(fā)現(xiàn)有細(xì)微的差異,比如 Chrome 瀏覽器給 search 類型的輸入框提供了清空按鈕。如果在移動(dòng)端的話,虛擬鍵盤會(huì)根據(jù)不同類型的輸入框給出不同的反應(yīng)。還有就是起到語(yǔ)義化的作用,我們一眼能夠明白這里的 input 是起到搜索的效果。

          tel 類型是 input 標(biāo)簽專門用來(lái)輸入電話號(hào)碼的文本框,它并不僅局限輸入數(shù)字,還可以輸入一些其他的字符,例如:- +()等。

          語(yǔ)法格式如下:

          <input type="tel" />

          datalist 標(biāo)簽,為輸入框提供一個(gè)可選擇的數(shù)據(jù)列表。在具有自動(dòng)提示功能的文本框中可以使用這些選擇項(xiàng)來(lái)自動(dòng)補(bǔ)全文本框。該標(biāo)簽由 datalistoption 標(biāo)簽組合應(yīng)用。

          一個(gè) datalist 標(biāo)簽中可以包含多個(gè) option 標(biāo)簽。他們的關(guān)系和表單元素 selectoption 的關(guān)系一樣。

          例子,

          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <title>Document</title>
            </head>
            <body>
              你最愛的水果:
              <input list="fruits" id="fruit" name="fruit" />
          
              <datalist id="fruits">
                <option value="蘋果"></option>
                <option value="李子"></option>
                <option value="蘋果"></option>
                <option value="西瓜"></option>
                <option value="櫻桃"></option>
              </datalist>
            </body>
          </html>

          顯示為,下拉菜單為提示框

          HTML5 新增的 output 元素用于在瀏覽器中顯示計(jì)算結(jié)果或者腳本輸出,輸出的結(jié)果在標(biāo)簽之間顯示。

          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <title>Document</title>
            </head>
            <body>
              <form oninput="r.value=parseInt(num1.value)+parseInt(num2.value)">
                <!--定義了兩個(gè) number 類型的輸入框,其默認(rèn)值為 100-->
                <input type="number" id="num1" value="100" />
                +
                <input type="number" id="num2" value="100" />=<!--for 屬性可以綁定對(duì)應(yīng) id 名的表單元素-->
                <output name="r" for="num1 num2"></output>
              </form>
            </body>
          </html>

          在上面代碼中,有 oninput="r.value=parseInt(num1.value)+parseInt(num2.value)",我們使用 oninput 來(lái)及時(shí)獲取輸入框中改變后的值。在等號(hào)右側(cè),使用 parseInt 是把輸入框中的值按照整型來(lái)解析。

          關(guān)于 form 標(biāo)簽中的 oninput 屬性是當(dāng)元素獲得輸入時(shí)被觸發(fā),其中 parseInt 是 JavaScript 中解析整數(shù)的函數(shù),這里只要知道它所起的作用就好,不需要去深究。

          顯示為,202就是output顯示的


          主站蜘蛛池模板: 精品无人乱码一区二区三区 | 成人区精品一区二区不卡亚洲| 亚洲视频在线一区二区三区| 美女视频一区二区| 日韩国产免费一区二区三区| 日本免费一区二区久久人人澡| 国产一区中文字幕| 国产视频福利一区| 日韩精品一区在线| 成人毛片无码一区二区| 激情内射亚洲一区二区三区| 午夜福利av无码一区二区| 三上悠亚一区二区观看| 国产精品主播一区二区| 婷婷国产成人精品一区二| 国产精品久久久久一区二区 | 国产精品成人免费一区二区| 亚洲综合一区二区精品久久| 人妻AV一区二区三区精品| 一区二区三区国产精品| 久久精品一区二区三区四区 | 国产AV午夜精品一区二区入口 | 国产熟女一区二区三区四区五区| 动漫精品第一区二区三区| 日本丰满少妇一区二区三区| 国产精品一区二区资源| 精品一区二区三区四区电影| 日本在线视频一区| 国产伦精品一区二区免费 | 人妻少妇精品一区二区三区| 免费无码一区二区三区蜜桃| 国产日韩一区二区三免费高清| 日韩欧国产精品一区综合无码| 无码人妻一区二区三区在线视频 | 亚洲国产高清在线一区二区三区| 久久AAAA片一区二区| 国产亚洲福利精品一区| 91在线一区二区| 无码一区二区三区中文字幕| 搜日本一区二区三区免费高清视频 | 午夜AV内射一区二区三区红桃视|