WebGIS----前端（一）

大橙不会写代码

已于 2024-02-22 21:30:43 修改

阅读量682

点赞数 20

文章标签：前端

于 2024-02-22 15:36:19 首次发布

本文链接：https://blog.csdn.net/chl3518/article/details/136231023

版权

一，HTML

简介:

HTML（超文本标记语言：HyperText Markup Language）是一种用于创建网页的标记语言。它使用标签来描述文档的结构和内容，并通过嵌入式超链接（hyperlink）将不同的网页链接在一起。HTML文件可以由文本编辑器创建，并以.html或.htm为后缀保存。

HTML基本上由一系列的标签组成，这些标签被放置在尖括号中。标签通常成对出现，包括一个开标签和一个闭标签。开标签用于标识元素的开始，闭标签用于标识元素的结束。例如，<p>这是一个段落</p>表示一个段落元素。

HTML标签具有不同的作用，可以用于定义标题、段落、链接、图像、表格和其他元素。此外，还可以使用属性来提供更多的元素信息，例如指定图像的URL或定义链接的目标。

使用HTML，可以创建具有文本、图像、链接和多媒体等内容的交互式网页。通过在标签中添加CSS（层叠样式表）和JavaScript代码，可以进一步增强网页的样式和功能。

HTML是Web开发的基础，几乎所有的网页都使用HTML来构建。使用HTML，可以轻松地创建和发布自己的网站，并与其他网页进行链接，实现信息的共享和交流。

二，CSS

简介：

CSS（层叠样式表）是一种用于控制网页样式和布局的语言。它与HTML一起使用，用于描述网页的外观和样式。

CSS的基本工作原理是通过选择器选择HTML元素，并为这些元素应用样式规则。样式规则包括一个或多个属性和对应的值，用于定义元素的外观，如颜色、大小、边框等。

CSS具有以下特点：

层叠性：当多个样式规则应用于同一个元素时，它们会按照特定的规则进行层叠，最终确定元素的样式。
继承性：某些样式属性可以被父元素继承到其子元素上，从而减少重复的代码。
分离性：CSS与HTML分离，使得网页结构与样式分开，提高了代码的维护性和重用性。
可读性：CSS具有简洁的语法和易于理解的代码结构，方便开发者编写和维护样式文件。

CSS可以通过三种方式应用于HTML文档：

内联样式：通过在HTML元素中使用style属性来直接设置元素的样式。
内部样式表：在HTML文档的<head>标签中使用<style>标签来定义样式。样式定义位于<style>标签内部。
外部样式表：将CSS代码写入一个独立的CSS文件，并在HTML文档中使用<link>标签将CSS文件链接到HTML文档中。

CSS的语法结构包括选择器和声明块。选择器用于选择要应用样式的HTML元素，声明块由一个或多个属性-值对组成。

例如，以下是一个简单的CSS代码示例：

h1 {
  color: blue;
  font-size: 24px;
}

p {
  color: red;
  font-size: 16px;
}

上述代码中，选择器"h1"选择所有的<h1>元素，并将其文本颜色设置为蓝色，字体大小设置为24像素。选择器"p"选择所有的<p>元素，并将其文本颜色设置为红色，字体大小设置为16像素。

通过使用CSS，开发者可以轻松地改变网页的样式、布局和交互效果，使网页更具吸引力和可读性。

布局：

布局简介：

CSS布局是指通过使用CSS来定义和控制网页中元素的位置和大小。CSS提供了多种布局方式，可以根据需求选择适合的布局方式来实现不同的排版效果。

下面介绍几种常用的CSS布局方法：

