表单、iframe、元素样式来源优先级

1.表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员注册表</title>
</head>
<body>
    <h3>会员注册表</h3>
    <form action="" method="post">
        <!-- 帐号 -->
        <label for="my-name">账号：</label>
        <input type="text" id="my-name" name="my-name" placeholder="请输入您的账号" autofocus required><br>
        <!-- 邮箱 -->
        <label for="my-email">邮箱：</label>
        <input type="email" id="my-email" name="my-email" placeholder="请输入您的邮箱" required><br>
        <!-- 密码 -->
        <label for="my-pwd">密码：</label>
        <input type="password" name="my-pwd" id="my-pwd" placeholder="请输入您的密码" required><br>
        <!-- 性别 -->
        <label for="male">性别：</label>
        <input type="radio" name="my-gender" id="male" checked><label for="male">男</label>&nbsp;
        <input type="radio" name="my-gender" id="female"><label for="female">女</label><br>
        <!-- 爱好 -->
        <!--! for 如何关联多个id -->
        <label for="game">爱好</label>
        <input type="checkbox" name="my-hobbies[]" id="game" checked><label for="game">游戏</label>
        <input type="checkbox" name="my-hobbies[]" id="swim" checked><label for="game">游泳</label></label>
        <input type="checkbox" name="my-hobbies[]" id="ball"><label for="game">打球</label><br>
        <!-- 会员级别 -->
        <label for="my-level">级别</label>
        <select name="my-level" id="my-email">
            <option value="1">黑铁</option>
            <option value="2" selected>黄铜</option>
            <option value="3">白银</option>
            <option value="4">黄金</option>
        </select><br>
        <!-- 简介 -->
        <label for="my-brief">简介：</label>
        <textarea name="my-brief" id="my-brief" cols="30" rows="10" placeholder="请简单的描述介绍一下您"></textarea>
        <div><button>注册</button></div>
    </form>
</body>
</html>

请问，label标签的for元素怎么关联多个id,如上例默认复选项默认2个的情况下，如何做到1个for元素关联多个id?

2.iframe后台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台框架</title>
</head>
<style>
    h3{
        background-color: aqua;
        height: 200px;
        overflow: hidden;
    }
    ul, iframe{
        float: left;
    }
    ul{
        width: 200px;
        background-color: rgb(42, 177, 71);
    }
    li{
        list-style: none;
    }
    iframe{
        border: 1px solid #000;
        width: 300px;
        height: 200px;
    }
</style>
<body>
    <!-- !注意：在label标签for属性关联的是目标的id，在使用iframe时，却是target的值与iframe里name的值对应 -->
    <h3>后台管理系统</h3>
    <hr>
    <ul>
        <li><a href="https://www.csdn.net/" target="my-backstage">CSDN</a></li>
        <li><a href="https://www.163.com/" target="my-backstage">163</a></li>
        <li><a href="https://www.sina.com.cn/" target="my-backstage">Sina</a></li>
    </ul>
    <!-- 后台主体内容显示界面 -->
    <iframe src="" frameborder="0" name="my-backstage"></iframe>
</body>
</html>

注意：在label标签for属性关联的是目标的id，在使用iframe时，却是target的值与iframe里name的值对应

3.元素样式来源与优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式来源与优先级</title>
</head>
<body>
    <!-- 默认样式，继承自html -->
    <h1>我是中国人，我爱自己的祖国</h1>
    <!-- 自定义样式，行内样式 style属性 -->
    <h2 style="color: blue;">我的一小步，人类的一大步</h2>
    <!-- 自定义样式，行内样式 style ，h3内容文字颜色为green -->
    <div style="color: red;">
        <h3 style="color: green;">Hello World</h3>
    </div>
    <!-- 同名样式后面的覆盖前面的 -->
    <style>
        h4{
            color: lightgreen;  /*被后面color的样式覆盖*/
            color: lightcoral;
        }
    </style>
    <h4>一屋不扫，何以扫天下</h4>
    <!-- 外部样式 -->
    <style>
        @import url('https://www.php.cn/static/layui/css/layui.css');
    </style>
    <h5>天下兴亡，匹夫有责</h5>
</body>
</html>

表单、iframe后台、元素样式来源优先级

表单、iframe、元素样式来源优先级

1.表单

2.iframe后台

3.元素样式来源与优先级

更多相关文章

随机推荐