04-HTML
一. 表格
table表格, 常用语pc端的界面使用, 多种表的展示, 比如: 购物车, 后台人员管理, 后台商品管理等
table标签内部有自己的组合方式
1. 简单组合
table标签中只分行(tr) 和 列 (td)
行(tr)包含着列(td)
table>tr>td 实际表格中的内容应该写在列里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单表格</title>
</head>
<body>
<h2>商品信息(id,name,price)</h2>
<table border="1">
<tr>
<td>1</td>
<td>阿玛尼</td>
<td>280</td>
</tr>
<tr>
<td>2</td>
<td>YSL</td>
<td>580</td>
</tr>
<tr>
<td>3</td>
<td>MAC</td>
<td>360</td>
</tr>
</table>
</body>
</html>
2. 带表头的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带表头的表格</title>
</head>
<body>
<table border="1">
<!-- 表的表头-->
<thead>
<th>序号</th>
<th>商品名称</th>
<th>价格</th>
</thead>
<!-- 表的主体-->
<tbody>
<tr>
<td>1</td>
<td>阿玛尼</td>
<td>280</td>
</tr>
<tr>
<td>2</td>
<td>YSL</td>
<td>580</td>
</tr>
<tr>
<td>3</td>
<td>MAC</td>
<td>360</td>
</tr>
</tbody>
</table>
</body>
</html>
3. 表格的默认样式
表格默认是没有任何边框的,为表格添加属性:
table border=“1”; 看到边框, 数字"1"表示边框的像素
table表格边框带有间隙, 因为在table中使用 style=“border-collapse:collapse”; 就可以去掉表格之间的间隙
<table border="1" style="border-collapse: collapse"></table>
4. 可合并单元格的表格
合并列的属性,既然合并单元格, 属性应该给到列单元格(td), 是第一个列将后面多个列给了自己, [横向合并]
<tr>
<td colspan="8">讲台</td>
</tr>
<!-- colspan="8" 后面直接写数字, 代表合并几个列,包含自己-->
合并行, 跨行合并, 合并单元格, 属性写给列单元格(td). 竖着和自己同一列的多个列给了自己; [竖着合并]
<tr>
<td rowspan="4">过道</td>
</tr>
<!-- rowspan="8" 后面直接写数字, 代表合并几个行,包含自己-->
<!-- 将其他行里属于这一列的列删除,才能实现合并-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可合并的单元格</title>
</head>
<body>
<table border="1" style="border-collapse: collapse">
<tr>
<td colspan="8">讲台</td>
<!-- <td>1-2</td>-->
<!-- <td>1-3</td>-->
<!-- <td>1-4</td>-->
<!-- <td>1-5</td>-->
<!-- <td>1-6</td>-->
<!-- <td>1-7</td>-->
<!-- <td>1-8</td>-->
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td rowspan="4">过道</td>
<td>2-4</td>
<td>2-5</td>
<td rowspan="4">过道</td>
<td>2-7</td>
<td>2-8</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<!-- <td>3-3</td>-->
<td>3-4</td>
<td>3-5</td>
<!-- <td>3-6</td>-->
<td>3-7</td>
<td>3-8</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<!-- <td>4-3</td>-->
<td>4-4</td>
<td>4-5</td>
<!-- <td>4-6</td>-->
<td>4-7</td>
<td>4-8</td>
</tr>
<tr>
<td>5-1</td>
<td>5-2</td>
<!-- <td>5-3</td>-->
<td>5-4</td>
<td>5-5</td>
<!-- <td>5-6</td>-->
<td>5-7</td>
<td>5-8</td>
</tr>
<tr>
<td colspan="8">任重而道远</td>
<!-- <td>6-2</td>-->
<!-- <td>6-3</td>-->
<!-- <td>6-4</td>-->
<!-- <td>6-5</td>-->
<!-- <td>6-6</td>-->
<!-- <td>6-7</td>-->
<!-- <td>6-8</td>-->
</tr>
</table>
</body>
</html>
二. 表单
功能: 将用户输入的内容提交到到后台,存储在数据库中
<form></form>
想要使用用户数据, 首先得收集用户数据
在表单标签中, 可以容纳一套跟他有关系的一些标签
form标签不能单独存在, 需要其他的表单标签辅助收集用户数据; 页面上不可见
1. form标签的属性
- action=“url”
向哪个地址提交数据(要提交的url接口),如果不写, 会默认提交给本页面- method=“get/post”
设置这个请求的提交方法,默认为get(需要与后台交流,需要什么方式进行传输)
get: 请求的数据会直接显示在地址栏中
post: 安全性比较高, 不在地址栏中显示请求数据- enctype=“指定表单数据的提交格式”,允许将什么样的数据提交给服务器,
默认值:enctype="application/x-www-form-urlencoded",前提使用发送请求的方式post, 允许将任意字符提交给服务器
text/plain: 将普通字符提交给服务器(不包含 =, &等符号)
multipart/form-data: 允许提交文件和任意字符给服务器
2. 表单控件
2.1 文本框
可以由用户输入各种数据, input标签, 行内块元素,有自己的样式
可以通过宽度高度调整自己的样式
文本框是input标签,type属性为text
文本框属性
type=“text”: 文本输入框
placeholder=“请输入用户名” 提示文字(没有任何影响)
maxlength=“6” 最大输入长度
value=“” 是input的初始值,不写在标签中,默认也是存在,但是值为空字符串
value属性本意是由用户输入内容,前端js负责拿到value值, 传递给服务器
但是在标签中可以直接设置value的值
所有: value既可以直接设置值, 又可以获取里面的值
<input
type="text"
placeholder="请输入用户名"
maxlength="6"
value="zhangsan"
>
2.2 密码输入框
输入密码文字, 会用隐化的效果, 不会让旁边的人知道密码内容
密码输入框属性
type=“password”
placeholder,maxlength 有没有都可以
value 属性一定有,
<input
type="password"
placeholder="请输入密码"
maxlength="8"
value=""
>
2.3 单选框
<!-- 单选框 type="radio"
直接写input标签, 两个都可以选中, 不符合单选的要求
单选框必须做到二者选其一
所以单选框必须是同一个组中, 此时需要设置name属性值,而且name属性值必须一致
才能算作一组单选
value属性必须写在标签中, 从而可以通过js获取单选框中被选中的内容
checked属性,默认被选中, 但是如果没有写checked属性,用户选中时,会自动
携带checked属性
-->
<input type="radio" name="sex" value="f" checked>男
<input type="radio" name="sex" value="m">女
2.4 复选框
<!-- 复选框 type="checkbox"
多选
name="hobby" 必要多选可以多选, 不选, 选部分, 有相同name才算是一组
value属性必须写在标签中, 从而可以通过js获取复选框中被选中的内容
checked属性,默认被选中, 但是如果没有写checked属性,用户选中时,会自动
携带checked属性,取消选择就没有checked属性了
-->
<input type="checkbox" name="hobby" checked>唱歌
<input type="checkbox" name="hobby">跳舞
<input type="checkbox" name="hobby" checked>打篮球
<input type="checkbox" name="hobby">追剧
2.5 文件上传
<!-- 文件上传 type="file"
用户可以传递一个或多个文件, 由表单的形式上传到服务器
multiple属性添加到标签中, 就可以上传多个文件, 在选择文件文件的时候按住Ctrl
-->
<input type="file" multiple>
2.6 表单相关按钮
<!-- 表单相关按钮
type="submit" 表单内容的提交, 默认点击后会将表单内所有的内容提交到后台url地址中
注意:表单中的相关按钮是有功能, 提交表单的内容,跟value值是没有关系的
按钮的value值跟之前value值是不一样的,它表示表单显示的名字(名字:发送,上传,提交,自定义)
type="reset" 会将表单内填写或空值的内容全部清空, 起了重新填写的作用
type="button" 普通的按钮, 表单中预留的自定义按钮; 如:获取验证码
value值是按钮的文字, 可以根据需求更改
-->
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="自定义按钮">
<!-- button标签: 是一个行内块元素,在一行内显示,具有宽高属性-->
<button>普通按钮</button>
W3School菜鸟教程网址: http://booksky.99lb.net/
2.7 下拉选项
<!-- 下拉选项框
select菜单标签, 不能单独存在, 需要有菜单项
在select标签中有多个菜单项, 必须有value值
如果想要多选,可以设置 mutiple属性, 按住ctrl进行多选
-->
<select name="menu" id="" multiple>
<option value="0">水煮肉片</option>
<option value="1">锅油肉</option>
<option value="2">锅包肉</option>
<option value="3">辣椒炒肉</option>
</select>
2.8 文本域
<!-- 文本域
文本域: 一般用于聊天室, 评论文字, 录入文章, 商品描述等
跟一般的input文文本输入框的区别实施:文本域可以写多行,输入框只能写一行
如果不需要用户自行大小拖拽, 文本域需要样式属性
style="resize: none" : 禁止用户缩放修改大小
-->
<textarea name="" id="" cols="30" rows="10" style="resize: none"></textarea>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<h1>欢迎注册</h1>
<form action="">
<table border="1">
<tr>
<td>用户名:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="m">男
<input type="radio" name="sex" value="m">女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="hobby" value="sing">唱歌
<input type="checkbox" name="hobby" value="dance">跳舞
<input type="checkbox" name="hobby" value="movie">追剧
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="email" name="email">
</td>
</tr>
<tr>
<td>生日:</td>
<td>
<input type="date" name="birthday">
</td>
</tr>
<tr>
<td>靓照</td>
<td>
<input type="file" name="pic">
</td>
</tr>
<tr>
<td>所在地:</td>
<td>
<select name="city" id="">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="nj">南京</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
