（一）三表 用途 list列表 整齊佈局 ul先到先得，ol有序排列，還有個自定義【dl>dt>dd】 table列表 展示數據結構 【caption table>th/tr>td（thead標題 tbody數據 tfoot腳註）】 【border/cellspacing/cellpadding表格 ...
| （一）三表 | 用途 | |
|---|---|---|
| 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
