H5新增標(biāo)簽和屬性

HTML5

什么是HTML5

• HTML5 是最新的 HTML 標(biāo)準(zhǔn)。
• HTML5 是專門為承載豐富的 web 內(nèi)容而設(shè)計(jì)的，并且無需額外插件。
• HTML5 擁有新的語義、圖形以及多媒體元素。
• HTML5 提供的新元素和新的 API 簡(jiǎn)化了 web 應(yīng)用程序的搭建。
• HTML5 是跨平臺(tái)的，被設(shè)計(jì)為在不同類型的硬件（PC、平板、手機(jī)、電視機(jī)等等）之上運(yùn)行。

為html5而定的規(guī)則

• 新特性應(yīng)該基于 HTML、CSS、DOM 以及 JavaScript。
• 減少對(duì)外部插件的需求（比如 Flash）
• 更優(yōu)秀的錯(cuò)誤處理
• 更多取代腳本的標(biāo)記
• HTML5 應(yīng)該獨(dú)立于設(shè)備
• 開發(fā)進(jìn)程應(yīng)對(duì)公眾透明

html5的優(yōu)缺點(diǎn)

• 優(yōu)點(diǎn)

  • 網(wǎng)絡(luò)標(biāo)準(zhǔn)統(tǒng)一、HTML5本身是由W3C推薦出來的
  • 多設(shè)備、跨平臺(tái)
  • 即時(shí)更新
  • 提高可用性和改進(jìn)用戶的友好體驗(yàn)；
  • 由W3C推薦，有統(tǒng)一的網(wǎng)絡(luò)標(biāo)準(zhǔn)跨平臺(tái)、多設(shè)備支持SEO友好、利用搜索引擎抓取和搜錄便于游戲開發(fā)更好的互動(dòng)性音視頻的直接支持標(biāo)簽代碼更加簡(jiǎn)單簡(jiǎn)潔、更加清晰的代碼方便的存儲(chǔ)及時(shí)更新的特性
  • 有幾個(gè)新的標(biāo)簽，這將有助于開發(fā)人員定義重要的內(nèi)容；
  • 可以給站點(diǎn)帶來更多的多媒體元素(視頻和音頻)；
  • 可以很好的替代Flash和Silverlight；
  • 涉及到網(wǎng)站的抓取和索引的時(shí)候，對(duì)于SEO很友好；
  • 被大量應(yīng)用于移動(dòng)應(yīng)用程序和游戲。

• 缺點(diǎn)

  • 安全：像之前Firefox4的web socket和透明代理的實(shí)現(xiàn)存在嚴(yán)重的安全問題，同時(shí)web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。
  • 完善性：許多特性各瀏覽器的支持程度也不一樣。
  • 技術(shù)門檻：HTML5簡(jiǎn)化開發(fā)者工作的同時(shí)代表了有許多新的屬性和API需要開發(fā)者學(xué)習(xí)，像web worker、web socket、web storage 等新特性，后臺(tái)甚至瀏覽器原理的知識(shí)，機(jī)遇的同時(shí)也是巨大的挑戰(zhàn)
  • 性能：某些平臺(tái)上的引擎問題導(dǎo)致HTML5性能低下。
  • 瀏覽器兼容性：最大缺點(diǎn)，IE9以下瀏覽器幾乎全軍覆沒。

表單元素

最重要的表單元素是 <input> 元素。

• <input> 元素根據(jù)不同的 type 屬性，可以變化為多種形態(tài)。

<select> 元素定義下拉列表

<option> 元素定義待選擇的選項(xiàng)。

• 列表通常會(huì)把首個(gè)選項(xiàng)顯示為被選選項(xiàng)。

• 您能夠通過添加 selected 屬性來定義預(yù)定義選項(xiàng)。

  • <option value="fiat" selected>Fiat</option>

<textarea> 元素定義多行輸入字段（文本域）

