JAVA全栈学习——前端HTML

最新推荐文章于 2024-07-11 09:08:51 发布

yindarui

最新推荐文章于 2024-07-11 09:08:51 发布

阅读量389

点赞数

分类专栏： Java全栈文章标签： html web java html5 javascript

本文链接：https://blog.csdn.net/qq_38684427/article/details/108964148

版权

Java全栈专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言

我在刚刚入门时，繁杂的前端技术让我不知道从何下手。随着学习的深入，也对前端技术有了整体的把握。前端的学习可以说是入门容易，精通难。入门容易是因为，首先作为计算机的学习者，经常接触这类东西，而且在前期的学习中，前端技术可用的东西相对固定且内容不多，所以会给人造成一种很简单的感觉，但是随着学习的深入，如何编写美观（主要是CSS）且高效的页面（主要是JS），就是一个彻彻底底技术活。
笔者是倾向于做后端开发（java）的，所以对于前端的内容可以是“浅尝辄止”，本文也是为了学习后端的小伙伴们补充前端的相关知识而准备的，方便大家可以看懂项目中的代码，并自己实战项目，笔者也在不断学习中，如有错误，烦请指正。
笔者认为后端开发对前端的学习应该达到可以看懂前端代码，会编写JS代码，熟练掌握AJAX（这个非常重要），因为很多时候动态控制的效果要根据后端反馈的内容来变化（servlet）。

前端技术之间的关系

常说的三大件是：HTML+CSS+JavaScript(JQuery+AJAX)
HTML是目前应用最广泛的静态web编写语言。什么是静态呢？即内容是固定的，不会随着和其他实体（服务器，用户）交互而发生改变。在程序编写之初的内容会原封不动地显示给用户。
那什么是CSS呢？简单来说，就是为了控制页面的显示效果，美化页面的。那么如果我们不用CSS可以吗？——当然可以，只要你可以忍受简陋的页面，当然很多时候用户是无法接受的。如果你之前学习过HTML一定知道，HTML页面的标签内的属性也可以提供样式的控制。确实如此，但是CSS会提供更高效且全面的样式控制方式，且可以通过在HTML页面中引入独立的CSS文件来为页面添加样式，实现了代码的分离，方便修改和开发。
但是我们在浏览网页的时候一定会发现，静态不动的页面是无法满足要求的。最常见的，当我们在用户注册时，输入用户名后，点击输入密码栏时，会提示用户名是否合法，这就用到了JS（此时发生了失去焦点事件，后面会说）。JQuery可以看做是JS的一个框架，封装了很多标签的操作。AJAX是一种异步刷新技术，可以用于局部刷新并实现页面的异步加载，AJAX应用是非常非常广泛的，且在整个前端技术里面，是和后端联系最大的一个，作为后端开发，这个一定要熟练掌握。

HTML

全称：Hyper Text Markup Language，是超文本标记语言的简写。现在最常用的是HTML5。具有简单，通用且易于扩展的特点。
像之前说的那样，单纯的HTML页面是静态的，通过脚本语言增强其功能：CSS添加样式，JS添加动态效果。
HTML是由一系列的标签组成的。我们编写的HTML页面中的标签会由浏览器解析成一个DOM树。OK，我们来简答解释一下这些名词：

标签：标签可以理解为编程语言里面定义的关键字，会被浏览器解析不会直接显示出来，如果想显示需要通过转义字符。HTML的目的是向用户展示内容，每个标签会有不同的显示效果，只要符合HTML的语法规定（尽管语法已经相当松散了），就可以达到预期的效果。标签主要分成两种：包围式 <label></label>和单目标签<label>。
DOM树：DOM树是由一系列的DOM对象组成的，DOM对象的全是：document对象，是由浏览器加载H5页面生成的。可以这么说，一个标签对应一个DOM对象（这就是为什么在JS中会使用到this关键字，和面向对象编程的思想一致）。那为什么的DOM树呢？树作为数据结构里面相当常见的结构，其最明显的特征就是分层，且下一层的节点一定和上一层节点有对应关系（父子关系）。在HTML的编写的代码中，一个标签可以包含别的标签，形成一种父子对应的关系，这就和树的结构完全对应。即，同级的标签互为兄弟，被包含的标签为包含其标签的子孙关系。
对于一个标签来说：
不在标签体内的内容不会被标签影响，会直接显示出来（根据字符编码方式）。在标签体内的字符串会被标签所渲染。

