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 中

(三)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" 为固定格式

4.2 内部 CSS

    • 如果一张 HTML 页面拥有唯一的样式,那么可以使用内部样式表

    • 内部样式是在 head 部分的

4.3 行内 CSS

    • 行内样式(也称内联样式)可用于为单个元素应用唯一的样式

    • 如需使用行内样式,请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性

    • 实例:行内样式在相关元素的 "style" 属性中定义

      This is a heading

      This is a paragraph.

4.4 层叠顺序

  • 行内样式(在 HTML 元素中)
  • 外部和内部样式表(在 head 部分)
  • 浏览器默认样式

交流群

最近一些朋友咨询我说,我是怎么坚持的。

其实呢,我之前也自学过1年时间 java 但是放弃了,最后到其他行业去体验一下之后,又想回 IT 岗,但是还是出现三天打鱼两天晒网的情况,后边我尝试通过打卡的形式来督促自己,目前看来还有一定效果。

但是,更多时候我发现我自己是孤军奋战,有时候难免乏力,没有同行的人,相信也有部分朋友和我一样想学习,但是难于坚持,所以为什么不抱团取暖呢?

于是我建了个上岸鼓励群,欢迎大家互相鼓励,找到自己的学习搭子!

(QQ裙耳薇码如下,感兴趣的同学入,期待相遇~)

往期笔记【文末福利】

SQL优化的7个方向(慢查询从这里排查就好了)-CSDN博客

相关推荐
子兮曰2 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰2 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万2 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝2 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋2 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁2 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95272 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大2 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师2 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学2 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端