HTML标签区别
2021-01-16 20:15
标签：isp 用途 大小 背景图 依赖 maxlength check 字体 其他 （二）img图像，格式优先考虑webp>jpg>png>svg>png24>png8>gif 【1】插图和背景区别 【2】去除图片底侧空白 HTML标签区别 标签：isp 用途 大小 背景图 依赖 maxlength check 字体 其他 原文地址：https://www.cnblogs.com/MaricoCheung/p/13375166.html
（一）三表
用途
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
提示信息
扩大热区
其他属性textarea/seclect/option
checkbox的name=“ [ ]”加中括号表示告诉后台服务器脚本含多个值
value
光标聚焦保留值，一并打包发送后台
placeholder
仅作背景，光标输入自动去掉提示信息
格式
特点
应用
①png
透明，文件大，色彩多
【小LOGO、透明背景】
png24
控制在40kb，色彩少
png8
文件小，色彩单一
②jpg
不透明，文件小，色彩中
【轮播/广告、大背景/产品】
图片大小控制在40~200kb
③gif
单一透明，色彩少
【动图】
④webp
透明动态，且文件小
【部分支持的浏览器，如Chrome】
⑤ico
字体图徽，文件小
【标签页title/小图徽】
⑥svg
缩放矢量，依赖代码
【可编辑，SEO爬虫可读取】
①.前者为产品展示，移动位置靠盒模型margin padding
②.后者为小图标或超大背景图，只能通过background-position
①思路：不让img、input行内块与父盒子基线对齐
②vertical：top 或 display：block