JavaWeb知识点整理(二)

最新推荐文章于 2022-10-24 20:18:18 发布

取不来名字_

最新推荐文章于 2022-10-24 20:18:18 发布

阅读量290

点赞数 2

分类专栏： JavaWeb 文章标签： javaweb

本文链接：https://blog.csdn.net/weixin_46097480/article/details/118979688

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1表单标签

<form>:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
<input>:表单项，可以通过type属性，改变元素展示的样式
<select>：下拉列表

1.1表单标签：<form>

用于采集用户输入的数据的，用于和服务器进行交互。用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。表单标签在浏览器上没有任何显示。

action属性：指定提交数据的URL

method属性:指定提交方式。常用的取值：get(默认)，post

分类：一共7种，2种比较常用

get：默认值

1. 请求参数会在地址栏中显示。会封装到请求中(HTTP协议后讲解)
2. 请求参数大小是有限制的
3. 不太安全。
4. 例：/1.html?username=jack%password=1234,数据格式k/v，追加是使用?连接，之后每一对数据使用&连接

POST:

1. 请求参数不会在地址栏中显示。会封装在请求体中(HTTP协议后讲解)
2. 请求参数大小没有限制
3. 较为安全

表单项中的数据要想被提交:必须指定其那么属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单标签</title>
	</head>
	<body>
		<!-- input属性 
		type:text - 文本
			password - 密码
			checkbox 多选框
			radio 单选框
			file 文件。配合enctype使用
			submit 提交按钮
		name:数据提交给服务器的时候对应的key
		value:输入框对应的值
		readonly：只读，不能修改
		placeholder:h5,输入框的提示信息
		checked:添加默认选项，支队checkbox和radio有效-->
		<form action="#" method="get">
			<input type="hidden" name="id" value="1"/>
			<input type="text" name="stuid" value="1001" readonly /><br>
			<input type="text" name="username" /><br>
			<label for="password">密码:</label>
			<input type="password" id="password" name="password" placeholder="请输入密码"/><br>
			<input type="checkbox" id="game" name="hobby" value="game"/>
			<label for="game">打游戏</label>
			<input type="checkbox" id="cartoon" name="hobby" value="cartoon"/>
			<label for="cartoon">看动画片</label><br>
			<input type="radio" id="male" name="sex" value="male" / >
			<label for="male">男</label>
			<input type="radio" id="female" name="sex" value="female"/>
			<label for="female">女</label><br>
			<input type="date" name="birthday" /><br>
			<input type="file" name="phone"/><br>
			<label>籍贯:</label>
			<select name="adderss">
					<option value="bj">北京</option>
					<option value="sh">上海</option>
					<option> 浙江 </option>
					<option>江苏</option>
				</select><br>
			个人简介:<textarea cols="20" rows="20"></textarea><br>
			<input type="submit" value="提交"/>
			<input type="reset" value="重置"/>
			<input type="button" value="普通按钮"/>
			<button type="submit">提交按钮</button>
			<button type="reset">重置按钮</button>
			<button>普通按钮</button>
		</form>
	</body>
</html>

表单项标签：<input>

标签⽤于获得⽤户输⼊信息。可以通过type属性值，改变元素展示的样式。

type属性：
- text：⽂本输⼊框，默认值，单⾏的输⼊字段，⽤户可在其中输⼊⽂本。默认宽度为20个字符
  - placeholder：指定输⼊框的提示信息，当输⼊框的内容发⽣变化，会⾃动清空提示信息
- password：密码输⼊框。该字段中的字符以⿊圆显示。
- radio：单选框

注意：
1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须⼀样。
2. ⼀般会给每⼀个单选框提供value属性，指定其被选中后提交的值。
3. checked属性，可以指定默认值

checkbox：复选框

注意：
1. ⼀般会给每⼀个单选框提供value属性，指定其被选中后提交的值
2. checked属性，可以指定默认值

file：⽂件选择框，提供“浏览”按下可以选择需要上传⽂件
hidden：隐藏域，⽤于提交⼀些信息。数据会发送给服务器，但浏览器不进⾏显示
按钮：
- submit：提交按钮。提交按钮会把表单数据发送到服务器。⼀般不写name属性，否则将“提交”两个字提交到服务器。
- button：普通按钮，常⽤于与JavaScript结合使⽤
image：图形提交按钮，通过src给按钮设置图⽚
reset：重置按钮。将表单恢复到默认值

