当前位置： 首页 > news >正文

JavaWeb入门——Web前端概述及HTML，CSS语言基本使用

news 2025/12/15 3:16:25

前言：

java基础已经学完，开始学习javaWeb相关的内容，整理下笔记，打好基础，daydayup!!!

Web

Web：全球广域网，也称万维网（www World Wide Web），能够通过浏览器访问的网站。

Web网站的工作流程

用户通过浏览器请求前端服务器后，前端服务器将请求转向后端服务器，后端服务器随即向数据库服务器进行请求，最后再一次把数据响应给用户。 

Web开发

Web开发就是基于浏览器的应用程序开发，根据功能不同，将分为前端Web开发，和后端Web开发。前端web开发需要掌握的知识有HTML,CSS,JavaScript,Vue,Element,Nginx等。后端Web开发需要掌握的知识有Maven,SpringBoot,MySQL等

Web前端  

浏览器浏览的网页的本质是什么

本质为编写出的代码

浏览器浏览的网页主要有哪些成分

文字，图片，音频，超链接

 前端代码如何成为用户浏览到的网页的 

通过浏览器内在共功能转化和解析；但不同厂商所生产的浏览器内核并不相同，为了使代码在不同的浏览器中打开都是同样的效果，则需要制定Web标准 

Web标准

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium,万维网联盟）负责制定。提出了一个网页由三个部分组成：网页的结构，网页的表现，网页的行为。这三个组成由三个不同的语言来负责，HTML负责页面元素及内容（网页的结构）；CSS负责元素的外观，位置等页面样式，如：颜色，大小等（网页的表现）；JavaScript负责交互效果（网页的行为）

 HTML

HTML：HyperTextMarkupLanguage的缩写，为超文本标记语言

超文本：超越了文本的限制，比普通文本更强大，除了文字信息，还可以定义图片，音频，视频等内容。

标记语言：由标签构成的语言；HTML标签是预定义的，在浏览器中运行，浏览器自动解析

 例：简单的网页编写

在记事本中编写如下代码，并设置html后缀，并在浏览器中打开，就可以得到一个网页

<html>是一个整体标签，其中包含<head>（头部）,<body>（身体）两个标签 。头部标签中可以设置<title>标签来进行抬头的声明。<body>标签中可以设置网页的内容。<h1>到<h6>为标题标签，大小依次递减。可可以声明<img>标签为网页添加图片

示例如下：

CSS

CSS：Cascading Style Sheet的缩写，层叠样式表，用于控制页面的表现

CSS的引入方式

 css引入方式有三种：

        1,行内样式；如：<h1 styles"...">..</h1>

        2,内嵌样式：如：<style>..</style>

        3,外联样式：如：xxx.css <link href="..">

 1，行内样式：通过在标签内指定styles，示例如下：

2，内嵌样式：在<style> 标签内指定样式，示例如下：

3，外联样式： 在外部创建一个css文件，并在网页编辑器中使用<link>标签进行引用，示例如下：

CSS选择器 

用来选取需要设置的元素，常用的有三种：1，元素选择器；2，id选择器；3，类选择器

1，元素选择器：

通过元素名称指定样式。如下所示：（通过元素名称进行指定）

2，id选择器：通过#指定名称，并在标签中指定该名称。如下所示

3，类选择器：通过.指定名称，并在标签中指定该名称。如下所示

 注：三个选择器的优先级为：id选择器>类选择器>元素选择器

 基础概念差不多就是这些，其他就是熟悉HTML中各个标签的使用例如<a>超链接；<video>视频；<dudio>音频文件等。整理结束，撒花！！！

相关文章：

JavaWeb入门——Web前端概述及HTML，CSS语言基本使用

前言&#xff1a; java基础已经学完&#xff0c;开始学习javaWeb相关的内容&#xff0c;整理下笔记&#xff0c;打好基础&#xff0c;daydayup!!! Web Web&#xff1a;全球广域网&#xff0c;也称万维网&#xff08;www World Wide Web&#xff09;&#xff0c;能够通过浏览器访…...

编程日记 2024/4/8 6:14:21

