方方-前端体系课程(二)

最新推荐文章于 2023-12-07 15:17:51 发布
最新推荐文章于 2023-12-07 15:17:51 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27926119/article/details/103267732
版权

文章目录

10.【HTML全解】HTML标签

10.1 视频：英语小课堂

在这里插入图片描述

10.2 视频：学习工具

  • 推荐书籍 网道 HTML 教程
    HTML的书没必要买, 练习主导
  • 不要用VSCode, 同时开多个目录
  • VSCode插件推荐
    Prettier: 更好地格式化工具
  • 代码问题如何提问
    在这里插入图片描述
  • JSBin
  • 代码沙盒

10.3 视频：HTML起手式

  • <html lang="en">
    en可以改为zh-CN（zh：中文，CN：中国，因为还有其他地区的中文）
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    防止页面缩放
  • <meta http-equiv="X-UA-Compatible" content="ie=edge">
    默认访问IE浏览器内核转为edge版本

10.4 视频：4

  • 表示文章/书的层级
    • 标题h1~h6
    • 章节section
    • 文章article
    • 段落p
    • 头部header
    • 脚部footer
    • 主要内容main
    • 旁支内容aside
    • 划分div
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>文章标题</title>
</head>

<body>
  <header>导航栏</header>
  <div>
    <main>
      <h1>文章标题</h1>
      <section>
        <h2>第一章</h2>
        <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>
        <section>
          <h2>1.1 标题</h2>
          <p>一段话111</p>
        </section>
        <section>
          <h2>1.2 标题</h2>
          <p>一段话222</p>
        </section>
      </section>
    </main>
    <aside>
      参考文献：1， 2，3
    </aside>
  </div>
  <footer>&copy;bens版权所有</footer>
</body>

</html>
  • 全局属性
    所有标签都可以有的属性
    • class
    • contenteditable
      所选的范围可编辑
      将style放到body上然后通过加入style{display:block; }可以将style显示出来，然后配合contenteditable来实现样式可编辑（只能编辑已有的样式，新建样式不起作用）。
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>文章标题</title>
</head>


<body>
  <style contenteditable>
    style{display:block; border:1px solid green}
  /* 这样写样式不方便，修改的话需要新加一个样式*/
 /*  [class="middle bordered"]{
      background:black;
      color:white;
      border:5px solid red
    } */
  .middle{
    background:black;
    color:white;
  }
  .bordered{
    border:5px solid red
  }
</style>
  <header>导航栏</header>
  <div class="middle bordered" contenteditable>
    <main>
      <h1>文章标题</h1>
      <section>
        <h2>第一章</h2>
        <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>
        <section>
          <h2>1.1 标题</h2>
          <p>一段话111</p>
        </section>
        <section>
          <h2>1.2 标题</h2>
          <p>一段话222</p>
        </section>
      </section>
    </main>
    <aside>
      参考文献：1， 2，3
    </aside>
  </div>
  <footer>&copy;bens版权所有</footer>
</body>

</html>
    • hidden
      可以通过display:block来显示出来
    • id
      不到万不得已， 千万不要用id，无论是CSS还是JS。
      在html中，因为id不报错
      id名与windos.下的关键字同名时。
      用这种形式来写JSxxx.style.border = "5px solid green";是不报错的。
      如果真的想用同名用下面这种方式：
      document.getElementById('parent').style.border = "10px solid yellow";
    • style
      这是HTML的属性，不是CSS的样式
    • tabindex
      设置该属性后，按tab键可以进行下一个带有该属性的地方
    • title
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>文章标题</title>
</head>
<style contenteditable>
  /* 这样写样式不方便，修改的话需要新加一个样式*/
 /*  [class="middle bordered"]{
      background:black;
      color:white;
      border:5px solid red
    } */
  .middle{
    background:black;
    color:white;
  }
  .bordered{
    border:5px solid red
  }
    
  header{
    display:block;
  }
  #xxx{
    border:5px solid orange;
    /* 不换行 */
    white-space:nowrap;
    /* 多余一样的省略 */
    overflow: hidden;
    /* 省略部分的处理方式 */
    text-overflow:ellipsis;
  }
</style>

<body>

  <header hidden>导航栏</header>
  <div class="middle bordered" contenteditable>
    <main>
      <h1>文章标题</h1>
      <section>
        <h2>第一章</h2>
        <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>
        <section>
          <h2>1.1 标题</h2>
          <p>一段话111</p>
        </section>
        <section>
          <h2>1.2 标题</h2>
          <p>一段话222</p>
        </section>
      </section>
    </main>
    <aside>
      参考文献：1， 2，3
    </aside>
  </div>
  <footer id="xxx" title="&copy;bens版权所有bens版权所有bens版权所有bens版权所有bens版权所有bens版权所有bens版权所有">&copy;bens版权所有bens版权所有bens版权所有bens版权所有bens版权所有bens版权所有bens版权所有</footer>
</body>

</html>

10.5 视频：5

  • 默认样式
    • 为什么有默认样式？
      因为HTML被发明的时候，CSS还没有出生。
    • 怎么看默认的样式？
      Chrome开发工具
      Elements->Styles-> user agent stylesheet
    • CSS reset
      默认样式已经不符合我们的要求
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

10.6 视频：6

  • 内容标签
    • ol + li（ordered list + list item）
    • ul + li（unordered list + list item）
    • dl + dt +dd（description list + term +data）
    • pre（preview的缩写）
      保留空格、回车和tab
    • hr
    • br（break的缩写）
    • a（anchar的缩写）
    • em（emphasis的缩写）
      语气上的强调
    • strong
      内容本身的重要性
    • code
    • q（quote缩写）
    • blockquote

11.【HTML全解】HTML重点标签

11.1 视频：1

在这里插入图片描述
打开网页的两个软件:

  • http-server
    #哪一种写法都可以(c表示缓存cache，-1表示否定)
http-server . -c-1
http-server -c-1
hs -c-1
  • parcel
    # 直接输入文件名
parcel xxx.html

a标签：
属性

  • href(hyper reference)
    网站

    • https://baidu.com
    • http://baidu.com
    • //baidu.com

    路径

    • /a/b/c以及a/b/c
      /a/b/c的第一个/表示的是浏览器打开文件的跟目录，这里不同于文件的/跟目录。

    • index.html 以及./index.html

    伪协议

    • javascript:代码;
      点击后不做任何反应用<a href="javascript:;">javascript</a>
      不能用<a href="#">javascript</a>页面会定向到顶部
      不能用<a href="">javascript</a>页面会刷新
    <!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
	<!-- p{$}*30 -->
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
    <p>21</p>
    <p>22</p>
    <p>23</p>
    <p>24</p>
    <p>25</p>
    <p>26</p>
    <p>27</p>
    <p>28</p>
    <p>29</p>
    <p>30</p>
    <input type="text">
    <a href="javascript:;">查看1</a>
    <a href="">查看2</a>
    <a href="#">查看3</a>
</body>

</html>
    • mailto:邮箱地址
    • tel: 手机号
        <a href="//baidu.com">百度</a>
    <a href="javascript:alert(1);">javascript</a>
    <a href="tel:13974452659">打电话</a>
    <a href="mailto:yu1piao09@163.com">发送邮箱</a>

    id

    • href=#xxx

  • target
    内置名字

    • _blank
    • _top
      在含有iframe的最外层打开
    • _parent
      在含有iframe中的上一个窗口打开
    • _self
      默认
    • xxx
      如果target的值都为xxx则打开的网页会覆盖之前打开的页面，也就是说打开一个名为xxx的新开的页面。

    程序员的命名

    • window的name
    • iframe的name

  • download

  • rel=noopener
    后面将到JS部分了讲到。