⽂本标签：<label>

指定输⼊项的⽂字描述信息。

注意：label的for属性⼀般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输⼊框获取焦点。

下拉列表标签：<select>

可以进⾏单选或多选。需要使⽤⼦标签<option>指定列表项

multiple属性：不写默认单选，取值为“multipe”表示多选
size属性：多选时，可⻅选项的数⽬
<option>⼦标签：下拉列表中的⼀个选项（⼀个条⽬）
- selected：勾选当前列表项

⽂本域标签：<textarea>

⽂本域。多⾏的⽂本输⼊控件。

cols属性：指定列数，每⼀⾏有多少个字符
rows属性：默认多少⾏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会员注册</title>
		
		<style type="text/css">
			input[type=submit]{
				background-color: crimson;
				color: white;
				border: none;
				padding: 16px 50px;
			}
			input[type=text],[type=password]{
				width: 100%;
				height: 30px;
				border-radius: 4px;
				border: 2px solid #c2c2c2;
			}
		</style>
		
	</head>
	<body>
		<form action="#" method="get">
		<table align="center" cellspacing="20px">
			<tr>
				<td><font size="4" color="royalblue">会员注册<font></td>
				<td><font size="2">USER REGISTER</font></td>
			</tr>
			<tr>
				<td align="right"><label for="username">用户名</label></td>
				<td colspan="2"><input type="text" id="username" name="username" placeholder="请输入用户名"/></td>
			</tr>
			
			<tr>
				<td  align="right"><label for="password">密码</label></td>
				<td colspan="2"><input type="password" id="password" name="password" placeholder="请输入密码"/></td>
			</tr>
			
			<tr>
				<td align="right"><label for="qr_password">确认密码</label></td>
				<td colspan="2"><input type="password" id="qr_password" name="qr_password" placeholder="请输入确认密码"/></td>
			</tr>
			
			<tr>
				<td align="right"><label for="email">Email</label></td>
				<td colspan="2"><input type="text" id="email" name="email" placeholder="请输入邮箱"/></td>
			</tr>
			
			<tr>
				<td align="right"><label for="u_name">姓名</label></td>
				<td colspan="2"><input type="text" id="u_name" name="u_name" placeholder="请输入姓名"/></td>
			</tr>
			
			<tr>
				<td align="right"><label>性别</label></td>
				<td colspan="2">
					<input type="radio" id="male_sex" name="sex" value="male">
					<label for="male_sex">男</label>&nbsp;&nbsp;&nbsp;
					<input type="radio" id="female_sex" name="sex" value="male">
					<label for="female_sex">女</label>
				</td>
			</tr>
			
			<tr>
				<td align="right"><label for="birthday">出生日期</label></td>
				<td colspan="2"><input type="text" id="birthday" name="birthday" placeholder="请输入出生日期"/></td>
			</tr>
			
			<tr>
				<td align="right"><label for="yzm">验证码</label></td>
				<td><input type="text" id="yzm" name="yzm" placeholder="请输入验证码"/></td>
				<td><img width="100px" src="../img/yanzhengma.png"></td>
			</tr>
			
			<tr>
				<td></td>
				<td><input type="submit" value="注册" /></td>
				<td></td>
			</tr>
		</table>
		</form>
	</body>
</html>

2 CSS+DIV重写网站首页

2.1 概念

div和span：

div：每⼀个div占满⼀整⾏。块级标签。
span：⽂本信息在⼀⾏展示，⾏内标签、内联标签。

div就是html⼀个普通标签，进⾏区域划分。特性：独⾃占⼀⾏。独⾃不能实现复杂效果。必须结合CSS样
式进⾏渲染。

div通常是块级元素

<div>可定义⽂档中的分区或节（division/section）。
<div>标签可以把⽂档分割为独⽴的、不同的部分。它可以⽤作严格的组织⼯具，并且不使⽤任何格式与其关联。
如果⽤id或class来标记<div>，那么该标签的作⽤会变得更加有效。

CSS的概述

Cascading Style Sheets 层叠样式表，主要⽤于设置HTML⻚⾯中的⽂本内容（字体、⼤⼩、对⻬⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显示样式。

