文主要講解移動端頁面上能上傳多個本地圖片的例子，在一些發(fā)布說說的頁面上能用得到，有興趣的小伙伴可以一起看看！

效果圖：

html:

css:

css樣式方面就不多說了，自己可以美化自己的布局，重點還是js中的實現(xiàn)代碼：如下

言：萬物之始，大道至簡，演化至繁。水滴不染塵世浮華，方能純凈如冰川靈動如絲絨。落紅不逐春日絢爛，方有一年春盡一年春。

一、html5的介紹

1.1介紹

html號稱超文本標記語言，代表著瀏覽器技術發(fā)展的一個階段。html版本1到版本5的更新迭代都是由組織W3C管理的。當時到html4.1的時候，W3C組織就聲稱不再更新版本了。而改用XHTML。但是由于瀏覽器的各種不兼容的問題，于是乎W3C這個組織就和其他的瀏覽器產商一起聯(lián)合起來將這門語言再次更新到html5

比喻：

html5 >機器人的骨骼

css3 >機器人的外在修飾

js > 機器人的行為如行走、抬腿

Jquery > 封裝好的控制行為的庫，可以提高效率

1.2優(yōu)勢

• 易用性

• 支持視頻和音頻

• 互動性高

• 支持移動設備

• 未來的趨勢

1.3開發(fā)工具

HBuild、WebStrom、sublime Text

二、代碼規(guī)范

2.1代碼規(guī)范

新建一個Web項目

相比html4來說，html5的語法更加簡潔并且在規(guī)定上也更加寬松。

• 單標簽不用寫關閉符號

• 雙標簽省略結束標簽

• html、head、body、colgroup、tbody可以完全省略

• 刪除其中一些，打開瀏覽器的檢查元素功能，也不會報錯

三、各類標簽

3.1文本標簽

• b標簽：表示關鍵字和產品名稱。<b>html</b>其實它的實際作用就是將一段文字加粗。但是并不是特別強調它的重要性。比如說：在一段文字當中出現(xiàn)的某些關鍵字或者產品的名稱就可以用b標簽

• strong標簽：表示比較重要的文字<strong>html</strong>它的作用也是加粗，只是它在強調一段比較重要的文本

• br單標簽：換行

• wbr標簽：安全換行you've no idea how worried <wbr> i was當用戶對網頁進行縮放的時候可能會有一些單詞被擠到下一行。如果不行某個單詞被分離的話，可以使用安全換行標簽

• i標簽：傾斜。em標簽語義一樣，但em表示強調<i>傾斜標簽</i>它用于表示外文詞匯或科技術語

• s標簽：刪除線。del標簽表示強調。<s>html</s>刪除線

• u標簽：給文字加下劃線。ins標簽表示強調<u>html</u>下劃線

• small標簽：添加小號字體<small>放小一號</small>將文本放小一號。通常用于免責聲明和澄清聲明。

• sub和sup標簽：添加上標和下標X₅和Y²（sub和sup長差不多，這個要如何去記憶呢？大家可以看到b的肚子在下面，所以呢它是下標，而p的頭部在上方，所以記錄是上標。那這樣一來是不是就感覺清晰了許多呢）

• q標簽：引用來自其它出處的內容<q>有朋自遠方來</q>

• ruby標簽：語言元素。常用于幫助讀者正確發(fā)音。<ruby>夔<rp>（</rp><rt>kui</rt><rp>）</rp></ruby><rp><rt>用來幫助讀者掌握表意語言文字的正確發(fā)音。比如說漢語拼音在文字的上方。

• bdo標簽：設置文字方向<bdo dir="rtl">設置文字方向</bdo>dbo必須使用屬性dir才可以設置，一共兩個值：rtl從右到左和ltr從左到右。一般默認是ltr。還有一個bdi元素也是處理方向的，由于是特殊語言的效果，并且主流瀏覽器有些不支持，所以可以忽略。

• mark標簽：突出顯示文本<mark>突出顯示文本</mark>加上一個黃色的背景，黑色的字。從語義上來看，與上下文相關而突出的文本，用于記號。

• a標簽：超鏈接a元素屬于文本元素，有一些私有屬性。

  href屬性 <a >百度</a> 這個屬性是必須的，否則a元素就變得毫無意義。它的屬性值意味著點擊跳轉到指定的外部網站去。

  target屬性<a target="_blank">百度</a> 這個屬性告訴瀏覽器希望打開的新窗口顯示在哪里。_blank表示在新窗口中打開文檔。_self表示在當前窗口打開文檔。默認_self。(_parent和_top這些要結合框架來使用，但是基本上用得已經很少了。)

  錨點設置：用于將同一個文檔中的另一個元素移入視野。說通俗一點就是通過點擊這個錨點定位到頁面中的某個位置。