<button> 元素定義可點(diǎn)擊的按鈕

• <button type="button" onclick="alert('Hello World!')">Click Me!</button>

<datalist> 元素

• <datalist> 元素為 <input> 元素規(guī)定預(yù)定義選項(xiàng)列表。
• 用戶會(huì)在他們輸入數(shù)據(jù)時(shí)看到預(yù)定義選項(xiàng)的下拉列表。
• <input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。

<input> 元素的輸入類型。

<input type="text"> 定義供文本輸入的單行輸入字段：

<input type="password"> 定義密碼字段：

• password 字段中的字符會(huì)被做掩碼處理（顯示為星號(hào)或?qū)嵭膱A）

<input type="submit"> 定義提交表單數(shù)據(jù)至表單處理程序的按鈕

• 表單處理程序（form-handler）通常是包含處理輸入數(shù)據(jù)的腳本的服務(wù)器頁面。
• 在表單的 action 屬性中規(guī)定表單處理程序（form-handler）
• 如果您省略了提交按鈕的 value 屬性，那么該按鈕將獲得默認(rèn)文本

<input type="radio"> 定義單選按鈕

<input type="checkbox"> 定義復(fù)選框

• 復(fù)選框允許用戶在有限數(shù)量的選項(xiàng)中選擇零個(gè)或多個(gè)選項(xiàng)。

<input type="button> 定義按鈕。

• <input type="button" onclick="alert('Hello World!')" value="Click Me!">

<input type="date"> 用于應(yīng)該包含日期的輸入字段。

• 根據(jù)瀏覽器支持，日期選擇器會(huì)出現(xiàn)輸入字段中。

<input type="range"> 用于應(yīng)該包含一定范圍內(nèi)的值的輸入字段。

• 根據(jù)瀏覽器支持，輸入字段能夠顯示為滑塊控件。
• 需要max和value屬性值

<input type="color"> 用于應(yīng)該包含顏色的輸入字段。

• 根據(jù)瀏覽器支持，顏色選擇器會(huì)出現(xiàn)輸入字段中。

<input type="week"> 允許用戶選擇周和年。

• 根據(jù)瀏覽器支持，日期選擇器會(huì)出現(xiàn)輸入字段中。

<input type="month"> 允許用戶選擇月份和年份。

• 根據(jù)瀏覽器支持，日期選擇器會(huì)出現(xiàn)輸入字段中。

<input type="time"> 允許用戶選擇時(shí)間（無時(shí)區(qū)）。

• 根據(jù)瀏覽器支持，時(shí)間選擇器會(huì)出現(xiàn)輸入字段中。

<input type="datetime"> 允許用戶選擇日期和時(shí)間（有時(shí)區(qū)）。

• 根據(jù)瀏覽器支持，日期選擇器會(huì)出現(xiàn)輸入字段中。

<input type="datetime-local"> 允許用戶選擇日期和時(shí)間（無時(shí)區(qū)）。

• 根據(jù)瀏覽器支持，日期選擇器會(huì)出現(xiàn)輸入字段中。

<input type="email"> 用于應(yīng)該包含電子郵件地址的輸入字段。

• 根據(jù)瀏覽器支持，能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證。
• 某些智能手機(jī)會(huì)識(shí)別 email 類型，并在鍵盤增加 ".com" 以匹配電子郵件輸入。
• 必須要有@符號(hào),@符號(hào)前后必須有字符

<input type="search"> 用于搜索字段（搜索字段的表現(xiàn)類似常規(guī)文本字段）。

• 跟text類似，自帶清空按鈕

<input type="tel"> 用于應(yīng)該包含電話號(hào)碼的輸入字段。

• 沒有驗(yàn)證，各國(guó)手機(jī)號(hào)格式不一致，但是自動(dòng)打開數(shù)字鍵盤

<input type="url"> 用于應(yīng)該包含 URL 地址的輸入字段。

