HTML + CSS 寶典第六節 html 進階

1. iframe 元素框架頁

通常用於在網頁中嵌入另一個網頁

iframe 可替換元素（特點）

通過爲行盒

通常顯示內容取決於元素屬性

CSS 不能完全控制其中的樣式

具有行塊盒的特點

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=3, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        iframe {
            width: 100%;
            height: 500px;
        }
    </style>
</head>

<body>
    <a href="https://baidu.com" target="myframe">百度</a>
    <a href="https://douyu.com" target="myframe">鬥魚</a>
    <a href="https://taobao.com" target="myframe">淘寶</a>

    <iframe name="myframe" src="https://baidu.com"></iframe>
</body>

</html>

2. 在頁面中使用 flash

object

embed

是可替代元素

MIME （Multipurpose Internet Mail Extensions）多用途互聯網郵件類型：比如

資源是一張 jpg 圖片， MIME :image/ipeg

3. 表單元素

一些列元素，主要用於收集用戶數據；

● input 元素

輸入框輸入內容不一定是文字。

input 元素類型

type 類型 text 普通文本輸入框 password 密碼框 date 日期選擇器有兼容性問題 search 搜索框有兼容性問題 range 滑塊取值 color 顏色選擇 number 數字有兼容性問題

checkbox

多選框 file 文件選擇 radio 單選框

type 屬性： 輸入框類型

value屬性： 輸入框默認值

placeholder屬性： 顯示提示的文本，文本框沒有類容是顯示

表單狀態

readonly 屬性：布爾屬性是否只讀不會改變表單顯示樣式

disabled 屬性：布爾屬性是否禁用會改變表單顯示樣式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>


    <p>
        <!-- 普通文本 輸入框 -->
        <input type="text" placeholder="請輸入賬號" />
    </p>

    <p>
        <!-- 普通文本 輸入框 -->
        <input type="password" placeholder="請輸入密碼" />
    </p>

    <p>
        <!-- 日期選擇框 date -->
        <input type="date" />
    </p>

    <p>
        <!-- 搜索框 -->
        <input type="search" />
    </p>

    <p>
        <!-- 滑塊選擇值 -->
        <input type="range" min="0" max="100" step="5" />
    </p>

    <p>
        <!-- 顏色選擇 -->
        <input type="color" />
    </p>


    <p>
        <!-- 數字 -->
        <input type="number" min="0" max="100" step="5" />
    </p>

    <p>
        <!-- 多選框 -->
        愛好：
        <input name="loves" type="checkbox" /> 音樂：
        <input name="loves" type="checkbox" /> 電影：
        <input name="loves" type="checkbox" /> 藝術：
        <input name="loves" type="checkbox" /> 其他

        <p></p>
        <!-- 單選框 -->
        性別：
        <input name="gender" type="radio" /> 男：
        <input name="gender" type="radio" /> 女：

    </p>


    <p>
        <!-- 選擇文件上傳 -->
        <input type="file" />
    </p>


    <p>
        <!-- input  元素製作按鈕-->reset submit button 這三種取值時 input 都爲按鈕 不推薦使用
        <input type="submit" value="哈哈" />
    </p>

    <p>
        <!-- input  元素製作按鈕-->
        <input type="select" value="哈哈" />
    </p>

</body>

</html>

● select 選擇框；通常和 option 元素配合使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p>
        選擇城市
        <select>
            <option>北京</option>
            <option>天 京</option>
            <option>上海</option>
            <option>南 京</option>
            <option>合肥</option>
        </select>

    </p>

    <p>
        <!-- 單選 -->
        請選擇你最喜歡的主播
        <select>
            <optgroup label="才藝表演主播">
                <option>馮提莫1</option>
                <option>馮提莫2</option>
            </optgroup>
            <optgroup label="遊戲主播">
                <option>WETED</option>
                <option>INFO</option>
                <option>TH000</option>
            </optgroup>
        </select>
    </p>

    <p>
        <!-- 多選 -->
        請選擇你最喜歡的主播們
        <select multiple>
            <optgroup label="才藝表演主播">
                <option>馮提莫1</option>
                <option>馮提莫2</option>
            </optgroup>
            <optgroup label="遊戲主播">
                <option>WETED</option>
                <option>INFO</option>
                <option>TH000</option>
            </optgroup>
        </select>
    </p>
</body>

</html>

● textarea 元素

文本域多行文本框

● button 按鈕元素

type 屬性表示按鈕的類型一般有三種： reset, submit, button 默認值是 submit

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <p>
        請填寫簡介：
        <textarea cols="30" row="10" placeholder="請輸入簡介："></textarea>
    </p>





    <p>
        <input type="image" src="//www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?qua=high&where=super"></input>

        <button tyle="button">
            <img src="//www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?qua=high&where=super"/>
            <p>button 元素 靈活</p>
        </button>
    </p>

</body>

</html>

配合表單元素的其他元素

● lable 普通元素通常配合單選和多選框來使用

可以通過 for 屬性讓 lable 元素關聯一個表單元素， for 屬性書寫表單元素 id 的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p>
        請選擇性別
        <input id="rad1" name="gender" type="radio">
        <label for="rad1">男</label>
        <input id="rad2" name="gender" type="radio">
        <label for="rad2">女</label>
    </p>