<a href="#1">第一節(jié)</a>

<a href="#2">第二節(jié)</a>

<a href="#3">第三節(jié)</a>

</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

<a name="1">第一節(jié)的內容 我?應該說點啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

&hellip;&hellip;以上省略一萬行&hellip;&hellip;

==========以下全都是分隔符============</br>

<a name="2">第二節(jié)的內容 我?應該說點啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

3.2分組標簽

顧名思義，分組元素就是用來組織相關內容的html元素，對它們進行清晰有效的分類。

• p標簽：表示段落<p>這是一個段落</p> <p>這是一個段落</p>p標簽就是將內部包含的文本形成一個段落。它們可以自動換行，而且段落與段落之間保持一定量的空隙。

• div標簽：通用分組<div>這是一個塊標簽</div> <div>這是另一個塊標簽</div>在早期的版本中經常用到，用div將其他數(shù)據(jù)或標簽包裹起來，進而進行布局。但是在html5中，漸漸被其他元素替代。（它與p標簽的區(qū)別就是兩段文本間沒有空隙。空隙間隔和br標簽換行一樣）

• blockquite標簽：引用大段其他地方的內容<blockquote>引用別人的內容的輔導費打發(fā)打發(fā)可以換行哦他也有首尾縮進的效果</blockquote>有段落空隙的功能，還包含了首尾縮進的功能。

• pre標簽：按照原格式展示數(shù)據(jù)<pre> 我就是 長這樣的 參差不齊 </pre>（有時候某些文字就想要按照原來的格式顯示出來就要用到pre標簽。它就是將數(shù)據(jù)原封不動的顯示出來）

• hr標簽：單標簽。添加一條分割線。

• ul和li標簽：添加無限列表

<ul>

<li>貂蟬</li>

<li>大喬</li>

<li>小喬</li>

<li>孫尚香</li>

</ul>

ul標簽表示無序列表（就像咱們平時說的無符號整形，在前面也是加了一個u），而li標簽則表示內部的列表項

• ol和li：表示有序列表

• start屬性：表示從第幾個序列開始統(tǒng)計。<ol start="2">

• reversed屬性：是否倒序排列。<ol reversed>（不過這個屬性有很多的瀏覽器不支持，所以要謹慎使用）

• type屬性：表示列表的編號的類型 <ol type="A">

• value屬性：這是屬于li的屬性。表示強行設置某個項目的編號。<li value="7">安琪拉</li>

• dl、dt、dd：列表標簽

<dl>

<dt>第一份內容</dt>

<dd>第一行詳細內容</dd>

<dd>第二行詳細內容</dd>

<dl>

雖然說這三個標簽是一個整體，但是dt和dd標簽并非都必須出現(xiàn)

• figure和figcaption標簽：使用插圖的意思。一般用于圖片的布局。

<figure>

<figcaption>這里有一張圖哦</figcaption>

<img src="img.png">

</figure>

3.3表格標簽

表格的用途是以網格的形式顯示二維數(shù)據(jù)。開發(fā)者可以對表格中的元素標簽設置不同的屬性如邊框寬度、顏色等使表格呈現(xiàn)出不同的效果。

3.3.1 標簽

• table：表示表格標簽

• tr：代表某一行

• td：代表一個單元格。

<table border="1" style="width:300px;">

<tr> <!--相當于行-->

<td>王昭君</td> <!--相當于每行中的每一列-->

<td>沉魚落雁</td>

<td>法師</td>

</tr>

<tr> <!--相當于行-->

<td>貂蟬</td> <!--相當于每行中的每一列-->

<td>羞花閉月</td>

<td>刺客</td>

</tr>

</table>

• th：代表標題單元格。代表標題，作用是將內部文字居中且加粗。

<tr>

<th>姓名</th>

<th>特征</th>

<th>職業(yè)</th>

</tr>

• thead：代表表頭。（某些時候，網頁上的表頭是由js動態(tài)生成的。有可能沒按照先后的順序排列，如此一來表頭就有可能顯示到第二行、第三行甚至是表尾。用thead將tr括起來可以讓數(shù)據(jù)永遠顯示在第一行）

<thead>

<tr>

<th>姓名</th>

