HTML前端从零开始

第一天

HTML部分

什么是HTML

HTML(Hypertext Markup Language)超文本标记语言。HTML是万维网的基石。

超:

  1. 超字第一层意义是指最重要的标签,超链接标签

  2. 超越文本的意思

HTML的发展历程

HTML1990年出现,web之父Tim Berners-Lee发布了《HTML标签》 的论文,借用SGML的标记语法。

主要的目标是解决互联网的数据传输问题。

环境搭建

  • 开发环境:只要能编写代码的工具、vscode、webstorm、hbuilder等等

  • 运行环境:谷歌浏览器(chrome)Google Chrome 网络浏览器

第一个页面

页面的“hello world”

  1. 创建页面的时候,后缀名必须是.html

  2. 文件名称建议是英文名称

  3. 创建文件的方式非常多,可以手动创建

编写HTML页面的一些细节问题

  1. 所有的标签都是成对出现(由开始和结束标签组成)

  2. DOCTYPE 文档声明,作用就是告诉浏览器需要以哪个标准来渲染这个页面

    <!DOCTYPE html>
  3. html不区分大小写

  4. html标签是html页面的跟标签,head和body标签

  5. head部分不可见,但是定义页面的各种属性,body部分就是课件区域

    完整的网页结构

<!DOCTYPE html>
<html>
    <head>
        <title>这个是我的一个页面</title>
        <meta charset="utf-8" >
    </head>
    <body>
        这个是一段问题
        <p>这个是一段问题</p>
    </body>
</html>

嘱咐一句:一定要保存再运行!!!!

vs code静态WEB服务器插件安装

image-20250107140307231

查找到之后,点击安装即可【install】。之后重启,右键,点击对应的功能即可。

image-20250107140424083

使用静态WEB服务器,以文件夹的形式弄,不要打开一个独立页面,不然会报错:

9707f121-f3ee-4118-a129-57129a664e9e

使用工具快速生成页面模板:

新建的.html文件中,输入!或者html:5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
</head>
<body>
    
</body>
</html>

常见的网页标签

网页标签100多个,但是不用慌,常用的也就是20来个,名称也都比较简单,学习起来非常方便。

  • p 段落标签,一段是一个内容,段落之间存在间隙

  • hn(1~6)标题标签

  • br 换行标签

  • 文本修饰标签(加粗、加斜、加下划线、中划线等等效果)

  • 加粗 strong/b

  • 加斜 em/i

  • 下划线 u

  • 中划线 del

  • sub、sup

  • 标准块标签 div

  • 标准行内标签 span

标签的分类