HTML页面标签

1. 基本标签

标签结构：
—— <!doctype html>
——<html>
————<body>
——————<p></p>
——————<h1></h1>
——————<br>
——————<pre></pre>
——————<b></b>
——————<i></i>
——————<ins></ins><br>
——————<del></del><br>
——————<sup></sup><br>
——————<sub></sub><br>
——————<font></font><br>
————</body>
——</thml>

<!--表示使用h5的语法，否则是h4-->
<!doctype html>
<html>
    <!--头部-->
	<head>
		<title>基本标签</title>
	</head>
	<!--页面体-->
	<body>
		hello world!
        <p>这是一个分段的标签</p><p>包围的内容是一个段落</p>
        <h1>这是一个标题字h1----h6.每个标题独占一行</h1>
        <!--下面这个字符会直接显示出来-->
        你好啊！！！
        <!--独目标记-->
        <br> <!--html中换行需要使用转义字符。br是用来换行的，是没有结束标记-->
        <hr color="red", width="300px"> <!--水平线标记,包含一些属性-->
        <hr color="green", width="100%"> <!--水平线标记,包含一些属性-->
        
        <!--预留格式，在页面中展示完全代码编写的内容-->
        <pre> 
        	for(int i = 0; i < 100; i++) {
        		System.out.println(i);
        	}
        </pre>
        
        <!--字体相关的-->
        <b>这是粗体字</b><br>
        <i>这是斜体字</i><br>
        <ins>这是下划线</ins><br>
        <del>这是删除字</del><br>
        这是右上角加字<sup>123</sup><br>
        这是右下角加字<sub>123</sub><br>
        <font size="300px" color="green">我的html页面！</font>
	</body>
	
</html>

显示效果：

在这里插入图片描述

2. 实体标签

和JAVA中的转义字符一样，为了显示一些无法直接显示的文本。什么是无法显示的文本呢？首先是空格，HTML中的空格是无法显示出来的，即你在源码中加入多少空格都不会影响页面的显示。还有就是标签，如果你在标签体里面写了一个标签会形成标签间的父子关系，而不会让这个标签显示出来。这就是实体标签的意义。
实体标签通常以 &开头，以 ;结束。实体标签的内容通常是某个字母的缩写。
图片来自W3school。
在这里插入图片描述

3. 表格标签——<label></label>

表格标签将在页面上显示出表格，在HTML中，表格可以分成：

表头：table head——<th></th> 。自动变粗并居中。
表体：分成行和列——<tr><td></td></tr>
表尾：table foot——<tf></tf>。自动变粗并居中。
通过表格这种排版方式，我们可以控制HTML页面中各个元素的位置（把对应元素放在单元格内，且不显示边框）。但是现在多用span 和 div来控制，因为这两个更灵活。
对于表格来说，常用的操作是合并行或者列, 利用rowspan来将若干行融合，利用colspan来将若干列融合。注意：列融合会使得一行合并，行融合会使得一列合并。具体效果如下：在合并行或者列时一定要注意合并的地方不要再重复写上td标签。

<!doctype html>
<!doctype html>
<!doctype html>
<html>
    <head>
        <title>html中的表格操作</title>
    </head>
    <body>
		<!--设置表格的一些属性，在table标签里面-->
        <table align="center" border="5px" width="200px" height="200px">
            <!--table row-->
            <!--表头-->
            <th>这是我的表格</th>
            <tr>
 <!--单元格合并：行合并,一列中的每行单元格进行合并，属性值是合并的行数-->
                <!--注意合并的单元格不要在相应位置多设置<td>标签-->
                <td rowspan="2">11</td>
                <td>12</td>
                <td>13</td>
            </tr>
            <tr>         
                <td>22</td>
                <td>23</td>
            </tr>
            <tr>
