H5新增標簽和屬性

HTML5

什么是HTML5

HTML5 是最新的 HTML 標準智听。
HTML5 是專門為承載豐富的 web 內(nèi)容而設(shè)計的赠潦，并且無需額外插件。
HTML5 擁有新的語義、圖形以及多媒體元素忍抽。
HTML5 提供的新元素和新的 API 簡化了 web 應(yīng)用程序的搭建因俐。
HTML5 是跨平臺的吱涉，被設(shè)計為在不同類型的硬件（PC幅聘、平板、手機余寥、電視機等等）之上運行领铐。

為html5而定的規(guī)則

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

html5的優(yōu)缺點

優(yōu)點
- 網(wǎng)絡(luò)標準統(tǒng)一、HTML5本身是由W3C推薦出來的
- 多設(shè)備祝蝠、跨平臺
- 即時更新
- 提高可用性和改進用戶的友好體驗音诈；
- 由W3C推薦，有統(tǒng)一的網(wǎng)絡(luò)標準跨平臺绎狭、多設(shè)備支持SEO友好细溅、利用搜索引擎抓取和搜錄便于游戲開發(fā)更好的互動性音視頻的直接支持標簽代碼更加簡單簡潔、更加清晰的代碼方便的存儲及時更新的特性
- 有幾個新的標簽儡嘶，這將有助于開發(fā)人員定義重要的內(nèi)容喇聊；
- 可以給站點帶來更多的多媒體元素(視頻和音頻)；
- 可以很好的替代Flash和Silverlight蹦狂；
- 涉及到網(wǎng)站的抓取和索引的時候誓篱，對于SEO很友好朋贬；
- 被大量應(yīng)用于移動應(yīng)用程序和游戲。
缺點
- 安全：像之前Firefox4的web socket和透明代理的實現(xiàn)存在嚴重的安全問題窜骄，同時web storage锦募、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料邻遏。
- 完善性：許多特性各瀏覽器的支持程度也不一樣糠亩。
- 技術(shù)門檻：HTML5簡化開發(fā)者工作的同時代表了有許多新的屬性和API需要開發(fā)者學(xué)習(xí)，像web worker准验、web socket削解、web storage 等新特性，后臺甚至瀏覽器原理的知識沟娱，機遇的同時也是巨大的挑戰(zhàn)
- 性能：某些平臺上的引擎問題導(dǎo)致HTML5性能低下。
- 瀏覽器兼容性：最大缺點腕柜，IE9以下瀏覽器幾乎全軍覆沒济似。

表單元素

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

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

<select> 元素定義下拉列表

<option> 元素定義待選擇的選項。

列表通常會把首個選項顯示為被選選項唉铜。
您能夠通過添加 selected 屬性來定義預(yù)定義選項台舱。
- <option value="fiat" selected>Fiat</option>

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

<button> 元素定義可點擊的按鈕

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

<datalist> 元素

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

<input> 元素的輸入類型。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

根據(jù)瀏覽器支持矗蕊，能夠在被提交時自動對電子郵件地址進行驗證。
某些智能手機會識別 email 類型氢架，并在鍵盤增加 ".com" 以匹配電子郵件輸入傻咖。
必須要有@符號,@符號前后必須有字符

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

跟text類似岖研，自帶清空按鈕

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

沒有驗證，各國手機號格式不一致孙援，但是自動打開數(shù)字鍵盤

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

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

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

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

輸入限制（屬性）

disabled 規(guī)定輸入字段應(yīng)該被禁用吱瘩。
- 被禁用的元素是不可用和不可點擊的道伟。
- 被禁用的元素不會被提交。
- disabled 屬性不需要值。它等同于 disabled="disabled"蜜徽。
max 規(guī)定輸入字段的最大值祝懂。
maxlength 規(guī)定輸入字段的最大字符數(shù)。
- 如設(shè)置 maxlength 屬性拘鞋，則輸入控件不會接受超過所允許數(shù)的字符砚蓬。
- 該屬性不會提供任何反饋。如果需要提醒用戶盆色，則必須編寫 JavaScript 代碼灰蛙。
- 注釋：輸入限制并非萬無一失。JavaScript 提供了很多方法來增加非法輸入隔躲。如需安全地限制輸入摩梧，則接受者（服務(wù)器）必須同時對限制進行檢查。
min 規(guī)定輸入字段的最小值宣旱。
pattern 規(guī)定通過其檢查輸入值的正則表達式仅父。
readonly 規(guī)定輸入字段為只讀（無法修改）。
- readonly 屬性不需要值浑吟。它等同于 readonly="readonly"驾霜。
required 規(guī)定輸入字段是必需的（必需填寫）。
size 規(guī)定輸入字段的寬度（以字符計）买置。
step 規(guī)定輸入字段的合法數(shù)字間隔。
value 規(guī)定輸入字段的默認值强霎。

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

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

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

novalidate 屬性屬于 <form> 屬性蔓腐。

如果設(shè)置矩乐，則 novalidate 規(guī)定在提交表單時不對表單數(shù)據(jù)進行驗證。

