【Day 1】HTML 与 CSS

1 前端

网站的工作流程：

  1. 首先我们需要通过浏览器访问发布到前端服务器中的前端程序，这时候前端程序会将前端代码返回给浏览器
  2. 浏览器得到前端代码，此时浏览器会将前端代码进行解析，然后展示到浏览器的窗口中，这时候我们就看到了网站的页面
  3. 但是此时这个页面是没有数据的，因为数据在我们的数据库中，所以我们浏览器需要根据前端代码中指定的后台服务器的地址 向我们的后台服务器（内部有java程序）发起请求，后台服务器再去从数据库中获取数据，然后返回给浏览器
  4. 浏览器拿到后台返回的数据后，然后将数据展示在前端资源也就是网页上，然后我们就看到了完整的内容

        Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：

  • HTML：负责网页的结构（页面元素和内容）
  • CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
  • JavaScript：负责网页的行为（交互效果）

常用前端技术：

技术描述
HTML用于构建网站的基础结构的
css用于美化页面的，作用和化妆或者整容作用一样
JavaScript实现网页和用户的交互
Vue主要用于将数据填充到html页面上的
Element主要提供了一些非常美观的组件
Nginx一款web服务器软件，可以用于部署我们的前端工程

2 HTML 介绍

HTML (HyperText Markup Language) 超文本标记语言。

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
  • 标记语言：由标签构成的语言
  1. HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频
  2. HTML代码直接在浏览器中运行，HTML标签由浏览器解析

HTML结构

<html>
    <head>

        <title>标题</title>

    </head>
    <body>

    </body>
</html>

HTML 特点

  1. HTML标签不区分大小写
  2. HTML标签属性值单双引号都可以
  3. HTML语法松散

2.1 HTML 仿写新浪微博标题排版

例子：

分析：

        图片、h1标题，水平线

使用标签：

        <img>、<h1>、<hr>

<!-- 文档类型为 HTML -->
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 字符集为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 浏览器的兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：某国底气 新思想夯实大国粮仓</title>
</head>

<body>
    <!-- 
    img标签的属性：
        src 图片的路径
        alt 如果由于某种原因无法显示图像，则指定图像的替代文本
        width 宽度（单位：像素px  或者  %  相对父元素的百分比）
        height 高度（单位：像素px  或者  %  相对父元素的百分比）
        一般只设置一个，会等比例缩放
    路径：
        绝对路径：
            1.绝对磁盘路径：D:\HTML\SinaNews\img\news_logo.png
            2.绝对网络路径：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
        相对路径：
            ./ 当前目录（可省略）
            ../ 上一级目录（不可省略）
            第一种 ./img/news_logo.png 或者 img/news_logo.png
    -->
    <img src="./img/news_logo.png" alt="can't open this picture"> 新浪政务>正文
    <h1>焦点访谈：某国底气 新思想夯实大国粮仓</h1>
    <hr>
    2023年03月02日 21:50 央视网
    <hr>
</body>

</html>

效果：

比较原版：

可以发现，基本的结构相同，但是字体和颜色不太一样，所以需要用负责网页表现的 CSS

3 CSS 介绍

        CSS 的全称是层叠样式表（Cascading Style Sheets）。CSS 是一种用来控制网页样式和布局的标记语言

CSS的引入方式

  • 行内样式：写在标签的style属性中（不推荐）

        <h1 style="xxx:xxx;">某国新闻网</h1>

  • 内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中，全局有效）

        <style> h1 {...} </style>

  • 外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

        <link rel="stylesheet" href="css/news.css">

        rel 关系（relationship）

        href 超文本引用（Hypertext Reference）

        

对于上述3种引入方式，企业开发的使用情况如下：

  1. 内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。

  2. 内部样式，通过定义css选择器，让样式作用于当前页面的指定的标签上。

  3. 外部样式，html和css实现了完全的分离，企业开发常用方式。

