前端基础-HTML基础（四）
- 2019 年 12 月 17 日
- 筆記
本文目录
框架标签
frameset标签frame标签表单标签input标签select标签textarea标签通用属性参考
框架标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>框架集</title> </head> <!-- 框架标签和body标签不可以同时使用 --> <!-- 定义框架集 --> <frameset rows="*,70%,10%"> <!-- src：指定引用的页面的路径 --> <frame src="demo12_top.html" /> <frameset cols="20%,*"> <frame src="demo12_left.html" /> <frame name="content" /> </frameset> <frame src="demo12_bottom.html" /> </frameset> </html>
frameset标签
- 用于定义框架集
- 属性
- `cols`：垂直切割。
- `rows`：水平切割。
frameset和body不能同时使用。
frame标签
- 用于具体展示页面。
- 被引用的页面不需要完整的结构，只需要页面内容即可，去除body之外的内容。
- 属性：
src：页面的路径。name：框架的名称。
表单标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <form action="" method="post"> 用户名: <input value="zhangsan" name="username" type="text" placeholder="请输入您的用户名"/><br /> 密码：<input name="password" type="password" placeholder="请输入您的密码"/><br /> 性别: <input type="radio" name="gender" checked="checked" value="male"/> 男<input value="female" type="radio" name="gender" /> 女<br /> 爱好: <input value="football" name="hobby" type="checkbox" checked="checked"/>足球<input type="checkbox" name="hobby" value="basketball" />篮球<input type="checkbox" name="hobby" value="pingpang" />乒乓球<br /> 头像: <input type="file" name="icon"/><br /> 城市: <select name="city" > <option>--请选择--</option> <optgroup label="北方城市"> <option selected="selected" value="bj">北京</option> <option value="tj">天津</option> </optgroup> <optgroup label="南方城市"> <option value="shh">上海</option> <option value="sz">深圳</option> </optgroup> </select><br /> 自我介绍： <!-- rows :行数 cols：列数 --> <textarea name="introduce" cols="20" rows="5" placeholder="请输入您的自我介绍"></textarea> <br /> <input type="submit" value="注册" /> <input type="reset" value="清空" /> <input type="button" value="登录" /> <input type="image" src="img/logo_efonmark_caihui.png" width="15%"/> </form> </body> </html>
input标签
- 属性：
type，指定输入框的类型。- `text`：普通的输入框。
- `password`：密码输入框
- `radio`：单选
- `checkbox`：多选
- `file`：文件选择框
- `submit`：提交按钮
- `reset`：清空按钮
- `button`：普通按钮,事件要由自己来处理
- `hidden`：隐藏域
- `image`：图片
select标签
- 下拉框
textarea标签
- 文本域
通用属性
name- 指定传递数据给后台的key的名字。
- 对单选框和复选框进行分组。
- 数据要传输给后台，必须指定该属性。
value- 指定按钮上的文本。
- 指定选择框在选中的状态，传递给后台的数据。
placeholder- 用在输入框中的，提示文本。
checked="checked"- 指定单选框和复选框的选中状态。
selected="selected"- 指定下拉框的选中状态。
action- 指定传递数据的地址。
method: 请求方式。- 默认，传递数据的时候,是拼接在原地址的后面。传输的数据的大小一般是1Kb。
?username=zhangsan&password=123&gender=on&hobby=on&hobby=on&city=%E5%8C%97%E4%BA%AC&introduce=ziwojieshaoget请求，在原地址的后面以?拼接参数传递给后台。key = value的形式去拼接，如果有多个参数，参数和参数之间使用&连接起来。getpost：隐藏起来。相对来说，post请求更加安全。在传输文件的时候一定是使用post请求。
参考
- 黑马程序员 120天全栈区块链开发 开源教程 https://github.com/itheima1/BlockChain
