前端学习记录3-HTML(列表,表单)

最新推荐文章于 2024-04-18 05:00:00 发布

SHoadgnaw

最新推荐文章于 2024-04-18 05:00:00 发布

阅读量193

点赞数

分类专栏：学习记录文章标签： web html html5

本文链接：https://blog.csdn.net/weixin_44541948/article/details/106930756

版权

学习记录专栏收录该内容

28 篇文章 0 订阅

订阅专栏

前端学习记录3-HTML-列表,表单

列表
表单

列表

布局、让页面布局整齐规范，跟表格相似但可组合的自由度很高(表格存放数据最好不用他布局)

无序列表ul-li

<ul></ul> 中只可以嵌套 <li></li>
直接在<ul>标签中输入其他标签或者文字不被允许
(可以写但是出了问题不好改所以就别写)

<li></li>中可以使用任何标签
最好别写样式用CSS 原因在于html中的样式
在不同浏览器中可能会显示的不同所以不用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>无序列表使用ul->li</title>
</head>
<body>
	<ul>
		<li>火龙果</li>
		<li>波罗蜜</li>
		<li>香蕉</li>
		<li>西瓜</li>
    </ul>
<body>
</head>

火龙果
波罗蜜
香蕉
西瓜

表格与无序列表的区别

表格是形成了一个一个固定的单元格
单元格在本质上不好改变形式

而无序列表<ul></ul>是形成了一个一个的可操作的元素容器

为了可控性大部分的新闻类视图的网页元素使用此方法来做产品商城这样的网站中
所有商品的布局代码也基本属于<ul></ul>来制作

有序列表ol-li

<ol></ol>和<ul></ul>相似在用法上基本相同

但是主要的区别是在ol有序列表中
所有的元素内容是已经排序好的有基本的存储序列 (可操作性相对ul低)

因为标识缘故有序列表ol通常用在有明确等级性的项目上
例如下图的排序但是也同样存在问题在内容发生改变的时候不好改
该这个位置不仅需要调整CSS 还需要调整相应位置排序而无序列表可以不改代码
但是不改代码也不太好是吧

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>有序列表使用</title>
</head>
<body>
	<ol>
		<li>中国</li>
		<li>俄罗斯</li>
		<li>美国</li>
		<li>英国</li>
    </ol>
<body>
</head>

中国
俄罗斯
美国
英国

自定义列表dl-dt-dd

<dl></dl>中嵌套<dt></dt> <dd></dd>

<dt></dt>标签类似语言内作为父类的对象 <dd></dd> 作为子类
<dd></dd> 标签内的内容是作为解释<dt></dt>存在的

意思就是<dt></dt>内容包含<dd></dd>内容

自定义列表通常用在明确性继承性上的项目上

例如产品商城主页中的帮助中心
下方对应出现跟帮助中心有关的账户管理购物指南订单操作内容
此处使用自定义列表<dl></dl>帮助中心写入<dt></dt>
账户管理购物指南订单操作写入<dd></dd>
同样服务支持下级所属的售后政策自助服务相关下载这些内容同样跟上述操作相同

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>自定义列表使用</title>
</head>
<body>
	<dl>
		<dt>北京市</dt>	
		<dd>昌平区</dd>
		<dd>海淀区</dd>
		<dd>大兴区</dd>
		<dd>等等区...</dd>

		<dt>山东省</dt>
		<dd>菏泽市</dd>
		<dd>青岛市</dd>
		<dd>烟台市</dd>
		<dd>等等市...</dd>
	</dl>
<body>
</head>

北京市

昌平区

海淀区

大兴区

等等区...

山东省

菏泽市

青岛市

烟台市

等等市...

表单

使用目的是把信息记录提交给服务端的数据库中或是其他相关内容控制

完整表单(简单来说)
元素	作用
表单控件(表单元素)	实际需要用户操作的部分
提示信息	给用户做提示
表单域	把所有数据提交至后台

input控件

<input type="属性" value="" name="">

常用元素
type属性值	具体表现形式
text	单行文本输入框
password	密码输入框(显示样式默认为 ········ (一个点) 表示输入字符)
radio	单选按钮
checkbox	复选按钮
button	普通按钮(没有具体的含义)
submit	提交按钮(提交在form表单域中输入的内容)
reset	重置按钮(重置在form表单域中输入的内容)
image	图像样式提交按钮(提交在form表单域中输入的内容)
file	文件域(上传照片用的是这玩意上传计算机内存在的可上传文件)
元素名	元素值	意义
name	自定义	控件名称()
value	自定义	input控件默认文本值
size	正整数	input控件显示宽度
checked	checked	定义控件默认被选中的项
maxlength	正整数	控件允许输入最多的字符数

按道理来说name是必须写的因为有后台交互的问题

使用radio单选按钮时必须要定义name 控件名才能实现真正的单选