<!--单元格合并：列合并,一行中的每列单元格进行合并，属性值是合并的个数-->
                <td colspan="3">31</td>
            </tr>
        </table>
    </body>
</html>

显示效果：

在这里插入图片描述

4. 列表

html中的列表分成无序和有序列表。

无序：Unorder list
有序：order list

<!DOCTYPE html>
<html>
	<head>
		
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<ul>
			<li>中国</li>
			<li>美国</li>
			<li>日本</li>
		</ul>
		<ol>
			<li>China</li>
			<li>America</li>
			<li>Jepan</li>
		</ol>
	</body>
</html>

显示效果：

在这里插入图片描述

5. 插入图片

我们经常会遇到需要在页面中插入图片的需求。这时候需要用到img标签。注意：这个标签是一个单目标签。其src属性是你想插入的图片的路径。

<!doctype html>
<html>
    <head>
        <title>插入图片</title>
    </head>
    <body>
        <font size="300px" align="center">Hello world</font>
        <!--图片标签-->
        <img src="img1.jpg"/>
    </body>
</html>

6. 热连接

全称：hot reference。也叫超链接。当我们需要在页面中发起别的页面请求时，我们需要用到该标签，点击热连接会跳转到目标页面。
如果你想在页面中打开一个子页面，使用iframe标签，并规定好该子页面在父页面中的大小即可。

<html>
    <head>
        <title>hyperlink</title>
    </head>
    <body>
        <!--新的页面打开超链接-->
        <a href="http://www.baidu.com" target="_blank">baidu</a>
        <!--当前页面打开超链接-->
        <a href="http://www.baidu.com" target="_self">baidu</a>
        <a href="http://www.baidu.com" target="_parent">baidu</a>
        <a href="http://www.baidu.com" target="_top">baidu</a>
		<br>
        
        <iframe src="http://www.baidu.com" width="500px" height="300px" >
        </iframe>
    </body>
</html>

显示效果：

在这里插入图片描述

7.表单———重中之重

表单是HTML中和后端打交道的标签。在指定url地址（通常是servlet地址）和提交方式之后，通过submit按钮就可以向目的地址发送其收集的数据。
提交的方式有：

post：提交内容多，且内容不会在发起是请求上显示出来，安全，但是慢。
get：get提交的内容少，不安全，但是快。get是默认的，
比如搜索引擎，常用的就是get方式，而用户登录注册等，常用就是post，这个要视情况而定。
表单的结构通常如下：
——<form action=“你的提交地址” method=“get或者post”>
————<input key=value … />
————<input key=value … />
————<select key=value … />
————<submit key=value… />
——</form>
input标签可以作为form的子标签，也可以单独使用，比如放在div里面。但是要注意的是，input和select通常是用来收集用户输入的信息的，这些信息基本的都会需要传到后台去进行处理，如果一个用户的输入信息没有被传入后台，那么这个信息输入实际上是没有效果的。
虽然form表单的子标签各不相同，但是他们都有一些共同的属性，name 和 value。因为我们最终是将这些子标签收集的内容传递给后端的，那么如何知道什么标签对应收集的什么内容呢？这时候就需要为每一个标签赋予一个name，其收集的信息作为value，以K-V的形式传递到后端进行处理。
注意的是：submit作为提交按钮，其value是不会被传递的。
我们需要掌握几个常用的form子标签：

input标签

作为最常用的输入标签，input标签有很多type，通过type=xxx来指定该input输入域的类别是什么。
常用的type有：

