HTML 5

第三階段：

  AJAX - 8 —— 綜合且容易出錯

  HTML5新特性 - 7  —— 零散神不聚

  Bootstrap - 5 —— 玩命兒被單詞

 

今日目標：

(1)WebStorm的使用 —— 掌握

(2)H5新特性之一——表單2.0 —— 掌握

 

 

1.經常使用的前端開發軟件

  (1)小型軟件：小巧啓動快，功能簡單

       Editplus、Notepad++、VIM、Emacs

  (2)中型軟件：

       SublimeText

  (3)中型軟件：體積大啓動慢，功能強大

       Eclipse-Aptana、IntejIEDA-WebStorm、Dreamweaver

      

      

  經常使用的Eclipse快捷鍵：             

  (1)Ctrl+Alt+↓      複製當前行

  (2)Alt+↑/↓           向上/下移動當前行

  (3)Ctrl+D            刪除當前行

  (4)Ctrl+/             註釋/取消註釋當前行

  (5)Ctrl+Alt+L      格式化當前文件

  (6)Alt+鼠標左鍵   進入多行編輯模式，ESC或左鍵退出

 

2.HTML5新特性 —— 十大新特性

  (1)新的語義標籤和屬性

  (2)表單新特性

  (3)視頻和音頻

  (4)Canvas繪圖

  (5)SVG繪圖

  (6)地理定位

  (7)拖放API

  (8)WebWorker

  (9)WebStorage

  (10)WebSocket

 

面試題：   HTML5新增了哪些標籤？廢棄了哪些標籤？   HTML5新增了哪些標籤屬性？廢棄了哪些標籤屬性？

 

3.HTML5表單新特性

  (1)新的input type

  (2)新的表單標籤

  (3)表單標籤的新屬性

 

4. HTML5表單新特性之——新的input type —— 瞭解

  <input type="">

  HTML5以前已有的input type：

       text、password、radio、checkbox、file、submit、reset、button、image、hidden

  HTML5新增長的input type：

  (1)email：郵件輸入域，在表單提交時提供簡單的郵箱格式驗證，並彈出一個提示窗口(可定製內容不能定製樣式)

       <input type="email">

  (2)url：URL地址輸入域，在表單提交時提供簡單的URL地址格式驗證，並彈出一個提示窗口(可定製內容不能定製樣式)

       <input type="url">                                  

  (3)number：數字輸入域，在表單提交時提供簡單的數字格式驗證，並彈出一個提示窗口(可定製內容不能定製樣式)

       <input type="number" min="" max="" step="">

  (4)tel：電話號碼輸入域，在手機瀏覽器中彈出數字輸入鍵盤

       <input type="tel">

  (5)search：搜索輸入域，在手機瀏覽器中右下角呈現搜索按鍵

       <input type="search">

  (6)range：範圍選擇控件，幫助用戶在必定範圍內選擇一個數字

       <input type="range" min="" max="" step="">

練習：實現一個調色板

 

  (7)color：顏色選擇控件，瀏覽器並未本身實現顏色選擇框，而是使用操做系統自帶的顏色選擇控件

       <input type="color">

  (8)date：日期選擇控件，FF沒有實現，推薦使用第三方插件代替，如jQueryUI-datepicker、laydate等

       <input type="date">

  (9)month：月份選擇控件，FF沒有實現

       <input type="month">

  (10)week：星期選擇控件，FF沒有實現

       <input type="week">

 

 

5.HTML5新特性之表單新特性——新的表單元素

  HTML5以前FORM能夠有的標籤——用於數據提交：

      INPUT、TEXTAREA、SELECT/OPTION、BUTTON

  HTML5新增表單元素——用於信息提示，不能用於數據提交：

  (1)datalist：數據列表，配合option使用，自己爲不可見元素，爲普通的input提供輸入建議列表

       <datalist id="l"><option>XXX</option></datalist>

       <input type="text" list="l">

 

  (2)progress：進度條，未指定value屬性則顯示爲「進行中」樣式；若指定了value（默認在0~1之間）就能夠控制其顯示的進度

       <progress value="0.5"></progress>

  練習：使用定時器讓進度條不斷前進，到100%就要中止

 

  (3)meter：刻度尺/度量衡，用紅黃綠三色表示出一個數值所處的範圍：不可接受/能夠接受/最優範圍

       <meter min="最小可能值" max="最大的可能值" low="合理的下限" high="合理的上限" optimum="最優值" value="實際值"></meter>

 

  (4)       output：輸出，用於描述表單中的計算結果，語義標籤，樣式與SPAN無異。

       <output>xxx</output>

 

 

