CSS基本语法、选择器和Nginx服务器

最新推荐文章于 2022-07-18 18:14:56 发布
最新推荐文章于 2022-07-18 18:14:56 发布
阅读量122 收藏 1
点赞数
分类专栏： Web 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52627845/article/details/111767334
版权

CSS

1. 初识CSS

1.1 概述

  • 虽然标签的属性可以调整一些样式，但是效果不够理想，而我们更愿意把样式编写在<style> 标签中，让页面设计更美观更丰富，实际上，这是通过CSS实现的。那么什么是CSS呢？
    • 如果说，HTML是网页的"素颜"，那么CSS就是页面的"美妆师"，它就是让网页的外观更漂亮！
  • CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS），简单的说，它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。
    • 所谓层叠: 是指样式表允许以多种方式规定样式信息。可以规定在单个元素中，可以在页面头元素中，也可以在另一个CSS文件中，规定的方式会有次序的差别（讲解引入时说明）。
    • 所谓样式：是指丰富的样式外观。拿边框距离来说，允许任何设置边框，允许设置边框与框内元素的距离，允许设置边框与边框的距离等等。

1.2 CSS发展简史

  • CSS1：1994 年，Hkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。1996 年 12 月，W3C 推出了 CSS 规范的第一版本。
  • CSS2：1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。
  • CSS3：2005 年 12 月，W3C 开始 CSS3 标准的制定，并遵循模块化开发，所以没有固定的发布时间，而是一段时间发布一些特性模块。

1.3 CSS的组成

  • CSS是一门基于规则的语言 ,你能定义用于你的网页中特定元素的一组样式规则。这里面提到了两个概念，一是特定元素，二是样式规则。对应CSS的语法，也就是选择（selects）和声明（eclarations）。
    • 选择器：指定将要添加样式的 HTML元素的方式。可以使用标签名，class值，id值等多种方式。
    • 声明：形式为属性(property):值(value)，用于设置特定元素的属性信息。
      • 属性：指示文体特征，例如font-size，width，background-color。
      • 值：每个指定的属性都有一个值，该值指示您如何更改这些样式。
  • 格式：
选择器 {
    属性名:属性值;
    属性名:属性值;
    属性名:属性值;
}
  • 举例：
h1 {
    color: red;
    font-size: 5px;
}

2. 入门案例

  • 在初始页面的<body>标签中，加入一对<h1> 标签。<h1>标签规定的固定的标题样式。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>页面标题</title>
  </head>
  <body>
      <h1>今天开始变漂亮!!!</h1>
  </body>
</html>

  • 在<head>标签中加入一对<style> 标签中，表示准备应用样式。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面标题</title>
    <!-- 加入style标签 -->
    <style>
      
    </style>
</head>
<body>
<h1 color="red">今天开始变漂亮!!!</h1>
</body>
</html>

  • 编写样式

       <style>
        h1{
            color: red;  /* 设置颜色为红色*/
            font-size:100px; /* 设置字体大小为100像素*/
        }
    </style>

3. Chrome开发者工具

  • 打开开发者工具
    • 打开浏览器，点击键盘F12键，显示开发者工具窗口。
  • 可以使用该工具调试想要的页面效果，这里显示最终效果，但不会更改源代码

4. 基本语法

4.1 引入方式

  • 内联样式
    • 内联样式是CSS声明在元素的style属性中，仅影响一个元素：
      <标签 style="属性名:属性值; 属性名:属性值;">内容</标签>
    • 虽然格式简单，但是样式作用无法复用到多个元素上，不利于维护，此格式了解即可。
  • 内部样式表
    • 内部样式表是将CSS样式放在style标签中，通常style标签编写在HTML 的head标签内部。
      <head>
    <style>
        选择器 {
            属性名: 属性值;
            属性名: 属性值;
        }
    </style>
</head>
    • 内部样式只能作用在当前页面上，如果是多个页面，就无法复用了。
  • 外部样式表
    • 外部样式表是CSS附加到文档中的最常见和最有用的方法，因为您可以将CSS文件链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。
    • 外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML<link> 元素引用它，通常link标签编写在HTML 的head标签内部。
      <link rel="stylesheet" href="css文件">
