# 2023-2-16 HTML & CSS
###### tags: `HTML` `CSS`
## 清單
html:

<form action="">
    <div>
        <label for="user_name">中文姓名:</label>
        <input type="text" id="user_name" placeholder="請輸入中文姓名">
    </div>
    <div>
        <label>
            Name:
            <input type="text" disabled placeholder="Enter english name">
        </label>
    </div>
    <div>
        <label>
            密碼：
            <input type="password" minlength="6">
        </label>
    </div>
    <div>
        <label>
            日期：
            <input type="date">
        </label>
    </div>
    <div>
        <label>
            時間：
            <input type="time">
        </label>
    </div>
    <div>
        <label>
            檔案：
            <input type="file">
        </label>
    </div>
    <div>
        <label>
            信箱：
            <input type="email">
        </label>
    </div>
    <div>
        <label>
            網址：
            <input type="url">
        </label>
    </div>
    <div>
        <label>
            電話：
            <input type="tel" maxlength="10">
        </label>
    </div>
    <div>
        <label>
            數字：
            <input type="number" min="1" max="4">
        </label>
    </div>
    <div>
        <label>
            色彩：
            <input type="color">
        </label>
    </div>
    <div>
        <label>
            區間：
            <input type="range" min="0" max="10" step="2">
        </label>
    </div>
    <div>
        興趣複選：
        <label>
            <input type="checkbox">電玩
            <input type="checkbox">游泳
            <input type="checkbox">寫程式
            <input type="checkbox">煮飯
        </label>
    </div>
    <div>
        性別：
        <label>
            <input type="radio" name="sex">男
            <input type="radio" name="sex">女
        </label>
    </div>
    <div>
        <label>
            留言：
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </label>
    </div>
    <div>
        <label>
            地址：
            <select name="" id="">
                <option value="0">請選擇地址</option>
                <option value="1">台北市</option>
                <option value="2">桃園市</option>
                <option value="3">新北市</option>
            </select>
        </label>
    </div>
    <div>
        <input type="submit">
        <input type="reset">
        <input type="button" value="我是按鈕">
        <button>我也是按鈕</button>
    </div>
</form>

## Box Model
- content-box
- padding-box
- border-box
- margin-box

.box{
    width: 200px;
    border: 20px solid #fd0;
    padding: 20px;
    margin: 20px;
    background-color: #ccc;
    font-size: 20px;
    /*box-sizing: 指定width & height要給哪個box*/
    box-sizing: border-box;
}

### 課堂練習
html:

<div class="box">
    <div class="card">
        <img src="https://fakeimg.pl/300x200/200">
        <h2>title</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab accusamus nemo reiciendis ullam. Ipsa aspernatur explicabo consectetur quo inventore alias?</p>
        <footer>
            <a href="">前往課程</a>
            <div class="price">$<span>300</span></div>
        </footer>
    </div>
    <div class="card">
        <img src="https://fakeimg.pl/300x200/200">
        <h2>title</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab accusamus nemo reiciendis ullam. Ipsa aspernatur explicabo consectetur quo inventore alias?</p>
        <footer>
            <a href="">前往課程</a>
            <div class="price">$<span>300</span></div>
        </footer>
    </div>
    <div class="card">
        <img src="https://fakeimg.pl/300x200/200">
        <h2>title</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab accusamus nemo reiciendis ullam. Ipsa aspernatur explicabo consectetur quo inventore alias?</p>
        <footer>
            <a href="">前往課程</a>
            <div class="price">$<span>300</span></div>
        </footer>
    </div>
    <div class="card">
        <img src="https://fakeimg.pl/300x200/200">
        <h2>title</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab accusamus nemo reiciendis ullam. Ipsa aspernatur explicabo consectetur quo inventore alias?</p>
        <footer>
            <a href="">前往課程</a>
            <div class="price">$<span>300</span></div>
        </footer>
    </div>
</div>

css:

*{
    padding: 0;
    margin: 0;
}
.box{
    width: 960px;
    border: 1px solid #000;
    display: flex;
    flex-wrap: wrap;
}
.card{
    margin: 10px;
    width: 198px;
    padding: 10px;
    border: 1px solid #000;
}
.card img{
    width: 100%;
}
.card footer{
    display: flex;
    justify-content: space-between;
}

## class & selector基本觀念
html:

<div class="class1 class2">...</div>

css:

p span{}
p.class1#idname{}

## flex
- display: flex
- flex-direction
- row
- row-reverse
- column
- column-reverse
- flex-wrap
- nowrap
- wrap
- wrap-reverse
- justify-content
- center
- flex-start
- flex-end
- space-between
- space-around
- space-enenly
- align-items & align-self
- center
- flex-start
- flex-end
- baseline
- stretch
- flex-flow
- column wrap
- row wrap

## Tools
* Alfred 5 for Mac
* Wox for Win