标签的表现形式,可以将标签分为两大类:

  • 行内标签(inline)

    行内标签没有宽高,没有大小,行内标签不会自己占据一行,包裹的内容多大,它就多大。

  • 块标签(block)

    块标签存在宽高,意味着存在大小,块标签默占据一行。即便是调整了它的宽,也不会允许其他标签占据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见的页面标签</title>
    <style>
        div {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <h2>标题标签</h2>
    <p>段落标签</p>
    <p>
        <strong style="border: 1px solid red;width: 500px;">中国疾控中心</strong>监测结果显示,<b>全国流感病毒</b>阳性率快速上升,当前流感病毒
         <i>99%</i>以上为甲型H1N1流感亚型。
发热、寒战、咳嗽、咽痛、头痛、 <em>全身肌肉酸痛</em>、乏力……感染了甲流会有什么症状?甲流和普通感冒有什么区别?感染甲流后什么情况要就医?更多↓↓转需!
中国疾控中心监测结果显示,全国流感病毒阳性率快速上升,当前流感病毒99%以上为甲型H1N1流感亚型。
发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛、乏力……感染了甲流会有什么症状?甲流和普通感冒有什么区别?感染甲流后什么情况要就医?更多↓↓转需!
中国疾控中心监测结果显示,全国流感病毒阳性率快速上升,当前流感病毒99%以上为甲型H1N1流感亚型。
    </p>
    <p>
       <u> 发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛</u>、乏力……感染了甲流会有什么症状?甲流和普通感冒有什么区别?感染甲流后什么情况要就医?更多↓↓转需!
        中国疾控中心监测结果显示,全国流感病毒阳性率快速上升,当前流感病毒99%以上为甲型H1N1流感亚型。
        发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛、乏力……感染了甲流会有什么症状?甲流和普通感冒有什么区别?感染甲流后什么情况要就医?更多↓↓转需!
        中国疾控中心监测结果显示,全国流感病毒阳性率快速上升,当前流感病毒99%以上为甲型H1N1流感亚型。
        染甲流后什么情况要就医?更多↓↓转需!
    </p>
    <p>
        <del>发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛</del>  、乏力……感染了甲流会有什么症状?甲流和普通感冒有什么区别?感染甲流后什么情况要就医?更多↓↓转需!
        中国疾控中心监测结果显示,全国流感病毒阳性率快速上升,当前流感病毒99%以上为甲型H1N1流感亚型。
        <h1 style="border: 1px solid red;width: 500px;">发热、寒战、咳嗽、咽痛、头痛</h1>
        、全身肌肉酸痛、乏力……感染了甲流会有什么症状?甲流和普通感冒有什么区别?感染甲流后什么情况要就医?更多↓↓转需!
        中国疾控中心监测结果显示,全国流感病毒阳性率快速上升,当前流感病毒99%以上为甲型H1N1流感亚型。
        发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛、乏力……
        <span style="color: red;">感染了甲流</span>
        会有什么症状?甲流和普通感冒有什么区别?感
    </p>
    <p>
        a^2 = 9 <br>
        a <sup>2</sup> = 9 <br>
        a<sub>2</sub> = 100
    </p>
​
    <div>
        中国疾控中心监测结果显示,全国流感病毒阳性率快速上升,当前流感病毒99%以上为甲型H1N1流感亚型。
发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛、乏力……感染了甲流会有什么症状?甲流和普通感冒有什么区别?感染甲流后什么情况要就医?更多↓↓转需!
    </div>
    <div>
        中国疾控中心监测结果显示,全国流感病毒阳性率快速上升,当前流感病毒99%以上为甲型H1N1流感亚型。
发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛、乏力……感染了甲流会有什么症状?甲流和普通感冒有什么区别?感染甲流后什么情况要就医?更多↓↓转需!
    </div>
    <div>
        中国疾控中心监测结果显示,全国流感病毒阳性率快速上升,当前流感病毒99%以上为甲型H1N1流感亚型。
发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛、乏力……感染了甲流会有什么症状?甲流和普通感冒有什么区别?感染甲流后什么情况要就医?更多↓↓转需!
    </div>
    
</body>
</html>

媒体标签

媒体标签,就是多媒体标签,存在如下三种:

  • 图片标签

  • 视频标签

  • 音频标签

图片标签

图片标签,就是用来展示图片的标签,<img>标签就是图片标签。

必须存在某张图片,才能够展示图片。

属性:属性就是标签的属性,一般以键值对形式在标签的开始部分存在

<div id="box" name=”ljh“ title="呵呵呵">
</div>
id,name,title都是div标签的属性

img的属性:

  • src

  • alt

  • title

<h2>图片标签</h2>
<!-- 
    图片的地址:
        网络地址:推荐使用
        本地地址:
            相对路径:推荐使用
            绝对路径:不推荐
 -->
 <!-- 网络路径 -->
<img style="width: 400px;" src="https://picx.zhimg.com/v2-a096c2cd85dfcecba81581f6bfad8411_r.jpg?source=2c26e567" alt="">
​
<!-- 本地的绝对路径 -->
<img style="height: 200px;" src="D:\picture\dog.jpg" alt="">
​
<!-- 本地的绝对路径 -->
<img style="height: 200px;" src="./img/dog.jpg" alt="">
<img style="height: 200px;" src="img/dog.jpg" alt="这个是个可爱的小狗狗" title="这个是小狗狗的图片">
视频音频标签

视频和音频标签,早期存在很多兼容性问题,H5标准规定了视频和音频标签:

  • video

  • audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>图片标签</h2>
    <!-- 
        图片的地址:
            网络地址:推荐使用
            本地地址:
                相对路径:推荐使用
                绝对路径:不推荐
     -->
     <!-- 网络路径 -->
    <img style="width: 400px;" src="https://picx.zhimg.com/v2-a096c2cd85dfcecba81581f6bfad8411_r.jpg?source=2c26e567" alt="">
​
    <!-- 本地的绝对路径 -->
    <img style="height: 200px;" src="D:\picture\dog.jpg" alt="">
​
    <!-- 本地的绝对路径 -->
    <img style="height: 200px;" src="./img/dog.jpg" alt="">
    <img style="height: 200px;" src="img/dog.jpg" alt="这个是个可爱的小狗狗" title="这个是小狗狗的图片">
​
    <!-- 分割线标签 -->
    <hr>
​
    <h2>视频标签</h2>
    <video style="width: 700px;" controls autoplay muted
     src="E:\videos\python\9.11西工商\48_第八章_IO流入门和字符输入流.mp4"></video>
​
     <hr>
     <audio controls src="E:\videos\python\9.11西工商\48_第八章_IO流入门和字符输入流.mp4"></audio>
​
​
</body>
</html>

超链接标签

超链接标签非常重要,主要是用来实现页面跳转。

a标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <p>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.taobao.com" target="_self">淘宝</a>
        <a href="http://www.jd.com" target="_blank">京东</a>
​
        <hr>
​
        <a href="./常见的页面标签.html">本地的一个页面</a>
​
        <hr>
        <!-- 
            href不写不行
            href为空,则默认是当前路径(url)
        -->
        <a href="#">本地的一个页面</a>
    </p>
</body>
</html>

锚点功能:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid red;
            height: 1000px;
        }
    </style>
