HTML & CSS - HackMD

# HTML & CSS ## HTML - [[HTML] lang 標籤 - 語系設置](https://hackmd.io/@Shen-An/B1ff7Cw8F) - [[HTML] header資訊](https://hackmd.io/@Shen-An/H1wCRydZK) - [[HTML] HTML5 & HTML4](https://hackmd.io/@OHZRCATvRi6_DK0T-HpKpA/Bypqk_teK) - [[HTML] head 中的 meta 是甚麼？](https://hackmd.io/@OHZRCATvRi6_DK0T-HpKpA/SJ-BGuKeF) - [[HTML] DOM 網頁元素](https://hackmd.io/exnthTR8RXe72NjYB9c3gQ) - [[HTML] `<img>` 圖片處理](https://hackmd.io/@OHZRCATvRi6_DK0T-HpKpA/BkSIrdFxt) - [[HTML] `<a>` 超連結](https://hackmd.io/@OHZRCATvRi6_DK0T-HpKpA/rJx2vOtgY) - [[HTML] `<ul>` `<li>` 列表標籤](https://hackmd.io/@OHZRCATvRi6_DK0T-HpKpA/BywId_YlK) - [[HTML] `<br>` 換行](https://hackmd.io/@Shen-An/rkVaicxKK) - [[HTML] 表格 (Table)](https://hackmd.io/@Shen-An/Hkqr-x4bY) - [[HTML] 表單 (Form)](https://hackmd.io/@Shen-An/rki750Ebt) - [[HTML] `data-` 自訂屬性](https://hackmd.io/@Shen-An/SJK4XzfMF) ## CSS - 基礎 - [[CSS] 基礎 CSS](https://hackmd.io/@OHZRCATvRi6_DK0T-HpKpA/HJjoh49xF) - [[CSS] CSS 字體單位(px、rem...)](https://hackmd.io/@Shen-An/S1_i-tx7F) - [[CSS] 標籤(HTML tag)選擇器](https://hackmd.io/@Shen-An/BJHqGSqgF) - [[CSS] 擬態選擇器](https://hackmd.io/@Shen-An/BJ5QUB5gF) - [[CSS] 類別 (class) 選擇器](https://hackmd.io/@Shen-An/rJVz_HqxY) - [[CSS] 文字樣式](https://hackmd.io/@Shen-An/Bye7kU5lt) - [[排版-CSS] text-align 文字水平調整](https://hackmd.io/@Shen-An/rkQS5UalK) - [[CSS] border 邊框](https://hackmd.io/@Shen-An/SkLavIqgt) - [[CSS] CSS Reset](https://hackmd.io/@Shen-An/SyLzyA9xF) ## HTML 排版 & CSS - [[排版-HTML] display 區塊元素 & 行內元素](https://hackmd.io/@Shen-An/rJSbXcjeY) - [[排版-HTML] 區塊元素 `<div>`](https://hackmd.io/@Shen-An/HJhV3znet) - [[排版-CSS] 後代選擇器](https://hackmd.io/@Shen-An/BJID6MhlK) - [[Box Model] margin](https://hackmd.io/@Shen-An/Hk3fG7ngY) - [[Box Model] padding](https://hackmd.io/@Shen-An/S1D7IX2xY) - [[Box Model] margin、padding 差異](https://hackmd.io/@Shen-An/BJV-uXngF) - [[Box Model] Box Model（盒模型）](https://hackmd.io/@Shen-An/B1XYFJpxY) - [[Box Model] margin 區塊水平置中](https://hackmd.io/@Shen-An/rkA_5xpgY) - [[CSS] box-sizing](https://hackmd.io/@Shen-An/rJJjAITgY) - [[CSS] background 背景](https://hackmd.io/@Shen-An/B1GYfBmWF) - [響應式圖片選用技巧](https://wcc723.github.io/design/2018/11/01/responsive-images/)[target=_blank] ## CSS - Flex 排版 - [[CodePen] Flex 六角線上模擬器](https://hexschool.tw/flexEditor)[target=_blank] - [[CodePen] Flexbox playground](https://codepen.io/enxanetaa/full/adLPwv)[target=_blank] - [[外部筆記] 卡斯柏圖解：CSS Flex](https://wcc723.github.io/css/2017/07/21/css-flex/)[target=_blank] - [[Flex] 基本介紹](https://hackmd.io/@Shen-An/HJMY1B0lK) - [[Flex] 外層屬性 (Container)](https://hackmd.io/@Shen-An/H1x-WuFRgY) - [[Flex] 主軸相關介紹](https://hackmd.io/@Shen-An/Hk6Hgh0eK) - [[Flex] 交錯軸相關介紹](https://hackmd.io/@Shen-An/B1Xezc1-t) - [[Flex] Flex 中包 Flex](https://hackmd.io/@Shen-An/HyziKq1WY) - [[Flex] `flex-direction: column;` 運用](https://hackmd.io/@Shen-An/rJUZ4-xWt) - [[Flex] 內元件 flex](https://hackmd.io/@Shen-An/Hk6ZKkVUK) ## CSS - Grid 排版 - [[Grid] Grid 排版](https://hackmd.io/@Shen-An/SJU2ilNIY) ## CSS - Position 定位 - [[CSS] 絕對定位 / 相對定位](https://hackmd.io/@Shen-An/Byw2WkZbK) - [[CSS] z-index](https://hackmd.io/@Shen-An/HkTip7GbY) - [[CSS] position: fixed](https://hackmd.io/@Shen-An/ByC28ofZY) ## CSS - 區塊效果 - [:star:[CSS] 權重觀念](https://hackmd.io/@Shen-An/SJo1wuDbK) - [[CSS] 圓弧效果](https://hackmd.io/@Shen-An/S1eHB7UbF) - [[CSS] 漸層效果](https://hackmd.io/@Shen-An/SkgnaQUZt) - [[CSS] 陰影效果](https://hackmd.io/@Shen-An/rkplk98WF) ## SASS - [[Sass] 甚麼是 Sass？](https://hackmd.io/@Shen-An/BJjnfRWQF) - [[Sass] 搭配 webpack 使用 Sass](https://hackmd.io/@Shen-An/BJim9dUUF) - [[Sass] 變數與樣式內聯的寫法](https://hackmd.io/@Shen-An/ByqoAcLLK) ###### -外部參考 - [SASS 7+1結構 | Wendy筆記](https://wendyblogspots.blogspot.com/2020/12/sass-71.html)[target=_blank] - [Sass : BEM 命名](https://medium.com/@tina2793778/sass-bem-%E5%91%BD%E5%90%8D-b6af4539babd)[target=_blank] - [30天掌握Sass語法](https://ithelp.ithome.com.tw/users/20040221/ironman/562)[target=_blank] - [Sass3.3 & CSS設計模式](https://ithelp.ithome.com.tw/users/20040221/ironman/727)[target=_blank]