学习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开发中常用)
相关推荐
徐小夕4 分钟前
pxcharts-vue:一款专为 Vue3 打造的开源多维表格解决方案
前端·vue.js·github
Hilaku4 分钟前
我会如何考核一个在简历里大谈 AI 提效的高级前端?
前端·javascript·面试
青青家的小灰灰26 分钟前
React 反模式(Anti-Patterns)排查手册:从性能杀手到逻辑陷阱
前端·javascript·react.js
青青家的小灰灰26 分钟前
告别 Prop Drilling:Context API 的陷阱、Reducer 模式与原子化状态库原理
前端·javascript·react.js
叶智辽29 分钟前
【Three.js后期处理】如何让你的场景拥有电影级调色
前端·three.js
前端付豪30 分钟前
Nest 项目小实践之前端注册登陆
前端·node.js·nestjs
wuhen_n30 分钟前
Suspense:异步组件加载机制
前端·javascript·vue.js
大雨还洅下31 分钟前
前端JS: ES6新特性
前端
wuhen_n31 分钟前
Teleport:渲染到任意DOM节点
前端·javascript·vue.js
Moment32 分钟前
想要长期陪伴你的助理?先从部署一个 OpenClaw 开始 😍😍😍
前端·后端·github