• 根據(jù)瀏覽器支持，在提交時(shí)能夠自動(dòng)驗(yàn)證 url 字段。
• 某些智能手機(jī)識(shí)別 url 類型，并向鍵盤添加 ".com" 以匹配 url 輸入。
• 驗(yàn)證網(wǎng)址http:// https:// ftp:// ，而且除此之外后面還需要字符

<input type="number"> 用于應(yīng)該包含數(shù)字值的輸入字段。

• 能夠?qū)?shù)字做出限制。
• 根據(jù)瀏覽器支持，限制可應(yīng)用到輸入字段。
• 在手機(jī)里面獲取焦點(diǎn)，會(huì)自動(dòng)打開數(shù)字鍵盤

輸入限制（屬性）

• disabled 規(guī)定輸入字段應(yīng)該被禁用。

  • 被禁用的元素是不可用和不可點(diǎn)擊的。
  • 被禁用的元素不會(huì)被提交。
  • disabled 屬性不需要值。它等同于 disabled="disabled"。

• max 規(guī)定輸入字段的最大值。

• maxlength 規(guī)定輸入字段的最大字符數(shù)。

  • 如設(shè)置 maxlength 屬性，則輸入控件不會(huì)接受超過所允許數(shù)的字符。
  • 該屬性不會(huì)提供任何反饋。如果需要提醒用戶，則必須編寫 JavaScript 代碼。
  • 注釋：輸入限制并非萬無一失。JavaScript 提供了很多方法來增加非法輸入。如需安全地限制輸入，則接受者（服務(wù)器）必須同時(shí)對(duì)限制進(jìn)行檢查。

• min 規(guī)定輸入字段的最小值。

• pattern 規(guī)定通過其檢查輸入值的正則表達(dá)式。

• readonly 規(guī)定輸入字段為只讀（無法修改）。

  • readonly 屬性不需要值。它等同于 readonly="readonly"。

• required 規(guī)定輸入字段是必需的（必需填寫）。

• size 規(guī)定輸入字段的寬度（以字符計(jì)）。

• step 規(guī)定輸入字段的合法數(shù)字間隔。

• value 規(guī)定輸入字段的默認(rèn)值。

HTML5 為 <input> 增加了如下屬性

autocomplete 屬性規(guī)定表單或輸入字段是否應(yīng)該自動(dòng)完成。

• 當(dāng)自動(dòng)完成開啟，瀏覽器會(huì)基于用戶之前的輸入值自動(dòng)填寫值。
• 與name屬性相關(guān),取值是on或off,默認(rèn)值是on
• 提示：您可以把表單的 autocomplete 設(shè)置為 on，同時(shí)把特定的輸入字段設(shè)置為 off，反之亦然。
• autocomplete 屬性適用于 <form> 以及如下 <input> 類型：text、search、url、tel、email、password、datepickers、range 以及 color。

novalidate 屬性屬于 <form> 屬性。

• 如果設(shè)置，則 novalidate 規(guī)定在提交表單時(shí)不對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證。

autofocus 屬性是布爾屬性。

• 如果設(shè)置，則規(guī)定當(dāng)頁面加載時(shí) <input> 元素應(yīng)該自動(dòng)獲得焦點(diǎn)。
• 當(dāng)文檔加載完畢時(shí)，該表單元素自動(dòng)獲取焦點(diǎn)

form 屬性規(guī)定 <input> 元素所屬的一個(gè)或多個(gè)表單。

• 提示：如需引用一個(gè)以上的表單，請(qǐng)使用空格分隔的表單 id 列表。

formenctype 屬性規(guī)定當(dāng)把表單數(shù)據(jù)（form-data）提交至服務(wù)器時(shí)如何對(duì)其進(jìn)行編碼（僅針對(duì) method="post" 的表單）。

• formenctype 屬性覆蓋 <form> 元素的 enctype 屬性。
• formenctype 屬性適用于 type="submit" 以及 type="image"。