</head>
<body>
    <div id="top">
        <a href="#footer">到尾部</a>
        <a href="#content">到中间</a>
​
    </div>
    <div id="content">中间</div>
    <div id="footer">尾部</div>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <h1>用户信息</h1>

   <table border="1" cellpadding="0" cellspacing="0">
       <tr>
           <td>用户姓名</td>
           <td>用户性别</td>
           <td>用户年龄</td>
           <td>用户电话</td>
           <td>操作</td>
       </tr>

       <tr>
           <td>zhangsan</td>
           <td>男</td>
           <td>40</td>
           <td>110</td>
           <td>
               <a href="#">删除</a>
               <a href="#">修改</a>
           </td>
       </tr>
       <tr>
           <td>zhangsan</td>
           <td>男</td>
           <td>40</td>
           <td>110</td>
           <td>
               <a href="#">删除</a>
               <a href="#">修改</a>
           </td>
       </tr>
       <tr>
           <td>zhangsan</td>
           <td>男</td>
           <td>40</td>
           <td>110</td>
           <td>
               <a href="#">删除</a>
               <a href="#">修改</a>
           </td>
       </tr>
       <tr>
           <td>zhangsan</td>
           <td>男</td>
           <td>40</td>
           <td>110</td>
           <td>
               <a href="#">删除</a>
               <a href="#">修改</a>
           </td>
       </tr>
       <tr>
           <td>zhangsan</td>
           <td>男</td>
           <td>40</td>
           <td>110</td>
           <td>
               <a href="#">删除</a>
               <a href="#">修改</a>
           </td>
       </tr>
       <tr>
           <td>zhangsan</td>
           <td>男</td>
           <td>40</td>
           <td>110</td>
           <td>
               <a href="#">删除</a>
               <a href="#">修改</a>
           </td>
       </tr>
   </table>

   <h1>单元格合并</h1>
   <table border="1" cellpadding="0" cellspacing="0" width="800">
       <tr>
           <td>用户姓名</td>
           <td>用户性别</td>
           <td>用户年龄</td>
           <td>用户电话</td>
           <td>操作</td>
       </tr>

       <tr>
           <td>zhangsan</td>
           <td>男</td>
           <td rowspan="3">40</td>
           <td>110</td>
           <td>
               <a href="#">删除</a>
               <a href="#">修改</a>
           </td>
       </tr>
       <tr>
           <td>zhangsan</td>
           <td>男</td>
   
           <td>110</td>
           <td>
               <a href="#">删除</a>
               <a href="#">修改</a>
           </td>
       </tr>
       <tr>
           <td>zhangsan</td>
           <td>男</td>
       
           <td>110</td>
           <td>
               <a href="#">删除</a>
               <a href="#">修改</a>
           </td>
       </tr>
       <tr>
           <td>zhangsan</td>
           <td>男</td>
           <td>40</td>
           <td>110</td>
           <td>
               <a href="#">删除</a>
               <a href="#">修改</a>
           </td>
       </tr>
       <tr>
           <td>zhangsan</td>
           <td>男</td>
           <td>40</td>
           <td>110</td>
           <td>
               <a href="#">删除</a>
               <a href="#">修改</a>
           </td>
       </tr>
       <tr>
           <td>zhangsan</td>
           <td>男</td>
           <td>40</td>
           <td>110</td>
           <td>
               <a href="#">删除</a>
               <a href="#">修改</a>
           </td>
       </tr>
       <tr>
           <td colspan="5">总结:xxx人</td>
         
       </tr>
   </table>
