Java后端所要掌握的前端知识——HTML篇

最新推荐文章于 2024-06-23 00:43:48 发布

diamond_0

最新推荐文章于 2024-06-23 00:43:48 发布

阅读量2k

点赞数 7

分类专栏：前端知识文章标签： html java 列表

本文链接：https://blog.csdn.net/diamond_0/article/details/107775744

版权

前端知识专栏收录该内容

1 篇文章 1 订阅

订阅专栏

一、前端总体概述

1、Web三要素

浏览器（前端所学）、服务器（servlet）、HTTP协议。

HTTP和HTTPS协议： HTTPS加密传输（网址中不会携带一些私密信息）。

2、需要学的内容

（1）HTML
XML：可扩展的标记语言，传输的一种数据格式（解析极其麻烦，故而后续会使用json格式进行数据的传输）

HTML：超文本标记语言，制作规范整齐的页面。
静态脚本的页面内容不会改变。

（2）CSS
如何显示html元素，主要用于对网页中的元素进行样式设置。

（3）Javascript/JQuery(js的封装库)
类比：Javascript相当于JDBC，初始JDBC连接数据库的流程繁琐。而JQuery相当于之前使用的连接池，将一些流程封装好了，我们可以直接去用。

对应HTML，JS/JQuery就是动态的脚本，使页面有一些交互的效果。（注意：并没有与服务器中的数据交互！）

（4）Servlet/JSP
使用Java语言和服务器的数据库进行交互。

其他说明：
不同浏览器，厂商不一样，故而存在兼容性的问题，现阶段我重点关注后端学习，可以先忽略这个问题，一律使用谷歌浏览器去打开网页。

二、HTML概述

关注点： 常用的标签，属性，常用的样式（style属性）

知识点铺垫：
1、元素 = 标签 + 内容（后期会需要获取指定的元素）

2、<标签名属性1 = “属性值1” 属性2 = “属性值2”> 内容 </标签名>
注意标点符号的规范，是“=”，没有“，”、“；”。

三、常用标签

1、标签概述

分类：
1、块级元素：自带换行功能且可以给定宽高。
2、行内元素（内联元素）：不自带换行且不能给定宽高。
3、行内块级元素：不自带换行且可以给定宽高（img标签）

注意：
1、对行内元素设置宽高是不起作用的，只能转换成块级元素or行内块级元素。
2、span、div这两个标签的运用广泛，因为可以自行对其进行样式设置（CSS知识）
在这里插入图片描述

2、简单标签

知道效果即可。
重点记住前面四种，后面基本用处不大。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--h1到h6-->
		<h1>标题标签</h1>
		
		<p>段落标签</p>
		
		<span>空标签</span>
		
			
		<!-- 换行标签-->
		<br /> 
		
		<i>斜体文字</i>
		<em>斜体文字</em>
		
		<!--划线-->
		<hr  />
		<!--hr标签的属性-->
		<!--设置的属性分别代表颜色、宽度、排列方式（默认放置在中间）、线条粗细-->
		<hr color="red" width="50%" align="right" size="5" />
	
		<b>加粗文字</b>
		<strong>加粗文字</strong>
		
		<big>大号字</big>
		<small>小号字</small>
		
		<code>计算机文本</code>
		
		<p>这个是<sup>上标</sup></p>
		<p>这个是<sub>下标</sub></p>
		
		<mark>标记</mark>
		
		<ins>插入</ins>
		
		<del>删除</del>
		
		<acronym title="今天天气真好">今天</acronym>
	</body>
</html>

3、在网页中显示特殊符号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>4 &gt; 3</p> <!-->-->
		<p>4 &lt; 3</p> <!--<-->
		<p> &copy; 版权所有</p>
		<p> &reg; 注册商标</p>
		<p> &trade; 商标</p>
	</body>
</html>

3、稍复杂标签

（1）img标签

<img src="img/html.png"  alt="图片加载失败" width="100px"/>

属性说明：
1、src：说明图片路径，有相对路径与绝对路径，这个属性必须要有。
相对路径：以当前网页的路径作为参考位置。
绝对路径：文件和图片处于不相同的两个目录中，需要从根目录开始写。如果用绝对路径，必须要找到html所在的目录位置，从那里进入到网页，图片才能正常现实。
2、width、height：设置图片显示的宽高，一般设置一个，使得图片等比例缩放。
3、alt：如果找不到图片，则会显示引号里的说明内容。

（2）a标签

<a href="https://www.baidu.com" target="_blank">百度一下</a>

属性说明：
1、href：要跳转到的目标网址。
2、target：有两个取值，_blank，新的空白窗口；_self，默认值，当前窗口。

锚点：
定义：html中文档的某行的一个记号，用来链接到文档中的某个位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--2、链接到锚点上-->
		<a href="#goto">第一部分</a>
		
			
		<!--1、定义锚点-->
		<p>
			<a name="goto"></a>
			第一部分：人生得意须尽欢，莫使金樽空对月。
			<a href="#">回到顶部</a>
		</p>
	</body>
</html>

（3）列表标签

1、无序列表
ul li（列表项）

ul标签的type属性：
disc：默认值，实心圆
circle：空心圆
square：实心方块

