HTML常用标签之复合标签
一、列表
1）无序列表
标签：
<ul type=""><li></li><li type=""></li><li></li>.....
</ul>属性：
type 列表样式
-disc 实心圆
-circle 空心圆
-square 实心方块
2）有序列表
标签：
<ol type=""><li type=""></li>......
</ol>属性：
type 列表样式
-a/A
-i/I
-1
start:从第几个数开始，起始值
reversed：倒序
应用场景：列表信息，导航栏
二、表格--table
案例：
<table align="center"width="400px" border="1" cellspacing="0" cellpadding="10px"><caption><b>学生信息表</b></caption><thead><tr align="center"> <!--tr表示行--><th>表头</th><th>ID</th><!--td表示列--><th>姓名</th><th>年龄</th><th>联系方式</th></tr></thead><tbody><tr align="center" bgcolor="#982999"><!--tr表示行--><th rowspan="3" align="left" valign="top">数据</th><td>1</td><!--td表示列--><td>zs</td><td>18</td><td>18190121254</td></tr><tr align="center"><!--tr表示行--><td>2</td><!--td表示列--><td>ls</td><td>18</td><td>18194656825</td></tr><tr align="center" bgcolor="#994582"><!--tr表示行--><td>3</td><!--td表示列--><td>ww</td><td colspan="2">20/12345678945</td></tr></tbody><tfoot> 脚部（底部）：通常用于摆放分页效果</tfoot></table>属性：
border：边框线0不开见，1可见并且设置边框为1像素
cellspacing：单元格间的间距
cellpadding：单元格的内边距
bgcolor：（background color）背景颜色
align（水平）：left左 center 中 right 右
valign（垂直）：top上 middle中 bottom下
rowspan:跨行合并
colspan：跨列合并
caption：表格的标题
三、表单
1-定义
表单也称为数据收集表单，主要是实现客户端向服务器端提交数据
2-表单的应用场景
登录表单
注册表单
3-表单结构
<form action="" method="" name="" enctype="text/plain"></form> 说明：被form标记包裹的区域，称为表单域。form： 表单 属性：action： 表单提交的地址，为空则代表提交到当前页面name: 表单名enctype： 提交的表单数据是否需要编码- application/x-www-form-urlencoded- multipart/form-data 不编码（表单控件中出现文件上传时使用）- text/plain 普通文本发送method： 提交方式- get 获取 提交的表单数据会显示到地址栏，格式： ?name=value&name=value每种浏览器地址栏最大长度不一致，如果数据过大可能会导致数据丢失。地址栏的数据会暴露，不太安全。- post 发送表单数据会被封装在请求头信息中（载荷）通常post提交方式的最大数据在服务器端配置，理论上没有限制。相较于get提交，数据相对安全。 ------------------------------------------------------------------- 表单中的相关控件:<input type="" name="" placeholder=""/>属性：type： 控件类型- text 文本输入框- password 密码输入框- submit 提交按钮- radio 定义单选框- checkbox 多选框- button 定义按钮(没有提交功能)- image 图片提交按钮(src引入图片,以及width(宽)/height(高))- email 邮箱输入框(在提交数据时进行格式检测)- color 定义颜色选择框- number 定义数字输入框- file 定义文件选择(用于文件上传)- reset 重置按钮- hidden 隐藏控件name： 控件名称，服务器接收表单数据时对应的键名称。placeholder： 设置提示信息readonly 只读(不能修改)，可以提交disabled 禁用(不可操作)，不可提交size 定义输入框的尺寸(宽度)maxlength 定义输入框内容的最大长度min(type [number]) 最小值max(type [number]) 最大值list: 列表项案例：<input type="text" name="userName" list="un"/><datalist id="un"><option value="张三"><option value="张三丰"><option value="张天爱"><option value="李莫愁"></datalist>----------------------------------------------------------------<select name="" size="" multiple><option value="">选项1</option>... </select> 说明：select: 下拉框option：下拉项 属性：name: 下拉框名称value： 传递到服务器的值multiple： 按住ctrl可以实现多选size: 下拉框的显示高度 ---------------------------------------------------------------- #多行文本框<textarea name="" rows="" cols=""></textarea> 属性：rows: 定义多行文本框的最小行cols: 定义文本框的最小列<form action="https://www.baidu.com/" name="loginForm" method="post" enctype="multipart/form-data"><fieldset><legend>登录</legend>用户名：<input name="userName" type="text" placeholder="请输入用户名"/><br/>密 码：<input name="userPwd" type="password" placeholder="请输入密码"/><br/><input type="submit" value="登录" /></fieldset></form><form action="localhost:8080/user/regist" method="post" enctype="multipart/form-data"><fieldset><legend>注册</legend>用户名：<input name="userName" type="text" placeholder="请输入用户名"/><br/>密 码：<input name="userPwd" type="password" placeholder="请输入密码"/><br/>再次确认密码：<input name="reUserPwd" type="password" placeholder="请输入密码"/><br/>性别：<input type="radio" name="gender" value="1"/>男  <input type="radio" name="gender" value="0"/>女<br/>爱好：<input type="checkbox" name="like" value="1"/>篮球 <input type="checkbox" name="like" value="2"/>足球 <input type="checkbox" name="like" value="3"/>游戏 <br/>请选择省份：<select name="sqt"><option value="">---请选择省份---</option><option value="1001">四川省</option><option value="1002">重庆市</option><option value="1003">北京市</option></select><br />上传头像：<input type="file" name="headImg"/><br/>个人备注：<textarea name="myinfo" rows="6" cols="16" placeholder="请输入个人备注信息"></textarea><br/><input type="submit" value="注册"/></fieldset></form>