标签：isp 用途 大小 背景图 依赖 maxlength check 字体 其他
| （一）三表 | 用途 | |
|---|---|---|
| list列表 | 整齐布局 | ul先到先得，ol有序排列，还有个自定义【dl>dt>dd】 |
| table列表 | 展示数据结构 | 【caption table>th/tr>td（thead标题 tbody数据 tfoot脚注）】 |
【border/cellspacing/cellpadding表格边框/相邻单元格外边间距/单元格内外边间距三参为0（去重叠可用border-collapse）】 |
||
| 【跨单元格 柱列colspan 横行rowspan】 | ||
| form表单 | 收集用户信息 | 表单域action--服务器脚本 |
表单控件type="date" name maxlength |
||
提示信息<label for="">扩大热区<input id=""> |
||
| 其他属性textarea/seclect/option | ||
checkbox的name=“ [ ]”加中括号表示告诉后台服务器脚本含多个值 |
||
| value | 光标聚焦保留值，一并打包发送后台 | |
| placeholder | 仅作背景，光标输入自动去掉提示信息 |
（二）img图像，格式优先考虑webp>jpg>png>svg>png24>png8>gif
| 格式 | 特点 | 应用 |
|---|---|---|
| ①png | 透明，文件大，色彩多 | 【小LOGO、透明背景】 |
| png24 | 控制在40kb，色彩少 | |
| png8 | 文件小，色彩单一 | |
| ②jpg | 不透明，文件小，色彩中 | 【轮播/广告、大背景/产品】 |
| 图片大小控制在40~200kb | ||
| ③gif | 单一透明，色彩少 | 【动图】 |
| ④webp | 透明动态，且文件小 | 【部分支持的浏览器，如Chrome】 |
| ⑤ico | 字体图徽，文件小 | 【标签页title/小图徽】 |
| ⑥svg | 缩放矢量，依赖代码<svg> |
【可编辑，SEO爬虫可读取】 |
【1】插图和背景区别
①.前者为产品展示，移动位置靠盒模型margin padding
②.后者为小图标或超大背景图，只能通过background-position
【2】去除图片底侧空白
①思路：不让img、input行内块与父盒子基线对齐
②vertical：top 或 display：block
标签：isp 用途 大小 背景图 依赖 maxlength check 字体 其他
原文地址：https://www.cnblogs.com/MaricoCheung/p/13375166.html