autofocus 屬性是布爾屬性。

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

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

提示：如需引用一個以上的表單职抡，請使用空格分隔的表單 id 列表。

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

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

formaction 屬性規(guī)定當(dāng)提交表單時處理該輸入控件的文件的 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ī)定在提交表單時不對 <input> 元素進行驗證。
formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性驾窟。
formnovalidate 屬性可用于 type="submit"庆猫。

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

formtarget 屬性會覆蓋 <form> 元素的 target 屬性绅络。
formtarget 屬性可與 type="submit" 和 type="image" 使用月培。

height 和 width 屬性

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

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

min 和 max 屬性適用于如需輸入類型：number、range随珠、date灭袁、datetime、datetime-local窗看、month简卧、time 以及 week。

multiple 屬性是布爾屬性烤芦。

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

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

pattern 屬性適用于以下輸入類型：text智玻、search、url芙代、tel吊奢、email、and password纹烹。
提示：請使用全局的 title 屬性對模式進行描述以幫助用戶页滚。
提示：請在我們的 JavaScript 教程中學(xué)習(xí)更多有關(guān)正則表達式的知識。

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

placeholder 屬性規(guī)定用以描述輸入字段預(yù)期值的提示（樣本值或有關(guān)格式的簡短描述）裹驰。
該提示會在用戶輸入值之前顯示在輸入字段中。
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ù)定義選項芋齿。

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ā)生變化時觸發(fā)

oninvalid 提交異常時報錯

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

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

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

H5新增多媒體標簽

音頻：- - - < audio >

可以在不使用標簽的情況下同诫，能能夠原生的支持音頻格式文件的播放，但是豆巨，播放格式是有限的剩辟。
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é)

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

Canvas

語義元素

常用

<section> 元素定義文檔中的節(jié)贩猎。
- “節(jié)（section）是有主題的內(nèi)容組，通常具有標題”萍膛。
- 可以將網(wǎng)站首頁劃分為簡介吭服、內(nèi)容、聯(lián)系信息等節(jié)
<article> 定義文檔內(nèi)的文章蝗罗。
- <article> 元素規(guī)定獨立的自包含內(nèi)容艇棕。
- 文檔有其自身的意義，并且可以獨立于網(wǎng)站其他內(nèi)容進行閱讀串塑。
- <article> 元素的應(yīng)用場景：
  - 論壇
  - 博客
  - 新聞
嵌套語義元素
- <article> 元素定義完整的相關(guān)元素自包含塊沼琉。
- <section> 元素被定義為相關(guān)元素塊。
<header> 元素為文檔或節(jié)規(guī)定頁眉桩匪。
- <header> 元素應(yīng)該被用作介紹性內(nèi)容的容器打瘪。
- 一個文檔中可以有多個 <header> 元素。
<footer> 元素為文檔或節(jié)規(guī)定頁腳
- <footer> 元素應(yīng)該提供有關(guān)其包含元素的信息傻昙。
- 頁腳通常包含文檔的作者闺骚、版權(quán)信息、使用條款鏈接妆档、聯(lián)系信息等等僻爽。
- 您可以在一個文檔中使用多個 <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> 元素
- 在書籍和報紙中乳绕，與圖片搭配的標題很常見绞惦。
- 標題（caption）的作用是為圖片添加可見的解釋。
- 通過 HTML5洋措，圖片和標題能夠被組合在 <figure> 元素中

了解

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

<form> 元素定義 HTML 表單

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

action 屬性定義在提交表單時執(zhí)行的動作啤挎。

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

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

Name 屬性

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

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

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

<form> 屬性的列表

accept-charset 規(guī)定在被提交表單中使用的字符集（默認：頁面字符集）宴抚。
action 規(guī)定向何處提交表單的地址（URL）（提交頁面）。
autocomplete 規(guī)定瀏覽器應(yīng)該自動完成表單（默認：開啟）杨何。
enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認：url-encoded）酱塔。
method 規(guī)定在提交表單時所用的 HTTP 方法（默認：GET）危虱。
name 規(guī)定識別表單的名稱（對于 DOM 使用：document.forms.name）。
novalidate 規(guī)定瀏覽器不驗證表單。
target 規(guī)定 action 屬性中地址的目標（默認：_self）。
<form> 增加如需屬性：
- autocomplete
- novalidate

Target 屬性

target 屬性可設(shè)置以下值之一
- _blank 響應(yīng)顯示在新窗口或選項卡中头朱。
- _self 響應(yīng)顯示在當(dāng)前窗口中班眯。
- _parent 響應(yīng)顯示在父框架中。
- _top 響應(yīng)顯示在窗口的整個 body 中。
- framename 響應(yīng)顯示在命名的 iframe 中。
- 默認值為 _self，這意味著響應(yīng)將在當(dāng)前窗口中打開。

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

啟用自動完成功能后鳄橘，瀏覽器會根據(jù)用戶之前輸入的值自動填寫值本刽。

novalidate 屬性是一個布爾屬性别瞭。

如果已設(shè)置蝙寨，它規(guī)定提交時不應(yīng)驗證表單數(shù)據(jù)听系。