formaction 屬性規(guī)定當(dāng)提交表單時(shí)處理該輸入控件的文件的 URL。

• formaction 屬性覆蓋 <form> 元素的 action 屬性。
• formaction 屬性適用于 type="submit" 以及 type="image"。

formmethod 屬性定義用以向 action URL 發(fā)送表單數(shù)據(jù)（form-data）的 HTTP 方法。

• formmethod 屬性覆蓋 <form> 元素的 method 屬性。
• formmethod 屬性適用于 type="submit" 以及 type="image"。

formnovalidate 屬性

• novalidate 屬性是布爾屬性。
• 如果設(shè)置，則規(guī)定在提交表單時(shí)不對(duì) <input> 元素進(jìn)行驗(yàn)證。
• formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。
• formnovalidate 屬性可用于 type="submit"。

formtarget 屬性規(guī)定的名稱或關(guān)鍵詞指示提交表單后在何處顯示接收到的響應(yīng)。

• formtarget 屬性會(huì)覆蓋 <form> 元素的 target 屬性。
• formtarget 屬性可與 type="submit" 和 type="image" 使用。

height 和 width 屬性

• height 和 width 屬性規(guī)定 <input> 元素的高度和寬度。
• height 和 width 屬性僅用于 <input type="image">。
• 注釋：請(qǐng)始終規(guī)定圖像的尺寸。如果瀏覽器不清楚圖像尺寸，則頁面會(huì)在圖像加載時(shí)閃爍。

min 和 max 屬性規(guī)定 <input> 元素的最小值和最大值。

• min 和 max 屬性適用于如需輸入類型：number、range、date、datetime、datetime-local、month、time 以及 week。

multiple 屬性是布爾屬性。

• 如果設(shè)置，則規(guī)定允許用戶在 <input> 元素中輸入一個(gè)以上的值。
• multiple 屬性適用于以下輸入類型：email 和 file。

pattern 屬性規(guī)定用于檢查 <input> 元素值的正則表達(dá)式。

• pattern 屬性適用于以下輸入類型：text、search、url、tel、email、and password。
• 提示：請(qǐng)使用全局的 title 屬性對(duì)模式進(jìn)行描述以幫助用戶。
• 提示：請(qǐng)?jiān)谖覀兊?JavaScript 教程中學(xué)習(xí)更多有關(guān)正則表達(dá)式的知識(shí)。

placeholder 屬性規(guī)定用以描述輸入字段預(yù)期值的提示（樣本值或有關(guān)格式的簡(jiǎn)短描述）。

• placeholder 屬性規(guī)定用以描述輸入字段預(yù)期值的提示（樣本值或有關(guān)格式的簡(jiǎn)短描述）。
• 該提示會(huì)在用戶輸入值之前顯示在輸入字段中。
• placeholder 屬性適用于以下輸入類型：text、search、url、tel、email 以及 password。

required 屬性是布爾屬性。

• 如果設(shè)置，則規(guī)定在提交表單之前必須填寫輸入字段。
• required 屬性適用于以下輸入類型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

list 屬性引用的 <datalist> 元素中包含了 <input> 元素的預(yù)定義選項(xiàng)。

step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔。

• 示例：如果 step="3"，則合法數(shù)字應(yīng)該是 -3、0、3、6、等等。
• 提示：step 屬性可與 max 以及 min 屬性一同使用，來創(chuàng)建合法值的范圍。
• step 屬性適用于以下輸入類型：number、range、date、datetime、datetime-local、month、time 以及 week。

【H5】新增表單事件

onInout 獲取input內(nèi)的value發(fā)生變化時(shí)觸發(fā)

oninvalid 提交異常時(shí)報(bào)錯(cuò)

通過setCustomValidity來設(shè)置默認(rèn)的提示

input 輸入就會(huì)執(zhí)行-要用的話要防抖或節(jié)流