作用

  • 跳转外部页面
  • 跳转内部页面
  • 跳转到邮箱或电话等

11.2 视频：2

table表格标签：
相关标签

  • table
  • thead
  • tbody
  • tfoot
  • tr
  • td
  • th

相关样式

  • table-layout
  • border-collapse
  • border-spacing
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 600px;
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 0;
        }

        td,
        th {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <th></th>
            <th>小张</th>
            <th>小明</th>
        </thead>
        <tbody>
            <tr>
                <td>数学</td>
                <td>130</td>
                <td>144</td>
            </tr>
            <tr>
                <td>英语</td>
                <td>149</td>
                <td>133</td>
            </tr>

        </tbody>
        <tfoot>
            <tr>
                <td>总分</td>
                <td>279</td>
                <td>277</td>
            </tr>

        </tfoot>
    </table>
</body>

</html>

11.3 视频：3

img标签：
作用

  • 发出get请求，展示一张图片

属性

  • alt
  • height
    仅设置高度，宽度会自适应
    宽高不要同时设置，会是的图像变形
  • width
    仅设置宽度，高度会自适应
    宽高不要同时设置，会是的图像变形
  • src（source）

事件

  • onload
  • onerror
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <img id=xxx width="100" src="img2.jpg" alt="图片加载失败11">
    <script>
        xxx.onload = function () {
            console.log("图片加载成功");
        };
        xxx.onerror = function () {
            console.log("图片加载失败");
            xxx.src = "/404.png";
        }
    </script>
</body>

</html>

响应式

  • max-width:100%
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* 让盒子的包含border和padding的距离 */
            box-sizing: border-box;
        }

        img {
            max-width: 100%;
        }
    </style>
</head>

<body>
    <img id=xxx src="img.jpg" alt="图片加载失败11">
    <script>
        xxx.onload = function () {
            console.log("图片加载成功");
        };
        xxx.onerror = function () {
            console.log("图片加载失败");
            xxx.src = "/404.png";
        }
    </script>
</body>

</html>

可替换元素

  • 考试可能会问，被问概率30%

11.4 视频：4

form表单标签：
作用

  • 发get或post请求，然后刷新页面

属性

  • action
  • autocomplete
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form action="aaa" autocomplete="on">
        <input type="text" name="name" id="">
    </form>
</body>

</html>
  • method
  • target

事件

  • onsubmit
    form表单中必须有一个button或者是type="submit"
    button与type="submit"区别：
    button里面可以放任意的东西，例如图片等
    type="submit"只能修改文字
     <form action="aaa" autocomplete="on">
       <input type="text" name="name" id="">
       <!-- button默认的type就是submit -->
       <button type="submit"><img width="100" src="img.jpg" alt=""></button>
       <!-- <input type="submit">默认的value就是提交 -->
       <input type="submit">
   </form>

input标签：
作用

  • 让用户输入内容

属性
-color

  • file
  • textarea
  • number
<input type="color">
<br />
<input type="file" multiple>
<br />
<textarea style="resize: none; width: 50%; height: 200px;"></textarea>
<br />
<input type="number">

事件

  • onchange
  • onfocus
  • onblur

验证器

  • HTML5 新功能
<form action="">
   <input type="color">
   <br />
   <input type="file" multiple>
   <br />
   <textarea style="resize: none; width: 50%; height: 200px;"></textarea>
   <br />
   <input type="number" required>
   <button>提交</button>
</form>

注意事项

  • 一般不监听input的click事件
  • form里面的input要有name
  • form里要放一个type="submit"或button才能出发submit 时间

其他标签

  • video
  • audio
  • canvas
  • svg

注意事项

  • 这些标签的兼容性一定要看文档
  • 后续会在JS课程住啊们讲解这些标签

12.【HTML全解】HTML 实践 & 手机调试

12.1 视频：HTML实践

12.2 视频：手机调试

响应式必加的两条代码
meta:vp需要自己补充完整

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
    img {
        max-width: 100%;
    }
</style>

12.3 视频：部署到GitHub Pages

godv介绍

13. 【CSS全解】CSS基础

13.1 视频：CSS历史

  • CSS是李爵士挪威的同事赖先生(Hakon Wium Lie)首次提出的.
  • CSS的牛X之处:层叠样式表
    • 样式层叠
      可以多次对同一选择器进行样式声明
    • 选择器层叠
      可以用不同选择器对同一个元素进行样式声明
    • 文件层叠
      可以用多个文件进行层叠
    • 这些特性使得CSS极度灵活
      这也为CSS后来被吐槽留下隐患
  • CSS的版本
    • 使用最广泛的版本: CSS2.1
    • 现代版本, 分模块: CSS3
  • 查看浏览器支持的特性
    使用caniuse
  • CSS是艺术, 不要太理性了(不要问「为什么」, 而是说「原来这样子」).
    所见即所得

13.2 视频：体系化学习

学一门语言必须学会什么

  • 语法(怎么写代码)
  • 如何调试(怎么知道自己代码写错了)
  • 在哪查资料(其实就是为了抄代码)
  • 标准制定者是谁

如何学

  • Copy: 抄文档, 抄老师
  • Run: 放在自己的机器上运行
  • Modify: 加入自己一点想法,然后重新运行

在这里插入图片描述
在这里插入图片描述
如何调试代码

  • 使用W3C验证器在线 基本不用
  • 使用CSCode看颜色
  • 使用WebStorm看颜色
  • 使用开发者工具看警告

Border调试大法在这里插入图片描述
在哪查资料

  • Google搜索+MDN
  • Google搜索+CSS tricks
  • 张鑫旭的博客

练习素材

不要沉迷临摹

  • PC网站, 手机网站, UI套件每个类型临摹2个即可.

标准制定者

13.3 视频：文档流(Normal Flow)

文档流

  • 流动方向
    • inline元素从左到右,到达最右边才会换行.
      inline中的span换行处会将放不下的span的部分内容, 放到下一行
      在这里插入图片描述
    • block元素从上到下,每个都另起一行.
    • inline-block 也是从左到右.
      在这里插入图片描述
      元素部分内联元素和块级元素(HTML5后).
      **不要在display为inline元素中加入display为block的元素
  • 宽度
    • inline宽度为内部inline元素的和, 不能用width指定.
    • block默认自动计算宽度, 可用width指定.
      block块级元素的默认宽度是auto, 不是100%
      永远不要写宽度100%(容易出bug),除了特殊情况后面课会说
      在这里插入图片描述
    • inline-block结合前两者特点, 可用width.
  • 高度
    • inline高度由line-height间接确定, 跟height无关
      在这里插入图片描述
      padding可以撑高span但是,红色部分只是span的可视范围, 绿色部分才是span的实际高度
      间接的意思就是可能不是line-height设置的高度100px
      修改字体后发现变为101px
      在这里插入图片描述
      深入理解line-height可看方方老师知乎:深入理解 CSS：字体度量、line-height 和 vertical-align
    • block高度由内部文档流元素决定, 可以设height
      在这里插入图片描述
      蓝圈圈起来的脱离了文档流.
    • inline-block跟block基本一致, 可以设置height

overflow溢出
等内容的宽度或高度大于容器的,会溢出,可用overflow来设置是否显示滚动条
常用的是hidden和auto.
在这里插入图片描述
在这里插入图片描述

脱离文档流
float
position:absolute/fixed

13.4 视频：盒模型

