最全一起学Java——html、css回顾,腾讯T3大牛总结

最后

既已说到spring cloud alibaba,那对于整个微服务架构,如果想要进一步地向上提升自己,到底应该掌握哪些核心技能呢?

就个人而言,对于整个微服务架构,像RPC、Dubbo、Spring Boot、Spring Cloud Alibaba、Docker、kubernetes、Spring Cloud Netflix、Service Mesh等这些都是最最核心的知识,架构师必经之路!下图,是自绘的微服务架构路线体系大纲,如果有还不知道自己该掌握些啥技术的朋友,可根据小编手绘的大纲进行一个参考。

image

如果觉得图片不够清晰,也可来找小编分享原件的xmind文档!

且除此份微服务体系大纲外,我也有整理与其每个专题核心知识点对应的最强学习笔记:

  • 出神入化——SpringCloudAlibaba.pdf

  • SpringCloud微服务架构笔记(一).pdf

  • SpringCloud微服务架构笔记(二).pdf

  • SpringCloud微服务架构笔记(三).pdf

  • SpringCloud微服务架构笔记(四).pdf

  • Dubbo框架RPC实现原理.pdf

  • Dubbo最新全面深度解读.pdf

  • Spring Boot学习教程.pdf

  • SpringBoo核心宝典.pdf

  • 第一本Docker书-完整版.pdf

  • 使用SpringCloud和Docker实战微服务.pdf

  • K8S(kubernetes)学习指南.pdf

image

另外,如果不知道从何下手开始学习呢,小编这边也有对每个微服务的核心知识点手绘了其对应的知识架构体系大纲,不过全是导出的xmind文件,全部的源文件也都在此!

image

本文已被CODING开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友,可以点击这里获取

  • html综合案例

  • css知识回顾

      • 内部样式表
  • 外部样式表

  • 背景样式

  • 文本样式

  • 字体样式

  • 选择器

    • 伪类选择器
    • 状态伪类
  • 结构伪类

  • 伪元素选择器

  • 其他选择器

    • class选择器
  • id选择器

  • 逗号选择器

  • 空格选择器

  • >选择器

  • 属性选择器

  • 选择器优先级

  • div设置

  • 居中样式

  • 定位机制

      • 浮动效果
  • 浮动引起崩塌

  • 清除浮动

  • 总结

前言


博主很久以前就学习了Html和css,也学习了Java基础,但是一直没有使用过,写过的项目也都是在使用Python。这不,最近期末结课了,时间挺多,所以准备学学Java Web。网课已经备好了,笔记也会同步分享,有一样的小伙伴一起来看看吧

本章导学


今天我们先来回顾一下网页部分的Html和css基础知识,这部分知识相信大多数小伙伴都已经学习过,博主我也一样,但是问题是学习了以后就没怎么实际的去使用过,所以很多知识都已经忘了,为了避免拖慢后续的学习进度,所以还是回顾一下相关知识。

Html知识回顾


HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。

访问菜鸟教程

常用标签
文本标签(font)

font标签

测试font标签

请添加图片描述

段落标签(p)

p标签

【测试p标签】我是一名大学生!我很喜欢计算机!我的每一天都在和代码打交道!

【测试p标签】如果你看到这段话说明你也在学习Java Web!一起加油吧!

请添加图片描述

换行标签 (br)

br标签

这个标签需要区别于上一个的段落标签,两者容易混淆。

【测试p标签】我是一名大学生!我很喜欢计算机!
我的每一天都在和代码打交道!

【测试p标签】如果你看到这段话说明你也在学习Java Web!一起加油吧!

请添加图片描述

标题标签(h1、h2…)

h标签

测试h标签
测试h标签
测试h标签
测试h标签
测试h标签
测试h标签

请添加图片描述

图片标签(img)

img标签

我爱技术部

请添加图片描述

超链接标签(a)

a标签

  • 普通a标签可以跳转页面和打开图片

点我访问百度

点我打开图片

请添加图片描述

请添加图片描述

  • a标签可以设置锚点,当页面长度足够时可以出现效果

请添加图片描述

在这里插入图片描述

列表标签(li)

