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

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

news 2025/7/6 7:37:24

前言：

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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/7/5 21:18:19

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/6/17 4:52:56

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/6/17 10:29:06

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/7/6 2:21:50

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/7/4 18:32:13

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2025/7/5 7:49:25

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/7/4 13:41:53

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2025/7/6 2:31:26

HTML前端开发：JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

编程新知 2025/7/6 5:42:19

深入解析光敏传感技术：嵌入式仿真平台如何重塑电子工程教学

一、光敏传感技术的物理本质与系统级实现挑战 光敏电阻作为经典的光电传感器件&#xff0c;其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时&#xff0c;价带电子受激发跃迁至导带&#xff0c;形成电子-空穴对&#xff0c;导致材料电导率显著提升。…...

编程新知 2025/7/5 15:25:25