在这里插入图片描述
content-box width = 内容宽度
border-box width = 内容宽度 + padding + border(好用)

@@@margin合并@@@

  • 哪些情况会合并
    只会上下合并
    • 父子margin合并
    • 兄弟margin合并
  • 如何阻止合并
    • 父子合并用padding/border挡住
    • 父子合并用overflow:hidden挡住
    • 父子合并用display: flex挡住
    • 兄弟合并用display:inline-block

基本长度

  • px像素(pixel)
  • em 相对于自身font-size的倍数
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rainbow</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .rainbow {
            /* border: 1px solid #000; */
            height: 200px;
            overflow: hidden;
        }

        /* @@@防止margin合并@@@ */
        .rainbow div {
            overflow: hidden;
        }

        .rainbow>div {
            background: hsl(0, 80%, 50%);
            width: 400px;
            height: 400px;
            border-radius: 50%;
        }

        .rainbow>div>div {
            background: hsl(60, 80%, 50%);
            height: 380px;
            margin: 10px;
            border-radius: 50%;
        }

        .rainbow>div>div>div {
            background: hsl(120, 80%, 50%);
            height: 360px;
            margin: 10px;
            border-radius: 50%;
        }

        .rainbow>div>div>div>div {
            background: hsl(180, 80%, 50%);
            height: 340px;
            margin: 10px;
            border-radius: 50%;
        }

        .rainbow>div>div>div>div>div {
            border: 1px solid hsl(240, 80%, 50%);
            background: hsl(240, 80%, 50%);
            height: 320px;
            margin: 10px;
            border-radius: 50%;
        }

        .rainbow>div>div>div>div>div>div {
            background: hsl(300, 80%, 50%);
            height: 300px;
            margin: 10px;
            border-radius: 50%;
        }

        .rainbow>div>div>div>div>div>div>div {
            background: hsl(330, 80%, 50%);
            height: 280px;
            margin: 10px;
            border-radius: 50%;
        }

        .rainbow>div>div>div>div>div>div>div>div {
            background: hsl(300, 80%, 100%);
            height: 260px;
            margin: 10px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="rainbow">
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

在这里插入图片描述

14. 【CSS全解】CSS布局上

14.1 视频：布局是什么

布局分类:

  • 固定宽度布局, 一般宽度为960/1000/1024px
  • 不固定宽度布局, 主要靠文档流的原理布局(文档流本来就是响应式的)
  • 响应式布局:PC上固定宽度, 手机上不固定宽度.

布局的思路:

  • 从大到小: 先定大局, 然后完善每个部分的小布局,然后晚上每个部分的小布局
  • 从小到大: 先完成小布局, 然后组合成大布局

在这里插入图片描述

14.2 视频：float布局

步骤:

  • 子元素上加float: left 和 width
  • 在父元素上加 .clearfix
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .logo {
            border: 1px solid red;
            width: 100px;
            height: 40px;
            float: left;
        }

        nav {
            border: 1px solid green;
            width: 200px;
            height: 50px;
            float: left;
        }

        header {
            border: 1px solid blue;
        }
    </style>

</head>

<body>
    <header class="clearfix">
        <div class="logo">Bens</div>
        <nav>导航</nav>
    </header>
</body>

</html>

经验1:

  • 有经验的会留一些空间或者最好一个不设width
  • 不需要做响应式, 手机上没有IE,这个布局是专门为IE准备的
  • IE6/7存在双倍margin bug,
    • 将错就错, 针对IE6/7把margin减半
      _margin:5px(原来10px)
    • 神来之笔, 再加一个display:inline-block

不同布局:

  • 用float做两栏布局(如顶部条)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .logo {
            border: 1px solid red;
            width: 100px;
            height: 40px;
            float: left;
        }

        nav {
            border: 1px solid green;
            width: 200px;
            height: 50px;
            float: left;
        }

        header {
            border: 1px solid blue;
        }

        /* 最后一个不用写宽度 */
        .user {
            border: 1px solid orange;
            height: 50px;
            max-width: 100px;
            float: left;
        }
    </style>

</head>

<body>
    <header class="clearfix">
        <div class="logo">Bens</div>
        <nav>导航</nav>
        <div class="user">我的信息</div>
    </header>
</body>

</html>

在这里插入图片描述

  • 用float做三栏布局(如内容区)
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>three</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul,
        ol {
            list-style: none;
        }

        img {
            max-width: 100%;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .logo {
            /* display: inline-block; */
            float: left;
            margin-top: 8px;
        }

        .logo>img {
            height: 26px;
            /* 图片有 border 的话图片会超出一点,通过下面方法解决*/
            /* 快捷方式:  va:t tab */
            vertical-align: middle;
        }

        .nav {
            float: left;
            margin-left: 20px;
        }

        ul>li {
            float: left;
            padding: 4px 0.5em;
            line-height: 32px;
        }


        ul {
            margin-left: 20px;
            display: inline-block;
        }

        header {
            background: grey;
            /* border: 1px solid blue; */
            color: white;
        }

        .content {
            /* 因为用的border-box, 要想aside main ad 一行则要用outline 因为用border的话占px. */
            outline: 1px solid red;
            width: 800px;

            /* 当时block元素, 然后是固定宽度则可用以下两种方式居中 */
            /* 法1: 可用这种但是可能会重叠之前写的margin-top和margin-bottom */
            /* margin: 0 auto */

            /* 法2: 直接自动居中左右, 对上下没有影响, 选第二种较好 */
            margin-left: auto;
            margin-right: auto;
        }

        .content>aside {
            border: 1px solid green;
            width: 200px;
            height: 300px;
            float: left;
            background: #999;
        }

        .content>main {
            border: 1px solid blue;
            width: 500px;
            height: 300px;
            float: left;
            background: #ccc;
        }

        .content>.ad {
            border: 1px solid orange;
            width: 100px;
            height: 300px;
            float: left;
            background: #000;
        }
    </style>
</head>

<body>
    <header class="clearfix">
        <div class="logo">
            <img src="https://static.xiedaimala.com/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab30462e739f.png"
                alt="">
        </div>
        <ul class="clearfix nav">
            <li>首页</li>
            <li>课程</li>
            <li>优惠</li>
            <li>关于</li>
        </ul>
    </header>
    <div class="clearfix content">
        <aside></aside>
        <main></main>
        <div class="ad"></div>
    </div>
</body>

</html>

在这里插入图片描述

  • 用float做四栏布局(如导航)
    <!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>four</title>
   <style>
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       ul,
       ol {
           list-style: none;
       }

       img {
           max-width: 100%;
       }

       .clearfix::after {
           content: '';
           display: block;
           clear: both;
       }

       .logo {
           /* display: inline-block; */
           float: left;
           margin-top: 8px;
       }

       .logo>img {
           height: 26px;
           /* 图片有 border 的话图片会超出一点,通过下面方法解决*/
           /* 快捷方式:  va:t tab */
           vertical-align: middle;
       }

       .nav {
           float: left;
           margin-left: 20px;
       }

       ul>li {
           float: left;
           padding: 4px 0.5em;
           line-height: 32px;
       }


       ul {
           margin-left: 20px;
           display: inline-block;
       }

       header {
           background: grey;
           /* border: 1px solid blue; */
           color: white;
       }
   </style>
</head>

<body>
   <header class="clearfix">
       <div class="logo">
           <img src="https://static.xiedaimala.com/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab30462e739f.png"
               alt="">
       </div>
       <ul class="clearfix nav">
           <li>首页</li>
           <li>课程</li>
           <li>优惠</li>
           <li>关于</li>
       </ul>
   </header>
</body>

</html>
    在这里插入图片描述
  • 用float做平均布局(如产品展示区)
    平局布局宽度和间隙需要自己手动算
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>three</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul,
        ol {
            list-style: none;
        }

        img {
            max-width: 100%;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .logo {
            /* display: inline-block; */
            float: left;
            margin-top: 8px;
        }

        .logo>img {
            height: 26px;
            /* 图片有 border 的话图片会超出一点,通过下面方法解决*/
            /* 快捷方式:  va:t tab */
            vertical-align: middle;
        }

        .nav {
            float: left;
            margin-left: 20px;
        }

        ul>li {
            float: left;
            padding: 4px 0.5em;
            line-height: 32px;
        }


        ul {
            margin-left: 20px;
            display: inline-block;
        }

        header {
            background: grey;
            /* border: 1px solid blue; */
            color: white;
        }

        .content {
            /* 因为用的border-box, 要想aside main ad 一行则要用outline 因为用border的话占px. */
            outline: 1px solid red;
            width: 800px;

            /* 当时block元素, 然后是固定宽度则可用以下两种方式居中 */
            /* 法1: 可用这种但是可能会重叠之前写的margin-top和margin-bottom */
            /* margin: 0 auto */

            /* 法2: 直接自动居中左右, 对上下没有影响, 选第二种较好 */
            margin-left: auto;
            margin-right: auto;
        }

        .content>aside {
            border: 1px solid green;
            width: 200px;
            height: 300px;
            float: left;
            background: #999;
        }

        .content>main {
            border: 1px solid blue;
            width: 500px;
            height: 300px;
            float: left;
            background: #ccc;
        }

        .content>.ad {
            border: 1px solid orange;
            width: 100px;
            height: 300px;
            float: left;
            background: #000;
        }

        .image-list {
            outline: 1px solid red;
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
        }

        .image-list>.x {
            /* 平均布局关键一步: 因为最后.image多了一个12px, 则这里就需要套一个div来margin-right:-12px */
            margin-right: -12px;
        }

        .image-list>.x>.image {
            border: 1px solid green;
            width: 191px;
            height: 191px;
            background: #000;
            float: left;
            margin-bottom: 12px;
            margin-right: 12px;
        }
    </style>
</head>

<body>
    <header class="clearfix">
        <div class="logo">
            <img src="https://static.xiedaimala.com/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab30462e739f.png"
                alt="">
        </div>
        <ul class="clearfix nav">
            <li>首页</li>
            <li>课程</li>
            <li>优惠</li>
            <li>关于</li>
        </ul>
    </header>
    <div class="clearfix content">
        <aside></aside>
        <main></main>
        <div class="ad"></div>
    </div>

    <div class="image-list">
        <div class="clearfix x">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
    </div>

</body>

</html>

在这里插入图片描述
经验2:

  • 加上头尾, 即可满足所有PC页面需求
  • floa要程序员自己计算宽度, 不灵活.

14.3 视频：flex布局上

在这里插入图片描述
flex container样式:

  • 让一个元素变成flex容器
.container{
            /* 这两种写法都可以,类似于blok和inline-block.常用第一种 */
            display: flex;
            display: inline-flex;
        }
  • 改变item流动方向(主轴, 默认为raw)
.container{
            flex-direction: row;
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;
        }

在这里插入图片描述

  • 改变折行(默认nowarp)
.container {
            flex-wrap: nowrap;
            flex-wrap: wrap;
            flex-wrap: wrap-reverse;
        }

在这里插入图片描述

  • 主轴对齐方式(默认flex-start)
.container {
            justify-content: flex-start;
            ·
            ·
            ·
        }

在这里插入图片描述

  • 次轴对齐(默认stretch)
.container {
            align-items: stretch;
            ·
            ·
            ·
        }

在这里插入图片描述

  • 多行内容(默认flex-start)
.container {
            align-content: flex-start;
            ·
            ·
            ·
        }

在这里插入图片描述
flex item属性:

  • order
        .itme {
        	/* 数值越小排在前面 */
            order: 数值;
        }

在这里插入图片描述

14.4 视频：Flex布局下

  • flex-grow
    控制自己如何长胖
    在这里插入图片描述
  • flex-shrink
    控制如何变瘦
    flex-shrink:0防止变瘦, 默认为1
  • align-self定制align-times(container中)
    container中只能整体控制item, 这个item属性就可以单独控制item了.

在这里插入图片描述
重点:

  1. display: flex
  2. flex-direction: row/column
  3. flex-wrap: warp
  4. justify-content:center/space-between
  5. align-items:center

14.5 视频：Flex小游戏

Flex青蛙游戏

14.6 视频：前端底线

flex实现局部:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flex</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul,
        ol {
            list-style: none;
        }

        img {
            max-width: 100%;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 4px;
            background: grey;
            border: 1px solid #000;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo>img {
            border: 1px solid red;
            height: 26px;
            /* 图片有 border 的话图片会超出一点,通过下面方法解决*/
            /* 快捷方式:  va:t tab */
            vertical-align: middle;
        }

        ul {
            /* 效果和justify-content: space-between;使菜单靠右 */
            /* margin-left: auto; */
            display: flex;
            border: 1px solid green;
        }

        ul>li {
            padding: 4px;
            /* border: 1px solid #000; */
        }

        .content {
            /* 因为用的border-box, 要想aside main ad 一行则要用outline 因为用border的话占px. */
            outline: 1px solid red;
            width: 800px;
            display: flex;

            /* 当时block元素, 然后是固定宽度则可用以下两种方式居中 */
            /* 法1: 可用这种但是可能会重叠之前写的margin-top和margin-bottom */
            /* margin: 0 auto */

            /* 法2: 直接自动居中左右, 对上下没有影响, 选第二种较好 */
            margin-left: auto;
            margin-right: auto;
        }

        .content>aside {
            border: 1px solid green;
            max-width: 200px;
            height: 300px;
            display: flex;
            background: #999;
        }

        .content>main {
            border: 1px solid blue;
            flex-grow: 1;
            height: 300px;
            display: flex;
            background: #ccc;
        }

        .content>.ad {
            border: 1px solid orange;
            max-width: 100px;
            height: 300px;
            display: flex;
            background: #000;
        }

        .image-list {
            outline: 1px solid red;
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
        }

        .image-list>.x {
            /* 平均布局关键一步: 因为最后.image多了一个12px, 则这里就需要套一个div来margin-right:-12px */
            display: flex;
            flex-wrap: wrap;
            margin-right: -12px;
        }

        .image-list>.x>.image {
            border: 1px solid green;
            width: 191px;
            height: 191px;
            background: #000;
            display: flex;
            margin-bottom: 12px;
            margin-right: 12px;
        }
    </style>
</head>

<body>
    <header>
        <div class="logo">
            <img src="https://static.xiedaimala.com/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab30462e739f.png"
                alt="">
        </div>
        <ul>
            <li>首页</li>
            <li>课程</li>
            <li>优惠</li>
            <li>关于</li>
        </ul>
    </header>
    <div class="content">
        <aside></aside>
        <main></main>
        <div class="ad"></div>
    </div>
    <div class="image-list">
        <div class="clearfix x">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
    </div>

</body>

</html>

在这里插入图片描述
前端戒律:必须先给设计稿

  • 没有设计稿, 自己画, 老板同意后写代码
  • 设计师只给一稿, 让你做两套
    • 直接拒绝, 坚守底线
    • 转移责任, 可以开始干.

没有设计师, 则自己画, 常用草图软件(跨平台):

  • Balasamiq(软件)
  • Figma(在线)
  • 墨刀(在线)
  • Adobe XD(软件)

如何在两套布局中切换: 媒体查询@media

15.【CSS全解】 CSS布局下

15.1 视频：Grid 简单语法

二维布局用grid, 一维布局用flex

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>grid</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            display: grid;
            grid-template-columns: 40px 50px auto 50px 40px;
            grid-template-rows: 100px 300px 100px;
            border: 1px solid red;
        }

        .a,
        .b,
        .c {
            border: 1px solid red;
        }

        .a {
            grid-column-start: 1;
            grid-column-end: 6;
        }

        .b {
            grid-column-start: 1;
            grid-column-end: 3;
        }

        .c {
            grid-column-start: 3;
            grid-column-end: 5;
        }
    </style>
</head>

<body>
    <!-- 快捷键:.a+.b+.c+.d+.e tab -->
    <div class="container">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e"></div>
    </div>
</body>

</html>

在这里插入图片描述
平均布局用free space

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>freeSpace</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            border: 1px solid red;
            width: 800px;
            grid-gap: 12px;
        }

        .image {
            border: 1px solid red;
            width: 191px;
            height: 191px;
            background: grey;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
    </div>
</body>

</html>

在这里插入图片描述
grid简单布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layoutGrid</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            min-height: 100vh;
            display: grid;
            grid-template-rows: 60px auto 60px;
            grid-template-columns: 100px auto 100px;
            grid-column-gap: 5px;
            grid-row-gap: 5px;
            grid-template-areas:
                "header header header"
                "aside main ad"
                "footer footer footer";
        }

        .container>* {
            border: 1px solid red;
        }

        .container>header {
            grid-area: header;
        }

        .container>aside {
            grid-area: aside;
        }

        .container>main {
            grid-area: main;
        }

        .container>.ad {
            grid-area: ad;
        }

        .container>footer {
            grid-area: footer;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>header</header>
        <aside>aside</aside>
        <main>main</main>
        <div class="ad">ad</div>
        <footer>footer</footer>
    </div>

</body>

</html>

在这里插入图片描述

15.2 视频：Grid 例子和游戏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>grid-demo</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .demo {
            display: inline-grid;
            border: 1px solid red;
            grid-template-rows: 240px repeat(4, 120px);
            grid-template-columns: 200px 200px;
            grid-template-areas:
                "big mid1"
                "big mid2"
                "sm1 mid2"
                "sm2 mid3"
                "sm3 mid3"
            ;
        }

        .demo>.image {
            border: 1px solid red;
        }

        .demo>.image:first-child {
            grid-area: big;
        }

        .demo>.image:nth-child(2) {
            grid-area: sm1;
        }

        .demo>.image:nth-child(3) {
            grid-area: sm2;
        }

        .demo>.image:nth-child(4) {
            grid-area: sm3;
        }

        .demo>.image:nth-child(5) {
            grid-area: mid1;
        }

        .demo>.image:nth-child(6) {
            grid-area: mid2;
        }

        .demo>.image:nth-child(7) {
            grid-area: mid3;
        }
    </style>
</head>

<body>
    <div class="demo">
        <div class="image bigImage"></div>
        <div class="image smallImage"></div>
        <div class="image smallImage"></div>
        <div class="image smallImage"></div>
        <div class="image middleImage"></div>
        <div class="image middleImage"></div>
        <div class="image middleImage"></div>
    </div>
</body>

</html>

在这里插入图片描述
grid小游戏
grid garden
26

16. 【CSS全解】CSS定位

16.1 视频：一个DIV的分层

在这里插入图片描述
在这里插入图片描述

16.2 视频：position的5个取值

opsition:

  • static默认值, 待在文档流里
  • relative 相对定位, 升起来, 但不脱离文档流
    • 使用场景:
      用于给absolute元素爸爸
    • 配合z-index:
      z-index:auto默认值, 不创建新层叠上下文
      z-index:0/1/2
      z-index:-1/-2
    • 经验:
      不要写z-index:9999
      学会管理z-index
  • absolute 绝对定位, 定位基准是祖先里的非static
    • 使用场景:
      脱离原来的位置,另起一层, 比如对话框的关闭按钮
      鼠标提示
    • 配合z-index:
    • 经验:
      需要写top和left, 否则会出bug
      善用left:100%
      善用left:50%; 加负margin
  • fiexed固定定位, 定位基准是viewport(有诈)
    • 使用场景:
      烦人的广告
      回到顶部按钮
    • 配合z-index:
    • 经验:
      手机上不要用这个属性,bug很多,可以搜搜「移动端fixed」
      有transform: scale(0.9);则会使得fixed失效
  • sticky粘滞定位, 不好描述直接举例

经验:

  • 如果你写了absolute, 一般都得补一个relative
  • 如果你写了absolute或fixed,一定要补top和left
  • sticky兼容性很差, 主要用于面试装逼

16.3 视频：层叠上下文

在这里插入图片描述
比喻:

  • 每一层上下文就是一个新的小世界(作用域)
  • 这个小世界里面的z-index跟外界无关
  • 处在同一个小世界的z-index才可以比较
    不正交属性可以创建它:
  • 记忆z-index/ flex/ opacity/ transform

负z-index只能逃出有层叠上下文的世界.

html也是层叠上下文.

17. 【CSS全解】CSS动画

17.1 视频：动画的原理

定义:

  • 由许多静止的画面(帧)
  • 以一定的速度(如每秒30张)连续播放时
  • 肉眼因视觉残象产生错觉
  • 而误以为是活动的画面

概念:

  • 帧: 每个静止的画面都叫做帧
  • 播放速度:每秒24帧(影视)或者每秒30帧以上(游戏)

横移div(一般不会用left做动画)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>define</title>
    <script>
        var n = 1
        var id = setInterval(() => {
            if (n <= 200) {
                demo.style.left = n + 'px'
                n = n + 1
            } else {
                clearInterval(id)
            }
        }, 1000 / 60)
    </script>
    <style>
        #demo {
            border: 1px solid red;
            width: 100px;
            height: 100px;
            position: relative;
            left: 0;
        }
    </style>

</head>

<body>
    <div id="demo"></div>
</body>


</html>

横移div2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>define2</title>
    <style>
        #demo {
            border: 1px solid red;
            width: 100px;
            height: 100px;
            transition: all 1s linear;
        }

        #demo.end {
            transform: translateX(200px);
        }
    </style>
    <script>
        setTimeout(() => {
            demo.classList.add('end')
        }, 3000)
    </script>
