Java整理6-JavaWeb

最新推荐文章于 2024-08-30 22:17:40 发布

阿里斯顿k

最新推荐文章于 2024-08-30 22:17:40 发布

阅读量301

点赞数 15

分类专栏： JAVA 文章标签： java 开发语言

本文链接：https://blog.csdn.net/shf1730797676/article/details/140653192

版权

JAVA 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1、基础知识
W3school HTML辅助学习官网

结构：
<meta charset="utf-8"/>
<head>
	样式设置
	（1）css引入
	（2）js引入
	（3）其它
</head>
<body>
	定义展示到页面主体的标签
</body>

元素=标签+属性修饰+文本
插件推荐：vscode中  Live Server  实时加载的小服务器
换行：
	br：直接换行
	hr：带分割线的换行
<div> 块    <span>  层
图片标签：
	<img src="路径" title="鼠标悬停时提示的文字"  alt="图片加载失败的时提示文字" />
表格标签：
	tr：一行      td：行内的一格      th：自带加粗居中效果的td
	表格合并效果：
		<td rowspan="3"></>  表示横跨3行
		<td colspan="3"></>  表示纵跨3列
表单标签 form：
	action 定义数据的提交地址，（1）URL（2）相对地址（3）绝对地址
	method  提交方式       （1）get（2）post
表单项标签：
	input：type  输入信息的表单项类型，有text、password、submit、reset
表单项标签一定要定义name属性，该属性用于明确提交时的参数名，还需要定义value属性，用于明确提交时的实参。
get与post的区别：
	get：
		参数会以键值对的形式加在url后面  url?key=value&key=value......
		信息直接放在url中不安全
		url有长度限制
		地址中只能是字符不能是文件
	post：
		数据是通过请求体单独打包发送
		请求体中数据可以是字符也可以是字节
单选框：
	<input type="radio" name="xxx" value="yyy">文字
	设置不同的value来区分不同的选项
多个单选框使用同一个name会产生冲突效果，多选框  type="checkbox" 且设置相同的name后不会冲突，设置不同的value来区分不同的选项
多选框：
	<input type="checkbox" name="xxx" value="yyy">文字
默认设置checked="true"
hidden隐藏域
readonly 只读  会提交给后台
disable 不可用 不会提交后台
多行文本框 textarea：
	文本框无value属性
	<textarea>       </textarea>
下拉框 select：
	option 定义选项   默认选项 selected
	<select>
		<option>  </option>
	</select>
	默认选项：
		<optional value="  " selected>  </optional>
file 文件上传框
页面布局：
	<div>  </div>     块元素     独占一行    宽高的css设置有效
	<span>   </span>  行内元素   不独占一行   宽高的css设置无效
	span可以帮助单独设置整体中某一部分的css样式

2、CSS

方式一：行内式  
	通过元素的style属性引入样式
	语法：style="样式名：样式值；样式名：样式值"
方式二：内嵌式 
	通过在head标签中的style标签定义本页面的公共样式，通过**选择器**作用到相应的对象。
	（1）元素选择器
	语法：
		input{
		
		}作用于input标签的样式
方式三：外部样式表
	将css代码单独放到一个.css文件中，那个html需要这些代码就在其head中通过link属性引入。
	<link href="路径" rel="css文件名">
	（2）id选择器
		根据标签的id值确定样式的作用范围，一般每个元素都有一个id属性，在一个页面中id具有唯一性
		语法：
			#id值{   }
	（3）class选择器
		根据元素的class属性值确定样式的作用范围，元素的class值可以重复并且一个元素的class属性可以有多个值。
		语法：
			.class值{    }
<input id="xxx" class="值1 值2 值3 ......" type="  " value="   ">

3、CSS浮动

将div中display默认类型block改为inline，但是会失去块中宽高属性值的设置
		div1
		div2                 div1 div2
float：
	相对于上级父块的左右浮动：left、right
	相对于浏览器窗口的浮动：fixed
	相对于元素原本位置浮动：relative

4、CSS定位

position   static默认  absolute  绝对
bottom
left/right
top

5、CSS盒子模型

border：边线
padding：内边距
margin：外边距
	margin-left：左外边距
	margin-right：右外边距
padding/margin设置：
	如果指定一个值：上右下左
	       两个值：x1（上下）x2（左右）
	       四个值：x1（上）x2（右）x3（下）x4（左）