6.HTML5新特性表單新特性——表單元素新的屬性——重點

  HTML5以前表單元素可用的屬性：

      id、class、title、style、type、name、value、checked、selected、disabled、readonly

  HTML5以前表單元素新增的屬性：

  (1)autocomplete：on/off，自動補全，是否自動記錄以前提交的數據，以用於下一次輸入建議

       <input autocomplete="off">

  (2)placeholder：站位符，用於在輸入框中顯示提示性文字，與value不一樣，不能被提交

       <input placeholder="提示性文字">

  (3)autofocus：false/true，自動得到輸入焦點

       <input autofocus>

  (4)multiple：false/true，是否容許多個輸入值，若聲明瞭該屬性，輸入框中（如email）就容許輸入用逗號分隔的多個值

       <input type="email" multiple>

  (5)form：爲一個元素指定form屬性，值爲某個表單的ID，則此輸入域能夠放到表單的外部

       <form id="f"></form>

       <input form="f">

  ========上述五個屬性是新的通用屬性===========

  =======上述六個屬性是輸入驗證相關屬性========

  (6)required：false/true，必需的/必填項，在表單提交時會驗證是否有輸入，沒有輸入則彈出提示消息

       <input required>

  (7)maxlength：最大長度，在有輸入的狀況下，限定輸入域中字符的個數

       <input maxlength="9">

  (8)minlength：最小長度，在有輸入的狀況下，限定輸入域中字符的個數，不是HTML5標準屬性，僅部分瀏覽器支持（如Chrome）

       <input minlength="6">

  (9)min：限定輸入的數字的最小值

       <input min="">

  (10)max：限定輸入的數字的最大值

       <input max="">

  (11)step：限定輸入的數字的步長，與min屬性連用

       <input step="">

  (12)pattern：指定一個正則表達式，對輸入進行驗證

       <input pattern="1[3578]\d{9}">

       注意：上述正則表達式能夠省略^和$

 

 

7.總結：HTML5表單新特性：

(1)新的input type——10個

  email、url、number、tel、search、range、color、date、month、week

(2)新的表單元素——4個

  datalist、progress、meter、output

(3)表單元素的新屬性——12個

  autocomplete、autofocus、placeholder、multiple、form

  required、maxlength、minlength、min、max、step、pattern

 

注意：加粗的是當前項目中當即可用的！紅色的特性可能彈出錯誤消息。

 

 

8.如何定製表單2.0中的錯誤提示消息內容——難點&掌握

  HTML5爲每一個標籤對應的JS對象添加了新屬性，以標識用戶輸入的有效性：

  input.validity { 

       badInput：false，無效的輸入，如email輸入無效        

       typeMismatch：false，類型不匹配，如number中出現字符

       valueMissing：false，值缺失，如required驗證失敗

       tooLong：false，輸入的內容超過maxlength限制

       tooShort：false，輸入的內容不知足minlength限制

       rangeOverflow：false，輸入的數字超過max

       rangeUnderflow：false，輸入的數字不知足min

       stepMismatch：false，步長不匹配

       patternMismatch：false，正則表達式不匹配

       customError：false，是否存在自定義錯誤

       valid：true，輸入值是否有效

  }

  注意：

  (1)最後的validity.valid屬性，只有其它屬性都爲false（沒有任何錯誤），valid值爲true；不然只要任何一個其它屬性爲true（說明有某方面的錯誤），valild值爲false。

  (2)上述屬性的值會隨着輸入域中值的改變而當即改變，無需等到表單提交。

  (3)使用input.setCustomValidity('XXX')能夠生成一個自定義錯誤消息，使得validity.customError屬性變爲true；若執行input.setCustomValidity('')能夠刪除自定義錯誤消息，使得validity.customError屬性變爲false

  (4)自定義錯誤消息的優先級高於任何系統自帶的錯誤消息優先級。

 

 

課後練習：

在輸入域失去焦點時，使用其validity屬性的各個布爾類型的值，驗證用戶的輸入是否合法。下面的效果圖能夠放大。