# 2023-2-14 HTML
###### tags: `HTML` `CSS`
HTML標籤語意的正確性會影響SEO -> 轉換率
以Google SEO的建議：==一個網頁只有一個`h1`，`h`不要跳階層==
## img

<!-- 相對路徑 -->
<img src="pic/pic01.webp" alt="pic01的替代文字">
<!-- 絕對路徑（要用Live Server來檢視） -->
<img src="/pic/pic02.webp" alt="pic02的替代文字">
<!-- 網址 -->
<img src="https://xxxx/pic03.webp" alt="pic03的替代文字">

## img語意
HTML5是HTML, CSS, JS三個的技術組合，其中HTML的語意組合更豐富且明確

<!-- figure不影響主內容流 -->
<figure>
    <img src="https://dmh6legpso131.cloudfront.net/images/logo.svg" alt="5xRuby icon">
    <figcaption>
        <h2>title....</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor cum nisi id? Aut iure itaque, dolor harum asperiores aperiam earum corrupti reprehenderit, facere at perferendis odit facilis laboriosam doloremque voluptates.</p>
    </figcaption>
</figure>

<!-- RWD適合用picture寫 -->
<picture>
    <!-- 參考來源for桌機 -->
    <source srcset="pic/..../來源圖片1.jpg" media="(min-width: 1200px)">
    <!-- 參考來源for手機 -->
    <source srcset="pic/..../來源圖片2.jpg" media="(min-width: 768px)">
    <img src="pic/.../預設圖片.jpg" alt="">
</picture>

## 表格

<table width="500" border="3">
    <caption>caption title</caption>
    <thead>
        <tr>
            <th>title</th>
            <th>title</th>
            <th>title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>body:</td>
            <td>data1</td>
            <td>data2</td>
        </tr>
        <tr>
            <td>body:</td>
            <td rowspan="2">data3</td>
            <td>data4</td>
        </tr>
        <tr>
            <td>body:</td>
            <td>data5</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>foot:</td>
            <td colspan="2">data</td>
        </tr>
    </tfoot>
</table>

## 好用的VScode Extensions
- Auto Rename Tag
- Chinese Lorem
- CSS Variable Autocomplete
- Fake Image Snippet Collection (關鍵字：fakeimg, picsum)
- Live Server