</head>

<body>
    <div id="demo">

    </div>
</body>

</html>

paint flashing:

  1. 打开开发者工具
  2. 任意界面按esc
  3. 选择rendering
  4. 最后选择rendering
  5. 勾选paint flashing
  6. 刷新页面(绿色的为重新渲染)
    在这里插入图片描述

17.2 视频：浏览器渲染原理

参考文章(Google团队写的文章):

浏览器渲染过程:

  • 根据HTML构建HTML树(DOM)
  • 根据CSS构建CSS树(CSSOM)
  • 将两棵树合并成一颗渲染书(render tree)
  • Layout布局(文档流, 盒模型, 计算大小和位置)
  • Paint绘制(把边框颜色, 文字颜色, 阴影等画出来)
  • Composite合成(根据层叠关系展示画面)

在这里插入图片描述
如何更新样式(一般我们用JS来更新样式):

  • 比如div.style.background = ‘red’
  • 比如div.style.display = ‘none’
  • 比如div.classList.add(‘red’)
  • 比如div.remove()直接删掉节点

在这里插入图片描述
三种更新方式:

  1. 全走
    div.remove()会出发当前小时,其他元素relayout
  2. 跳过layout
    改变背景颜色, 直接repaint + composite
  3. 跳过layout和paint
    改变transform, 只需要composite