CSS可以使HTML⻚⾯更好看，CSS⾊系的搭配可以让⽤户更舒服，CSS+DIV布局更加灵活，更容易绘制出⽤户需要的结构。

样式：给HTML标签添加需要显示的效果。
层叠：多个样式可以作⽤在同⼀个html的元素上，同时⽣效。使⽤不同的添加⽅式，给同⼀个HTML
标签添加样式，最后所有的样式都叠加到⼀起，共同作⽤于该标签。

好处：

功能强⼤
将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分⼯协作更容易
- 提⾼开发效率

2.2 CSS样式规则

使⽤HTML时，需要遵从⼀定的规范。CSS亦如此，要想熟练的使⽤CSS对⽹⻚进⾏修饰，⾸先需要了解CSS样式规则。具体格式如下：

	选择器{属性1:属性值; 属性2:属性值; …}

在上⾯的样式规则中，“选择器”⽤于指定CSS样式作⽤的HTML对象，花括号内是对该对象设置的具体样式。属性和属性值以键值对⽅式出现，使⽤英⽂冒号“:”分隔。多个属性之间使⽤英⽂分号“;”分隔。

初学者在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构中的⼏个特点，具体如下：

CSS样式“选择器”严格区分⼤⼩写，“属性”和“属性值”不区分⼤⼩写。
多个属性之间必须⽤英⽂状态下的分号隔开，最后⼀个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英⽂状态下的引号。如:

p { font-family: "times new roman"; }

在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可⽆。因此，可以使⽤空格键、Tab键、回⻋键等对样式代码进⾏排版，即所谓的格式化CSS代码，这样可以提⾼代码的可读性。
在编写CSS代码时，为了提⾼代码的可读性，通常会加上CSS注释

需要注意的是，属性的值和单位之间是不允许出现空格的，否则浏览器解析时会出错。

引入CSS样式

CSS使⽤⾮常灵活，及可以嵌⼊在HTML⽂档中，也可以是⼀个单独的⽂件，如果是单独的⽂件，则必须
以.css为扩展名。CSS和HTML的结合3中常⽤⽅式：

⾏内样式：通过标签的style属性来设置元素的样式。
⾏内样式通过标签的属性来控制样式，这样并没有做到结构与表现（HTML展示结构、CSS显示效果）
相分离，所以⼀般很少使⽤。学习阶段有时候为了快速编程，偶有使⽤。
内部样式：⼜称为内嵌式，是将CSS代码集中写在HTML⽂档的 <head> 头部标签体中，并且使
⽤ <style> 标签定义。
给当前html⽂件中的多个标签设置样式。在html的 <head> 标签中使⽤ <style> 标签来定义CSS。

内嵌式CSS样式只对其所在的HTML⻚⾯有效，可以对多处标签统⼀设置样式，因此，仅设计⼀个⻚⾯时，使⽤内嵌式是个不错的选择。但如果是⼀个⽹站，不建议使⽤这种⽅式，因为他不能充分发挥
CSS代码的重⽤优势。

外部样式：⼜称为链⼊式，是将所有的样式放在⼀个或多个以 .css 为扩展名的外部样式表⽂件中，通过 <link> 标签将样式连接到HTML⽂档中。

链⼊式最⼤的好处是同⼀个CSS样式表可以被不同的HTML⻚⾯链接使⽤，同时⼀个HTML⻚⾯也可以
通过多个标记链接多个CSS样式表。

注意：

1,2,3种⽅式，css作⽤范围越来越⼤;
1⽅式不常⽤，后期常⽤2,3
3种格式可以写为：

<style>
@import "css/style.css";
</style>

2.3 选择器：

要想将CSS样式应⽤于特定的HTML元素，⾸先需要找到该⽬标元素。在CSS中，筛选具有相似特征的元素的样式规则部分被称为选择器，本⼩节将对CSS基础选择器进⾏详细的讲解，具体如下：

元素选择器

元素选择器是指⽤HTML标签名称作为选择器，按标签名称分类，为⻚⾯中某⼀类标签指定统⼀的CSS
样式。其基本语法格式如下：

标签名称 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，所有的HTML标记名都可以作为标记选择器，例如body、h1、p、strong等。⽤标记选择
器定义的样式对⻚⾯中该类型的所有标记都有效。

