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博客