整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML中可以使用文本標記、段落標記、列表標記和排版標記對文本進行各種各樣的格式化工作。
下面讓我們來進行上述內容的學習：
HTML為單獨的詞或者句子定義了兩種樣式：物理樣式(Physical Style)和邏輯樣式(Logical Styles)。
物理樣式標記也稱為字體樣式元素或實體字符控制標記，因為它們為瀏覽器提供了特定的字體指令。現在各類網頁開發工具中仍然有這類標記。
物理樣式標記(Physical Style):
| 標記 | 說明 |
| b軟件工程專業！/b | 黑體 |
| i軟件工程專業！/i | 斜體 |
| u軟件工程專業！/u | 下劃線 |
| del軟件工程專業！/del | 刪除線 |
| big軟件工程專業！/big | 變大字號 |
| small軟件工程專業！/samll | 變小字號 |
| Xsup2/sup | 上標--X2 |
| Ysub1/sub | 下標--Y1 |
邏輯樣式標記（Logical style）:
邏輯樣式標記也稱為基于內容的標記。
| 標記 | 主要用途 |
| abbretc./abbr | 表示縮寫 |
| address江蘇省南京市/address | 表示地址（address） |
| cite軟件工程！/cite | 書名、影視名等的引用，斜體 |
| code軟件工程！/code | 計算機代碼，顯示固定寬度字體 |
| dfn軟件工程！/dfn | 定義一個詞，通常為斜體 |
| samp軟件工程！/samp | 顯示固定寬度字體 |
| kbd軟件工程！/kbd | 鍵盤輸入，顯示無格式的固定寬度字體 |
| em軟件工程！/em | 強調，通常為斜體 |
| strong軟件工程！/strong | 強調，顯示黑體字符(重要性) |
| var變量/var | 變量，顯示斜體字符 |
文本格式化其它標記使用
標題字（heading）:標題是通過 h1～h6 等標記進行定義的。h1 定義最大的標題，h6 定義最小的標題。瀏覽器會自動地在標題的前后添加空行。
添加空格 (nbsp; -non break space):
基本語法： nbsp；
添加特殊符號：編寫網頁代碼時有時需要一些特殊符號，如?、?等，可以直接添加相應的符號代碼即可。
段落格式化
p標記屬性語法:瀏覽器會自動地在段落的前后添加空行
預格式化文本標記
實現預先排版好的文本原封不動地顯示出來
居中標志
center 實現網頁中段落居中顯示
段落縮進
可以實現文字縮排，一對縮排標記可以縮進5個西方字符位置
列表標記
列表將網頁中相關的資料以條目的形式而形成的一種特殊的表，列表主要分為以下幾類；
無序列表：ul
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始于 ul 標簽。每個列表項始于 li。
2. 有序列表：ol
同樣，有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始于 ol 標簽。每個列表項始于 li 標簽。
3. 定義列表：dl
自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
自定義列表以 dl 標簽開始。每個自定義列表項以 dt 開始。每個自定義列表項的定義以 dd 開始。
本標簽: 32
例:
<dl>
<dt>標題1</dt>
<dd>內容11</dd>
<dd>內容12</dd>
<dt>標題2</dt>
<dd>內容21</dd>
<dd>內容22</dd>
</dl>
target="...",決定鏈接源在什么地方顯示(用戶自定義的名字,_blank,_parent,_self,_top);
rel="...",發送鏈接的類型;
rev="...",保存鏈接的類型;
accesskey="...",指定該元素的熱鍵;
shape="...",允許我們使用已定義的形狀定義客戶端的圖形鏡像(default,rect,circle,poly);
coord="...",使用像素或者長度百分比來定義形狀的尺寸;
tabindex="...",使用定義過的tabindex元素設置在各個元素之間的焦點獲取順序(使用tab鍵使元素獲得焦點).
action="...",接收數據的服務器的URL;
method="...",HTTP的方法(get,,post),其中get是被反對使用的;
enctype="...",指定MIME(Internet媒體類型);
onsubmit="...",當提交表單時發生的內部事件;
noreset="...",在重新設置表單時發生的內部事件;
target="...",決定把內容顯示在什么地方(_blank,_parent,_self,_top)
disabled="...",把按鈕的狀態設置為不能;
name="...",按鈕的控制名,value="...",按鈕的值;
type="...",按鈕的類型(button,,submit,,reset);
type="...",用于輸入控件的類型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一個單選鈕設置為選中的狀態;
disabled="...",把控件的狀態設置為不能使用;
readonly="...",只對輸入密碼的文本框使用;
size="...",表示以像素為單位的除了文本框和密碼框控件之外的其它控件的寬度,它是用來指定字符的數目;
src="...",一個圖像控件的URL;
maxlength="...",指定可以輸入的最多的字符數目;
alt="...",另外一種文本描述;
usemap="...",到客戶端圖形鏡像的URL;
align="...",被反對.控制對齊方式(left,,center,,right,,justify);
tabindex="...",通過定義的tabindex值確定在不同元素之間獲得焦點的順序;
onfocus="...",當元素獲得焦點時發生的事件;
onblur="...",當元素失去焦點時發生的事件;
onselect="...",當元素被選中時發生的事件;
onchang="...",當元素狀態被改變時發生的事件;
accept="...",允許上載的文件類型.
scr="...",定義在幀中顯示的內容的來源;
frameborder="...",定義幀之間的邊界(0或1);
align="...",被反對,控制對齊方式(left,,center,,right,,justify);
height="...",幀的高度,width="..."幀的寬度;
戶在填寫表格時可能會因為填寫流程過于復雜放棄填寫表格，所以，作為app表單設計師，就應當把盡可能簡化填寫表格的過程作為設計的目標。本文中，筆者將與大家分享一些可以幫助大家設計有效表格的技巧。
表格是所有移動互動的關鍵，它站在人和他們正在尋找的東西之間的橋梁。我們每天都使用表單來進行必要的在線活動。回想上一次你買了一張機票，預定了一個酒店房間或者網上購物，最可能是這些互動包含了一個填表的步驟。
表格只是達到目的一種手段。最終的目的應該是要讓用戶能夠快速、無混淆地完成這些任務。
在本文中，您將學習幫助您設計有效表單的實用技術。
每個表單的主要目標都是填寫完成。
有兩個因素對完成率有重大影響：
當用戶看到一個新表單時，首先要做的就是估計完成它所需的時間，用戶可通過掃描表單來做到這一點。
感知在評估過程中起著至關重要的作用。表單看起來越復雜，用戶就越有可能放棄這個過程。
交互成本是用戶為了達到他們的目標，而與界面交互的努力的總和——包括認知的和物理的。
交互成本與表單可用性有著直接的關系——用戶完成表單的努力越多，表單的可用性就越低。
高的交互成本可能是由于難以輸入的數據、無法理解某些問題的含義，或對錯誤消息的混淆造成的。
典型的表格由以下五個要素組成：
本文涵蓋了與結構、輸入字段、標簽、操作按鈕和驗證相關的許多方面。
本文中提到的大多數要點，都具有可視化的要做的示例，和不要做的示例，所有這些示例都是使用AdobeXD創建的。
接下來分別從這八個方面進行展開細講：輸入域、字段標簽、布局、操作按鈕、幫助與支持、易接近、測試設計決策、結論。
當涉及到表單設計時，設計師所能做的最重要的事情就是將打字的需求降到最低，減少投入是必不可少的。設計師可以通過關注表單領域的設計來實現這一目標。
1.1 最小化字段總數
您要求用戶填寫的每個字段都需要付出一定的努力。填寫表單所需的工作越多，用戶完成表單的可能性就越小。這就是為什么形式設計的基本規則更短更好的原因——擺脫所有不必要的領域。
Baymard研究所對結賬表格進行了分析，發現：結賬過程太長或太復雜是結賬過程中放棄的主要原因之一。
研究發現：平均簽出包含近15個表單字段，大多數在線服務可以將默認顯示的字段數量減少20%到60%。
許多設計師都熟悉“越少越多”的規則。不過，他們還是會問更多的問題，試圖收集更多關于他們的用戶的數據。在初始注冊期間收集更多關于用戶的數據可能很有誘惑力，但要抵制這種誘惑，可以這樣想：添加到表單中的每一個附加字段，都會增加失去潛在用戶的可能性。
您從某個領域獲得的信息是否值得失去新用戶？
請記住，只要您已經收集了用戶的聯系信息，您就可以隨時跟蹤請求獲得更多的數據。
1.2 <明確區分所有可選字段
在優化可選字段之前，問問自己是否真的需要將它們包含在表單中。想想你真正需要什么信息，而不是你想要什么。理想情況下，表單中的可選字段數應為零。
如果在頭腦風暴會議之后，您仍然希望在您的表單中包含一些可選的問題，請向用戶明確這些字段是可選的：
1.3 相應的大小字段
在可能的情況下，使用字段長度作為支持，輸入字段的長度應與該字段所期望的信息量成比例。字段的大小將起到視覺約束的作用——用戶將通過查看字段就知道需要輸入多少文本。
一般來說，諸如區號和房號之類的字段應該比街道地址的字段短。
1.4 提供領域焦點
自動對焦表單中的第一個輸入字段，自動對焦字段給用戶一個指示和一個起點，以便他們能夠快速開始填寫表單。
通過這樣做，您可以降低交互成本——為用戶節省了一個不必要的點擊。
使主動輸入字段突出和集中，該領域的焦點本身應該是晶瑩剔透的——用戶應該能夠理解一目了然的焦點在哪里。
它可能是帶有口音的邊框顏色，也可能是框的淡入。
1.5 提不要要求用戶重復他們的電子郵件地址
電子郵件地址的額外字段在產品開發人員中如此流行的原因是顯而易見的：每一家公司都希望將硬反彈（無效的電子郵件地址導致的無法交付）的風險降到最低。
不幸的是，遵循這種方法并不能保證您將得到一個有效的地址。用戶經常從一個字段復制和粘貼他們的地址到另一個字段。
1.6 提供“顯示密碼”選項
復制密碼輸入字段是產品設計人員中另一個常見的錯誤。
設計人員采用這種方法是因為：他們認為這樣可以防止用戶錯誤輸入密碼。
實際上，第二個密碼字段不僅會增加交互成本，而且也不能保證用戶不會出錯。因為用戶看不到他們在字段中輸入了什么，他們可能會犯兩次相同的錯誤（在這兩個字段中），并且當他們嘗試使用密碼登錄時會遇到問題。
正如Jakob Nielsen總結的那樣：
“當用戶輸入密碼而得到的唯一反饋是一行子彈時，可用性就會受到影響。通常情況下，屏蔽密碼甚至不會增加安全性，但由于登錄失敗，它確實會使您的業務損失。”
提供一個選項，允許用戶查看他們選擇創建的密碼，而不是重復密碼字段。有一個圖標或復選框，當單擊密碼時，該圖標或復選框將解除密碼掩碼。密碼預覽可以為用戶在發送之前檢查其數據提供一個機會。
1.7 不要分割數據字段
當詢問全名、電話號碼或出生日期時，不要分割字段。切片字段會迫使用戶進行額外的點擊以移動到下一個字段。對于需要某些格式（例如電話號碼或出生日期）的字段，最好讓單個字段與明確的格式規則匹配作為占位符。
1.8避免下拉菜單
盧克·沃羅博列斯基(LukeWroblewski)曾說過：跌落應該是萬不得已的UI。
下拉列表對于移動設備尤其不利，因為折疊元素會使數據輸入過程更難在一個小屏幕上進行：將選項放置在下拉列表中需要兩次點擊并隱藏選項。
如果您使用下拉列表來選擇選項，請考慮用單選按鈕替換它。他們將使所有選項都可以瀏覽，同時也降低了交互成本——用戶可以點擊該項目并立即進行選擇。
1.9 使用占位符和蒙面輸入
格式不確定性是表單設計中最重要的問題之一。
這個問題與放棄表單有直接關系——當用戶不確定他們應該提供數據的格式時，他們可以迅速放棄表單。有幾件事你可以做，使格式清楚。
1.9.1 占位文本
輸入字段中的文本可以告訴用戶所期望的內容。占位符文本對于諸如“全名”這樣的簡單字段并不是必需的，但是對于需要特定格式的數據的字段來說，占位符文本是非常有價值的。
例如：如果您設計用于跟蹤包裹的搜索功能，最好提供一個示例跟蹤編號作為跟蹤號字段的占位符。
重要的是，您的表單應該在占位符文本和用戶輸入的實際值之間，有一個清晰的視覺區別。
換句話說：占位符文本不應該像預設的值。
如果沒有清晰的視覺區分，用戶可能會認為帶有占位符的字段已經有了值。
1.9.2 遮擋輸入
字段掩蔽是一種幫助用戶格式化輸入文本的技術。許多設計師把字段掩蔽和占位符文本混為一談，但它們不是一回事。
與占位符不同，占位符基本上是靜態文本，掩碼會自動格式化用戶提供的數據。
在下面的示例中，當輸入電話號碼時，括號、空格和破折號會自動出現在屏幕上。
屏蔽輸入也使用戶更容易驗證信息——當一個電話號碼是塊顯示，它使它更容易找到和糾正一個錯誤。
1.10 提供匹配鍵盤
移動用戶喜歡為該領域提供合適鍵盤的應用程序和網站。此功能阻止它們執行其他操作。
例如：當用戶需要輸入信用卡號碼時，應用程序應該只顯示撥號盤。這在整個應用程序中始終實現鍵盤匹配是非常重要的（應用程序中的所有表單都應該具有此功能）。
設置HTML輸入類型以顯示正確的鍵盤。
有七種輸入類型與表單設計相關：
1.11 請求特定范圍時使用滑塊
許多表單要求用戶提供一系列的值（例如，價格范圍、距離范圍等）。為了達到這個目的，不要使用兩個單獨的字段——“From”和“to”，而是使用一個滑塊來允許用戶通過拇指交互來指定范圍。
1.12 清楚地解釋：你為什么要求敏感的信息
人們越來越關注隱私和信息安全。
當用戶看到他們認為是隱私的信息請求時，他們可能會想：“嗯，為什么他們需要這個？”
如果您的表單要求用戶提供敏感信息，請確保解釋您為什么需要它。您可以通過在相關字段下面添加支持文本來做到這一點。
根據經驗，解釋文本不應超過100個字符。
1.13 注意靜態默認值
與由系統根據系統擁有的有關用戶的信息計算的智能默認值不同，靜態默認值是以對所有用戶相同的形式預置值。避免靜態默認值，除非您相信有相當一部分用戶（例如，95%）會選擇這些值——特別是對于所需的字段。
為什么？
因為您可能會引入錯誤——人們會很快地掃描表單，并且不會花費額外的時間來解析所有的問題；相反，他們只會跳過這個字段，假設它已經有了一個值。
1.14 保護用戶數據
JefRaskin曾經說過：“系統應該把所有用戶的輸入視為神圣的。”
對于表格來說，這是絕對正確的。
當您開始填寫Web表單，然后意外刷新頁面時，這是很棒的，但是數據仍然保留在字段中。Garlic.js等工具會幫助您在本地持久化表單的值，直到表單提交為止。這樣，如果用戶不小心關閉選項卡或瀏覽器，就不會丟失任何寶貴的數據。
1.15 自動動作
如果您想使數據輸入過程盡可能流暢，那么僅減少輸入字段的數量是不夠的——您還應該注意數據輸入所需的用戶工作量。
打字的交互成本很高，即使使用物理鍵盤，也容易出錯，而且耗時。但當涉及到移動屏幕時，它變得更加關鍵。更多的輸入會增加用戶出錯的機會。
盡量避免不必要的打字，因為這樣會提高用戶的滿意度，降低錯誤率。
為了實現這個目標，您可以做以下幾件事：
自動完成：
大多數用戶在Google的搜索框中輸入問題時都會自動完成。
Google向用戶提供了與用戶在字段中鍵入的內容相關的建議列表。
同樣的機構也適用于形狀設計，例如：表單可以自動完成電子郵件地址。
自動大寫：
自動大寫使第一個字母自動成為大寫字母。
這個特性對于像名字和街道地址這樣的字段是很好的，但是對于密碼字段則要避免它。
自動糾錯：
自動更正修改似乎拼寫錯誤的單詞。對于唯一的字段，如名稱、地址等，請關閉此功能。
自動填寫個人資料：
輸入地址通常是任何在線注冊表單中最繁瑣的部分。通過使用瀏覽器函數根據以前輸入的值填充字段，可以簡化此任務。
根據谷歌的研究，自動填充可以幫助人們更快地填寫表格。
1.16 使用移動設備的本機功能簡化數據輸入
現代移動設備是一種復雜的設備，擁有大量驚人的功能。設計人員可以使用設備的本機功能(如照相機或地理位置)來簡化輸入數據的任務。
下面是關于如何使用傳感器和設備硬件的一些提示。
定位服務：
可以根據用戶的地理位置數據預選用戶的國家。
但是，由于準確性問題，有時預填完整的地址可能會有問題。Google的PlaceAPI可以幫助解決這個問題，它使用地理定位和地址預填充，根據用戶的準確位置提供準確的建議。
使用位置服務，還可以提供智能默認值。
例如：對于“查找航班”表單，可以根據用戶的地理位置使用最近的機場預先填充“FROM”字段。
生物鑒別授權：
今天使用文本密碼的最大問題是大多數人忘記密碼——82%的人不記得他們的密碼，5%到10%的會話要求用戶重置密碼。
在電子商務中，密碼恢復是一件大事——75%的用戶如果在簽出時嘗試恢復他們的密碼，他們就不會完成購買。
密碼的未來不是密碼。即使在今天，移動開發人員也可以利用生物識別技術。用戶不需要輸入密碼，應該就能夠使用生物識別閱讀器進行身份驗證——使用指紋或面部掃描進行簽名。
相機：
如果您的表單要求用戶提供其駕照上的信用卡詳細信息或信息，則可以使用相機作為掃描儀簡化數據輸入過程。提供一個選項，以拍攝一張卡片，并自動填寫所有細節。
但是請記住：無論您的應用程序填寫的字段有多好，都必須讓它們可供編輯，用戶應該能夠隨時修改字段。
聲音：
諸如Apple HomePod、GoogleHome和AmazonEcho等語音控制設備正在積極地蠶食市場，喜歡使用聲音進行共同操作的人數顯著增加。根
據ComScore的數據，到2020年，50%的搜索將是語音搜索。
隨著用戶使用語音命令變得更加舒適和自信，他們將成為移動交互的一個預期功能。
語音輸入為移動用戶提供了許多優勢——在用戶無法集中注意力在屏幕上的情況下，例如：開車時，語音輸入特別有價值。
在設計表單時，可以提供語音輸入作為數據輸入的替代方法。
由于此文章內容干活較多，需要讀者細心消化。故拆分為上下兩部分。
本文由 @Johnson 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
