前端:HTML(三)---页面结构分析,iframe 内联框架,表单语法,单选框 radio,按钮和多选框
程序员文章站
2022-05-29 23:09:10
...
- 页面结构分析
- iframe 内联框架
内联框架就是在一个网页里面,嵌套另外一个框架,使用iframe标签
<iframe src="path" name="mainFrame"></iframe>
src:引用网页的地址
name:框架标识名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<!--内联框架就是在页面中嵌套页面-->
<iframe src="https://www.baidu.com" frameborder="0"
width="1000px" height="800px" name="hello">
</iframe>
<!--还可以使用a标签连接标签,target属性里面可也是_self本页面打开
也可以是_blank新页面打开,当然也可以使用自定义的,就是iframe标签
内的name属性,那么此时哔哩哔哩将在iframe内联框架中打开
-->
<a href="https://www.bilibili.com/"target="hello">点击跳转到哔哩哔哩</a>
</body>
</html>
- 表单语法
表单使用 form标签,form表单里面有一些属性,如:method:提交方式,有 get/post 方式;action:往哪里发送表单里面的数据,表单提交的位置,可以是网站,也可以是请求处理的地址。在 form标签 中使用 input标签 用于搜集用户信息。根据不同的 type 属性值,输入字段可以是 text文本字段、password密码,submit提交,reset重置,复选框、单选按钮、按钮等。password密码是隐藏的。使用 name属性 给input输入框起一个名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--get方式提交:可以在url中看到我们所提交的信息,不安全,但是高效
post方式提交:比较安全,传输大文件
-->
<form action="html01.html" method="get">
<p>姓名:<input type="text" name="username"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
value文本框默认初始值,maxlength输入的最大字符数,size文本框的长度:
<p>姓名:<input type="text" name="username"
value="小明" maxlength="8" size="30">
</p>
- 单选框 radio
<!--单选框按钮,radio:单选框,
value单选框里面的值
name:里面的内容表示一个组,单选框里的选项
必须是在同一个组中,才可以实现效果
checked表示默认选择的
-->
<p>性别:
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
</p>
- 按钮和多选框
<!--多选框checkbox:多选框
value:多选框里面的值
name:表示一个组,例如爱好
checked表示默认选择的
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="play" name="hobby">玩
<input type="checkbox" value="game" name="hobby">游戏
</p>
------------------------------------------------------------------------------
<!--按钮button
value:写在按钮上面的字
-->
<p>按钮:
<input type="button" name="but" value="点击按钮">
</p>
button普通按钮 image图片按钮 submit提交按钮 reset重置按钮
上一篇: JEECG 避免表单重复提交