HTML -- 常用标签及示例总结

news2025/3/1 16:15:58

文章目录

  • HTML常用标签
    • 1 标签语义
      • 1.1 标签属性
    • 2 标题标签 h1 - h6
    • 3 段落和换行标签
      • 3.1 段落标签
      • 3.2 换行标签
    • 4 文本格式化标签
    • 5 div和span
    • 6 图像标签
    • 7 超链接标签
      • 7.1 链接的语法格式
      • 7.2 链接分类
    • 8 表格标签
      • 8.1 表格的主要作用
      • 8.2 表格的基本语法
      • 8.3 表头单元格标签
      • 8.4 表格属性
      • 8.5 表格结构标签
      • 8.6 合并单元格
    • 9 列表标签
      • 9.1 无序列表
      • 9.2 有序列表
      • 9.3 自定义列表
    • 10 表单标签
      • 10.1 为什么需要表单
      • 10.2 表单的组成
      • 10.3 表单域
      • 10.4 表单控件（表单元素）
      • 10.5 `<input>` 表单元素
      • 10.6 `<label>`标签
      • 10.7 `<select>`标签
      • 10.8 `<textarea>`表单元素
      • 10.9 表单总结

HTML常用标签

1 标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

1.1 标签属性

标签属性注意点：

① 标签可以拥有多个属性，必须写在标签名的后面。

② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

2 标题标签 h1 - h6

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，

即<h1> - <h6> 。

标签语义：作为标题使用，并且依据重要性递减。

特点：

  1. 加了标题的文字会变的加粗，字号也会依次变大。

  2. 一个标题独占一行。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
    <body>
        <h1>标题标签</h1>
        <h1>标题一共六级选,</h1>
        <h2>文字加粗一行显。</h2>
        <h3>由大到小依次减，</h3>
        <h4>从重到轻随之变。</h4>
        <h5>语法规范书写后，</h5>
        <h6>具体效果刷新见。</h6>
    </body>
</html>

image-20221209114338567

3 段落和换行标签

3.1 段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

标签语义：可以把 HTML 文档分割为若干段落。

<p> 我是一个段落标签 </p>

单词 paragraph [ˈpærəgræf] 的缩写，意为段落。

特点：

  1. 文本在一个段落中会根据浏览器窗口的大小自动换行。

  2. 段落和段落之间保有空隙。

3.2 换行标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br />。

标签语义：强制换行。

<br />

单词 break 的缩写，意为打断、换行。

特点：

  1. <br /> 是个单标签。

  2. <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

标签语义: 突出重要性, 比普通文字更重要

image-20221209164143261

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本格式化标签</title>
</head>
<body>
    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>
</body>
</html>

image-20221209141259107

5 div和span

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。

<div> 这是头部 </div> 
<span> 今日价格 </span>

div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。

特点：

  1. <div> 标签用来布局，一行只能放一个<div>。 大盒子

  2. <span> 标签用来布局，一行上可以多个 <span>。小盒子

6 图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

<img src="图像URL" />

单词 image 的缩写，意为图像。

src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

所谓属性：简单理解就是属于这个图像标签的特性。

image-20221209164148528

宽度和高度只修改一个的话，另一个会等比例缩放，所以一般只修改一个，不然图像会失真

7 超链接标签

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

  1. 链接的语法格式

  2. 链接的分类

7.1 链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

单词 anchor [ˈæŋkə®] 的缩写，意为：锚。

两个属性的作用如下：

image-20221209164154015

7.2 链接分类

  1. 外部链接: 例如 <a href="http:// www.baidu.com "> 百度</a>。

  2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 <a href="index.html"> 首页 </a>。

  3. 空链接: 如果当时没有确定链接目标时，<a href="#"> 首页 </a> 。

  4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。

  5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

  6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.

    1. 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如：<a href="#two"> 第2集 </a>
    2. 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超链接标签</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank"> 腾讯</a>
    target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>
    <h4>2.内部链接: 网站内部页面之间的相互链接</h4>
    <a href="gongsijianjie.html" target="_blank">公司简介</a>
    <h4>3.空链接:#</h4>
    <a href="#">公司地址</a>
    <h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="img.zip">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg"/></a>
</body>
</html>

8 表格标签

表格是实际开发中非常常用的标签

8.1 表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

表格不是用来布局页面的,而是用来展示数据的

image-20221209143936831

8.2 表格的基本语法

  1. <table> </table> 是用于定义表格的标签。

  2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。

  3. <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

  4. 字母 td 指表格数据（table data），即数据单元格的内容。

