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
		提示信息<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