</body>
</html
表格中的一些标签

  • table

  • tr (table row)

  • td (table data cell)

  • thead

  • tbody

  • th(不推荐使用),设置表头部分的

表格的合并单元格

和表格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 
        meta表示是不可见标签
        主要作用是用来修改页面属性
        如:页面的编码
        ……
    -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签及表格布局</title>
</head>
<body>
    <h2>用户信息</h2>
​
    <table border="1" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>用户编号</th>
                <th>用户姓名</th>
                <th>用户昵称</th>
                <th>用户年龄</th>
                <th>用户性别</th>
                <th>用户邮箱</th>
                <th>用户电话</th>
                <th>用户操作</th>
            </tr>
        </thead>
​
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>法外狂徒</td>
                <td>18</td>
                <td rowspan="3">男</td>
                <td>110@qq.com</td>
                <td>110</td>
                <td>
                    <a href="#">用户修改</a>
                    <button>用户删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>法外狂徒2</td>
                <td>20</td>
                <td>120@qq.com</td>
                <td>120</td>
                <td>
                    <a href="#">用户修改</a>
                    <button>用户删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>法外狂徒2</td>
                <td>20</td>
                <td>120@qq.com</td>
                <td>120</td>
                <td>
                    <a href="#">用户修改</a>
                    <button>用户删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>法外狂徒2</td>
                <td>20</td>
                <td>男</td>
                <td>120@qq.com</td>
                <td>120</td>
                <td>
                    <a href="#">用户修改</a>
                    <button>用户删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>法外狂徒2</td>
                <td>20</td>
                <td>男</td>
                <td>120@qq.com</td>
                <td>120</td>
                <td>
                    <a href="#">用户修改</a>
                    <button>用户删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>法外狂徒2</td>
                <td>20</td>
                <td>男</td>
                <td>120@qq.com</td>
                <td>120</td>
                <td>
                    <a href="#">用户修改</a>
                    <button>用户删除</button>
                </td>
            </tr>
            <tr>
                <td colspan="9">
                    总计:共xxxx人,xxxxxx
                </td>
            </tr>
        </tbody>
    </table>
    
</body>
</html>

语义化标签

H5提出的新特性,语义化的概念——正确的标签干正确的事。

