HTML表单，div/span，css

最新推荐文章于 2022-07-06 20:06:22 发布

窗外风雨声

最新推荐文章于 2022-07-06 20:06:22 发布

阅读量395

点赞数 1

分类专栏：学习记录

本文链接：https://blog.csdn.net/qq_42837554/article/details/88827731

版权

学习记录专栏收录该内容

92 篇文章 0 订阅

订阅专栏

HTML表单

表单是一个HTML中的容器，不会直接显示到浏览器中，表单的作用是负责收集数据并且将数据发送到指定的位置（其他页面或者服务器）。

作用:数据传输

<form> 属性如下：

action（行动）：指定数据发送的位置

method（方法）：指定发送方式两个值： get | post

enctype（数据编译类型）

默认值：application/x-www-form-urlencoded uname=张三&pwd=123

上传时：multipart/form-data

placeholder属性

框内提示信息会在输入字段为空时显示，并会在字段获得焦点时消失。这种提示信息就用到了HTML5的属性：placeholder <input placeholder="text"> text：规定用于验证输入字段的模式。placeholder 属性是 HTML5 中的新属性。 placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

textarea中也支持placeholder属性，也就是说类似于文本框输入的地方都可以使用placeholder属性。

<input type="text" placeholder="请输入姓名" >

input标签

input 输入。是表单收集数据时使用的最基本的一个标签。

基本属性：

id : 设置当前标签的唯一值。

name：设置标签的名称，（可重复）。表单传递数据必须的名称。

value：设定默认值。

type：类型（太多了）

text ：文本框

password ：密码框

number :数组框

date：日期类型

radio：单选按钮

button：普通按钮

checkbox：复选框

file：文件上传框

email ：邮件输入框

hidden：隐藏输入框

reset：重置按钮

submit ：提交按钮

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<form action="index.html" method="get" >
			
			<!--文本类型-->
			<input name="" type="text" value="123" /><br>
			<!--密码类型-->
			<input name="" type="password" /><br>
			<!--数字类型-->
			<input name="" type="number" /><br>
			<!--日期类型-->
			<input name="" type="date" /><br>
			<!--单选按钮类型-->
			男<input name="s" type="radio" />女<input name="s" type="radio" /><br>
<!--复选框-->
			抽烟<input name="s1" type="checkbox" />
			喝酒<input name="s1" type="checkbox" />
			烫头<input name="s1" type="checkbox" />
			<br>
			<!--文件上传框-->
			<input name="s1" type="file" /><br>
			<!--邮件输入框-->
			<input name="s1" type="email" />
			<!--隐藏输入框--><br>
			<input name="s1" type="hidden" /><br>
			
			<!--普通点击按钮-->
			<input name="s1" type="button" value="show" /><br>
			<!--重置按钮-->
			<input name="s1" type="reset" value="还原" /><br>
			<!--表单提交按钮-->
			<input type="submit"  value="点我" /><br>
			
		</form>
		
	</body>
</html>

下拉列表框

一组数据，这组数据以下拉列表的形式显示用户可以直接选择！

<select> 子标签<option> 特殊的标签<optgroup>

<select>标签name属性是必须的

<option>标签要显示的内容写在标签之间

<optgroup>标签要显示的内容要在标签中写label属性显示

文本域

input text 是文本框，只能输入一行，还不能换行。使用文本域弥补。

标签：<textarea>

有value值，但是这个value值不能直接显示到文本域中，如果想设置默认值，需要将设置的值直接写在两个标签中间。

案例：注册页面

名称，账号，密码，性别，爱好，学历，邮箱，头像，简介，注册时间

标签（通用）禁用和只读设置

禁用状态（disabled="disabled"）：页面能显示，但是不可操作并且数据不能采集传输

只读（readonly="readonly"）：页面能显示，不可操作但是数据能够采集传输（单选按钮不能使用）

单选按钮 | 多选按钮的默认选中：checked = “checked”