<table>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>

示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
    <body>
        <table>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td>刘德华</td>
                <td>男</td>
                <td>56</td>
            </tr>
            <tr>
                <td>张学友</td>
                <td>男</td>
                <td>58</td>
            </tr>
            <tr>
                <td>郭富城</td>
                <td>男</td>
                <td>51</td>
            </tr>
            <tr>
                <td>黎明</td>
                <td>男</td>
                <td>57</td>
            </tr>
        </table>
    </body>
</html>

image-20221209144117408

8.3 表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

<th> 标签表示 HTML 表格的表头部分(table head 的缩写)

<table>
    <tr>
        <th>姓名</th>
        ...
    </tr>
    ...
</table>

image-20221209145624640

8.4 表格属性

表格标签这部分属性我们实际开发我们不常用，后面会通过 CSS 来设置.

image-20221209143807666

8.5 表格结构标签

  1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。

  2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。

  3. 以上标签都是放在 <table></table> 标签中。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>今日小说排行榜</title>
    </head>
    <body>
        <table align="center" width="500" height="100" border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>排名</th>
                    <th>关键词</th>
                    <th>趋势</th>
                    <th>进入搜索</th>
                    <th>最近七日</th>
                    <th>相关链接</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>鬼吹灯</td>
                    <td><img src="down.jpg" /></td>
                    <td>456</td>
                    <td>123</td>
                    <td>
                        <a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>西游记</td>
                    <td><img src="up.jpg" /></td>
                    <td>456</td>
                    <td>123</td>
                    <td>
                        <a href="#">贴吧</a>
                        <a href="#">图片</a>
                        <a href="#">百科</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

image-20221209145258330

8.6 合并单元格

特殊情况下,可以把多个单元格合并为一个单元格, 只需要会最简单的合并单元格即可.

  1. 合并单元格方式

  2. 目标单元格

  3. 合并单元格的步骤

合并单元格方式：

  • 跨行合并：rowspan=“合并单元格的个数”
  • 跨列合并：colspan=“合并单元格的个数”

image-20221209145523634

目标单元格：(写合并代码)

  • 跨行：最上侧单元格为目标单元格, 写合并代码
  • 跨列：最左侧单元格为目标单元格, 写合并代码

image-20221209145539849

合并单元格三步曲：

  1. 先确定是跨行还是跨列合并。

  2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan="2"></td>。

  3. 删除多余的单元格。

9 列表标签

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

image-20221209150128563

image-20221209150647757

9.1 无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用

  • 标签定义。

    1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。

    2. <ul></ul> 中只能嵌套 <li></li>，直接在<ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。

    3. <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。

    4. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

    无序列表的基本语法格式如下

    <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

    9.2 有序列表

    有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

    在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用<li> 标签来定义列表项

    1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。

    2. <li> 与 </li>之间相当于一个容器，可以容纳所有元素。

    3. 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

    有序列表的基本语法格式如下：

    <ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

    9.3 自定义列表

    自定义列表的使用场景: 自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

    在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

    1. <dl></dl> 里面只能包含 <dt> 和 <dd>。

    2. <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。

    其基本语法如下：

    <dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
</dl>

    image-20221209150459727

    示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义列表(重点)</title>
</head>
<body>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
</body>
</html>

    image-20221209150549616

    10 表单标签

    网页中的表单展示

    image-20221209164226620

    10.1 为什么需要表单

    使用表单目的是为了收集用户信息。

    在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

    10.2 表单的组成

    在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。

    image-20221209153039976

    10.3 表单域

    表单域是一个包含表单元素的区域。

    在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。

    <form> 会把它范围内的表单元素信息提交给服务器

    <form action=“url地址” method=“提交方式” name=“表单域名称">
 	各种表单元素控件
