web开发实战（一）

最新推荐文章于 2024-09-02 17:34:07 发布

blockchain beginner

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量313

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/qq_45783437/article/details/126594283

版权

重温：HTML-CSS-JavaScript

什么是HTML语义化？

作用：在用标签构建HTML页面时避免大篇幅地使用无语义的标签

好处：

有利于SEO，搜索引擎根据标签确定上下文和各个关键字的权重。
利于用户阅读，样式文件未加载时页面结构清晰。
利于屏幕阅读器解析，如盲人阅读器会根据语义渲染网页。
利于开发和维护，代码更具可读性、更易于维护。

语义化标签：

header
h1
h2
h3
nav
footer
article
section
p
ul
ol
li
blockquote
a
strong
em
q
abbr
small

清除浮动

什么是浮动溢出？

：在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出

清除浮动的五种方法

一、额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签

二、父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

三、使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题

四、使用before和after双伪元素清除浮动

五：为父元素设置高度

学习借鉴：(15条消息) 清除浮动的4种方式_star@星空的博客-CSDN博客_清除浮动

实现CSS垂直居中

通过display：flex实现

首先给父元素设置display：flex让其变成弹性盒子，然后利用弹性盒子的jusyify-content和align-items，将两个属性都设置为center即可

<style>
    .box1{
        height: 200px;
        width: 200px;
        border: 10px solid black;
        display:flex;
        justify-content: center;
            align-items: center;
        }
        .box2 {
            height: 100px;
            width: 100px;
            background-color: #bfa;
        }
    </style>
    <div class="box1">
        <div class="box2"></div>
    </div>

绝对定位和相对定位

Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位

Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。

Relative：相对定位，是相对于其原本的位置来定位的。

学习借鉴：(15条消息) Absolute（绝对定位）与relative（相对定位）的图文讲解_Lminxia的博客-CSDN博客_absolute和relative的区别

盒子模型

盒子的组成：一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

Vue.js---渐进式JavaScript框架

MVC

M(Model) 模型层 ：主要负责数据的处理和运算

V(View) 视图层：主要负责处理数据显示

C(Controller)控制层：处理用户交互，接受请求决定调用哪个模型构建去处理请求和哪个视图来显示返回数据

作用：将视图和数据模型进行分离

优点：

耦合度低，视图层和业务层分离
重用度高
生命周期成本低
可维护性高
部署快

缺点：

不适合小型项目的开发
视图与控制器间的过于紧密的连接，视图与控制器是相互分离，但却是联系紧密的部件，妨碍了他们的独立重用
降低了视图对模型数据的访问，依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。

MVVM（MVC进化版）

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版，整体和mvc差不多，最大的区别就是mvc是单向的，而mvvm是双向的，并且是自动的，也就是数据发生变化自动同步视图，视图发生变化自动同步数据，同时解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

优点：

低耦合，视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发，开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。
可测试，界面向来是比较难于测试的，而现在测试可以针对ViewModel来写
双向数据绑定，它实现了View和Model的自动同步，当Model的属性改变时，不需要手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变

CDN

什么是CDN？

CDN的全称是Content Delivery Netword，即内容分发网络。 CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

总结：采用更多的缓存服务器（CDN边缘节点），布放在用户访问相对集中的地区或网络中。当用户访问网站时，利用全局负载技术，将用户的访问指向距离最近的缓存服务器上，由缓存服务器响应用户请求，用于解决网络拥堵问题