『 前端三剑客 』:HTML常用标签

news2024/12/22 15:26:18

HTML中常用标签

  • HTML中常用标签
    • 一 . 认识HTML标签
    • 二 . HTML标签介绍
    • 三 . 案例应用

一 . 认识HTML标签

在HTML中标签是以成对的结构出现的,在HTML当中代码是通过标签来组织的 , 下面通过见得的Hello World的展现来显示歘HTML 标签的结构

<html>
    <head></head>
    <body>
        Hello  World!
    </body>
</html>

如上述代码块所示,形如 用尖括号进行组织的,成对出现的这个东西就叫做标签 (tag) , 也可以叫做元素(element);

  • 通常情况下一个标签是成对出现的, 开始标签, 结束标签 , 这两个标签之间是标签的内容.(少数标签是以一个标签出现的,这些标签也叫做单标签)
  • 标签之间一般是可以进行嵌套的,一个标签之间的内容,可以使一个或者多个标签,此时,这些标签之间就构成了一个树形结构.
  • 可以在开始标签中,给标签赋予属性 , 属性相当于是键值对,可以有一个或者多个.

上述代码段中html是这个文件当中的最顶层标签, 即树根节点 , head当中存放的是这个页面的一些属性, body中存放的是这个页面当中包含哪些内容.

下面我们需要对HTML中都支持哪些标签,每个标签的作用什么,每个标签都有哪些关键属性进行介绍.

二 . HTML标签介绍

在VS Code 和 IDEA 中编写 html代码时 , 可以使用 快捷键来快速生成代码框架 , 在VS中输入 ! ( 英文) , 按下 tab 键 , 就可以生成一个基本的代码框架 , 此时只需要对body的内容进行编写即可 .

<!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>
    Hello World!
</body>
</html>

在这个生成的代码框架中 , 大致介绍了这个页面的一些基本属性

image-20230304162442962

下面对html中的常用标签进行介绍:

  • 注释标签

html中代码的注释通常与其他语言中的注释差别较大 , 在 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>
    <!-- 这是一个html中的注释标签 -->
    Hello World!
</body>
</html>

在页面中F12可以查看源代码 , 查看注释

image-20230304170344279

在VS Code 当中, 通过 ctrl + / 可以是实现对代码的快速注释 .

  • 标题标签

在html中通过 h1 - h6 来表示一级标题 - 六级标题 ,数字越大则 ,字体越小 .

</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

显示的效果如下所示 :

在 html 中标签是否换行 ,和代码的编写无关 ,而与标签自身的性质有关 , 标题标签当中, 每个标签都是独占一行的.

  • 段落标签

html中使用

来表示段落标签 , 使用方法为将段落内容写到

之间 , 为了清楚地显示每个段落之间的效果 ,使用 Lorem来生成一段随机的文本 .
</head>
<body>
    <!--这是段落标签-->
    <p> 这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p>
    <p> 这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p>
    <p> 这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p>
    <p> 这是一个段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam illo quasi delectus necessitatibus reprehenderit atque explicabo labore inventore hic laudantium suscipit, ipsum veniam amet repellendus cupiditate consequuntur tenetur ad. Officiis?</p> 
</body>
</html>

image-20230304172330187

每个段落之间 , 要进行换行和明显的段间距 ,可以通过 CSS 来进行段间距的调整 .

  • 换行标签 : br

html 中使用 br 标签来对文本进行换行 , 对上述的段落中添加 br 标签 , 实现换行的效果 .

br 标签也是一个单标签 , 不需要结束标签

image-20230304173145444

  • 格式化标签

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>
    <!-- 这是格式化标签,不独占一行, 加上<br>换行 -->
    <strong>加粗</strong>
    <b>加粗</b>
    <br>
    <em>倾斜</em>
    <i>倾斜</i>
    <br>
    <del>删除线</del>
    <s>删除线</s>
    <br>
    <ins>下划线</ins>
    <u>下划线</u>
</body>
</html>

展示的效果如下 :

image-20230304173610033

上述的格式化标签都是不独占一行的 , 需要添加换行标签 , 实际的开发过程当中通常使用 CSS实现上述的效果

  • 图片标签

使用 img 标签来实现 图片的显示效果 , 其中 img 标签当中必须要包含src属性 , 来表述图片的路径 , 其中包括相对路径和绝对路径 .

  • 相对路径 : 以 html 文件所在的位置为基准 , 找到图片的位置

    • 同级路径: 直接写文件名即可 (或者 ./)

    • 下一级路径: image/1.jpg

    • 上一级路径: …/image/1.jpg

  • 绝对路径 : 一个完整的磁盘路径, 或者网络路径. 例如 :

    • 磁盘路径 : E:\test.jpg
    • 网络路径 : https://tse1-mm.cn.bing.net/th/id/OIP-C.xq6cOv82ubIhJY9qkFd5AgHaEK?pid=ImgDet&rs=1
  • img 标签中的其他属性 :

