HTML（一）无序列表和有序列表，表格，form表单

最新推荐文章于 2022-06-07 17:52:48 发布

IT阿生

最新推荐文章于 2022-06-07 17:52:48 发布

阅读量691

点赞数 1

分类专栏： it 文章标签：开发语言 html5

本文链接：https://blog.csdn.net/weixin_45800201/article/details/123721408

版权

it 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一、列表

1.1 无序列表和有序列表

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 无序列表设置属性值：type 设置列表的前缀 -->
		
		<!-- disc 实心圆圈 -->
		<!-- square 实心方块 -->
		<!-- circle 空心圆圈 -->
		<ul type="circle">
			<li>你好</li>
			<li>你好呀！</li>
			<li>你是？</li>
		</ul>
		
		<!-- 有序列表设置属性值：type 设置列表的前缀 -->
		<ol type="I">
			<li>你好</li>
			<li>你好呀！</li>
			<li>你是？</li>
		</ol>
	</body>
</html>

1.2 属性

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 无序列表设置属性值：type 设置列表的前缀 -->
		
		<!-- disc 实心圆圈 -->
		<!-- square 实心方块 -->
		<!-- circle 空心圆圈 -->
		<ul type="circle">
			<li>你好</li>
			<li>你好呀！</li>
			<li>你是？</li>
		</ul>
		
		<!-- 有序列表设置属性值：type 设置列表的前缀 -->
		<ol type="I">
			<li>你好</li>
			<li>你好呀！</li>
			<li>你是？</li>
		</ol>
	</body>
</html>

1.3 定义列表

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 标签名称：<dl> <dt> <dd> -->
		<!-- <dl>定义列表 -->
		<!-- <dt>定义列表的分类 -->
		<!-- <dd>定义列表分类的条目 -->
		<dl>
			<dt>水果</dt>
			<dd>香蕉</dd>
			<dd>西瓜</dd>
			<dd>南瓜</dd>
		</dl>
	</body>
</html>

二、表格

2.1 表格属性设置

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!-- 普通表格设置 -->
		<table border="1px" bordercolor="#ff493c"
		 cellspacing="0px" align="center"
		 cellpadding="0px" width="200px" bgcolor="##feeb46">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>1</td>
				<td>小明</td>
				<td>22</td>
			</tr>
			<tr>
				<td>2</td>
				<td>小李</td>
				<td>30</td>
			</tr>
		</table>
	</body>
</html>

2.2 表格行列分别合并

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="2px" cellspacing="0px" cellpadding="0px" width="200px">
			<tr>
				<th  colspan="3">编号</th>
			</tr>
			<tr>
				<td rowspan="2">夏明</td>
				<td>成绩</td>
				<td>22</td>
			</tr>
			<tr>
				<td>学分</td>
				<td>30</td>
			</tr><tr>
				<td rowspan="2">小明</td>
				<td>成绩</td>
				<td>22</td>
			</tr>
			<tr>
				<td>学分</td>
				<td>30</td>
			</tr>
		</table>
	</body>
</html>

三、form表单

3.1 form表单属性

图
代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 提交的数据类型-->
		<form enctype="multipart/form-data">
			<input type="text" />
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

3.2 input的type属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

		</style>
	</head>
	<body>
		<p>
			普通文本框<input type="text" />
		</p>
		<p>
			密码框<input type="password" />
		</p>
		<p>
			<!-- name设置的属性值一样才起作用 -->
			单选框<input type="radio" name="sex" />
			夏明<input type="radio" name="sex" />
		</p>
		<p>
			<!-- name设置的属性值一样 -->
			复选框<input type="checkbox" name="sex" />
			篮球<input type="checkbox" name="sex" />
		</p>
		<p>
			数值框 <input type="number" step="10" min="10" max="20" value="15"/>
		</p>
		<p>
			滑块 <input type="range" step="1" min="1" max="5" value="20"/>
		</p>
		<p>
			文件 <input type="file"/>
		</p>
		<p>
			搜索框<input type="search"/>
		</p>
		<p>
			颜色<input type="color"/>
		</p>
		<p>
			邮箱<input type="email"/>
		</p>
		<p>
			年月日<input type="date"/>
		</p>
		<p>
			年月日时分<input type="datetime-local"/>
		</p>
		<p>
			年周<input type="week"/>
		</p>
		<p>
			年月<input type="month"/>
		</p>
		<p>
			<input type="submit"/>
		</p>
		<p>
			<input type="reset"/>
		</p>
		<p>
			<!-- 只有button需要加value属性起名字 -->
			<input type="button" value="按钮"/>
		</p>
	</body>
</html>

IT阿生

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML（一）无序列表和有序列表，表格，form表单

目录一、列表1.1 无序列表和有序列表1.2 属性1.3 定义列表二、表格2.1 表格属性设置2.2 表格行列分别合并三、form表单3.1 form表单属性3.2 input的type属性值一、列表1.1 无序列表和有序列表代码演示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <bod
复制链接

扫一扫