JavaWab开发的总括以及HTML知识

news2024/9/22 19:36:32

一、Web开发的总括

在这里我来给大家介绍一下Wab开发需要配合哪些前后端的对应语言:

首先是Java(Java通常的工作):

  1. Wab开发

  1. android开发

  1. 大数据开发

另外,Wab开发想要学好就需要配合之前博客中的内容,如:多线程/IO/网络/数据结构/数据库......

这里建议学懂前面的内容再往下走.

JavaWab具体来说就是搭建一个网站:

一个网站=前端+后端

前端:展示给用户来看的界面(网页).

后端:对应的服务器,给网页提供数据支持

要想搭建一个网站,就需要后端和前端想配合来进行.

但在日常的工作中,都是前端和后端相分离的,两个团队,两伙人,相互合作,最后再放在一起的.

在这里,我们主要介绍一下"后端"的发展史:

  1. 上古时期,后端是使用C/C++开发的,当时是基于CGI的技术

  1. PHP崛起,Java崛起,后端的主要开发技术栈,变为了LAMP体系(也就是Linux、Apache(HTTP服务器)、MySQL、PHP),同时Java也跟进了PHP,搞了JSP,微软也搞了ASP.

  1. 模板引擎技术崛起,也就是Sping崛起,逐渐的PHP后劲不足了,此时Java就结果了接力棒SSH(Java的三大框架),此时Java就成了开发Wab中最有力的武器,随之跟进的还有Python(Django),Ruby(Ruby on Rails)

  1. 前后端进一步分离,前后端解耦了,Spring一支独秀,SSM(三大框架,其实都是Spring),Go崛起.

现在就处于这个阶段!!!

前端:

前端开发主要是用三个编程语言:

  1. HTML(描述了网页的骨架:就是具体描述了网页中到底有什么,如:标签、图片)

  1. CSS(描述了网页的皮),就是形容词

这两个不是通常意义上的编程语言,它俩里面没有任何逻辑,只是描述了一些"属性".

  1. JavaScript(描述了网页的魂,如何和用户交互的)

JS使我们当前前端最主要的开发语言,除了JS还有一个TS(TypeScript,这是微软搞出来,和JS的语法一模一样,而且还新增了一些独特且好用的功能,最为重要的是TS可以和JS兼容,可以让程序员简单的从JS过渡到TS),除此之外,还有谷歌整的Dart(想要制霸全平台,就是PC段写的代码可以在网页,以及移动端顺利运行)

当然完成前端开发和后端开发,光有语言是不够的,还需要搭配一些框架.

二、HTML

HTML描述的是网页的骨架,是一个标签化的语言.

  1. 这里我们首先完成一个hello world:

首先创建一个记事本,将后缀名改为html:

然后确认,就变为了这个样子:

然后右键使用记事本打开:

写入hello world并保存.

双击打开,就完成了:

浏览器会解析html 的内容,根据里面的内容网页面上放东西,归根结底就是以汇编的形式在CPU上运行.

但是当前的代码并不是很严谨:(这样此时html的正确写法)
html即使你写的代码不太和规矩,浏览器也会尽力去执行,这种特性被称为"鲁棒性"(越粗鲁越棒).

在HTML中,我们浏览器就相当于Java中的JVM.作用就是用来运行前端代码.

这里我们来介绍一下浏览器:

市面上的主流浏览器:

IE(windows自带的浏览器)、chrome(现如今最牛逼的浏览器)、firefox、safari(苹果自带的浏览器)、Opera(小众浏览器)

其他的浏览器都是上述浏览器的换皮.功能就是解析运行网页.

另外,我们的前端开发还可以使用这几种方式:

  1. JB系列(JetBrains公司)

IDEA如果是专业版(教育版),本身就是支持前端的,或者用JB提供的WebStorm也可以,但是收费.

  1. VSCode(免费方案)

实用功能略逊于WebStorm,但是差的不多,是一款轻量级开发工具.

......还有很多的编写前端的方案

2. 这里我们选择方案二VSCode:

首先是点击文件发开文件夹:

接下来就是创建代码文件了:

在打开的文件夹中点击右键创建新文件

起个html类型的名字,就可以正常编辑了:

完成正常的hello world程序编写:

记住我们要时刻进行代码的保存.(ctrl+s)

如何运行:

右键这个文件然后在文件资源管理器中显示,然后就可以运行了:

3.HTML基本语法

  1. html是通过标签组织的形如<html></html>尖括号组织的,成对出现的这个就是标签,也被称作"元素"

  1. 一个标签通常是成对出现的<html>是开始标签</html>是结束标签,这俩之间的内容是标签的内容

  1. 标签是可以嵌套的.一个标签可以是多个标签,此时标签就形成了一个"树形结构".

  1. 在开始标签中,给标签赋予了属性(主要学习html就是学的这个),属性就相当于键值对.可以有一个或者多个

html:

这是一个html文件最顶层的标签,树根节点.

head:

存放了这个页面的一些属性(一些元输据,具体就是文件大小,创建者默认打开程序等等)

body:

存放了这个页面包含了哪些内容.

另外,我们还有一种快速编写代码的方式:

!+enter

这样可以快速的完成代码的创建

这里我们来解释一下这个!+enter所生成的具体内容

4.HTML常见标签

注释标签:

代码的注释功能.

注释的内容是不会被网页显示的,但是右键查看网页源代码可以查看到之前在VSCode中写的注释.(所以说注释不要乱写)

注释快捷键:ctrl+/跟Java一样

标题标签:h1-h6

h1标题又大又粗

h6标题又小又细

以此类推

类外,每个标题标签都是独占一行的,和代码的表写是无关的.

所以说在html中,标签是否换行,和代码的编写无关,而是和标签自身有关.(有的标签独占一行,而有的标签不独占)

段落标签: p

这里生成的lorem就是自动生成的一段随机的文本.(测试专用)

这里放置四个段落,我们会发现段落与段落之间有这一定的间距.

换行标签:<br>

这里添加一个换行标签,网页中显示的结果也会换行:

格式化标签:

这里有几种个实话标签的用法:

对应的展示效果是:

图片标签:img

img有个核心属性叫做src(必填项)

src描述了该图片的路径(路径可以是一个绝对路径,也可以是一个相对路径,还可以是一个网络路径 )

绝对路径:

这样可以正确显示图片:

相对路径:(这里要确定工作目录,注意工作目录就是html文件存在的目录)

这样也可以正常显示:

直接写个网址:

我们右键网络上的图片,复制图片地址:

然后粘贴到VSCode中:

也是可以正确显示的:

另外,在这里我们来讲一下alt属性:

它的意思是在图片挂了的情况下显示的文本信息

比如我们在这里把连接故意写错:

就会发现,我们的alt就显示了!!!

接下来是title属性:鼠标悬停在图片上会给出一个提示

这个截不了图.

width/height描述图的尺寸:

长度和宽度可以同时设置,但如果只设置一个,另一个则会等比缩放.

px指的是像素.像素是前端开发中最常用的单位.也就是指显示器中的小灯泡(灯泡越多越清晰,像素越高)而这里的宽度和长度是指这个图片用多少个这样的小灯泡进行表示.

超链接标签:a

链接:就是指快捷方式.

而超链接:就是指可以跳转到的页面,是当前网站之外的.

展现形式就是这样:

点击链接就可以直接进入对应网址.

在超链接中还有一个属性,target:

就是输入target="_block"

可以不关闭之前的网页进行下个网页的访问

注意这里的网站地址是可以替换成IP地址的

表格标签:(涉及到的是一组标签)

table表示整个表格

tr表示一行

td表示一个单元格

th表示表头中的一个单元格

我们的表格是由行和列所构成的首先确定第一行也就是表头,接下来确定每一个单元格,以此类推填写下述表,最后呈现的结果是:

为了让我们的代码更像表格这里我们需要调整表格的大小并添加表格线.

呈现效果如下:

这里我们发现边框是双实线,影响美观,如果想要将两道实现何为一条,该怎么做呢?

只要这样更改,就可以了:

在这里我们使用CSS代码:

可以使所有文字水平居中.当然上面已经水平居中了!!!

列表标签:

列表标签分为两类:

有序列表 ol(ordered list)

无序列表 ul(unordered list)

而我们的有序列表和无序列表是通过列表项进行描述的,列表项 li(list item).

表现形式是:

很多网站来表示并列的项都是用有序或者无序列表来表示的:

如B站

form标签:

通常我们使用form进行前后端的交互.就是将页面上的用户输入的信息传到服务器上.(主要和HTTP协议有关系,我们后面再将)

input标签:

有多种表现形式,能够表现成各种用户输入的组件

1.

如这种就是单行文本框的表现形式:

