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

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

news 2026/5/12 10:43:46

前言：

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

手把手教你用GD32F303定时器PWM驱动LED，从寄存器配置到CubeMX生成代码

GD32F303定时器PWM开发全攻略&#xff1a;寄存器配置与图形化工具实战对比 在嵌入式开发领域&#xff0c;PWM&#xff08;脉冲宽度调制&#xff09;技术如同一位无声的指挥家&#xff0c;精准控制着LED亮度、电机转速等关键参数。对于GD32F303这款高性能ARM Cortex-M4内核微控制…...

编程新知 2026/5/12 10:06:54

ADC输入噪声原理与工程优化策略

1. ADC输入噪声的本质与测量方法1.1 输入参考噪声的物理起源ADC输入参考噪声&#xff08;Input-Referred Noise&#xff09;本质上是由半导体器件内部的随机电子运动产生的物理现象。在模数转换器的前端电路中&#xff0c;主要存在两类噪声源&#xff1a;电阻热噪声&#xff08…...

编程新知 2026/5/12 8:46:12

B站视频转文字终极指南：3分钟学会用开源工具提取视频内容

B站视频转文字终极指南&#xff1a;3分钟学会用开源工具提取视频内容 【免费下载链接】bili2text Bilibili视频转文字&#xff0c;一步到位&#xff0c;输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 还在为手动记录B站视频内容而烦恼吗&…...

编程新知 2026/5/12 8:30:35

Go语言规则同步器airulesync：自动化聚合与更新网络过滤规则

1. 项目概述&#xff1a;一个自动同步上游规则的“规则同步器”如果你和我一样&#xff0c;长期在维护自己的网络过滤规则集&#xff0c;无论是用于广告屏蔽、隐私保护还是内容过滤&#xff0c;那么你一定对“规则更新”这件事深有体会。手动去各个开源项目的主页查看更新、下载…...

编程新知 2026/5/12 7:29:02

AI文本处理利器：MCP服务器实现结构化信息提取与智能解析

1. 项目概述&#xff1a;一个为AI应用注入结构化文本处理能力的MCP服务器 最近在折腾AI应用开发&#xff0c;特别是那些需要让大语言模型&#xff08;LLM&#xff09;与外部工具和数据源打交道的场景&#xff0c;我发现一个核心痛点&#xff1a;如何高效、可靠地将非结构化的文…...

编程新知 2026/5/12 7:13:54

Cursor编辑器Markdown实时预览插件CursorMD深度解析与实战指南

1. 项目概述&#xff1a;当代码编辑器遇上Markdown预览如果你和我一样&#xff0c;日常开发的主力工具是Cursor&#xff0c;同时又经常需要撰写技术文档、项目README或者个人博客&#xff0c;那你一定体会过那种在编辑器、浏览器和笔记软件之间反复横跳的割裂感。Cursor作为一款…...

编程新知 2026/5/12 5:54:22

PS4游戏存档管理终极指南：如何使用Apollo工具轻松备份和修改游戏进度

PS4游戏存档管理终极指南&#xff1a;如何使用Apollo工具轻松备份和修改游戏进度 【免费下载链接】apollo-ps4 Apollo Save Tool (PS4) 项目地址: https://gitcode.com/gh_mirrors/ap/apollo-ps4 在PlayStation 4游戏体验中&#xff0c;游戏存档管理一直是个让玩家头疼的…...

编程新知 2026/5/12 3:56:09

Gemini自动生成PPT实战手册：从零输入到专业演示文稿，3步完成95%的幻灯片工作流

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Gemini自动生成PPT的核心原理与能力边界 Gemini 生成 PPT 的本质并非传统模板填充&#xff0c;而是基于多模态理解与结构化内容重构的端到端推理过程。其核心依赖于对用户输入&#xff08;文本、大纲、…...

编程新知 2026/5/12 2:07:20

从DataOperation接口到QuickSort实现：探究适配器模式在算法整合中的应用

1. 适配器模式&#xff1a;解决接口不兼容的桥梁 想象一下你从国外带回来一个三脚插头的电器&#xff0c;但家里的插座都是两孔的。这时候你会怎么做&#xff1f;大多数人会选择买一个转换插头。在编程世界里&#xff0c;适配器模式就是这个万能的"转换插头"。 最近我…...

编程新知 2026/5/12 2:01:00

别再只盯着密钥了！深入ESP32 eFuse，看懂flash加密背后的硬件安全逻辑

别再只盯着密钥了&#xff01;深入ESP32 eFuse&#xff0c;看懂flash加密背后的硬件安全逻辑 当你在ESP32项目中使用flash加密功能时&#xff0c;是否曾疑惑过&#xff1a;为什么简单地烧录几个eFuse位就能实现固件保护&#xff1f;那些看似神秘的DISABLE_DL_DECRYPT、FLASH_CR…...

编程新知 2026/5/12 1:52:29