3.1 CSS 添加样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：某国底气 新思想夯实大国粮仓</title>
    <!-- 方式二：内嵌样式 -->
    <style>
        h1 {
            color: #4D4F53;
        }

        span {
            color: #968D92;
        }
    </style>
</head>

<body>
    <img src="./img/news_logo.png" alt="can't open this picture"> 新浪政务>正文
    <!-- 方式一：行内样式 -->
    <!-- <h1 style="color:red;">焦点访谈：某国底气 新思想夯实大国粮仓</h1> -->

    <!-- 方式三：外联样式 -->
    <!-- <link rel="stylesheet" href="CSS/sinaNewsCss.css"> -->
    <!-- <h1>焦点访谈：某国底气 新思想夯实大国粮仓</h1> -->

    <h1>焦点访谈：某国底气 新思想夯实大国粮仓</h1>

    <hr>
    2023年03月02日 21:50 央视网
    <hr>
</body>

</html>

同时，在CSS文件中

h1{
    color: #4D4F53;
}

效果：

改变了标题颜色

现在对 "2023年03月02日 21:50 央视网" 进行修改，只要改变时间的颜色，而不改变央视网的颜色

引入一个没有语义的标签 span 

在head标签里面规定样式：

    <style>
        h1 {
            color: #4D4F53;
        }

        span {
            color: #968D92;
        }
    </style>
    <hr>
    <!-- 没有语义的标签 span （没有效果，文字在一行） -->
    <span>2023年03月02日 21:50</span> <span>央视网</span>
    <hr>

这样做，发现两个都改变了，因为他们都在 span 标签里，此时需要用到 CSS 选择器

3.2 CSS 选择器

CSS选择器：用来选取需要设置样式的元素（标签）

  • 元素选择器
  • id 选择器
  • 类选择器

<head>
    <style>
        
        .cls{
            color: #968D92;
        } */
        
        #time{
            color: #968D92;
        }
    </style>
</head>
<body>
    <span class="cls" id="time">2023年03月02日 21:50</span> <span>央视网</span>
</body>

 类选择器和 id 选择器二者取其一即可形成下面的效果：

而且，三个选择器有 优先级

优先级高到低依次为：

id 选择器、类选择器、元素选择器

3.3 字体 font

字体大小 font-size

#time{
        color: #968D92;
        font-size: 13px;
     }

4 超链接

标签：

        <a href="..." target=''..."> 央视网</a>

属性：

        href (Hypertext Reference)：指定资源访问的 URL

        target：指定在何处打开超链接

                _self：默认值，在当前页面打开

                _blank：在空白页打开

<span class="cls" id="time">2023年03月02日 21:50</span> <span><a href="http://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank" >央视网</a> </span>

这样就形成了超链接，而且是新开一个空白页打开超链接

但是有下划线并且变成了紫色，现在去把超链接的字体变成默认黑色，并且去除下划线：

使用 CSS 属性 text-decoration（文本装饰）

在 style 标签里：

a{
    color: black;
    text-decoration: initial; /*设置默认文本装饰*/
 }

变成这样，但是还是可以点击

5 正文排版

5.1 视频标签

<video src="..." controls width="..." height="...">

属性：

  • src：视频的URL
  • controls：播放控件（写 controls="controls" ，但是如果属性和值相等，就省略为属性名）
  • width：播放器的宽度，通常宽度和高度二者写一个

5.2 音频标签

<audio src="..." controls>

属性：同视频

5.3 段落标签和文本加粗标签

段落标签

<p>

文本加粗标签

<b> 或 <strong>

文本格式标签

效果标签标签(强调)
加粗bstrong
倾斜iem
下划线uins
删除线sdel

 5.4 正文

<!-- 正文 -->
    <video src="video/1.mp4" controls width="900px"></video>
    <audio src="audio/1.mp3" controls></audio>

    <p><b>央视网消息</b>(焦点访谈)：d的十八大以来，以...同志为核心的dzy始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢?</p>
    <p>人勤春来早，春耕农事忙。立春之后，由南到北，某国春耕春管工作陆续展开，春天的田野处处生机盎然。</p>
    <img src="img/1.jpg">
    <p>今年，某国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，某国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。</p>
    <img src="img/2.jpg">
    <p>某国式现代化一个重要的某国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以...同志为核心的dzy坚强领导下，亿万某国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把某国人的饭碗牢牢端在自己手中，夯实某国式现代化基础。</p>
    <p id="plast">责任编辑:王树淼 SN242</p>