2.如果把test改为password:

表现形式就为:

就变为了密码框.

3.还可以把type改为radio

这时就会变为了单选按钮:

但是此时,这个单选选项是可以两个都选择的

4.如果想要让这个选项变为单选,就需要在input中添加一个name属性:

这样就这能够选择一个了!!!

name属性的作用是为了让这个选项成为唯一的,相同的name只能存在唯一的一个.

5.在input中还可以设置一个checked属性,checked的作用是让选项有一个默认的选择.

这样不需要选择就能够,使"女"备选.

6.多选

使用checkbox就可以实现多选功能:

咱们依然可以通过默认属性设置checked

7.按钮

将type设置为button,另外还有一个value属性,就是按钮中的字!!!

展现形式是:

至于按钮点击后要干什么就需要js来配合完成了!!

比如:

注意:(注意以下是js的函数,现阶段还没有学习)

点击按钮就会显示:

8.提交按钮(需要搭配form使用)

type="submit"

外表和button一致,会触发button和服务器的交互

9.文件选择框

展现形式是:

就是可以上传电脑中的本地文件

10.下拉菜单select

展现形式:

11. textarea

多行编辑框,就是实现一个可以自由拖拽的输入框

展现形式就是:

上述这些标签也被成为"控件",也就是构成一个图形化界面的基本要素.

无语义标签:

div

span

前面介绍的这些标签都是有特殊含义的,而我们的无语义标签就是指没有特定含义的标签.俗称就是"万机油标签".

这两个标签还是有区别的:

div是独占一行的标签.

而span是不独占一行的标签

这两个标签没有特定的应用场景,也就是可以应用在所有的场景.

在此我们的html就全部介绍完了.要想要知道更多我们需要去mdn html文档中查看:HTML（超文本标记语言） | MDN (mozilla.org).另外推荐一个网站:Quick Reference & Quick Reference.

三、综合案例

展示简历信息

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
</head>
<body>
    <h1>蔡徐坤的简历</h1>
    <h2>基本信息</h2>
    <img src="./R-C.jfif" alt="" height="200px">
    <p>
        求职意向:个人练习生
    </p>
    <p>
        联系方式:110
    </p>
    <p>
        邮箱:110@qq.com
    </p>
    <p>
        <a href="https://www.bilibili.com/video/BV1ct4y1n7t9/?spm_id_from=333.337.search-card.all.click&vd_source=7381475c3ffa590edfdad47d34c78aa7">我的才艺表演</a>
    </p>
    <p>
        <a href="https://www.bilibili.com/video/BV1R94y127F5/?spm_id_from=333.337.search-card.all.click&vd_source=7381475c3ffa590edfdad47d34c78aa7">我的歌喉展示</a>
    </p>
    <h2>教育背景</h2>
    <ol>
        <li>1990-1996 美国校队</li>
        <li>1997-2010 个人练习生</li>
        <li>2010-至今  顶流明星</li>
    </ol>
    <h2>专业技能</h2>
    <ul>
        <li>唱</li>
        <li>跳</li>
        <li>rap</li>
        <li>篮球</li>
        <li>music~~</li>
    </ul>
    <h2>我的成就</h2>
    <ol>
        <li>
            <h3>nba球星</h3>
            <p>美国校队在校时间 1990-1996</p>
            <h4>球队职位</h4>
            <ul>
                <li>三分投手</li>
                <li>内线篮板</li>
            </ul>
        </li>
        <li>
            <h3>顶流明星</h3>
            <p>回国发展时期 1997-至今</p>
            <h4>地位影响</h4>
            <ul>
                <li>风靡全中国</li>
                <li>英名远扬,让全世界人认识</li>
            </ul>
        </li>
    </ol>
</body>
</html>

成果展示:

目的是联系一下各个标签的使用方式,html具体来说不难但是要记忆的东西很多,最好做一个带有前端的项目进行联系.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/359209.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2023年，都在说软件测试饱和了，大环境不好？为何每年还会增加40万测试员？

2023年，都在说软件测试饱和了，大环境不好？为何每年还会增加40万测试员？

最近和一些刚进入软件测试行业的朋友交流&#xff0c;发现了一个有趣的现象&#xff0c;那就是对这个行业很多问题的认识是一致的、片面的&#xff0c;也可以理解为误解。利用你的时间列出他们对这个行业的所有误解&#xff0c;然后结合你多年的工作经验和你交流。毕竟你是从这…
阅读更多...
栈的压入，弹出序列-剑指Offer-java