li标签

  • 无序列表
    • aaa
    • aaa
    • aaa
    • aaa
    • aaa
    • aaa
    • aaa
    • 请添加图片描述

      • 有序列表
      1. aaa
      2. aaa
      3. aaa
      4. aaa
      5. aaa
      6. aaaa
      7. aaa
      8. 请添加图片描述

        表格标签(table)

        table标签

        • 一般表格
        姓名 性别 电话 小柯 男 189899 小小柯 男 199899

        请添加图片描述

        • 特殊样式表格
        个人信息表 姓名 性别 电话 小柯 男 189899 小小柯 199899 小小 女 166699 其他:
        表单标签(form)





        游泳

        爬山

        跳水

        跑步

        1999 1998 1997 1996 1995

        01 02 03 04 05

        01 02 03 04 05


        按钮一

        提交

        请输入


        请添加图片描述

        html综合案例

        针对一些特殊的情况我们可以采用表格布局,下面我们将上面的表单使用表格进行布局。

        请输入用户名: 请输入密码: 请再输入密码: 性别: 男

        兴趣爱好:

        游泳

        爬山

        跳水

        跑步

        出生年月:

        -->

        1999 1998 1997 1996 1995

        01 02 03 04 05

        01 02 03 04 05


        请添加图片描述

        css知识回顾


        css(层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

        访问菜鸟教程

        内部样式表

        内部样式表是指我们直接将css样式与html文件放在一起,这种方式一般不常用。

        我爱学习!

        我在学习Java Web!

        请添加图片描述

        外部样式表

        外部样式表是指将css样式与html分开存放,这种方法方法比较常用。

        我爱学习!

        我在学习Java Web!

        /* 这段代码展示内部样式表 */

        p {

        background-color: red;

        font-size: 30px;

        }

        body {

        background-color: yellow;

        background-image: url(./imgs/2.png);

        /* 设置如何平铺对象的 background-image 属性 */

        background-repeat: no-repeat;

        /* 设置背景图像是否固定或者随着页面的其余部分滚动 */

        background-attachment: fixed;

        /* 设置背景图像的位置位置 */

        background-position: 20px 40px;

        }

        背景样式

        我爱学习!

        我在学习Java Web!

        请添加图片描述

        文本样式

        p {

        /* 设置文本颜色 */

        color: blue;

        /* 文本方向/书写方向 */

        direction: ltr;

        /* 设置字符间距 */

        letter-spacing: 10npx;

        /* 设置行高 */

        line-height: 20npx;

        /* 设置文本对齐方式 */

        text-align: center;

        /* 文本的修饰 */

        text-decoration: line-through;

        /* 文本设置阴影 */

        text-shadow: coral;

        /* 改变字母大小写 */

        text-transform: lowercase;

        /* 首行缩进 */

        text-indent: 10npx;

        }

        请添加图片描述

        字体样式

        ul{

        /* 设置列表项目外观 */

        list-style-type: circle;

        /* 设置列表符号位置 */

        list-style-position: outside;

        /* 设置列表项目标记 */

        list-style-image: url(./imgs/3.gif);

        }

        选择器
        伪类选择器
        状态伪类

        状态发生变化的时候。

        /* 未访问的链接 */

        a:link{

        color: red;

        }

        /* 已访问的链接 */

        a:visited{

        color: #0000FF;

        }

        /* 鼠标移动到连接上(浮动 悬停) */

        a:hover{

        color: #FF7F50;

        font-size: 30px;

        }

        /* 向被激活的元素添加样式 */

        a:active{

        color: blue;

        }

        /* 选择拥有键盘输入焦点的元素 */

        /* a:focus{

        } */

        label:hover{

        color: #FF0000;

        }

        请添加图片描述

        结构伪类

        /*

        :first-child------>选择元素的第一个子元素

        :last-child------->选择某个元素的最后一个子元素

        :nth-child------->选择某个元素的一个或者多个特定子元素

        :nth-last-child------>选择某个元素的一个或者多个特定元素,

        从这个元素的最后一个子元素开始算

        :first-of-child-------->选择一个上级元素下的第一个同类子元素*/

        最后

        由于细节内容实在太多了,为了不影响文章的观赏性,只截出了一部分知识点大致的介绍一下,每个小节点里面都有更细化的内容!

        小编准备了一份Java进阶学习路线图(Xmind)以及来年金三银四必备的一份《Java面试必备指南》

        本文已被CODING开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

        需要这份系统化的资料的朋友,可以点击这里获取

        体样式

        ul{

        /* 设置列表项目外观 */

        list-style-type: circle;

        /* 设置列表符号位置 */

        list-style-position: outside;

        /* 设置列表项目标记 */

        list-style-image: url(./imgs/3.gif);

        }

        选择器
        伪类选择器
        状态伪类

        状态发生变化的时候。

        /* 未访问的链接 */

        a:link{

        color: red;

        }

        /* 已访问的链接 */

        a:visited{

        color: #0000FF;

        }

        /* 鼠标移动到连接上(浮动 悬停) */

        a:hover{

        color: #FF7F50;

        font-size: 30px;

        }

        /* 向被激活的元素添加样式 */

        a:active{

        color: blue;

        }

        /* 选择拥有键盘输入焦点的元素 */

        /* a:focus{

        } */

        label:hover{

        color: #FF0000;

        }

        请添加图片描述

        结构伪类

        /*

        :first-child------>选择元素的第一个子元素

        :last-child------->选择某个元素的最后一个子元素

        :nth-child------->选择某个元素的一个或者多个特定子元素

        :nth-last-child------>选择某个元素的一个或者多个特定元素,

        从这个元素的最后一个子元素开始算

        :first-of-child-------->选择一个上级元素下的第一个同类子元素*/

        最后

        由于细节内容实在太多了,为了不影响文章的观赏性,只截出了一部分知识点大致的介绍一下,每个小节点里面都有更细化的内容!

        [外链图片转存中…(img-ZWFvmNRk-1715591903245)]

        小编准备了一份Java进阶学习路线图(Xmind)以及来年金三银四必备的一份《Java面试必备指南》

        [外链图片转存中…(img-s1FKBn9o-1715591903246)]

        本文已被CODING开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

        需要这份系统化的资料的朋友,可以点击这里获取

      • 10
        点赞
      • 24
        收藏
        觉得还不错? 一键收藏
      • 0
        评论

      “相关推荐”对你有帮助么?

      • 非常没帮助
      • 没帮助
      • 一般
      • 有帮助
      • 非常有帮助
      提交
      评论
      添加红包

      请填写红包祝福语或标题

      红包个数最小为10个

      红包金额最低5元

      当前余额3.43前往充值 >
      需支付:10.00
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明:

      1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
      2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

      余额充值