表格标签 table
其格式为：
<table>
<thead>
<tr>
<td></td> 单元格标签，左对齐
<td></td> 单元格标签，左对齐
</tr>
</thead>
<tbody>
<tr>
<td></td> 单元格标签，左对齐
<td></td> 单元格标签，左对齐
</tr>
</tbody>
<tfoot>
<tr>
<td></td> 单元格标签，左对齐
<td></td> 单元格标签，左对齐
</tr>
</tfoot>
</table>
<td></td> 单元格标签，左对齐
<th></th> 单元格标签, 居中加粗
td和th标签作用一样，但是格式不一样
表单标签 form
表单form：一切与数据交互有关的
action：数据提交的路径
method：提交方式（get,post二选一）
- get请求:会把请求参数，拼写在请求url的末尾，用问号？连接。以key1=value1&key2=value2的方式
一般情况下查询请求都是get，因为明文所以有安全隐患，但是效率较高，但有长度限制（1k） - post请求：会把请求参数放在“请求体”中，不是明文的。一般情况下用于数据的增删改。安全性有保证，长度无限制。
表单控件：
input标签
name属性：表单控件的名字，与数据交互有关，很重要的属性。
value属性：框内的数据最终都会传给value。表单控件的值，与数据交互有关，很重要的属性。
email属性：文本框校验是否含有@。
date属性：日期。
image属性：具有submit功能的图片。
hidden属性：具有隐藏域。需要向后台传递内容，又不想在前台界面上看到。
file属性：文件域，上传文件。
type属性：
text 文本输入框。
password属性：密码框中密码加密。
radio属性：单选框，如果想互斥（只能选男或女），就需要将name属性相同，checked="checked"默认为选中状态。
checkbox属性：向后台传递的是value数组，如果没有相同的name，则向后台传递多个数组，每个数组一个value。如果想传一个数组，多个value，必须统一name。
button标签
submit属性按钮：带有提交数据的功能。
resets属性按钮：带有重置表单的功能。
button属性按钮：没有任何功能，一个纯净的按钮
- button标签：默认自带提交功能。
select标签：下拉框
父标签select
子标签option：select的子标签，选项标签。selected="selected"默认为选中状态。
textarea标签：多行文本域。resize: none;取消多行文本区的可变大小
一些常用属性：
readonly 只读
disabled 禁用
placeholder 占位
maxlength 最大长度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- action表单路径，将表单中接收的数据发送到某处（Java类） -->
<form action="https://www.hao123.com" method="get">
<!-- placeholder占位，输入时隐藏，清空时出现 -->
<!-- label标签的for属性中添加某个标签ID，可实现鼠标点击该label标签，该ID的标签就会闪烁光标 -->
<p><input type="text" id="" value="" placeholder="搜索"/></p>
<p><label for="username">用户名：</label><input type="text" name="wd" id="username" value="" /></p>
<p><label for="password">密码：</label><input type="password" id="password" name="haha" maxlength="10" placeholder="密码最大长度为10"/></p>
<p>
<input type="submit" name="" id="" value="提交" />
<input type="reset" name="" id="" value="重置" />
<input type="button" name="" id="" value="自定义按钮" />
<!-- 上下两种写法完全等效 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">自定义按钮</button>
</p>
<p>
<!-- checked="checked" 默认选中状态-->
<input type="radio" name="sex" id="" value="男" checked="checked"/>男
<input type="radio" name="sex" id="" value="女" />女
</p>
<p> 兴趣爱好：
<!-- 保证是一组兴趣爱好，name必须一致 -->
<input type="checkbox" name="hobby" id="" value="篮球" />篮球
<input type="checkbox" name="hobby" id="" value="足球" />足球
<input type="checkbox" name="hobby" id="" value="台球" />台球
<input type="checkbox" name="hobby" id="" value="排球" />排球
</p>
<p>emai:<input type="email" name="" id="" value="" placeholder="邮箱"/></p>
<p>日期：<input type="date" name="" id="" value="" /></p>
<p>具有submit功能的图片<input type="image" src="../img/dwad.jpg" /></p>
<p><input type="file" name="" id="" value="" style="width: 70px;"/></p>
<p>
<!-- 下拉框 -->
<!-- 默认选中 selected="selected"-->
<select>
<option value ="">省份</option>
<option value ="辽宁" selected="selected">辽宁</option>
<option value ="吉林">吉林</option>
<option value ="黑龙江">黑龙江</option>
</select>
</p>
<!-- resize: none;取消多行文本区的可变大小 -->
<p>
<textarea rows="10" cols="100" style="resize: none;" placeholder="输入内容">
</textarea>
</p>
<p>隐藏域：<input type="hidden" name="" /></p>
</form>
</body>
</html>
网友评论