一、表格标签
标签
-
场景:在网页中以表格(行、列)形式整齐展示数据,如:班级表。
-
标签:
标签 描述 属性/备注 <table>
定义表格整体,可以包裹多个 <tr>
border:规定表格边框的宽度
width:规定表格的宽度
cellspacing:规定单元之间的空间<tr>
表格的行,可以包裹多个 <td>
<td>
表格单元格(普通),可以包裹内容 如果是表头单元格,可以替换为 <th>
-
实现以下网页:
实现
1、代码及效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<!--
border(看到报红不用管,有效果就行):规定表格边框的宽度
cellspacing:规定单元边沿与其内容之间的空白
width:规定表格的宽度
-->
<table border="1px" cellspacing="0" width="600px">
<!-- 第一行 -->
<tr>
<!-- 4列 -->
<th>序号</th>
<th>品牌logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<!-- 第二行 -->
<tr>
<!-- 4列 -->
<td>1</td>
<td> <img src="img/huawei.jpg" width="100px"> </td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
<!-- 第三行 -->
<tr>
<!-- 4列 -->
<td>2</td>
<td> <img src="img/alibaba.jpg" width="100px"> </td>
<td>阿里</td>
<td>阿里巴巴集团控股有限公司</td>
</tr>
</table>
</body>
</html>
二、表单标签
标签
-
场景:在网页中主要负责数据采集功能,如:注册、登录等数据采集。
-
标签:
<from>
-
表单项:不同类型的
input
元素、下拉列表、文本域等。<input>
:定义表单项,通过type属性控制输入形式<select>
:定义下拉列表<textarea>
:定义文本域
-
属性:
- action:规定当提交表单时向何处发送表单数据(URL)
- method:规定用于发送表单数据的方式(GET、POST)
1、GET(默认)
- get(默认):在url后面拼接表单数据,比如:
?username=dog&age=12
,url的长度有限制
2、POST
-
post:在消息体(请求体)中传递的,参数大小无限制
3、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<!--
action:规定当提交表单时向何处发送表单数据(URL)。(如果不指定url,默认提交到当前页面中)
method:规定用于发送 form-data 的 HTTP 方法。
get(默认):在url后面拼接表单数据,比如:?username=admin&age=23,url长度有限制
post:在消息体(请求体)中传递的,参数大小无限制
-->
<form action="" method="post">
用户名:<input type="text" name="username">
年龄:<input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
小结
-
表单标签
- 标签:
<form>
- 属性:
- action:表单数据提交的url地址
- method:表单提交方式
- get:表单数据拼接在url后面(?username=admin&age=23),大小有限制
- post:表单数据在请求体(消息体)中携带,大小没有限制
- 标签:
-
注意
-
表单项必须有name属性才可以提交。
-
三、表单项标签
标签
<input>
:表单项,通过type属性控制输入形式。<select>
:定义下拉列表,<option>
定义列表项。<textarea>
:文本域
type取值 | 描述 | 形式 |
---|---|---|
text | 定义单行的输入字段(默认值) | |
password | 定义密码输入字段 | |
radio | 定义单选按钮 | |
checkbox | 定义复选框 | |
file | 定义文件上传按钮 | |
data / time / datetime-local | 定义日期 / 时间 / 日期时间 | |
number | 定义数字输入框 | |
定义邮件输入框 | ||
hidden | 定义隐藏域(网页中看不见的) | |
submit / reset / button | 定义提交按钮 / 重置按钮 / 可点击按钮 | |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单项标签</title>
</head>
<body>
<!-- 以post方式提交表单数据 -->
<form action="" method="post">
用户名:<input type="text" name="username"> <br><br>
密码:<input type="password" name="password"> <br><br>
真实姓名:<input type="text" name="name"> <br><br>
年龄:<input type="number" name="age"> <br><br>
性别:<label><input type="radio" name="gender" value="1">男</label>
<label><input type="radio" name="gender" value="2">女</label> <br><br>
爱好:<label><input type="checkbox"> Java</label>
<label><input type="checkbox"> 王者荣耀</label>
<label><input type="checkbox"> 运动</label> <br><br>
生日:<input type="date" name="birthday"> <br><br>
时间:<input type="time" name="time"> <br><br>
日期时间:<input type="datetime-local" name="datetime"> <br><br>
邮箱:<input type="email" name="email"> <br><br>
学历:<select name="degree">
<option value="">--------请选择--------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select> <br><br>
描述:<textarea name="describe" cols="30" rows="10"></textarea> <br><br>
<!-- 隐藏输入框:网页看不到的 -->
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
</body>
</html>