JavaWeb 前端基础 html + CSS 快速入门

今日推荐语

指望别人的救赎，势必走向毁灭——波伏娃

日期	学习内容	打卡编号
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博客