文本域：text。用户输入文本。
单选按钮: radio。从若干给定的的选择中选则一个。
复选框：checkboxes。从若干给定的的选择中选则多个。
密码：password。输入的内容会以“*”显示。
按钮：botton。一个按钮。
文件上传：file。上传指定文件。
隐藏域：hidden。不对用户显示，但是在form提交的时候会提交上去。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		<!-- 
		action指定提交路径，和a标签的href是一个意思 
		method是提交的方式：
			1.get：get提交的内容少，且不安全，但是快。get是默认的
			2.post：提交内容多，安全，但是慢
		-->
		<form action="http://www.baidu.com" method="get">
			<!-- 
				输入域标签input，其type属性规定了输入域的作用  
				用户想往form里面输入东西，就必须通过输入域控件。
			-->

			<!-- 文本输入框，value是输入框的默认值 -->
			<input type="text" id="123" value="23" />
			<!--checkbox，复选框 -->
			<input type="checkbox" name="" id="" value="我是一个按钮" />
			<!-- 提交按钮，将form表单里所有的内容提交到action指定的地址 -->
			<input type="submit" value="baidu" />
		</form>
	</body>
</html>

显示效果：

在这里插入图片描述

用户注册案例：

我们看一下传递的发起的请求：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>User registry</title>
	</head>
	<body>
		<h2>User registry</h2>
		<hr>
		<form action="http://www.baidu.com" method="get">
			username:<input type="text" name="username" size="3"/>
			<br> password:<input type="password" name="password" size="3"/>
			<!-- 单选按钮的name必须一致. -->
			<br>gender: male<input type="radio" name="gender" id="" value="male" />
		    <input type="radio" name="gender" id="" value="female" />
			<br> degree:
			<select name="degree" id="">
				<option value ="middle school" >middle school</option>
				<option value ="high school">high school</option>
				<!-- selected默认选择 -->
				<option value ="University" selected>University</option>
			</select>
			<br> hobby:
				  drinking <input type="checkbox" name= "hobby" value="drinking" />
				  travel <input type="checkbox" name= "hobby" value="travel" />
				  <!-- check默认选择 -->
				  smoking <input type="checkbox" name= "hobby" value="smoking" checked/>
			<br> introduce:<br> <textarea rows="5" cols="30" name="introduce"></textarea>
			<hr>
			<input type="submit" value="registry"/> <input type="reset" value="reset" />
		</form>
	</body>
</html>

显示效果：

在这里插入图片描述

一些其他属性

disabled属性可以将input输入框隐藏

readonly属性可以将input输入框设置为不可修改，但是数据会跟着提交。

maxlength：设置input输入域的最大长度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file upload</title>
	</head>
	<body>	
		<form action="localhost" method="post">
			username:<input type="text" name="username" disabled="disabled"><br>
			username:<input type="text" name="username" readonly="readonly"><br>
             username:<input type="text" name="username" maxlength="3">
			<input type="hidden" name="code" value="123">
			<input type="submit" value="submit"/>
		</form>
	</body>
</html>

8. 盒子DIV

div是用来为网页进行布局的。当前的网页元素布局是盒子套盒子的方式，比table布局的方式更加灵活。

DIV的使用是用左上角的坐标和高、宽来确定一个DIV的位置和大小。

DIV在网页中独占一行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DIV test</title>
	</head>
	<body>
		<div id="" style="width: 300px; height: 300px; border: solid;">
			sfa
			<div id="" style="width: 200px; height: 200px; border: solid;">
				sfa
			</div>
		</div>
		sf
	</body>
</html>

显示效果：

在这里插入图片描述

总结

对于HTML的标签，要做到主要的标签会使用，对于不认识的标签能看懂是什么作用（通过名称和属性判断），学会查文档，百度也是很重要的。

yindarui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA全栈学习——前端HTML

前言我在刚刚入门时，繁杂的前端技术让我不知道从何下手。随着学习的深入，也对前端技术有了整体的把握。前端的学习可以说是入门容易，精通难。入门容易是因为，首先作为计算机的学习者，经常接触这类东西，而且在前期的学习中，前端技术可用的东西相对固定且内容不多，所以会给人造成一种很简单的感觉，但是随着学习的深入，如何编写美观（主要是CSS）且高效的页面（主要是JS），就是一个彻彻底底技术活。笔者是倾向于做后端开发（java）的，所以对于前端的内容可以是“浅尝辄止”，本文也是为了学习后端的小伙伴们补充前端的
复制链接

扫一扫

专栏目录