栈的压入，弹出序列-剑指Offer-java

一、题目描述输入两个整数序列&#xff0c;第一个序列表示栈的压入顺序&#xff0c;请判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如&#xff0c;序列 {1,2,3,4,5} 是某栈的压栈序列&#xff0c;序列 {4,5,3,2,1} 是该压栈序列对应的一个弹出序列&a…
阅读更多...
2019蓝桥杯真题修改数组 C语言/C++

2019蓝桥杯真题修改数组 C语言/C++

题目描述 给定一个长度为 N 的数组 A [A_1,A_2, ,A_N]&#xff0c;数组中有可能有重复出现的整数。 现在小明要按以下方法将其修改为没有重复整数的数组。小明会依次修改A_2,A_3, ,A_N当修改 A_i时&#xff0c;小明会检查 A_i是否在 A_1 ∼ A_i−1中出现过。如果出现过&#…
阅读更多...
2023年2月访问学者博士后热门国家出入境政策变化汇总

2023年2月访问学者博士后热门国家出入境政策变化汇总

近期关于出国的咨询量日益增多&#xff0c;出入境政策也是其中之一。所以本期知识人网小编汇总了最新访问学者和博士后关注的热门国家及地区入境政策变化&#xff0c;提供给大家。目前各国入境政策大致分为三种&#xff1a;一、 无法入境的国家如&#xff1a;摩洛哥、朝鲜等。二…
阅读更多...
iconfont 图标如何在uniapp中的tabBar使用

iconfont 图标如何在uniapp中的tabBar使用

注意&#xff1a; 小程序并不支持tabBar中 设置 iconfont 1. 材料准备 首先进入字体图标网址&#xff1a;iconfont-阿里巴巴矢量图标库&#xff1b;&#xff08;如果你没有登入&#xff0c;记得登入一下&#xff09; 把图标添加入购物车 添加到购物车之后-&#xff08;右上角…
阅读更多...
逻辑回归—分类问题的操作顺序

逻辑回归—分类问题的操作顺序

对于二元分类问题来说&#xff0c;分类的结果和数据的特征之间仍呈现相关关系&#xff0c;但是y的值不再是连续的&#xff0c;是0&#xff5e;1的跃迁。但是在这个过程中&#xff0c;什么仍然是连续的呢&#xff1f;”是概率&#xff0c;概率是逐渐升高的&#xff0c;当达到一个…
阅读更多...
JVM12 字节码指令集

JVM12 字节码指令集

1. 概述 2. 加载与存储指令 2.1. 局部变量压栈指令 iload 从局部变量中装载int类型值 lload 从局部变量中装载long类型值 fload 从局部变量中装载float类型值 dload 从局部变量中装载double类型值 aload 从局部变量中装载引用类型值&#xff08;refernce&#xff09; iload_0 从…
阅读更多...
从交换机安全配置看常见局域网攻击

从交换机安全配置看常见局域网攻击

前言 构建零信任网络&#xff0c;自然离不开网络准入(NAC)&#xff0c;这就涉及到交换机的一些安全测试&#xff0c;于是有了此文《从交换机安全配置看常见局域网攻击》。 交换机安全配置 如本文标题所说从交换机安全配置看常见的局域网攻击&#xff0c;那么下面提到的各种攻…
阅读更多...
leaflet 绘制多个点的envelope矩形（082）

leaflet 绘制多个点的envelope矩形（082）

第082个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中如何根据多边形的几个坐标点来绘制envelope矩形。 直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果. 文章目录 示例效果配置方式示例源代码（共78行）安装插件相关API参考：专栏目标示例…
阅读更多...
【Java】线程的生命周期和状态

【Java】线程的生命周期和状态

一、通用的线程的生命周期&#xff0c;简称&#xff1a;五态模型&#xff1a; 初始状态&#xff1a;指语言层面上的创建线程&#xff0c;操作系统中还没有创建。可运行状态&#xff1a;指线程可以分配CPU执行&#xff0c;这时线程已经在系统中创建成功。运行状态&#xff1a;指…
阅读更多...
0元搭建linux服务器(windows笔记本)

0元搭建linux服务器(windows笔记本)