<th>特征</th>

<th>職業(yè)</th>

</tr>

• tfoot:表示表尾：與表頭相反

• tbody:表示表格的主體部分

• (這里非常建議用分主體、表頭、表尾的方式寫。因為到后期使用CSS樣式的時候只要拿到某個標簽就可以設置總體的樣式了，這樣就會非常方便)

• caption:添加表格的標題

• colgroup:群組。用于設置列的屬性。默認設置第一個（有的時候需要設置單獨列的屬性，如果說我只想設置第二列的屬性，則需要把第一列的設置成白色）

<!--<table border="1" style="width:300px;">-->

<colgroup style="background:white;" span="1"></colgroup> <!--設置第一個顏色為白-->

<colgroup style="background:red;" span="1"></colgroup> <!--設置第二個顏色為紅 span代表一列-->

• col：群組的子標簽。更加靈活的設置列屬性。通過占位符設置不需要的屬性。

<colgroup>

<col> <!--占位，表示第一列不設置-->

<col style="background: pink;">

</colgroup>

3.3.2屬性

• border:表示邊框的寬度 <table border="1"></table>

• style:通用屬性。在css中做詳解。

• colspan：合并列 <td colspan="3">統(tǒng)計</td>這句代碼表示共占三個單元格

• rowspan:合并行

<tr>

<th rowspan="4">學員</th>

<th>姓名</th>

<th>特征</th>

<th>職業(yè)</th>

</tr>

3.3文檔元素

文檔元素的主要作用是劃分各個不同的內容，讓整個布局更加清晰。 進入代替div。讓整個布局元素都具有語義。

• header標簽：表示頁面頭部。通常包括標題或導航等內容。下面內容會換行（在頁面中一般會用樣式將它設置到居中）

• footer標簽:表示頁面的尾部，一般用于版權聲明、友情鏈接等。

• h1-h6標簽：標題標簽，有字體加粗的效果。從1-6字號依次減小

<h1>這里是一個大標題</h1> <h3>這里是一個副標題</h3>

• hgroup:組合標題。hgroup的作用就是當多個標題出現(xiàn)，干擾到一對或多個本身需要整合的標題。

<header>

<hgroup>

<h1>這里是一個大標題</h1>

<h3>這里是一個副標題</h3>

</hgroup>

</header>

<footer>

<h4>這里是尾部的副標題</h4>

這里存放頁面的尾部：如版權聲明，友情鏈接

</footer>

如上面那段代碼，頭部的h4標題就能與h1綁定起來，從而和尾部的h4分離。

• section標簽: 定義一個文檔的主題內容

• nav標簽: 給文檔頁面添加一個導航

• aritcle標簽：添加一個獨立成篇的文檔（像平常看到的論壇，貼吧，評論都有自己的頭、尾和內容等）

<article>

<header>

<nav>&hellip;&hellip;</nav>

</header>

</article>

• aside標簽：生成注釋欄。

<aside>這是一個注釋欄</aside>

• address表示文檔或者是article元素的聯(lián)系信息

• <address>聯(lián)系信息</address>

• 本身有傾斜的效果。如果是在article元素下表示其下的聯(lián)系信息，如果是在body元素下表示整個文檔的聯(lián)系信息

3.4嵌入元素

嵌入元素主要功能是把外部的一些資源插入到html中。

• img標簽：用于顯示圖片

• src：嵌入圖像的url

• alt：（如果圖片能正常顯示則沒有任何效果。若圖片加載不成功會出現(xiàn)備用內容）

• width/height:定義圖片的寬度和高度,單位是像素<img src="img.png" alt="風景圖" width="320" height="400"/>

• ismap:獲取到圖片區(qū)域的像素點加入了ismap屬性之后，點擊圖片在瀏覽器中就會獲得圖片被點擊的地方的像素點。（把文件在目錄中打開，講文件拷貝到谷歌瀏覽器打開就能看見）

<a href="index.html">

<img ismap src="img_5.jpg" alt="風景圖">

</a>

• usemap:創(chuàng)建分區(qū)的響應圖。比如說點擊圖片的某一部分，可以跳轉到某一個網頁。（當點擊了coords這塊區(qū)域時，跳轉到指定的網頁）

<img src="img_5.jpg" usemap="#Map" />

<map name="Map">

<area shape="circle" coords="31,28,112,100" target="_blank" alt="方形">

</map>

• iframe標簽：嵌入另一個文檔。表示在一個頁面內建立一個區(qū)域引入另一個頁面。

