HTML列表、表单与浮动框架的使用

最新推荐文章于 2022-10-04 21:11:39 发布

头上三尺很有神

最新推荐文章于 2022-10-04 21:11:39 发布

阅读量1.5k

点赞数

分类专栏：前端 HTML和CSS 文章标签：前端开发 html 网页设计网页制作快速入门

本文链接：https://blog.youkuaiyun.com/weixin_45060872/article/details/103428130

版权

前端同时被 2 个专栏收录

62 篇文章

订阅专栏

HTML和CSS

5 篇文章

订阅专栏

本文详细介绍了HTML中的列表（有序、无序、自定义列表）及其语法，表单的用途、组成（包括表单元素和控件）以及各属性，还讲解了浮动框架的两种使用方法，以及摘要与细节、度量标签和高亮标签的用法，是HTML初学者的快速入门指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML列表、表单与浮动框架的使用

一、列表

1.作用：默认显示方式为从上到下的显示数据
2.列表的组成列表类型和列表项
3.列表的分类：
有序列表无序列表自定义列表

有序列表语法：

		<ol>
		< li></li>
		</ol>

			<ol type="I">
				<li>第一</li>
				<li>第二</li>
				<li>第三</li>
			</ol>

无序列表语法：

 <ul>
 <li></li>
 </ul>

某同学的择偶标准：
1.有钱的
2.长得漂亮的
3.丰润犹存并且有钱的

		<ul type="">
		<li>一</li>
		<li>二</li>
		<li>三</li>
		</ul>

自定义列表语法：
dl列表的类型 dt列表的标题 dd 列表项

		<dl>
			<dt>诗仙</dt>
			<dd>李白</dd>
			<dt>诗圣</dt>
			<dd>杜甫</dd>
		</dl>

二、表单

1.表单的作用：
用于显示、收集用户信息，并将信息提交给服务器
2.表单组成
1.表单元素：负责将用户数据提交给服务器
2.表单控件：负责接收用户的数据（和用户进行交互的）

表单元素
form 属性
action：定义表单被提交时的动作，主要就是服务器上要处理数据的应用程序URL找谁处理（提交地址）
method：指定数据提交的方式
get传输显示提交可以显示在地址栏上的有数据大小限制的
post传输隐式传输所有提交数据时都是看不见的，相对来来说比较安全无数据大小限制
表单控件：提供多个类型的表单控件，并具有可视化的外观

input组件:
type:类型
value:值
name：控件的名称
disabled：禁用控件
text：普通的文本框
password：密码框
email：邮箱框
submit：提交按钮
radio 单选
checkbox 多选
image 图片提交

select控件（下拉列表）

<select></select>

size：显示数量如果不为1的话则变成滚动列表而不是下拉列表
option : selected:

文本域textarea :
cols 指定文本的列数（宽度）
rows 指定文本的行数（高度）

关联文本于控件label :
1.首先在要关联的input控件上加上一个id
2.用label标签包含住文本并且加上 for属性

三、浮动框架

作用：可以在一个浏览器窗口中同时显示多个页面文档
第一种用法

<iframe src="http://www.4399.com" width="500px" height="500px"></iframe>

第二种用法和超链接的结合使用
1.创建超链接标签
2.创建iframe标签
3.在iframe加上一个name属性
4.改变超链接的target属性改变为name的值

四、摘要与细节

作用：允许将页面某部分内容进行展开或收缩
语法：
第一步写上摘要标签 details
第二步写上标题 summary
第三步写内容

五、度量标签

min：最小值
max：最大值
value：当前显示的度量值0

		<meter min="0" max="50" value="50"></meter>

六、高亮标签

< mark>嘿嘿嘿< /mark>

习题：

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title></title>
		</head>
		<body>
			<!--有序列表-->
			<ol>
				<li>第一</li>
				<li>第二</li>
				<li>第三</li>
			</ol>
			<!--无序列表-->
			<ul>
				<li>一</li>
				<li>二</li>
				<li>三</li>
			</ul>
			<!--自定义列表
				dl：列表类型
				dt：列表标题
				dd：列表项
			-->
			
			<dl>
				<dt>诗仙</dt>
				<dd>李白</dd>
				<dt>诗圣</dt>
				<dd>杜甫</dd>
			</dl>
			<hr  size="1" color="black"/>
			
			<!--表单-->
			<form action="#" method="post">
				<input  type="text"/>文本框<br />
				<input type="password" />密码<br />
				<input type="email" />邮箱<br />
				<input type="radio" />单选框<br />
				<input type="checkbox" />多选框<br />
				<input type=" text"placeholder="提示文本" /><br />
				<input type="submit" />提交<br />
				<input type="image" src="img/03.jpeg" />图片提交<br />
				<select >
					<option >下拉框</option>
				</select>
				<textarea rows="5px" cols="5px">文本域</textarea><br />
				<input type="text"  name="cxk" /><label for="cxk"><input type="button" /></label>关联
			</form>
			
		<hr  size="1" color="black"/>
		
		<iframe width="100px" height="100px" style="background-color: beige;"></iframe>浮动框架
		<iframe width="100px" height="100px" frameborder="0" style="background-color: bisque;"></iframe>浮动框架去边框
		<iframe src="http://www.baidu.com" width="100px" height="100px" style="background-color: beige;"></iframe>浮动框架生成窗口
		<iframe width="100px" height="100px" style="background-color: beige;" name="link"></iframe>浮动框架结合a标签生成窗口
		<a href="http://www.baidu.com" target="link">百度一下</a>
		<hr size="1"  color="black"/>
		<!--摘要-->
		<details style="width: 100px; height: 10px;">
			<summary>
				这是摘要标题
			</summary>
			内容
		</details>
		度量标签
		<meter min="0" max="50" value="45"></meter>
		高亮标签
		<mark>哈哈哈哈或或</mark>
		</p>
		</body>
	</html>

