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>

来源：CSDN

作者：nicepainkiller

链接：https://blog.csdn.net/nicepainkiller/article/details/103969595

标签

css框架

框架网页

iframe

css

HTML + CSS 宝典 第六节 html 进阶