整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，這篇文章跟大家分享如何對Word文檔文本框中的數字和英文字母進行豎排。數字和英文字母的豎排方法是一樣的，本文以豎排數字為例進行演示。
將下面圖1中的橫排文字“戀曲1990”變成圖2中的豎排樣式，數字“1990”直立顯示。
圖1
圖2
1.在文檔中輸入一個橫排文本框，輸入要排版的文字“戀曲1990”。選中文本框，在“繪圖工具”“格式”選項卡“文本”功能組中單擊“文字方向”按鈕，在下拉列表中選擇“垂直”。
此時，可以看到文本框中的中文文字“戀曲”已經進行了豎排，但是數字“1990”是橫躺的，需要進行調整。
2.保持文本框處于選中狀態，在“開始”選項卡“字體”功能組中單擊“更改大小寫”按鈕“Aa”，在彈出的下拉列表中選擇“全角”。此時，可見文本框中的數字“1990”已經全部由橫躺變成了直立。
本文由@靜心辦公
輯導讀：文本框的出現幾乎可以追溯到可視化交互誕生的源頭，是一個再經典不過的“鼻祖”控件了。我們每天都在和文本框打交道，不論你是產品設計者還是用戶。然而，越是顯而易見的東西越容易被我們忽略掉細節。今天作者就和大家一起來梳理一下文本框，一起來看看~
文本框（Text Fields）根據 Material Design 指導規范，被拆解為七個部分。分別是：
當然，MD為我們展示的是已經經過其團隊長期摸索之后，基于其平臺規范下的標準樣式。想要探索文本框的交互演變，我們還是要回溯到文本框最初的模樣。
這就是一個文本框最基礎的樣式了，一個標簽文本+容器，已經基本可以確保向用戶傳遞文本框最直觀的信息。
但如今的文本框已經演變出了形形色色的樣式和交互形式，究竟MD的文本框是如何演變到今天這番樣子？下面我根據個人的拙見，一步一步從場景進行分析。
我自認為，激勵設計師不停探索文本框新的交互形式的根本原因之一，一定包含總讓人頭疼的排版問題。在解決了基本視覺問題之后，才是思考如何設計文本框來提升用戶的填寫和使用效率。
例如前面我們所看到的最基礎的文本框樣式，如果簡單地進行單列布局，自然而然會出現讓眾多設計師糾結的一個問題：標簽文本究竟應該如何對齊？
如果標簽文本采用右對齊，標簽文本的長短問題容易導致左側的視覺隱形邊界錯亂，用戶的規律眼動容易被打亂；
如果標簽文本采用左對齊，文本的長短問題又會導致部分較短標簽文本與容器間距增大，讓用戶從左至右瀏覽的效率降低，并且看起來不夠協調。
于是乎文本框的布局方式有了進一步的演變：標簽文本與容器頂端對齊。
頂端對齊的方式使得用戶眼動變得十分規律，豎直向下瀏覽可以便捷地理解標簽文本并進行填寫，文本的長短問題不再成為干擾設計師進行排版的一個糾結點。
但縱向布局的的方式只是把問題遷移到了另一個維度，那就是在表單數據量過多時，縱向布局會使得縱向空間耗損增加，用戶需要不停地滑動頁面才能實現表單的完整填寫。
這么看來，文本框的布局需要多方位評估標簽文本長度、表單數據量等問題，才能對具體場景進行有效設計。
當文本框橫向布局或是縱向布局都很難解決具體場景問題的時候，更新穎的文本框交互形式就出現了。
最初的演變形式是眾多的應用開始采用前導圖標來替代標簽文本，使用圖標可以有效地解決標簽文本導致的排版錯落問題。
這種方案在輕量表單中較為常見，一般都是在表單內容少、用戶對于場景的熟悉度較高的情景當中（例如登錄場景）。
因為每個用戶對于圖標的認知性存在差異，在生疏場景或表單內容過多的情況下，圖標容易導致用戶對文本框信息產生更多的認知成本。所以用圖標來代替標簽文本的普適性其實并不高。
于是后來 iOS人機交互規范 和 MD規范 都給設計師提出了一條指導建議：當占位符字段中不包含必要內容時，可以合理地使用占位符來承載標簽文本。
例如 iOS 通訊錄新增聯系人，就采用了占位符承載標簽文本的方式。
但這種形式同樣也存在一個弊端：用戶一旦輸入內容之后，占位符就被內容文本填充覆蓋了，有時用戶會忘記所填寫的信息是關于什么內容，必須要清空文本進行重新確認。對于表單內容繁多或重要內容需要謹慎填寫的場景，這樣的交互其實還是有一些不妥。
于是乎，類似MD的指導規范下這樣普適性較高的文本框形式就誕生了。采用占位符承載標簽文本，并且在用戶填寫信息時，標簽文本始終可見，由占位符轉移到文本框頂部。
這一文本框交互形式的誕生，不論是對于排版空間的節省、遵循用戶眼動習慣、微動效提升文本框趣味性等方面，都得到了一定提升。并且許多應用開始進行借鑒效仿。
其實像以上這種巧用占位符的場景已經越來越常見了，占位符已經不再僅僅用來承載無用信息或提示性信息，也可以用于承載默認值，幫助用戶自動填充，提高用戶填寫信息的效率（例如手游當中，創建賬號時系統幫玩家默認填充一個可用昵稱）。
但填充默認值的手法也不僅僅局限于提升用戶體驗和填寫效率，甚至也被運用到了一些商業場景中。
例如淘寶、京東等電商平臺，將商品名稱作為占位符填充在搜索欄中，一方面給所推薦商品增加了曝光；另一方面，在用戶直接點擊搜索時，將會以當前占位符內容進行搜索，達到為所推薦商品引流的效果。
合理的反饋機制對于提升用戶填寫文本框效率也起著重要的作用，MD規范中的幫助文本不僅僅是告訴設計者可以用于指導用戶該如何正確填寫文本框信息，也為反饋提示提供了展示空間。
MD的反饋狀態可以歸納為以下幾種：
在這里我大概總結了一下文本框的負反饋提示信息，希望在你設計表單的時候，能夠幫助到你對負反饋提示狀態進行走查（可能不全，歡迎補充）：
及時給予用戶負反饋，可以讓用戶清晰地排查所發生的錯誤。但交互設計講究“以人為本”，在某些場景中，當用戶所填寫的信息是合理的，及時地展示正向反饋也是有必要的。
例如，部分應用在用戶創建賬號的場景中，當用戶輸入賬號信息后，系統將立刻檢索用戶的賬號是否已存在在當前數據庫中，避免用戶忘記已創建過該賬號而進行重復創建的徒勞步驟。
所以不要狹隘地認為MD所給到的幫助文本只能用于“批評”用戶（負反饋），當用戶做了正確的事時，也應該適當地激勵用戶，這也正符合了尼爾森可見性原則。
UCD耍家，公眾號：UCD耍家（ID：ucdplayer），人人都是產品經理專欄作家。
本文由 @UCD耍家 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
.h1-h6標簽
都是標題標簽，定義一段話的標題，h1最大，依次遞減，h6最小
標題標簽的作用：讓文本加粗顯示
2. 段落標簽：p標簽
用來顯示一段文本(圖片)，它會忽略源代碼中的排版
塊元素：獨占一行的元素，和相鄰的元素不能共享同一行,所有的塊元素都有align屬性,h1-h6和p元素都是塊元素
3. 格式標簽：
b標簽：加粗文本
del標簽：包含的文本中間有條橫線
em標簽：包裹的文本會顯示為斜體
i標簽：包裹的文本會顯示為斜體
pre標簽：顯示源代碼的排版
strong標簽：和em作用一樣，都有強調的意思，如果要強調一段文字，建議使用strong標簽
u標簽：給文本添加下劃線
sup：定義上標文本
sub:定義下標文本
4. 圖片標簽img，用來把圖片顯示在網頁上
必須屬性:1.src:圖片的路徑(可以用相對路徑或絕對路徑，不建議用絕對路徑)
alt:定義圖片無法顯示時的代替文本
相對路徑：以當前文件所在的位置為參考路徑,定義出來的路徑叫相對路徑
絕對路徑：文件在硬盤上的物理路徑叫絕對路徑,
例如：
D:\work181129JAVA班\課件-web前端課件\web-day1\Code\web-day1\img\tly.jpg
可選屬性：
1.title：鼠標放在圖片上時的提示文字,所有元素都有title屬性
2.width:定義圖片的寬度，默認以像素px為單位，可以省略單位不寫
3.height:定義圖片的高度
br標簽：換行標簽，可以寫成<br>或者<br/>
hr標簽：水平線標簽，可以寫成<hr>或者<hr/>,屬性有：width(寬度),size(高度),color(顏色)
5. span:通常用于修飾文本，可以給它添加樣式，例如style="color: red;"
div:把文檔分割成若干個獨立的部分 ,塊級元素
6. ul定義無序列表，type屬性定義列表項目的標記，默認是disc
type="disc" 默認黑色圓點
type="circle" 空心圓點
type="square" 方塊
ol定義有序列表，type屬性定義項目的標記，默認是數字
type="A"或"a":表示大寫字母或者小寫字母
type="I"或type="i"：表示羅馬大寫字母或羅馬小寫字母
7. border:定義表格的邊框屬性
cellspacing:單元格之間的距離，設置為0則只有1條邊框了
cellpadding:單元格的內容到邊框之間的距離
8. 表頭：表格中的第一行，用來顯示列標題的，使用th定義表頭的每一列，把里面的內容加粗居中顯示
通常，第一行是表頭行，從第二行開始就是數據行(顯示具體的數據),
使用td(table data cell )表示數據行每一列
表格的align="center"：讓表格整體居中顯示
tr(table row)的align="center"：讓行里面的內容居中顯示
caption：定義表格的標題，會相當于表格居中
9. colspan:跨列，即在水平方向上合并單元格，值是要合并的單元格數目
rowspan:跨行，即在豎直方向上合并單元格，值是要合并的單元格數目
10. form:表單標簽，用于創建一個表單，收集用戶輸入的數據，并提交給服務器程序
屬性:action:指定將表單的數據發送到哪個服務器程序
method:指定用哪種方式來提交數據，常用值有GET,POST，默認值是get
表單域：又叫表單元素，作用是收集用戶輸入的數據 ，并提交給服務器端程序
常用的表單域：1.input元素：它的type屬性有不同值，表現出不同形態
type="text":表示文本框，提供文本的輸入
type="radio":單選框(單選按鈕)， 多個單選框的name值必須相同，如果name不同則不能互斥，提交時是提交value值
type="checkbox":復選框，當name相同時，可以提交多個值(value屬性的值)
type="file"":文件域，讓用戶選擇本地文件上傳到服務器
type="hidden":隱藏域，對用戶不可見的元素，可以有默認值并且能提交給服務器(在javaEE開發中會大量使用隱藏域)
2. select元素：表示下拉列表，又叫下拉框，在下拉列表中用option元素定義待選擇的選項，默認第1個選項被選中，
設置某個option被選中： 在option元素上添加selected="selected"或者selected
設置下拉列表為多選下拉列表：在select元素上加multiple屬性
關于選中元素的設置：
1)設置單選框或復選框被選中的屬性是checked
2)設置下拉列表的某個選項被選中的屬性是selected
11. body標簽：
1.background：定義網頁的背景圖片，如果背景圖片很小，會自動在水平和豎直方向上平鋪展示
2.bgcolor:定義網頁的背景顏色
12. textarea:文本域，又叫多行文本框,cols是文本區內的寬度,rows:行數
placeholder：用來設置單行文本框(不是textarea)里的默認提示文字，當輸入了新的內容后，該提示文字就消失了
label：本身沒有什么效果，當結合單選按鈕或復選框使用時，如果label的for屬性和按鈕的id相同，則點擊
label后就相當于點擊了按鈕，會將單選框或復選框選中
表單按鈕：
1.提交按鈕： <input type="submit">，提交按鈕作用是將表單數據發送到action指定的服務器上
2.重置按鈕： <input type="reset">，作用是將表單中數據清空
3.普通按鈕：<input type="button">，普通按鈕在沒有添加js代碼情況下，是不能提交表單的
13. frameset:框架集，用于將整個瀏覽器窗口劃分成多個小窗口，每個小窗口稱為一個frame，每個小窗口(frame)都可以,加載一個獨立的html文檔
使用frameset的cols或rows屬性定義如何分割整個大窗口，
cols:定義水平方向上分割的各個frame的百分比,
rows：定義豎直方向上分割的各個frame的百分比,
noresize:不能調整frame的寬或高 frameborder="0":去掉frame的邊框
*代表剩余百分比，會自動計算
使用frame來定義每個小窗口，src指frame所加載的網頁的相對路徑
14. iframe:能夠包含其它文檔(網頁)的內聯框架，內聯就是行內，因為它能和相鄰的元素共享同一行
src:要加載的文檔的路徑 width:寬度，height:高度
frameborder:邊框，0或no代表無邊框
15. 將超鏈接所跳轉的頁面顯示在iframe的技巧:
1)給iframe元素添加一個name屬性,例如
2)超鏈接添加屬性target，值應該是iframe元素的name
16. 實體集
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
