HTML基础（六）---列表和表单标签

一、列表标签

列表标签分为三种类型：无序列表、有序列表、自定义列表

1、无序列表标签与属性

无序列表是以<ul>...</ul>表示的，具有三种无序列表类型情况：

第一、<ul type="disc"> 是实心圆点，默认的情况

第二、<ul type="circle">是空心原点

第三、<ul type="square">是实心方块

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
<head>
	<title>列表标签</title>
</head>
<body>
	<!-- 修改列表前缀标志-disc实心小圆点，默认的 -->
	<ul type="disc">
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
	</ul>
	<!-- 修改列表前缀标志-circle空心小圆点 -->
	<ul type="circle">
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
	</ul>
	<!-- 修改列表前缀标志-square实心方块 -->
	<ul type="square">
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
	</ul>
</body>
</html>

2、有序列表的标签与属性

无序列表是以<ol>...</ol>表示的，具有五种无序列表类型情况：

第一、<ol type="1">是数字顺序排列

第二、<ol type="a">是小写英文字母顺序排列

第三、<ol type="A">是大写英文字母顺序排列

第四、<ol type="i">是小写罗马字符顺序排列

第五、<ol type="I">是大写罗马字符顺序排列

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
<head>
	<title>列表标签</title>
</head>
<body>
	<!-- 有序列表 -->
	<ol>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
	</ol>
	<!-- 数字排列 -->
	<ol type="1">
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
	</ol>
	<!-- 小写字母排列 -->
	<ol type="a">
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
	</ol>
	<!-- 大写字母排列 -->
	<ol type="A">
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
	</ol>
	<!-- 小写罗马排列 -->
	<ol type="i">
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
	</ol>
	<!-- 大写罗马排列 -->
	<ol type="I">
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
	</ol>
</body>
</html>

3、自定义列表标签

<dl>是用来创建一个的列表块

<dt>是用来创建列表中的上层项目，dt可以理解为标题

<dd>是用来创建列表中最下层项目，dd可以理解为内容

在一个dl当中可以设置多个dt与dd的组合

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
<head>
	<title>列表标签</title>
</head>
<body>
	<!-- 自定义列表 -->
	<dl>
		<!-- dt可以看做是标题 -->
		<dt>水果</dt>
		<!-- dd可以看做是标题下的子内容 -->
		<dd>香蕉</dd>
		<dd>草莓</dd>
		<dd>西瓜</dd>
		<dt>手机</dt>
		<dd>Iphone</dd>
		<dd>华为</dd>
		<dd>三星</dd>
	</dl>
</body>
</html>

二、form标签的属性

1、form标签的语法

2、form标签的属性

第一、action属性：规定当提交表单时向何处发送表单数据，发送地址都是动态地址，需要把用户数据收集之后进行处理，送过去的都是动态页面，比如常见的asp页面、jsp页面等，action参数为空时则表示在本页面进行提交数据

第二、method属性：get和post规定用于发送 form-data 的 HTTP 方法

get请求一般用于常见的请求，请求数据会显示在地址栏中

post请求用于用户登录以及不想在地址栏中显示数据或者是大数据传递的请求

第三、name属性：规定表单的名称，用于对表单进行区分，只能用英文，不要用中文和特殊符号

第四、target属性：规定在何处打开 action URL，规定以什么样的方式打开，之前介绍过，这里不多做介绍

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
<head>
	<title>form标签</title>
</head>
<body>
	<!-- get请求的form表单 -->
	<form action="add.php" method="get" target="_blank" name="get_form">
		<!-- 输入框 -->
		<input type="text" name="user" />
		<!-- 提交按钮 -->
		<input type="submit">
	</form>
	<hr/>
	<!-- post请求的form表单 -->
	<form action="add.php" method="post" target="_blank" name="post_form">
		<!-- 输入框 -->
		<input type="text" name="user" />
		<!-- 提交按钮 -->
		<input type="submit">
	</form>
</body>
</html>