//rel：表示“关系 (relationship) ”，属性值指链接方式与包含它的文档
      之间的关系，引入css文件固定值为stylesheet。
//href：属性需要引用某文件系统中的一个文件。
    • 为了保证CSS文件的管理，建议在项目中创建一个css文件夹，专门保存样式文件。

注意：引入样式的优先级问题。

规则层叠于一个样式表中，其中数字 4 拥有最高的优先权：

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 标签内部）
  4. 内联样式（在 HTML 元素内部）

4.2 关于注释

  • 与HTML一样，鼓励您在CSS中进行注释，以帮助您理解几个月后返回的代码工作方式，并帮助其他使用该代码的人对其进行理解。
  • CSS中的注释以/*和开头*/。在下面的代码块中，我已使用注释标记了不同的不同代码段的开始。
/* 设置h1的样式 */
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

4.3 关于选择器

4.3.1 选择器分类
  • 讲到CSS就不得不说到选择器，为了样式化某些元素，我们会通过选择器来选中HTML文档中的这些元素。如果你的样式没有生效，那很可能是你的选择器没有像你想象的那样选中你想要的元素。
  • 每个CSS规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。
  • 选择器的分类
基本选择器符号作用示例
元素选择器标签名基于标签名匹配元素标签名{ }
类选择器.基于class属性值匹配元素.class属性值{ }
ID选择器#基于id属性值匹配元素#id属性值{ }
分类符号作用示例
属性选择器[]基于某属性匹配元素[type]{ }
伪类选择器:用于向某些选择器添加特殊的效果a : hover{ }
组合选择器符号作用示例
后代选择器空格使用空格符号结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素.top li{ }
子级选择器>使用 > 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素.top > li{ }
同级选择器~使用 ~ 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素.l1 ~ li{ }
相邻选择器+使用 + 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素.l1 + li{ }
通用选择器*匹配文档中的所有内容*{ }
4.3.2 基本选择器
  • 元素选择器
//页面元素
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

//选择器
选择所有li标签,背景变成蓝色
li{
    background-color: aqua;
}
4.3.3 类选择器
//页面元素
<div>
    <ul>
        <li class="ulist l1">List item 1</li>
        <li class="l2">List item 2</li>
        <li class="l3">List item 3</li>
    </ul>
    <ol>
        <!--class 为两个值-->
        <li class="olist l1">List item 1</li>
        <li class="olist l2">List item 2</li>
        <li class="olist l3">List item 3</li>
    </ol>
</div>

//选择器
选择class属性值为l2的,背景变成蓝色
.l2{
    background-color: aqua;
}
选择class属性值为olist l2的,字体为白色
.olist.l2{
   color: wheat;
}
4.3.4 ID选择器
//页面元素
<div>
    <ul>
        <li class="l1" id="one">List item 1</li>
        <li class="l2" id="two">List item 2</li>
        <li class="l3" id="three">List item 3</li>
    </ul>
    <ol>
        <li class="l1" id="four">List item 1</li>
        <li class="l2" id="five">List item 2</li>
        <li class="l3" id="six">List item 3</li>
    </ol>
</div>

//选择器
#tow{
    background-color: aqua;
}
4.3.5 通用选择器
//页面元素
<div>
    <ul>
        <li class="l1" id="one">List item 1</li>
        <li class="l2" id="two">List item 2</li>
        <li class="l3" id="three">List item 3</li>
    </ul>
    <ol>
        <li class="l1" id="four">List item 1</li>
        <li class="l2" id="five">List item 2</li>
        <li class="l3" id="six">List item 3</li>
    </ol>
</div>

//选择器
所有标签 
*{
    background-color: aqua;
}
4.3.6 属性选择器
//页面元素
   <ul class="l1">
        <li  >List item 1</li>
        <li  >List item 2</li>
        <li  >List item 3</li>
    </ul>
    <ul class="l2">
        <li  id="four">List item 1</li>
        <li  id="five">List item 2</li>
        <li  id="six">List item 3</li>
    </ul>

    <p class="">
        p item
    </p>

//选择器和效果图，示例1
[属性名]{ }

//选择器和效果图，示例2
标签名[属性名]{ }

//选择器和效果图，示例3
标签名[属性名='属性值']{ }
4.3.7 伪类选择器
  • 伪类选择器，用于选择处于特定状态的元素，例如，一些元素中的第一个元素，或者某个元素被鼠标指针悬停。
