前端基础语言HTML与CSS|青训营笔记

哆啦美玲
170 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天！

学好基础语言，才能继续之后的学习。这一次，第一阶段青训营的第一次学习任务是观看录播课程前端HTML与CSS相关内容课程。

接下来就由我给大家分享一下我的学习成果和学习心得吧~(^▽^)

前端HTML知识点

  • 前端要解决GUI人机交互问题
    前端工程师是使用web技术栈解决多端图形用户界面交互的工程师。

  • 前端技术栈
    JavaScript（行为）
    css（样式）
    html（内容）
    网络协议（http等）

  • 前端需要关注
    美观、安全、性能、功能、兼容、无障碍、用户体验

  • HTML——HyperText Markup Language
    HyperText：图片、标题、链接、表格
    Markup Language：标签（单标签、双标签

      <!-- HTML编写格式 -->
  <!DOCTYPE html><!-- 不写，浏览器会以怪异模式渲染页面-->
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>283</title>
  </head>
  <body>
      <h1>一级标题</h1>
      <p>班级内容</p>
      <input placeholder='输入数值' type='number'>
      <input  type='range'><!-- 范围-->
      <input placeholder='输入日历' type='date' min='2023-02-12'>
      <textarea>多行文字</textarea>
      <!-- 文本-->
      <blockquote>块级引用</blockquote>
      <q>标题引用</q>
      <cite>具体内容引用</cite>
      <code>代码</code>
      <pre>代码</pre>
  </body>
  </html>

    经典内容划分 image.png

  • 语义化
    HTML作用是用来表述页面内容和解构。
    语义化：HTML中元素、属性以及属性值都拥有某些含义。
    语义化好处：代码可读性、可维护性、搜索引擎优化、提升无障碍阅读。

    如何做到语义化：
          1.了解每个标签和属性的含义。
          2.思考什么标签最适合描述的内容。
          3.不使用可视化工具生成代码。

CSS知识点

  • css——Cascading Style Sheets : 用来定义页面元素样式
    设置字体(font)和颜色(RGB)、位置和大小、添加动画效果。

  • css的引用：外链、嵌入、内联

    过程 image.png

  • css选择器：类选择器、id选择器、标签选择器、属性选择器、通配选择器、伪类选择器（结构伪类、状态伪类）、组合选择器等

    组合选择器的类型 image.png

  • 调试css
    1.右键点击选择页面，选择检查
    2.使用快捷键ctrl+shift+I（windows）、Cmd+Opt+I（Mac）

  • 深入css——多个选择器优先级规则
    特异度：越特殊的选择器优先级越高，做加减乘除。

  • css的继承
    一般来说，文字相关属性可继承，盒模型相关属性不可继承。
    可以使用inherit关键词，设置不可继承的属性为可继承。
    有的不可继承的设置了初始值，使用initial关键字重置为初始值。

  • CSS 求值过程解析
    计算值（resolving阶段得到）和使用值（不能直接分析就得到的：formatting阶段）的区别。
    继承是继承父级元素的计算值。

  • CSS 布局方式及相关技术
    布局：确定位置和大小的算法
    布局相关技术：
    1.常规流（文本流）：行级（span em strong cite code）、块级(body article div main section h p ul li)、表格布局、flexBox、Grid布局。

        盒模型：垂直方向上有一个边距合并 image.png

    块级VS行级：前者独占一行，适用所有盒子模型；后者可以一行或者拆分多行。inline/block设置是否在一行

        行级排版规则
    image.png

        块级排版规则
    image.png

        块级的盒子会创建一个BFC规则
    image.png

        flexBox排版规则
    image.png

    主轴的对齐方式：justify-content，假如主轴是X轴，那么他的对齐方式就有居左left、居中center和居右end等。
    侧轴的对齐方式：align-items，假如侧轴是Y轴，那么对齐方式就有顶部top、居中center和底部bottom

        flexibility排版规则
    image.png

    记得多去查看flex相关文档哦~

        flexibility排版规则 image.png
    flex单一的排版布局方式，Grid是二维布局方式，划分了网格
    grid-area:1/1/3/3;第一行到第三行，第一列到第三列；可以在浏览器打开检查有虚线做参考哦！

    2.浮动：图片环绕内容效果
    3.绝对定位：（不会对常规流有影响）：position:absolute不会脱离文档流，而是找最近的非static进行定位；position：fixed总是相对于窗口进行定位的。

    image.png

对于零基础的同学来说，打好前端语言基础其实很重要，它是能带我们入门前端的根本。所以，我们日常要多看看一些基础标签的文档，尽量熟悉。这样，我们在进行页面渲染时不会手忙脚乱。


以上就是我全部的学习笔记啦！

如果对你有帮助的话，记得点个赞哦~(^▽^)

avatar
文章
阅读
粉丝