数据结构（3）----栈和队列

目录 一.栈 1.栈的基本概念 2.栈的基本操作 3.顺序栈的实现 •顺序栈的定义 •顺序栈的初始化 •进栈操作 •出栈操作 •读栈顶元素操作 •若使用另一种方式: 4.链栈的实现 •链栈的进栈操作 •链栈的出栈操作 •读栈顶元素 二.队列 1.队列的基本概念 2.队列的基…...

编程日记 2024/4/8 6:13:20

nestjs 全栈进阶--module

视频教程 10_模块Module1_哔哩哔哩_bilibili 1. 模块Module 在 Nest.js 中&#xff0c;Module 是框架的核心概念之一&#xff0c;用于组织和管理应用程序的不同部分&#xff0c;包括服务、控制器、中间件以及其他模块的导入。每个 Nest.js 应用程序至少有一个根模块&#xf…...

编程日记 2024/4/8 6:12:19

jupyter python paramiko 网络系统运维

概述 通过使用jupyter进行网络运维的相关测试 设备为H3C 联通性测试 import paramiko import time import getpass import re import os import datetimeusername "*****" password "*****" ip "10.32.**.**"ssh_client paramiko.SSHCli…...

编程日记 2024/4/8 6:11:17

Windows Edge浏览器兼容性问题诊断与修复策略详解

随着Microsoft Edge浏览器的持续迭代与更新&#xff0c;其性能与兼容性已得到了显著提升。然而&#xff0c;在面对互联网上纷繁复杂的网页内容时&#xff0c;仍有可能遇到兼容性问题。本文旨在探讨Edge浏览器在处理网页兼容性问题时的常见场景、原因分析及相应的解决方案&#…...

编程日记 2024/4/8 6:10:16

EXCEL学习笔记

EXCEL学习笔记 小技巧 一键批量添加后缀名词/单词 单元格格式-自定义-通用格式后面输入相应的单位&#xff0c;比如“元”。 输入10000个序号&#xff0c;先输入1&#xff0c;点击开始-填充-序列&#xff0c;选中该列&#xff0c;终止值为10000&#xff1b; 按住shift选取多个…...

编程日记 2024/4/8 6:09:14

使用预训练的bert large model实现问答系统源码（本地实现 question answer system）

pre-trained bert model 预训练好的Bert模型 本地实现问答系统 用这条命令将bert下载到本地&#xff1a; model.save_pretrained("path/to/model") 具体代码 如下链接&#xff1a; https://download.csdn.net/download/qqqweiweiqq/89092005...

编程日记 2024/4/8 6:08:13

蓝桥杯 历届真题 杨辉三角形【第十二届】【省赛】【C组】

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 思路&#xff1a; 由于我第一写没考虑到大数据的原因&#xff0c;直接判断导致只得了40分&#xff0c;下面是我的代码&#xff1a; #…...

编程日记 2024/4/8 6:07:12

商务电子邮件： 在WorkPlace中高效且安全

高效和安全的沟通是任何组织成功的核心。在我们关于电子邮件类型的系列文章的第二期中&#xff0c;我们将重点关注商业电子邮件在促进无缝交互中的关键作用。当你身处重要的工作场环境时&#xff0c;本系列的每篇文章都提供了电子邮件的不同维度的视角。 “2024年&#xff0c;全…...

编程日记 2024/4/8 6:06:12

阿里云2024年优惠券领取及使用常见问题

阿里云是阿里巴巴旗下云计算品牌&#xff0c;服务涵盖云服务器、云数据库、云存储、域名注册等全方位云服务和各行业解决方案。为了吸引用户上云&#xff0c;阿里云经常推出各种优惠活动&#xff0c;其中就包括阿里云优惠券。本文将对阿里云优惠券领取及使用常见问题进行解答&a…...

编程日记 2024/4/8 6:05:10

90天玩转Python—05—基础知识篇：Python基础知识扫盲,使用方法与注意事项

