# HTML figure 和 picture 標籤/CSS 賦予概念和優先權 / CSS display 介紹 / margin padding 介紹 ## HTML figure 獨立解析區域 ,figcaption解釋figure的內容 <figure> <img src="https://fakeimg.pl/200x200/200"> <figcaption> <h3>我是圖片問題解說員</h3> <p>這是我要說的內容</p> </figcaption> </figure> picture 支援不同裝置取用的圖片(min-width條件由大寫到小,大於設置值執行) <picture> <source media="(min-width: 1200px)" srcset="https://fakeimg.pl/250x250/900"> <source media="(min-width:768px)" srcset="https://fakeimg.pl/240x240/600"> <img src="https://fakeimg.pl/230x230/200"> </picture> video/audio 先支援先執行 (mp4,webm) 畫布 canvas (暫時不會用到) ### HTML5 特殊區塊Tag 1. <!DOCTYPE html> HTML文件的標準 2. header,footer 頁首頁尾 3. div (division) 4. span 5. article 文章 (至少要有一個標題H1) 6. section 區分區塊 (至少要有一個標題H1) 7. aside 側邊攔 8. main 主區域(IE不支援) 9. nav 導覽列 --- ---------------------我是分隔線--------------------- --- ## CSS * 用途:主要處理網頁視覺外觀 ### 屬性賦予方法 1. inline-style 2. 在HTML新增style標籤區塊，在裡面選取要設定的對象並賦予屬性。(style標籤通常會寫在head的區塊) 3. 開一個副檔名為CSS的檔案(HTML的head標籤裡要記得link CSS檔案) ( 1 ) HTML的head標籤裡要記得link CSS檔案 ( 2 ) CSS檔案可同時套用在不同的HTML檔案中 ### 選取器層級寫法 #### 在HTML可識別狀況下做選取，並賦予屬性。 下方假設HTML中對p標籤的設置 <p class="info secondstyle" id="ImFirst"> 1. CSS選取tag方式 (舉例: tag p) <style> p { color: brown; } </style> 2. CSS選取class方式 (舉例:p class="info") <style> .info { color: brown; } </style> 3. CSS選取id的方式 (一個HTML文件中不能有重複id) #ImFirst{ color: cornflowerblue; } 4. 全域選擇 ( * ) *{ color: bisque; } 5. Inline-Style (直接賦予style在tag上) <p class="info secondstyle" id="ImFirst" style="color: aquamarine;"> 6. !important <style> .info { color: brown !important; } </style> :::warning * 屬性賦予的優先權 !important> inline style> id> class> tag> 全域選擇>繼承 * 可以賦予多種屬性，HTML的舉例中p標籤屬性可以用空格同時賦予info和secondstyle兩種屬性。 * 當賦予屬性時發生衝突時，明確性越高優先權越高，同樣層級的狀況下則是將後面賦予的屬性蓋掉前面屬性。 * 若同時出現兩個!important，則依據屬性賦予優先權的標準來做比較 ::: ## 排版 ### display 1. inline 寬度為內容物(不能設寬度)，會跟其他物件排在同一列 2. block 可設定寬跟高，但不會跟其他物件排在同一列 3. flex (設置後會對子層產生作用) 可與其他物件排在同一列，也可設定寬跟高 (1)父層設置對子層產生作用(變成可以排在同列的block) (2)子層排列預設橫排 (3)子層若超過父層的寬度，在不要小於父層的寬度的情況下，可以的壓縮在父層的寬度(nowrap狀態下不適用) :::warning margin : 區塊和區塊的距離 padding : 內容物到自己區塊邊緣的距離 * 設置margin和padding後做寬度計算時，設置的是對單邊的距離，所以記得左右都要計算到。 * 置中小技巧 : 左右margin設置auto * text-align : 設置內容文字的水平排列方向 * line-height設置為box的大小可以實現單行文字的垂直居中 (行高介紹:https://www.cnblogs.com/huchong-bk/p/11504834.html) ::: --- * VScode檔案管理區設置 管理-搜尋「tree」-找到「Workbench › Tree: Indent」-設置縮排可更改右側檔案總管縮排 ---