2、有序列表
ol li（列表项）

ol标签的type属性：
1：默认
（A，a，I，i）

3、自定义列表
dl dt（有缩进的效果）

（4）表格table标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--align:表格在网页中的位置-->
		<table border="1px" width="100px" align="center" 
			cellpadding="0px" cellspacing="0px" bgcolor="deepskyblue">
			<!--align:水平对齐方式（整体）-->
			<!--valign:垂直对齐方式（整体）-->
			<tr align="center" valign="center">
				<!--align:设置指定单元格中文本的位置-->
				<td align="left">序号</td>
				<td>姓名</td>
			</tr>
			<tr align="center" valign="center">
				<td>1</td>
				<td>ff</td>
			</tr>
			<tr align="center" valign="center">
				<td>2</td>
				<td>jj</td>
			</tr>
		</table>
	</body>
</html>

跨行跨列：
设置td中的属性：
rowspan：跨行，表示该行占几行显示。
colspan：跨列，表示该列占几列显示。

（5）表单（重点）

1、介绍

（1）表单： 表单中嵌套表单元素，我们在填写表单元素中的数据，是以一个表单为整体的。
表单是用于显示，收集信息，并将数据提交到服务器中（以表单为单位）。

form标签
属性：
action：表单提交到的url地址。
method：表单提交的方式，get（默认），可以看到提交的数据；post提交的数据看不到。
enctype：表单编码。

（2）表单元素：
文本框、密码框、单选框、复选框、下拉列表、按钮。

input标签
type属性：
text：文本输入框
password：密码输入框
radio：单选框
checkbox：多选框
file：上传文件
hidden：隐藏域
button：普通按钮，一般与JS中的点击事件配合使用。
submit：提交按钮，点击按钮可以提交数据。
reset：重置按钮。
image：图片按钮，点击图片也可以提交数据。

value属性：
显示内容。

name属性：
如果需要传输数据，必须需要name属性，主要用于后端开发的时候与后端语言进行交互。
一般是以key=value的形式进行传输，通过键（name）可以获取到值（value）。后端通过request.getParameter(“name”)获取对应数据。
name值一般不重复。

disabled属性：
设置禁用。

readonly属性：
设置只读。

2、具体说明

（1）文本框、密码框以及提交（get、post）

<form action="form01.html" method="get">
	<table>
			<tr>
				<td>用户名：</td>
				<td><input  type="text" name="username"/></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input  type="password" name="psw"/></td>
			</tr>
	</table>
	<input  type="submit" value="登录"/>
</form>

效果：
在这里插入图片描述

说明：
method="get"时，网址中会携带输入的信息（不安全）。
method="post"时，则不会携带输入信息，跳转到的网页会显示“内部服务器错误（？）”。

（2）单选与多选

<form action="form01.html" method="get">
	<!--checked:设置默认选中。-->
	性别：<input type="radio"  name="gender" value="male" checked="checked"/>男
		 <input type="radio"  name="gender" value="female" />女
		 <input  type="submit" value="登录"/>
</form>

效果：
在这里插入图片描述

多选：
type=“checkbox”，与单选同理。

（3）下拉列表

<form action="form01.html" method="get">
	<select name="bloodtype">
		<option>请选择</option>
		<option>A</option>
		<option>B</option>
		<option>O</option>
	</select>
	<input  type="submit"/>
</form>

效果：
在这里插入图片描述
扩展：级联列表

（4）长文本框与禁用、只读属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<textarea rows="20" cols="30" readonly="readonly">
天生我材必有用，千金散尽还复来。
		</textarea><br  />
		<input type="checkbox"  />我同意
		<input type="button" value="下一步" disabled="disabled"/>
	</body>
</html>

效果：
在这里插入图片描述
说明：
只读一般是给文本框使用的，禁用一般是给按钮使用的。

（5）隐藏 type="hidden"
应用场景：
在这里插入图片描述
uid是为了确定要跳转至哪一个用户的修改界面，但是uid是不必要向用户端呈现的。

（6）获取焦点便利

<!--label标签中的for属性值是input标签中的id属性值（一一对应）-->
<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>

说明：
当鼠标点击网页中的"用户名"时，文本框也是可以获取到焦点的。

四、框架布局

将一个页面分为若干部分，每个部分嵌套应该页面。常应用于后台管理系统。

frameset：框架集
属性：cols 按列成比例划分；rows 按行成比例划分。

使用的步骤：
1、将页面使用框架分块：frameset，不能与body一起使用。
2、准备其他的html页面。
3、使用框架页面关联其他页面，用src关联，给对应的框架部分起名。
4、指定超链接的目标位置（用href指定），超链接标签使用target属性关联，target中放的是框架名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<frameset rows="20%,*">
		<frame  src="top.html" name="top" noresize="noresize"/>
		<frameset cols="20%,*">
			<frame  src="catalog.html" name="left" scrolling="no"/>
			<frame  src="first.html" name="right" />
		</frameset>
	</frameset>
</html>

页面1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		将进酒
	</body>
</html>

页面2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="first.html" target="right">first</a><br  />
		<a href="second.html" target="right">second</a><br  />
		<a href="third.html" target="right">third</a>
	</body>
</html>