【网页设计】26：列表&表单

hello world 999

已于 2023-04-18 22:19:08 修改

阅读量1.5k

点赞数 1

分类专栏：网页设计文章标签：前端

于 2021-03-04 22:21:32 首次发布

本文链接：https://blog.csdn.net/weixin_49167174/article/details/114379271

版权

网页设计专栏收录该内容

39 篇文章 8 订阅

订阅专栏

第26节：列表&表单

在这里插入图片描述

1.列表：

列表的概念：将一些内容 or 样式相近、相关的内容写在一起，列表由列表类型和列表项组成
列表的分类：无序列表、有序列表、定义列表

在这里插入图片描述

（1）列表代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第26节：列表和表单</title>
	</head>
	<body style="background-color:#fffae8;">
		<!-- 列表的分类：无序列表、有序列表、自定义列表 -->
		<!-- 1.有序列表：有先后顺序 -->
		<!-- 注：ol>li*3然后按住键盘上的tab键可以快速生成 -->
		<!-- type属性表示有序列表属性，start表示列表开始值 -->
		
		<ol type="A" start="1">有序列表：以下你最喜欢的动物是( )
			<li>狗子</li>
			<li>花猫</li>
			<li>小猪</li>
			<li>地松鼠</li>
		</ol>
		
		<!-- 2.无序列表：并列顺序 -->
		<!-- 注：ul>li*3然后按住键盘上的tab键可以快速生成 -->
		<!-- type属性:disc(默认)是实心圆，square是实心矩形，circle是空心圆-->
        <!-- 注：ul的直接子集必须是li，li里面可以包含其他的标签，比如p/img/a...甚至是 ol>li或者 ul>li-->

		<ul type="disc">无序列表:一台计算机的组成部分：
			<li>主机箱</li>
			<li>显示器</li>
			<li>键盘</li>
			<li>鼠标</li>
		</ul>
		
		<!-- 3.定义列表 -->
		<!-- 注：dl>dt+dd然后按住键盘上的tab键可以快速生成 -->
		<!-- type属性:disc(默认)是实心圆，square是实心矩形，circle是空心圆-->
		
		<dl>
			<dt>HTML</dt>
			<dd>超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。<br/>HTML不是一种编程语言，而是一种标记语言 （markup language），是网页制作所必备的工具。</dd>
		</dl>
		
	</body>
</html>

运行结果：

在这里插入图片描述

2.表单：

表单的概念：由客户端向服务器传递数据，常见的注册、登录、调查问卷、留言簿等；
表单相关标签：form标签和input标签

在这里插入图片描述

type属性	说明
text	文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

（1）表单代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第26节：列表和表单</title>
	</head>
	<body style="background-color:#fffae8;">
		<!-- 表单 -->
		<!-- action属性：提交信息的地址 -->
		<form action="">
			
			<!-- 1.文本框 -->
			<input type="text" placeholder="请输入账号">
			<!-- 2.密码框 -->
			<input type="password" placeholder="请输入密码"><br/>
			<!-- 3.复选框 -->
			<input type="checkbox">狗子
			<input type="checkbox">花猫
			<input type="checkbox">小猪
			<input type="checkbox">地松鼠<br/>
			
			<!-- 4.单选框 -->
			<input type="radio" name="sexy" id="" value="" />男
			<input type="radio" name="sexy" id="" value="" />女<br/>
			<!-- 5.上传 -->
			<input type="file">
			<!-- 6.提交 -->
			<input type="submit" name="" id="" value="提交" /><br/>
			<!-- 7.重置 -->
			<input type="reset" name="" id="" value="重置" />
			
			
		</form>
		
	</body>
</html>

运行结果：

在这里插入图片描述

3.列表&表单代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第26节：列表和表单代码演示</title>
	</head>
	<body style="background-color:#fffae8;">
		<h2>学生消费观调查表</h2>
		<ol type="A" start="1">请问您每个月的生活费是多少
			<li>3500以上</li>
			<li>3500-2500</li>
			<li>2500-1500</li>
			<li>1500-500</li>
			<li>500以下</li>
		</ol>
		
		<ul>您的主要花销内容包括哪些
			<li>食堂三餐</li>
			<li>生活用品</li>
			<li>书籍文具</li>
			<li>女友购物</li>
			<li>
				<input type="text" placeholder="其他">
			</li>
		</ul>
		
		学号：<input type="text" placeholder="请输入您的学号"><br/>
		姓名：<input type="text" placeholder="请输入您的姓名"><br/>
		是否满意本次学校的调查工作？
		<input type="radio" name="choice" id="" value="" />非常满意
		<input type="radio" name="choice" id="" value="" />不太满意<br/>
		
		你学会了哪些标签？
		<input type="checkbox">ol
		<input type="checkbox">ul
		<input type="checkbox">dl
		<input type="checkbox">form
		<input type="checkbox">input<br/>
		
		你所在的城市<select>
			<option value="">请选择</option>
			<option value="">北京</option>
			<option value="">上海</option>
			<option value="">广州</option>
			<option value="">重庆</option>
			<option value="">深圳</option>
		</select><br/>
		
		<input type="reset" name="" id="" value="重置" />
		<input type="submit" name="" id="" value="提交" />
		
	</body>
</html>