checked属性可使用在复选和单选中使用

button普通按钮控件必须有 value值才能在浏览器中显示具体内容
submit 提交按钮若不写value值默认带提交两个字

具体使用方法:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	用户名:<input type="text" name="username" value="请输入用户名">

	<br>

	昵称:<input type="昵称" name="user id" value="请输入昵称">

	<br>

	密码:<input type="password" name="password">

	<br>
 
	<!-- 使用radio单选按钮时 必须要定义name 控件名 才能实现真正的单选 -->
	性别:<input type="radio" name="sex">	男
	<input type="radio" name="sex">女
	
	<br>
	
	爱好:<input type="checkbox" name="hobby">睡觉
	<input type="checkbox" name="hobby">搞姑娘
	<input type="checkbox" name="hobby">玩游戏
	<input type="checkbox" name="hobby">旅游

	<br>
	<!-- checked属性 可使用在复选和单选中使用 -->
	<input type="checkbox" name="userpaper" checked="checked">同意<a href="#">服务条款</a>和<a href="#">隐私权相关政策</a>
	
	<br>
	<!-- button普通按钮控件必须有 value值才能在浏览器中显示具体内容
		 submit 提交按钮 若不写value值 默认带提交两个字
	 -->
	<input type="button" name="get duanxin" value="获取短信验证码">
	
	<br>

	<input type="submit" name="">
	
	<br>
	
	<input type="submit" name="submit" value="确认注册">

	<input type="reset" name="reset" value="重置内容">
	
	<br>

	<!-- 图片按钮 -->
	<input type="image" name="zhuce" src="images/button.png">

	<br>
	
	<!-- 文件域，在页面上传内容时使用 -->
	上传头像:<input type="file" name="touxiang">
</body>
</html>

select列表控件

使用目的是节约开发成本因为此控件中内容很多

基本的使用是 <select></select>嵌套<option></option>
使用selected="selected" 可以控制默认选中项

这个东西说实话可以与定位系统结合
（比如手机里让你填报位置信息哪个东西浏览器如果已经获取了你的位置此处可以不让用户自己选择提高用户体验）

但是<select></select>与<ul></ul>比相对来说使用<ul></ul>更多

因为这个控件的样式不好修改在CSS中

对于有需求的通常使用<ul></ul>来模拟<select></select>列表
没有美化需求的可以这么写但是也最好别这么写后边改不好改

具体使用方法:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>表单select下拉列表</title>
</head>
<body>
	选择城市:
	<select>
		<option>--请选择--</option>
		<option selected="selected">北京市</option>
		<option>天津市</option>
		<option>山东省</option>
		<option>台湾省</option>
		<option>武汉市</option>
		<option>尚未开发太多了别整了</option>
	</select>
	
</body>
</html>

表单label标签

用于绑定一个表单元素当点击label标签时，被绑定的表单会自动获得输入焦点

具体使用方法有两种:
一种为直接控制
另一种为for和id控制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>label</title>
</head>
<body>
	<!-- 直接控制 -->
	<label>
		用户名:<input type="text" name="username">
	</label>
	
	<br>
	
	<!-- for 和 id 控制 可以说是id找位置 for来调用-->
	
	<label for="password">
		密码:
	</label>
	<input type="password" name="password" id="password">

</body>
</html>

在label标签中最好不要使用for和id方法

注意一个问题:
在css中也有向标签中添加id的方法基础选择器中的 id选择器
id作为唯一标识对象在style样式中定义样式后在标签中来调用
同样的这里的id也适用css中定义的样式
因为id在html中的特殊性所以最好不要用for id 方法使用label标签
会造成很多不必要的麻烦直接用就行了

textarea控件

评论的系统可以提使用这个控件 textarea控件

使用控件 cols 可以控制每行输入多少个字符
rows 显示的行数也就是控制高度和宽度
但是实际开发中因为此控件可以随意的拉动从而改变
本身已经定义的 cols和rows 所以使用CSS来控制具体样式
主要是在这用麻烦

具体使用方法:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>表单textarea控件</title>
</head>
<body>
	有什么想说的评论一下吧:
	<textarea cols="100" rows="10">	
	</textarea>
</body>
</html>

form表单域(写上述内容必要的基础要不你写完了这东西没地提交)

在一个完整的表单(如用户注册的注册信息)制作完成后
需要有form控件来把整个内容上传到服务器的数据库中

form需要嵌套所有写入的表单控件

元素	属性值	具体解释
action	url地址	把内容上传后端服务器存储地址
method	get/post	设定表单的数据提交方式	我还没学大概有个了解从表象上判断get方式容易泄露信息因为使用get提交方式所有的表单信息会出现在浏览器的地址栏中 post提交方式没有这个问题具体的情况等我学了我再解释
name	最好是服务器中对应数据库的表名	//我猜的等我学完我把这改了	指定提交的表的名称区分提交的内容跟具体的数据库如何存放信息有关系	//我猜的等我学完我把这改了

