学习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
  1. 上级目录:…/文件名.后缀名 eg. …/…/README.md
  2. 下级目录: 文件夹名字/文件名.后缀 eg. img/baidu.png

3.相对服务器路径:/开头 表示服务器根路径(Web开发中常用)

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全网最详细IOS系统APP上架教程(二)

上一篇讲解了IOS系统APP上架注册苹果开发者账号需要的材料、邓白氏编码的注册等&#xff0c;本文将继续讲解后续流程。 详细步骤 三、申请苹果开发者账号 在苹果手机上安装Apple Developer 打开Apple Developer&#xff0c;用之前注册好的Apple ID登录&#xff0c;输入姓名身…

数据是形成新质生产力的优质生产要素

在数字经济背景下&#xff0c;新质生产力以科技创新推动产业创新为要义&#xff0c;以大幅提升全要素生产率为目标&#xff0c;重在加强人工智能、大数据、物联网、工业互联网等数字技术的融合应用&#xff0c;以数据开发利用为引擎促使生产要素实现创新性配置&#xff0c;催生…

vite创建的项目使用rem适配

下面以创建vue3.0 项目为例&#xff1a; npm init vitelatest “名称” 选择vue &#xff08;选择你所对应的语言&#xff09; 更具提示步骤执行 cd xxx npm i npm run dev 然后再项目中使用 rem 需要安装插件 第一步安装插件 npm i amfe-flexible npm i postcss-pxtorem 第二…

没有公网ip,如何实现外网访问内网?

目前拨号上网是最广泛的上网方式&#xff0c;这种方式优点是价格便宜&#xff0c;缺点是没有固定公网ip&#xff0c;每次重新您拨号ip地址都会变。如果有一台服务器&#xff0c;需要实现外网访问&#xff0c;在没有固定公网ip的环境下&#xff0c;该如何实现呢&#xff1f;使用…

【JavaSE】/*初识Java*/

目录 一、了解 Java 语言 二、Java 语言的重要性 2.1 使用程度 2.2 工作领域 三、Java 语言的特性 四、Java 的基础语法 五、可能遇到的错误 六、第一个 java 程序代码解析 七、Java 注释 八、Java 标识符 九、Java 关键字 一、了解 Java 语言 Java 是由 Sun Micr…

LeetCode题练习与总结:反转链表Ⅱ--92

一、题目描述 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#…

Java入门基础学习笔记15——强制类型转换

大范围类型的变量是否可以赋值给小范围类型的变量呢&#xff1f; IDEA直接报错。直接报错&#xff0c;是提醒你有问题。但是我非常进行类型转换。 非要强行赋值呢&#xff1f; 强制类型转换&#xff0c;强行将类型范围大的变量&#xff0c;数据赋值给类型范围小的变量。 数据…

简单的Python HTML 输出

1、问题背景 一名初学者在尝试将 Python 脚本输出到网页上时遇到了一些问题。他当前使用 Python 和 HTML 进行开发&#xff0c;并且遇到了以下问题&#xff1a; 担心自己的代码过于复杂&#xff0c;尤其是 WebOutput() 函数。希望通过 JavaScript 使用 HTML 模板文件更新数据。…

前端开发指导

前端开发指导 本文介绍了配置前端开发环境需要的软件、配置项等,指导如何开始进行UDM部门前端开发的全流程。本文以Windows系统下在Microsoft Virtual Studio Code中开发为基础。 一、综述 目标:零基础或者新员工依照此文档,能够完成开发环境的搭建及熟悉测试环境的搭建。…

【数据结构】顺序表(一)

✨✨✨专栏&#xff1a;数据结构 &#x1f9d1;‍&#x1f393;个人主页&#xff1a;SWsunlight 不怕别人看不起&#xff0c;就怕自己不争气。路是人走出来的&#xff0c;关键要靠自己闯。振作起来&#xff0c;生活的含义就是前进。 目录 一、顺序表的概念&#xff1a; 二…

基于Laravel 10 + Vue(scui) + MySQL的快速开发的后台管理系统

​ 系统介绍 ​基于Laravel 10 Vue(scui) MySQL的快速开发的后台管理系统 版权申明 禁止将本产品用于含诈骗、赌博、色情、木马、病毒等违法违规业务使用。 代码仓库 gitee地址&#xff1a; 基础版本 内置模块 用户管理&#xff1a;用于维护管理系统的用户&#xff0c…

css案例 tab上下滚动,左右滚动

效果图&#xff1a; 完整代码&#xff1a; <template><view class"content"><view class"content-item"><view class"content-title"><h4>美食热搜</h4><ul><li>火鸡面</li><li>糖…