<a href="index.html" >index</a>

<a target="in">百度</a>

<iframe src="http://www.baidu.com" width="300" heigth="300" name="in"></iframe>

• progress標簽：用于顯示進度

• 該標簽會產生一個進度條，一般我們會用js代碼來控制其內部的值。(當前值用value來表示，而最大值用max來表示)

<progress value="30" max="100"></progress>

• meter標簽：顯示范圍里的值（類似于進度條,可以規(guī)定最大值和最小值max/min。low值規(guī)定它的值過低，high表示值過高。而optimun表示最佳值，但是這個屬性是呈現(xiàn)不出效果的）

<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>

3.5音頻和視頻標簽

音頻和視頻文件其實都只是一個容器文件。視頻文件包含了音頻軌道、視頻軌道和其他一些元數(shù)據(jù)。視頻播放時，音頻軌道和視頻軌道是綁定在一起的。元數(shù)據(jù)包含了視頻的封面、標題字幕等信息。在網頁實現(xiàn)中，有很多的瀏覽器廠商都有自己的標準，所以html5規(guī)范也沒有強制指定編解碼器了。所以在網頁上嵌入視頻和音頻時，最好提供mp4格式和webM格式的視頻。否則有可能由于瀏覽器不兼容的問題導致視頻不能播放。

• video標簽: 視頻標簽屬性：

• src:視頻資源的url

• width：視頻寬度

• height:視頻高度

• <video src="test.mp4" width="320" height="400"></video>

• controls:設置后顯示播放控件（未設置這個屬性時，視頻就像一張圖片，設置controls之后才能顯示視頻播放控件）

• <video src="test.mp4" width="320" height="400" controls></video>

• autoplay:表示立即播放視頻

• loop:反復播放視頻（也就是說在播放結束之后會重新播放視頻）

• muted:設置之后，視頻會處于靜音狀態(tài)

• poster:指定視頻數(shù)據(jù)載入時顯示的圖片。（相當于視頻的一個封面）

<video src="test.mp4" width="320" height="400" controls

poster="img_5.jpg"></video>

• preload:預加載。不設置會在第一次播放自動緩存。如果值為none會直到用戶點擊時再加載視頻。如果值為metadata表示播放之前只加載第一幀。auto是默認的，表示要求瀏覽器盡快的加載視頻。

• 兼容多個瀏覽器 source標簽

<video src="test.mp4" width="320" height="400" controls poster="img_5.jpg">

<source src="test.webm"/>

<source src="test.mp4"/>

</video>

• audio標簽：用于嵌套音頻內容。屬性與視頻元素類似。只是沒有寬高設置和圖片。

• <audio src="test.mp3" controls></audio>

3.6表單標簽

表單標簽是用于獲取用戶的輸入數(shù)據(jù)的。

• form標簽：表示定義html表單。用該標簽包含的標簽具有提交功能。也就是說，在瀏覽器的地址欄里面能獲取到用戶的信息。(如果不定義表單，那么它是無法提交數(shù)據(jù)的)

<form>

用戶名：<input name="user">

<button>提交</button>

</form>

屬性

• action:表示表單提交到的頁面(也就是要把數(shù)據(jù)傳入到哪個頁面中)

• method:表示表單的提交方式。默認是get。而get和post請求的區(qū)別就是post后面不跟請求體。也就是用戶信息。相對來說更加的安全。（一般來說，get是用于超鏈接提交居多，post用作表單提交居多）

• <form method="post" action="http://www.haosou.com"></from>

• enctype:表示瀏覽器對發(fā)送給服務器的數(shù)據(jù)采用的編碼格式。有三種格式。默認是不能將文件上傳到服務器&rdquo;application/x-www-form-urlencoded&ldquo;、multipart/form-data用于將文件上傳到服務器、text/plain不建議使用

• name:設置表單名稱，以便程序調用

• target:提交的目標，與超鏈接無異

• autocomplete:設置瀏覽器記錄用戶輸入的信息。分為on和off兩個值。默認為on。

• novalidate：設置是否執(zhí)行客戶端數(shù)據(jù)有效性檢查

• input標簽：表示用來收集用戶輸入數(shù)據(jù)的控件。它默認會出現(xiàn)一個單行的文本框。

