整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
輯導(dǎo)語：在工作中我們時(shí)常會遇到一些關(guān)于表單優(yōu)化的問題，雖然表單聽起來是比較簡單而常見的設(shè)計(jì)要素，但要想設(shè)計(jì)出簡潔直觀，清晰明了的表單還需要考慮更多的細(xì)節(jié)因素。本文總結(jié)了如何設(shè)計(jì)出簡單且包容的表單的一些技巧，希望對你有所啟發(fā)。
最近我的工作涉及一項(xiàng)艱巨的任務(wù)——如何為我的產(chǎn)品設(shè)計(jì)出體驗(yàn)更好的表單。當(dāng)我接到這個(gè)任務(wù)時(shí)，我根本不知道好的表單和壞的表單有什么區(qū)別。我需要思考：我應(yīng)該設(shè)計(jì)一個(gè)多步驟的表單還是一個(gè)單頁的表單？我應(yīng)該使用占位符嗎？如何使我的表單更符合包容性設(shè)計(jì)的原則呢?
幾乎每一個(gè)在網(wǎng)頁端發(fā)生的重要交互，從注冊登陸、購買產(chǎn)品服務(wù)到發(fā)起客戶幫助或者獲得反饋，都需要通過表單來完成。因此，雖然表單可能不是設(shè)計(jì)中最激動人心的設(shè)計(jì)元素，但學(xué)會如何設(shè)計(jì)一個(gè)好的表單是一項(xiàng)非常有價(jià)值的技能。
在學(xué)習(xí)了一些資料之后，我把我認(rèn)為最好的最有效的表單設(shè)計(jì)進(jìn)行了羅列。然而，我們需要記住的是：表單是一個(gè)高度依賴上下文的設(shè)計(jì)元素，所以在實(shí)際操作中是有例外的，設(shè)計(jì)師需要具體情況具體分析。在我們開始之前，讓我們快速的來回顧一下表單的五個(gè)主要元素：
多列表單容易讓人產(chǎn)生誤解：用戶非常容易忽略一些必填的內(nèi)容，把信息填入錯(cuò)誤的文本框或者完全放棄填寫表單。下面的圖片展示了用戶面對多列表單時(shí)視線是如何移動的。
當(dāng)一個(gè)表單沒有提供清晰的填寫路徑時(shí)，用戶需要很長時(shí)間去理解它，更別說去完成它了。當(dāng)一個(gè)表單的填寫路徑是線性的，比如說單列表單，用戶在完成時(shí)就不會存在誤解。
確保只讓用戶輸入我們真正需要的內(nèi)容。但是記住，你讓用戶輸入的信息越多，用戶就越不想填寫這個(gè)表單，因此，這會影響轉(zhuǎn)化率等因素并導(dǎo)致銷售損失。設(shè)計(jì)師需要明確讓用戶填寫這一條信息的目的是什么。在這里，我們可以使用一個(gè)叫做“問題協(xié)議”的系統(tǒng)方法，來確定表單的內(nèi)容。
好的表單就是在正確的時(shí)間向用戶詢問正確的信息，否則它可能會讓用戶失去興趣。回憶一下我們自己線上購物的場景：如果網(wǎng)站需要你在購買東西之前就填寫付款信息，你會怎么想？或者必須在填寫名字之前填寫地址？因此，我們要嘗試從用戶的視角來思考如何建立表單的排列邏輯。
創(chuàng)建有邏輯的表單項(xiàng)分組幫助用戶更清晰的理解信息，這是因?yàn)橛脩糁荒芡瑫r(shí)關(guān)注在一個(gè)群組上，而不是被無數(shù)雜亂的信息打亂。被分在一個(gè)組的信息代表著它們彼此之間是有關(guān)聯(lián)的，因此，如何在視覺上區(qū)分開不同的群組也是很重要的，比如在群組之間添加空白區(qū)域。
首先，標(biāo)簽應(yīng)該盡量使用頂部對齊，根據(jù)眼動測試研究，把標(biāo)簽放在輸入框的上面而不是旁邊，會幫助用戶更快地理解信息。
從包容性設(shè)計(jì)的角度來看，標(biāo)簽也非常重要。視力正常的用戶可以閱讀它們，視障用戶可以在屏幕閱讀器的幫助下聽到它們，運(yùn)動障礙用戶可以在更大的點(diǎn)擊區(qū)域內(nèi)使用它們。
因?yàn)檎嘉环?HTML 的規(guī)范中并不意味著是用戶一定要去閱讀的內(nèi)容。占位符之所以被運(yùn)用在表單中是因?yàn)樗谟脩糨斎胄畔⒌臅r(shí)候提供了額外的指導(dǎo)。但是問題在于這些文本是灰色的，低對比度的顏色使用戶很難去閱讀。在包容性設(shè)計(jì)的研究中發(fā)現(xiàn)，占位符經(jīng)常被瀏覽器的自動翻譯功能或者一些屏幕閱讀器忽略掉，并不會翻譯或者閱讀它們。
所以我們?yōu)槭裁匆褂谜嘉环兀?strong>使用占位符的原因是因?yàn)樗鼈冊谝曈X上節(jié)省了大量空間。但問題在于，當(dāng)用戶點(diǎn)擊時(shí)，占位符會自動消失，所以用戶無法二次檢查他們是否在正確的輸入框中輸入了正確的內(nèi)容。
一個(gè)通用的解決方法是使用懸浮的標(biāo)簽，把標(biāo)簽作為占位符使用。當(dāng)用戶開始在一個(gè)表單項(xiàng)進(jìn)行輸入的時(shí)候，標(biāo)簽會懸浮在輸入框的上方，這種方式受到歡迎的原因是可以節(jié)省空間，總體而言，這是一種非常優(yōu)雅、自然的模式。
然而，懸浮標(biāo)簽的缺點(diǎn)多于優(yōu)點(diǎn)。首先，缺少空間來設(shè)置提示文字，因?yàn)闃?biāo)簽和占位符是相同的。第二，標(biāo)簽比較小，以及它較低的對比度讓用戶很難區(qū)分是占位符文字還是真實(shí)的數(shù)值，最后，在空間的節(jié)省上也不會特別多，因?yàn)闃?biāo)簽需要空間進(jìn)行移動。
所以我們該如何做呢？我們可以把提示文字放在輸入框的上方，就像下圖中這樣。因此，屏幕閱讀器就不會跳過這些文字，同時(shí)它也提供了一個(gè)較大的點(diǎn)擊區(qū)域。
按照慣例，我們習(xí)慣用一個(gè)紅色的星號來代表必填表單項(xiàng)，但是如果你了解我在上文中提到的“問題協(xié)議”工具，那么大部分的表單項(xiàng)都是必須要填寫的。因此，幫用戶標(biāo)注出可選的輸入框會更加方便有意義。當(dāng)我們想讓一些元素脫穎而出時(shí)，我們會利用視覺設(shè)計(jì)來凸顯這個(gè)元素是不同的。
對于設(shè)計(jì)師來說，我們可以快速理解紅色星號的含義，但是總有人會對此表示疑惑。在標(biāo)簽中加入“可選”的文字，會比用視覺符號更加清晰明確。
在包容性設(shè)計(jì)中有關(guān)于如何用紅色星號作為必填字段的建議：可以在表單中添加標(biāo)記，以便讓屏幕閱讀器在閱讀時(shí)，說出“這是一個(gè)必填表單項(xiàng)”的語，進(jìn)而幫助用戶理解。
當(dāng)用戶提交的內(nèi)容出現(xiàn)錯(cuò)誤，并且需要告知用戶時(shí)，在界面上需要有三個(gè)方面的呈現(xiàn)。
在 html 網(wǎng)頁中，出現(xiàn)在瀏覽器標(biāo)題欄的標(biāo)題是用來定義網(wǎng)頁的名稱的，標(biāo)題是當(dāng)屏幕瀏覽器開始閱讀時(shí)第一個(gè)需要閱讀的部分，因此，在這里展現(xiàn)“用戶提交的信息有誤”能最有效最快捷得反饋給用戶。
這個(gè)解決方法需要用 javascript 來計(jì)算表單當(dāng)中的錯(cuò)誤并且體現(xiàn)出來，所以說這可能并不屬于一個(gè)設(shè)計(jì)師的職能范圍，你只需要確保將此功能告知開發(fā)人員。
這種類型的錯(cuò)誤反饋是更加清晰明確的。在表單上面顯示錯(cuò)誤的總結(jié)，因此用戶就知道他具體需要修改哪部分的內(nèi)容。
一個(gè)好的錯(cuò)誤總結(jié)不僅僅有錯(cuò)誤信息還包含了錯(cuò)誤位置的鏈接。錯(cuò)誤位置的鏈接讓用戶快速跳轉(zhuǎn)到表格中填寫錯(cuò)誤的部分，而不是讓用戶先記住哪里發(fā)生了錯(cuò)誤，再從頭閱讀一遍表單，從大量信息中取尋找他們的錯(cuò)誤之處。
當(dāng)然，當(dāng)沒有錯(cuò)誤出現(xiàn)時(shí)，錯(cuò)誤總結(jié)模塊就需要被隱藏了。
在一個(gè)理想的情況下，所有的錯(cuò)誤提醒都是實(shí)時(shí)的，這意味著當(dāng)用戶填寫完一個(gè)表單項(xiàng)（或不填寫）的時(shí)候，就會在表單項(xiàng)附近出現(xiàn)一個(gè)錯(cuò)誤提示文本，這可以有效的減少用戶滑上滑下去尋找錯(cuò)誤提示信息的時(shí)間。
最近也有一種趨勢，是將錯(cuò)誤提示信息放在文本框的上方，這是因?yàn)橐恍┳詣犹畛涔δ芤苍S會遮擋這些提示，手機(jī)上的鍵盤也會遮擋住這些關(guān)鍵信息，用戶很容易忽視掉。
對于稍微復(fù)雜一點(diǎn)的表單輸入，比如說輸入一個(gè)新的密碼。好的解決方案是用實(shí)時(shí)的提示來展示密碼的強(qiáng)弱程度，也就是說，在用戶正在輸入的時(shí)候，就可以實(shí)時(shí)展示出目前密碼的強(qiáng)弱程度。這將最有效地讓用戶知道他們是否滿足了這個(gè)表單的填寫要求。
CTA 行動按鈕應(yīng)該使用描述性的語言而不是模糊的語言。動詞會幫助用戶理解接下來會發(fā)生什么。雖然行動按鈕上的描述應(yīng)該是簡短的，但是也不能因此犧牲語言的清晰性。一定要使用讓每個(gè)人都理解的語言。
主要按鈕和次要按鈕之間做明顯的視覺區(qū)分，主要是為了避免用戶按下錯(cuò)誤的按鈕，視覺上的區(qū)別可以引向最預(yù)期的操作。
一般情況下，提交按鈕最應(yīng)該被放置在表單的底部，因?yàn)榇蠖鄶?shù)用戶都會從上往下填寫表單然后提交表單。另外一個(gè)需要思考的點(diǎn)是按鈕對齊的位置是向左對齊，向右對齊還是居中對齊。我覺得更好的方案是向左對齊，因?yàn)楸韱沃械臉?biāo)簽也是向左對齊的，所以當(dāng)用戶將視線向下移動時(shí)，他們也會自然的看向這個(gè)位置。
在需要使用返回按鈕的表單中，比如多步驟表單，提交按鈕仍然應(yīng)該向左對齊，然而返回按鈕應(yīng)該被放置在表單的頂部，這樣可以幫助用戶區(qū)分主要按鈕（即提交按鈕）和次要按鈕（即返回按鈕），有助于用戶誤點(diǎn)擊返回按鈕。
當(dāng)表單中所填的內(nèi)容可以被分類時(shí)，使用多步驟表單可以提升表單的可用性。讓一個(gè)較長的表單被分成幾個(gè)較短的表單可以幫助用戶更清晰得填寫表單。當(dāng)表單中要填寫的信息較多時(shí)，最好使用多步驟表單。同時(shí)，也可以向用戶展示填寫的進(jìn)度，這是提高用戶參與度的好方法。
進(jìn)度指示器將表單內(nèi)容分成多個(gè)有邏輯，有順序的步驟來向用戶展示當(dāng)前的進(jìn)度。這給用戶傳達(dá)了清晰的反饋，讓用戶知道他們已經(jīng)完成了多少內(nèi)容，以及多少內(nèi)容還沒有完成。
然而，除非你很確定整個(gè)表單一共有幾個(gè)步驟，并且毫無偏差，不然不要用數(shù)字去標(biāo)識，反而會引發(fā)更多得疑惑。
最后，設(shè)計(jì)師需要證明每一個(gè)表單元素存在的必要性。表單對于用戶來說是乏味的，但是設(shè)計(jì)師的任務(wù)是讓表單變得盡可能的可用和易用。像其他設(shè)計(jì)一樣，表單也可以通過測試來不斷優(yōu)化，所以說盡早測試，頻繁測試，讓測試的結(jié)果推動下一次的設(shè)計(jì)提升。
歡迎大家自由評論，點(diǎn)贊或者分享。
作者：Omar Andani；譯者：王英睿；審校：李澤慧、張聿彤；編輯：孫淑雅
原文鏈接：https://uxdesign.cc/8-ways-to-make-forms-more-user-friendly-50f3f22c708c
本文由@TCC翻譯情報(bào)局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
多數(shù)PHP程序都使用HTML表單從用戶那里獲取數(shù)據(jù)并計(jì)算結(jié)果。
首先創(chuàng)造一個(gè)基本的HTML大綱，包含表單控件；然后將控件進(jìn)行合并（HTML表單必須包括一個(gè)提交按鈕，用戶單擊它可以將表單數(shù)據(jù)發(fā)送到服務(wù)器。）一個(gè)單獨(dú)的HTML頁面可以包含多個(gè)表單。
包含表單的HTML結(jié)構(gòu)和和普通的HTML結(jié)構(gòu)一樣。
<HTML>
<HEAD>
<TITLE>標(biāo)題放在這</TITLE>
</HEAD>
<BODY>
表單頁面放在這
</BODY>
</HTML>在包含表單的HTML頁面中可以使用任何HTML標(biāo)簽。基本的表單使用FROM標(biāo)簽來說明。該標(biāo)簽中METHOD屬性接收GET或POST兩個(gè)值中的一個(gè)。ACTION屬性子明PHP腳本的url，該腳本可以收集通過表單收集的數(shù)據(jù)，可以是絕對路徑或者相對路徑。
<FORM METHOD="method" ACTION="url">
中間可以放置表單控件
</FORM>兩個(gè)常用的基本控件：文本框和提交按鈕。
文本框：允許用戶鍵入信息以發(fā)送給PHP腳本。NAME屬性為文本提供名稱，PHP腳本可以通過名稱準(zhǔn)確訪問其內(nèi)容，因此它應(yīng)該是唯一的且符合PHP變量命名規(guī)則（但不需要$符號），單標(biāo)簽。VALUE屬性指明出現(xiàn)在提交按鈕上面的標(biāo)題。創(chuàng)建方式如下：
<INPUT TYPE="TEXT" NAME="text">提交按鈕：允許用戶將一個(gè)表單的內(nèi)容發(fā)送到服務(wù)器，一個(gè)HTML表單對應(yīng)應(yīng)該有一個(gè)提交按鈕。
示例：一個(gè)完整的HTML表單。
<HTML>
<HEAD>
<TITLE>標(biāo)題</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
</BODY>
</HTML>可以在一個(gè)HTML頁面中包含多個(gè)表單，注意下一個(gè)表單的FORM開始之前需要結(jié)束前一個(gè)FORM表單。
<HTML>
<HEAD>
<TITLE>標(biāo)題</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>
<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>
</BODY>
</HTML>文本框的屬性中，TYPE和NAME是必須的，其余是可選屬性。SIZE屬性用于設(shè)置文本框的可視大小；MAXLENGTH指明用戶鍵入字符的最大長度；VALUE給出了一個(gè)最初顯示在文本框中的值。
<input type="text" name="" size="" maxlength="" value="">文本區(qū)域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區(qū)域內(nèi)可以看到的文本行數(shù)，充滿時(shí)會滾動。COLS屬性指明可見文本列數(shù)與行數(shù)類似。WRAP屬性指明文本區(qū)域內(nèi)單詞換行的方式，可以指定如下值。該標(biāo)簽為雙標(biāo)簽。
值 | 說明 |
off | 禁止單詞換行但用戶可以輸入換行符強(qiáng)制換行 |
virtual/soft | 各行顯示為換行，但是換行并沒有被發(fā)送到服務(wù)器 |
physica/hard | 啟用了單詞換行 |
<inputarea name="" rows="" cols="" wrap="">創(chuàng)建密碼框的語法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。
<input type="password" name="" size="" maxlength="" value="">取兩個(gè)值中的一個(gè)，即二選一。TYPE屬性是必須的，checked屬性出現(xiàn)，該復(fù)選框默認(rèn)情況會被選定。value屬性指定復(fù)選框被選定情況下被發(fā)送到服務(wù)器的值，默認(rèn)發(fā)送on值。法如下：
<input type="checkbox" name="" checked value="">語法與復(fù)選框?qū)傩院x相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。
<input type="radio" name="" checked value="">用戶可以選擇一個(gè)或者多個(gè)選項(xiàng)，它是一個(gè)滾動菜單。
<select name="" multipile size="">options go here</select>name屬性是必須的，multipile屬性指明用戶可以通過按下crtl鍵并單擊多個(gè)選項(xiàng)來選擇它們
列表框的單選行為可作為單選按鈕。
<option selected value="text"></options><input type="hidden" name="text"value=""><input type="FILE" name="name" accept="time" value="text">其中type屬性是必須的。格式通過使用MIME碼指定。常用的格式如下：
超文本標(biāo)記語言文本 .html,.html text/html
普通文本 ：txt text/plain
word文檔：application/msword
RTF文本 ：rtf application/rtf
GIF圖形 ：gif image/gif
JPEG圖形 ：jpeg,
jpg： image/jpeg
au聲音文件：au audio/basic
MIDI音樂文件 ：mid,.midi audio/midi,audio/x-midi
RealAudio音樂文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
壓縮文件.rar application/octet-stream
壓縮文件.zip application/x-zip-compressed
TAR文件 .tar application/x-tar
<input type="image" src="url" name="text" align="align"><input type="reset" value="text">1.段落標(biāo)簽<p>
<style>
p{margin:0px;}
</style>
2.斜體標(biāo)簽<em>
<em>斜體</em>
3.粗體標(biāo)簽<strong>
<strong>加粗</strong>
4.<span>標(biāo)簽
被用來組合文檔中的行內(nèi)元素。使用 <span> 來組合行內(nèi)元素，以便通過樣式來格式化它們。
例如：
<style>
span{ color:blue; }
</style>
這樣，<span>標(biāo)簽包含的文本就變成了藍(lán)色的字體。
5.<q>標(biāo)簽
作用：段文本引用
例如：
<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑。</q>開始的。雖然當(dāng)時(shí)不知道是什么意思，只是覺得詩句挺特別。后來才明白這個(gè)典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的舍棄。</p> 在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》 。因?yàn)椴皇亲髡咦约旱奈淖郑孕枰褂?lt;q></q>實(shí)現(xiàn)引用。 注意要引用的文本不用加雙引號，瀏覽器會對q標(biāo)簽自動添加雙引號。 這里用<q>標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。 補(bǔ)充知識：語義化網(wǎng)頁結(jié)構(gòu)有助于搜索引擎的收錄。同一個(gè)效果可以用很多鐘方式實(shí)現(xiàn)，但這只方便了瀏覽者，而搜索引擎不知道這里到底是什么內(nèi)容，這里如果你使用標(biāo)簽，那么就告訴瀏覽器這里是引用的話。而且在手持設(shè)備或移動設(shè)備不能很好支持css的基礎(chǔ)上，瀏覽器會使用默認(rèn)的效果，因而提供較好可讀性。
6.<blockquote>標(biāo)簽
作用：長文本引用
例如：
<blockquote>明月出天山，蒼茫云海間。長風(fēng)幾萬里，吹度玉門關(guān)。漢下白登道，胡窺青海灣。由來征戰(zhàn)地，不見有人還。 戍客望邊色，思?xì)w多苦顏。高樓當(dāng)此夜，嘆息未應(yīng)閑。</blockquote>
注意：瀏覽器對<blockquote>標(biāo)簽的解析是縮進(jìn)樣式
7.<br>標(biāo)簽
怎么可以讓每一句詩詞后面加入一個(gè)折行呢？那就可以用到<br />標(biāo)簽了，在需要加回車換行的地方加入<br />，<br />標(biāo)簽作用相當(dāng)于word文檔中的回車。
語法：
xhtml1.0寫法：
<br/>
html4.01寫法：
<br>
現(xiàn)在一般使用 xhtml1.0 的版本的寫法（其它標(biāo)簽也是），這種版本比較規(guī)范。
與以前我們學(xué)過的標(biāo)簽不一樣，<br />標(biāo)簽是一個(gè)空標(biāo)簽，沒有HTML內(nèi)容的標(biāo)簽就是空標(biāo)簽，空標(biāo)簽只需要寫一個(gè)開始標(biāo)簽，這樣的標(biāo)簽有<br />、<hr />和<img />。
講到這里，你是不是有個(gè)疑問，想折行還不好說嘛，就像在 word 文件檔或記事本中，在想要折行的前面輸入回車不就行了嗎？ 不好意思，在 html 中是忽略回車和空格的，你輸入的再多回車和空格也是顯示不出來的。
8.<hr>標(biāo)簽
在信息展示時(shí)，有時(shí)會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。
語法：
html4.01版本
<hr>
xhtml1.0版本
<hr/>
注意：
9.<address>標(biāo)簽
一般網(wǎng)頁中會有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁中展示出來，這些聯(lián)系地址信息如公司的地址就可以<address>標(biāo)簽。也可以定義一個(gè)地址（比如電子郵件地址）、簽名或者文檔的作者身份。
語法：
<address>聯(lián)系地址信息</address>
如：
<address>文檔編寫：lilian 北京市西城區(qū)德外大街10號</address>
10.<code>標(biāo)簽
在介紹語言技術(shù)的網(wǎng)站中，避免不了在網(wǎng)頁中顯示一些計(jì)算機(jī)專業(yè)的編程代碼，當(dāng)代碼為一行代碼時(shí)，你就可以使用<code>標(biāo)簽了，如下面例子：
<code>var i=i+300;</code>
注意：在文章中一般如果要插入多行代碼時(shí)不能使用<code>標(biāo)簽了。
語法：
<code>代碼語言</code>
注：如果是多行代碼，可以使用<pre>標(biāo)簽。
11.<pre>標(biāo)簽
主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。
語法：
<pre>語言代碼段</pre>
如下代碼：
<pre>
var message="歡迎";
for(var i=1;i<=10;i++) {
alert(message);
}
</pre>
效果如下：
注意：<pre> 標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的，在你需要在網(wǎng)頁中預(yù)顯示格式時(shí)都可以使用它，只是<pre>標(biāo)簽的一個(gè)常見應(yīng)用就是用來展示計(jì)算機(jī)的源代碼。
12.<ul>標(biāo)簽
ul-li是沒有前后順序的信息列表。
ul{ list-style:circle; }
ul{ list-style:none }
<ul> <li>信息</li> <li>信息</li> ...... </ul>
<ul> <li>精彩少年</li> <li>美麗突然出現(xiàn)</li> <li>觸動心靈的旋律</li> </ul>
13.<ol>標(biāo)簽
ol-li是有前后順序的信息列表
<ol> <li>信息</li> <li>信息</li> ...... </ol>
<ol> <li>前端開發(fā)面試心法 </li> <li>零基礎(chǔ)學(xué)習(xí)html</li> <li>JavaScript全攻略</li> </ol>
<ol>在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng)<li>前都自帶一個(gè)序號，序號默認(rèn)從1開始。
14.<div>標(biāo)簽
15.<table>標(biāo)簽
1）屬性：border
作用：規(guī)定表格邊框的寬度
2）屬性：cellpadding
作用：單元格中的文本與單元格邊框的間距
3）屬性：cellspacing
作用：單元格之間的間距
table、tbody、tr、th、td
1、<table>…</table>：整個(gè)表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束。
2、<tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時(shí)，表格會下載一點(diǎn)顯示一點(diǎn)，但如果加上<tbody>標(biāo)簽后，這個(gè)表格就要等表格內(nèi)容全部下載完才會顯示。如右側(cè)代碼編輯器中的代碼。
3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
4、<td>…</td>：表格的一個(gè)單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
- 常用屬性： colspan：規(guī)定單元格可橫跨的列數(shù)，值為數(shù)字 rowspan：規(guī)定單元格可橫跨的行數(shù)，值為數(shù)字
5、<th>…</th>：表格的頭部的一個(gè)單元格，表格表頭。
6、表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。
總結(jié)：
16.<caption>標(biāo)簽
表格還是需要添加一些標(biāo)簽進(jìn)行優(yōu)化，可以添加標(biāo)題和摘要。
摘要的內(nèi)容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。語法：
<table summary="表格簡介文本">
用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方。語法：
<table> <caption>標(biāo)題文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>
17.<a>標(biāo)簽
<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過顯示的文本">鏈接顯示的文本</a>
例如：
<a title="點(diǎn)擊進(jìn)入慕課網(wǎng)">click here!</a>
上面例子作用是單擊click here!文字，網(wǎng)頁鏈接跳轉(zhuǎn)到http://www.imooc.com這個(gè)網(wǎng)頁。
<a href="目標(biāo)網(wǎng)址" target="_blank">click here!</a>
<a>標(biāo)簽還有一個(gè)作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網(wǎng)站管理者發(fā)送電子郵件。
注意：如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開頭，后面的參數(shù)每一個(gè)都以“&”分隔。引號只有一對！
例子： <a href="mailto:yy@qq.com? cc=xx@qq.com & bcc=aa@qq.com & subject=郵件主題 & body=郵件內(nèi)容">
那么： 1）A知道自己發(fā)送郵件給了B1、B2、B3，并且抄送給了C1、C2、C3，密送給了D1、D2、D3。 2）B1知道這封是A發(fā)送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。 3）C1知道這封是A發(fā)送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。 4）D1知道這封是A發(fā)送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，而且密送給了自己，但不知道密送給了D2、D3。 5）郵箱地址 mailto: <a href="mailto:qiujie@staff.weibo.com">發(fā)送</a> 6）抄送地址 cc: <a href="mailto:qiujie@staff.weibo.com?cc=zz@sina.com">發(fā)送</a> 7）密件抄送地址 用分號分隔: <a href="mailto:qiujie@staff.weibo.com?bcc=zz@sina.com">發(fā)送</a> 8）多個(gè)收件人、抄送人、密送人 ; bcc: <a href="mailto:qiujie@staff.weibo.com;zz@sina.com">發(fā)送</a> 9）郵件主題 subject: <a href="mailto:qiujie@staff.weibo.com？subject=郵件主題">發(fā)送</a> 10）郵件內(nèi)容 body: <a href="mailto:qiujie@staff.weibo.com？body=郵件正文">發(fā)送</a> 例子： <a href="mailto:yy@imooc.com;10001@qq.com?cc=10002@qq.com&bbc=madanteng@qqhelp.com&subject=觀了不起的蓋茨比有感。&body=你好，對此評論有些想法。">對此影評有何感想，發(fā)送郵件給我</a>
18.<img>標(biāo)簽
在網(wǎng)頁的制作中為使網(wǎng)頁炫麗美觀，肯定是缺少不了圖片，可以使用
標(biāo)簽來插入圖片。
[站外圖片上傳中……(2)] <img src="myimage.gif" alt="My Image" title="My Image" />
src：標(biāo)識圖像的位置； alt：指定圖像的描述性文本，當(dāng)圖像不可見時(shí)（下載不成功時(shí)），可看到該屬性指定的文本； title：提供在圖像可見時(shí)對圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本)； 圖像可以是GIF，PNG，JPEG格式的圖像文件。 路徑有兩種填寫方式：絕對路徑、相對路徑 相對路徑：相對于我們當(dāng)前 html 文件的位置來寫路徑即可！ ./表示當(dāng)前目錄，../表示上一級目錄
19.<form>標(biāo)簽
注意:
1、所有表單控件（文本框、文本域、按鈕、單選框、復(fù)選框等）都必須放在<form></form>標(biāo)簽之間（否則用戶輸入的信息可提交不到服務(wù)器上哦！）。
2、method:post/get的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問題。
語法：
<form method="傳送方式" action="服務(wù)器文件">
<form> ：<form>標(biāo)簽是成對出現(xiàn)的，以<form>開始，以</form>結(jié)束。 action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)。 method ： 數(shù)據(jù)傳送的方式（get/post）。 <form method="post" action="save.php"> <label for="username">用戶名:</label> <input type="text" name="username" /> <label for="pass">密碼:</label> <input type="password" name="pass" /> </form>
20.<input>標(biāo)簽
語法：
<form> <input type="text/password" name="名稱" value="文本" /> </form>
舉例： <form> 姓名： <input type="text" name="myName"/><br/> 密碼： <input type="password" name="pass"/> </form> value="xxx" 替換為 placeholder="xxx" 的體驗(yàn)更好一些，placeholder屬性為 HTML 5 的新屬性。placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息（hint）。該提示會在輸入字段為空時(shí)顯示，并會在字段獲得焦點(diǎn)時(shí)消失。
語法：
<input placeholder="text"/> 注釋：placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。
注意:同一組的單選按鈕，name 取值一定要一致，比如上同一個(gè)名稱“gender”，這樣同一組的單選按鈕才可以起到單選的作用！
type：
name：為文本框命名，以備后臺程序ASP 、PHP使用。
value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)
21.<textarea>標(biāo)簽
語法：
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
舉例：
<form method="post" action="save.php"> <label>聯(lián)系我們</label> <textarea cols="50" rows="10" >在這里輸入內(nèi)容...</textarea> </form>
22.<select>標(biāo)簽
語法：
<select> <option value="提交的值">顯示的值</option> ... </select> 設(shè)置selected="selected"屬性，則該選項(xiàng)就被默認(rèn)選中。 selected="selected"
<select multiple="multiple"> 然后選擇時(shí)候按ctrl點(diǎn)鼠標(biāo)選中
<option disabled="disabled">
把相關(guān)的選項(xiàng)組合在一起
屬性 label：給選項(xiàng)組命名
屬性 disabled：禁用該選項(xiàng)組
23.<label>標(biāo)簽
<label for="控件id名稱">
注意：標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。
<form> <label for="male">男</label> <input type="radio" name="gender" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <label for="email">輸入你的郵箱地址</label> <input type="email" id="email" placeholder="Enter email"> </form>
24.<map>標(biāo)簽
使用 map 標(biāo)簽可以給圖片某塊區(qū)域加超鏈接
使用方法：
1）為 map 標(biāo)簽首先加上 id 屬性用來為 map 標(biāo)簽定義一個(gè)唯一的名稱
2）為了保證兼容性再加上 name 屬性，屬性值與 id 的值相同
3）為 map 標(biāo)簽所作用的圖片加上 usemap 屬性，屬性值為 #id 名稱
4）在 map 標(biāo)簽內(nèi)嵌套 area 標(biāo)簽來實(shí)現(xiàn)給指定區(qū)域加鏈接
<area shape="" coords="" href="" alt="" /> shape 屬性：定義鏈接區(qū)域的形狀，常用值 rect、circle coords 屬性：確定區(qū)域的精確位置。填寫坐標(biāo)即可，以父元素左上角為原點(diǎn)，可借助qq截圖來得到想要的坐標(biāo) href 屬性：填寫鏈接地址即可 alt 屬性：給鏈接加一些說明信息
例子：
<map id="img1" name="img1"> <area shape="rect" coords="184,33,391,258" href="http:www.baidu.com" alt="百度一下" target="_blank" /> <area shape="circle" coords="507,287,20" alt="私房庫我的博客" target="_blank" /> </map>
注意：
25.<iframe>標(biāo)簽
創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
屬性：
值：1、0
作用：規(guī)定是否顯示框架周圍的邊框。
作用：定義 iframe 的寬度
作用：定義高度
作用：給 iframe 命名
值：yes、no、auto
作用：規(guī)定是否在 iframe 中顯示滾動條
作用：規(guī)定在 iframe 中顯示的文檔的 URL
可以是本地的 html 文件，也可以是遠(yuǎn)程的 html 文件
標(biāo)簽寫法
1）不允許寫結(jié)束標(biāo)簽的元素
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。這些標(biāo)簽都是單標(biāo)簽例如：br 標(biāo)簽，不可以這樣<br></br>，只能<br />這樣來關(guān)閉標(biāo)簽。
2）可以省略結(jié)束標(biāo)記的元素有：
li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。
3）可以省略全部標(biāo)記的元素有
html,head,body,colgroup,tbody
例如：disabled,readonly，checked 等只寫屬性而不寫屬性值得時(shí)候當(dāng)做 ture 不寫屬性表示 false
要求：屬性值不包含 空字符串，<，>，=， ‘
標(biāo)簽嵌套探討
1.html 規(guī)定我們必須要嵌套著寫的標(biāo)簽
例如：頁面頭部是嵌套在 head 標(biāo)簽里面的，主體內(nèi)容都是嵌套在 body 標(biāo)簽里面的表單的內(nèi)容是嵌套在 form 標(biāo)簽里面的，dt、dd 是嵌套在 dl 標(biāo)簽里面的，li 是嵌套到ul 標(biāo)簽里面的，等等...
2.塊級元素可以嵌套內(nèi)聯(lián)元素，但是內(nèi)聯(lián)元素不能包含塊元素
<div> <span>我是一個(gè) span 元素</span> </div> —— 對 <span> <div>div 元素</div> </span> —— 錯(cuò)
3.內(nèi)聯(lián)元素可以嵌套內(nèi)聯(lián)元素
<a href="#"> <span></span> </a> —— 對
4.塊級元素與塊級元素嵌套注意點(diǎn)
<p><ol><li></li></ol></p> —— 錯(cuò) <p><div></div></p> —— 錯(cuò)
喜歡前端的小伙伴們可以在評論區(qū)留言，尋找和小馮童鞋一樣熱愛前端的友人，讓我們一起玩轉(zhuǎn)前端的世界！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