CSS样式

p{
    text-indent: 40px; /*设置首行缩进 */
    line-height: 35px; /*设置行高*/
}
#plast{
    text-align: right;
}

 属性：

  • text-indent：首行缩进
  • line-height：行高
  • text-align：对齐方式（left，right，center）

效果：

6 布局

现在布局是默认布局，比较难看，而不像：

6.1 CSS 盒子模型

        盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型组成：

  • 内容区域（content）
  • 内边距区域（padding）
  • 边框区域（border）
  • 外边距区域（margin）（不属于盒子）

CSS 布局标签：

<div>

 特点：

  • 单行显示
  • 宽度默认是父元素宽度，高度默认由内容决定
  • 可以设置宽度、高度

<span>

特点：

  • 多行显示
  • 宽度和高度默认由内容决定
  • 不可以设置宽度、高度

6.2 div

用 div 把所有都圈起来，并且给个 id


<body>
    <div id="center">
        <img src="./img/news_logo.png" alt="can't open this picture"> <a href="http://gov.sina.com.cn"
            target="_blank">新浪政务</a>>正文
        <!-- 方式一：行内样式 -->
        <!-- <h1 style="color:red;">焦点访谈：.国底气 新思想夯实大国粮仓</h1> -->

        <!-- 方式三：外联样式 -->
        <!-- <link rel="stylesheet" href="CSS/sinaNewsCss.css"> -->
        <!-- <h1>焦点访谈：某国底气 新思想夯实大国粮仓</h1> -->

        <h1>焦点访谈：某国底气 新思想夯实大国粮仓</h1>

        <hr>
        <!-- 没有语义的标签 span （没有效果，文字在一行） -->
        <span class="cls" id="time">2023年03月02日 21:50</span> <span><a
                href="http://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank"
                rel="noopener noreferrer">央视网</a> </span>
        <hr>

        <!-- 正文 -->
        <video src="video/1.mp4" controls width="900px"></video>
        <br>
        <audio src="audio/1.mp3" controls></audio>

        <p><b>央视网消息</b>(焦点访谈)：.的十八大以来，以...同志为核心的...始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢?
        </p>
        <p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p>
        <img src="img/1.jpg">
        <p>今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
        </p>
        <img src="img/2.jpg">
        <p>某国式现代化一个重要的某国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以...同志为核心的...坚强领导下，亿万.国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把.国人的饭碗牢牢端在自己手中，夯实.国式现代化基础。
        </p>
        <p id="plast">责任编辑:王树淼 SN242</p>
    </div>


</body>

 CSS 样式：

#center{
    width: 65%;
    /* margin: 0% 17.5% 0% 17.5%; 设置外边距 100-65=35 35/2=17.5 */
    margin: 0 auto; /* 等价 */   
}

这样就居中显示了（图片违规，但是已经居中了）

7 HTML 表格、表单标签

7.1 表格标签

在网页中以表格(行、列)形式整齐展示数据

标签：

做一个表格：

<body>
    <!-- <table border="1px"> 已经弃用-->
    <table>
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>

        <tr>
            <td>1</td>
            <td><img src="img/huawei.jpg" width="80px" /></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>

        <tr>
            <td>2</td>
            <td><img src="img/alibaba.jpg" width="80px"></td>
            <td>阿里巴巴</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>
</body>

注：HTML5 废弃了 cellspacing 属性，而且不推荐在标签中安排样式，所以：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML table</title>
    <style>
        table,th,td{
            border: 1px solid black;
            border-collapse: collapse; /*单元格合并，无空白 */
            /* border-collapse: separate; 独立显示，有空白 */
        }
    </style>
