JAVAweb --- HTML简单引入

最新推荐文章于 2025-05-14 20:14:52 发布

原创最新推荐文章于 2025-05-14 20:14:52 发布 · 3.3k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#java #html5 #html

JAVAweb 专栏收录该内容

53 篇文章

订阅专栏

本文介绍了互联网通信的C/S和B/S架构，重点讲解了HTML的基础知识，包括标签结构、注释、静态与动态资源的区别。作为全栈开发者，理解这些是基础。

Java学习简单前端 HTML

文章导航

互联网通信介绍
- 共享资源文件
- - 静态资源文件
  - 动态资源文件
HTML hyper text markup language
- 简单的HTML程序
- - 注释
  - 常用的标记

Java养成计划80天

JavaWeb简单涉猎 HTML

作为一个合格的全栈开发，初期目标是能够看懂所有的代码，包括前端的三剑客，Sring大礼包，java所有的代码，也就是简单的能够使用

同时会继续学习计算机网络，Linux系统，高阶数据结构，12月份了，要抓紧时间了

首先先大概了解互联网通信的框架，同时简单用过时的技术比如JSP来过渡，Vue

互联网通信介绍

之前在java的socket中就介绍过一点点网络的通信，程序的架构主要是两种架构方式，C/S和B/S；控制浏览器的行为技术：HTML，CSS，JavaScript；这也是前端的核心技术；但是这里只是掌握最基础的知识就行；控制服务端的java行为技术，HTTP服务器，servlet

并且还会详细介绍MVC的设计模式

互联网通信角色的介绍

客户端计算机 : 用于发送请求，来索要资源
服务端计算机：用于接收请求，用来发送资源

互联网通信结构

C/S ： client /server结构
- client software就是客户端，客户端的软件安装在客户端的计算机上；帮助客户索要资源文件；帮助客户端九三级接收服务端发送回来的二进制数据解析成相关的文字，图片etc
- server software是服务端软件，服务器软件安装在服务端计算机，接收来自特定的客户端软件发送的请求；接收到请求之后自动定位服务端计算机上的资源文件，并将文件内容解析为二进制文件，并通过网络发送回请求的客户端计算机上
- 适用的场景： C/S通信模型普遍用于个人娱乐市场，比如微信，淘宝，游戏；企业办公领域较少
- 优缺点
  - 优点：客户端必须安装软件，安全性较高，有效降低服务端计算机的压力，可以将执行的命令发送到客户端执行，服务端的命令就减少了，运行压力降低
  - 增加客户获得服务的成本，安装软件；更新换代太快，一旦服务端的命令改变之后，那么客户端的软件的就要更新了，都要升级，所以办公领域考虑时间成本就不适用
B/S： brower/server 结构
- 浏览器：浏览器是安装在客户端上的软件，可以向任意的服务器发送请求，索要资源文件，可以将服务器返回的二进制数据解析为文字，数字，图片etc
- server 服务器，安装在服务端计算机的软件，可以接收任意浏览器发送的请求【所以不安全】，自动定位资源并发送会客户端的浏览器
- 适用场景：个人和企业的日常活动 Web运用广泛
- 优缺点
  - 优点：不会增加获得服务的成本，几乎不需要更新浏览器，升级只是升级服务器
  - 缺点：不能有效对服务器计算机资源文件进行保护【防不住】；服务端计算机的工作压力异常巨大，所有的事情只能服务器解决，所以就问题就是B/S通信结构下高并发如何解决---- 多线程【服务器集群】

共享资源文件

可以通过网络进行传输的文件，就是共享资源文件，所有的文件都是通过文件传输

HTTP服务器对于共享资源文件的分类

静态资源文件

文件的内容是固定的，比如文档，图片，视频【所有的人看内容相同】；文件中存放的不是内容或者命令，这些命令只能在浏览器中编译于执行，这中也是静态资源文件 — 比如.html文件，.css为文件，.js文件在浏览器中编译画出框架

静态文件被索要时，Http服务器直接通过【输出流】将静态文件中的内容或命令以【二进制】推送给发起请求的浏览器

动态资源文件

文件存放命令，并且命令不能在浏览器编译和执行，只能在服务器计算机编译执行 .class文件

动态文件被索要的时候，HTTP服务器需要创建当前class文件的实例对象，通过实例对象调用对应的方法处理用户的请求，通过输出流将运行结果以二进制形式推送到发起请求的浏览器

了解了互联网的通信的过程之后，那么开发人员的职责就是

控制浏览器的行为 ------- 控制浏览器发送的请求地址，域名；控制浏览器的请求方式；控制浏览器发送请求的控制参数
开发动态文件，【编写程序执行相关的操作，比如计算】后端工程师

WEB前端主要的知识就是HTML，CSS，JS，都是直接再浏览器上进行编译的，属于静态资源文件，服务在B端

