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

相关推荐
易知微EasyV数据可视化几秒前
Web+游戏引擎模式:设计的跨界协同最优解 | 数字孪生实战训练营·设计篇
前端·经验分享·游戏引擎·数字孪生·空间智能
羊羊小栈6 分钟前
农业病害知识管理系统(基于前后端Web开发)
前端·人工智能·毕业设计·大作业
武子康8 分钟前
调查研究-156 Vercel 全栈应用 前端零配置极速上线:Serverless + 边缘网络 + CI/CD 全栈实战
前端·网络·ci/cd·ai·云原生·serverless·vecel
码云骑士9 分钟前
Chrome插件开发实战指南:从零到上架
前端·chrome·microsoft
kiritomzzz14 分钟前
Vue 插槽(Slot)全解析:从 Vue2 到 Vue3 核心用法与案例
前端·javascript·vue.js
喵了几个咪15 分钟前
基于 Nuxt 4 的现代 Headless CMS 前端:架构深度解析与二次开发指南
前端·架构
weixin_427771611 小时前
css加载顺序导致本地和线上样式不一致
前端·css
漂流瓶jz8 小时前
Webpack如何实现万物皆可import?loader的使用/配置/手写实践
前端·javascript·webpack
ZC跨境爬虫9 小时前
跟着 MDN 学CSS day_41:显式轨道、隐式网格与区域命名放置
前端·javascript·css·ui·交互