alt 标签 : 当图片不能正确显示时 , 就会显示出一个替换的文字

image-20230304214851958

image-20230304214905944

title标签 : 鼠标悬停在图片上时 , 就会显示出一段替换文本

image-20230304215459998

image-20230304215448389

width / height 描述图片的尺寸 ,控制宽度和高度 .

 <img src="./test.jpg width="500px" height="800px">
  • 超链接标签

    html中的超链接标签使用是a标签 , a 标签中的两个属性 : href 和 target 属性

    • href : 必须具备, 表示点击后会跳转到哪个页面, 覆盖原来的页面 .
    • target : 一般写作 targrt = “_blank” , 作用是跳转至新的页面 , 不会覆盖原来的页面 .
<!-- 这是一个超链接标签 其中的链接也可以替换为ip地址-->
<body>
    <a href="https://www.baidu.com">百度</a>
    <!-- target 使用, 不会覆盖原来的页面,打开了一个新的页面-->
    <a href="https://www.baidu.com" target="_blank">百度</a>
</body>

image-20230304221555808

  • 表格标签

html中使用table 作为表格标签 , 其中 tr 标签 表示一行 , td 标签表示一个单元格 , th 标签表示表头的单元格 .

table标签当中可以添加以下属性 :

  • width 和 height 属性 , 对表格的长宽进行设置
  • align 属性 : 表示的是表格相对于周围元素的对齐方式 center/ left / right
  • border 属性对表格添加边框线 , 1 表示有边框 (数字越大边框越粗) , “” 表示没有边框.
  • cellspacing 属性 表示对单元格之间的距离进行设置 , 一般默认为 2px , 通常情况下 为了将表格的边框设置为完全填充 , 一般将此属性设置为 0 px
  • cellpadding 属性: 表示单元格中的内容距离边框的距离 , 一般默认为2 px

为了使表格看起来更加的美观 ,通常设置 css 类来使表格当中的文字居中 .

示例:

<!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>
    <!-- css使表格中的文字居中 -->
    <style>
        td{
            text-align: center;
        }
    </style>
</head>
<!-- 这是一个表格标签 -->
<body>
<!-- 设置table标签的相关属性 -->
    <table width="500px" height="300px" border="1px" cellspacing="0" cellpadding = "5">
        <tr>
            <th>姓名</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>1233</td>
        </tr>
        <tr>
            <td>宋六</td>
            <td>1156</td>
        </tr>
    </table>
</body>
</html>

image-20230304224146310

  • 当对 table 标签中的 align 属性进行设置时 , 使表格相对于页面周围元素位于 居中 / 左侧 / 右侧
<!-- 将表格设置为水平居中 -->
<table border="1px" cellspacing="0" cellpadding = "5" align="center">

image-20230304225000794

  • 列表标签

列表标签的作用通常是为了对元素进行布局,包括有序列表和无序列表两种 ,一般在表示一个并列的项时,就会使用无序列表

有序列表 : ol li 无序列表:ul li

<body>
    <h3>我的列表如下</h3>
<!-- 有序列表 -->
    <ol>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
    </ol>
<!-- 无序列表 -->
    <ul>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
    </ul>
</body>

显示效果如下所示:

image-20230304230011517

  • 表单标签

表单标签是让用户输入的重要途径 ,其中包括表单域和表单控件,最常用的表单控件是input标签.

  • input标签

