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

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

news 2026/2/7 20:16:48

前言：

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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2026/1/21 9:06:43

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2026/1/23 12:18:20

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2026/1/28 9:04:29

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/31 14:56:22

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2026/1/27 16:41:02

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2026/1/21 12:29:04