流式布局（Flow Layout）：也称为默认布局，元素按照从左到右，从上到下的顺序进行排列。元素的宽度默认为自适应，会根据父容器的宽度调整自身的大小。可以通过设置元素的浮动、清除浮动、定位等属性来实现一些简单的布局。
弹性盒布局（Flexbox Layout）：通过使用flex容器和flex项目的属性来实现更灵活的布局。可以设置容器的方向、对齐方式、间隔等，同时也可以设置项目的大小、顺序、伸缩性等。弹性盒布局适用于一维布局，通常用于水平或垂直排列的元素。
网格布局（Grid Layout）：通过使用grid容器和grid项目的属性来实现复杂的网格布局。可以将网页划分为行和列，并对每个网格单元进行定位和调整大小。网格布局适用于二维布局，可以实现更灵活的网页结构。
定位布局（Positioned Layout）：通过使用position属性和top、bottom、left、right等属性来精确地定位元素的位置。可以使用相对定位、绝对定位、固定定位等方式来对元素进行定位。定位布局适用于需要绝对控制元素位置的情况。
响应式布局（Responsive Layout）：通过使用媒体查询和百分比布局等技术来实现适应不同屏幕尺寸和设备的布局。可以根据屏幕宽度进行自适应调整，使网页在不同设备上都能良好显示和使用。

以上是一些常见的CSS布局方法，根据具体的需求和设计要求，可以选择合适的布局方式来实现所需的页面布局效果。

盒模型：

CSS盒模型是用来描述HTML元素布局和渲染的一种模型。它将每个HTML元素视为一个矩形的盒子，包括内容区域、内边距、边框和外边距。

盒模型的五个组成部分如下：

内容区域（content）：元素的实际内容，例如文本、图像等。
内边距（padding）：内容区域与边框之间的空白区域，可以为元素增加空白间距。
边框（border）：内边距和外边距之间的边界线，可以设置边框的样式、宽度和颜色。
外边距（margin）：边框之间的空白区域，用于控制元素与其他元素之间的距离。
宽度（width）和高度（height）：盒子的宽度和高度，可以通过设置这两个属性来调整盒子的尺寸。

使用CSS盒模型，可以通过设置元素的内边距、边框和外边距的属性来调整元素的外观和布局。常用的盒模型属性有padding、border、margin、width和height。

例如，可以通过设置padding属性来增加元素的内边距：

div {
  padding: 20px;
}

这样设置后，元素的内容区域会与边框之间保留20px的空白区域。

Block Formatting Contexts的触发条件和结构应用

触发条件：

根元素（<html>）；
浮动元素（float属性值不为none）；
绝对定位元素（position属性值为absolute或fixed）；
行内块元素（display属性值为inline-block）；
表格单元格（display属性值为table-cell、table-caption、inline-table或table-row）；
表格标题（display属性值为table-caption）；
匿名表格元素（display属性值为table、inline-table、table-row、table-column-group、table-column、table-cell、或table-caption）；
overflow属性值不为visible的元素。

结构应用：当触发块格式化上下文（BFC）时，元素会按照一定的规则进行布局。BFC的规则和特性如下：

内部的盒子会在垂直方向上一个接一个地放置；
相邻的两个块级盒子的垂直间距由margin属性决定，它们的边框会发生重叠；
BFC的区域不会与浮动元素发生重叠；
BFC是一个独立的区域，内部的浮动元素不会影响外部元素的布局；
BFC会包含它的所有子元素，甚至是浮动元素；
BFC的高度会包括它的所有子元素的高度。

应用场景：

清除浮动：将包含浮动元素的容器设为BFC，以防止影响其他元素布局；
阻止外边距重叠：将元素设为BFC，可以防止相邻元素的外边距重叠；
创建自适应两列布局：使用BFC可以将两个块元素放在同一行中，且自适应宽度；
创建定位上下文：对于绝对定位元素，将其父元素设为BFC可以创建一个相对于父元素定位的上下文。

要创建BFC，可以使用以下方法：

设置元素的overflow属性值为auto、hidden、scroll或overlay；
使用display属性值为inline-block、table-cell、table-caption、flex、grid等；
将元素的position属性值设置为absolute或fixed；
根元素无需设置任何属性，它默认就是一个BFC。

float:

float是CSS中的一个属性，用于控制元素的浮动效果。它可以使元素向左或向右浮动，使其脱离文档流，并与其他元素进行交互。

浮动元素会影响其父元素的布局，使其他元素环绕在其旁边。这在创建多列布局或实现图像和文字分布在页面中的特定方式时非常有用。

float属性可以设置为以下值之一：