所有属性触发流程:

css triggers

CSS动画优化:

  • 没什么技术含量
    Google写的文章
  • JS优化
    使用requestAnimationFrame替代setTimeout或setINterval
  • CSS优化
    使用will-change或translate

17.3 视频：transform全解

四个常用的功能:

  • 位移translate
    • 常用写法:
      translateX(<length-percentage>)
      translateY(<length-percentage>)
      translate(<length-percentage>, <length-percentage>?)
      translateZ(<length>)且父容器perspective
      translate3d(x, y, z)
    • 经验:
      要学会看懂MDN的语法实例
      translate(-50%, -50%)可以做绝对定位元素的居中
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>translate</title>
    <style>
        .wrapper {
            border: 1px solid #000;
            height: 500px;
            position: relative;
        }

        #demo {
            border: 1px solid red;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div id="demo">

        </div>
    </div>
</body>

</html>

在这里插入图片描述

  • 缩放scale
    • 常用写法:
      scaleX(<number>)
      scaleY(<number>)
      scaleX(<number>, <number>?)
    • 经验:
      用的比较少,因为容易出现模糊
  • 旋转rotate
    • 常用写法:
      rotate([ | ])
      rotateZ([ | ])
      rotateX([ | ])
      rotateY([ | ])
    • 经验:
      一般用于360度旋转制作loading
  • 倾斜skew
    • 常用写法:
      skewX([<angle>]|[<zero>])
      skewY([<angle>]|[<zero>])
      skew([<angle>]|[<zero>], [<angle>]|[<zero>]?)
    • 经验:
      用的较少

