html学习记录(2)

1.内联框架

内联框架用iframe表示，src代表引用页面地址，name代表框架标识名,frameborder表示有无边框,1为有,0为无

<iframe src="https://www.baidu.com" frameborder="0" width="300px" height="300px"></iframe>
<!--百度可能会拒绝链接-->
<!--可以用name实现跳转 -->
<iframe src="" name="hello" frameborder="0" width="300px" height="300px"></iframe>
<a href="博客1.html" target="hello">点击跳转</a>

2.表单

1.登录注册:

form表示表单method为发送表单方式,action为向何处发送表单

<form action="博客1.html" method="get">
    <!--get不安全但高效,post安全且可以传输大文件 -->
    <!-- input为输入框,type为输入框类型 text是文本框 password为密码框-->
    <p>名字:<input type="text"></p>
    <p>密码:<input type="password"></p>
    <!--submit是提交框,reset是重置框-->
    <p><input type="submit">
        <input type="reset">
    </p>
</form>

效果如图：

2.单选框：

   radio代表单元框,name代表组别如果name不同
   在选择时两个都可以选，name相同两个只选一个
   用checked可以默认选中

   <p>
        <input type="radio" value="boy" name="sex" >男
        <input type="radio" value="boy" name="sex">女
    </p>

效果如图：

checked后:

<input type="radio" value="boy" name="sex" checked>男

效果如图：

3.多选框:

  checkbox代表多选框

    <p>
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="code" name="hobby">写代码
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

效果如图：

4.按钮

    button代表按钮,image是图像按钮,
    submit提交按钮，reset重置按钮

   <p>
        <input type="button" name="button" value="请点击这里">
        <input type="submit">
        <input type="reset" value="清空">
    </p>

效果如图：

5.下拉框

  下拉框用select标签,option代表选项,selected可以默认选值

  <p>
        <select name="列表名称">
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值">日本</option>
            <option value="选项的值">俄罗斯</option>
        </select>
    </p>

效果如图：

如果使用selected：

<option value="选项的值" selected>俄罗斯</option>

效果如图：