</form>

    image-20221209164239451

    10.4 表单控件（表单元素）

    在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

    1. input输入表单元素

    2. select下拉表单元素

    3. textarea 文本域元素

    10.5 <input> 表单元素

    在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。

    在<input>标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

    <input type="属性值" />
    • <input /> 标签为单标签
    • type 属性设置不同的属性值用来指定不同的控件类型

    type 属性的属性值及其描述如下：

    image-20221209164247944

    除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

    1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.

    2. name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.

    3. checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素.

    4. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

    image-20221209164256567

    示例

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>input 表单元素</title>
    </head>
    <body>
        <form action="xxx.php" method="get">
            <!-- text 文本框 用户可以里面输入任何文字 -->
            用户名:
            <input type="text" name="username" value="请输入用户名" maxlength="6" />
            <br />
            <!-- password 密码框 用户看不见输入的密码 -->
            密码:
            <input type="password" name="pwd" />
            <br />
            <!-- radio 单选按钮  可以实现多选一 -->
            <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
            <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
            性别: 男
            <input type="radio" name="sex" value="男" />
            女
            <input type="radio" name="sex" value="女" checked="checked" />
            人妖
            <input type="radio" name="sex" value="人妖" />
            <br />
            <!-- checkbox 复选框  可以实现多选 -->
            爱好: 吃饭
            <input type="checkbox" name="hobby" value="吃饭" />
            睡觉
            <input type="checkbox" name="hobby" />
            打豆豆
            <input type="checkbox" name="hobby" checked="checked" />
            <br />
            <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
            <input type="submit" value="免费注册" />
            <!-- 重置按钮可以还原表单元素初始的默认状态 -->
            <input type="reset" value="重新填写" />
            <!-- 普通按钮 button  后期结合js 搭配使用-->
            <input type="button" value="获取短信验证码" />
            <br />
            <!-- 文件域 使用场景 上传文件使用的 -->
            上传头像:
            <input type="file" />
        </form>
    </body>
</html>

    image-20221209153929167

    问题

    问题1：有些表单元素想刚打开页面就默认显示几个文字怎么做?

    答：可以给这些表单元素设置 value 属性=“值”

    用户名: <input type="text" value="请输入用户名" />

    或者是设置placeholder

    用户名: <input type="text" placeholder="请输入用户名" />

    问题2：页面中的表单元素很多，如何区别不同的表单元素?

    答：name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单。页面中的表单很多，name 的主要作用就是用于区别不同的表单

    用户名: <input type="text" value="请输入用户名" name="username" />
    • name 属性后面的值，是自定义的
    • radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字
    <input type="radio" name="sex" />男
<input type="radio" name="sex" />女

    问题3：如何页面一打开就让某个单选按钮或者复选框是选中状态?

    答：checked 属性：表示默认选中状态。用于单选按钮和复选按钮

    性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

    问题4：如何让input表单元素展示不同的形态? 比如单选按钮或者文本框

    答: type属性：type属性可以让input表单元素设置不同的形态.

    <input type="radio" name="sex" value="男" checked="checked" />男
<input type="text" value=“请输入用户名”>

    10.6 <label>标签

    <label> 标签为 input 元素定义标注（标签）。

    <label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

    核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同

    语法：

    <label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

    10.7 <select>标签

    使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

    image-20221209161115277

    语法：

    <select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

    1. <select> 中至少包含一对<option> 。

    2. 在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。

    10.8 <textarea>表单元素

    使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。

    在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。

    使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

    语法：

    <textarea rows="3" cols="20">
    文本内容
</textarea>

    1. 通过 <textarea> 标签可以轻松地创建多行文本输入框。

    2. cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

    10.9 表单总结

    1. 表单元素我们学习了三大组 input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.

    2. 这三组表单元素都应该包含在form表单域里面,并且有 name 属性.

    <form>
    <input type=“text" name=“username”/>
    <select name=“jiguan”>
     	<option>北京</option>
        <option>天津</option>
    </select> 
    <textarea name= "message"></textarea>
</form>

    1. 有三个名字非常相似的标签:

      (1) 表单域 form 使用场景: 提交区域内表单元素给后台服务器

      (2) 文件域 file 是input type 属性值 使用场景: 上传文件

      (3) 文本域 textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等…

    2. 我们当前阶段不需要提交表单元素,所以我们只负责表单元素的外观形态即可.

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

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

相关文章

C语言随机数的产生（rand、srand、time函数细节讲解）

C语言随机数的产生（rand、srand、time函数细节讲解）

✨C语言随机数的产生随机数生成代码&#xff1a;rand函数&#xff1a;srand函数&#xff1a;time函数&#xff1a;time函数补充:time_t类型讨论time_t指针传入的讨论&#xff1a;随机数生成代码&#xff1a; 先上代码&#xff0c;再详细解释&#xff1a; #include<stdio.h…
阅读更多...
Python数组数据处理办法清单

Python数组数据处理办法清单

import numpy as np import pandas as pd import matplotlib.pyplot as plt#matplotlib 的字体&#xff08;font&#xff09;为黑体&#xff08;SimHei&#xff09; plt.rcParams[font.sans-serif] [SimHei, ] # matplotlib正确显示正负号 plt.rcParams[axes.unicode_minus] …
阅读更多...
dfs序（树形结构线性化）