與change事件的區(qū)別：change()提交或者失焦的時(shí)候，值變化才會(huì)執(zhí)行
與keyup事件的區(qū)別: keyup()需要按鍵抬起才會(huì)執(zhí)行,input和change事件必須綁定在表單元素上，而keyup可以綁定給document

H5新增多媒體標(biāo)簽

音頻：- - - < audio >

• 可以在不使用標(biāo)簽的情況下，能能夠原生的支持音頻格式文件的播放，但是，播放格式是有限的 。

• audio目前支持三種格式

  • ogg
  • mp3
  • wav

• audio的參數(shù)

  • autoplay

    • autoplay

      • 音頻在就緒后馬上播放

  • controls

    • contrlos

      • 向用戶展示該控件

  • loop

    • loop

      • 循環(huán)播放

  • src

    • url

      • 要播放的url

視頻：- - - < video >

• video目前支持三種格式

  • ogg
  • MP4
  • wwbm

• video的參數(shù)

  • autoplay

    • autoplay

      • 視頻在就緒后馬上播放(谷歌需要靜音[muted]播放)

  • controls

    • controls

      • 向用戶展示該控件

  • width

    • px

      • 設(shè)置播放器寬度

  • height

    • px

      • 設(shè)置播放器高度

  • preload

    • auto/none

      • 是否預(yù)加載，如果有autoplay屬性則忽略

  • loop

    • loop

      • 循環(huán)播放

  • src

    • url

      • 要播放視頻的url

  • poster

    • imgurl

      • 加載等待的畫面圖片

  • muted

    • muted

      • 視頻靜音

總結(jié)

• 音頻標(biāo)簽與視頻標(biāo)簽使用基本一致
• 多媒體標(biāo)簽在不同瀏覽器下情況不同，存在兼容性問題
• 谷歌瀏覽器把音頻和視頻標(biāo)簽的自動(dòng)播放都禁止了
• 谷歌瀏覽器中視頻添加 muted 標(biāo)簽可以自己播放

Canvas

語義元素

常用

• <section> 元素定義文檔中的節(jié)。

  • “節(jié)（section）是有主題的內(nèi)容組，通常具有標(biāo)題”。
  • 可以將網(wǎng)站首頁劃分為簡(jiǎn)介、內(nèi)容、聯(lián)系信息等節(jié)

• <article> 定義文檔內(nèi)的文章。

  • <article> 元素規(guī)定獨(dú)立的自包含內(nèi)容。

  • 文檔有其自身的意義，并且可以獨(dú)立于網(wǎng)站其他內(nèi)容進(jìn)行閱讀。

  • <article> 元素的應(yīng)用場(chǎng)景：

    • 論壇
    • 博客
    • 新聞

• 嵌套語義元素

  • <article> 元素定義完整的相關(guān)元素自包含塊。
  • <section> 元素被定義為相關(guān)元素塊。

• <header> 元素為文檔或節(jié)規(guī)定頁眉。

  • <header> 元素應(yīng)該被用作介紹性內(nèi)容的容器。
  • 一個(gè)文檔中可以有多個(gè) <header> 元素。

• <footer> 元素為文檔或節(jié)規(guī)定頁腳

  • <footer> 元素應(yīng)該提供有關(guān)其包含元素的信息。
  • 頁腳通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等。
  • 您可以在一個(gè)文檔中使用多個(gè) <footer> 元素。

• <nav> 元素定義導(dǎo)航鏈接集合。

  • <nav> 元素旨在定義大型的導(dǎo)航鏈接塊。不過，并非文檔中所有鏈接都應(yīng)該位于 <nav> 元素中！

• <aside> 元素頁面主內(nèi)容之外的某些內(nèi)容（比如側(cè)欄）

  • aside 內(nèi)容應(yīng)該與周圍內(nèi)容相關(guān)