</head>

7.2 表单标签

表单：在网页中主要负责数据采集功能，如 注册、登录等数据采集

标签：

<form>

每一行是“表单项”（不同类型的 input 元素、下拉列表、文本域等）

表单项标签：

input 标签

<intput>

下拉列表标签：

<select>

文本域标签：

<textarea>

属性：

  • action

表单提交的URL，如果不指定，默认提交到当前页面

  • method

发送表单数据的方式。GET、POST，如果不指定，默认是 get

get：在ur1后面拼接表单数据，比如:?username=Tom&age=12，url 长度有限制

post：在消息体(请求体)中传递的，参数大小无限制

<body>
    <form action="" method="get">
        用户名：<input type="text" name="username"/><br/>
        年&nbsp&nbsp&nbsp龄：<input type="text" name="age"/><br/>
        <input type="submit" value="提交">
    </form>
</body>

 注：input 中的 name，是要提交字段的名字，type是类型，常见的类型如下：

效果：

 输入，然后提交，此时 URL 变成了：

如果把表单 method 改为 post，就会在消息体中传递

表单项除了 input 标签，还有 select 和 textarea

制作一个表单：

<body>
    <form action="" method="post">
        姓名：
        <input type="text" name="username"><br><br>

        密码：
        <input type="password" name="password"><br><br>

        性别：
        <input type="radio" name="gender" value="male" id="1">
        <label for="1">男</label>

        <input type="radio" name="gender" value="female" id="2">
        <label for="2">女</label><br><br>

        爱好：
        <input type="checkbox" name="hobby" id="java">
        <label for="java">Java</label>

        <input type="checkbox" name="hobby" id="C">
        <label for="C">C</label>

        <input type="checkbox" name="hobby" id="py">
        <label for="py">Python</label><br><br>

        上传文件：
        <input type="file" name="file"><br><br>

        生日：
        <input type="date" name="date"><br><br>

        邮箱：
        <input type="email" name="email"><br><br>

        年龄：
        <input type="number" name="number"><br><br>

        学历：
        <select name="degree">
            <option>-----请选择-----</option>
            <option value="1">本科</option>
            <option value="2">硕士</option>
            <option value="3">博士</option>
        </select><br><br>

        备注：
        <textarea name="description" cols="30" rows="10"></textarea><br><br>

        <input type="button" value="按钮">

        <input type="reset" name="重置">

        <input type="submit" name="提交">
    </form>

注：name 用来标识元素

value 是提交表单时候的字段名

id 则是用于把 for 和元素关联

效果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/553329.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

EVI增强型植被指数

EVI增强型植被指数

​随着遥感技术的发展&#xff0c;我们对地球上的植被状况有了更深入的了解&#xff0c;而其中一种重要的工具就是EVI&#xff08;Enhanced Vegetation Index&#xff0c;增强型植被指数&#xff09;。EVI不仅是一种植被指数&#xff0c;更是一种对植被生态系统健康和生产力评估…
阅读更多...
统一SQL-支持unpivot列转行

统一SQL-支持unpivot列转行

统一SQL介绍 https://www.light-pg.com/docs/LTSQL/current/index.html 源和目标 源数据库&#xff1a;Oracle 目标数据库&#xff1a;TDSQL-MySQL 操作目标 在Oracle中&#xff0c;可以使用unpivot将列转换成行&#xff0c;在TDSQL-MySQL中没有对应的功能&#xff0c;由…
阅读更多...
设计模式学习（六）——《大话设计模式》

设计模式学习（六）——《大话设计模式》

设计模式学习&#xff08;六&#xff09;——《大话设计模式》 简单工厂模式&#xff08;Simple Factory Pattern&#xff09;&#xff0c;也称为静态工厂方法模式&#xff0c;它属于类创建型模式。 在简单工厂模式中&#xff0c;可以根据参数的不同返回不同类的实例。简单工厂…
阅读更多...
C++算法题 - 矩阵

C++算法题 - 矩阵

