html5 基礎入門

時間 2019-11-17

標籤 html5 html 基礎入門欄目 HTML5 简体版

原文原文鏈接

目錄javascript

html5 基礎入門

html5 基礎入門

前言介紹

HTML5草案的前身名爲 Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接納，併成立了新的 HTML工做團隊。css

若是從狹義的角度來說，HTML5就是HTML4的新一代產品。html

而若是從廣義的角度來說，則是新一代的富客戶端解決方案。html5

What is Rich Client[富客戶端]?java

指具備很強交互性和體驗的客戶端程序.css3

HTML 5 的第一份正式草案已於2008年1月22日公佈。HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具有了某些HTML5 支持。
2012年12月17日，萬維網聯盟（W3C）正式宣佈凝結了大量網絡工做者心血的HTML5規範已經正式定稿。根據W3C的發言稿稱：「HTML5是開放的Web網絡平臺的奠定石。」
2013年5月6日， HTML 5.1正式草案公佈。該規範定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的做者，努力提升新元素互操做性。
本次草案的發佈，從2012年12月27日至今，進行了多達近百項的修改，包括HTML和XHTML的標籤，相關的API、Canvas等，同時HTML5的圖像img標籤及svg`也進行了改進，性能獲得進一步提高。git

目前在開發的領域，你們說的H5開發其實指的是HTML5 + CSS3 + JavaScript等技術。程序員

在目前的軟件開發生態鏈中，H5的技術充斥着不少的領域。不管是網站開發、移動端開發、軟件開發、遊戲等等。github

HTML5 兼容性

支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的遨遊瀏覽器（Maxthon），以及基於IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器一樣具有支持HTML5的能力。web

須要注意的是，雖然不少瀏覽器目前已經可以支持HTML5，可是顯示效果仍舊存在差別性。這時，咱們若是從樣式的角度出發，能夠採用下面的幾種css方案。

CSS Reset

每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可讓咱們的排版更美觀整齊。不一樣瀏覽器甚至同一瀏覽器不一樣版本的默認樣式是不一樣的。但這樣會有不少兼容問題，CSSReset能夠將全部瀏覽器默認樣式設置成同樣。

CSS Reset 下載地址: https://meyerweb.com/eric/tools/css/reset/

Normalize(號稱是CSS reset的替代方案，保留了一些內置的樣式，並非清除全部)。

下載地址:https://necolas.github.io/normalize.css/

CSS Hack

因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不同，致使在不一樣瀏覽器的環境中呈現出不一致的頁面展示效果。這時，咱們爲了得到統一的頁面效果，就須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式，咱們把這個針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程，叫作CSS hack!

分類:

CSS Hack大體有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不一樣版本之間的表現差別而引入的。

屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。
選擇器前綴法(即選擇器Hack)：例如IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
IE條件註釋法(即HTML條件註釋Hack)：針對全部IE(注：IE10+已經再也不支持條件註釋)：，針對IE6及如下版本：。這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。

關於IE的條件註釋能夠參考https://www.cnblogs.com/liujunhang/articles/10667109.html.

CSS hack書寫順序，通常是將適用範圍廣、被識別能力強的CSS定義在前面。

屬性前綴法:

屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展示效果。

IE瀏覽器各版本 CSS hack 對照表

hack	寫法	實例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)	IE9(S)	IE9(Q)	IE10(S)	IE10(Q)
*	*color	青色	Y	Y	Y	Y	N	Y	N	Y	N	Y
+	+color	綠色	Y	Y	Y	Y	N	Y	N	Y	N	Y
-	-color	黃色	Y	Y	N	N	N	N	N	N	N	N
_	_color	藍色	Y	Y	N	Y	N	Y	N	Y	N	N
#	#color	紫色	Y	Y	Y	Y	N	Y	N	Y	N	Y
\0	color:red\0	紅色	N	N	N	N	Y	N	Y	N	Y	N
\9\0	color:red\9\0	粉色	N	N	N	N	N	N	Y	N	Y	N
!important	color:blue !important;color:green;	棕色	N	N	Y	N	Y	N	Y	N	Y	Y

說明：在標準模式中

「-″減號是IE6專有的hack
「\9″ IE6/IE7/IE8/IE9/IE10都生效
「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
「\9\0″ 只對IE9/IE10生效，是IE9/10的hack

選擇器前綴法:

選擇器前綴法是針對一些頁面表現不一致或者須要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。

目前最多見的是

*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效
等等

CSS Hack利弊：

通常狀況下，咱們儘可能避免使用CSS hack，可是有些狀況爲了顧及用戶體驗實現向下兼容，不得已才使用hack。好比因爲IE8及如下版本不支持CSS3,而咱們的項目頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染，這種狀況下若是不使用css3pie或htc或條件註釋等方法時,可能就得讓IE8-的專屬hack出馬了。使用hack雖然對頁面表現的一致性有好處，但過多的濫用會形成html文檔混亂不堪，增長管理和維護的負擔。

優雅降級和漸進加強:

因爲低級瀏覽器不支持 CSS3，可是 CSS3 特效太優秀不忍放棄，因此在高級瀏覽器中使用CSS3，而在低級瀏覽器只保證最基本的功能。兩者的目的都是關注不一樣瀏覽器下的不一樣體驗，可是它們側重點不一樣，因此致使了工做流程上的不一樣。

漸進加強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。

優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽。

第三方插件:

關於兼容性問題，除了上述的解決方案外，還能夠經過使用第三方的插件來解決兼容性問題。

DTD

DTD能夠理解爲文檔聲明頭，在HTML5中的文檔聲明頭，不一樣於以前的HTML4，變成了<!doctype html>。

智能表單

表單在Html5以前就已經存在好久，可是在Html5階段進行了不少程度的加強。

input type 類型整理總結

文本類:

Text，文本

Url，網絡地址

Password，密碼

Email，郵箱地址

操做類:

Color：顏色選取

Checkbox ，複選框

Radio，單選框

File，上傳文件

Number，數值

Range，百分百滑動條

功能類：

Button，按鈕

Image，圖片提交按鈕

Submit，文字提交按鈕

Reset，重置表單

Date類：

Date，年月日控件

Month，年月控件

Week，年周控件

Time，時間控件

Datetime，年月日+時間控件

Datetime-local，本地年月日+時間控件

特殊類：

Hidden，隱藏信息

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
    <style>
        form {
            width: 670px;
            margin: 0 auto;
        }

        td {
            background-color: #ffffff;
        }

        td, input {
            font-size: 20px;
        }

        th {
            font-size: 26px;
            background-color: #22ccff;
            letter-spacing: 2px;
        }

        #sub {
            float: right;
            margin-left: 10px;
            position: relative;
            top: 50px;
            left: 0px;
            -webkit-transition: all 0.5s ease-in-out 0.0s;
            -moz-transition: all 0.5s ease-in-out 0.0s;
            -ms-transition: all 0.5s ease-in-out 0.0s;
            -o-transition: all 0.5s ease-in-out 0.0s;
            transition: all 0.5s ease-in-out 0.0s;
        }
    </style>
</head>
<body>
<form target="_blank" action="URL">
    <!-- 額外的提交按鈕 -->
    <input type="submit" value="提交" id="sub"/>
    <table bgcolor="#000" cellpadding="10" align="center">
        <!-- 文本類 -->
        <tr>
            <th colspan="2">文本類</th>
        </tr>
        <tr>
            <td>text</td>
            <td><input type="text" value="attribute:value" pattern="[A-Z,a-z]{1}[a-z,0-9]{3,10}"/></td>
        </tr>
        <tr>
            <td>url</td>
            <td>
                <input type="url" placeholder="attribute:placeholder" value="a:b"/>
            </td>
        </tr>
        <tr>
            <td>password</td>
            <td>
                <input type="password" maxlength="8" placeholder="請輸入密碼" autofocus required/>
            </td>
        </tr>
        <tr>
            <td>email</td>
            <td>
                <input type="email" value="1@2.3"/>
            </td>
        </tr>
        <tr>
            <td>tel</td>
            <td><input type="tel"></td>
        </tr>
        <tr>
            <td>search</td>
            <td><input type="search"/></td>
        </tr>
        <tr>
            <td colspan="2">
                <p>「placeholder」：佔位符；</p>
                <p>「autofocus」：焦點獲取；</p>
                <p>「required」；表單必填項；</p>
                <p>「pattern」；輸入規範，該值爲一個正則表達式；</p>
                <p>在H5中，URL和email類型在提交表單時，會檢測是否符合格式。</p>
            </td>
        </tr>
        <!-- 文本類 end -->

        <!-- 操做類 -->
        <tr>
            <th colspan="2">操做類</th>
        </tr>

        <tr>
            <td>checkbox</td>
            <td>
                <label><input type="checkbox" name="ch_box"/>box_1</label>
                <label><input type="checkbox" name="ch_box"/>box_2</label>
                <label><input type="checkbox" name="ch_box"/>box_3</label>
                <input type="checkbox" id="ch_box4"/>
                <label for="ch_box4">box_4</label>
            </td>
        </tr>
        <tr>
            <td>radio</td>
            <td>
                <label><input type="radio" name="radio"/>ra_1</label>
                <label><input type="radio" name="radio"/>ra_2</label>
                <label><input type="radio" name="radio"/>ra_3</label>
                <label><input type="radio" name="radio"/>ra_4</label>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                label:<br/>
                非跨度：&lt;label&gt;&lt;input&gt;&lt;/input&gt;&lt;/label&gt;<br/>
                跨&emsp;度：&lt;label for="input_id"&gt;&lt;/label&gt;<br/>
                &emsp;&emsp;&emsp;&emsp;&lt;input id="input_id"&gt;&lt;/input&gt;
            </td>
        </tr>
        <tr>
            <td>file</td>
            <td>
                <input type="file" multiple="multiple"/>
                <p>multiple="multiple"：容許添加多個值；</p>
                <p>accept="MIME_type";指定上傳文件的類型；</p>
                <p>如：accept="image/jpg,image/gif"</p>
                <p><a href="http://www.w3school.com.cn/media/media_mimeref.asp" target="_blank">MIME_type 附錄表</a></p>
            </td>
        </tr>
        <tr>
            <td>number</td>
            <td><input type="number" max="100" min="90" step="2"/>
                <p>只容許輸入數字；"e":天然常數;</p></td>
        </tr>
        <tr>
            <td>range</td>
            <td>
                <input type="range" max="100" min="0" step="20"/>
                <p>「value」，默認爲50，範圍0~100；</p>
            </td>
        </tr>
        <tr>
            <td colspan="2">max：最多值；min：最小值；step：步長；</td>
        </tr>
        <tr>
            <td>color</td>
            <td><input type="color" value="#00ff00"/> 數值型：#ffffff；</td>
        </tr>
        <!-- 操做類 end -->

        <!-- 表單功能 -->
        <tr>
            <th colspan="2">功能類</th>
        </tr>

        <tr>
            <td>button</td>
            <td>
                <input type="button" value="button"/>
                <button>This is a button.<img src="btn_03.png" width="52"/></button>
                <p>「button」容許嵌入其餘元素；</p>
            </td>
        </tr>
        <tr>
            <td>image</td>
            <td><input type="image" src="btn_03.png" width="32"
                       height="26"/><span>&emsp;H5中使用「width」「height」修改圖片大小；</span></td>
        </tr>
        <tr>
            <td>submit</td>
            <td>
                <input type="submit"/>
                <p>get:在url地址上傳送參數到服務器;<br/>post:在後臺傳送參數到服務器; </p>
            </td>
        </tr>
        <tr>
            <td>reset</td>
            <td><input type="reset"/></td>
        </tr>
        <!-- 表單功能 end -->

        <!-- 日期類型 -->
        <tr>
            <th colspan="2">Date 類</th>
        </tr>

        <tr>
            <td>date</td>
            <td><input type="date"/></td>
        </tr>
        <tr>
            <td>month</td>
            <td><input type="month"/></td>
        </tr>
        <tr>
            <td>week</td>
            <td><input type="week"/></td>
        </tr>
        <tr>
            <td>time</td>
            <td><input type="time"/></td>
        </tr>
        <tr>
            <td>datetime</td>
            <td><input type="datetime" value="2016-08-02T08:32Z"/></td>
        </tr>
        <tr>
            <td>datetime-local</td>
            <td><input type="datetime-local"/></td>
        </tr>
        <!-- 日期類型 end -->
        <!-- 特殊類 -->
        <tr>
            <th colspan="2">特殊類</th>
        </tr>

        <tr>
            <td>hidden</td>
            <td><input type="hidden"/>
                <p>可用於記錄一些表單狀態信息<br/>（例如使用value的值標記可選項爲非空值的個數），<br/>或者其餘自定義信息；</p></td>
        </tr>
    </table>
</form>
</body>
<script type="text/javascript">
    function sub_move() {
        var s = document.getElementById("sub");
        window.onscroll = function _scroll() {
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            s.style.top = top + 50 + "px";
        }
    }
</script>
<script type="text/javascript">
    window.onload = function main() {
        sub_move();
    }
</script>
</html>

input 元素屬性總結

form元素只是一個數據獲取元素的容器，而容器內的元素稱爲表單控件。最經常使用的表單控件是input元素

accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value這11個屬性是input元素的傳統元素屬性

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width這19個屬性是HTML5新增的元素屬性

傳統屬性:

name 屬性

name屬性用於規定input元素的名稱，用於對提交到服務器後的表單數據進行標識，或者在客戶端經過javascript引用表單數據

注意：只有設置了name屬性的表單元素才能在提交表單時傳遞它們的值

type屬性

type屬性用來規定input元素的類型

注意：若是input元素沒有設置type屬性，或者設置的值在瀏覽器中不支持，那麼輸入類型會變成type="text"

accept 屬性

accept屬性用來規定可以經過文件上傳進行提交的文件類型。理論上能夠用來限制上傳文件類型，然而它只是建設性的，並極可能被忽略，它接受逗號分隔的MIME類型

注意：該屬性只能與type="file"配合使用

<input type="file" accept="image/gif,image/jpeg,image/jpg">

alt屬性

alt屬性爲圖像輸入規定替代文本，功能相似於image元素的alt屬性，爲用戶因爲某些緣由沒法查看圖像時提供備選信息

注意：alt屬性只能與type="image"的input元素配合使用

<input type="image" src="#" alt="測試圖片">

checked屬性

checked屬性規定在頁面加載時應該被預先選定的input元素，也能夠在頁面加載後，經過javascript進行設置

注意：checked屬性只能與type="radio"或type="checkbox"的input元素配合使用

<input type="radio" name="radio" value="1" checked>
<input type="radio" name="radio" value="2">
<input type="checkbox" name="checkbox" value="1">
<input type="checkbox" name="checkbox" value="2">

disabled屬性

disabled屬性規定應該禁用input元素。被禁用的字段是不能修改的，也不可使用tab按鍵切換到該字段，但能夠選中或拷貝其文本

[注意1]disabled屬性沒法與type="hidden"的input元素一塊兒使用

[注意2]對於IE7-瀏覽器必須設置爲disabled="disabled"，而不能夠直接設置disabled，不然使用javascript控制時將失效

<button id="btn1">輸入域可用</button>
<button id="btn2">輸入域不可用</button>
<input id="test" disabled value="內容">
<script>
btn1.onclick = function(){
    test.removeAttribute('disabled');
}    
btn2.onclick = function(){
    test.setAttribute('disabled','disabled');
}    
</script>

readonly屬性

readonly屬性規定輸入字段爲只讀。只讀字段是不能修改的，但用戶仍然可使用tab按鍵切換到該字段，還能夠選中或拷貝其文本

readonly屬性可與type="text"或"password"的input元素配合使用

注意：IE7-瀏覽器不支持使用javascript控制readonly屬性

<button id="btn1">輸入域只讀</button>
<button id="btn2">輸入域可讀寫</button>
<input id="test" value="內容" readonly>
<script>
btn1.onclick = function(){
    test.setAttribute('readonly','readonly');
}
btn2.onclick = function(){
    test.removeAttribute('readonly');
}    
</script>

maxlength屬性

maxlength屬性規定輸入字段的最大長度，以字符個數計

注意：該屬性只能與type="text"或type="password"的input元素配合使用

<input maxlength="6">
<input type="password" maxlength="6">

size屬性

size屬性對於type="text"或"password"的input元素是可見的字符數；而對於其餘類型，是以像素爲單位的輸入字段寬度

注意：因爲size屬性是一個可視化的設計屬性，推薦使用CSS來代替它

<input size="1">
<input type="password" size="2">

src屬性

src屬性做爲提交按鈕顯示的圖像的URL

注意：src屬性只能且必須與type="image"的input元素配合使用

<form action="#">
    <input name="test">
    <input type="image" src="1.jpg" width="99" height="99" alt="測試圖片">
</form>

value屬性

value屬性爲input元素設定值。對於不一樣的輸入類型，value屬性的用法也不一樣：

+ type="button"、"reset"、"submit"用於定義按鈕上的顯示的文本

+ type="text"、"password"、"hidden"用於定義輸入字段的初始值

+ type="checkbox"、"radio"、"image"用於定義與輸入相關聯的值

+ [注意1]type="checkbox"或"radio"必須設置value屬性

+[注意2]value屬性沒法與type="file"的input元素一塊兒使用

新增屬性:

autocomplete屬性

autocomplete屬性能夠在個別元素或整個表單上開啓或關閉瀏覽器的自動完成功能。當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，顯示出在字段中填寫的選項

autocomplete屬性適用form元素以及如下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color

注意：IE瀏覽器不支持該屬性，只有元素擁有name屬性，該屬性纔有效

<input name="test1" autocomplete="on">
<input name="test2" autocomplete="off">

autofocus屬性

autofocus屬性規定在頁面加載時，域自動地得到焦點

autofous屬性適用於button、input、keygen、select和textarea元素

<input name="test1">
<input name="test2" autofocus>

novalidate屬性

novalidate屬性規定在提交表單時不驗證form或input域

novalidate屬性適用於form元素以及如下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color

注意：IE9-瀏覽器不支持

height屬性

height屬性用於規定image類型的input標籤的圖像高度

注意：該屬性只適用於image類型的input標籤

width屬性

width屬性用於規定image類型的input標籤的圖像寬度

注意：該屬性只適用於image類型的input標籤

<form action="#">
    <input name="test">
    <input type="image" src="submit.jpg" width="99" height="99">
</form>

list屬性

大多數輸入類型包含一個屬性list，它和一個新元素datalist結合使用，這個元素定義當在表單控件輸入數據時可用的一個選項列表。datalist元素自身不會在頁面顯示，而是爲其餘元素的list屬性提供數據

list屬性適用於form元素以及如下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color

注意：IE9-瀏覽器及safari瀏覽器不支持

min屬性

min屬性規定輸入域所容許的最小值

max屬性

max屬性規定輸入域所容許的最大值

step屬性

step屬性爲輸入域規定合法的數字間隔

min、max、step屬性適用於如下類型的input元素:date pickers、number、range

multiple屬性

multiple屬性規定按住ctrl按鍵，輸入字段能夠選擇多個值

該屬性適用於type="email"和"file"的input元素

注意：該屬性IE9-瀏覽器不支持

<input id="test" type="file" multiple>

pattern屬性

pattern屬性規定用於驗證input域的模式。模型pattern是正則表達式

pattern屬性適用於如下類型的input元素：text、search、url、tel、email、password

注意：IE9-瀏覽器及safari瀏覽器不支持

<form action="#">
    <input pattern="\d{3}">    
    <input type="submit">
</form>

placeholder屬性

placeholder屬性提供佔位符文字，描述輸入域所期待的值。佔位符會在輸入域爲空時顯示出現，在輸入域得到焦點時消失

placeholder屬性適用於如下類型的input元素:text、search、url、tel、email、password

注意：IE9-瀏覽器不支持

<form action="#">
    <input type="tel" placeholder="請輸入數字" pattern="\d{11}">    
    <input type="submit">
</form>

要修改placeholder的顏色須要使用::placeholder

required屬性

required屬性規定必須在提交以前填寫輸入域(不能爲空)

required屬性適用於如下類型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file

注意：IE9-瀏覽器及safari瀏覽器不支持

<form action="#">
    <input required>    
    <input type="submit">
</form>

form屬性

form屬性規定輸入域所屬的一個或多個表單，form屬性必須和所屬表單的id

form屬性適用於全部input標籤的類型，若須要引用一個以上的表單時，用空格分隔

注意：IE瀏覽器不支持該屬性，只有元素擁有name屬性，該屬性纔有效

<form id="form" action="#">
    <input type="submit">
</form>
<input name="test" form="form">

formaction屬性

重寫表單的action屬性.

<form action="#" >
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formaction="#" value="以管理員身份提交" />
</form>

formmethod屬性

重寫表單的method屬性.

<form action="#" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formmethod="post" formaction="#" value="使用POST提交" />
</form>

formtarget屬性

　重寫表單的target屬性.

<form action="#">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formtarget="_blank" value="提交到新窗口/選項卡" />
</form>

form表單控件總結

input元素無疑是一個龐大和複雜的元素，但它並非惟一的表單控件。還有button、select、option、label、optgroup、textarea、fieldset、legend這八個傳統表單控件，datalist、progress、meter、output、keygen這五個新增表單控件。

傳統控件:

button 定義一個按鈕
select 定義一個下拉列表
option 定義下拉列表中的一個選項
optgroup 定義選項組，用於組合選項
textarea 定義多行的文本輸入控件
fieldset 分組表單內的相關元素
legend 定義fieldset元素的標題
label 定義input元素的標註

button

button元素用來定義一個按鈕，button元素內部能夠放置文本或圖像或其餘多媒體內容。但惟一禁止使用的元素是圖像映射，由於它對鼠標和鍵盤敏感的動做會干擾表單按鈕的行爲

始終爲button元素設置type屬性，IE7-瀏覽器的默認類型是button，而其餘瀏覽器的默認類型是submit

IE7-提交button元素之間的文本，而其餘瀏覽器則會提交value屬性的內容

<button>元素比<input>元素更易樣式化。能夠添加內聯HTML內容（如<em>，<strong>甚至<img>），並使用:after和:before僞元素實現複雜的渲染，而<input>只有文本值屬性
```
//IE7-瀏覽器:按下提交按鈕時，URL添加?btn=1
//其餘瀏覽器:按下button按鈕時，URL添加?btn=2
<form action="#" >
<button value="2" name="btn">1</button>
<input type="submit">
</form>
```
屬性：

autofocus 規定當頁面加載時按鈕自動得到焦點

disabled 規定應該禁用該按鈕

form 規定按鈕屬性一個或多個表單

formaction 覆蓋form元素的action屬性

formenctype 覆蓋form元素的enctype屬性

formmethod 覆蓋form元素的method屬性

formnovaliadate 覆蓋form元素的novalidate屬性

formtarget 覆蓋form元素的target屬性

name 規定按鈕的名稱

type 規定按鈕的類型

value 規定按鈕的初始值
select

select元素用來定義一個下拉列表，包含任意數量的option和optgroup元素。

屬性：

autofocus 規定在頁面加載後文本區域自動得到焦點

disabled 規定禁用該下拉列表

form 規定文本區域所屬的一個或多個表單

multiple 規定可選擇多個選項

name 規定下拉列表的名稱

size 規定下拉列表中可見選項的數目

注意：size不可爲0，默認爲1

option

option元素定義下拉列表中的一個選項

option元素有兩種應用場景，除了用於下拉列表select外，還能夠用於選項列表datalist中

【屬性】

disabled 規定此選項應在首次加載時被禁用

label 定義當使用optgroup時所使用的標註，替代option元素內容

注意：firefox不支持label屬性

selected 規定選項在首次顯示在列表中時表現爲選中狀態

value 定義送往服務器的選項值

注意：當設置value值時，服務器提交的是value的值；不然提交給服務器的是option的元素內容

注意：option沒法設置margin、padding、border等盒模型樣式.

optgroup

optgroup元素定義選項組，用於組合選項

注意：optgroup沒法設置margin、padding、border等盒模型樣式

【屬性】

label 爲選項組規定描述(必須)

disabled 規定禁用該選項組(可選)

<button id="btn1a" type="button">啓用</button>
<button id="btn1b" type="button">禁用</button>
<button id="btn2a" type="button">可多選</button>
<button id="btn2b" type="button">不可多選</button>
<button id="btn3a" type="button">size=1</button>
<button id="btn3b" type="button">size=2</button>
<button id="btn3c" type="button">size=3</button>
<button id="btn3d" type="button">不設置size</button>    
<form action="#">
    <br><br>
    <select name="test" id="select"> 
        <optgroup label="num">
            <option value="11" disabled>1</option>
            <option value="22" selected>2</option>
            <option value="33">3</option>
            <option value="44" label="word">4</option>        
        </optgroup>
        <optgroup  label="word">
            <option>a</option>
            <option>b</option>
            <option>c</option>
            <option>d</option>        
        </optgroup>
        <optgroup  label="漢字" disabled>
            <option value="一個">一</option>
            <option value="二個">二</option>
            <option value="三個">三</option>
            <option value="四個">四</option>        
        </optgroup>    
    </select>
    <input type="submit">    
</form>

textarea

textarea定義多行的文本輸入控件，文本區可容納無限數量的文本

注意：瀏覽器不容許textarea嵌套textarea

注意：IE8-瀏覽器寬高設置不包含滾動條；其餘瀏覽器寬高設置包含滾動條

【屬性】

name 規定文本區的名稱

value 表示文本區的值

disabled 規定禁用該文本區

注意：IE7-瀏覽器不支持經過setAttribute('disabled','')的寫法，必須設置爲setAttribute('disabled','disabled')

readonly 規定文本區爲只讀

注意：IE7-瀏覽器不支持經過javascript設置readonly屬性

form 規定文本區域所屬的一個或多個表單

注意：IE瀏覽器不支持該屬性

autofous 規定在頁面加載後文本區域自動得到焦點

注意：IE9-瀏覽器不支持該屬性

required 規定文本區域是必填的

注意：IE9-瀏覽器和safari瀏覽器不支持該屬性

placeholder 規定描述文本區域預期值的簡短提示

注意：IE9-瀏覽器不支持該屬性

maxlength 規定文本區域的最大字符數

cols 規定文本區內的可見列數

rows 規定文本區內的可見行數

注意：能夠用cols和rows來規定textarea的尺寸，但更好的辦法是使用CSS的height和width屬性

wrap 規定當在表單中提交時，文本區域中折行如何處理

當wrap="soft"，表示表單提交時，雖然文字在屏幕上折行，但提交的數據裏不會有換行符(默認值)；而當 wrap="hard"，表示表單提交時，提交的數據包含文本換行符

<textarea id="test">測試內容</textarea>

fieldset

fieldset元素用於將表單內的相關元素分組，提高可訪問性，多數瀏覽器用一個簡單的邊框來顯示fieldset.

【屬性】

disabled 禁用fieldset

form 規定fieldset所屬的一個或多個表單

name 規定fieldset的名稱

legend

legend元素用於定義fieldset元素的標題

<fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    體重：<input type="text" />
</fieldset>

label

label元素爲input元素定義標註，創建文字標籤與表單控件的關聯。在label元素內點擊文本會觸發此控件，選擇該文本時瀏覽器會自動把焦點轉到和標籤相關的表單控件上

label元素有兩種用法：一種是使用for屬性，另外一種是將表單控件嵌套到label內部。但IE6瀏覽器只識別使用for屬性的方法

【屬性】

for 規定label綁定到哪一個表單元素

form 規定label字段所屬的一個或多個表單

注意：label標籤的for屬性要與相關元素的id屬性相同

<h4>使用for方法</h4>
<label for="male">Male</label>
<input type="radio" name="sex1" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex1" id="female" />
<h4>使用嵌套方法</h4>
<label>Male<input type="radio" name="sex2" /></label>
<br />
<label>Female<input type="radio" name="sex2"  /></label>

新增控件

datalist 定義輸入域的選項列表

keygen 定義密鑰對生成器，用於生成密鑰

output 用於顯示計算的結果

progress 用於顯示進度(前進量)

meter 用於顯示度量(剩餘量)

datalist

datalist元素規定輸入域的選項列表，列表是經過datalist內的option元素建立的。若是須要把datalist綁定到輸入域，須要把輸入域的list屬性引用datalist的id。option元素必定要設置value屬性

注意：IE9-瀏覽器及safari瀏覽器不支持
```
<form action="#">
    <input list="list" name="input">
    <datalist id="list">
        <option value="1">
        <option value="2">
        <option value="3">
    </datalist>
