web 应用开发实战1（笔记）

最新推荐文章于 2023-05-17 20:57:08 发布

机场德克士双人套餐事件

最新推荐文章于 2023-05-17 20:57:08 发布

阅读量189

点赞数

文章标签： web

本文链接：https://blog.csdn.net/m0_73495603/article/details/126607323

版权

一，什么是HTML语义化？

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

好处

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

语义化标签：

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

二，清除浮动

为什么要清除浮动？

在我们的开发过程中，浮动元素是css中最常用的属性，浮动起来的元素会脱离标准流，如果我们的父级盒子没有设置高度就会造成父级盒子的高度塌陷，就会影响我们下面盒子的正常显示。

三，css垂直居中实现

方法1：通过定位，设置子元素top:0，bottom:0，margin:auto自动垂直居中；

.box{
position: relative;
}
.test{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}

方法2：通过定位，设置子元素left 、top:50%，margin-top、left:-子元素高度的一半，这里一定设置margin-top、left一定要加上“-”，让子元素向上向左再移动自身一半的高度；

.box{
position: relative;
}
.text{
position: absolute;
top:50%;
left:50%;
/*假设子元素高200px,实际数值以真实情况而定*/
margin-top:-100px;
margin-rleft:-100px;
}

方法3：通过定位，设置子元素top:50%，translate向反方向平移子元素高度的一半，让子元素向上再移动自身一半的高度；

.box{
position: relative;
}
,text{
position: absolute;
top:50%;
transform: translate(0,-50%)
}

方法4：通过flex布局，设置容器布局方式为flex布局，竖直方向的轴线（默认交叉轴）对齐方式为居中（center）

.box{
display: flex;
text-align: center;
align-items: center;
justify-content: center;
}

四，绝对定位和相对定位

绝对定位：

通过 left、right 属性来定义水平偏移量，top、bottom 属性来定义垂直偏移量

只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）,

绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素

相对定位

通过 left、right 属性来定义水平偏移量，top、bottom 属性来定义垂直偏移量

当一个元素的 position属性设置为 relative，它将使用相对定位。相对定位的元素在普通流中进行定位，它将出现在文档流中原本的位置。然而，可以通过设置水平或垂直偏移量，使它相对于原本的位置，偏移指定的距离，移动到新的位置。如果没有设置偏移，或设置的偏移量为 0，那么它仍将保持在原来的位置

五，盒子模型

在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与中的盒子又有点不同，这里的盒子是二维的。
在这里插入图片描述

盒子的组成

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

六，vue.js

Vue是构建Web界面的JavaScript库，原称为Vue.js，它可以通过简洁的API来提供高效的数据绑定和灵活的组件系统。它提供了现代Web开发中常用的高级功能，

比如：

解耦视图和数据。
可复用的组件。
数据绑定。
功能插件化。
虚拟DOM（Virtual DOM）。

七，mvvm

概念：
model-view-viewmodel
model:数据访问层（通常是vue中的JS代码,请求数据ajax，axios，）
view:视图层（结构布局外观 html css h5 c3 响应式）
viewmodel:公共属性和命令，在视图层和数据访问层之间进行通信。
viewmodel是核心，它包括DOM Listenters和Data bindlings,前者实现了页面与数据的绑定，当页面操作数据的时候DOM和Model也发生变化。Data bindlings实现了数据与页面的绑定，当数据发生变化时会自动渲染页面。
优势：
1.低耦合(JS和HTML CSS分开)
2.可重用性高
3.分层开发，便于维护

八，MVC

M（Model）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据； V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的； C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。