HTML标签区别

"一切美好的事物都是曲折地接近自己的目标，一切笔直都是骗人的，所有真理都是弯曲的，时间本身就是一个圆圈。好比HTML的标签有始有终"
——有心人做有心事哦，晚安Emily！

---

（一）三表	用途
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