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

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

news 文章来源：https://blog.csdn.net/l822099133/article/details/137458329 2024/10/26 2:34:41

前言：

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

Python---Numpy线性代数

1.数组和矩阵操作&#xff1a; 创建数组和矩阵&#xff1a;np.array, np.matrix 基本的数组操作&#xff1a;形状修改、大小调整、转置等 import numpy as np# 创建一个 2x3 的数组 A np.array([[1, 2, 3], [4, 5, 6]]) print("数组 A:\n", A)# 将数组 A 转换为矩阵…...

编程日记 2024/4/8 5:50:56

react+ echarts 轮播饼图

react echarts 轮播饼图 图片示例 代码 import * as echarts from echarts; import { useEffect } from react; import styles from ./styles.scss;const Student (props) > {const { dataList, title } props;// 过滤数据const visionList [{ value: 1048, name: Se…...

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

政安晨：【深度学习神经网络基础】（三）—— 激活函数

目录 线性激活函数 阶跃激活函数 S型激活函数 双曲正切激活函数 修正线性单元 Softmax激活函数 偏置扮演什么角色&#xff1f; 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: 政安晨的机器学习笔记 希望政安晨的博客能够对您有所裨…...

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

使用tomcat里的API - servlet 写动态网页

一、创建一个新的Maven空项目 首次创建maven项目的时候&#xff0c;会自动从maven网站上下载一些依赖组件&#xff08;这个过程需要保证网络稳定&#xff0c;否则后续打包一些操作会出现一些问题&#xff09; ps:校园网可能会屏蔽一些网站&#xff0c;可能会导致maven的依赖…...

编程日记 2024/4/8 5:47:53

从0到1搭建文档库——sphinx + git + read the docs

sphinx git read the docs 目录 一、sphinx 1 sphinx的安装 2 本地构建文件框架 1&#xff09;创建基本框架&#xff08;生成index.rst &#xff1b;conf.py&#xff09; conf.py默认内容 index.rst默认内容 2&#xff09;生成页面&#xff08;Windows系统下&#xf…...

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

EasyExcel 校验后导入

引入pom <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.3.3</version></dependency>触发校验类 import com.baomidou.mybatisplus.extension.api.R; import lombok.experimental…...

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

【星计划★C语言】c语言初相识：探索编程之路

&#x1f308;个人主页&#xff1a;聆风吟_ &#x1f525;系列专栏&#xff1a;星计划★C语言、Linux实践室 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. ⛳️第一个c语言程序二. ⛳️数据类型2.1 &#x1f514;数据单位2.2 &…...

编程日记 2024/4/8 5:44:50

搜维尔科技：借助 ARVR 的力量缩小现代制造业的技能差距

借助ARVR的力量缩小现代制造业的技能差距 搜维尔科技&#xff1a;Senseglove案例-扩展机器人技术及其VR应用...

编程日记 2024/4/8 5:42:48

数据结构之栈和队列

1.前言 大家好久不见&#xff0c;这段时间由于忙去了。就没有即使维护我的博客&#xff0c;先给大家赔个不是。 我们还是规矩不乱&#xff0c;先赞后看~ 今天讲的内容是数据结构中非常重要的一个部分&#xff1a;栈和队列。它在今后的学习中也会再次出现&#xff08;c&#…...

编程日记 2024/4/8 5:41:47

centos安装使用elasticsearch

1.首先可以在 Elasticsearch 官网 Download Elasticsearch | Elastic 下载安装包 2. 在指定的位置(我的是/opt/zhong/)解压安装包 tar -zxvf elasticsearch-7.12.1-linux-x86_64.tar.gz 3.启动es-这种方式启动会将日志全部打印在当前页面&#xff0c;一旦使用 ctrlc退出就会导…...

编程日记 2024/4/8 5:40:46

外国网站做任务赚钱/苏州seo报价

像下面的比较常见的 一个普通类的创建以及实例化一个对象 function Person(name){this.namename; } Person.prototype.getNamefunction(){console.log(this.name); } var person1new Person(zhangsan); console.log(person1.name);// 输出 张三但其中的new 关键字做了什么呢 1…...

编程日记 2024/10/25 21:15:33

网站上怎么做微信支付接口/seo引擎优化是什

思路1&#xff1a;在字符流中&#xff0c;我们只记录有贡献的答案&#xff0c;即hash值为1的&#xff0c;大于1的全部舍弃 代码&#xff1a; class Solution{ public://Insert one char from stringstreamqueue<char> q;unordered_map<char,int> hash;void inser…...

编程日记 2024/10/25 21:06:29

沈阳网站关键词优化/八宿县网站seo优化排名

环境准备&#xff1a;操作系统&#xff1a;CentOS 7或以上一.安装mysql1.建立Mysql账号groupadd mysqluseradd -s /sbin/nologin -g mysql -M mysql2.创建mysql软件目录并修改权限mkdir -p /usr/local/mysqlmkdir -p /data/mysqlmkdir -p /usr/local/mysql/run/chown -R root:m…...

编程日记 2024/10/25 20:27:11

静态网站跟动态的区别/深圳关键词优化怎么样

把时域转换到频域&#xff0c;能够为图像处理带来很多便捷的操作。在频谱图中直接去掉低频部分或者高频部分都会发生很多有趣的事情。在频谱图直接操作也能够简化一些在时域较为困难的操作&#xff0c;举个例子。image上面小丑图片里面的规律性条纹在时域是很难直接操作的&…...

编程日记 2024/10/25 20:20:07

零基础网站建设教程/免费的客户资源怎么找

三哥觉得&#xff0c;不管是用户价值&#xff0c;还是商业价值&#xff0c;都极大。先说用户价值。比如&#xff0c;当你在用电脑期间&#xff0c;想发或看朋友圈&#xff0c;之前只能打开手机进行操作&#xff0c;这很割裂&#xff0c;现在直接在电脑上完成了&#xff0c;很顺…...

编程日记 2024/10/25 19:51:56

专业建站提供商/孔宇seo

《庆余年》作者&#xff1a;猫腻介绍&#xff1a; 一个年轻的病人&#xff0c;因为一次毫不意外的经历&#xff0c;穿越到了一个完全不同的世界&#xff0c;成为伯爵府一个并不光彩的私生子。修行无名功诀&#xff0c;踏足京都官场&#xff0c;继承莫名其妙的商团&#…...

编程日记 2024/10/25 15:30:38