表单
表单
通常都是写在 form 中
接口：前后端交互时的地址 通常为网络地址(类似于网址)
action:在前后端交互时 写接口地址的地方
method：设置请求方式
前端常用的请求方式
get请求
只能发送字符串
速度快
安全性差所有的信息一目了然
post求情
可以发送文件等多种数据格式
速度比get慢
比get安全性高的多
输入框
输入框
name:定义input输入框的名称
前后端交互时 input输入框的数据 的名字
value：通过value属性 可以获取到输入框的数据
placeholder； 输入前的提示信息
type：定义输入框中的类型
常用参数：
text 文本
password 密码框
button 按钮
checkbox复选框
radio单选框
file 文件上传
reset 重置按钮
submit提交按钮
<input type="password" placeholder="输入前提示信息" />
<-- buttom的文字需要写在value中 -->
<input type="button" value="按钮1" />
--checkbox的数据 需要写在value中:
<input type="checkbox" value="html" />html
<input type="checkbox" value="css" />css
<input type="checkbox" value="js" />js
单选框
-- 单选框
多个单选框 使用name属性建立联系
保证name名 相同
数据 写在value中
checked='checked' 这个属性 给那个单选框加 那个就默认被选择
男性:
<input type="radio" value="男" name="sex" checked="checked" /> 女性:<input
type="radio"
value="女"
name="sex"
/>
-- file 选择文件 可进行文件上传等操作 -->
<input type="file" />
<!-- reset 会清除当前 form标签下 所有的表单的 内容-->
<input type="reset" value="重置按钮" />
submit提交
nuttom 按钮 单纯就是个按钮 没有任何功能
但是
submit按钮 点击后 会获取当前form 标签内所有表单的value
然后通过 action 设置的接口 发送给后端-->
<input type="submit" />
表单初始化
input,
select,
textarea {
/* 初始化 绛蓝色边框禁止掉 */
outline: none;
}
textarea {
/* width: 100px;
height: 50px; */
resize: none;
/* 禁止拖动改变文本框大小 */
}
-- form中的属性 -->
-- label 表单提示性信息
for属性 填写 绑定的表单元素的id
<form action="">
<label for="sex">性别</label>
<input type="text" id="sex" />
<label for="html">html</label>
<input id="html" type="checkbox" />
</form>
select 下拉选择菜单
所有的下拉选项都要写在 select内 option标签中
option内容区域 的文本 仅做展示用
数据提交时的数据写在value属性中
<form action="">
<select name="ads" id="">
<!-- 选项 -->
<option value="西安">西安</option>
<option value="">上海</option>
<option value="">北京</option>
<option value="">南京</option>
</select>
- textarea 文本行输入
cols 列数 可以理解为宽
rows 行数 可以理解为高
<textarea name="" id="" cols="30" rows="2"></textarea>
表格
设置样式重置 去掉表格的外边距 去掉多余的边框*/
table {
border-collapse: collapse;}
th,
td {
width: 100px;
height: 40px;
text-align: center;
}
<body>
表格
所有的表格代码 都写在 table标签中
caption 写表格标题
thead 中以 th 标签来写 栏目的栏目（表头格）
一个th就是一个单元格
tbody 中 设置表格的内容
每一行 用 tr 标签
每一行中的单元格 用td标签
table 标签中 有三个属性
border 设置表格的边框 数值 没有单位
cellsapcing 设置表格之间的外边距 没有单位
cellpadding 设置表格单元格的边框 数值 没有单位
通常在做表格样式初始化之后
我们只需要 使用border属性给表格设置边框
表格每一个单元格的大小 通常都是用css来设置
（表格中的文字 默认垂直居中）
合并
行rowspan 数字
上下合并
给最上面的格子写rowspan
将下面的合并时对应的格子删掉
列 colspan数字
左右合并
给最左边的格子写colspan
将右边 合并的对应格子删掉
-->
<table border="1" cellspacing="100" cellpadding="10">
<!-- 标题 -->
<caption>
表格
</caption>
<!-- 表格头 -->
<thead>
<th>栏目1</th>
<th>栏目2</th>
<th>栏目3</th>
<th>栏目4</th>
<th>栏目5</th>
</thead>
<tbody>
<!-- 每一行 -->
<tr>
<!-- 每一格 -->
<td>第一行第一格</td>
<td rowspan="2">第一行第二格</td>
<td>第一行第三格</td>
<td colspan="2">第一行第四格</td>
<!-- <td>第一行第五格</td> -->
</tr>
<!-- 每一行 -->
<tr>
<!-- 每一格 -->
<td>第二行第一格</td>
<td>第二行第三格</td>
<td>第二行第四格</td>
<td>第二行第五格</td>
</tr>
</tbody>
</table>