经验:

  • 一般都需要配合transition过渡
  • inline元素不支持transform, 需要选先变成block

transform多重效果
以上的4个功能可以组合使用.

17.4 视频：跳动的心

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>heart</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #heart {
            position: relative;
            margin: 100px;
            display: inline-block;
            transition: all 1s;
        }

        #heart:hover {
            transform: scale(1.5);
        }

        #heart>.round-left {
            background: red;
            border-radius: 50% 0 0 50%;
            position: absolute;
            width: 50px;
            height: 50px;
            right: 100%;
            bottom: 100%;
            transform: rotate(45deg) translateX(31px);

        }

        #heart>.round-right {
            background: red;
            border-radius: 50% 50% 0 0;
            position: absolute;
            width: 50px;
            height: 50px;
            left: 100%;
            bottom: 100%;
            transform: rotate(45deg) translateY(31px);
        }

        #heart>.square {
            background: red;
            width: 50px;
            height: 50px;
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <div id="heart">
        <div class="round-left"></div>
        <div class="round-right"></div>
        <div class="square"></div>
    </div>
</body>

</html>

17.5 视频：transition过渡

作用:

  • 补充中间帧

语法:

  • transition: 属性名 时长 过度方式 延迟
  • 可以用逗号分隔两个不同属性 transition:left 200ms, top 400ms
  • 可以用all代表所有属性 transition:all 200ms
  • 过渡方式: liner …

注意:

  • display:none=>block没法过渡, 一般改为visibility:hidden=>visible
  • backgrou可以过渡
  • opacity也可以过渡

如果还有中间点:

  • 法一:使用两次transform
    .a === transform ===? .b
    .b === transform ===? .c
    用setTimeout或者监听transitionend事件
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transition2</title>

    <style>
        #demo {
            border: 1px solid red;
            width: 100px;
            height: 100px;
            margin: 50px;
            transition: transform 1s linear;
        }

        #demo.b {
            transform: translateX(200px);
        }

        #demo.c {
            transform: translateX(200px) translateY(100px);
        }
    </style>
</head>

<body>
    <div id="demo"></div>
    <button id="x">start</button>
</body>
<script>
    x.onclick = () => {
        demo.classList.add('b')
        setTimeout(() => {
            demo.classList.add('c')
        }, 1000)
    }
</script>

</html>
  • 法二:使用animation
    声明关键帧
    添加动画

17.6 视频：animation和红心

@keyframes完整语法(标准写法):

  • 一种是from to
@keyframes slidein {
            from {
                transform: none;
            }

            to {
                transform: translateX(200px);
            }
        }
  • 一种是百分数
@keyframes move {
            0% {
                transform: none;
            }

            66.6% {
                transform: translateX(200px);
            }

            100% {
                transform: translateX(200px) translateY(100px);
            }
        }

animation缩写语法:

animation: 动画名| 时长| 过渡方式| 延迟| 次数| 方向| 填充模式| 是否暂停

  • 时长: 1s或者1000ms
  • 过渡方式:跟transition取值一样, 如liner
  • 次数: 3或者2.4或者infinite
  • 方向:reverse|alternate
  • 填充模式:forwards
  • 是否暂停: paused| running

以上所有属性都有对应的单独属性

通过@keyframes做红心

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>heart</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #heart {
            position: relative;
            margin: 100px;
            display: inline-block;
            animation: change 1s ease infinite alternate;
        }

        @keyframes change {
            0% {
                transform: scale(1.0);
            }

            0% {
                transform: scale(1.3);
            }
        }

        #heart>.round-left {
            background: red;
            border-radius: 50% 0 0 50%;
            position: absolute;
            width: 50px;
            height: 50px;
            right: 100%;
            bottom: 100%;
            transform: rotate(45deg) translateX(31px);

        }

        #heart>.round-right {
            background: red;
            border-radius: 50% 50% 0 0;
            position: absolute;
            width: 50px;
            height: 50px;
            left: 100%;
            bottom: 100%;
            transform: rotate(45deg) translateY(31px);
        }

        #heart>.square {
            background: red;
            width: 50px;
            height: 50px;
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <div id="heart">
        <div class="round-left"></div>
        <div class="round-right"></div>
        <div class="square"></div>
    </div>
</body>

</html>

18. 【HTTP全解】URL 是什么

18.1 视频：网络和IP

李爵士发明了:WWW = URL + HTTP + HTML

IP(Internet Protocol)

  1. 如何定位一台设备
  2. 如何封装数据报文, 以跟其他设备交流

在这里插入图片描述

外网IP:
重启路由可能会使得IP地址改变

内网IP:
IP格式为192.168.xxx.xxx

路由器的功能:

  • 路由器有2种IP, 内网IP和外网IP
  • 内网中的设备可以相互访问, 但是不能直接访问外网, 需要路由器中转
  • 外网中的设备可以互相访问, 但是无法访问你的内网, 需要路由器中转

18.2 视频：端口

一台机器可以提供不同服务:

  • 要提供HTTP服务最好使用80端口
  • 要提供HTTPS服务最好使用443端口
  • 要提供FTP服务最好使用21端口
  • 一共有65535个端口

端口使用规则:

  • 0-1023号端口是留给系统使用的
  • 其他端口可以给普通用户使用
  • 比如http-server默认使用8080端口
  • 一个端口被占用,只能换一个端口

IP和端口缺一不可

18.3 视频：域名, 路径, 查询参数, 锚点

域名对应的IP:
ping baidu.com

知识点:

  • 一个域名可以对应不同IP, 这种叫做负载均衡, 防止一台机器扛不住.
  • 一个IP可以对应不同域名, 这叫做共享主机

域名和IP通过DNS(Domain Name System)连接起来

