一.列表标签
有序列表和无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--1.无序列表
type:列表类型
square:实心正方形
circle:空心圆
<li>定义在ul里面
即li和ul标签一般不会单个出现
-->
<ul type="square">
<li>乔丹</li>
<li>科比</li>
<li>詹姆斯</li>
<li>库日天</li>
</ul>
<!--2.有序列表
将ul改为ol
<ol start="1",type="1">
<li></li>
</ol>
start:起始的索引(默认是第一个)
type:列表类型
阿拉伯数字:1
小写字母:a
大写字母:A
罗马字母:i/I
-->
<ol start="1" type="1">
<li>乔丹</li>
<li>科比</li>
<li>詹姆斯</li>
<li>库日天</li>
</ol>
</body>
</html>
运行结果
二.超链接标签
作用:用于控制页面与页面(服务器资源)之间的跳转
注意:
target:属性取值
_blank:新起页面
_self:当前页面(默认)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="03列表标签.html" target="_self">列表标签</a>
</body>
</html>
运行结果
假链接
<a href="#">这是一个假链接</a>
三.表格标签
border属性是指表格的边框,不是单元格的边框
cellspacing属性是单元格之间的间距
cellpadding属性是表示单元格中的内容距离单元格边框的内边距
align属性用来表示表格的水平对齐方式
bgcolor属性用来表示表格的背景色
tr标签的属性:
1.align属性:该行内容的水平对齐方式
2.bgcolor:该行的背景颜色
3.colspan:跨列合并 rowspan:跨行合并
caption:表格的标题
th标签:它也是单元格,它是表头单元格
就是表格只有一行一列,td也不能少
合并之前,每一行的列的个数应该一样
table定义tr,tr里面放td,td里面放内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1px" cellspacing="0" width="500px" cellpadding="30px" align="center" bgcolor="#f0f8ff">
<caption>学生信息表</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
</tr>
<tr align="center" bgcolor="#e9967a">
<td >11</td>
<td bgcolor="#e9967a" align="right">12</td>
<td>13</td>
</tr>
<tr>
<td colspan="2">5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
运行结果
四.表单标签
表单是由表单标签和一些表单项组成的
form就是表单标签,决定了往哪个服务器路径提交数据,采用什么方式,什么数据类型
1.action属性:提交路径
2.method属性:
get和post提交方式的区别
1.携带的数据位置:get方式是在URL地址后面,post方式是在http协议的请求体中。
2.携带的数据类型:get方式只能携带文本数据(字符串),post方式可以携带任意数据(包含图片,音频,视频),所以文件上传用post方式
3.get方式只能携带少量的数据,post方式携带数据大小是没有限制的(服务器会有限制)
3.entype:数据类型(了解)
表单项:就是真实显示在我们面前的组件(输入框,按钮,下拉框,多选框,文件上传等等)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="https://www.baidu.com" method="get" enctype="application/x-www-form-urlencoded">
<!--这是一个输入框-->
用户名: <input type="text" name="username" placeholder="请输入用户名"><br>
密码:<input type="password" name="pwd" ><br>
性别:<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女<br>
兴趣爱好:<input type="checkbox" name="hoppy" value="basketball">篮球
<input type="checkbox" name="hoppy" value="football">足球
<input type="checkbox" name="hoppy" value="piano">钢琴
<input type="checkbox" name="hoppy" value="skating">滑雪<br>
生日:<input type="date" name="birthday"><br>
上传头像:<input type="file" name="icon"><br>
学历:
<select name="anna">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
<option value="bs">博士</option>
</select><br>
个人简历:
<textarea name="info" rows="10" cols="50"></textarea>
<input type="button" value="按钮">
<input type="submit">
<input type="reset">
<input type="image" src="img/star.jpg" width="50" height="50">
你好
<input type="hidden" name="id" value="12">
世界
</form>
</body>
</html>
运行结果
type属性:表示input的类型,默认的text表示文本框
1.text 表示文本框
2.file 表示文件选择框
3.button 普通按钮(不内置任何功能)
4.submit 提交按钮,内置提交表单功能
5.password 密码框
6.radio 单选框
7.checkbox 多选框/复选框 同一组多选框name要相同
8.date 日期选择框
9.image 图片按钮
10.reset 重置按钮
11.hidden 隐藏域,携带数据,但是用户看不到
12.file 文件选择框
value属性:对于按钮来言,就是按钮上的数字
对于文本框 ,密码框,日期选择框,文件选择框等等,就是输入或选择的内容
对于单选框,多选框而言,我们要手动设置value值
name属性:当一个表单有name属性的时候,它的数据才会提交给服务器,数据以name=value的方式提交的
disabled属性:表示这个表项不可用,它的数据不能修改,并且数据无法提交
checked属性:单选框或复选框默认选中
下拉框select:
下拉框里面每个选项都是一个option变迁
下拉框name属性是写在select标签中,value属性写在option标签中
selected默认选中
文本域textarea
rows属性表示显示的行数
cols属性表示显示的列数
-->