# 6/7 HTML

###### tags: `html完整`

10堂課程的日程規劃

html - 基礎概念原理
html - SEO
CSS - 作用 撰寫位置/方法(語法)
CSS - 優先權 選取器 CSS reset
CSS - 定位 盒模型 inline block
CSS - flex
CSS - grid
RWD - 手刻
RWD - 手刻
RWD - bootsstrap

課程需預習以及了解的

金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre

金魚都能懂的CSS必學屬性
https://ithelp.ithome.com.tw/users/20112550/ironman/3803?sc=iThelpR

金魚都能懂的 CSS 選取器
https://ithelp.ithome.com.tw/users/20112550/ironman/2799

SEO -> 搜尋引擎最佳化

## HTML 標籤

<標籤 屬性="值">呈現資料</結束標籤>

<h1><h2><h3><h4><h5><h6> 大至小標題

<P> 段落
<br> 強迫換行

<img src="圖片途徑" alt="圖片(掛掉)代替文字">圖片

<div> 區塊標籤

<ul> 無序清單
<ol> 有序清單

<dl> 清單
<dt> 項目 Q
<dd> 描述 A

<a href="網址">呈現資料 超連結

圖片與描述
<figure>
    <img src="圖片途徑"
         alt="圖片(掛掉)代替文字">
    <figcaption>圖解說明</figcaption>
</figure>

裝置圖片版本控制
<picture>
    <source srcset="圖片途徑1"
            media="(min-width:1200px)"> 電腦版本
    <source srcset="圖片途徑2"
            media="(min-width:768px)"> 平板版本
    <img src="圖片途徑3" alt=""> 手機版本
</picture>

表格
<table>
    <thead> 表格頭
        <tr> 表格列
            <th></th> 欄位標題
            <td></td> 表格行
        </tr>
    </thead>
    <tbody colspan="合併行數"></tbody> 表格體
    <tfoot rowspan="合併列數"></tfoot> 表格尾
</table>
    

手機投影 把IP填到網址位置，前提要連在同一個wifi