下拉列表框的默认选中：selected = “selected ”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单注册</title>
	</head>
	<body>
		<form action="index.html" method="get">
			名称：<input type="text" name="name" /><br>
			账号：<input type="text" name="username" /><br>
			密码：<input type="password" name="pwd" /><br>
			性别：
			 男<input disabled="disabled" type="radio" name="sex" />
			 女<input type="radio" checked="checked" name="sex" />
			 <br>
			爱好：
			抽烟<input name="hobbies" checked="checked" type="checkbox" />
			撩妹<input name="hobbies" checked="checked" type="checkbox" />
			吹牛<input name="hobbies" type="checkbox" />
			三里屯<input name="hobbies" type="checkbox" />
			蹦迪<input name="hobbies"  type="checkbox" />
			
			<br>
			
			学历：<select name="xl">
				<option value="">=== 请选择 ===</option>
				<option value="春天花花幼稚园">春天花花幼稚园</option>
				<option value="青青草原小学">青青草原小学</option>
				<option value="小葵花妈妈课程">小葵花妈妈课程</option>
				<option selected="selected" value="家里扶泥呀大学">家里扶泥呀大学</option>
				<option value="哈尔滨佛学院">哈佛</option>
			</select>
			<br>
			邮箱：<input type="email" name="email" /><br>
			头像：<input type="file" name="photo" /><br>
			简介：<textarea cols="50px" rows="10px" name="mark"></textarea><br>
			注册时间：<input type="date" name="create_time" /><br>
			
			<input type="submit" value="注册" />&nbsp;&nbsp;&nbsp;
			<input type="reset" value="重置" />
			
		</form>		
	</body>
</html>

纯HTML布局（老式布局）

表单居中
尝给表单一个背景颜色
冒号对齐

思想：使用table强制格式化

效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单注册</title>
	</head>
	<body>
		<center>
			<form action="index.html" method="get">
				
				<table border="0px" cellpadding="8px" width="700px" cellspacing="0px" bgcolor="lightyellow">
					<tr>
						<td width="30%" align="right">名称：</td>
						<td><input type="text" name="name" /></td>
					</tr>
					<tr>
						<td width="30%" align="right">账号：</td>
						<td><input type="text" name="username" /></td>
					</tr>
					<tr>
						<td width="30%" align="right">密码：</td>
						<td><input type="password" name="pwd" /></td>
					</tr>
					<tr>
						<td width="30%" align="right">性别：</td>
						<td>
							男<input disabled="disabled" type="radio" name="sex" />
				 			女<input type="radio" checked="checked" name="sex" />
						</td>
					</tr>
					<tr>
						<td width="30%" align="right">爱好：</td>
						<td>
							抽烟<input name="hobbies" checked="checked" type="checkbox" />
							撩妹<input name="hobbies" checked="checked" type="checkbox" />
							吹牛<input name="hobbies" type="checkbox" />
							三里屯<input name="hobbies" type="checkbox" />
							蹦迪<input name="hobbies"  type="checkbox" />
						</td>
					</tr>
					<tr>
						<td width="30%" align="right">学历：</td>
						<td>
							<select name="xl">
								<option value="">=== 请选择 ===</option>
								<option value="春天花花幼稚园">春天花花幼稚园</option>
								<option value="青青草原小学">青青草原小学</option>
								<option value="小葵花妈妈课程">小葵花妈妈课程</option>
								<option selected="selected" value="家里扶泥呀大学">家里扶泥呀大学</option>
								<option value="哈尔滨佛学院">哈佛</option>
							</select>
						</td>
					</tr>
					<tr>
						<td width="30%" align="right">邮箱：</td>
						<td>
							<input type="email" name="email" />
						</td>
					</tr>
					<tr>
						<td width="30%" align="right">美女头像：</td>
						<td>
							<input type="file" name="photo" />
						</td>
					</tr>
					<tr>
						<td width="30%" align="right">简介：</td>
						<td>
							<textarea cols="50px" rows="10px" name="mark"></textarea>
						</td>
					</tr>
					<tr>
						<td width="30%" align="right">注册时间：</td>
						<td>
							<input type="date" name="create_time" />
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit" value="注册" />&nbsp;&nbsp;&nbsp;
							<input type="reset" value="重置" />
						</td>
					</tr>
				</table>
				
				<br>
				
				
				
			</form>
		</center>
	</body>
