"一切美好的事物都是曲折地接近自己的目標，一切筆直都是騙人的，所有真理都是彎曲的，時間本身就是一個圓圈，好比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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/4011.html
標籤：Html/Css
上一篇：HTML常用標簽(上)
下一篇：HTML屬性及其相關區別