HTML hyper text markup language

HTTP 是 hyper text transport protocol 超文本传输协议，HTML是超文本标记语言【既然是markup，那就是由大量的标签组成，每一个标签都有开始标签和结束标签

<标签>

<标签属性名 = “属性值” 属性名 = “属性值”>

<标签>

超文本：指的是流媒体、图片、声音、视频

HTML的开发使用普通文本编辑器，文件扩展名.html

W3C ：世界万维网联盟制定了HTML的规范，每一个浏览器的生产厂家都会遵守这些规范，HTML规范主要目前的版本是H5

简单的HTML程序

<!doctype html>
<!-- 加上第一行就是html5 -->
<!--根节点-->
<html>
    <!--头-->
    <head>
        <!--标题-->
        <title>Cfeng.HTML</title>
    </head>
    <!--体-->
    <body>
        网页的主体内容：欢迎阅读cfeng的博客！！
    </body>
</html>

运行的效果可以看看

在这里插入图片描述

可以看到就是网页的标题，就是网页的主题内容，开始结尾都要有结束的位置加上/

在网页中右键就可以选择查看网页的源代码，和编写的是一样的

在这里插入图片描述

头：就是现实在网页上方的标题；体就是网页的主题内容，所以复杂的一般是体

如果在html文件的第一行加上

<!doctype html>

这就代表是HTML5，否则表示的就是HTML4

注释

html中的注释和java中不一样，也是<>中

<!--这是一行注释-->


<!--
1.加上<!doctype html>代表的就是html5，否则就是4
2.这是多行注释
-->

HTML不区分大小写，语法松散

常用的标记

超文本HTML的开始和结束
网页的头
- 网页的标题
网页的主体
- 
 段落分段，段落标记
- < h1> 一级标题【一直到6级标题】
- 换行就像java中的\n ，不需要结束标记，【br是一个独目标记】
- < hr> 横线就像分界线一样内有属性 color 和 width ，width为百分比 ,也是【独目标记】
- < pre> 预留格式，可以保留原来输入的格式，比如换行和缩进，不加就成了一行，乱码
- < del> 删除字删除的样式和markdown中的删除相同
- < ins> 插入字插入字就是对内部的文字加上下划线，和markdown中相似
- 粗体字也就是对字体进行加粗
- 斜体字对内部的文字进行斜体修饰
- 右上角加字比如指数
- 右下角加字比如f2，下标
- 字体标签内有属性颜色 color ，字体的大小 size,可对内部的

下面对上面的基本标签进行测试

<!doctype html>
<html>
	<head>
		<title></title>
	</head>
	<body>
	<!-- 
	<p> 代表的是段落分段，一大段化必须要分段才能正常执行
	<h>代表的是标题字，比如一级标题，二级，……五级   分别是<h1>  <h2> <h3> <h4> <h5>
	<br> 代表换行，就像\n，不需要结束标记！
	-->
		<h1> 动态资源文件</h1>
		<p>文件存放命令，并且命令不能在浏览器编译和执行，只能在服务器计算机编译执行 .class文件</p><p>动态文件被索要的时候，HTTP服务器需要创建当前class文件的实例对象，通过实例对象调用对应的方法处理用户的请求，通过输出流将运行结果以二进制形式推送到发起请求的浏览器</p>
		Hello<br>cfeng!
	<!--
	<br> 为换行  独目
	<hr> 为横线   带有属性颜色和宽度，属性设置双引号，中间用空格隔开就行,【语法松散，可以不写引号】也是独目标记  也可以选择不设置属性
	就是在标记中使用属性名 = 属性值 就可以设置
	-->
		<hr>
		<hr color = "red" width = "50%">
	<!-- <pre></pre>  预留格式，就是一段格式的文字etc，像保持原本的缩进和换行，那么就加上预留标记，否则就在同一行了-->
		<pre>
		Static{
			try{
				Class.forname(bundle.getString("driver");
				}catch(SQLException e){
					e.printStackTrace();
				}
			}
		</pre>
	<!--
	<del></del> 删除字，内部修饰的字体中间划线
	<ins></ins> 插入子  内部字加下划线
	<b></b> 粗体字 也就是对字体进行加粗
	<i></i> 斜体字  ，斜体字效果和word一样
	<sub></sub> 右下角加字
	<sup></sup> 右上角加字
	<font></font> 字体标签   带有属性字体大小和标签 size 和 color 属性加在开始标记的内部 加在二者之间被当作修饰的部分
	-->
	<del>删除字</del>   <ins>插入字</ins>   <i>斜体字</i>  <b>粗体字</b>
	<font color = "green"  size = "50">
		<br>10<sup>2</sup> = 100<br>H<sub>2</sub>O
	</font>
	</body>
</html>

在这里插入图片描述