标签名:伪类名{ }

  • 常用伪类

    • 锚伪类
      • 在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
    a:link {color:#FF0000;} 	/* 未访问的链接 */
a:visited {color:#00FF00;} 	/* 已访问的链接 */
a:hover {color:#FF00FF;} 	/* 鼠标悬停链接 */
a:active {color:#0000FF;} 	/* 已选中的链接 */

    注意：

    伪类顺序 link ，visited，hover，active，否则有可能失效。

    • 代码示例：
    HTML 代码 ： 
<div>
    <a class="red" href="http://www.itheima.com">黑马</a> <br/>
    <a class="blue" href="http://www.itheima.com">传智</a>
</div>


CSS 代码 ： 
/* 选择a标签,class值为red ,设置访问后为红色链接*/
a.red:visited {
    color: red;
}
4.3.8 组合选择器
//页面元素
<div>
    <ul class="l1">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <ul class="l2">
            <li id="four">List item 1</li>
            <li id="five">List item 2</li>
            <li id="six">List item 3</li>
        </ul>
    </ul>
</div>
  • 后代选择器
.l1 li{
    background-color: aqua;
}
  • 子级选择器
.l1 > li{
    background-color: aqua;
}
  • 同级选择器
.l1 ~ li{
    background-color: aqua;
}
  • 相邻选择器
.l1 + li{
    background-color: aqua;
}

4.4 总结

  • CSS的引入方式有三种，建议使用外部样式表。
  • 注释类似于java多行注释。
  • 选择器是CSS的重要部分：
    • 基本选择器：可以通过元素，类，id来选择元素。
    • 属性选择器：可以通过属性值选择元素
    • 伪类选择器：可以指定元素的某种状态，比如链接
    • 组合选择器：可以组合基本选择器，更加精细的划分如何选择

5. CSS案例-头条页面

5.1 语义化标签

  • 为了更好的组织文档，HTML5规范中设计了几个语义元素，可以将特殊含义传达给浏览器。
标签名称作用备注
header标头元素表示内容的介绍块元素，文档中可以定义多个
nav导航元素表示导航链接常见于网站的菜单，目录和索引等，可以嵌套在header中
article文章元素表示独立内容区域标签定义的内容本身必须是有意义且必须独立于文档的其他部分
footer页脚元素表示页面的底部块元素，文档中可以定义多个

5.2 常见样式属性

5.2.1 边框样式
边框属性作用
border边框
border-top底部边框
border-radius设置边框圆角
  • 边框简写样式
div { 
  border: 1px solid black; 
}
  • 单个边框 : 设置一个方向边框的宽度、样式和颜色，例如：
.box { 
  border-top: 1px solid black; 
  border-left: 5px double yellow;
  border-bottom: 5px dotted green;
  border-right: 5px dashed red;
} 
border-top: 上边框
border-left: 左边框
border-bottom: 底边框
border-right:  右边框
  • 无边框 : 当border值为none时，可以让边框不显示，用于特殊效果。
   div {
            width: 200px;
            height: 200px;
            border: none;
   }
  • 圆角 : 通过使用border-radius属性设置盒子的圆角，虽然能分别设置四个角，但是通常我们使用一个值，来设置整体效果，例如
    div {
            width: 200px;
            height: 200px;
            border: 10px solid blue;
            border-radius: 50px;
    }
5.2.2 文本样式
文本属性作用
color颜色
font-family字体样式
font-size字体大小
text-decoration下划线
text-align文本水平对齐
line-height行高，行间距
vertical-align文本垂直对齐
  • 颜色
    • 该color属性设置所选元素的前景色的颜色
    p {
  color: red;
}
    • 颜色的值，可以由多种方式赋值，常见的有颜色单词，RGB十六进制，例如：
  • 字体种类
  • 字体大小
    • 字体大小使用font-size属性设置，可以采用常见单位
    • px：像素，文本高度像素绝对数值。
    • em：1em等于我们要设置样式的当前元素的父元素上设置的字体大小，这是相对数值，能看懂即可。
  • 文本修饰
  • 文本对齐
    • 该text-align属性用于控制文本如何在其包含的内容框中对齐。可用值如下，它们的工作方式与常规字处理器应用程序中的工作方式几乎相同：
      • left：左对齐文本。
      • right：右对齐文本。
      • center：使文本居中。
      • justify：使文本散布，改变单词之间的间距，以使文本的所有行都具有相同的宽度。
  • 行高
    • 该line-height属性设置每行文本的高度，也就是行距。

6. CSS案例-登录页面

6.1 Table标签

6.1.1 什么是表格
  • 表格是由行和列组成的结构化数据集(表格数据)。
6.1.2 表格标签
标签名作用备注
table表示表格，是数据单元的行和列的两维表容器，默认无样式
trtable row，表示表中单元的行
tdtable data，表示表中一个单元格
thtable header，表格单元格的表头，通常字体样式加粗居中
  • 通过表格标签，我们可以创建出一张表格，代码如下
<table>
      <tr>
        <th>First name</th>
        <th>Last name</th>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
</table>
6.1.3 跨行跨列
  • 让我们使用 colspan 和 rowspan 来改进现有的表格。
<table>
    <tr>
        <th rowspan="2">GROUP</th>
        <th colspan="2"> name</th>
    </tr>
    <tr>
        <th>First name</th>
        <th>Last name</th>
    </tr>
    <tr>
        <td rowspan="2">G1</td>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Doe</td>
    </tr>

    <tr>
        <td rowspan="3">G2</td>
        <td>Aohn</td>
        <td>Doa</td>
    </tr>
    <tr>
        <td>Bane</td>
        <td>Dob</td>
    </tr>
    <tr>
        <td>Cane</td>
        <td>Doc</td>
    </tr>
</table>
6.1.4 表格结构
标签名作用备注
thead定义表格的列头的行一个表格中仅有一个
tbody定义表格的主体用来封装一组表行（tr元素）
tfoot定义表格的各列汇总行一个表格中仅有一个
  • 示例
<table>
    <thead>
        <tr>
            <th>项目</th>
            <th >金额</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>手机</td>
            <td>3,000</td>
        </tr>
        <tr>
            <td>电脑</td>
            <td>18,000</td>
        </tr>
    </tbody>
</table>

6.2 常见样式属性

6.2.1 背景

  • CSS background属性用来设置背景相关的样式。

  • 背景色

    .box {
  background-color: #567895;
}

  • 背景图

    • 该background-image属性允许在元素的背景中显示图像。使用url函数指定图片路径。
    body {
   background-image: url(bg.jpg);
}

  • 控制背景重复

    • 该background-repeat属性用于控制图像的平铺行为。可用值为：
      • no-repeat -停止完全重复背景。
      • repeat-x —水平重复。
      • repeat-y —反复重复。
      • repeat—默认值；双向重复。
    body {
  background-image: url(star.png);
  background-repeat: no-repeat;
}
6.2.2 轮廓
  • 轮廓outline：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
  <style>
        input {
            outline: dotted;
        }
    </style>

    <body>
        <input type="text">
     </body>
  • 设置为none时，可以取消默认轮廓样式，用于特殊效果。
 input {
        outline: none;
 }
6.2.3 显示
  • display属性，用来设置一个元素应如何显示。可以设置块级和行内元素的切换，也可以设置元素隐藏。
  • 元素显示
    /*   把列表项显示为内联元素，无长宽*/
li {display:inline;}
/*   把span元素作为块元素，有换行*/
span {display:block;}
/*   行内块元素，结合的行内和块级的优点，既可以行内显示，又可以设置长宽，*/
li {display:inline-block;}
  • 代码演示
    li {
              display: inline-block;
              width: 200px;
    }
  • 元素隐藏
    • 当设置为none时，可以隐藏元素。
  li {
            display: none;       
  }

6.3 盒子模型

  • 万物皆"盒子"。盒子模型是通过设置元素框与元素内容和外部元素的边距，而进行布局的方式。
- element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边。
  • 基本布局
    • 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
 <style>
        div{
            border: 2px solid blue;
        }

        .big{
            width: 200px;
            height: 200px;
        }

        .small{
            width: 100px;
            height: 100px;
            margin: 30px;/*  外边距 */
        }
    </style>

<div class="big">
    <div class="small">

    </div>
</div>
  • 增加内边距会增加元素框的总尺寸。
 <style>
        div{
            border: 2px solid blue;
        }

        .big{
            width: 200px;
            height: 200px;
             padding: 30px;/*内边距 */
        }

        .small{
            width: 100px;
            height: 100px;
        }
    </style>

<div class="big">
    <div class="small">
    </div>
</div>
  • 外边距
    • 单独设置边框的外边距，设置上、右、下、左方向：
margin-top
margin-right
margin-bottom
margin-left

  • 值含义

    • 一个值时
    /*  所有 4 个外边距都是 10px */
margin:10px;
    • 两个值时
    /* 上外边距和下外边距是 10px
右外边距和左外边距是 5px */

margin:10px 5px;

margin:10px auto;
auto 浏览器自动计算外边距，具有居中效果。
    • 三个值时
    /* 上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px*/

margin:10px 5px 15px;
    • 四个值时
    /*上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px*/

margin:10px 5px 15px 20px;

  • 内边距

    • 与外边距类似，单独设置边框的内边距，设置上、右、下、左方向：
padding-top
padding-right
padding-bottom
padding-left

7. HTML案例-网站发布

  • 将网站部署到服务器，浏览器通过URL地址访问页面

7.1 Nginx服务器概述

  • Nginx是一种服务器软件，其最主要，最基本的功能是可以与服务器硬件(电脑)结合，让程序员可以将程序发布在Nginx服务器上，让成千上万的用户可以浏览。
  • 除此之外，Nginx还是一种高性能的HTTP和反向代理服务器，同时也是一个代理邮件服务器。也就是说，我们在Nginx上可以：
    • 可以发布网站(静态, html,css,js)
    • 可以实现负载均衡,
    • 代理服务器
    • 可以作为邮件服务器实现收发邮件等功能

7.2 在Linux上使用Nginx

  • 下载Nginx
    • 进入http://nginx.org/网站，下载nginx-1.17.5.tar.gz文件
  • 上传到虚拟机
    • 使用客户端将刚下载好的nginx-1.17.5.tar.gz文件上传到home目录下。
  • 准备依赖环境
#安装Nginx依赖环境，‐y表示所有提示默认选择y
yum -y install pcre pcre-devel
yum ‐y install zlib zlib‐devel  
yum ‐y install openssl openssl‐devel
  • 解压和编译安装
# 进入home目录,解压
tar -zxvf nginx-1.17.5.tar.gz -C /home

# 进入 nginx目录
cd nginx-1.17.5

# 编译并安装【已经有gcc编译环境】
./configure
make
make install
# 安装成功之后,就会在/usr/local下多出了一个nginx目录.
  • 启动服务器
#进入nginx的sbin目录
cd /usr/local/nginx/sbin

#在sbin目录下启动
./nginx
#在sbin目录下停止
./nginx ‐s stop
#在sbin目录下重写加载
./nginx ‐s reload

#开放linux的对外访问的端口80，在默认情况下，Linux不会开放80端口号
#需要编辑iptables文件,参考 4.5 操作
#查看是否有nginx的线程是否存在
ps ‐ef | grep nginx
  • 浏览器访问
    • 浏览器输入虚拟机ip地址，默认80端口

7.3 操作实现

7.3.1 发布项目
  • 在/home目录下，创建toutiao目录
# 进入home目录
cd /home 
# 创建目录
mkdir toutiao
  • 上传项目文件到toutiao目录
7.3.2 配置 nginx.conf 文件

7.3.3 启动服务器
#启动服务器 ， 加载配置文件
/usr/local/nginx/sbin/nginx -c /home/nginx-1.17.5/conf/nginx.conf
7.3.4 浏览器访问
  • 浏览器输入虚拟机ip地址，默认80端口，访问首页 index.html
  • 跳转登录页面
http://172.16.17.99/login/login.html
辰伏
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
nginx语法总结
weixin_42202352的博客
07-14 391
1、记录location中参数变量的意思 #这个名称是自己起的，在其它的nginx配置文件中有其对应。例如： location ~ /basic-api(.*) { set $name portal_cluster; proxy_set_header Host $http_host; proxy_pass http://$name/portal$1$is_args$args; } 其中， ~是区分大小写匹配； $name对应portal_cluster对应localhost:8880； $1
CSS基本语法与基本选择器
weixin_43641202的博客
03-26 1001
CSS什么是CSS?CSS的基本语法行内样式内部样式表外部样式表 什么是CSS? css全称为层叠样式表或级联样式表。 用于HTML中，对元素设置样式。 CSS的基本语法 CSS规则由两个部分构成，即选择器和声明。 声明必须放在一对大括号“{ }”中，可以是一条或多条。 每条声明由属性和值的组成，属性和值之间用冒号分开，每条声明以英文分号结尾。选择器 {属性1:值1; 属性2:值2; …} 例如 h1{ font-size: 12px; color: black; } 在html中引入
基本语法
Major_S的博客
10-02 214
基本语法基本语法基本语法 2.1 引入方式 2.1.1 内联样式 了解,几乎不用,维护艰难 内联样式是CSS声明在元素的style属性中，仅影响一个元素： 格式： <标签 style="属性名:属性值; 属性名:属性值;">内容</标签> 举例： <h1 style="color: blue;background-color: yellow;border: 1px solid black;"> Hello World! </h1> 虽然
标签和选择器
linus.lin的博客
07-18 570
标签（label）是附加在kubernetes对象上的一组名值对，其意图按照对用户有意义的方式来标识kubernetes对象，同时，不对kubernetes的核心逻辑产生影响。标签可以用来组织或选择一组kubernetes对象，您可以在选择kubernetes对象时为其添加标签，也可以在创建完成之后再为其添加标签。使用标签（Label）可以高效地查询和监听kubernetes对象，在kubernetes界面（如KubenetesDashboard）和kubectl中，标签的使用非常普遍。...
标签和标签选择器、label selector
MssGuo的博客
02-16 1698
前言 环境：centos7.9 docker-ce-20.10.9 kubernetes-version v1.22.6 本篇讲解在k8s中，什么是标签和标签选择器，以及如何使用它们。 什么是标签、什么是标签选择器
k8s面试题
jj1130050965的博客
07-05 1157
kubernetes面试题汇总 1、 k8s是什么？请说出你的了解？ 答：Kubenetes是一个针对容器应用，进行自动部署，弹性伸缩和管理的开源系统。主要功能是生产环境中的容器编排。 K8S是Google公司推出的，它来源于由Google公司内部使用了15年的Borg系统，集结了Borg的精华。 2、 K8s架构的组成是什么？ 答：和大多数分布式系统一样，K8S集群至少需要一个主节点（Master）和多个计算节点（Node）。 主节点主要用于暴露API，调度部署和节点的管理； 计算节点运行一个容器运行
1-2、CSS基本语法+选择器
ss 的博客
04-27 757
CSS基本语法+选择器
nginx1.18 nginx1.18 nginx1.18
最新发布
04-23
在使用 Nginx 1.18 的过程中，理解其配置语法和工作原理至关重要，这将有助于优化服务器性能，解决可能出现的问题，并充分利用其功能。通过持续学习和实践，你可以成为熟练驾驭 Nginx 的专业人士。
Nginx安装包（包含Windows和Linux环境安装包）
04-10
Nginx是一款高性能的Web服务器和反向代理服务器，它以其高效的并发处理能力、轻量级的内存占用以及稳定的工作性能而闻名。本压缩包包含了适用于Windows和Linux环境的Nginx安装包，使得用户可以在不同的操作系统上...
brackets-nginx-syntax-highlighter:Brackets 文本编辑器的 Nginx 语法高亮显示
07-03
是 HTML、CSS 和 JavaScript 的现代开源代码编辑器，内置于 HTML、CSS 和 JavaScript。 也就是说，适用于网页设计师和前端开发人员的现代代码编辑器。 这是一个 Brackets 扩展，为配置文件（.conf 文件）添加语法...
nginx-web服务器
12-18
Nginx是一个高性能、轻量级的Web服务器，由俄罗斯的Igor Sysoev开发，其设计目标是解决高并发访问的问题，因此在处理静态资源和反向代理方面表现出色。Nginx以其高效的性能、稳定的运行和低内存占用而广受赞誉，被...
响应对象(Response)和请求对象(Request)
辰伏的博客
01-02 2431
request对象 将请求部分封装的对象 功能 请求行 String getMethod() String getReqeustURI() 请求头 String getHeader(String key) 请求体 ServletInputStream getInputStream() BufferedReader() 通过内省的方式封装数据 属性：对应的setter和getter方法，去掉set和get，然后首字母小写 使用 请求域 request域：可以在一次请求范围内进行共享数据 请求对象操作共享
Vue和ElementUI
辰伏的博客
01-27 1746
1. Vue 1.1 Vue介绍 Vue是一套构建用户界面的渐进式前端框架 只关注视图层，并且非常容易学习，还可以很方便的与其他库或已有项目整合 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件 特点 易用：在有HTML CSS JavaScript的基础上，快速上手 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用 性能：20kbmin + gzip运行大小、超快虚拟DOM、最省心的优化 1.2 Vue快速入门 下载和引入vue.js文件 编写程序 视图：负责页面渲染，主
HTML入门学习和简单使用
辰伏的博客
12-25 669
html 1. 网页 网页的构成 html ：编写网页 css ：美化网页 javascript ：动态效果 2. html概述 超文本标记语言 标签 属性 3. 基本语法 3.1 标签 3.2 嵌套 3.3 2.1 文本相关 2.2 图片 2.3 超链接 2.4 表单标签
客户端会话技术(Cookie)、服务端会话技术(Session)、页面技术(JSP)
辰伏的博客
01-03 505
1. 会话技术 1.1 会话介绍 会话：浏览器客户端和服务器之间的多次请求和响应 为了实现一些功能，客户端和服务器之间可能会产生多次的请求和响应，从浏览器访问服务器开始，到访问服务器结束（关闭浏览器），这期间产生的多次请求和响应加在一起就称之为浏览器和服务器的一次会话 会话过程中所产生的一些数据，可以通过会话技术保存 1.2 客户端会话技术(Cookie) 1.2.1 概述 把要共享的数据保存到客户端 名称和值是必须属性 它是客户端浏览器的缓存文件，里面记录了客户浏览器访问网站的一些内容。同时，也是H
EL表达式、JSTL标签库、过滤器(Filter)、监听器(Listener)
辰伏的博客
01-06 465
1. EL表达式 1.1 介绍 EL(Expression Lannguage):表达式语言 在JSP2.0规范中加入的内容，也是Servlet规范的一部分 作用 在JSP页面获取数据，让我们的JSP脱离Java代码块和JSP表达式 不需要关心是哪个对象，只需要关心名称就行了 语法 ${表达式的内容} 只能从域对象中获取，即四大域对象 1.2 入门案例 <head> <title>el快速入门</title> </head> <b
Tomcat的下载安装和资源发布以及HTTP协议
辰伏的博客
12-29 264
1. 企业开发 1.1 JavaEE规范 JavaEE（Java Enterprise Edition）：Java企业版 它是由SUN公司领导、各个厂家共同制定并得到广泛认可的工业标准 JavaEE早期叫做J2EE，但是没有继续采用其命名规则，J2EE的版本从1.0开始到1.4结束，而JavaEE版本是从JavaEE5版本开始，目前最新的版本是JavaEE8 JavaEE规范是很多Java开发技术的总称，一共包括了13种规范 例如：jsp/servlet，jndi，jaxp，jdbc，jni，ja
JavaScript(ECMAScript，DOM，BOM)
辰伏的博客
01-20 150
JavaScript 1. 入门 1.1 JavaScript介绍 JavaScript是一种客户端脚本语言，运行在客户端浏览器中，每一个浏览器都具备解析JavaScript的引擎 脚本语言：不需要编译，就可以被浏览器直接解析执行了 核心功能就是增强用户和HTML页面的交互过程，让页面有一些动态效果，以次来增强用户的体验 1995年，NetScape（网景）公司，开发的一门客户端脚本语言：LiveScript，后来，请SUN公司的专家来进行修改，后命名为：JavaScript 1996年，微软抄袭Java
Nginx配置与使用详解：反向代理、负载均衡与虚拟主机
"这是关于Nginx使用的基本介绍，涵盖了Nginx的作用、语法格式以及安装方式。" 在本文档中，我们重点讨论了Nginx的几个核心概念和配置结构，这对于理解和操作Nginx服务器至关重要。Nginx是一款高性能的HTTP和反向...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值