使用input 标签可以实现各种输入控件, 包括单行文本框,密码框,按钮,单选框和复选框等;

  • input 标签属性

    • type : 取值种类有很多(必须有) , 包括text , password , button , checkbox,image ,radio等
    • name : 给input标签起了个名字 , 对于单选框,名字相同的按钮才能够多选一.
    • value : input标签中的默认值
    • checked : 用来设置单选框和复选框中默认被选中的 .
    • maxlength : 设置最大长度 .
  • input标签使用

    • 文本框
     <input type="text">
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ysX9nost-1680319948957)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/image-20230401113104992.png)]

    • 密码框
     <input type="password">
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tnrqn5XV-1680319948958)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/image-20230306093349526.png)]

    • 单选框

    选择男女中的一个 , 默认选择为男

    <input type="radio" name ="sex" checked = "checked"><input type="radio" name = "sex">

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xTBg7qEG-1680319948959)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/image-20230306093911366.png)]

    • 复选框
    <h4>今天干什么</h4>
    <input type="checkbox">写博客
    <input type="checkbox">刷力扣
    <input type="checkbox">学html
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d9EvVG92-1680319948961)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/image-20230306094448229.png)]

    • 普通按钮
     <input type="button" value="我是个按钮">
    

    此处点击按钮之后没有反应, 后边搭配 js 使用可以显示点击效果

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9mZTtcR-1680319948961)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/image-20230306100230739.png)]

    • 提交按钮(搭配form使用)
    <form action="test.html">
        <input type="text" name="username">
        <input type="submit" value="提交">
    </form>
    

    提交按钮的外观和button一差不多 , 会触发form和服务器之间的交互.

    • 文件选择框

    点击之后会触发文件资源管理器 , 选择文件进行上传 .

     <input type="file">
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kBnbH3VP-1680319948962)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/image-20230306101147314.png)]

  • select 标签

select标签主要应用于下拉菜单 , 在option标签中定义下拉菜单中的选项

selected=“selected” 表示默认选中, 如果不指定默认选中, 则默认为第一个

 <select>
        <option>2010</option>
        <option>2011</option>
        <option>2012</option>
        <option>2013</option>
        <option>2014</option>
        <option>2015</option>
    </select>

    <select>
        <option>北京</option>
        <option selected="selected">上海</option>
        <option>郑州</option>
        <option>西安</option>
     </select>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nM3lkSzw-1680319948963)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/image-20230306101732436.png)]

  • textarea 标签

多行编辑框 : 文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性

<textarea name="" id="" cols="30" rows="10"></textarea>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VhWR1tpd-1680319948964)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/image-20230306102647356.png)]

上述的标签也可以叫做控件 , 是构成一个图形化界面的基本要素


  • 无语义标签

    div 标签和 span 标签常用来进行网页布局 .

    • div 是独占一行的, 是一个大盒子. 常用于定义 html文档中的一个分割区块和一个区域部分 ,常用于组合块级元素 , 以便于通过 css 来对这些元素进行格式化

    • span 不独占一行, 是一个小盒子. 被用来组合文档中的行内元素。

    <div>
      <span>html</span>
      <span>css</span>
      <span>js</span>
    </div>
    
    <div>
       <span>c</span>
       <span>java</span>
       <span>c++</span>
       <span>go</span>
     </div>
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Rmfufrr-1680319948965)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/image-20230306104213406.png)]

三 . 案例应用

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>简历信息页</title>
</head>
<!-- 简历展示信息 -->
<body>
    <h1>张三</h1>
    <!--基本信息  -->
    <div>
        <h2>基本信息</h2>
        <img width = "500px"src="test.jpg">
        <p>
            <span>求职意向:</span>
            <span>Java开发工程师</span>
        </p>
        <p>
            <span>联系电话:</span>
            <span>XXX-XXXX-XXXX</span>
        </p>
        <p>
            <span>邮箱</span>
            <span>XXX@foxmail.com</span>
        </p>
        <p>
            <a href="https://github.com/echoyter">我的github博客</a>
        </p>
        <p>
            <a href="https://www.csdn.net/">我的CSDN博客</a>
        </p>
    </div>
    <!-- 教育背景 -->
    <div>
        <h2>教育背景</h2>
        <ol>
            <li>1990-1996 幼儿园 </li>
            <li>1996-2002 小学</li>
            <li>2002-2005 初中</li>
            <li>2005-2008 高中</li>
            <li>2008-2012 本科</li>
        </ol>

        <h2>专业技能</h2>
        <ul>
            <li>Java基础语法扎实</li>
            <li>数据结构熟练应用</li>
            <li>熟悉计算机网络理论</li>
            <li>掌握Web开发功能</li>
        </ul>

        <h2>我的项目</h2>
        <ol>
            <li>留言墙</li>
            <p>
                <span>开发时间:<span>
                <span>2008年9月到2008年12月</span>
            </p>
            <p>功能介绍</p>
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名留言</li>
            </ul>
            <li>学习小助手</li>
            <p>
                <span>开发时间:</span>
                <span>2008.9-2008.12</span>
            </p>
            <p>功能介绍</p>
            <ul>
             <li>支持错题检索</li>
             <li>支持同学探讨</li> 
            </ul>
        </ol>
    </div>
    <div>
        <h2>个人评价</h2>
        <p>在校期间学习成绩优良,多次获得奖学金</p>
    </div>
