整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在 HTML 文檔中 <input type="file"> 標簽每出現一次，一個 FileUpload 對象就會被創建。
該元素包含一個文本輸入字段，用來輸入文件名，還有一個按鈕，用來打開文件選擇對話框以便圖形化選擇文件。
該元素的 value 屬性保存了用戶指定的文件的名稱，但是當包含一個 file-upload 元素的表單被提交的時候，瀏覽器會向服務器發送選中的文件的內容而不僅僅是發送文件名。
當用戶選擇或編輯一個文件名，file-upload 元素觸發 onchange 事件句柄。
看個簡單例子：
[html]view plaincopy
<!--?oscar999??-->??<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??<html>????<head>????<meta?http-equiv="content-type"?content="text/html;?charset=utf-8">????<meta?name="author"?content="oscar999">????<title></title>????<script>????function??handleFiles(files)????{??????if(files.length)??????{?????????var?file?=?files[0];?????????var?reader?=?new?FileReader();?????????reader.onload?=?function()?????????{?????????????document.getElementById("filecontent").innerHTML?=?this.result;?????????};?????????reader.readAsText(file);??????}????}????</script>????</head>????<body>????<input?type="file"?id="file"?onchange="handleFiles(this.files)"/>????<div?id="filecontent"></div>????</body>??</html>??這里讀取一個文件， 顯示在div 中。
(在IE8 中 無效， this.files 無法讀取文件。這個屬于HTML5 的特性)
當選擇了一個文件時，就會把包含這個文件的列表（一個FileList對象）作為參數傳給handleFiles()函數了。這個FileList對象類似一個數組，可以知道文件的數目，而它的元素就是File對象了。從這個File對象可以獲取name、size、lastModifiedDate和type等屬性。把這個File對象傳給FileReader對象的讀取方法，就能讀取文件了。
Html5 支持的File 的操作不僅僅是文件的選擇，
在HTML5 之前需要使用 Applet 和 SilverLight 才能達到的文件拖拽功能，在HTML5 中也能輕松的實現，
看代碼：
[html]view plaincopy
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??<html>????<head>????<meta?http-equiv="content-type"?content="text/html;?charset=utf-8">????<meta?name="author"?content="oscar999">????<title></title>????</head>????<body>??????<div?id="dropbox">?Drop?Here?</div>??????<div?id="filecontent"></div>??????<script>????????var?dropbox?=?document.getElementById("dropbox");??????????dropbox.addEventListener("dragenter",?dragenter,?false);??????????dropbox.addEventListener("dragover",?dragover,?false);??????????dropbox.addEventListener("drop",?drop,?false);?????????function?dragenter(e)?{????????????e.stopPropagation();????????????e.preventDefault();????????}????????function?dragover(e)?{????????????e.stopPropagation();????????????e.preventDefault();????????}??????function?drop(e)?{????????????e.stopPropagation();????????????e.preventDefault();?????????????var?dt?=?e.dataTransfer;????????????var?files?=?dt.files;??????????if(files.length)??????????{?????????????var?file?=?files[0];?????????????var?reader?=?new?FileReader();?????????????reader.onload?=?function()?????????????{?????????????????document.getElementById("filecontent").innerHTML?=?this.result;?????????????};?????????????reader.readAsText(file);??????????}??????}???????</script>????</body>??</html>??這里通過事件對象的 dataTransfer 可以得到文件。
在第一個例子中， 我們使用 FileReader類來讀取文件的內容，
在 W3C 草案中，File 對象只包含文件名，文件類型等只讀屬性;FileReader用于內容讀取和監控讀取狀態。
（在firefox 中， 可以直接使用 var fileBinary = file.getAsBinary(); 讀取文件的二進制源碼）
FileReader提供的方法包括：
1. readAsBinaryString
2. readAsDataURL
3. readAsText
4. abort
.........
以下，舉一個 使用 FileReader 將用戶選擇的圖片不通過后臺即時顯示出來的例子。
[html]view plaincopy
function?handleFiles(files){??????for?(var?i?=?0;?i?<?files.length;?i++)?{??????????var?file?=?files[i];??????????var?imageType?=?/image.*/;??????????if?(!file.type.match(imageType))?{??????????????continue;??????????}??????????var?img?=?document.createElement("img");??????????img.classList.add("obj");??????????img.file?=?file;??????????preview.appendChild(img);??????????var?reader?=?new?FileReader();??????????reader.onload?=?(function(aImg){??????????????return?function(e){??????????????????aImg.src?=?e.target.result;??????????????};??????????})(img);??????????reader.readAsDataURL(file);??????}??}??在一般的HTML 中，使用方式是把file input 放在form 中， 以POST 方式把文件傳遞到后端。
在 HTML5 中， 也可以通過 FileReader 的 readAsBinaryString 方法讀取到文件的二進制碼，然后通過 XMLHttpRequest 的 sendAsBinary 方法將其發送出去。
[javascript]view plaincopy
var?xhr?=?new?XMLHttpRequest();??xhr.open("POST",?"url");??xhr.overrideMimeType('text/plain;?charset=x-user-defined-binary');??<pre?code_snippet_id="422893"?snippet_file_name="blog_20140709_4_2106578"?class="sh_javascript?sh_sourceCode"?name="code">xhr<span?class="sh_symbol">.</span><span?class="sh_function">sendAsBinary</span><span?class="sh_symbol">(</span>binaryString<span?class="sh_symbol">);</span></pre><br> ?、常用的標簽
<h1>~<h6> 表示是一個標題
<p> 段落標簽
<hr/> 水平線標簽
<br/> 換行標簽
<sub> 下標
<sup> 上標
<pre> 原樣標簽： 原樣標簽會保留空格和換行符。
<ol> <li> 有序的列表標簽、
<ul> <li> 無序的列表標簽。
項目列表標簽(dl dt dd)
行內標簽(span)
塊標簽<div> div標簽的內容會獨立占一行。
二、實體標簽
空格
小于號 <
大于號 >
-----------------------------
人民幣 ¥；
版權 ©
商標 ®
三、媒體標簽
<embed></embed>
hidden ： 設置隱藏插件是否隱藏。
src ：用于指定音樂的路徑
<embed src="1.mp3" ></embed>
<marquee> 飄動標簽direction : 指定飄動的方向
scrollamount : 指定飄動的速度。
loop :指定飄動的次數
四、超鏈接標簽
<a> 超鏈接標簽
a標簽常用的屬性：
href : 用于指定鏈接的資源
target: 設置打開新資源的目標。
_Blank 在獨立的窗口上打開新資源
_self 在當前窗口打開新資源
file: file協議（文件協議）這種協議主要是用于搜索本地機器的資源文件的。
格式：
file:///f:/美女/1.jpg
郵件 的協議： mailTo迅雷的協議： thunder
超鏈接標簽的作用：
1. 可以用于鏈接資源。
2. 錨點點位.
1. 首先編寫一個錨點 錨點的格式： <a name="錨點名字"> 數據</a>
2. 使用a標簽 的herf屬性連接到錨點出。 href=”#錨點的名字“
五、圖片標簽
img標簽常用的屬性:
width： 設置圖片寬度
height 設置圖片高度
alt: 如果圖片資源無法找到，那么就顯示對應的文字對圖片進行說明。
六、表格標簽
表格使用到的標簽：
<table> 表格
<tr> 行
<td> 單元格
<th> 表頭 默認的樣式是居中，加粗。
<caption> 表格的標題
表格常用的屬性：
border 設置表格的邊框
width : 設置表格的寬度
height: 設置表格的高度的。
colspan: 設置單元格占據指定的列數。
rowspan : 設置單元格占據指定的行數。
<thead> 標簽用于組合 HTML 表格的表頭內容。
<thead> 元素應該與 <tbody> 和 <tfoot> 元素結合起來使用，用來規定表格的各個部分（表頭、主體、頁腳）。
通過使用這些元素，使瀏覽器有能力支持獨立于表格表頭和表格頁腳的表格主體滾動。當包含多個頁面的長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。
<thead> 標簽必須被用在以下情境中：作為 <table> 元素的子元素，出現在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。
七、表單標簽
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<!-- 表單標簽： 表單標簽的作用是用于提交數據給服務器的表單標簽的根標簽是<form>標簽常用的屬性action: 該屬性是用于指定提交數據的地址。method： 指定表單的提交方式。get : 默認使用的提交方式。 提交的數據會顯示在地址欄上。post ： 提交的數據不會顯示在地址欄上。注意： 表單項的數據如果需要提交到服務器上面，那么表單項必須要有name的屬性值 -->
</head>
<body>
<form action="http://www.baidu.com" method="post"> <!-- 文本輸入框 單 行- -> 用戶名：<input name="userName" type="text"/><br/>
<!-- 密碼框 -->
密碼：<input name="password" type="password"/><br/>
<!-- 單選框 -->
性別： 男<input checked="true" value="man" name="sex" type="radio"/>
女<input name="sex" value="woman" type="radio"/><br/>
< !-- 下拉框 -->
來自的城市：<select name="city">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">廣州</option>
<option value="SZ">深圳</option>
</select><br/>
<!-- 復選框 同一組的復選框name的屬性值要一致 -->
興趣愛好：java <input value="java" name="hobit" checked="checked" type ="checkbox" />
javascript <input type="checkbox" value="javascript" name="hobit" />
android <input value="android" name="hobit" type="checkbox" /><br/> <!-- 文件上傳框-->
大頭照：<input name="image" type="file" /><br/>
個人簡介:
<!-- 文本域 -->
<textarea name="intro" rows="10" cols="30"></textarea><br/>
<!-- 提交按鈕 -->
<input type="submit" value="注冊"/>
<!-- 重置按鈕 -->
<input type="reset" value="重置"/>
</form>
</body>
</html>
更多精彩內容在微信公眾平臺：網頁設計自學平臺
干貨！免費領取Adobe高級講師前端教程
點我領取
覽器支持
所有主流瀏覽器都支持 <a> 標簽。
標簽定義及使用說明
<a> 標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。
<a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。
在所有瀏覽器中，鏈接的默認外觀如下：
未被訪問的鏈接帶有下劃線而且是藍色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動鏈接帶有下劃線而且是紅色的
提示和注釋
提示：如果沒有使用 href 屬性，則不能使用 hreflang、media、rel、target 以及 type 屬性。
提示：通常在當前瀏覽器窗口中顯示被鏈接頁面，除非規定了其他 target。
提示：請使用 CSS 來改變鏈接的樣式。
HTML 4.01 與 HTML5之間的差異
在 HTML 4.01 中，<a> 標簽既可以是超鏈接，也可以是錨。在 HTML5 中，<a> 標簽是超鏈接，但是假如沒有 href 屬性，它僅僅是超鏈接的一個占位符。
HTML5 有一些新的屬性，同時不再支持一些 HTML 4.01 的屬性。
屬性
New ：HTML5 中的新屬性。
| 屬性 | 值 | 描述 |
|---|---|---|
| charset | char_encoding | HTML5 不支持。規定目標 URL 的字符編碼。 |
| coords | coordinates | HTML5 不支持。規定鏈接的坐標。 |
| downloadNew | filename | 指定下載鏈接 |
| href | URL | 規定鏈接的目標 URL。 |
| hreflang | language_code | 規定目標 URL 的基準語言。僅在 href 屬性存在時使用。 |
| mediaNew | media_query | 規定目標 URL 的媒介類型。默認值：all。僅在 href 屬性存在時使用。 |
| name | section_name | HTML5 不支持。規定錨的名稱。 |
| rel | alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag | 規定當前文檔與目標 URL 之間的關系。僅在 href 屬性存在時使用。 |
| rev | text | HTML5 不支持。規定目標 URL 與當前文檔之間的關系。 |
| shape | defaultrectcirclepoly | HTML5 不支持。規定鏈接的形狀。 |
| target | _blank_parent_self_topframename | 規定在何處打開目標 URL。僅在 href 屬性存在時使用。 |
| typeNew | MIME_type | 規定目標 URL 的 MIME 類型。僅在 href 屬性存在時使用。注：MIME = Multipurpose Internet Mail Extensions。 |
全局屬性
<a> 標簽支持 HTML 的全局屬性。
事件屬性
<a> 標簽支持 HTML 的事件屬性。
創建超級鏈接
本例演示如何在 HTML 文檔中創建鏈接。
將圖像作為鏈接
本例演示如何使用圖像作為鏈接。
在新的瀏覽器窗口打開鏈接
本例演示如何在新窗口打開一個頁面，這樣的話訪問者就無需離開您的站點了。
創建電子郵件鏈接
本例演示如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）
創建電子郵件鏈接 2
本例演示更加復雜的郵件鏈接。
使用錨跳轉到同一個頁面的不同位置
本例演示如何使用錨的 id 屬性跳轉到頁面的不同位置（ HTML5 不支持 name 屬性）
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