</form>
```

keygen

keygen規定用於表單的密鑰生成器字段，當提交表單時，私鑰存儲在本地，公鑰發送到服務器

注意：safari和IE不支持該屬性，chrome部分支持該屬性

【屬性】

autofocus 使用keygen字段在頁面加載時得到焦點

challenge 若是使用，則將keygen的值設置爲在提交時詢問

disabled 禁用keygen字段

form 定義該keygen字段所屬的一個或多個表單

keytype 定義keytype，rsa生成RSA密鑰(默認)

name 定義keygen元素的惟一名稱

//firefox: 1->usr_name=1&security=MIIBOjCBpDCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEA1HUwmm%2B75QTnuDXC%0D%0AnUsL8cD8KkncFnA6TRaJttYss0Oi6dVzOPOtdK0O7wxD4%2BIhjSMZRD%2FddKFciZw0%0D%0AURyAimXxe%2FlDKmR3Nb1SzmqA7RJnns%2FA%2BduiYeeIIiMSL2ydUOvQvVFYMtaDkWra%0D%0AtpQfeWv1Hjz9hb7HlGzOUbtGrAECAwEAARYAMA0GCSqGSIb3DQEBBAUAA4GBAJ0I%0D%0ATWv7CdcNzqkaq5OpN6GHWtrlIpD5UAL%2FOiFDICb%2F8PFgV7FQk0MaGwj5XzQfEu4B%0D%0A6YlAbyz2l91I9%2FJW6Oerru5wL646OpvnTvD2U%2FzByU%2FHWp0BRNeDqntMAsGvzl6D%0D%0AoNsHTwLjDUGYVILge4syfcQVRpFRZiyVRaNlIJT9#
<form action="#">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security"  />
    <input type="submit" />
</form>

output

output元素用於顯示計算的結果，這是一個語義化標籤，定義不一樣類型的輸出，好比腳本的輸出

注意：IE瀏覽器不支持該屬性

【屬性】

for 定義輸出域相關的一個或多個元素

form 定義輸入字段所屬的一個或多個元素

name 定義對象的惟一名稱
```
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0<input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>
```

progress

progress元素用來標示任務的進度或進程(經常使用於表示過程)

注意：IE9-瀏覽器及safari瀏覽器不支持

【屬性】

max 規定任務一共須要多少工做

value 規定已經完成多少工做

若是progress控件什麼屬性都不設置，則會有進度條左右往返運動的效果

<progress></progress>

若是結合上js，能夠作到以下的效果:

<input id="btn" type="button" value="開始下載">
下載進度：<progress id="test" value="0" max="100"></progress>
<script>
var oTimer;
btn.onclick = function(){
    if(oTimer){
        return;
    }
    oTimer = setInterval(function(){
        test.value++;
        if(test.value >= test.max){
            clearInterval(oTimer);
        }
    },50);     
}
</script>

meter

meter元素用於顯示剩餘容量或剩餘庫存(經常使用於表示狀態)

注意：IE瀏覽器及safari瀏覽器不支持

【屬性】

form 規定meter元素所屬的一個或多個表單

high 規定被視做高的值的範圍

low 規定被視做低的值的範圍

max 規定範圍的最大值

min 規定範圍的最小值

optimum 規定度量的最優值

value 規定度量的當前值(必需)

注意：min 小於 low 小於 high 小於 max

示例：
```
<input id="btn" type="button" value="增長庫存">
庫存量：<meter id="test" value="10" min="0" low="30" optimum="60" high="80" max="100" ></meter>
<script>
var oTimer;
btn.onclick = function(){
    if(oTimer){
        return;
    }
    oTimer = setInterval(function(){
        test.value++;
        if(test.value >= test.max){
            clearInterval(oTimer);
        }
    },50);     
};
</script>
```

新增結構標籤

在HTML5中，還新增了不少用於開發的結構標籤。

section元素表示頁面中的一個內容區塊

article元素表示一塊與上下文無關的獨立的內容

aside元素是輔助 article 區域的內容。也能夠理解爲整個網頁的輔助區域

header元素表示頁面中一個內容區塊或整個頁面的標題

footer元素表示頁面中一個內容區塊或整個頁面的腳註

nav元素表示頁面中導航連接部分

figure元素表示一段獨立的流內容，使用figcaption元素爲其添加標題(第一個或最後一個子元素的位置)

main元素表示頁面中的主要的內容(ie不兼容)

hgroup標題的一個分組

mark:標籤訂義帶有記號的文本,在須要突出顯示文本時使用

下面是使用新結構標籤的一個示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>結構化標籤</title>
    <style>
        /*通用註釋*/
        body {
            width: 1024px;
            background-color: #ccc;
            margin:0 auto;
            padding:0;
        }
        a :link,
        a:visited {
            color:#3e3e3e;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
            color: green;
        }

        a:active {
            color: lightblue;
        }

        /*頭部*/
        header {
            padding:20px 30px;
        }

        /*導航*/
        nav > ul {
            list-style: none;
            margin:0 auto;
            position: relative;
            height: 42px;
            padding:0 5px;
            border-radius: 5px;
            background-color: #c0c0c0;
        }
        nav > ul > li {
            float: left;
            height: 100%;
        }

        nav > ul > li > a {
            background: #c0c0c0;
            font-family: "kaiTi";
            font-size: 16px;
            font-weight: normal;
            line-height: 18px;
            display: block;
            padding:12px 20px;
            color: white;
            text-decoration: none;
        }
        nav > ul > li > a:hover {
            background-color: #e0e0e0;
            font-weight: bold;
        }

        /*main*/
        main {
            position: relative;
        }

        main > section {
            margin-right: 220px;
            padding:15px;
            padding-right: 20px;
        }
        main > section > article {
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 20px;
        }

        main > aside {
            width: 220px;
            position: absolute;
            top: 0;
            right: 0;
        }

        /*footer*/
        footer {
            border-top: 1px solid #d1d7dc;
            margin:0 auto;
            padding:0 10px;
            position: relative;
            height: 80px;
            color: #b0b0b0;
            font:12px/1.5 tahoma,arial,宋體;
            text-align: left !important;
        }
        .links {
            list-style: none;
            border-bottom: 1px solid #e0e0e0;
            margin:20px 90px 5px 0;
            padding:0;
            padding-bottom: 8px;
            height: 18px;
        }
        .links > li {
            display: inline-block;
        }
    </style>
</head>
<body>

    <!-- header -->
    <header>
        <h1>網頁標題</h1>
    </header>
    <!-- /header -->

    <!-- nav -->
    <nav>
        <ul>
            <li><a href="#">文檔</a></li>
            <li><a href="#">編輯</a></li>
            <li><a href="#">可視化</a></li>
            <li><a href="#">項目目錄</a></li>
            <li><a href="#">生成代碼</a></li>
            <li><a href="#">調試</a></li>
            <li><a href="#">團隊介紹</a></li>
        </ul>
    </nav>
    <!-- /nav -->

    <!-- main -->
    <main>
        <section>
            <article>
                <h3>愛在黎明破曉前</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat beatae dolor atque dicta iusto recusandae hic earum quidem excepturi. Soluta, tempore accusamus minima ratione facilis officia ipsam repudiandae est impedit quia reprehenderit a neque nemo perspiciatis, mollitia dignissimos ipsum! Assumenda hic aspernatur consequatur adipisci magni minus delectus, excepturi quam illo?
                </p>
            </article>
            <article>
                <h3>張三和金蓮的故事</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat beatae dolor atque dicta iusto recusandae hic earum quidem excepturi. Soluta, tempore accusamus minima ratione facilis officia ipsam repudiandae est impedit quia reprehenderit a neque nemo perspiciatis, mollitia dignissimos ipsum! Assumenda hic aspernatur consequatur adipisci magni minus delectus, excepturi quam illo?
                </p>
            </article>
            <article>
                <h3>李四和武二的故事</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat beatae dolor atque dicta iusto recusandae hic earum quidem excepturi. Soluta, tempore accusamus minima ratione facilis officia ipsam repudiandae est impedit quia reprehenderit a neque nemo perspiciatis, mollitia dignissimos ipsum! Assumenda hic aspernatur consequatur adipisci magni minus delectus, excepturi quam illo?
                </p>
            </article>
            <article>
                <h3>航哥跑到沙特阿拉伯的故事</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat beatae dolor atque dicta iusto recusandae hic earum quidem excepturi. Soluta, tempore accusamus minima ratione facilis officia ipsam repudiandae est impedit quia reprehenderit a neque nemo perspiciatis, mollitia dignissimos ipsum! Assumenda hic aspernatur consequatur adipisci magni minus delectus, excepturi quam illo?
                </p>
            </article>
        </section>
        <aside>
            <section class="widght">
                <h4>最近文章</h4>
                <ul>
                    <li>JavaScript從入門到放棄</li>
                    <li>H5頸椎病的治癒與康復</li>
                    <li>論程序員如何防脫髮</li>
                    <li>程序員鼓勵師的重要性</li>
                </ul>
            </section>
            <section class="widght">
                <h4>文章歸檔</h4>
                <ul>
                    <li>2019-03-18</li>
                    <li>2019-03-17</li>
                    <li>2019-02-19</li>
                    <li>2019-02-10</li>
                </ul>
            </section>
        </aside>
    </main>
    <!-- /main -->

    <!-- footer -->
    <footer>
        <ul class="links">
            <li><a href="javascript:;">關於咱們</a></li>
            <li><a href="javascript:;">服務條款</a></li>
            <li><a href="javascript:;">會員服務</a></li>
            <li><a href="javascript:;">法律聲明</a></li>
            <li><a href="javascript:;">隱私聲明</a></li>
            <li><a href="javascript:;">廣告服務</a></li>
            <li><a href="javascript:;">聯繫咱們</a></li>
            <li><a href="javascript:;">站點地圖</a></li>
            <li><a href="javascript:;">信息舉報</a></li>
            <li><a href="javascript:;">廣告服務</a></li>
            <li><a href="javascript:;">聯繫咱們</a></li>
        </ul>

        <div class="copyright">
            <i>京ICP備XXXXXXXX號</i>
            <span>Copyright © 2015 Itcast.cn 版權全部。</span>
        </div>
    </footer>
    <!-- /footer -->

</body>
</html>

新增多媒體標籤

在H5中，另一個強大的功能是新增的多媒體標籤，例如經過多媒體標籤，咱們能夠實如今網頁中播放音頻和視頻等等。

多媒體元素(好比視頻和音頻)存儲於媒體文件中，肯定媒體類型的最經常使用的方法是查看文件擴展名。如.swf、.wmv、.mp三、.mp4。

媒體格式：

音頻格式

.mid/.midi

MIDI (Musical Instrument Digital Interface) 是一種針對電子音樂設備（好比合成器和聲卡）的格式。MIDI 文件不含有聲音，但包含可被電子產品（好比聲卡）播放的數字音樂指令。由於 MIDI 格式僅包含指令，因此 MIDI 文件極其小巧。大多數流行的網絡瀏覽器都支持 MIDI

.rm/.ram

RealAudio 格式是由 Real Media 針對因特網開發的。該格式也支持視頻。該格式容許低帶寬條件下的音頻流（在線音樂、網絡音樂）。因爲是低帶寬優先的，質量常會下降

.wav

Wave (waveform) 格式是由 IBM 和微軟開發的。全部運行 Windows 的計算機和全部網絡瀏覽器（除了 Google Chrome）都支持它

.wma

WMA 格式 (Windows Media Audio)，質量優於 MP3，兼容大多數播放器，除了 iPod。WMA 文件可做爲連續的數據流來傳輸，這使它對於網絡電臺或在線音樂很實用

.mp3/.mpga

MP3 文件其實是 MPEG 文件的聲音部分。MPEG 格式最初是由運動圖像專家組開發的。MP3 是其中最受歡迎的針對音樂的聲音格式

視頻格式

.avi

AVI (Audio Video Interleave) 格式是由微軟開發的。全部運行Windows的計算機都支持AVI格式

.wmv

Windows Media 格式是由微軟開發的。Windows Media 在因特網上很常見，可是若是未安裝額外組件，就沒法播放 Windows Media 電影

.mpg/.mpeg

MPEG (Moving Pictures Expert Group) 格式是因特網上最流行的格式。它是跨平臺的，獲得了全部最流行的瀏覽器的支持

.mov

QuickTime 格式是由蘋果公司開發的。QuickTime 是因特網上常見的格式，可是QuickTime 電影不能在沒有安裝額組件的Windows計算機上播放

.rm/.ram

RealVideo 格式是由 Real Media 針對因特網開發的。該格式容許低帶寬條件下（在線視頻、網絡電視）的視頻流。因爲是低帶寬優先的，質量常會下降

.swf/.flv

Flash (Shockwave) 格式是由 Macromedia 開發的。Shockwave 格式須要額外的組件來播放

.mp4

Mpeg-4 (with H.264 video compression) 是一種針對因特網的新格式。愈來愈多的視頻發佈者將其做爲 Flash 播放器和 HTML5 的因特網共享格式

多媒體標籤:

HTML5新增了兩個與媒體相關的標籤，讓開發人員沒必要依賴任何插件就能在網頁中嵌入跨瀏覽器的音頻和視頻內容，這兩個標籤是

這兩個標籤支持的類型爲：

視頻 [1]video/ogg [2]video/mp4 [3]video/webm

音頻 [1]audio/ogg [2]audio/mpeg

音頻播放:

在HTML中播放音頻的方法有不少種

【1】<embed>

<embed  height="80" width="300" src="song.mp3" />

【2】<object>

<object height="80" width="300" data="song.mp3"></object>

【3】<audio>

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

【4】<a>

<a href="song.mp3">Play the sound</a>

【5】更好的解決辦法

<audio controls="controls" height="100" width="100">
    <source src="song.mp3" type="audio/mp3" />
    <embed height="100" width="100" src="song.mp3" />
</audio>

視頻播放:

在HTML中播放視頻的方法也有好多種

【1】<embed>

<embed  height="240" width="320" src="movie.mp4" />

【2】<object>

<object height="240" width="320" data="movie.mp4"></object>

【3】<video>

<video controls="controls">
  <source src="movie.mp4" type="video/mp4" />
</video>

【4】<a>

<a href="movie.mp4">Play the video</a>

【5】更好的解決辦法

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.mp4" width="320" height="240" />
  </object>
</video>