90天玩转Python系列文章目录 90天玩转Python—01—基础知识篇：C站最全Python标准库总结 90天玩转Python--02--基础知识篇：初识Python与PyCharm 90天玩转Python—03—基础知识篇：Python和PyCharm（语言特点、学习方法、工具安装） 90天玩转Python—04—基础知识篇：Pytho…...

编程日记 2024/4/8 6:04:09

常见的常见免费开源绘图工具对比 draw.io/Excalidraw/Lucidchart/yEd Graph Editor/Dia/

拓展阅读 常见免费开源绘图工具 OmniGraffle 创建精确、美观图形的工具 UML-架构图入门介绍 starUML UML 绘制工具 starUML 入门介绍 PlantUML 是绘制 uml 的一个开源项目 UML 等常见图绘制工具 绘图工具 draw.io / diagrams.net 免费在线图表编辑器 绘图工具 excalidr…...

编程日记 2024/4/8 6:02:08

项目：自主实现Boost搜索引擎

文章目录 写在前面开源仓库和项目上线其他文档说明 项目背景项目的宏观原理技术栈与环境搜索引擎原理正排索引倒排索引 去标签和数据清洗模块html文件名路径保存函数html数据解析函数文件写入函数 建立索引模块检索和读取信息建立索引建立正排索引建立倒排索引jieba工具的使用倒…...

编程日记 2024/4/8 6:00:05

麒麟系统ARM安装rabbitmq

简单记录下&#xff0c;信创服务器&#xff1a;麒麟系统&#xff0c;安装rabbitmq的踩坑记录。 本文章参考了很多大佬文章&#xff0c;我整理后提供。 一、安装基础依赖 yum -y install make gcc gcc-c kernel-devel m4 ncurses-devel openssl-devel unixODBC-devel 二、下载…...

编程日记 2024/4/8 5:59:04

MongoDB数据更新大之大与小中小

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第56篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。 数据更新中&#xff0c;往往要应对比较更新的场景。现在很多人喜欢跑步&#xff0c;规律跑步&…...

编程日记 2024/4/8 5:58:03

C语言开发实战：使用EasyX在Visual Studio 2022中创建井字棋游戏

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…...

编程日记 2024/4/8 5:57:02

Android与RN远程过程调用的原理

Android与RN远程过程调用的原理是通过通信协议进行远程过程调用。RPC(Remote Procedure Call)是分布式系统常见的一种通信方式&#xff0c;从跨进程到跨物理机已经有几十年历史。 在React Native中&#xff0c;通信机制是一个C实现的桥&#xff0c;打通了Java和JS,实现了两者的…...

编程日记 2024/4/8 5:55:01

MySQL-主从复制：概述、原理、同步数据一致性问题、搭建流程

主从复制 1. 主从复制概述 1.1 如何提升数据库并发能力 一般应用对数据库而言都是“读多写少”&#xff0c;也就说对数据库读取数据的压力比较大&#xff0c;有一个思路就是采用数据库集群的方案&#xff0c;做主从架构、进行读写分离&#xff0c;这样同样可以提升数据库的并…...

编程日记 2024/4/8 5:54:00

论文阅读《Semantic Prompt for Few-Shot Image Recognition》

论文地址&#xff1a;https://arxiv.org/pdf/2303.14123.pdf 论文代码&#xff1a;https://github.com/WentaoChen0813/SemanticPrompt 目录 1、存在的问题2、算法简介3、算法细节3.1、预训练阶段3.2、微调阶段3.3、空间交互机制3.4、通道交互机制 4、实验4.1、对比实验4.2、组…...

编程日记 2024/4/8 5:52:59

Linux初学（十七）docker

一、docker 1.1 简介 容器技术 容器其实就是虚拟机&#xff0c;每个容器可以运行不同的系统【系统以Linux为主的】 为什么要使用docker&#xff1f; docker容器之间互相隔离&#xff0c;可以提高安全性通过使用docker可以做靶场 1.2 安装配置docker 方法一&#xff1a;yum安装…...

编程日记 2024/4/8 5:51:57

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/12/12 9:53:23

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/12/12 1:01:45

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2025/12/12 20:26:10

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/10/28 23:14:00

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/12/11 3:28:30

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/12/9 1:05:05