</body>
</html>

效果如下图所示 :

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dcNPZrPF-1680319948965)(C:/Users/love46/AppData/Roaming/Typora/typora-user-images/image-20230306111147615.png)]

上述的 html 标签只是描述了页面的骨架结构 , 下篇中我们将通过 css 的学习来对页面进行美化

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

mac使用anaconda安装人声分离开源工具spleeter

0. 以下为一步步自己摸索的成功安装过程 1. 安装 spleeter 注&#xff1a;anaconda 的虚拟环境 conda install spleeter太慢 pip install spleeter下载卡住 (tensorflow) Robin-macbook-pro:~ robin$ pip install spleeter Collecting spleeterWARNING: Retrying (Retry(t…

伺服电机的刚性和惯量如何理解

要说刚性&#xff0c;先说刚度。 刚度是指材料或结构在受力时抵抗弹性变形的能力&#xff0c;是材料或结构弹性变形难易程度的表征。 材料的刚度通常用弹性模量E来衡量。在宏观弹性范围内&#xff0c;刚度是零件荷载与位移成正比的比例系数&#xff0c;即引起单位位移所需的力…

OpenAI 领导层建议成立人工智能国际监管组织

人工智能的发展非常迅速&#xff0c;其潜在风险也变得越来越明显&#xff0c;为此&#xff0c;OpenAI的领导层认为&#xff0c;世界需要一个类似于核能监管机构的国际人工智能监管机构--要尽快建立&#xff0c;但也不能操之过急。 在该公司的一篇博文中(https://openai.com/blo…

javaScript蓝桥杯----图⽚⽔印⽣成

目录 一、介绍二、准备三、⽬标四、代码五、完成 一、介绍 很多⽹站都会通过给图⽚添加⽔印的形式来标记图⽚来源&#xff0c;维护版权。前端⽣成⽔印通常是通过canvas 实现&#xff0c;但实际上我们也可以直接利⽤ CSS 来实现图⽚⽔印&#xff0c;这样做会有更好的浏览器兼容…

全球前十!小米积极推动5G标准制定,科技引领高速发展

5G是推动人类社会数字化转型升级的关键支撑&#xff0c;为打造全移动和全连接的智能社会提供技术基础&#xff0c;巨大且深刻地改变着我们的生活。 近日&#xff0c;中国信息通信研究院发布了《全球5G标准必要专利及标准提案研究报告&#xff08;2023年&#xff09;》&#xff…

【新版】系统架构设计师 - 纲要章节汇总

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 随时更新&#xff0c;请持续关注 … \color{#FF7D00}随时更新&#xff0c;请持续关注… 随时更新&#xff0c;请持续关注… 文章目录 上午题 - 综合知识计算机公共基础知识架构核心知识新增技术知识知识点地图 下午…

免费的配音软件--- tts-vue 软件 下载安装过程

