我是如何初識HTML，入前端的

人在51RGB網學習HTML+CSS基礎課程，記錄一些文字，方便自己回憶，也希望對大家有所幫助

基礎框架

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>標題標簽</title>
</head>
<body>
<h1>了不起的蓋茨比</h1>
<p>《了不起的蓋茨比》為那個奢靡年代的縮影。蓋茨比懷揣著對"美國夢"的期翼，投身到那個年代的燈紅酒綠之中，卻在名利場中看盡世態炎涼，以及浮華背后一切終將逝去的空虛悵惘。1925年《了不起的蓋茨比》問世。
</p>
</body>
</html>

了解HTML的代碼注釋

什么是代碼注釋？代碼注釋的作用是幫助程序員標注代碼的用途，過一段時間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發網頁代碼。

語法：

認識標簽<head>

文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。

<head> <title>...</title> <meta> <link> <style>...</style> <script>...</script></head>

<title>標簽

在<title>和<title>標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。網頁的title標簽用于告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。

例如：

<head> <title>helloworld</title></head>

<title>標簽的內容“hello world”會在瀏覽器中的標題欄上顯示出來，如下圖所示

<body>標簽，網頁上顯示的內容放在這里

在網頁上要展示出來的頁面內容一定要放在body標簽中。如下圖是一個新聞文章的網頁。

開始學習<p>標簽，添加段落

如果想在網頁上顯示文章，這時就需要<p>標簽了，把文章的段落放到<p>標簽中。

語法：<p>段落文本</p>

注意一段文字一個<p>標簽，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個<p>標簽中。如下圖所示。

了解<hx(1-6)>標簽，為你的網頁添加標題

文章的段落用<p>標簽，那么文章的標題用什么標簽呢？在本節我們將使用<hx>標簽來制作文章的標題。標題標簽一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據重要性遞減。<h1>是最高的等級。

語法：<hx>標題文本</hx> x:1-6

注意：因為h1標簽在網頁中比較重要，所以一般h1標簽被用在網站名稱上。騰訊網站就是這樣做的。如：<h1>騰訊網</h1>

h1-h6標簽的默認樣式：

標簽代碼：

在瀏覽器中顯示的樣式：

加入強調語氣，使用<strong>和<em>標簽

有了段落又有了標題，現在如果想在一段話中特別強調某幾個文字，這時候就可以用到<em>或<strong>標簽但兩者在強調的語氣上有區別:

<em>表示強調，在瀏覽器中<em>默認用斜體表示
<strong>表示更強烈的強調，在瀏覽器中<strong>用粗體表示。
兩個標簽相比，目前國內前端程序員更喜歡使用<strong>表示強調。

在瀏覽器中默認樣式是有區別的：

瀏覽器中的樣子，如下圖。

語法：

<em>需要強調的文本</em>

<strong>需要強調的文本</strong>

栗子：

在網上商城中，某產品的打折后的價格是需要強調的。如下圖。

代碼實現:

使用<span>標簽為文字設置單獨樣式

語法：<span>文本</span>

我們對<em>、<strong>、<span>這三個標簽進行一下總結：

<em>和<strong>標簽是為了強調一段話中的關鍵字時使用，它們的語義是強調。
<span>標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。

如果現在我們想把上一小節的第一段話“美國夢”三個字設置成blue（藍色），但注意不是為了強調“美國夢”，而只是想為它設置和其它文字不同的樣式（并不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到<span>標簽了。如下面例子：

<p>1922年的春天，一個想要成名名叫<em>尼克?卡拉威</em>（托比?馬奎爾TobeyMaguire飾）的作家， 離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，<strong>股票</strong>飛漲的時代。 為了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。</p>

我們如果想設置“美國夢”三個字設置成blue（藍色），只需要在<style>標簽中加入：

span{color:blue; }

css部分，以后會聊，你能大概明白span就是能干單獨設置樣式的活，就ok了

<q>標簽，短文本引用

想在你的html中加一段引用嗎？比如在你的網頁的文章里想引用某個作家的一句詩，這樣會使你的文章更加出彩，那么<q>標簽是你所需要的。

語法：<q>引用文本</q>

<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑

</q>開始的。雖然當時不知道是什么意思，只是覺得詩句挺特別。

后來才明白這個典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的舍棄。

</p>

講解:

在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》。因為不是作者自己的文字，所以需要使用實現引用。
注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。

下圖是代碼顯示結果：

注意這里用標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。

<blockquote>標簽，長文本引用

<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標簽。

等等，上一節<q>標簽不是也是對文本的引用嗎？不要忘記<q>標簽是對簡短文本的引用，比如說引用一句話就用到<q>標簽。

如想在我的文章中引用李白《關山月》中的詩句，因為引用文本比較長，所以使用

<blockquote>。

語法：<blockquote>引用文本</blockquote>

如下面例子：

<blockquote> 明月出天山，蒼茫云海間。長風幾萬里，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閑。 </blockquote>

瀏覽器對<blockquote>標簽的解析是縮進樣式。如下圖所示：

使用<br>標簽分行顯示文本

例子，我們想讓一首詩顯示得更美觀些，如顯示下面效果：

怎么可以讓每一句詩詞后面加入一個折行呢？那就可以用到<br />標簽了，在需要加回車換行的地方加入<br />，<br />標簽作用相當于word文檔中的回車。

代碼改為：

<h2>《詠桂》</h2> <p>暗淡輕黃體性柔，<br/>情疏跡遠只香留。<br/>何須淺碧深紅色，<br/>自是花中第一流。

詩文在瀏覽器中顯示為：

為你的網頁中添加一些空格

在html代碼中輸入空格、回車都是沒有作用的。要想輸入空格，必須寫入。不要忘了那個分號

在html代碼中輸入空格是不起作用的，如下代碼。

在瀏覽中顯示，還是沒有空格效果。

輸入空格的正確方法：

在瀏覽器中的顯示出來的空格效果。如下圖所示。

認識<hr>標簽，添加水平橫線

在信息展示時，有時會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。如下圖所示：

語法：

html4.01版本<hr>
xhtml1.0版本<hr />注意：
<hr />標簽和<br />標簽一樣也是一個空標簽，所以只有一個開始標簽，沒有結束標簽。
<hr />標簽的在瀏覽器中的默認樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關系，這些外在樣式在我們以后學習了css樣式表之后，都可以對其修改。
大家注意，現在一般使用 xhtml1.0 的版本（其它標簽也是），這種版本比較規范。

<address>標簽，為網頁加入地址信息

一般網頁中會有一些網站的聯系地址信息需要在網頁中展示出來，這些聯系地址信息如公司的地址就可以<address>標簽。也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份。栗子：

<address>本文的作者：<ahref="mailto:zhaoliangsyn@163.com">zhaolion</a></address>

想加入一行代碼嗎？使用<code>標簽

在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的編程代碼，當代碼為一行代碼時，你就可以使用<code>標簽了，如下面例子：

注意：在文章中一般如果要插入多行代碼時不能使用<code>標簽了。如果是多行代碼，可以使用<pre>標簽。

使用<pre>標簽為你的網頁加入大段代碼

在上節中介紹加入一行代碼的標簽為<code>，但是在大多數情況下是需要加入大段代碼的，如下圖：

怎么辦？不會是每一代碼都加入一個<code>標簽吧，沒有這么復雜，這時候就可以使用<pre>標簽。

語法：<pre>語言代碼段</pre>

<pre>標簽的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。如下代碼：

<pre> varmessage="歡迎"; for(vari=1;i<=10;i++) { alert(message); } </pre>

在瀏覽器中的顯示結果為：

在上面的例子中可以看到代碼中的空格，換行符都保留下來。如果用以前的方法，回車需要輸入<br>簽，空格需要輸入

注意：<pre>標簽不只是為顯示計算機的源代碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標簽的一個常見應用就是用來展示計算機的源代碼。

使用<ul>，添加新聞信息列表

在瀏覽網頁時，你會發現網頁上有很多信息的列表，如新聞列表、圖片列表，如下圖所示。

這些列表就可以使用ul-li標簽來完成。ul-li是沒有前后順序的信息列表。

語法：

<ul> <li>信息</li> <li>信息</li> ......</ul>

舉例：