dfs序（树形结构线性化）

dfs序是将树形结构转换为线性结构的一种方式。 dfs序 dfs序&#xff1a; 指每个节点在dfs深度优先遍历中的进出栈的时间序列。 定义三个数组&#xff1a; in[x]&#xff1a;表示结点x 入栈的时间戳。 out[x]&#xff1a;表示结点x出栈的时间戳&#xff0c;特殊的&#xff0c;出…
阅读更多...
Linux网络原理及编程(5)——第十五节 TCP的连接(三次握手、四次挥手)

Linux网络原理及编程(5)——第十五节 TCP的连接(三次握手、四次挥手)

目录 三次握手 四次挥手 我们来重点说说两个状态&#xff1a;CLOSE_WAIT和TIME_WAIT 【CLOSE_WAIT】 【TIME_WAIT】 各位好&#xff0c;博主新建了个公众号《自学编程村》&#xff0c;拉到底部即可看到&#xff0c;有情趣可以关注看看哈哈&#xff0c;关注后还可以加博主w…
阅读更多...
Linux CENTOS安装mysql8 64位

Linux CENTOS安装mysql8 64位

1. 查看系统中是否已经安装了mariadb 执行&#xff1a;yum list installed | grep mariadb 若已经存在&#xff0c;则删除 执行&#xff1a; yum remove mariadb 2.下载需要安装的压缩文件&#xff0c;从官网下载&#xff0c;文件为名字为 mysql-8.0.31-linux-glibc2.12-x86_6…
阅读更多...
S7-1200和1500PLC与条码枪建立TCP_IP通信的具体方法示例

S7-1200和1500PLC与条码枪建立TCP_IP通信的具体方法示例

S7-1200和1500PLC与条码枪建立TCP_IP通信的具体方法示例 今天和大家分享西门子S7-1200和1500PLC如何获取条码枪的扫描数据，这种案例中一般PLC作为TCP/IP的客户端(只接收数据，不发送数据)，条码枪作为TCP/IP的服务器。 如下图所示，在指令—通信—开放式用户通信中可以找到相关…
阅读更多...
洞察 | 软件定义汽车时代下，汽车制造产业的应对策略

洞察 | 软件定义汽车时代下，汽车制造产业的应对策略

汽车产业作为先进制造行业&#xff0c;伴随着数字化技术&#xff0c;电气化技术的迭代正快速的成长&#xff0c;而随着智能汽车、自动驾驶概念的提出&#xff0c;整车制造的软硬件复杂度也在持续提升&#xff0c;软件定义汽车转型已成整体汽车制造产业的共识。 据中国软件行业…
阅读更多...
成长任务| 挑战代码画颗圣诞树

成长任务| 挑战代码画颗圣诞树

&#x1f384;立即投稿&#x1f384; &#x1f4cc;活动规则 圣诞将至&#xff0c;这次来试试用代码过圣诞吧~挑战圣诞树的一万种画法! √ 使用代码画一颗#圣诞树#&#xff0c;将你的代码文件通过本页面投稿&#xff0c;审核通过即可参与活动 √ 可使用任意编程语言&#xff…
阅读更多...
【解纠缠表示：图像增强】

【解纠缠表示：图像增强】

DRLIE: Flexible Low-Light Image Enhancement via Disentangled Representations &#xff08;DRLIE&#xff1a;基于解纠缠表示的柔性弱光图像增强&#xff09; 解纠缠表示 弱光图像增强&#xff08;Low-light image enhancement (LIME)&#xff09;是将亮度不理想的图像转化…
阅读更多...
为了彻底弄懂CSS中的1px究竟有多长，我翻出了家里的卷尺

为了彻底弄懂CSS中的1px究竟有多长，我翻出了家里的卷尺

CSS是描述HTML文档如何显示的&#xff0c;在显示的过程中&#xff0c;HTML元素的长宽、间距、字体大小等等&#xff0c;都需要通过长度尺寸单位来表示。我们常常会说&#xff1a;字体大小16像素&#xff0c; 间距10个像素。这里的像素&#xff0c;就是CSS中的长度尺寸单位。一个…
阅读更多...
软件测试行业真的不行了吗？那出路到底在哪？

软件测试行业真的不行了吗？那出路到底在哪？