</body>

</html>

-- 隱式關聯不用指定 id 和 for

    <p>
        <!-- 隱式關聯 -->
        <label>
        <input name="gender1" type="radio">
        男
    </label>
        <label>
        <input name="gender1" type="radio">
        女
    </label>

datalist 該元素本身不會顯示到頁面，通常用於和普通文本框配合使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p>
        請輸入你常用的瀏覽器：
        <input list="userAgent" type="text">
    </p>

    <datalist id="userAgent">
        <option value="Chrome">谷歌瀏覽器</option>
        <option value="IE">ie 瀏覽器</option>
        <option value="Opera">Opera瀏覽器</option>
        <option value="Safari">蘋果瀏覽器</option>
        <option value="FireFox">火狐瀏覽器</option>
    </datalist>

</body>

</html>

form 元素

通常情況下，會將整個表單元素，放置到 form 元素的內部。作用是當提交表單時，會將form 元素的內部的表單內容以適當的方式提交到服務器

form 元素對開發靜態頁面沒有什麼意義

fieldset 元素

表單分組

表單元素樣式的設置（美化表單元素）

● 新的僞類選擇器

fouse 元素聚焦時的樣式
checked 單選或多選被選中的樣式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


    <style>
        input {
            color: #ccc;
        }
        
        input:focus {
            outline: 1px solid #008c8c;
            color: #000;
            outline-offset: 0;
        }
        
        input:checked {
            /* 無效 */
            background: red;
        }
        /* 下一個兄弟元素 */
        
        input:checked+label {
            color: red;
        }
    </style>


</head>

<body>


    <fieldset>
        <legend style="color: red;">foust 僞類選擇器</legend>
        <p>
            <a tabindex="1" href="https://www.baidu.com">Lorem</a>
        </p>

        <p>
            <input tabindex="2" tyle="text">
        </p>
        <p>
            <button tabindex="3">提交</button>
        </p>

    </fieldset>


    <fieldset>
        <legend style="color: red;">checked 僞類選擇器</legend>

        <p>
            <input name="gender" type="radio">
            <label>男</label>
            <input name="gender" type="radio">
            <label>女</label>
        </p>

    </fieldset>
</body>

</html>

● 常見的用法

1. 重置表單元素的樣式


//重置 元素屬性爲 none
a {
    text-decoration: none;
    color: inherit;
}

input,
textarea,
button,
select {
    border: none;
}

input:focus,
textarea:focus,
button:focus,
select:focus {
    outline: none;
    outline-offset: 0;
}

設置元素屬性

input[type="text"],
textarea,
select {
    margin: 1em auto;
    border: 1px solid #999999;
}

input[type="text"]:focus,
textarea:focus,
select:focus {
    border: 1px solid #008c8c;
    /* outline: 1px solid #008c8c; */
}

button {
    border: 2px solid #008c8c;
    border-radius: 5px;
}

2. 設置 textarea 是否允許調整尺寸

textarea {
    resize: both;
    resize: none;
    resize: horizontal;
    resize: vertical;
}

3 文本框邊緣到內容的距離

/* 方式1  使用 padding  */

input,
textarea {
    padding: 0 10px;
}


/* 方式2  使用 text-indent  */

textarea {
    text-indent: 1em;
}

4 控制單元和多選的樣式自定義 radio 元素樣式，利用 input元素自帶的 checked 僞元素選擇器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>漂亮的 多選框</title>

    <style>
        .radio {
            width: 12px;
            height: 12px;
            border: 1px solid #999999;
            border-radius: 50%;
        }
        
        .radio.checked {
            border-color: #008c8c;
        }
        
        .radio.checked::after {
            content: "";
            display: block;
            width: 5px;
            height: 5px;
            background: #008c8c;
            border-radius: 50%;
            margin-top: 3.5px;
            margin-left: 3.5px;
        }
        
        .radio-item .radio {
            width: 12px;
            height: 12px;
            border: 1px solid #999999;
            border-radius: 50%;
            cursor: pointer;
            /* //行盒不能設置寬高，所以這個設置爲 行塊盒 */
            display: inline-block;
        }
        /*  + 指的是 後面一個 */
        
        .radio-item input:checked+.radio {
            border-color: #008c8c;
        }
        /*  ~ 指的是 後面 所有 */
        
        .radio-item input:checked~span {
            color: #008c8c;
        }
        
        .radio-item input:checked+.radio::after {
            content: "";
            display: block;
            width: 5px;
            height: 5px;
            background: #008c8c;
            border-radius: 50%;
            margin-top: 3.5px;
            margin-left: 3.5px;
        }
        
        .radio-item input[type="radio"] {
            display: none;
        }
    </style>


</head>

<body>
    <p>
        <input type="checkbox">上海
        <input type="checkbox">天津
    </p>

    <div class="radio checked">

    </div>


    <p>
        請選擇性別
        <label class="radio-item">
            <input name="gender" type="radio">
            <span class="radio"></span>
            <span>男</span>
        </label>
        <label class="radio-item">
            <input name="gender" type="radio">
            <span class="radio"></span>
            <span>女</span>
        </label>
    </p>


</body>

</html>

HTML + CSS 寶典第六節 html 進階