目录 36. 有效的数独54. 螺旋矩阵48. 旋转图像73. 矩阵置零289. 生命游戏 36. 有效的数独 LeetCode_link 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现…
阅读更多...
【IoTDB 线上小课 02】开源增益的大厂研发岗面经

【IoTDB 线上小课 02】开源增益的大厂研发岗面经

还有友友不知道我们的【IoTDB 视频小课】系列吗&#xff1f; 关于 IoTDB&#xff0c;关于物联网&#xff0c;关于时序数据库&#xff0c;关于开源...给我们 5 分钟&#xff0c;持续学习&#xff0c;干货满满~ 5分钟学会 大厂研发岗面试 之前的第一期小课&#xff0c;我们听了 I…
阅读更多...
SpringMVC（二）【请求与响应】

SpringMVC（二）【请求与响应】

0、测试环境 我们简化开发&#xff0c;创建一个简单的环境&#xff08;因为没有其它包比如 service、dao&#xff0c;所以这里不用 Spring 容器&#xff0c;只用 SpringMVC 容器&#xff09;&#xff1a; Servelet 容器配置&#xff1a; package com.lyh.config;import org.s…
阅读更多...
jmeter及PTS压测介绍和使用

jmeter及PTS压测介绍和使用

一、常用压测工具&#xff1a; loadrunner apache ab&#xff08;单接口压测最方便&#xff09; jmeter 阿里云PTS&#xff08;原生上传jmeter脚本进行压测&#xff09; 二、jmeter可以压测不同的协议和应用 web http https jdbc for database TCP 三、使用场景及优点 1、功能…
阅读更多...
飞行机器人专栏（十四）-- Kinect DK 人体骨骼点运动提取方法

飞行机器人专栏（十四）-- Kinect DK 人体骨骼点运动提取方法

系列文章目录 Ubuntu 18.04/20.04 CV环境配置&#xff08;下&#xff09;--手势识别TRTposeKinect DK人体骨骼识别_ubuntu kinect骨骼测试-CSDN博客文章浏览阅读1.3k次。trt_pose_ros kinect实现手势识别和人体骨骼识别&#xff0c;用于机器人运动控制参考_ubuntu kinect骨骼测…
阅读更多...
SpringCloud(一)

SpringCloud(一)

微服务框架 一、分布式架构 分布式架构︰根据业务功能对系统进行拆分&#xff0c;每个业务模块作为独立项目开发&#xff0c;称为一个服务。 优点: 降低服务耦合有利于服务升级拓展 微服务是一种经过良好架构设计的分布式架构方案&#xff0c;微服务架构特征: 单一职责:微…
阅读更多...
【函数式接口使用✈️✈️】通过具体的例子实现函数结合策略模式的使用

【函数式接口使用✈️✈️】通过具体的例子实现函数结合策略模式的使用

目录 前言 一、核心函数式接口 1. Consumer 2. Supplier 3. Function,> 二、场景模拟 1.面向对象设计 2. 策略接口实现&#xff08;以 Function 接口作为策略&#xff09; 三、对比 前言 在 Java 8 中引入了Stream API 新特性&#xff0c;这使得函数式编程风格进…
阅读更多...
数据库工具解析之 OceanBase 数据库导出工具

数据库工具解析之 OceanBase 数据库导出工具

背景 大多数的数据库都配备了自己研发的导入导出工具&#xff0c;对于不同的使用者来说&#xff0c;这些工具能够发挥不一样的作用。例如&#xff1a;DBA可以使用导数工具进行逻辑备份恢复&#xff0c;开发者可以使用导数工具完成系统间的数据交换。这篇文章主要是为OceanBase…
阅读更多...
编曲知识20：人声和声处理 分轨导出 总线处理

编曲知识20：人声和声处理 分轨导出 总线处理

和声处理 和声 声像注意不要和主旋律重叠 各个效果器的处理幅度可以更大 呼吸音可直接去掉 尽量不要和主旋律共用一个混响延迟轨 注意音量、注意主次 和声拓展-模拟合唱 录制两轨同八度的主旋律或低八度高八度的主旋律 声像左右分配 音量拉低 将各个合唱轨进行失真处理 …
阅读更多...
【Pytorch】VSCode实用技巧 - 默认终端修改为conda activate pytorch

