key-value对&iframe框架【web应用开发学习记录】_keycloak 的iframe问题-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_66201401/article/details/133083531

key-value对键值对

1.表单元素通过键值对与后端联系起来

<form action="a/login.jsp" method="get">
    <!-- 单选框和多选框 -->
    多选框：
    你喜欢的水果
    苹果<input type="checkbox" name="favor" value="apple">
    香蕉<input type="checkbox" name="favor" value="banana">
    <!-- 不同的单选框，它们的name属性值不同，将不会引起选项之间的冲突 -->
    <br>
    单选框：
    苹果 <input type="radio" name="favor" value="apple">
    香蕉<input type="radio" name="favor" value="banana">
    <br>
    你讨厌的水果
    苹果<input type="radio" name="hate" value="apple">
    香蕉<input type="radio" name="hate" value="banana">
    <input type="submit">
   
    <input type="submit" value="登录">
</form>

2.select下拉列表

1、普通下拉列表

<select name="identify" id="">
    
    <option>请选择身份</option>
        <option value="0">学生</option>
        <option value="1">老师</option>
    
   </select>

选择了选项学生，则value的值0传递给了参数idetify

2.分组下拉列表

其中，通过optgroup标签来分组，其Label属性代表不同的分组名称，分组名称不可选，分组下的option内的元素可选

 <select name="class" id="">
        <optgroup label="师生">
            <option value="3">老师</option>
            <option value="4">学生</option>
        </optgroup>
        <optgroup label="职工">
            <option value="5">宿管阿姨</option>
            <option value="6">保洁阿姨</option>
        </optgroup>
   </select>
    <input type="submit" value="登录">

iframe框架

1.其他网站的简单嵌入

 <!-- 把其他的网站页面嵌入在自己的页面中 -->
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.soso.com/">搜搜</a>
    <a href="https://www.bing.com/">必应</a>
    <iframe src="https://www.soso.com/" frameborder="0" name="search" width="100%" height="800px"></iframe>

iframe标签，其frameborder属性与边框有关，如果不想显示边框，则可以把frameborder设置为0

如图，将soso网站嵌入到了页面中，在输入框输入搜索内容，结果仍在本页面显示。

2.左侧边栏格式的网页

首先，编写一个dir目录文件，在主页面中将该页面嵌入，target设为“content” 主页面中第二个iframe中将内容文件嵌入，name值设置为“content”，与目录中target相对应。

dir.html中的内容

    <a href="./1.html" target="content">第一章</a>
    <a href="./2.html" target="content1">第二章</a>
    <a href="./3.html" target="content">第三章</a>

    <!-- 首先将本地的一个Html网页嵌入到这个页面中 -->
    <iframe src="./dir.html" frameborder="0"></iframe>
    <!-- 初始为第一章 -->
    <iframe src="./1.html" frameborder="0" name="content"></iframe>

2.html中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    红楼梦
</body>
</html>

点击第二章，右侧出现的为2.html中的内容