1.input与textarea的区别
<input>是单行文本框，不会换行。通过size属性指定显示字符的长度，注意：当使用css限定了宽高，那么size属性就不再起作用。
value属性指定初始值，Maxlength属性指定文本框可以输入的最长长度。可以通过width和height设置宽高，但是也不会
增加行数。
<textarea> 是多行文本输入框，文本区中可容纳无限数量的文本，无value属性，其中的文本的默认字体是等宽字体（通常是
Courier） ，可以通 过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
代码：
<div>
input:<input value="啦啦啦啦啦" style="height:200px;width: 500px;">
</div>
<div style="margin-top: 20px;">
textarea:</textarea><textarea value="嘻嘻嘻" style="height:200px;width: 500px;">
</textarea>
</div>效果图：
可以看到：textarea中设置的value并没有显示，同时input文本依然只有一行，并且居中显示。
2.用div模拟textarea
扫描二维码关注公众号，回复：
3187995 查看本文章
作为多行文本域功能来讲，textarea满足了我们大部分的需求。然而，textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条，高度固执地岿然不动。
要解决这个问题很简单，一个普通的block元素上加个contenteditable="true"就ok了。
<div contenteditable="true"></div> 效果图:
代码：
<style>
.textarea{
min-height: 100px;
border: 1px solid #a0b3d6;
width: 300px;
font-size: 14px;
max-height: 300px;
overflow-y: auto;
}
</style>
</head>
<body>
<!--<div>
input:<input value="啦啦啦啦啦" style="height:200px;width: 500px;">
</div>
<div style="margin-top: 20px;">
textarea:</textarea><textarea value="嘻嘻嘻" style="height:200px;width: 500px;"></textarea>
</div>-->
<!--用div模拟textarea-->
<div class="textarea" contenteditable="true">
</div>
</body>给div设置了一个最小高度，当超过最小高度但不超过最大高度时，div的高度根据文本自适应，当超过最大高度时，出现滚动条。