HTML + CSS 寶典 第六節 html 進階

                                          HTML + CSS 寶典 第六節 html 進階

1.  iframe 元素   框架頁

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

iframe  可替換元素  (特點)

  1. 通過爲行盒

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

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

  4. 具有行塊盒的特點

<!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屬性: 顯示提示的文本,文本框沒有類容是 顯示

 

 表單狀態

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

  2. 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 元素

表單分組

 

 

 

 


                                                      

 

                                            表單元素 樣式的設置(美化表單元素

 

 

● 新的僞類選擇器

  1. fouse                           元素聚焦時的樣式
  2. 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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章