前端開發軟體
@[TO1.常用的前端開發軟體
(1)小型軟體：小巧啟動快，功能簡單
Editplus、Notepad++、VIM、Emacs
(2)中型軟體：
SublimeText
(3)中型軟體：體積大啟動慢，功能強大
Eclipse-Aptana、IntejIEDA-WebStorm、Dreamweaver
2.HTML5新特性 —— 十大新特性
(1)新的語義標籤和屬性
(2)表單新特性
(3)視訊和音訊
(4)Canvas繪圖
(5)SVG繪圖
(6)地理定位
(7)拖放API
(8)WebWorker
(9)WebStorage
(10)WebSocket
- HTML5表單新特性之——新的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="">
練習：實現一個調色盤
練習：新的input type——range
紅色： 255綠色： 255
藍色： 255
(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">
4.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>
5.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}">
注意：上述正則表示式可以省略^和$
6.總結：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
7.如何定製表單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)自定義錯誤訊息的優先順序高於任何系統自帶的錯誤訊息優先順序。
作者：yji534123343
來源：CSDN
原文：https://blog.csdn.net/yji534123343/article/details/79197291
版權宣告：本文為博主原創文章，轉載請附上博文連結！C](這裡寫自定義目錄標題)