<ul> <li>精彩少年</li> <li>美麗突然出現</li> <li>觸動心靈的旋律</li></ul>

ul-li在網頁中顯示的默認樣式一般為：每項li前都自帶一個圓點，如下圖所示：

使用<ol>，添加順序列表

如果想在網頁中展示有前后順序的信息列表，怎么辦呢？如，當當網上的書籍熱賣排行榜，如下圖所示。這類信息展示就可以使用<ol>標簽來制作有序列表來展示。

語法：

<ol> <li>信息</li> <li>信息</li> ......</ol>

舉例：

下面是一個熱點課程下載排行榜：

<ol> <li>前端開發面試心法</li> <li>零基礎學習html</li> <li>JavaScript全攻略</li></ol>

<ol>在網頁中顯示的默認樣式一般為：每項<li>前都自帶一個序號，序號默認從1開始，如下圖所示：

初識div

認識div在排版中的作用

在網頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標簽中，這個<div>標簽的作用就相當于一個容器。

語法：<div>…</div>

確定邏輯部分：

什么是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標簽作為容器。

給div命名，使邏輯更加清晰

在上一小節中，我們把一些標簽放進<div>里，劃分出一個獨立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設置一個名稱，用id屬性來為<div>提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。

如下兩圖進行比較，如果設計師把兩個圖給你，哪個圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。

語法：<div id="版塊名稱">…</div>

table標簽，認識網頁上的表格

table標簽＝我們平時看到到表格

有時候我們需要在網頁上展示一些數據，如某公司想在網頁上展示公司的庫存清單。如下表：

想在網頁上展示上述表格效果可以使用以下代碼：

創建表格的四個元素：table、tbody、tr、th、td

<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內容全部下載完才會顯示。
<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
<th>…</th>：表格的頭部的一個單元格，表格表頭。
表格中列的個數，取決于一行中數據單元格的個數。

上述代碼在瀏覽器中顯示的默認的樣式為：

總結：

table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
表頭，也就是th標簽中的文本默認為粗體并且居中顯示

用css樣式，為表格加入邊框

Table 表格在沒有添加 css 樣式之前，是沒有邊框的。這樣不便于我們后期合并單元格知識點的講解，所以在這一節中我們為表格添加一些樣式，為它添加邊框。代碼中加入：

<styletype="text/css">tabletrtd,th{border:1pxsolid#000;}</style>

上述代碼是用 css 樣式代碼，為th，td單元格添加粗細為一個像素的黑色邊框。

結果窗口顯示出結果樣式：

caption標簽，為表格添加標題和摘要

表格還是需要添加一些標簽進行優化，可以添加標題和摘要。代碼如下

摘要摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。

語法：<table summary="表格簡介文本">

標題用以描述表格內容，標題的顯示位置：表格上方。語法：

<table> <caption>標題文本</caption> <tr> <td>…</td> <td>…</td> …</tr>…</table>

初識<a>標簽

使用<a>標簽，鏈接到另一個頁面

使用<a>標簽可實現超鏈接，它在網頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個標簽。

語法：<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>

例如：<a title="點擊進入我的博客">click here!</a>

上面例子作用是單擊click here!文字，網頁鏈接到http://www.zhaolion.com這個網頁。

title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜索引擎了解鏈接地址的內容（語義化更友好)

提醒