• type:文本框的類型。值為text時表示單行文本框；值為password表示密碼框；值為search時，除了火狐瀏覽器的其他瀏覽器外，會顯示一個叉來取消搜索內容，值為number時，表示只限于數(shù)字輸入；值為range時，生成一個數(shù)值范圍文本框；當type為date系列時，可以獲取日期和時間的值，有六種形態(tài)date、month、time、week、datetime、datetime-local；當值為color代表可以獲取不同的顏色；當值為checkbox、radio時表示復選框和單選。單選的name值必須一樣。checked表示默認勾選狀態(tài)值為img是表示產生一張圖片按鈕，后面可以接src,alt,width等熟悉值為email,tel,url時表示輸入電子郵件、電話和網址格式值為hidden時，生成一個隱藏控件（看不見，但提交的時候會顯示，一般用于關聯(lián)主鍵id提交）值為file的時候，表示上傳文件。accept屬性表示限制文件<input type="text">

音樂<input type="checkbox" checked>

體育<input type="checkbox">

<input type="radio" name="sex" value="男" checked>男

<input type="radio" name="sex" value="女">女

<input type="hidden" value="1" name="id">

<input type="file" accept="image/gif">

• maxlength:設置文本框最大字符長度

• readonly:設置文本框為只讀狀態(tài)。可以提交但是不能修改文本框的值。

• placeholder:占位符

• size:設置文本框的寬度

• required:表明用戶必須輸入一個值，否則無法通過輸入驗證

• <input type="text" list="abc" required>

• autofocus:讓光標聚焦在某個input元素上，方便用戶直接輸入。<input name="user" autofocus>

• disabled:禁止input元素 （連點擊都不能）

• list：為文本框提供建議值

<form>

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

<button>提交</button>

</form>

<datalist id="abc">

<option value="1">湖南</option>

<option value="2">海南</option>

</datalist>

• value:默認在輸入框內出現(xiàn)的值

• form：與表單外的數(shù)據(jù)掛鉤一遍提交

<form id="register" name="reg" action="index.html">

用戶名：<input name="user">

<button>提交</button>

</form>

年齡：<input name="age" form="register">

• label標簽:把文字和input標簽包裹起來可以方便設置樣式，并且當用戶點擊文字的時候，光標會自動移入到對應的input框。（如果只是設置了文字用label包裹，又想點擊文字將標簽自動移入對應的框，可以將label的屬性for的值設置成與input的id設置成一樣）

<label for="user"> 用戶名：</label>

<input id="user" name="user">

• fieldset標簽:對表單進行編組。三個屬性name、form、disabled

• legend標簽：添加分組說明的標簽（也就是說給分組加上一個標題）

<fieldset>

<legend>注冊分組</legend>

<label for="user"> 用戶名：</label>

<input id="user" name="user">

<button>提交</button>

</fieldset>

• button標簽:創(chuàng)建一個按鈕。type屬性有三個值，submit表示提交，reset表示重置，也就是把input的值變成初始值。button表示一個普通的按鈕。

• select標簽：下拉列表。需要和option標簽配合使用。

• name屬性：設定提交時的名稱

• disabled屬性：將下拉列表禁用

• form屬性：將表單外部與內部掛鉤

• size屬性：下拉列表的個數(shù)

• multiple屬性：設置是否可以多選

• required:選擇驗證，必須選擇后才能通過

<select name="fruit" size="5" multiple >

<!--value值是真正要提交上去的值，而后面的是顯示到頁面的值-->

<option value="1">花花菇涼</option>

<option value="2">文小喵</option>

</select>

optgroup標簽:對列表進行分組選擇。

<form action="http://www.baidu.com">

<select name="fruit" multiple size="5">

<optgroup label="表情包">

<option value="1">花花菇涼</option>

<option value="2">文小喵</option>

</optgroup>

<optgroup label="書">

<option value="4" selected>微微一笑很傾城</option>

<option value="5">神雕俠侶</option>

</optgroup>

</select>

<button>提交</button>

</form>

• textarea標簽:生成一個可變大小的多行文本框

<!--wrap表示是否插入換行符 有soft和hard兩種。hard提交之后在地址欄可以看見%插入的隱藏換行符-->

<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>

• pattern：正則表達式。開頭和結尾用^和$ novalidate屬性表示不要驗證該表單

<input type="text" placeholder="請輸入區(qū)號和座機" pattern="^[\d]{2,4}\-[\d]{6,8}$">

html對網頁頁面的布局或者是表單驗證等功能都相對簡陋，并且不同的瀏覽器支持的成熟度是不盡相同的。因此在大部分情況下，還是要借助js或jqury等前端庫，來呈現(xiàn)豐富多彩的驗證效果。