学习Java的日子 Day44 初识前端

Day44 HTML

学习路线:

前端:展示页面、与用户交互 --- HTML
后端:数据的交互和传递 --- JavaEE/JavaWeb

1.B/S和C/S

B/S:浏览器/服务器 教务系统

C/S:客户端/服务器
优缺点

1.开发/维护成本:B/S相对低

2.运算负载:C/S可以使用客户端分担压力

3.安全性:专人专用客户端(银行) C/S

2.【面试】网页的呈现过程

URL验证 --> DNS解析 --> TCP三次握手(建立连接) --> 处理请求 --> 渲染页面 --> 断开连接

3.【重点】URL格式

协议://主机地址(域名或IP地址):端口号/资源路径?参数名1=参数值1&参数名2=参数值2&......#书签(信息片段)

eg: https://www.baidu.com:443

3.1 协议

1.http 超文本传输协议

2.https 在链路层上套接字加密的超文本传输协议(安全的http)

3.ftp 文件传输协议

3.2 ip地址

本机ip地址 127.0.0.1 localhost

3.3 端口号

1.http默认端口 80

2.MySQL端口 3306

3.Tomcat 服务器容器 8080

3.4 URL、URI、URN

1.URL 统一资源定位器

2.URI 统一资源标识(ID)

3.URN 统一资源命名
注意

1.URI范围最大

2.URL不支持中文

3.5 MIME 一级类型/二级类型

1.text 文本 text/html

2.image 图像 image/jpg image/png

3.audio 音频

4.video 视频

5.application 应用

6.message 报文信息

7.multipart 多部分媒体(文件上传)eg. 用户注册

4.网页的组成部分(HTML+CSS+JavaScript)

前端开发的工作模式:开发输出html+css+js
HTML:页面结构

CSS:页面样式表现

JavaScript:交互行为

5.HTML简介

HTML:超文本标记语言------HyperText Markup Language

超文本:链接

标记语言:标记网页的结构和内容

标记:标签,带尖括号的文本

5.1 HTML特点

1.解释性语言 VS 编译性语言(C、java)

2.浏览器解释执行(依赖于浏览器)

3.所有不可见全部会被解析为一个空白符

4.不区分大小写(建议小写)

6.HTML基本结构

html:整个网页

head:网页头部,用来存放给浏览器看的信息,例如 CSS

title:网页标题

body:网页主体,用来存放给用户看的信息,例如图片、文字

注意:

标签要成对出现,中间包裹内容

<>里面放英文字母(标签名)

结束标签比开始标签多 /

标签分类:双标签和单标签

7.扩展:颜色的表示方法

1.英语单词 red

2.#十六进制RGB(#000000------#FFFFFF) #FFF

3.(CSS) rgb(0,0,0) - rgb(255,255,255)

8.路径的编写【掌握】

1.绝对路径:路径很清晰---写很多内容---应用:引用第三方资源(网络)
2.相对路径:相对于当前的URL---书写简单---应用:项目内部

    1. 同一目录:直接写文件名.后缀名 eg. note.md
  1. 上级目录:.../文件名.后缀名 eg. .../.../README.md
  2. 下级目录: 文件夹名字/文件名.后缀 eg. img/baidu.png
    3.相对服务器路径:/开头 表示服务器根路径(Web开发中常用)
    1. 同一目录:直接写文件名.后缀名 eg. note.md
  3. 上级目录:.../文件名.后缀名 eg. .../.../README.md
  4. 下级目录: 文件夹名字/文件名.后缀 eg. img/baidu.png
    3.相对服务器路径:/开头 表示服务器根路径(Web开发中常用)
相关推荐
阿成学长_Cain44 分钟前
Linux telinit 命令详解:运行级别切换|关机重启|系统维护一站式掌握
linux·运维·前端·网络
淘源码d1 小时前
医学影像云PACS系统——PACS诊断工作站
java·源码·影像处理·医院管理系统·影像工作站·云pacs系统·dicom 标准通信
Patrick_Wilson1 小时前
最佳实践是有保质期的:从一次 CDN external 白屏事故说起
前端·性能优化·前端工程化
心中有国也有家1 小时前
AtomGit Flutter 鸿蒙客户端:情绪日记的时间线实现
学习·flutter·华为·harmonyos
YHHLAI1 小时前
[特殊字符] Agent 智能体开发实战 · 第一课:Tool Use —— 让大模型自动干活
前端·人工智能
nuIl2 小时前
我把 5 个编码 Agent 塞进了一个 npm 包
前端·agent·claude
L-影2 小时前
FastAPI 静态文件:Web 页面的“固定展柜”与“加速引擎”
前端·fastapi
NiceCloud喜云2 小时前
Anthropic 一周三连发:Cowork 多端、Fable 5 按需付费、J-space 论文的技术解读
java·服务器·网络·人工智能·ai
陪我去看海2 小时前
受够了 AI 写完代码留下一堆端口?我做了一个端口管理App!
前端·macos·vibecoding
Xuepoo2 小时前
我抛弃了 DOM,但保留了无障碍访问
前端