【Pytorch】VSCode实用技巧 - 默认终端修改为conda activate pytorch

VScode修改配置使得启动终端为conda环境 VScode跑项目&#xff0c;在启动pytorch项目时往往会有千奇百怪的问题&#xff0c;最常见的就是显示“conda activate pytorch”后会要求“conda init”&#xff0c;但输入后实际上也不行&#xff0c;这是因为VSCode默认终端为 Powersh…
阅读更多...
网站模板-慈善捐赠基金会网站模板 Bootstrap4 html

网站模板-慈善捐赠基金会网站模板 Bootstrap4 html

目录 一.前言 二.预览 三.下载链接 一.前言 这是一个慈善网站的页面。页面包含了导航栏、横幅部分、关于、使命、新闻、活动、捐赠和页脚等不同的部分。该网站还包含了一些CSS样式和JavaScript脚本来实现交互和样式效果。 这个网站的具体结构如下&#xff1a; 导航栏部分&a…
阅读更多...
kafka---topic详解

kafka---topic详解

一、分区与高可用 在Kafka中，事件（events 事件即消息）是以topic的形式进行组织的；同时topic是分区（partitioned）的，这意味着一个topic分布在Kafka broker上的多个“存储桶”(buckets)上。这种数据的分布式放置对于可伸缩性非常重要，因为它允许客户端应用程序同时从多个…
阅读更多...
第十三章 使用深度和法线纹理

第十三章 使用深度和法线纹理

获取深度和法线纹理 背后的原理 深度纹理是一张渲染纹理，它里面存储的像素值不是颜色，而是一个高精度的深度值。深度值范围是[0, 1]，非线性分布的。这些深度值来自于顶点变换后得到的归一化的设备坐标(NDC)。一个模型想要被绘制在屏幕上，需要把它的顶点从模型空间变换到齐…
阅读更多...
OpenCV从入门到精通实战(三)——全景图像拼接

OpenCV从入门到精通实战(三)——全景图像拼接

全景图像拼接实现 定义 Stitcher 的类&#xff0c;用于实现两张图片的拼接。使用的技术是基于 SIFT 特征点检测与匹配&#xff0c;以及利用视角变换矩阵来对齐和拼接图像。 import numpy as np import cv2class Stitcher:#拼接函数def stitch(self, images, ratio0.75, repro…
阅读更多...
云手机助力舆情监测，智慧引领信息时代

云手机助力舆情监测，智慧引领信息时代

随着信息时代的到来&#xff0c;舆情监测已成为政府、企业、高校、金融机构等各行业的必备利器。在这个信息爆炸的时代&#xff0c;如何及时准确地感知民意、把握市场动态&#xff0c;已成为各界迫切需要解决的问题。而云手机作为信息时代的新生力量&#xff0c;在舆情监测方面…
阅读更多...
C++ UML 类图介绍与设计

C++ UML 类图介绍与设计

1 类图概述 UML(Unified Modeling Language)&#xff0c;即统一建模语言&#xff0c;是用来设计软件的可视化建模语言。它的特点是简单、统一、图形化、能表达软件设计中的动态与静态信息。UML从目标系统的不同角度出发&#xff0c;定义了用例图、类图、对象图、状态图、活动图…
阅读更多...
PostgreSQL的学习心得和知识总结（一百三十八）|深入理解PostgreSQL数据库之Protocol message构造和解析逻辑

PostgreSQL的学习心得和知识总结（一百三十八）|深入理解PostgreSQL数据库之Protocol message构造和解析逻辑

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《PostgreSQL数据库内核分析》 2、参考书籍&#xff1a;《数据库事务处理的艺术&#xff1a;事务管理与并发控制》 3、PostgreSQL数据库仓库…
阅读更多...
最新文章

Copyright @ 2022~2023