在网站制作后台程序时提交文字和图片时可以设置文字和图片属性的

做网站后台的时候，最常碰到的就是提交文字和图片。很多初学者觉得这就是往数据库里塞数据，没啥讲究。真做起来才发现，这里面的门道比你想象得多。你要是不设置属性，前台显示效果就会一团糟，自己看都想砸电脑。

先说说文字。文字提交到后台，最基本的属性就是字体、字号、颜色、行高、对齐方式。这些属性你要是图省事不设置，浏览器就会按默认样式显示。默认字体一般是宋体，字号是16px，行高大概1.2倍。说实话，这种样式说不上丑，但肯定谈不上好看，跟你的网站设计风格多半也对不上。

文字属性里最容易被忽略的是换行处理。你提交的文字内容，用户在前台输入的时候按了回车换行，存进数据库后，如果你在页面输出的时候没做处理，这些换行就全没了，文字会挤成一坨。你可能会说，用textarea控件提交的不就是带换行符的吗？问题在于HTML渲染的时候，多个空格和换行都会被合并成一个空格。你得住转换一下，把换行符变成
标签，或者用CSS的white-space属性设置一下，让内容保留原有格式。

另一个容易踩坑的是文字截断。你后台列表页要显示文章摘要，不可能把整篇文章全显示出来，得截断。但你要是直接用substr函数截断中文字符，很容易出现半个汉字的情况，页面上就出现一个问号或者乱码。这就得用专门处理多字节字符的函数，或者用CSS加省略号统一处理。

再说图片。图片属性比文字还复杂些。最基本的宽度和高度是必须设置的，但你得考虑一个实际问题——用户上传的图片尺寸五花八门，有大有小。你在后台设定了一个固定宽度，比如600px，用户上传了一张800px宽的图片，你要么压缩，要么裁剪。这里就得有个处理策略，是等比缩放还是直接裁剪，得根据你的页面布局来定。

图片还有个属性常被忽略，就是压缩质量。你一张原图可能三五兆，直接传到服务器，用户打开页面的时候加载就慢了。得压缩一下，但压缩太狠图片模糊，压缩太少文件还是大。一般设为JPEG格式，质量参数设置在75到85之间，能在视觉效果和文件大小之间取得平衡。PNG格式则要注意，不适合照片类图片，文件会特别大。

图片的对齐方式也挺讲究。你发一篇文章，图片是居中、居中还是居中？大多数情况居中没错，但图文混排的时候，经常需要图片靠左或靠右，文字围绕。这个属性很多人在后台都不处理，结果前台图片全挤在一侧，排版特别奇怪。

图片还有个关键属性是alt文本。这个很多人不做，觉得影响不大。但从SEO角度看，搜索引擎看不见图片内容，只能靠alt文本来判断图片讲的是什么。你提交图片的时候，顺便要求填写alt描述，对于网站收录是有实际帮助的。另外，图片加载失败的时候，页面上显示的就是alt文本，对用户体验也是个兜底。

还有图片的边距也得注意。图片跟周围的文字、其他元素之间得有适当的留白，不然页面看起来特别挤。这就是margin和padding的设置，一般给图片设置个四周的边距，比如底边距留10到20px，视觉上就舒服很多。

这些属性设置好了，后台提交功能才算靠谱。很多程序员觉得功能能跑就行，属性这些属于锦上添花，其实不是这样的。用户的耐心很有限，页面排版乱、图片变形、文字看不清，人家就直接关掉了，流量就流失了，之前苦心做出来的内容全白费。

另外提一嘴，后台提交文字和图片的时候，安全属性也得重视。富文本编辑器是常见的注入点，用户提交的内容里可能藏着恶意代码，你得过滤掉script标签，只保留安全的HTML标签。图片的话，要检查文件类型和文件头是否匹配，防止用户上传伪装的恶意文件。这些属于安全层面的属性设置，虽然没有视觉表现，但同样重要。

回头想想，后台提交这个环节，涉及属性设置的点还真不少。文字方面有字体、字号、颜色、行高、对齐、换行、截断，图片方面有宽高、压缩、对齐、alt描述、边距。每一项都不难搞定，但你要是忽略它们，后面就有填不完的坑。做网站开发就是这样，细节决定体验，体验决定成败。下次做后台的时候，花点时间把这些属性都设置妥当，前台效果和用户满意度都会明显提升。