当访问一个域名:

  • 你的浏览器回想电信/联通等运营商提供的DNS服务器, 询问xxx.com对应的IP
  • 电信/联通等运营商会返回给你一个IP
  • 然后浏览器会对应IP的80/443端口发送请求

服务器默认用80提供http服务
服务器默认用443提供https服务

域名:

  • com是顶级域名
  • xxx.com是二级域名(俗称一级域名)
  • www.xxx.com是三级域名(俗称二级域名)
  • github.io吧子域名xxx.github.io免费给你使用
  • 所以www.xxx.com和xxx.com可以不是同一家公司
  • www是多余的

锚点:

  • 看起来有中文, 实际不支持中文
  • 锚点不会再network面板看到, 因为锚点不会传给服务器.

在这里插入图片描述

18.4 视频：curl命令

curl命令:

  • curl -v http://baidu.com
  • curl -s -v -- https//www.baidu.com

理解一下概念:

  • url会被curl工具重写, 先请求DNS获得IP
  • 先进行TCP连接, TCP连接成功后, 开始发送HTTP请求
  • 请求内容看一眼
  • 响应内容看一眼
  • 响应结束后, 关闭TCP连接
  • 真正结束

19. 【HTTP全解】请求和响应 & Node.js Server

19.1 视频：演示Node.js Server

请求与响应模型:
在这里插入图片描述
如何发请求:

  • 用Chrome地址栏
  • 用curl命令

帮你发请求的工具交「用户代理」(User Agent)

在这里插入图片描述
代码逻辑:

  • `这种字符串`里面是可以回车的
  • '这种字符串’里面要回车只能用\n表示

19.2 视频：后缀是垃圾

注意事项:

  • URL里面的后缀没有用, /y.css不一定是CSS内容, Content-Type才是决定文件类型的关键.

19.3 视频：请求和响应的规范写法

HTTP基础概念:

  • 请求:

    • 请求动词 路径加查询参数 协议名/版本
    • Host: 域名或IP
    • Accept: text/html
    • Content-Type: 请求体的格式
    • 回车
    • 请求体(也就是上传内容)

  • 细节:

    • 三部分: 请求行, 请求头, 请求体
    • 请求动词有GET, POST, PUT, PATCH, DELETE
    • GET请求中请求体一般为空
    • 文档位于RFC2612第五章

  • 响应:

    • 协议名/版本 状态码 状态字符串
    • Content-Type: 响应体的格式
    • 回车
    • 响应体(也就是下载内容)

  • 细节:

19.4 视频：用curl构造请求

用curl构造请求:
curl -v http://localhost:8888

  • 设置请求动词:-X POST(注意大小写)
  • 设置路径和查询参数:直接在url后面加
  • 设置请求头:-H 'Name:Value' 或 --hearder 'Name:Value'
  • 设置请求体: -d '内容' 或 --data '内容'

用Node.js读取请求:

  • 读取请求动词: request.method
  • 读取路径:
    • request.url路径, 带查询参数
    • path纯路径, 不带查询参数
    • query只有查询参数
  • 读取请求头:request.headers['Accept']

用Node.js设置响应

  • 设置响应状态码:response.statusCode = 200
  • 设置响应头:response.setHeader(‘Content-Type’, ‘text/html’)
  • 设置响应体: response.write(‘内容’) 可追加内容

19.5 视频：404页面是什么

访问不到该页面, 同时也没有任何响应, Chrome会默认给你一个404页面.

19.6 视频：第一次讲console.log调试大法

