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…...
Debian 设定 tomcat 定时重启
目录 背景 过程记录 1、编辑sh文件,完成重启功能 2、设置sh的可执行权限 编辑 3、设置定时任务 背景 在Debian 12系统中,原本部署了两个tomcat,结果总是遇到CPU飙升到影响应用正常使用的程度,找了很久原因还是没有找到。 …...
【QT】: 初识 QWidget 控件 | QWidget 核心属性(API) | qrc 文件
🔥 目录 1. 控件概述 控件体系的发展阶段 2. QWidget 核心属性 2.1 核心属性概览2.2 用件可用(Enabled) 2.3 坐标系(Geometry) **实例 1: 控制按钮的位置**实例 2: 表白 程序 2.4 窗口标题(windowTiltle&a…...
下载文件,浏览器阻止不安全下载
背景: 在项目开发中,遇到需要下载文件的情况,文件类型可能是图片、excell表、pdf、zip等文件类型,但浏览器会阻止不安全的下载链接。 效果展示: 下载文件的两种方式: 一、根据接口的相对url,拼…...
基于javaweb的SpringBoot景区旅游管理系统设计和实现(源码+文档+部署讲解)
个人名片 🔥 源码获取 | 毕设定制| 商务合作:《个人名片》 ⛺️心若有所向往,何惧道阻且长 文章目录 个人名片运行环境技术栈适用功能说明使用说明 运行环境 Java≥8、MySQL≥5.7 1.运行环境:最好是java jdk 1.8,我们在这个平台…...
【17】Word:林楚楠-供应链❗
目录 题目 NO1.2 NO3 NO4 NO5 NO6 NO7 NO89 题目 NO1.2 另存为:文件→另存为→文档→文件名/考生文件夹F12/FnF12→文件名/考生文件夹 插入→分节符→文本框→输入文件→排版_居中对齐→间距/回车去掉文本框的边框→选中文本框→格式:形状轮廓…...
Transformer中基于惊喜的遗忘机制
在语言建模任务上,拥有 760M 参数的 Titans(MAC) 在 WikiText 上达到了 19.93 的困惑度,显著优于同等规模的 Transformer++(25.21) 和 Mamba2(22.94)。在常识推理任务上,Titans 在包括 PIQA、HellaSwag、WinoGrande 等 9 个基准测试中的平均准确率达到 52.51%,超过了现…...
从玩具到工业控制--51单片机的跨界传奇【3】
在科技的浩瀚宇宙中,51 单片机就像一颗独特的星辰,散发着神秘而迷人的光芒。对于无数电子爱好者而言,点亮 51 单片机上的第一颗 LED 灯,不仅仅是一次简单的操作,更像是开启了一扇通往新世界的大门。这小小的 LED 灯&am…...
基于机器学习的用户健康风险分类及预测分析
完整源码项目包获取→点击文章末尾名片! 背景描述 在这个日益注重健康与体能的时代,健身已成为许多人追求健康生活的重要组成部分。 本数据集包含若干健身房会员的详细信息,包括年龄、性别、体重、身高、心率、锻炼类型、身体脂肪比例等多项关…...
CF 641A.Little Artem and Grasshopper(Java实现)
题目分析 蚂蚱会在n个房间中根据既定房间规则向固定方向跳跃固定长度,试问是否能够跳出这个长度(即落点位置在0或n1) 思路分析 输入n就有n个房间,n套规则(固定方向和跳跃距离),蚂蚱到哪个房间就…...
5 分钟复刻你的声音,一键实现 GPT-Sovits 模型部署
想象一下,只需简单几步操作,就能生成逼真的语音效果,无论是为客户服务还是为游戏角色配音,都能轻松实现。GPT-Sovits 模型,其高效的语音生成能力为实现自然、流畅的语音交互提供了强有力的技术支持。本文将详细介绍如何…...
1.Spring AI 从入门到实践
Spring AI 从入门到实践 1.什么是Spring AI 2.使用Spring Boot&Spring AI快速构建AI应用程序 3.ChatClient&Chat Model简化与AI模型的交互 4.Spring AI Prompt:与大模型进行有效沟通 5.结构化输出大模型响应 6.实战:AI聊天机器人 Ben技术站关注Java技术&#x…...
第23篇 基于ARM A9处理器用汇编语言实现中断<五>
Q:怎样修改HPS Timer 0定时器产生的中断周期? A:在上一期实验的基础上,可以修改按键中断服务程序,实现红色LED上的计数值递增的速率,主程序和其余代码文件不用修改。 实现以下功能:按下KEY0…...
攻防世界 unseping
开启场景 整体来说是创建了一个case类,然后可接受post传来的ctf的值,并对其进行base64解码以及反序列化。所以我们能控制ctf变量。 先看__wakeup方法,该方法使用waf方法对$arg中的内容进行了防护,过滤掉了| & ; 空格 / cat f…...
Python编程与在线医疗平台数据挖掘与数据应用交互性研究
一、引言 1.1 研究背景与意义 在互联网技术飞速发展的当下,在线医疗平台如雨后春笋般涌现,为人们的就医方式带来了重大变革。这些平台打破了传统医疗服务在时间和空间上的限制,使患者能够更加便捷地获取医疗资源。据相关报告显示,中国基于互联网的医疗保健行业已进入新的…...
浔川 AI 翻译已修复,可正常使用
浔川 AI 翻译已修复,可正常使用 亲爱的用户们: 大家好!经过技术团队的不懈努力,浔川 AI 翻译平台已完成修复,目前各项功能均已恢复正常,可流畅使用。在此,我们向一直以来关心和支持浔川 AI 翻译…...
apidoc thinkphp likeadmin 遇到解析报错
报错: [Semantical Error] The annotation "notes" in method app\adminapi\controller\article\ArticleCateController::lists() was never imported. Did you maybe forget to add a "use" statement for this annotation? 解决办法: config/apidoc…...
第22篇 基于ARM A9处理器用汇编语言实现中断<四>
Q:怎样编写ARM A9处理器汇编语言代码配置使用按键和定时器中断? A:本次实验同样为中断模式和监督模式都设置ARM A9堆栈指针,并使能中断,此外在主程序中调用子程序CONFIG_HPS_TIMER和CONFIG_KEYS分别对HPS Timer 0&…...
重回C语言之老兵重装上阵(六)枚举
1. 什么是枚举 (enum)? 枚举(enum)是 C 语言中的一种数据类型,用于定义一组具名的整数常量。它可以使代码更加可读,帮助程序员更容易理解程序中的常量值。通过枚举,程序员可以使用有意义的名称来代替数字&…...
STL-list类
list的介绍和使用 list的介绍 list的介绍list的介绍 list是双向循环链表 list的使用 构造 list(size_t n,const value_type& val value_type())构造的list中包含n个值为val的元素list()构造空listlis(const list& x)拷贝构造函数list(inputlerator first,inputlter…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...
【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