0元搭建linux服务器一.windows装Centos71.1 centos7 iso镜像1.2 准备U盘1.3 UltraISO 启动盘制作工具安装1.4 准备一台windows 机器1.5 安装过程二 、连接无线wifi三、固定wifi ip3.1 查看网络状态3.2 查看DNS3.3 查看GATEWAY3.4 设置静态IP四、一键快速安装单机版k8s五、申请域…
阅读更多...
基于CCG算法的IEEE33配电网两阶段鲁棒优化调度matlab

基于CCG算法的IEEE33配电网两阶段鲁棒优化调度matlab

目录 1 前言 2基本内容 2.1 配网两阶段鲁棒模型 2.2 求解步骤 3部分程序 4程序结果 5程序链接 1 前言 鲁棒优化是电力系统研究的热点&#xff0c;而两阶段鲁棒和分布鲁棒研究就成为各类期刊&#xff08;sci/ei/核心&#xff09;的宠儿&#xff0c;最简单的思路是通过改…
阅读更多...
CACTER云网关无缝对接O365系统，反垃圾实力强硬！

CACTER云网关无缝对接O365系统，反垃圾实力强硬！

01 客户背景 某IT互联网企业是国家认定的高新技术企业、上海市重点大数据企业。自成立以来&#xff0c;坚持以自主研发为本&#xff0c;以客户为中心&#xff0c;专注汽车保险科技&#xff0c;具备强大的研发实力&#xff0c;致力为行业提供数字化智能化车商保险业务管理综合解…
阅读更多...
python采集最新世界大学排名, 来看看你的母校上榜没~

python采集最新世界大学排名, 来看看你的母校上榜没~

前言 大家早好、午好、晚好吖 ❤ ~ 本次内容: Python 采集世界大学排行榜 并做数据可视化 知识点: 动态数据抓包 requests发送请求 结构化非结构化数据解析 开发环境: python 3.8 运行代码 pycharm 2021.2 辅助敲代码 requests 第三方模块 pip install 模块名 本次文…
阅读更多...
基于 DSP+FPGA 的高清图像跟踪系统研制

基于 DSP+FPGA 的高清图像跟踪系统研制

目标识别与跟踪技术是目前图像处理研究的重点方向&#xff0c;在军事和民用领域中 具有广泛的应用价值&#xff0c;如精确制导武器、导弹飞机预警等军事领域&#xff0c;如交通管理、 刑事侦查等民用领域。其中&#xff0c;如何在复杂的背景中&#xff0c;提取、识别与跟踪特定…
阅读更多...
File类的用法和InputStream，OutputStream的用法

File类的用法和InputStream，OutputStream的用法

这里写自定义目录标题一、File类1.构造方法2.普通方法二、InputStream1.方法2.FileInputStream3.Scanner类的应用三、OutputStream1.方法2.FileOutputStream3.PrintWriter类的应用一、File类 1.构造方法 签名说明File(File parent, Stringchild)根据父目录 孩子文件路径&…
阅读更多...
车载前摄像头学习笔记 ———— 视频编码格式

车载前摄像头学习笔记 ———— 视频编码格式

文章目录简介格式H.26XH.261H.263H.264/AVCNALU HeaderNALU PayloadSODBRBSPEBSPMPEG-XMPEG-1MPEG-2MPEG-4MPEG-7MPEG-21简介 视频是可以理解为连续的图像序列。获取的一帧即为一幅图像&#xff0c;在每一帧的数据中&#xff0c;所有的内容都是静止的。为什么看起来是运用的呢&…
阅读更多...
c/c++开发，无可避免的模板编程实践（篇六)

c/c++开发，无可避免的模板编程实践（篇六)

一、泛型算法 1.1 泛型算法概述 c标准库不仅包含数据结构&#xff08;容器、容器适配器等&#xff09;&#xff0c;还有很多算法。数据结构可以帮助存放特定情况下需要保存的数据&#xff0c;而算法则会将数据结构中存储的数据进行变换。标准库没有给容器添加大量的功能函数&am…
阅读更多...
基于springboot+vue的校园社团管理系统(前后端分离)

基于springboot+vue的校园社团管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…
阅读更多...
9.循环神经网络

9.循环神经网络

9.循环神经网络 目录 序列模型 统计工具 自回归模型 马尔可夫模型 训练 预测 文本预处理 读取数据集 词元化 词表 整合所有功能 总结 语言模型和数据集 学习语言模型 马尔可夫模型与m元语法 自然语言统计 读取长序列数据 随机采样 顺序分区 总结 循环神经…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023