<link rel="stylesheet" href="./style.css">这里的.读取的时候会被忽略点.
会导致} else if (path === './style.css') {判断出错.

if (path === '/') {
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/html;charset=utf-8')
        response.write(`
          <link rel="stylesheet" href="./style.css">
          <h1>你好</h1>
        `)
        response.end()
    } else if (path === './style.css') {
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/css;charset=utf-8')
        response.write(`h1{color: red;}`)
        response.end()
    } else {
        response.statusCode = 404
        response.end()
    }

19.7 视频：100元购买阿里云服务器

因为目前在校读研, 所以买的是学术服务器, 没有买方方老师推荐的按流量计费的.

  • 允许8888端口
    • 按下图点击加入安全组
    • 然后点击配置规则
    • 端口填写8888/8888(也可以填写一个区间:8880/8889)
    • 授权对象填写0.0.0.0/0表示任何人都可以访问
      在这里插入图片描述
  • ssh 远程登录
    • 首先通过阿里云root账户登录(远程连接VNC)
    • 找到自己电脑的公钥内容cat ~/.ssh/id_rsa.pub
    • 然后到vsoce上添加echo '公钥内容' >> ~/.ssh/authorized_keys
    • 然后复制到远程连接VNC上, 运行.
    • 最后可以在自己的电脑上ssh root@实例ip 访问了.

19.8 视频：部署Node.js代码

如何防止ssh卡住(远程服务器):

echo "Host *" >> /etc/ssh/ssh_config
echo "  ServerAliveInterval 30" >> /etc/ssh/ssh_config

创建应用账户:

  • adduser frank
  • Enter new UNIX password: 与root密码一样
  • 一直回车, 直到结束, 运行如下命令
  • mkdir /home/frank/.ssh
  • cp ~/.ssh/authorized_keys /home/frank/.ssh/
  • chmod 755 /home/frank/.ssh/authorized_keys
  • chown frank:frank /home/frank/.ssh/authorized_keys
  • 给bens添加sudo(super user do)权限adduser frank sudo
  • 然后退出, 可以运行ssh bens@实例ip

多账户示意图:
在这里插入图片描述

安装Node.js 8

curl -sL https://deb.nodesource.com/setup_8.x | sudo bash -
sudo sed -i 's/deb.nodesource.com\/node_8.x/mirrors.tuna.tsinghua.edu.cn\/nodesource\/deb_8.x/g' /etc/apt/sources.list.d/nodesource.list
sudo apt-get update
sudo apt-get install -y nodejs
node -v
npm -v
npx -v

sudo apt install git

安装git

  • sudo apt install git
  • 遇到[Y/n]输入回车, 或者y回车
  • git --version

部署应用:

  • git clone https://github.com/FrankFang/nodejs-test.git
  • cd nodejs-test
  • touch log
  • 启动命令：node server.js 8888 > log 2>&1 &
  • 把启动命令做成 start 文件
  • 添加执行权限 chmod +x ./start
  • 运行 sh ./start 得到一个进程号 pid
  • tail log 看 log 内容
  • kill -9 pid 可以关掉进程
  • killall node 可以关掉所有 node 进程

重启应用:

  • ssh bens@实例ip
  • cd nodejs-test
  • git pull
  • killall node（因为忘了进程号，实际上可以记下来）
  • sh ./start
雨y飘零久
关注
专栏目录
国产商用密码与国际密码对照
湖北杰哥的博客
10-25 5104
1、SM1是一种分组加密算法 对称加密算法中的分组加密算法，其分组长度、秘钥长度都是128bit，算法安全保密强度跟 AES 相当，但是算法不公开，仅以IP核的形式存在于芯片中，需要通过加密芯片的接口进行调用。 采用该算法已经研制了系列芯片、智能IC卡、智能密码钥匙、加密卡、加密机等安全产品，广泛应用于电子政务、电子商务及国民经济的各个应用领域(包括国家政务通、警务通等重要领域)。 2、SM2是非对称公钥加密算法 它是基于椭圆曲线密码的公钥密码算法标准，其秘钥长度256bit，包...
前端学习方向
林笙的博客
04-20 160
前端学习方向（仅供参考）：
react+vue 前端国密算法sm2、sm3 、sm4的js ts实现
柠檬草的博客
12-07 3539
SM3 算法：是一种对称加密算法，用于消息摘要和数字签名等场景。它的密钥长度为 256 位，安全性较高。SM2 算法：是一种公钥加密算法，它的密钥长度为 256 位，安全性较高。将字符串转为16进制方法，我这里是自己封装了一个，还有很多方法可以实现转16进制，大家可以自己百度学习。data是签名加密数据，例如：账号+密码+时间戳（需要跟后端开发协商）PUBLIC_KEY是后端给你的公钥，长度为130位，，这里的strToHex方法就是将密码转为16进制。pwd是是第二个参数，我们这里要求的是传密码，
vue中使用SM2加密
m0_46592414的博客
04-18 5408
vue中使用SM2加密
前端常用加密方式及使用
GTH07399的博客
02-25 1万+
前端常用加密方式有RSA加密、AES加密、MD5加密、SHA256加密以及国密： / 生成随机字符串 function randomString(len) { len = len || 16; const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/ const maxPos = $chars.length; let
方方格子-wps版.....
12-09
【方方格子-WPS版】是一款专为WPS Office设计的强大辅助插件，它集成了多种实用功能，旨在大幅提升用户在使用WPS时的工作效率。这款插件包含了丰富的工具箱，涵盖了审计辅助、图像处理以及邮件管理等多个方面，使得...
picture-book-server:方方绘本-后端( node.js + MangoDB)
05-01
简介 此为绘本电商平台开源专案的web API 前台code请 后台系统code请 技术架构 采取前后端分离架构，Restful API形式 ...前端：Vue 2.6.10 + Vue-router + Vuex + Boostrap4 + Scss 资料库: MongoDB 网站入口
Excel适应的方便工具--方方格子.zip
09-23
方方格子是一款专为Excel设计的增强型插件，旨在提供更为直观、便捷的数据处理功能，让用户在处理复杂表格时能更加得心应手，无需深入掌握复杂的Excel函数。这款工具以其强大的实用性和易用性深受用户喜爱，极大地...
(完整word)方方格子Excel工具箱-审计版-说明文档.doc
11-15
"Excel工具箱-审计版-说明文档" 本文档详细介绍了Excel工具箱-审计版的使用说明，该工具箱是财务审计行业专用的大型Excel工具箱，功能强大，基于Excel的工具箱软件，主要提供财务审计行业常用的功能。...
IOS应用源码Demo-方方引擎开源框架-毕设学习.zip
04-04
【标题解析】：“IOS应用源码Demo-方方引擎开源框架-毕设学习.zip”这个标题告诉我们，这是一个关于iOS应用程序的源代码示例，它基于名为“方方引擎”的开源框架，主要目的是为了毕业设计的学习。我们可以从这里推测...
前端Vue使用SM2加密、解密方法
qq_32586679的博客
12-03 1万+
后端会生成密钥对（公钥(publicKey),私钥(privateKey)) vue使用sm2加密 1.安装下载依赖：npm install --save sm-crypto 下载报错的话可以用淘宝镜像下载：npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver 2.sm2在vue中使用： const sm2 = require('sm-crypto').sm2 const c.
DAY3（CSS层叠样式表一）
qq_44134712的博客
04-05 237
目标 能够说出什么是CSS 能够使用CSS基础选择器 能够设置字体样式 能够设置文本样式 能够说出CSS的三种引入方式 能够使用Chrome调试工具调试样式 目录 CSS简介 CSS基础选择器 CSS字体属性 CSS文本属性 CSS的引入方式 综合案例 Chrome调试工具 1. CSS简介 CSS的主要使用场景是美化网页，布局页面的。 1.1HTML的局限性 说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如<h1>表明是...
ajax向后台发请求出现POST http://localhost:8080/XXXX/XXXXXX 404错误
热门推荐
weirdness的博客
05-06 5万+
今天用Ajaxxiang后台的controller发送请求时，出现POST http://localhost:8080/XXXX/XXXXXX 404错误 真的搞不懂啊，我觉得我的代码没有问题 可是发现根本就是没访问进去controller，试了各种方法都不行，还以为我的浏览器有什么问题，然而也不是 隐约感觉是路径问题，可是我实在找不出错，我的controller外是这样： 具体的...
第三方登录
zjworldtu的博客
05-29 2407
第三方登录——QQ 1、准备工作 先到QQ互联的网站上，申请开发者账号，到应用管理中去创建应用获取appid与appkey，以保证后续流程中可正确对网站与用户进行验证与授权。 appid：应用的唯一标识。在OAuth2.0认证过程中，appid的值即为oauth_consumer_key的值。 appkey：appid对应的密钥，访问用户资源时用来验证应用的合法性。在OAuth2.0认证过程中，appkey 的值即为oauth_consumer_secret的值。 QQ互联网址：https://connec
python之Scapy 中文文档：三、使用方法
GFS_lele的博客
03-27 2327
使用方法 译者：Larry 来源：Scapy中文使用文档 原文：Usage 协议：CC BY-NC-SA 2.5 0x01 起航Scapy Scapy的交互shell是运行在一个终端会话当中。因为需要root权限才能发送数据包，所以我们在这里使用sudo $ sudo scapy Welcome to Scapy (2.0.1-dev) >>> ...
constraint 中（PK、UK、DF、CK、FK）含义
weixin_30555515的博客
08-22 3716
--主键 constraint PK_字段 primary key(字段),--唯一约束constraint UK_字段unique key(字段),--默认约束constrint DF_字段 default('默认值') for字段,--检查约束constraint CK_字段 check(约束。如：len(字段)>1),--主外键关系constraint FK_主表_...
67.220.91.30/forum/index.php,Burp辅助插件之WooyunSearch 乌云漏洞库payload
weixin_39549312的博客
03-10 1万+
插件安装方式参考下面的页面Burp辅助插件之WooyunSearch 乌云漏洞库payloadBurp辅助插件之WooyunSearch 乌云漏洞库payload来自于一个小的想法，我们能否从一个http数据包获取一些历史漏洞来辅助？例如获得该域名的历史漏洞，获得URL相同路径的历史漏洞，以及URL各个参数的历史漏洞。于是爬了下乌云镜像，通过正则收集链接，又整理了其他各种信息，原本想存到数据库，但...
颜色HSL（色调，饱和度，亮度）
yacper的专栏
10-29 6432
面的每一个表代表一种色调。每个色调以30度间隔从色环取得。表中的X轴代表饱和度(100%, 75%, 50%, 25%, 0%)。Y轴代表亮度。50% 属于 正常。 0度   红   100%75%50%25%0%100#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFF
Centos 7 部署 OpenStack_Rocky版高可用集群3-2
MappleZF的博客
02-20 3070
Centos 7 部署 OpenStack_Rocky版高可用集群3-2 文章目录Centos 7 部署 OpenStack_Rocky版高可用集群3-28、部署glance-镜像服务8.1 配置MariaDB数据库中的glance用户和权限等8.2 创建glance api8.3 安装glance程序8.3 配置glance-api.conf程序配置文件(三个控制节点全操作cont01,cont...
CTF-四四方方一座城
最新发布
07-08
"CTF-四四方方一座城"通常是指网络安全领域的一种术语，这里的“CTF”全称是Capture The Flag，也就是“夺旗赛”，它是一种竞赛形式，参与者需要通过解决一系列的安全挑战题目，如密码学、逆向工程、漏洞利用等，来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值