Java开发 - 尚硅谷JavaWeb学习笔记 - Part1_Web概述&HTML入门
序言
请认真看所有代码块里的注释，这个是帮助理解代码和原理的很有帮助的文字
- 字数太多了，只能分part发了，damn
- 该学习笔记需要的文件等等我都打包成压缩包，然后放在我的主页里的资源中了
- Bilibili视频网址：尚硅谷全新JavaWeb教程，企业主流javaweb技术栈_哔哩哔哩_bilibili
- 课程笔记网址：在配套的学习资料中（学习资料在我主页的资源里进行下载）
- 本人会基于视频的学习，在此之上加上自己的理解
- 标题编号优先级顺序：（从上到下 - 优先级逐渐降低）
- 一 、
- （一）
-
- （1）
- ①
- 1）
- A.
- a.
- I. / II. / III. / IV.
- …
第一章 Web概述
1.1 JavaWeb简介
用Java技术来解决相关web互联网领域的技术栈.使用JAVAEE技术体系开发企业级互联网项目. 项目规模和架构模式与JAVASE阶段有着很大的差别. 在互联网项目下,首先需要明白客户端和服务器的概念
客户端 :与用户进行交互，用于接收用户的输入(操作)、展示服务器端的数据以及向服务器传递数据
举例：
- 手机APP
- 微信小程序
- PC端程序
- PC浏览器
- 其他设备
服务端:与客户端进行交互，接收客户端的数据、处理具体的业务逻辑、传递给客户端其需要的数据
- “服务器”是一个非常宽泛的概念，从硬件而言: 服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机（如PC机、智能手机、ATM等终端甚至是火车系统等大型设备）提供计算或者应用服务。从软件而言: 服务器其实就是安装在计算机上的一个软件，根据其作用的不同又可以分为各种不同的服务器，例如应用服务器、数据库服务器、Redis服务器、DNS服务器、ftp服务器等等
综上所述: 用我们自己的话来总结的话，服务器其实就是一台(或者一个集群)安装了服务器软件的高性能计算机
1.2 JavaWeb技术栈
前端部分
HTML CSS JavaScript ES6 Nodejs npm vite vue3 router pinia axios element-plus …
后端部分
HTTP xml Tomcat Servlet Request Response Cookie Sesssion Filter Listener MySQL JDBC Druid Jackson lombok jwt …
图解
1.3 JavaWeb交互模式
请求
客户端向服务端传递数据的主要方式之一,客户端主动向服务端发送请求,可以携带数据,交给服务端处理. 请求只能是客户端向服务端
响应
服务端向客户端传递数据的主要方式之一,在接收请求后开始对数据进行处理,将结果反馈给客户端使用.响应只能是服务端向客户端
1.4 JavaWeb的CS和BS模式
根据客户端的不同,我们可以将JAVA的互联网项目运行模式分为CS模式和BS模式
CS模式 Client-Server模式 客户端-服务端模式, 该模式特点如下
- 程序分两部分,一部分是客户端需要安装的程序,一部分是要部署在服务器上的程序
- 用户需要在硬件设备或者操作系统中,下载安装特定的客户端程序才可以使用
- 程序运行的压力由客户端和服务端共同承担
- 可以借助客户端运算资源,对数据继续处理,一般可以有较好的画质和展现效果
- 程序更新时,往往需要同时更新客户端和服务端两部分
- 跨平台性能一般,不同的平台未必都有对应的客户端程序
- 开发成本较高,要为不同的客户端开发不同客户端程序
BS模式 Browser-Server模式
- 程序就一部分,只要部署在服务器上即可
- 无论用户使用什么设备和操作系统,只要有一个安装任意一款浏览器即可
- 程序运行的压力主要由服务端承担
- 客户端承担的计算压力小,可以对数据进行简单的继续处理,但是不像CS模式那些可以获得较好的画质和展现效果
- 程序更新时,只需要同时服务端部分
- 跨平台性能优秀,只要有一个浏览器,到处都可以使用
- 开发成本略低,不必为不同的客户端开发不同客户端程序
模式选择
- 对于我们Java程序员来说,我们开发的是服务端代码,所有无论前端是何种类型的服务端,我们只要按照接口文档要求开发后端功能即可,尤其是在当前前后端分离模式开发为主的时代背景下,我们可以在几乎不接触前端的状态下完成开发
1.5 JavaWeb实现前后端分离
非前后端分离
- 开发不分离: 程序员既要编写后端代码,又要去修改甚至编写前端代码,程序员的工作压力较大
- 部署不分离: 使用了后端动态页面技术(JSP,Thymeleaf等),前端代码不能脱离后端服务器环境,必须部署在一起
前后端分离
- 开发分离:后端程序员只要按照接口文档去编写后端代码,无需编写或者关系前端代码,前后端程序员压力都降低
- 部署分离:前端使用前端的页面动态技术,通过Vue等框架,工程化项目,前端项目可以部署到独立的服务器上
第二章 HTML&CSS
一、HTML入门
1.1 HTML&CSS&JavaScript的作用
HTML 主要用于网页主体结构的搭建
CSS 主要用于页面元素美化
JavaScript 主要用于页面元素的动态处理
1.2 什么是HTML
HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容
HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。2014年10月28日，W3C发布了HTML5的最终版。
1.3 什么是超文本
HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。
1.4 什么是标记语言
说HTML是一种『标记语言』是因为它不是像Java这样的『编程语言』，因为它是由一系列『标签』组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。
- 双标签:标签是通过一组尖括号+标签名的方式来定义的：
<p>HTML is a very popular fore-end technology.</p>
这个例子中使用了一个p标签来定义一个段落，<p>叫开始标签，</p>叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称：标签体。
- 单标签
<input type="text" name="username" />
- 属性
<a href="http://www.xxx.com"></a>
href="网址"就是属性，href是属性名，"网址"是属性值
1.5 HTML基础结构
1 文档声明
- HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本
- HTML4版本的文档类型声明是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- HTML5版本的文档类型声明是：
<!DOCTYPE html>
- 现在主流的技术选型都是使用HTML5，之前的版本基本不用了。
2 根标签
- html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。
3 头部元素
<head>标签用于定义文档的头部，其他头部元素都放在<head>标签里。头部元素包括<title>标签、<script>标签、<style>标签、<link>标签、<meta>标签等等。
4 主体元素
<body>标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到<body>标签内。
5 注释
- HTML注释的写法是
<!-- 注释内容 -->
1.6 HTML的入门程序
第一步 准备一个纯文本文件,拓展名为html
第二步 使用记事本打开网页,在网页内开发代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
hello html!!!
</body>
</html>
第三步 使用浏览器打开文件,查看显示的内容
1.7 HTML概念词汇解释
标签
- 代码中的一个
<>叫做一个标签,有些标签成对出现,称之为双标签,有些标签单独出现,称之为单标签
属性
- 一般在开始标签中,用于定义标签的一些特征
文本
- 双标签中间的文字,包含空格换行等结构
元素
- 经过浏览器解析后,每一个完整的标签(标签+属性+文本)可以称之为一个元素
1.8 HTML的语法规则
- 根标签有且只能有一个
- 无论是双标签还是单标签都需要正确关闭
- 标签可以嵌套但不能交叉嵌套
- 注释语法为
<!-- -->,注意不能嵌套 - 属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值
- HTML中不严格区分字符串使用单双引号
- HTML标签不严格区分大小写,但是不能大小写混用
- HTML中不允许自定义标签名,强行自定义则无效
1.9 开发工具VsCode的安装和使用
- 前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要。
- 最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。由于互联网行业的急速发展，导致了在不同的国家，有着截然不同的分工体制。
- 在日本和一些人口比较稀疏的国家，例如加拿大、澳大利亚等，流行“Full-Stack Engineer”，也就是我们通常所说的全栈工程师。通俗点说就是一个人除了完成前端开发和后端开发工作以外，有的公司从产品设计到项目开发再到后期运维可能都是同一个人，甚至可能还要负责UI、配动画，也可以是扫地、擦窗、写文档、维修桌椅等等。
- 而在美国等互联网环境比较发达的国家项目开发的分工协作更为明确，整个项目开发分为前端、中间层和后端三个开发阶段，这三个阶段分别由三个或者更多的人来协同完成。国内的大部分互联网公司只有前端工程师和后端工程师，中间层的工作有的由前端来完成，有的由后端来完成。
- PRD（产品原型-产品经理） - PSD（视觉设计-UI工程师） - HTML/CSS/JavaScript（PC/移动端网页，实现网页端的视觉展示和交互-前端工程师）
- 前端工程师比较推崇的一款开发工具就是visual studio code,下载地址为:Visual Studio Code - Code Editing. Redefined
1 安装过程
安装过程比较简单,一路next,注意安装路径不要有中文,空格和特殊符号即可
2 安装插件
- Auto Rename Tag - 自动修改标签对插件
- Chinese Language Pack - 汉化包
- HTML CSS Support - HTML CSS 支持
- Intellij IDEA Keybindings - IDEA快捷键支持
- Live Server - 实时加载功能的小型服务器
- open in browser - 通过浏览器打开当前文件的插件
- Prettier-Code formatter - 代码美化格式化插件
- Vetur - VScode中的Vue工具插件
- vscode-icons - 文件显示图标插件
- Vue 3 snipptes - 生成VUE模板插件
- Vue language Features - Vue3语言特征插件
3 准备工作空间
- 直接用vscode打开某个目录即可直接将某个目录作为项目代码存放的根目录
4 在工作空间下创建目录和文件
- 点击带有"+"号的按钮即可创建文件或者目录
- 在html中,输入" ! " 并回车即可快速出现html的基本结构
5 通过live Server 小型服务器运行项目
- 点击右下角Go Live , 或者在html编辑视图上右击 open with live Server ,会自动启动小型服务器,并自动打开浏览器访问当前资源
- 方法1
- 方法2
- Live Server 实时加载功能
- Live Server使用完毕后,要记得关闭
- 方法1
- 方法2
6 其他常见设置
- 设置字体: 齿轮>search>搜索 “字体大小”
- 设置字体大小可以用滚轮控制: 齿轮>设置>搜索 “Mouse Wheel Zoom”
- 设置左侧树缩进: 齿轮>设置>搜索 “树缩进”
- 设置文件夹折叠: 齿轮>设置>搜索 “compact” 取消第一个勾选
- 设置编码自动保存: 齿轮> 设置> 搜索 “Auto Save” ,选择为"afterDelay"
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