标记选择器最⼤的优点是能快速位⻚⾯中同类型的标记统⼀样式，同时这也是他的缺点，不能设计差异化样式。

ID选择器

选择具体的id属性值的元素。id选择器使⽤“#”进⾏标识，后⾯紧跟id名，其基本语法格式如下：

#id属性值 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，⼤多数HTML元素都可以定义id属性，元素的id值是唯⼀
的，只能对应于⽂档中某⼀个具体的元素。

id选择器优先级⾼于元素选择器

类选择器

类选择器使⽤ . （英⽂点号）进⾏标识，后⾯紧跟类名，其基本语法格式如下：

.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，类名即为HTML元素的class属性值，⼤多数HTML元素都可以定义class属性。类选择器最
⼤的优势是可以为元素对象定义单独或相同的样式。

类选择器优先级⾼于元素选择器

类选择器的⾼级⽤法：给指定的标签设置class样式

标签.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

扩展：属性选择器

选择元素名称，属性名=属性值的元素，其基本语法格式如下：

标签名[标签属性='标签属性值']{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该选择器，是对“元素选择器”的扩展，对⼀组标签进⼀步过滤。
例如：
5. 扩展：后代选择器

两个标签之间使⽤空格，给指定⽗标签的后代标签设置样式，可以⽅便在区域内编写样式。

⽗标签 后代标签{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该选择器，是对“元素选择器”的扩展，对⼀个标签内部所有后代标签进⾏过滤。

2.4 CSS的样式

边框和尺⼨：border、width、height

border：设置边框的样式
- 格式：宽度样式颜⾊
- 例如：style=“border:1px solid #f00”，1像素实边红⾊。
  - 样式取值：solid实线，none⽆边，double双线等
width、height：⽤于设置标签的宽度、⾼度。

布局：float、clear

通常默认的排版⽅式，将⻚⾯中的元素从上到下⼀⼀罗列，⽽实际开发中，需要左右⽅式进⾏排版，就需要使⽤浮动

选择器 { float: 属性值; }

常⽤属性值：

left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）

由于浮动元素不再占⽤元⽂档流的位置，所以它会对⻚⾯中其他元素的排版产⽣影响。如果要避免影响，需要使⽤clear属性进⾏清除浮动。

选择器 {clear: 属性值;}

常⽤属性值：

left：不允许左侧有浮动元素（清除左侧浮动的影响）
right：不允许右侧有浮动元素（清除右侧浮动的影响）
both：同时清除左右两侧浮动的影响

转换：display

HTML提供丰富的标签，这些标签被定义成了不同的类型，⼀般分为：块标签和⾏内标签。

块标签：以区域块⽅式出现。每个块标签独⾃占据⼀整⾏或多整⾏。
- 常⻅的块元素：<h1> 、<div> 、<ul> 等
⾏内元素：不必在新的⼀⾏开始，同时也不强迫其他元素在新的⼀⾏显示。
- 常⻅的⾏内元素：<span> 、<a> 等

在开发中，希望⾏内元素具有块元素的特性，需要使⽤display进⾏转换。

选择器 {display: 属性值;}

常⽤属性值：

inline：此元素将显示为⾏内元素（⾏内元素默认的display属性值）
block：此元素将显为块元素（块元素默认的display属性值）
inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递
none：此元素将被隐藏，不显示，也不占⽤⻚⾯空间

字体：color、font-size

color：颜⾊，字体颜⾊

背景：background

2.5 CSS的盒⼦模型

CSS框模型（Box Model）规定了元素框处理元素内容、内边距、边框和外边距的⽅式。

内边距：padding

单边内边距属性：也可以通过下⾯四个单独的属性，分别设置上、右、下、左内边距：

padding-top
padding-right
padding-bottom
padding-left

边框：border

border-top-style
border-right-style
border-bottom-style
border-left-style

外边距：margin

margin-top
margin-right
margin-bottom
margin-left

注：最好去W3school上查看帮助文档学习

取不来名字_

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb知识点整理(二)

1表单标签<form>:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围<input>:表单项，可以通过type属性，改变元素展示的样式<select>：下拉列表1.1表单标签：<form>用于采集用户输入的数据的，用于和服务器进行交互。用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。表单标签在浏览器上没有任何显示。action属性：指定提交数据的URLmethod属性:指定提交方式。常用的取值：get(默认)，p
复制链接

扫一扫