07-17
1.表格
<!--
table表格:
th: 标题
tr: 行
td: 列
table属性:
border: 值为1显示边框 值为0时不显示边框
cellspacing: 每个单元格距离表格的外边距
cellpadding: 每个单元格距离表格的内边距
caption: 表格的标题,写在table标签里
合并单元格:
合并方向是从左往右,从上到下
合并行:rowspan 从开始合并的那一行开始,设置rowspan=''合并的行数,然后下面合并的行注释掉
合并列:colspan 从开始合并的那一列开始,设置colspan=''合并的列数,然后下面合并的列注释掉
-->
<table border="1" cellspacing="0px" cellpadding="10px">
<caption>我是表格的标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td rowspan="2">20</td>
<td>嵌入式</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<!-- <td>20</td> -->
<td>前端</td>
<td>男</td>
</tr>
<tr>
<td colspan="2">王五</td>
<!-- <td>26</td> -->
<td>前端</td>
<td>女</td>
</tr>
</table>
2.表单
<!--
form表单:
action:提交的地址
method:提交的方式 get post
get和post的区别:
1.get提交任务栏可见,post提交任务栏不可见
2.get提交数据不安全,post相对安全
3.get提交数据大小受到任务栏的限制,post提交不受限制
name:在PHP文件中获得html文件传递的数据,必须要在每一个input输入框添加name属性,作为传递数据的一个参数字段
value:输入框的默认显示的值
input输入框的类型:
text；文本
password:密码
submit:提交
reset:重置
radio:单选框
checkbox:多选框
button:按钮
image:图片提交
下拉框:
<select name="">
<option value=""></option>
</select>
文本域:
<textarea name="" id="" cols="30" rows="10"></textarea>
-->
<form action="./insert.php" method="get">
<!-- 文本框 -->
用户名:<input type="text" name="user" value="haha">
<!-- 密码框 -->
密码:<input type="password" name="pass">
<!-- 提交 -->
<input type="submit">
<!-- 重置 -->
<input type="reset" value="重置">
<!-- 单选框 -->
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="famale">女
<input type="radio" name="sex" value="dont">未知
<!-- 复选框 -->
<input type="checkbox" name="fruit[]" value="苹果">苹果
<input type="checkbox" name="fruit[]" value="香蕉">香蕉
<input type="checkbox" name="fruit[]" value="西瓜">西瓜
<input type="checkbox" name="fruit[]" value="梨子">梨子
<!-- 下拉框 -->
<select name="city" id="">
<option value="成都">成都</option>
<option value="重庆">重庆</option>
<option value="西安">西安</option>
<option value="北京">北京</option>
</select>
<!-- 文本域 -->
<textarea name="" id="" cols="30" rows="10">
默认值写在中间
</textarea>
<!-- 按钮 -->
<input type="button" value="提交">
<!-- 图片提交 -->
<input type="image" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3893146502,314297687&fm=27&gp=0.jpg">
</form>
3.表单属性
<!--
placeholder: 默认显示的信息
readonly:只读
disabled:禁用
readonly和disabled的区别:
相同点：都可以禁止修改
不同点：readonly属性支持数据提交，但disabled不支持数据提交
readonly只能给type类型为textpassword 以及文本域使用，其他地方不生效,disabled可以在任意地方使用
默认值:
checked 适用于单选和复选按钮
selected 适用于下拉框
-->
<form action="">
姓名: <input type="text" name="user" placeholder="请输入用户名" value="哈哈" readonly><br>
密码: <input type="password" name="pass" value="666" disabled><br>
性别:
<input type="radio" name="sex" value="famale">男
<input type="radio" name="sex" value="male">女<br>
爱好:
<input type="checkbox" name="sport[]" value="篮球">篮球
<input type="checkbox" name="sport[]" value="足球" checked>足球
<input type="checkbox" name="sport[]" value="排球">排球
<input type="checkbox" name="sport[]" value="羽毛球">羽毛球<br>
住址: <select name="address" id="">
<option value="" selected disabled>请选择地址</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select><br>
<input type="submit" value="注册">
<input type="reset" value="修改">
</form>
4.表单和表格嵌套
<form action="">
<table border="0" style="width: 300px;margin:0 auto;">
<tr>
<td>姓名:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
<input type="reset" value="修改">
</td>
<!-- <td></td> -->
</tr>
</table>
</form>
5.iframe
<iframe src="http://www.baidu.com" frameborder="1" width="500px" height="500px"></iframe>
网友评论