left：元素向左浮动。
right：元素向右浮动。
none：元素不浮动，恢复默认布局。

浮动元素的宽度会自动调整为其内容的宽度，除非设置了明确的宽度。

要清除浮动影响，可以使用clear属性，它可以设置为以下值之一：

left：要求清除左浮动。
right：要求清除右浮动。
both：要求清除左右两侧的浮动效果。
none：不清除浮动效果。

清除浮动的技术还包括使用overflow属性和伪元素:before和:after，以及使用clearfix类来清除浮动。

需要注意的是，浮动元素会脱离正常的文档流，并可能导致其他元素的重叠或布局问题。因此，在使用float属性时需要谨慎，并考虑使用其他布局技术，如flexbox或grid布局。

flex:

CSS中的flex是一种布局模型，可以方便地实现灵活的元素排列和对齐方式。

通过在父容器上设置display: flex，可以将其子元素变为flex项。然后可以使用一系列的flex属性来控制这些项的行为。

常用的flex属性有：

flex-direction：指定flex项的排列方向，可以是row（默认值，水平方向）、column（垂直方向）、row-reverse（水平方向逆序）、column-reverse（垂直方向逆序）。
flex-wrap：指定flex项是否换行，可以是nowrap（默认值，不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。
justify-content：指定flex项在主轴上的对齐方式，可以是flex-start（默认值，靠左或靠上）、flex-end（靠右或靠下）、center（居中对齐）、space-between（平均分布，首尾不留空隙）、space-around（平均分布，首尾留空隙）。
align-items：指定flex项在侧轴上的对齐方式，可以是flex-start（靠上或靠左）、flex-end（靠下或靠右）、center（居中对齐）、baseline（根据内容的基线对齐）、stretch（默认值，拉伸填充父容器高度或宽度）。
align-content：指定多行flex项的对齐方式，可以是flex-start（靠上或靠左）、flex-end（靠下或靠右）、center（居中对齐）、space-between（平均分布，首尾不留空隙）、space-around（平均分布，首尾留空隙）、stretch（默认值，拉伸填充父容器高度或宽度）。

除此之外，还可以使用flex-grow、flex-shrink和flex-basis属性来指定每个flex项的增长因子、收缩因子和基准值。

flex布局的优点是可以快速实现响应式布局，并且可以在不同的屏幕尺寸上灵活调整元素的排列方式和对齐方式。

响应式：

响应式简介：

CSS响应式设计是指通过使用CSS媒体查询和其他技术，使网站或应用能够在不同的设备上自适应，以提供最佳的用户体验。

在传统的网页设计中，通常会为不同的设备（例如桌面、平板和手机）创建不同的布局。但随着越来越多的设备类型和屏幕尺寸的出现，为每个设备创建单独的布局变得不切实际。

响应式设计通过使用媒体查询，可以根据设备的特性来应用不同的CSS样式。媒体查询是一种CSS功能，可以根据设备的宽度、高度、屏幕方向等条件，选择应用不同的CSS规则。通过设置不同的CSS属性，可以调整元素的大小、位置和样式，以适应不同的屏幕尺寸。

关键的概念是流体网格布局，即使用相对单位（如百分比）和弹性盒子布局（flexbox）等技术，使元素能够自动适应不同设备的屏幕宽度，并通过调整布局来优化内容的可读性和可用性。

另外，还可以使用其他技术来增强响应式设计，例如图像自适应、字体大小调整、动态内容加载等。

响应式设计的优点是可以提供一致的用户体验，无论用户使用的是桌面、平板还是手机等设备。它还能够减少开发和维护工作量，因为只需维护一个布局和一套样式，而不是为每个设备创建独立的布局。

总之，CSS响应式设计是一种基于媒体查询和其他技术的自适应布局方法，可以在不同设备上提供最佳的用户体验。它是现代Web设计中必不可少的一部分。

rem/em:

在CSS响应式设计中，rem和em是用来设置相对字体大小的单位。

rem（root em）是相对于根元素（通常是html标签）的字体大小来计算的。例如，如果根元素的字体大小设置为16px，那么1rem就等于16px。可以使用rem来设置整个页面的字体大小，以及其他元素的大小。

