整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，这篇文章跟大家分享如何对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小时内与您取得联系。
