html5 基礎入門

本文轉載自查看原文 2019-04-14 21:33 517 前端開發教程參考/ html5基礎/ html基礎/ html5入門

html5 基礎入門

html5 基礎入門

前言介紹

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

如果從狹義的角度來講，HTML5就是HTML4的新一代產品。

而如果從廣義的角度來講，則是新一代的富客戶端解決方案。

What is Rich Client[富客戶端]?

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

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`也進行了改進，性能得到進一步提升。

目前在開發的領域，大家說的H5開發其實指的是HTML5 + CSS3 + JavaScript等技術。

在目前的軟件開發生態鏈中，H5的技術充斥着很多的領域。無論是網站開發、移動端開發、軟件開發、游戲等等。

HTML5 兼容性

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

需要注意的是，雖然很多瀏覽器目前已經能夠支持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、.mp3、.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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5(七)——SVG基礎入門 HTML5基礎入門一天學完 HTML5基礎 HTML5基礎實例（三） HTML5 基礎 HTML5學習筆記<八>: 1. CSS3基礎之入門基礎知識一文入門HTML5 HTML5簡單入門系列（三） HTML5入門教程一 HTML5簡單入門系列（一）