练习

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title></title>
		</head>
		<body>
			<div style="width: 1000px; height: 500px; margin: 0 auto;">
				<img src="img/bg.jpg" width="1000px" height="100px" />
				<form>
				<ul  style="list-style: none; margin: 0 auto; width: 500px; height: 500px;">	
					<li>邮箱账号
						<input type="text"/ style="margin-left: 100px; margin-bottom: 30px;"></li>
					<li>昵称&emsp;&emsp;
						<input type="text"/ style="margin-left: 100px; margin-bottom: 30px;"></li>
					<li>密码&emsp;&emsp;
						<input type="password"/ style="margin-left: 100px; margin-bottom: 30px;"></li>
					<li>确认密码
						<input type="password"/ style="margin-left: 100px; margin-bottom: 30px;"></li>
					<li>性别&emsp;&emsp;
						<input type="radio" name="sex"/ style="margin-left: 100px; margin-bottom: 30px;">男
							<input type="radio" name="sex"/ style="margin-left: 30px;">女
					</li>
					<li>
					生日&emsp;&emsp;
					<select style="margin-left: 100px; margin-bottom: 30px;">
						<option>公历</option>
						<option>农历</option>
					</select>
					<select>
						<option>年</option>
						<option>2019</option>
						<option>2018</option>
						<option>2017</option>
						<option>2016</option>
					</select>
					<select>
						<option>月</option>
						<option>12</option>
						<option>14</option>
						<option>15</option>
						<option>16</option>
					</select>
					<select>
						<option>日</option>
						<option>9</option>
						<option>8</option>
						<option>7</option>
						<option>6</option>
					</select>
					</li>
					
					<li>
					所在地&emsp;
					<select style="margin-left: 100px; margin-bottom: 30px;">
						<option>中国</option>
						<option>美国</option>
						<option>英国</option>
						<option>日本</option>
					</select>
					<select>
						<option>湖北</option>
						<option>广东</option>
						<option>河北</option>
						<option>湖南</option>
					</select>
					<select>
						<option>武汉</option>
						<option>广州</option>
						<option>石家庄</option>
						<option>长沙</option>
					</select>
					</li>
					<li>
					验证码&emsp;
					<input type="text" / style="margin-left: 100px; margin-bottom: 30px;">
					<img src="img/getimage.jpg" align="center" width="80px" height="30px"/>
					<a href="yanzhenma.html">点击换一张</a>
					</li>
					<li>
					&emsp;&emsp;&emsp;&emsp;
					<input type="checkbox" / style="margin-left: 100px; margin-bottom: 30px;">
					我已阅读并同意此条款
					</li>
					<li>
					&emsp;&emsp;&emsp;&emsp;
					<input type="image"/ src="img/btn.jpg" width="120px" height="32px" style="margin-left: 100px; margin-bottom: 30px;">
					</li>
				</ul>
				</form>
			</div>
		</body>
	</html>

练习（改）

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title></title>
		</head>
		<body>
			<div align="center">
				<img src="img/bg.jpg" width="1000px" height="100px" />
			</div>	
				<form action="#" method="post">
					<table border="0" width="800px" height="300px" align="center" cellpadding="35px" cellspacing="0">
						<tr>
							<td align="right" width="200px">邮箱</td>
							<td><input type="text" placeholder="请输入正确的邮箱账号"></td>
						</tr>
						<tr>
							<td align="right" width="200px">昵称</td>
							<td><input type="text" placeholder="请输入不少于六个字的昵称"/></td>
						</tr>
						<tr>
							<td align="right" width="200px">密码</td>
							<td><input type="password" placeholder="请输入密码"/></td>
						</tr>
						<tr>
							<td align="right" width="200px">确认密码</td>
							<td><input type="password" placeholder="请输入密码"/></td>
						</tr>
						<tr>
							<td align="right" width="200px">性别</td>
							<td><input type="radio" id="sex"/>男<input type="radio" id="sex"/>女</td>
						</tr>
						<tr>
							<td align="right" width="200px">生日</td>
							<td>
								<select >
								<option selected="selected">公历</option>
								<option>农历</option>
								
							</select>
							<select >
								<option selected="selected">年</option>
								<option>2009</option>
								<option>1998</option>
								<option>1997</option>
							</select>
							<select >
								<option selected="selected">月</option>
								<option>7</option>
								<option>8</option>
								<option>10</option>
							</select>
							<select >
								<option selected="selected">日</option>
								<option>11</option>
								<option>2</option>
								<option>3</option>
							</select>
							</td>
						</tr>
						<tr>
							<td align="right" width="200px">所在地</td>
							<td>
							<select >
								<option selected="selected">中国</option>
								<option>美国</option>
								<option>日本</option>
								<option>印度</option>
							</select>
							<select >
								<option selected="selected">湖北</option>
								<option>湖南</option>
								<option>河北</option>
								<option>广东</option>
							</select>
							<select >
								<option selected="selected">武汉</option>
								<option>长沙</option>
								<option>石家庄</option>
								<option>广州</option>
							</select>
							</td>
						</tr>
						<tr>
							<td align="right" width="200px">验证码</td>
							<td><input type="text"/ ><img src="img/getimage.jpg"/ align="middle" ><a href="#">点击换一张</a></td>
						</tr>
						<tr>
							<td colspan="2" align="center"><input type="checkbox" />我已阅读并同意服务条款</td>
							
						</tr>
						<tr>
							<td colspan="2" align="center"><input type="image" src="img/btn.jpg"/></td>
							
						</tr>
					</table>
				</form>
		</body>
	</html>