em是相对于父元素的字体大小来计算的。例如，如果父元素的字体大小设置为16px，子元素的字体大小设置为1em，那么子元素的字体大小就等于16px。em可以用来创建相对于父元素的字体大小和容器大小的布局。

相较于像素(px)这种绝对单位，rem和em更适合在响应式设计中使用。因为它们可以根据根元素或父元素的字体大小自动调整，使页面在不同设备上展示一致的比例和布局。

当使用rem单位时，只需根据设计稿确定根元素的字体大小，然后将其他元素的大小设置为rem单位，以实现响应式布局。而使用em单位时，可以根据父元素的字体大小动态设置子元素的大小，以适应不同设备上的展示。

总之，rem和em是在CSS响应式设计中用来设置相对字体大小的单位，通过相对于根元素或父元素的字体大小进行计算，以实现自适应的布局和比例。

media query:

在CSS响应式设计中，媒体查询（media query）是一种CSS功能，用于根据设备的特征和属性来应用不同的样式规则。

媒体查询可以检测设备的视口宽度、屏幕分辨率、设备方向等属性，并根据这些属性来选择性地加载和应用不同的CSS样式。

媒体查询使用媒体类型（如screen、print、speech等）和条件表达式来确定是否应用某个样式规则。条件表达式可以包含各种逻辑运算符、关键字和CSS属性。

下面是一个简单的媒体查询示例，当设备的视口宽度小于等于600px时，应用一组样式规则：

@media (max-width: 600px) {
  /* 样式规则 */
}

上述媒体查询的意思是，如果设备的视口宽度小于等于600px，那么就会应用媒体查询内部的样式规则。

使用媒体查询可以实现针对不同设备和屏幕尺寸的样式适配。例如，可以为较小的移动设备提供简化的样式规则，为大屏幕设备提供更丰富的布局和效果。

通过结合媒体查询和其他CSS属性和单位（如rem/em）可以实现更灵活和自适应的响应式布局和设计。媒体查询是响应式设计中非常重要的工具之一，使得网页能够适应不同的设备和屏幕尺寸，提供最佳的用户体验。

vh/vw:

在CSS中，vh（viewport height）和vw（viewport width）是相对于视口（viewport）的高度和宽度的度量单位。视口是用户正在使用的设备上显示内容的区域。

vh和vw单位是相对于视口大小的百分比单位。1vh等于视口高度的1%，1vw等于视口宽度的1%。

使用vh和vw单位可以实现响应式布局，使元素的大小和位置相对于视口的大小进行调整。例如，通过设置元素的高度为50vh，可以使该元素的高度等于视口高度的50%。

以下是一些使用vh和vw单位的示例：

.container {
  width: 50vw; /* 宽度为视口宽度的50% */
  height: 50vh; /* 高度为视口高度的50% */
}

.text {
  font-size: 5vw; /* 字体大小为视口宽度的5% */
}

.image {
  width: 80vh; /* 宽度为视口高度的80% */
}

使用vh和vw单位可以使网页元素能够根据视口的尺寸进行动态调整，从而实现响应式布局。

过渡与动画：

CSS过渡（transition）和动画（animation）是用来在元素状态发生变化时为其添加动态效果的CSS属性和特性。

CSS过渡允许元素在一种状态到另一种状态之间平滑地过渡。它可以应用于多个属性，如颜色、尺寸、位置等。通过使用transition属性，可以指定过渡的持续时间、过渡的属性、过渡的延迟时间等。

例如，下面的代码将使一个元素在鼠标悬停时改变背景颜色并具有平滑的过渡效果：

.box {
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

CSS动画允许元素按照一系列关键帧（keyframes）来改变其样式。通过使用animation属性，可以指定动画的名称、持续时间、延迟时间、重复次数等。

例如，下面的代码将使一个元素在5秒内从左侧平移至右侧，并且持续重复动画效果：

.box {
  animation: slide 5s infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

使用CSS过渡和动画可以为网页添加各种交互效果和动态效果，使用户界面更加生动和吸引人。可以通过调整过渡和动画的属性值、持续时间、延迟时间等来实现不同的效果。