视频效果 tts-vue 软件 图片效果 软件包含有; 语言: 高棉语(柬埔寨) 马耳他语(马耳他) 马来语(马来西亚) 马拉雅拉姆语(印度) 马拉地语(印度) 马其顿语(北马其顿) 韩语(韩国) 阿拉伯语(黎巴嫩) 阿拉伯语(阿昙) 阿拉伯语(阿拉伯联合酋长国) 阿拉伯语(阿尔及利亚) 阿拉伯语(约…

高速信号处理卡 光纤接入卡 设计方案: 519-基于ZU19EG的4路100G光纤的PCIe 加速计算卡

519-基于ZU19EG的4路100G光纤的PCIe 加速计算卡 一、板卡概述 本板卡系我司自主设计研发&#xff0c;基于Xilinx公司Zynq UltraScale MPSOC系列SOC XCZU19EG-FFVC1760架构&#xff0c;支持PCIE Gen3x16模式。其中&#xff0c;ARM端搭载一组64-bit DDR4&#xff0c;总容…

Vue.js 中的 $emit 和 $on 方法有什么区别?

Vue.js 中的 $emit 和 $on 方法有什么区别&#xff1f; 在 Vue.js 中&#xff0c;$emit 和 $on 方法是两个常用的方法&#xff0c;用于实现组件间的通信。它们可以让我们在一个组件中触发一个自定义事件&#xff0c;并在另一个组件中监听这个事件&#xff0c;从而实现组件间的…

【AI实战】大语言模型(LLM)有多强?还需要做传统NLP任务吗(分词、词性标注、NER、情感分类、知识图谱、多伦对话管理等)

【AI实战】大语言模型&#xff08;LLM&#xff09;有多强&#xff1f;还需要做传统NLP任务吗&#xff08;分词、词性标注、NER、情感分类、多伦对话管理等&#xff09; 大语言模型大语言模型有多强&#xff1f;分词词性标注NER情感分类多伦对话管理知识图谱 总结 大语言模型 大…

PIC16F18877学习(一)

为什么要在PIC控制器中使用#pragma configs 这些设置位于程序代码之外的闪存中。 PIC一通电&#xff0c;它们就可用了&#xff0c;无论它们写在代码的哪个位置。这很重要&#xff0c;因为有时在执行程序之前需要它们。例如&#xff0c;有一些设置可以选择时钟源&#xff0c;并…

Docker 安装 Jenkins 并部署 Maven 项目

一、前言 在开始之前&#xff0c;我们需要保证系统中已经安装了Docker、JDK、Maven。 二、Docker 拉取镜像 我这里使用的是 2.344 版本的 Jenkins&#xff0c;拉取命令如下&#xff1a; docker pull jenkins/jenkins:2.344需要稍微等一会&#xff0c;等待拉取完成。 镜像下载…

GIT码云SSH公钥配置

前言&#xff1a;当你想要从Git码云上克隆或推送代码时&#xff0c;需要进行身份验证。为了进行身份验证&#xff0c;Git码云使用SSH协议&#xff0c;其中包含一个公钥和一个私钥。公钥存储在你的计算机上&#xff0c;并与你的Git码云账户相关联。私钥则必须保密&#xff0c;只…

阿里云学生服务器申请攻略(先学生认证然后完成实验任务)

阿里云学生服务器免费申请&#xff0c;之前是云翼计划学生服务器9元/月&#xff0c;现在是高校计划&#xff0c;学生服务器可以免费申请&#xff0c;先完成学生认证即可免费领取一台云服务器ECS&#xff0c;配置为2核2G、1M带宽、40G系统盘&#xff0c;在云服务器ECS实例过期之…

ROS:VScode开发话题(msg)、服务(srv)、动作(action)、TF,解决 无法打开源文件

一.解决 无法打开源文件 出错原因&#xff1a;系统没有找到.h文件对应的路径。 在编写完msg、srv、action文件后&#xff0c;要进行编译&#xff08;catkin_make&#xff09; . 编译之后&#xff0c;msg、srv、action会生成相应的.h文件。 其对应的.h文件目录在devel/includ…

python解决坐标系两点之间有多少种走法问题

问题&#xff1a;在坐标系中第一象限内的点P&#xff08;x,y&#xff09; x<6&#xff0c;y<6. 到终点&#xff08;5,5&#xff09;有多少种走法&#xff1f;并显示出现所经过的点坐标 限制条件&#xff1a;从起点坐标只能向上或者向右走。其中&#xff08;4,3&…

从零开始学习JavaScript:轻松掌握编程语言的核心技能⑥

从零开始学习JavaScript&#xff1a;轻松掌握编程语言的核心技能⑥ 1. JavaScript 对象2. JavaScript 类3. JavaScript prototype&#xff08;原型对象&#xff09;4. prototype 继承5. JavaScript Number 对象5.1 JavaScript 数字 6. JavaScript 字符串&#xff08;String&…

某麦网apk抢票接口加密参数分析(一)

某麦网apk抢票接口加密参数分析&#xff08;一&#xff09; 当下的一些火爆活动&#xff0c;如音乐节、演唱会等需要购买门票的活动&#xff0c;常常会引发一些网络抢票软件的出现。 而某麦网也不例外&#xff0c;很多人使用抢票软件来抢购某些活动的门票。 为了防止这种情况…

基于决策树的泰坦尼克号数据集回归预测

目录 1、作者介绍2、决策树算法2.1 决策树原理2.1.1 基本原理2.1.2 节点的概念 2.2 构建决策树2.3 决策树优缺点 3、实验设计3.1 数据集简介3.2 代码实现3.3 运行结果 4、参考链接 1、作者介绍 任正福&#xff0c;男&#xff0c;西安工程大学电子信息学院&#xff0c;2022级研…

【大数据工具】Kafka伪分布式、分布式安装和Kafka-manager工具安装与使用

Kafka 安装 Kafka 安装包下载地址&#xff1a;https://archive.apache.org/dist/kafka/ 1. Kafka 伪分布式安装 1. 上传并解压 Kafka 安装包 使用 FileZilla 或其他文件传输工具上传 Kafka 安装包&#xff1a;kafka_2.11-0.10.0.0.tgz解压安装包 [rootbigdata software]# …