JavaWeb 前端基础 html + CSS 快速入门 | 018
今日推荐语
指望别人的救赎,势必走向毁灭——波伏娃
日期 | 学习内容 | 打卡编号 |
---|---|---|
2025年01月17日 | JavaWeb 前端基础 html + CSS | 018 |
前言
哈喽,我是菜鸟阿康。
今天 正式进入JavaWeb 的学习,简单学习 html + CSS 这2各前端基础部分,以下是我的重点总结,希望对你有所帮助。(建议先看左侧目录,先了解文章结构)
(请忽略错误的大纲编号,我直接从笔记中粘贴过来的,就没严格纠正了,重点在内容!)
文末和主页有往期学习笔记,大家感兴趣也可以去看下。
继续加油!铁铁们!
写在开头
前端部分主要是 HTML 和 CSS ,而这两个部分对于我们后端开发来说,只需要先简单熟悉基础语法即可,和前端同学联调不至于很懵。
而这部分的学习,主要可以借助 W3school 这个教程网站进行学习,可以直接根据案例练习。座椅今天的总结比较简单,主要是我个人之前没有太掌握的一些知识。
详细的知识点,大家可以去 W3school 官网练习,链接如下:(跳转过去,别忘了回来点赞奥~)
w3school 在线教程
一、HTML
(一)概述
HTML 是用来写网页的语言,HyperText Markup Language 超文本标记语言。
- 超文本:超越文本的限制,还可以去定义音频,视频,图片....
- 标记语言:由标签构成
(二)W3C
W3C:W3C是万维网联盟,定义了网页由三部分组成
- 结构:HTML 语言,基础框架
- 表现:CSS 语言,控制界面的美观和排版
- 行为:JavaScript 语言,相当于是方法可以去做一些跳转
(三)前端学习网站
w3school 在线教程
二、CSS
(一)CSS 概述
CSS 是一门语言,用于控制网页表现。
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
(二)快速开始
- 定义方式
body {background-color: lightblue;
}
- 定义在 style 中
<style>body{background-color:lightblue;}
</style>
(三)CSS 选择器
3.1 元素选择器
元素选择器根据元素名称来选择 HTML 元素
例子:页面上的所有 <p> 元素都将居中对齐,并带有红色文本颜色
p {text-align: center;color: red;
}
3.2 id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素
id 必须是唯一的
要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id
注意:id 不能以数字开头
例子:这条 CSS 规则将应用于 id="para1" 的 HTML 元素
#para1 {text-align: center;color: red;
}
3.3 类选择器
类选择器选择有特定 class 属性的 HTML 元素
如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。
例子:所有带有 class="center" 的 HTML 元素将为红色且居中对齐
.center {text-align: center;color: red;
}
注意:定只有特定的 HTML 元素会受类的影响(元素名称.className)
p.center {text-align: center;color: red;
}
3.4 通用选择器
通用选择器(*)选择页面上的所有的 HTML 元素。
例子:CSS 规则会影响页面上的每个 HTML 元素
* {text-align: center;color: blue;
}
(四)导入CSS
4.1 外部 CSS
-
- 前提是定义一个外部样式表
- 每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用
- 注意:rel="stylesheet" 为固定格式
<link rel="stylesheet" href="my.css">
4.2 内部 CSS
-
- 如果一张 HTML 页面拥有唯一的样式,那么可以使用内部样式表
- 内部样式是在 head 部分的
<style>body {background-color: linen;}h1 {color: maroon;margin-left: 40px;}
</style>
4.3 行内 CSS
-
- 行内样式(也称内联样式)可用于为单个元素应用唯一的样式
- 如需使用行内样式,请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性
- 实例:行内样式在相关元素的 "style" 属性中定义
<h1 style="color:blue;text-align:center;">This is a heading</h1><p style="color:red;">This is a paragraph.</p>
4.4 层叠顺序
- 行内样式(在 HTML 元素中)
- 外部和内部样式表(在 head 部分)
- 浏览器默认样式
交流群
最近一些朋友咨询我说,我是怎么坚持的。
其实呢,我之前也自学过1年时间 java 但是放弃了,最后到其他行业去体验一下之后,又想回 IT 岗,但是还是出现三天打鱼两天晒网的情况,后边我尝试通过打卡的形式来督促自己,目前看来还有一定效果。
但是,更多时候我发现我自己是孤军奋战,有时候难免乏力,没有同行的人,相信也有部分朋友和我一样想学习,但是难于坚持,所以为什么不抱团取暖呢?
于是我建了个上岸鼓励群,欢迎大家互相鼓励,找到自己的学习搭子!
(QQ裙耳薇码如下,感兴趣的同学入,期待相遇~)
往期笔记【文末福利】
SQL优化的7个方向(慢查询从这里排查就好了)-CSDN博客
相关文章:
JavaWeb 前端基础 html + CSS 快速入门 | 018
今日推荐语 指望别人的救赎,势必走向毁灭——波伏娃 日期 学习内容 打卡编号2025年01月17日JavaWeb 前端基础 html CSS018 前言 哈喽,我是菜鸟阿康。 今天 正式进入JavaWeb 的学习,简单学习 html CSS 这2各前端基础部分&am…...
redis做为缓存,mysql的数据如何与redis进行同步呢?
Redis作为缓存与MySQL之间的数据同步问题,特别是涉及到双写一致性(即缓存与数据库的写操作要保持一致)时,通常有两种常见的解决方案。它们分别适用于不同的一致性要求和延迟容忍度。以下是两种常见的解决方案的详细解释࿱…...
TCP 重传演进:TCP RACK Timer 能替代 RTO 吗
本文的建议适用于想改变 TCP 行为的新协议设计,还是那句话,不要抄 TCP 做 yet another TCP。 RTO 一直是 TCP 传输过程所要尽量避免的,因为它会将状态带入 Loss 进而 Go-Back-N,这是一个昂贵的操作。But 在 Fast-Retransmit 被引…...
React Native的现状与未来:从发展到展望
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…...
替换数字
目录 题目 思路 代码 题目 给定一个字符串 s,它包含小写字母和数字字符,请编写一个函数,将字符串中的字母字符保持不变,而将每个数字字符替换为number。 例如,对于输入字符串 "a1b2c3",函数应…...
[cg] UE5 调试技巧
UE 中 rhi命令的提交是在render 线程,而graphics api 真正的执行是在rhi 线程, 今天想看下rhi的底层调用,但由于是通过task执行的,无法获取到render thread传入的地方,调试起来不太方便。 可通过开启下面的命令来调试 …...
Git相关命令
一:基础认识 1.Git 三种状态 Working Directory :本地工作目录,工作区Staging Area:添加文件,用于commit前,暂存区.git directory(Repository):本地仓库,存储commit数据࿰…...
uni-simple-router史上最全使用方法教程
在 uni-app 项目中,随着应用的复杂度增加,传统的路由管理方式可能无法满足需求,尤其是在多页面和权限控制等场景下。这时,使用像 uni-simple-router 这样的路由管理库可以简化开发流程👍,如权限控制、路由守…...
【ArcGIS微课1000例】0140:总览(鹰眼)、放大镜、查看器的用法
文章目录 一、总览工具二、放大镜工具三、查看器工具ArcGIS中提供了三种局部查看的工具: 总览(鹰眼)、放大镜、查看器,如下图所示,本文讲述这三种工具的使用方法。 一、总览工具 为了便于效果查看与比对,本实验采用全球影像数据(位于配套实验数据包中的0140.rar中),加…...
【Linux】【Vim】vim编辑器的用法
一、vim简介 Vim是一款功能强大且高度可定制的文本编辑器,广泛应用于Linux 和 Unix系统中。 它不仅继承了vi编辑器的所有特性,还增加了许多新的功能,如语法高亮、代码折叠、多级撤销等。 Vim有三种主要的工作模式: 命令模式&am…...
RabbitMQ实现延迟消息发送——实战篇
在项目中,我们经常需要使用消息队列来实现延迟任务,本篇文章就向各位介绍使用RabbitMQ如何实现延迟消息发送,由于是实战篇,所以不会讲太多理论的知识,还不太理解的可以先看看MQ的延迟消息的一个实现原理再来看这篇文章…...
《leetcode-runner》【图解】【源码】如何手搓一个debug调试器——架构
前文: 《leetcode-runner》如何手搓一个debug调试器——引言 文章目录 设计引入为什么这么设计存在难点1. 环境准备2. 调试程序 仓库地址:leetcode-runner 本文主要聚焦leetcode-runner对于debug功能的整体设计,并讲述设计原因以及存在的难点…...
G1原理—10.如何优化G1中的FGC
大纲 1.G1的FGC可以优化的点 2.一个bug导致的FGC(Kafka发送重试 subList导致List越来越大) 3.为什么G1的FGC比ParNew CMS要更严重 4.FGC的一些参数及优化思路 1.G1的FGC可以优化的点 (1)FGC的基本原理 (2)遇到FGC应该怎么处理 (3)应该如何操作来规避FGC (4)应该如何操…...
【专题一 递归】21. 合并两个有序链表
1.题目解析 2.讲解算法原理 解法:递归-> 重复的子问题 重复子问题 ->函数头的设计 合并两个有序链表--->Node dfs(l1,l2) 只关心某一个子问题在做什么事情 ->函数体的设计 比大小l1→next dfs( l1.next, l2)return l1 递归的出口 if(l1null)return l2…...
WebSocket——推送方案选型
一、前言:为何需要服务端主动推送? 在现代应用中,很多功能都依赖于“消息推送”。比如: 小红点提醒:我们经常在手机应用里看到的一个小红点提示,表示有新的消息或任务需要我们关注。新消息提醒࿱…...
Openresty 安装
1. 依赖包安装: # yum install readline-devel pcre-devel openssl-devel 2. 在系统中添加openresty的仓库: # sudo yum install yum-utils # sudo yum-config-manager --add-repo https://openresty.org/package/centos/openresty.repo …...
回归预测 | MATLAB实TCN时间卷积神经网络多输入单输出回归预测
效果一览 基本介绍 回归预测 | MATLAB实TCN时间卷积神经网络多输入单输出回归预测 …………训练集误差指标………… 1.均方差(MSE):166116.6814 2.根均方差(RMSE):407.5741 3.平均绝对误差(MAE):302.5888 4.平均相对…...
TikTok专线服务器助力品牌营销新高度
在这个信息爆炸的时代,短视频平台如雨后春笋般涌现,TikTok便是其中的佼佼者。众多品牌纷纷涌入这个平台,试图借助其强大的用户基础和传播能力来提升知名度。而在这其中,IPIPGO直播专线的出现,为品牌在TikTok上的营销提…...
flutter VoidCallBack ValueChange<T> 的函数定义
在 Flutter 中,VoidCallback 和 ValueChanged<T> 是两种常用的回调函数类型,它们通常用于处理事件或传递数据。下面是它们的详细定义及使用方式。 1. VoidCallback 函数类型 VoidCallback 是一个没有参数也没有返回值的回调函数类型。它通常用于简单的事件处理,比如…...
pyspark连接clickhouse数据库的方式(其它数据库同样适用)
目录 一、背景简记二、pyspark连接clickhouse方式记录三、结语参考学习博文 一、背景简记 实际工作中,大部分所用的数据存储地址都是在数据库中,如我司现在常用的数据库是clickhouse,相关数据的统计分析都在此上操作。如果想用pyspark连接cl…...
当父级元素设置了flex 布局 ,两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 (css 样式问题)
一、问题 遇到个样式问题,当父级元素设置了flex 布局 ,两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 (拖拽浏览器 使页面变小) 二、解决方法 .father{min-height: 600px;width: 100%;display: flex…...
软件方法论--课程笔记(整理中)
C1:概览Introduction (1)软件的4个特性 一致性(Conformity):软件必须符合严格的规格和要求,包括与其他组件的接口和环境的连接,避免因为不一致导致无法复用或开发问题。 不可见性…...
从 0 开始实现一个 SpringBoot + Vue 项目
从 0 开始实现一个 SpringBoot Vue 项目 从 0 开始实现一个 SpringBoot Vue 项目 软件和工具创建 SpringBoot 后端项目创建 MySQL 数据库配置文件实现增删改查接口 Model 层mapper 层service 层controller 层测试 实现项目功能接口 代码测试 创建 Vue 前端 安装 Node.js配置…...
怎么修复损坏的U盘?而且不用格式化的方式!
当你插入U盘时,若电脑弹出“需要格式化才能使用”提示,且无法打开或读取其中的数据,说明U盘极有可能已经损坏。除此之外,若电脑在连接U盘后显示以下信息,也可能意味着U盘出现问题,需要修复损坏的U盘&#x…...
使用redis-cli命令实现redis crud操作
项目场景: 线上环境上redis中的key影响数据展示,需要删除。但环境特殊没办法通过 redis客户端工具直连。只能使用redis-cli命令来实现。 操作步骤: 1、确定redis安装的服务器; 2、找到redis的安装目录下 ##找到redis安装目…...
Kibana 控制台中提供语义、向量和混合搜索
作者:来自 Elastic Mark_Laney 想要将常规 Elasticsearch 查询与新的 AI 搜索功能结合起来吗?那么,你不需要连接到某个第三方的大型语言模型(LLM)吗?不。你可以使用 Elastic 的 ELSER 模型来改进现有搜索&a…...
设计模式-结构型-装饰器模式
装饰器模式(Decorator Pattern)是结构型设计模式中的一种,它允许你通过将对象封装在一个新的对象中,来动态地添加新的功能,而无需改变原对象的结构。装饰器模式的核心思想是“将功能附加到对象上”,它是一种…...
CAP:Serverless + AI 让应用开发更简单
AI 已被广泛视为推动行业进步的关键力量,其在各行业的落地步伐加快。企业在构建 AI 应用开发过程中经常会面临 AI 技术门槛过高、试错周期过长、GPU 资源昂贵且弹性能力不足、缺乏配套工具、业务与模型的开发运维过于割裂、缺乏定制化能力等挑战,成为企业…...
Redis超详细入门教程(基础篇)
目录 一、什么是Redis 二、安装Redis 1、Windows系统安装 2、Linux系统安装 三、Redis通用命令 四、Redis基本命令 五、五种数据结构类型 5.1、String类型 5.2、List集合类型 5.3、Set集合类型 5.4、Hash集合类型 5.5、Zset有序集合类型 六、总结 一、什么是Redi…...
对话 TDengine 解决方案中心总经理陈肃:构建技术与市场的桥梁
TD 小T导读 他是大数据领域的杰出专家,拥有超过十项一作发明专利,是中国通信行业标准《大数据 消息中间件技术要求与测试方法》的重要编写者,并凭借数据中间件领域的突出成就荣获 2019 年“CJK OSS Award”。他是腾讯云 TVP 专家和 TGO 鲲鹏会…...
Formality:参考设计/实现设计以及顶层设计
相关阅读 Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482 Formality存在两个重要的概念:参考设计/实现设计和顶层设计,本文就将对此进行详细阐述。参考设计/实现设计是中两个重要的全局概念&am…...
通过内核模块按fd强制tcp的quickack方法
一、背景 tcp的quickack功能是为了让ack迅速回发,快速响应,减少网络通讯时延,属于一个优化项,但是tcp的quickack是有配额限制的,配置是16个quick,也就是短时间内quickack了16次以后,这个配额为…...
Wi-Fi 7、Wi-Fi 6 与 5G、4G 的全方位对比
随着无线通信技术的飞速发展,Wi-Fi 7、Wi-Fi 6,以及5G、4G 已经成为人们生活和工作中不可或缺的网络技术。无论是家庭网络、高速移动通信,还是工业物联网,这些技术都在发挥各自的作用。那么,它们之间有什么区别&#x…...
【例43.3】 转二进制
目录 描述 输入描述 输出描述 用例输入 1 用例输出 1 来源 类型 知识补充站 代码 C Python3 C 描述 请你把一个整数n转化为二进制并从低位到高位输出。 输入描述 一行,仅含一个正整数 n (1≤n≤109)。 输出描述 从低位到高位输出一个二进制数&a…...
qt vs ios开发应用环境搭建和上架商店的记录
qt 下载链接如下 https://download.qt.io/new_archive/qt/5.14/5.14.2/qt-opensource-mac-x64-5.14.2.dmg 安装选项全勾选就行,这里特别说明下qt5.14.2/qml qt5.14.2对qml支持还算成熟,但很多特性还得qt6才行,这里用qt5.14.2主要是考虑到服…...
安全测评主要标准
大家读完觉得有帮助记得关注和点赞!!! 安全测评的主要标准包括多个国际和国内的标准,这些标准为信息系统和产品的安全评估提供了基础和指导。 一、安全测评的主要标准 1.1、国际标准 可信计算机系统评估准则(TC…...
如何学习数学 | 数学家如何思考
学习数学的关键在哪里? 原创 遇见数学 不少人面对数学都会觉得高深莫测,甚至非常枯燥乏味。 只有当你真正走入它的世界,才会发现里面蕴含着无尽的智慧和美感。要想推开这座数学的大门,需要的不仅仅是背公式,或者做一…...
职场沟通与行为
职场沟通与行为 引言 在职场上,你是否曾遇到过困惑的沟通?是否对同事的行为有过疑虑?这不仅是个别现象,而是我们这个时代工作文化中的普遍问题。许多职场的摩擦,来自沟通不畅或是行为不当。那么,如何才能…...
IIO(Industrial I/O)驱动介绍
文章目录 IIO(Industrial I/O)驱动是Linux内核中用于工业I/O设备的子系统,主要用于处理传感器数据采集和转换。以下是其关键点: 功能 数据采集:从传感器读取数据。数据处理:对原始数据进行滤波、校准等操作…...
关于vite+vue3+ts项目中env.d.ts 文件详解
env.d.ts 文件是 Vite 项目中用于定义全局类型声明的 TypeScript 文件。它帮助开发者向 TypeScript提供全局的类型提示,特别是在使用一些特定于 Vite 的功能时(如 import.meta.env)。以下是详细讲解及代码示例 文章目录 **1. env.d.ts 文件的…...
32单片机综合应用案例——物联网(IoT)环境监测站(四)(内附详细代码讲解!!!)
无论你身处何种困境,都要坚持下去,因为勇气和毅力是成功的基石。不要害怕失败,因为失败并不代表终结,而是为了成长和进步。相信自己的能力,相信自己的潜力,相信自己可以克服一切困难。成功需要付出努力和坚…...
【Flink系列】6. Flink中的时间和窗口
6. Flink中的时间和窗口 在批处理统计中,我们可以等待一批数据都到齐后,统一处理。但是在实时处理统计中,我们是来一条就得处理一条,那么我们怎么统计最近一段时间内的数据呢?引入“窗口”。 所谓的“窗口”ÿ…...
代码随想录算法训练营第三十五天-动态规划-01背包(二维)
动规五部曲 dp数组的含义,注意这是一个二维数组。dp[i][j] 第一维度代表“从0到第i个物品,而且包括选或不选的情况,即这一维度代表物品编号第二维度代表代表背包容量合在一起的意思是当背包容量是j时,从0到i个物品中选择任意物品…...
快速开发:用AI构造AI —— 打造属于个人的Copilot(M-聪明AI)
作品简介: 当今快速发展的AI时代,学会使用AI的同时,也可以融入AI,来打造自己的产品,我给我这个取名M-聪明, 是基于VUE 3 Spring Boot -Redis ChatGML RxJava SSE 的AI 服务平台。然后这款工具旨在为用户…...
Elasticsearch容器启动报错:AccessDeniedException[/usr/share/elasticsearch/data/nodes];
AccessDeniedException 表明 Elasticsearch 容器无法访问或写入数据目录 /usr/share/elasticsearch/data/nodes。这是一个权限问题。 问题原因: 1、宿主机目录权限不足:映射到容器的数据目录 /data/es/data 在宿主机上可能没有足够的权限供容器访问。 …...
用公网服务器实现内网穿透
首先需要一个公网服务器 下载frp 搜索github下载到frp,服务端frps/客户端frpc。。下载的时候要注意自己本地内网机的cpu版本和服务端cpu架构 我的电脑是mac M1PRO版本 下载的是:darwinarm64 比如 服务端一般是Linux(Intel 64位CPU…...
Jmeter如何进行多服务器远程测试
🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 JMeter是Apache软件基金会的开源项目,主要来做功能和性能测试,用Java编写。 我们一般都会用JMeter在本地进行测试,但是受到单…...
前端实习第二个月小结
时间飞快,第一次实习已经过去两个多月,作一些简单的总结和分享。 注:文章整体会比较轻松,提及的经历、经验仅作参考。 一、关于实习/工作内容 1、工作内容 近期做的是管理后台方面的业务,技术栈:前端re…...
C# 并发和并行的区别--16
目录 并发和并行 一.并发 定义 特点 代码示例 代码解释 二.并行 定义 特点 在C#中的体现 代码示例 代码解释 三.并发和并行的区别 四 .如何在C#中选择并发还是并行 1.考虑任务类型 2.代码示例 3.注意事项 五.总结 并发和并行 在编程领域,并发和并行是两个密切…...
Python编程与在线医疗平台数据挖掘与数据应用交互性研究
一、引言 1.1 研究背景与意义 在互联网技术飞速发展的当下,在线医疗平台如雨后春笋般涌现,为人们的就医方式带来了重大变革。这些平台打破了传统医疗服务在时间和空间上的限制,使患者能够更加便捷地获取医疗资源。据相关报告显示,中国基于互联网的医疗保健行业已进入新的…...