综合表单所有基本内容单纯实现个注册: 请忽略css瞎弄俩不标准

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>用户注册页</title>
	<!-- 别搭理我 -->
	<style type="text/css">
		tr {
			height: 40px;
		}
	</style>
</head>

<body>
<!-- 没服务器弄个空地址 -->
	<form action="" method="get" name="create">
		<table align="center" width="600" cellspacing="20">
			
			<thead>
				<caption><h3 style="color: gray;">搞颜色交友网站，来宝贝展示一下</h3></caption>
			</thead>
			
			<tbody>
				<tr>
					<td>性别</td>
					<td>
						<input type="radio" name="sex" value="男">
						<img src="images/man.jpg">
						<input type="radio" name="sex" value="女">
						<img src="images/women.jpg">
					</td>
				</tr>
				
				<tr>
					<td>生日</td>
					<td >
						<select>
							<option>--请选择年--</option>
							<option>1990</option>
							<option>1991</option>
							<option>1992</option>
							<option>1993</option>
							<option>1994</option>
							<option>1995</option>
							<option>1996</option>
							<option>1997</option>
							<option>1998</option>
							<option>1999</option>
							<option>2000</option>
							<option>年太多了整这么多年干啥</option>
						</select>

						<select>
							<option>--请选择月--</option>
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
							<option>6</option>
							<option>7</option>
							<option>8</option>
							<option>9</option>
							<option>10</option>
							<option>11</option>
							<option>12</option>
						</select>

						<select>
							<option>--请选择日--</option>
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
							<option>6</option>
							<option>7</option>
							<option>8</option>
							<option>9</option>
							<option>10</option>
							<option>11</option>
							<option>12</option>
							<option>日他娘的也忒多了就这样吧</option>
						</select>
					</td>
				</tr>

				<tr>
					<td>您的位置</td>
					<td>				
						<input type="text" name="loaction" value="北京" style="color: gray;">
					</td>
				</tr>

				<tr>
					<td>婚姻状况</td>
					<td>
						<input type="radio" name="marriage" value="未婚" checked="checked">未婚
						<input type="radio" name="marriage" value="离异">离异
						<input type="radio" name="marriage" value="丧偶">丧偶
					</td>
				</tr>

				<tr>
					<td>学历</td>
					<td>				
						<input type="text" name="Education" value="本科" style="color: gray;">
					</td>
				</tr>

				<tr>
					<td>月薪</td>
					<td>				
						<input type="text" name="Salary" value="10K" style="color: gray;">
					</td>
				</tr>

				<tr>
					<td>择偶类型</td>
					<td>
						<input type="checkbox" name="Spouse type" value="萝莉型">萝莉型
						<input type="checkbox" name="Spouse type" value="御姐型">御姐型
						<input type="checkbox" name="Spouse type" value="顾家型">顾家型
						<br>
						<input type="checkbox" name="Spouse type" value="鲜肉型">鲜肉型
						<input type="checkbox" name="Spouse type" value="大叔型">大叔型
						<input type="checkbox" name="Spouse type" value="暖男型">暖男型

					</td>
				</tr>

				<tr>
					<td>自我简介</td>
					<td>
						<textarea cols="50" rows="5"></textarea>
					</td>
				</tr>
				
				<tr>
					<td></td>
					<td>
						<input type="checkbox" name="User notice" checked="checked" value="yes">我同意<a href="#">注册条款</a>和<a href="#">隐私收集政策</a>
					</td>
				</tr>

				<tr>
					<td></td>
					<td>
						<input type="image" name="create submit" src="images/btn(1).png">
					</td>
				</tr>

				<tr>
					<td></td>
					<td><a href="登陆.html">已有账户,立即登陆</a></td>
				</tr>

				<tr>
					<td colspan="2">
						<h3>本人遵守以下承诺</h1>
						<ul>
							<li style="color: gray;">年满十八周岁</li>
							<li style="color: gray;">恋爱情况未单身</li>
							<li style="color: gray;">遵循认真严肃态度</li>
							<li style="color: gray;">寻找真心相爱另一半</li>
						</ul>
					</td>
				</tr>
			</tbody>


		</table>
	</form>

</body>
</html>

SHoadgnaw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习记录3-HTML(列表,表单)

前端学习记录3-HTML列表无序列表ul-li表格与无序列表的区别有序列表ol-li自定义列表dl-dt-dd表单input控件select列表控件表单label标签在label标签中最好不要使用for和id方法textarea控件form表单域(写上述内容必要的基础要不你写完了这东西没地提交)列表布局、让页面布局整齐规范，跟表格相似但可组合的自由度很高(表格存放数据最好不用他布局)无序列表ul-li<ul></ul> 中只可以嵌套 <li></l
复制链接

扫一扫