下面这张图片&#xff0c;想必大家应该都知道~~~ 其实每个人都在金字塔里面&#xff0c;只不过大家的高低位置不同&#xff0c;当然&#xff0c;越在底层的人越多&#xff0c;越在高层的人越少~ 这也符合“二八定律”&#xff0c;“优胜劣汰”&#xff0c;“适者生存”~ 当你的…
阅读更多...
c++中的this指针

c++中的this指针

1.this指针的引入 首先我们看下面这一段代码 class Date { public:void DateSet(int year, int month, int day){_year year;_month month;_day day;}void print(){cout << _year << "-" << _month << "-" << _day <…
阅读更多...
论文速递：一种用于视觉定位的基于NLP思路的直线特征匹配算法

论文速递：一种用于视觉定位的基于NLP思路的直线特征匹配算法

标题&#xff1a;Line as a Visual Sentence:Context-aware Line Descriptor for Visual Localization 作者&#xff1a;Sungho Yoon1 and Ayoung Kim2∗ 摘要 在机器人以及计算机视觉领域&#xff0c;除了通过使用图像匹配的特征点计算多视图几何来求解问题&#xff0c;还可…
阅读更多...
12月的第一波驱动，来看看支持哪款游戏吧！

12月的第一波驱动，来看看支持哪款游戏吧！

真的停不下来&#xff01;2022年的最后一个月&#xff0c;新游戏仍然在发力&#xff0c;《极品飞车&#xff1a;不羁》、《巫师 3&#xff1a;狂猎》、《传送门RTX版》都在12月正式上线&#xff01; 为了提供更好的游戏体验&#xff0c;英伟达、AMD、英特尔三巨头更是马不停蹄…
阅读更多...
时间轮算法HashedWheelTimer

时间轮算法HashedWheelTimer

文章目录一.HashedWheelTimer是什么?二.能干什么?为什么需要这个东西?优点适用场景三.怎么用?使用步骤1.引入pom2.使用举例四.时间轮原理五.使用注意点1.一个HashedWheelTimer对象只有一个worker线程2.每次添加的任务只会执行一次3.时间轮的参数非常重要4.所有的任务都是顺…
阅读更多...
rabbitmq基础1——消息中间件概念、Rabbitmq的发展起源和基本组件的作用流程

rabbitmq基础1——消息中间件概念、Rabbitmq的发展起源和基本组件的作用流程

文章目录一、消息中间件1.1 概念1.2 作用1.2.1 消息队列持久化1.2.2 消息队列分发策略1.2.3 消息队列的高可用和高可靠1.2.3.1 一主多从共享集群1.2.3.2 一主多从同步集群1.2.3.3 多主多从同步集群1.2.3.4 多主转发集群1.2.3.5 Master-slave与Breoker-cluster组合方案1.3 初识A…
阅读更多...
实战总结！18种接口优化方案的总结

实战总结！18种接口优化方案的总结

之前工作中&#xff0c;遇到一个504超时问题。原因是因为接口耗时过长&#xff0c;超过nginx配置的10秒。然后 真枪实弹搞了一次接口性能优化&#xff0c;最后接口从11.3s降为170ms。本文将跟小伙伴们分享接口优化的一些通用方案。 1. 批量思想&#xff1a;批量操作数据库 优化…
阅读更多...
Windows环境监控Linux服务器资源grafana+prometheus+mysql_exporter

Windows环境监控Linux服务器资源grafana+prometheus+mysql_exporter

Windows环境监控Linux服务器资源grafanaprometheusmysql_exporter 1.安装mysql (1)在虚拟机中下载wget命令 yum -y install wget(2)在线下载mysql安装包 wget https://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm(3)安装MySQL rpm -ivh mysql57-communi…
阅读更多...
信仰崩了？Preact 开始采用 Vue3 的响应式设计

信仰崩了？Preact 开始采用 Vue3 的响应式设计

前言 不知大家有没有听过Preact这个框架&#xff0c;就算没听过Preact那也应该听过React吧&#xff1f; 一字之差&#xff0c;preact比react多了个p&#xff01;&#xff08;听起来咋不像啥好话呢&#xff09; 这个P代表的是 Performance&#xff0c;高性能版React的意思。P…
阅读更多...
一篇博客详解朴素贝叶斯解分类问题

一篇博客详解朴素贝叶斯解分类问题

目录 回归问题 正则化Regularization 分类问题—类别之间是独立的 为什么不用回归解分类问题以概率的形式解分类问题 抽盒机率→分类机率正态分布覆盖 原理高斯分布函数 极大似然估计求最优参数 朴素贝叶斯法 用同一个协方差三步骤 模型的简化 回归问题 大概内容与之前的类…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023