JAVAweb --- HTML简单引入

Java学习简单前端 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文件的实例对象,通过实例对象调用对应的方法处理用户的请求,通过输出流将运行结果以二进制形式推送到发起请求的浏览器

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

  1. 控制浏览器的行为 ------- 控制浏览器发送的请求地址,域名;控制浏览器的请求方式;控制浏览器发送请求的控制参数

  2. 开发动态文件,【编写程序执行相关的操作,比如计算】后端工程师

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的开始和结束
  • 网页的头
    • 网页的标题
  • 网页的主体
    • < p>

      段落分段,段落标记
    • < h1> 一级标题 【一直到6级标题】

    • < br> 换行 就像java中的\n ,不需要结束标记,【br是一个独目标记】

    • < hr> 横线 就像分界线一样 内有属性 color 和 width ,width为百分比 ,也是【独目标记】

    • < pre> 预留格式,可以保留原来输入的格式,比如换行和缩进,不加就成了一行,乱码

    • < del> 删除字 删除的样式和markdown中的删除相同

    • < ins> 插入字 插入字就是对内部的文字加上下划线,和markdown中相似

    • < b> 粗体字 也就是对字体进行加粗

    • < i> 斜体字 对内部的文字进行斜体修饰

    • < sup> 右上角加字 比如指数

    • < sub> 右下角加字 比如f2,下标

    • < font> 字体标签 内有属性颜色 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>

在这里插入图片描述

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值