</html>

div&span布局标签

div (division) 是一个非常常见的布局标签。

特点：

1、如果没有填充内容，或者指定固定的宽高，那么网页是无法显示的。

2、div属于块级（默认占一行）布局标签

span 也是一个常见的行级布局标签。

1、如果没有填充内容，或者指定固定的宽高，那么网页是无法显示的。

2、属于行级布局标签多个标签或者文字默认在一行显示

3、一般应用场景都是包含文字

CSS

CSS （cascading style sheet）层叠样式表，作用是用来修改HTML标签或者给标签定位。

相比标签自带的属性而言，CSS会更加强大。

基本CSS的语法及引用方式

给标签设定CSS样式一共有三种方式

第一种：行内样式（直接写在标签上的CSS）

语法：在标签中直接写style属性和对应的多个值。

好处：代码编写方便。

缺点：不能公共使用并且整个页面会变得非常臃肿。

第二种：内部样式（在本页面中）

语法：在HTML中使用<style></style>

好处：统一代码，能够书写公共的CSS给当前的标签使用。

缺点：依然占位代码空间。

第三种：外链样式（不写在本页面中，并且任意网页使用）

语法：定义单独的CSS样式文件，并且将文件引入到指定的HTML中。

好处：页面简洁，公用方便。

缺点：无

如果：三种方式都引入了相同的css，到底谁生效。

就近原则：优先显示行内样式，然后内部样式和外链样式谁后加载显示哪个样式。

CSS选择器

除行内样式都需要使用选择器来定位标签，这种用来定位的方式就是选择器

语法：

选择器{

属性名：值;

....

}

第一种：标签选择器

第二种：类选择器（class选择器）

在所有的HTML标签中都是定义id、name、class（只为CSS和脚本服务。单独书写没有任何作用）

第三种：ID选择器

特点：唯一，这个样式在当前网页中只有一个标签能够使用。

在你无法选择的时候，记住class永远是你的好朋友！

同样三种方式执行的时候 ID选择器 > 类选择器 > 标签选择器，即谁的范围小就先执行谁

CSS常用的样式

设置宽度：width

设置高度：height

背景颜色：background-color

边框颜色：组合写法 border：线条宽度线条样式线条颜色。（例如：border：20px solid red）

线条样式：solid 实线、dashed 虚线、dotted 点虚线、

标签内字体颜色：color

设置字体相关样式：font

设置鼠标指针样式：cursor

设置标签圆角：border-radius （圆形设定是当前正方形的半径）

设置标签中文本的位置：text-align （left、center、right...）

设置div引入背景图片

CSS盒子模型

盒模型（box model），用来表现当前标签的内边距和外边距。

padding 属性有一个特性，设置时会自动增长边距。

margin 属性不会增长

设置margin-top时外层div会跟随着内层div移动，这样产生了一个默认的浮动效果

在外层div中使用 css overflow: hidden; 清除浮动效果。

内边距与外边距的实际应用

总结

表单 form [ action / method ]

input

[ text、password、file、number、date、radio、checkbox、hidden、button、submit、reset、email ]

textarea 文本域

select > option | optgroup 选择

布局 table

div 块级元素，占一行

span 行级元素

css

width：宽

height：高

border ：宽度样式颜色；

font ：字体大小字体样式；

color ：字体颜色

background-color 背景颜色

background-image : url（“地址”） css引入图片

background-size：宽高；调整图片大小

border-radius 调整边角

cursor：设置光标样式

text-align： center 设置文本左右居中

line-height ：设置行高

vertical-align ：设置上下居中

盒子模型

窗外风雨声

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML表单，div/span，css

HTML表单表单是一个HTML中的容器，不会直接显示到浏览器中，表单的作用是负责收集数据并且将数据发送到指定的位置（其他页面或者服务器）。作用:数据传输<form> 属性如下：action（行动）：指定数据发送的位置method（方法）：指定发送方式两个值： get | postenctype（数据编译类型）默认值：applicati...
复制链接

扫一扫