定义大量望名而知其意标签来包裹内容,如地址,不在使用div,而是使用address,导航,也不再使用div,而是nav,文章使用article。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid red;
        }
        .top {
            height: 300px;
            border: 1px solid red;
        }
        .content {
            height: 2000px;
            border: 1px solid red;
        }
        .footer {
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!-- <div class="top">
​
    </div>
    <div class="content">
​
    </div>
    <div class="footer">
​
    </div> -->
​
    <header class="top">
​
    </header>
​
    <section class="content">
​
​
    </section>
​
    <footer class="footer">
​
        <address>
            西安鸥鹏互联:融鑫路xxx号,太白南路地铁口。
        </address>
    </footer>
</body>
</html>

列表标签

  • 有序列表

  • 无序列表

  • 数据列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        ol, ul {
            list-style: none;
            list-style-image: url(img/point.png);
        }
         
    </style>
</head>
<body>
​
    <h1>有序列表</h1>
    <ol>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
    </ol>
​
    <h1>无序列表</h1>
    <ul>
        <li>南宁“菜篮子”公交专线暖心升级</li>
        <li>南宁“菜篮子”公交专线暖心升级</li>
        <li>南宁“菜篮子”公交专线暖心升级</li>
        <li>南宁“菜篮子”公交专线暖心升级</li>
        <li>南宁“菜篮子”公交专线暖心升级</li>
        <li>南宁“菜篮子”公交专线暖心升级</li>
        <li>南宁“菜篮子”公交专线暖心升级</li>
    </ul>
​
    <h2>数据列表</h2>
    <dl>
        <dt>国内新闻</dt>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
​
        <dt>火星新闻</dt>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
​
        <dt>国外新闻</dt>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
    </dl>
    
</body>
</html>

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

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

相关文章

Vue2+OpenLayers调用WMTS服务初始化天地图示例(提供Gitee源码)

目录 一、案例截图 二、安装OpenLayers库 三、WMTS服务详解 四、完整代码 五、Gitee源码 一、案例截图 二、安装OpenLayers库 npm install ol 三、WMTS服务详解 WMTS&#xff08;Web Map Tile Service&#xff09;是一种标准的网络地图服务协议&#xff0c;用于提供基于…

Linux syslog 运行机制

Busybox的syslogd认识与使用 syslogd 的基本工作原理&#xff1a; syslogd 是一个系统日志守护进程&#xff0c;它接收来自各种进程和系统服务的日志消息&#xff0c;并根据配置将这些消息存储到不同的日志文件中。 syslogd日志记录器由两个守护进程&#xff08;klogd&#x…

离线录制激光雷达数据进行建图

目前有一个2D激光雷达&#xff0c;自己控制小车运行一段时间&#xff0c;离线获取到激光雷达数据后运行如下代码进行离线建图。 roslaunch cartographer_ros demo_revo_lds.launch bag_filename:/home/firefly/AutoCar/data/rplidar_s2/2025-01-08-02-08-33.bag实际效果如下 d…

SDK调用文心一言如何接入,文心一言API接入教程

一、前期准备 注册百度智能云账号&#xff1a; 前往百度智能云官网注册一个账号。这是接入文心一言API的基础。 了解API接口&#xff1a; 在百度智能云开放平台中&#xff0c;找到文心一言API的详情页&#xff0c;了解提供的API接口类型&#xff08;如云端API、移动端API、离线…

CNN张量输入形状和特征图

CNN张量输入形状和特征图 这个是比较容易理解的张量的解释&#xff0c;比较直观 卷积神经网络 在这个神经网络编程系列中&#xff0c;我们正在逐步构建一个卷积神经网络&#xff08;CNN&#xff09;&#xff0c;所以让我们看看CNN的张量输入。 ​ ​ 在最后两篇文章中&…

【Linux】4.Linux常见指令以及权限理解(2)

文章目录 3. Linux指令3.1 ls指令和rm指令补充3.2 man指令&#xff08;重要&#xff09;3.3cp指令&#xff08;重要&#xff09;输出重定向3.3.1ubuntu20.04如何安装tree 3.4 mv指令&#xff08;重要&#xff09;mv指令更改文件名mv指令更改目录名 如何看待指令指令的重命名3.5…

硬件设计-齐纳管

目录 摘要 详情 齐纳管的工作电流、 摘要 齐纳管&#xff08;Zener Diode&#xff09;是一种特殊的二极管&#xff0c;它能够在特定的反向电压下保持电流稳定。正常情况下&#xff0c;二极管只允许正向电流通过&#xff0c;而阻止反向电流流过。而齐纳管在一定的反向电压下可…

C语言进阶——1数据的存储

目录 1. 数据类型介绍1.1 类型的基本归类&#xff1a;1.1.1 整形家族1.1.2 浮点型家族1.1.3 构造类型&#xff1a;1.1.4.指针类型1.1.5 void 表示空类型&#xff08;无类型&#xff09; 2. 整形在内存中的存储2.1 原码、反码、补码2.1.1 示例 20在计算机中的存储 2.2 大小端2.2…

【论文阅读】MAMBA系列学习

Mamba code&#xff1a;state-spaces/mamba: Mamba SSM architecture paper&#xff1a;https://arxiv.org/abs/2312.00752 背景 研究问题&#xff1a;如何在保持线性时间复杂度的同时&#xff0c;提升序列建模的性能&#xff0c;特别是在处理长序列和密集数据&#xff08;如…

数据结构——查找二叉树

二叉搜索树的概念 如图所示&#xff0c;二叉搜索树&#xff08;binary search tree&#xff09;满足以下条件。 对于根节点&#xff0c;左子树中所有节点的值 < 根节点的值 < 右子树中所有节点的值。任意节点的左、右子树也是二叉搜索树&#xff0c;即同样满足条件 1. …

【并发多个请求并失败重发】

文章目录 需求思路代码 需求 可以一次发任意多个请求&#xff0c;如果有失败&#xff0c;则重发失败的请求&#xff0c;知道所有的都成功&#xff0c;或者超出最大重试次数&#xff0c;才返回最终结果。封装成可复用的并发请求工具。 实际的应用场景&#xff1a;数据太大&…

hutool糊涂工具通过注解设置excel宽度

import java.lang.annotation.*;Documented Retention(RetentionPolicy.RUNTIME) Target({ElementType.METHOD, ElementType.FIELD, ElementType.PARAMETER}) public interface ExcelStyle {int width() default 0; }/*** 聊天记录*/ Data public class DialogContentInfo {/**…

Redis高频知识点

Redis 目录 1 Redis是AP的还是CP的&#xff1f;2 介绍一下Redis的集群方案&#xff1f;3 什么是Redis的数据分片&#xff1f;4 Redis为什么这么快&#xff1f;5 Redis 的事务机制是怎样的&#xff1f;7 Redis的持久化机制是怎样的&#xff1f;8 Redis 的过期策略是怎么样的&a…

shell程序题1.11

作业&#xff1a; shell 脚本写出检测 /tmp/size.log 文件如果存在显示它的内容&#xff0c;不存在则创建一个文件将创建时间写入。 #!/bin/bash#-f 选项来判断 /tmp/size.log 文件是否是一个常规文件if [ -f "/tmp/size.log" ];thencat /tmp/size.logecho "…

Docker: 教程07 - ( 如何对 Docker 进行降级和升级)

如果我们使用 docker 来管理容器&#xff0c;那么保持 docker 引擎的更新将会是十分重要的&#xff0c;这一篇文章我们将会讨论如何对Docker 进行降级和升级。 准备工作 - docker 环境 我们需要拥有一个安装好 docker 的运行环境。 如果你需要了解如何安装 docker 可以通过如…

LabVIEW与CANopen常见问题及解决方法

1. 固件版本不匹配问题 ​ 错误信息&#xff1a; "Firmware image version is incompatible with C Series modules. Solution: Update the firmware by following the instructions in Firmware_Update_Instructions.html, accessible from the National Instruments\NI…

《框架程序设计》期末复习

目录 Maven 简介 工作机制&#xff08;★&#xff09; 依赖配置&#xff08;★&#xff09; Maven命令 MyBatis 入门 单参数查询&#xff08;★&#xff09; 多参数查询&#xff08;★★★&#xff09; 自定义映射关系&#xff08;★★★&#xff09; 基本增删改查操…

51单片机——I2C-EEPROM

I2C&#xff1a;总线标准或通信协议 EEPROM&#xff1a;AT24C02芯片 开发板板载了1个EEPROM模块&#xff0c;可实现IIC通信 1、EEPROM模块电路&#xff08;AT24C02&#xff09; 芯片的SCL和SDA管脚是连接在单片机的P2.1和P2.0上 2、I2C介绍 I2C&#xff08;Inter&#xff…

了解npm:JavaScript包管理工具

在JavaScript的生态系统中&#xff0c;npm&#xff08;Node Package Manager&#xff09;无疑是一个举足轻重的存在。它不仅是Node.js的包管理器&#xff0c;更是前端开发不可或缺的一部分&#xff0c;为开发者提供了丰富的包资源、便捷的包管理以及强大的社区支持。本文将深入…

Vscode辅助编码AI神器continue插件

案例效果 1、安装或者更新vscode 有些版本的vscode不支持continue,最好更新到最新版,也可以直接官网下载 https://code.visualstudio.com/Download 2、安装continue插件 搜索continue,还未安装的,右下脚有个Install,点击安装即可 <