• <figure> 和 <figcaption> 元素

  • 在書籍和報(bào)紙中，與圖片搭配的標(biāo)題很常見。
  • 標(biāo)題（caption）的作用是為圖片添加可見的解釋。
  • 通過 HTML5，圖片和標(biāo)題能夠被組合在 <figure> 元素中

了解

• <bdi> 定義與其他文本不同的文本方向。
• <details> 定義用戶可查看或隱藏的額外細(xì)節(jié)。
• <dialog> 定義對(duì)話框或窗口。
• <main> 定義文檔的主內(nèi)容。
• <mark> 定義重要或強(qiáng)調(diào)的內(nèi)容。
• <menuitem> 定義用戶能夠從彈出菜單調(diào)用的命令/菜單項(xiàng)目。
• <meter> 定義已知范圍（尺度）內(nèi)的標(biāo)量測(cè)量。
• <progress> 定義任務(wù)進(jìn)度。
• <rp> 定義在不支持 ruby 注釋的瀏覽器中顯示什么。
• <rt> 定義關(guān)于字符的解釋/發(fā)音（用于東亞字體）。
• <ruby> 定義 ruby 注釋（用于東亞字體）。
• <summary> 定義 <details> 元素的可見標(biāo)題。
• <time> 定義日期/時(shí)間。
• <wbr> 定義可能的折行（line-break）。

<form> 元素定義 HTML 表單

<input> 元素是最重要的表單元素。

action 屬性定義在提交表單時(shí)執(zhí)行的動(dòng)作。

• 向服務(wù)器提交表單的通常做法是使用提交按鈕。
• 通常，表單會(huì)被提交到 web 服務(wù)器上的網(wǎng)頁。
• 如果省略 action 屬性，則 action 會(huì)被設(shè)置為當(dāng)前頁面。

method 屬性規(guī)定在提交表單時(shí)所用的 HTTP 方法（GET 或 POST）

Name 屬性

• 如果要正確地被提交，每個(gè)輸入字段必須設(shè)置一個(gè) name 屬性。

用 <fieldset> 組合表單數(shù)據(jù)

• <fieldset> 元素組合表單中的相關(guān)數(shù)據(jù)
• <legend> 元素為 <fieldset> 元素定義標(biāo)題。

<form> 屬性的列表

• accept-charset 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁面字符集）。

• action 規(guī)定向何處提交表單的地址（URL）（提交頁面）。

• autocomplete 規(guī)定瀏覽器應(yīng)該自動(dòng)完成表單（默認(rèn)：開啟）。

• enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）。

• method 規(guī)定在提交表單時(shí)所用的 HTTP 方法（默認(rèn)：GET）。

• name 規(guī)定識(shí)別表單的名稱（對(duì)于 DOM 使用：document.forms.name）。

• novalidate 規(guī)定瀏覽器不驗(yàn)證表單。

• target 規(guī)定 action 屬性中地址的目標(biāo)（默認(rèn)：_self）。

• <form> 增加如需屬性：

  • autocomplete
  • novalidate

Target 屬性

• target 屬性可設(shè)置以下值之一

  • _blank 響應(yīng)顯示在新窗口或選項(xiàng)卡中。
  • _self 響應(yīng)顯示在當(dāng)前窗口中。
  • _parent 響應(yīng)顯示在父框架中。
  • _top 響應(yīng)顯示在窗口的整個(gè) body 中。
  • framename 響應(yīng)顯示在命名的 iframe 中。
  • 默認(rèn)值為 _self，這意味著響應(yīng)將在當(dāng)前窗口中打開。

autocomplete 屬性規(guī)定表單是否應(yīng)打開自動(dòng)完成功能。

• 啟用自動(dòng)完成功能后，瀏覽器會(huì)根據(jù)用戶之前輸入的值自動(dòng)填寫值。

novalidate 屬性是一個(gè)布爾屬性。

• 如果已設(shè)置，它規(guī)定提交時(shí)不應(yīng)驗(yàn)證表單數(shù)據(jù)。