還有一個有趣的現象不知道小伙伴們發現了沒有，只要為文本加入a標簽后，文字的顏色就會自動變為藍色（被點擊過的文本顏色為紫色），顏色很難看吧，不過沒有關系后面我們學習了css樣子就可以設置過來（a{color:#000}),后面會詳細講解。

在新建瀏覽器窗口中打開鏈接

<a>標簽在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。只需要添加一個屬性target="_blank"

如下代碼：

<a href="目標網址" target="_blank">click here!</a>

使用mailto在網頁中鏈接Email地址

<a>標簽還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進行講解，請看詳細圖示：

提醒:如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“&”分隔。

下面是一個完整的實例: 在瀏覽器中顯示的一個發送按鈕

點擊鏈接會打開電子郵件應用，并自動填寫收件人等設置好的信息，如下圖：

認識<img>標簽，為網頁插入圖片

在網頁的制作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標簽來插入圖片。語法：[站外圖片上傳中……(48)]

舉例：<img src = "myimage.gif" alt = "My Image" title = "My Image" />

講解：

src：標識圖像的位置；
alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
圖像可以是GIF，PNG，JPEG格式的圖像文件。

認識表單

使用表單標簽，與用戶交互

網站怎樣與用戶進行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。

語法：<form method="傳送方式" action="服務器文件">

講解：

<form>：<form>標簽是成對出現的，以<form>開始，以</form>結束。
action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。

method ：數據傳送的方式（get/post）。

<formmethod="post"action="save.php"> <labelfor="username">用戶名:</label> <inputtype="text"name="username"/> <labelfor="pass">密碼:</label> <inputtype="password"name="pass"/> </form>

注意

所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在<form></form>標簽之間（否則用戶輸入的信息可提交不到服務器上哦！）。
method:post/get的區別這一部分內容屬于后端程序員考慮的問題。感興趣的小伙伴可以問谷哥

文本輸入框、密碼輸入框

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。

語法：

<form> <inputtype="text/password"name="名稱"value="文本"/></form>

type：

當type="text"時，輸入框為文本輸入框;
當type="password"時, 輸入框為密碼輸入框。

name：為文本框命名，以備后臺程序ASP 、PHP使用。

value：為文本輸入框設置默認值。(一般起到提示作用)

舉例：

<form> 姓名：<inputtype="text"name="myName"> <br/> 密碼：<inputtype="password"name="pass"></form>

在瀏覽器中顯示的結果：

文本域，支持多行文本輸入

當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。

語法：<textarea rows="行數" cols="列數">文本</textarea>

<textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。
cols ：多行輸入域的列數。
rows ：多行輸入域的行數。
在<textarea></textarea>標簽之間可以輸入默認值。

舉例：

<formmethod="post"action="save.php"> <label>聯系我們</label> <textareacols="50"rows="10">在這里輸入內容...</textarea></form>

在瀏覽器中顯示結果：

使用單選框、復選框，讓用戶選擇

在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。請看下面的例子:語法：<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>

type:

當 type="radio" 時，控件為單選框
當 type="checkbox" 時，控件為復選框

value：提交數據到服務器的值（后臺程序PHP使用）

name：為控件命名，以備后臺程序 ASP、PHP 使用

checked：當設置 checked="checked" 時，該選項被默認選中

如下面代碼：

在瀏覽器中顯示的結果：

注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。

使用下拉列表框，節省空間

下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下代碼：

講解：

value：

selected="selected"：設置selected="selected"屬性，則該選項就被默認選中。

使用下拉列表框進行多選

下拉列表也可以進行多選操作，在<select>標簽中設置multiple="multiple"屬性，就可以實現多選功能，在 widows 操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。如下代碼：

在瀏覽器中顯示的結果：

使用提交按鈕，提交數據

在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單信息到服務器時，需要用到提交按鈕。語法：<input type="submit" value="提交">

type：只有當type值設置為submit時，按鈕才有提交作用
value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：

使用重置按鈕，重置表單信息

當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”后，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置為"reset"就可以。語法：<input type="reset" value="重置">

type：只有當type值設置為reset時，按鈕才有重置作用
value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：

輸入賬號

單擊重置按鈕

form表單中的label標簽

小伙伴們，你們在前面學習表單各種控件的時候，有沒有發現一個標簽--label，這一小節就來揭曉它的作用。

label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。

語法：<label for="控件id名稱">

注意標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。這樣你會在點慢跑標簽，即使沒有點checkbox 也能選中

例子：

<form> <a>你對什么運動感興趣：</a><br/> <labelfor="1">慢跑</label><inputtype="checkbox"name="manpao"id="1"><br/> <labelfor="2">登山</label><inputtype="checkbox"name="dengshan"id="2"><br/> <labelfor="3">籃球</label><inputtype="checkbox"name="lanqiu"id="3"><br/></form>

限時!！免費送Dreamweaver、js等前端教程

在前面

今年國慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費，睡覺、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風，趕緊起來把文章寫完。

這篇文章比較基礎，在國慶期間的業余時間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關于文件上傳的各種場景和應用都涵蓋了,若有疏漏和問題還請留言斧正和補充。

自測讀不讀

以下是本文所涉及到的知識點，break or continue ?

文件上傳原理
最原始的文件上傳
使用 koa2 作為服務端寫一個文件上傳接口
單文件上傳和上傳進度
多文件上傳和上傳進度
拖拽上傳
剪貼板上傳
大文件上傳之分片上傳
大文件上傳之斷點續傳
node 端文件上傳

原理概述

原理很簡單，就是根據 http 協議的規范和定義，完成請求消息體的封裝和消息體的解析，然后將二進制內容保存到文件。

我們都知道如果要上傳一個文件，需要把 form 標簽的enctype設置為multipart/form-data,同時method必須為post方法。

那么multipart/form-data表示什么呢？

multipart互聯網上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。

multipart/form-data 結構

看下 http 請求的消息體

請求頭：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請求要上傳文件，其中boundary表示分隔符，如果要上傳多個表單項，就要使用boundary分割，每個表單項由———XXX開始，以———XXX結尾。

消息體- Form Data 部分

每一個表單項又由Content-Type和Content-Disposition組成。

Content-Disposition: form-data 為固定值，表示一個表單元素，name 表示表單元素的名稱，回車換行后面就是name的值，如果是上傳文件就是文件的二進制內容。

Content-Type：表示當前的內容的 MIME 類型，是圖片還是文本還是二進制數據。

解析

客戶端發送請求到服務器后，服務器會收到請求的消息體，然后對消息體進行解析，解析出哪是普通表單哪些是附件。

可能大家馬上能想到通過正則或者字符串處理分割出內容，不過這樣是行不通的，二進制buffer轉化為string,對字符串進行截取后，其索引和字符串是不一致的，所以結果就不會正確，除非上傳的就是字符串。

不過一般情況下不需要自行解析，目前已經有很成熟的三方庫可以使用。

至于如何解析，這個也會占用很大篇幅，后面的文章在詳細說。

最原始的文件上傳

使用 form 表單上傳文件

在 ie時代，如果實現一個無刷新的文件上傳那可是費老勁了，大部分都是用 iframe 來實現局部刷新或者使用 flash 插件來搞定，在那個時代 ie 就是最好用的瀏覽器（別無選擇）。

DEMO

這種方式上傳文件，不需要 js ，而且沒有兼容問題，所有瀏覽器都支持，就是體驗很差，導致頁面刷新，頁面其他數據丟失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        選擇文件:
            <input type="file" name="f1"/> input 必須設置 name 屬性，否則數據無法發送<br/>
<br/>
            標題：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 傳</button>

</form>

復制代碼

文件上傳接口

服務端文件的保存基于現有的庫koa-body結合 koa2實現服務端文件的保存和數據的返回。

在項目開發中，文件上傳本身和業務無關，代碼基本上都可通用。

在這里我們使用koa-body庫來實現解析和文件的保存。

koa-body 會自動保存文件到系統臨時目錄下，也可以指定保存的文件路徑。

然后在后續中間件內得到已保存的文件的信息，再做二次處理。

ctx.request.files.f1 得到文件信息，f1為input file 標簽的 name
獲得文件的擴展名，重命名文件

NODE

/**
 * 服務入口
 */
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存庫
var fs = require('fs');
var Koa = require('koa2');

var app = new Koa();
var port = process.env.PORT || '8100';

var uploadHost= `http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //設置文件的默認保存目錄，不設置則保存在系統臨時目錄下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 開啟文件上傳，默認是關閉
}));

//開啟靜態文件訪問
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次處理，修改名稱
app.use((ctx) => {
    var file = ctx.request.files.f1;//得道文件對象
    var path = file.path;
    var fname = file.name;//原文件名稱
    var nextPath = path+fname;
    if(file.size>0 && path){
        //得到擴展名
        var extArr = fname.split('.');
        var ext = extArr[extArr.length-1];
        var nextPath = path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式輸出上傳文件地址
    ctx.body = `{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
復制代碼

CODE

https://github.com/Bigerfe/fe-learn-code/

1-HTML基礎

第1章基礎語法

html是超文本標記語言
<head>,<title>標簽里的內容不會在網頁文檔中顯示
<hr/>標簽是水平線，不需要成對出現
注釋代碼：

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
</head>
<body bgcolor="grey">
	<p>HELLO,everyone.This is my first page!</p>
</body>
</html>

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

第2章文章段落

2.1 文檔聲明和META標簽

<html>,<body>,<head>標簽是html文檔結構標簽，<!DOCTYPE HTML>不屬于html標簽，它用于定義文檔類型

網頁中不能正常顯示中文，出現亂碼現象，使用meta標簽設置編碼格式：<meta charset="utf-8">

<!DOCTYPE html>
<html>
<head>
	<title>第一個網頁</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	大家好，一起來學習html標記語言
</body>
</html>

3.如果想在html頁面中顯示空格，使用

標題標簽：<h1></h1>~<h6></h6>

段落標簽：<p></p>

align對齊屬性值：

left:左對齊內容

right:右對齊內容

center:居中對齊內容

justify:對行進行延申，這樣每行都可以有相等的長度

換行標簽<br/>

5.一個<p></p>標簽代表一個段落，兩個<p>標簽中的文本內容不在同一行，在<p>標簽中，使用<br/>文本內容的位置只是換行，其實還是一個段落

6.<pre></pre>標簽用于預定義格式顯示文本，即文本在瀏覽器中顯示時遵循在HTML原文檔中定義的格式

<!DOCTYPE html>
<html>
<head>
	<title>練習1</title>
	<meta http-equiv="Content-Type" content="text/http;charset=utf-8"/>
</head>
<body>
	<h3 align="center">《早發白帝城》</h3>
	<p align="center">朝辭白帝彩云間，千里江陵一日還。</p>
	<p align="center">兩岸猿聲啼不住，輕舟已過萬重山。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>練習2</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<h1>敕勒歌</h1>
	<h2>朝代：南北朝</h2>
	<h3>作者：佚名</h3>
	<p>  敕勒川，<br/>
	     陰山下，<br/>
	     天似穹廬，<br/>
	</p>
	<pre>
  籠蓋四野，
   天蒼蒼，
   野茫茫，
風吹草低見牛羊。
	</pre>
</body>
</html>

2.2 文字和段落標簽

文字斜體：<i></i>和<em></em>
加粗：<b></b>和<strong></strong>
下標：<sub></sub>
上標：<sup></sup>

特殊符號

任務

<!DOCTYPE html>
<html>
<head>
	<title>任務</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p align="center">關于我們  |  招聘信息  |  聯系我們  |  意見反饋</p>
	<hr/>
	<p align="center">Copyright ? 2016 imooc.com All Rights Reserved</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>任務</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>公式:x<sup>2</sup>+x=0 解:x<sub>1</sub>=0;x<sub>2</sub>=-1</p>
</body>
</html>

第3章列表標簽

3.1 列表標簽-無序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ul type="disc">
		<li>朝辭白帝彩云間，</li>
		<li>千里江陵一日還，</li>
		<li>兩岸猿聲啼不住，</li>
		<li>輕舟已過萬重山，</li>
	</ul>
	<ul type="square">
		<li>朝辭白帝彩云間，</li>
		<li>千里江陵一日還，</li>
		<li>兩岸猿聲啼不住，</li>
		<li>輕舟已過萬重山，</li>
	</ul>
</body>
</html>

3.2 列表標簽-有序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ol type="a">
		<li>朝辭白帝彩云間，</li>
		<li>千里江陵一日還，</li>
		<li>兩岸猿聲啼不住，</li>
		<li>輕舟已過萬重山，</li>
	</ol>
	<ol type="i">
		<li>朝辭白帝彩云間，</li>
		<li>千里江陵一日還，</li>
		<li>兩岸猿聲啼不住，</li>
		<li>輕舟已過萬重山，</li>
	</ol>
</body>
</html>

3.3 列表標簽-定義列表

<dt><dd>是同級標簽

第四章圖像和超鏈接

4.1 圖像

圖像標簽

絕對路徑：

相對路徑：

效果圖

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>一幅圖像:<img src="http://climg.mukewang.com/58c112ed0001370f03000300.jpg" width="30%"></p>
	<p>一幅動畫圖像:<img src="http://climg.mukewang.com/58c11324000144f703550220.jpg" height="50px" width="50px"></p>
</body>
</html>

4.2 超鏈接

超鏈接標簽

空鏈接：<a href="#"> </a>

4.3 錨鏈接

定義錨（同一頁面）

任務：

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p><a name="dingbu">這里是頂部</p>
	<p><a href="#shuiguo">水果</p>
	<p><a href="#shucai">蔬菜</p>
	<p><a href="#yundong">運動</a></p>
	<h3><a name="shuiguo">水果</a></h3>
	<ul>
		<li>香蕉</li>
		<li>蘋果</li>
		<li>葡萄</li>
		<li>梨</li>
		<li>西瓜</li>
		<li>櫻桃</li>
		<li>菠蘿</li>
		<li>橙子</li>
		<li>柚子</li>
		<li>芒果</li>
	</ul>
	<p><a href="#dingbu">返回頂部</a></p>
	<h3><a name="shucai">蔬菜</a></h3>
	<ul>
		<li>西紅柿</li>
		<li>黃瓜</li>
		<li>土豆</li>
		<li>芹菜</li>
		<li>蒜苔</li>
		<li>西葫蘆</li>
		<li>香菇</li>
		<li>菠菜</li>
		<li>豆角</li>
		<li>油菜</li>
	</ul>
	<a name="yundong"></a>
	<p><a href="#dingbu">返回頂部</a></p>
</body>
</html>

定義錨（不同頁面）

4.3 鏈接擴展功能

1. 電子郵件鏈接

2.文件下載

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<a href="mailto:2539391306@qq.com.cn">郵箱鏈接</a>
	<a href="58ca5b6700018dfc02400135.zip">文件下載</a>
</body>
</html>

原文鏈接：https://blog.csdn.net/qq_43405634/article/details/103789819

在線咨詢

上一篇：css布局方案匯總(28個實例圖文并茂)
下一篇：HTML實現文件夾的上傳和下載

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

我是如何初識HTML，入前端的

了解HTML的代碼注釋

認識標簽<head>

<body>標簽，網頁上顯示的內容放在這里

開始學習<p>標簽，添加段落

了解<hx(1-6)>標簽，為你的網頁添加標題

加入強調語氣，使用<strong>和<em>標簽

使用<span>標簽為文字設置單獨樣式

<q>標簽，短文本引用

<blockquote>標簽，長文本引用

使用<br>標簽分行顯示文本

為你的網頁中添加一些空格

認識<hr>標簽，添加水平橫線

<address>標簽，為網頁加入地址信息

想加入一行代碼嗎？使用<code>標簽

使用<pre>標簽為你的網頁加入大段代碼

使用<ul>，添加新聞信息列表

使用<ol>，添加順序列表

初識div

認識div在排版中的作用

給div命名，使邏輯更加清晰

table標簽，認識網頁上的表格

table標簽 ＝ 我們平時看到到表格

用css樣式，為表格加入邊框

caption標簽，為表格添加標題和摘要

初識<a>標簽

使用<a>標簽，鏈接到另一個頁面

在新建瀏覽器窗口中打開鏈接

使用mailto在網頁中鏈接Email地址

認識<img>標簽，為網頁插入圖片

認識表單

使用表單標簽，與用戶交互

文本輸入框、密碼輸入框

文本域，支持多行文本輸入

使用單選框、復選框，讓用戶選擇

使用下拉列表框，節省空間

使用下拉列表框進行多選

使用提交按鈕，提交數據

使用重置按鈕，重置表單信息

form表單中的label標簽

在前面

自測讀不讀

原理概述

最原始的文件上傳

文件上傳接口

1-HTML基礎

第1章 基礎語法

2.2 文字和段落標簽

特殊符號

任務

第3章 列表標簽

3.1 列表標簽-無序列表

3.2 列表標簽-有序列表

3.3 列表標簽-定義列表

第四章 圖像和超鏈接

4.1 圖像

4.2 超鏈接

4.3 錨鏈接

4.3 鏈接擴展功能

您的項目需求

table標簽＝我們平時看到到表格

第1章基礎語法

第3章列表標簽

第四章圖像和超鏈接