【前端】HTML常用标签

news2024/12/29 8:06:29

因为想当个全栈，所以巩固了一下HTML与CSS和JS基础，这一篇博客是HTML部分

文章目录

  • HTML 基础标签 1
    • HTML 基础框架
    • HTML 基础标签
        • 语义标签
        • 文本格式化标签
        • `div` 与 `span` 标签
        • 图像标签
        • 超链接
        • 特殊字符
  • 基础标签 2 | 表格
    • 表格的使用
        • 表格标签
        • 表格属性
        • 表格的头部与身体
    • 合并单元格
  • 基础标签3 | 列表
    • 1. 无序列表
    • 2. 有序列表
    • 3. 自定义列表
  • 基础标签4 | 表单
    • 1. 表单域
    • 2. 表单中常用标签
        • 1. `input` 标签
        • 2. `<label>` 标签
        • 3. `<select>` | 选择标签
        • 4. `textarea` | 文本域
  • HTML5新特性1 | 新增基础标签
    • 1. 新增的布局标签
  • H5新增标签2 | 视频标签
      • 视频标签的使用
      • 解决浏览器不支持视频类型
      • 视频封面演示
  • H5新增标签3 | 音频标签
      • 使用方式
      • 兼容低版本浏览器
  • H5新增标签4 | 输入框新属性

HTML 基础标签 1

查资料去 [W3C]

HTML 基础框架

<!-- 以下代码声明文档类型，这里表名该文档采用的是HTML5，这个标签不属于HTML标签的一部分，但是不建议省略-->
<!DOCTYPE html>
<!-- 以下代码表名当前网页的语言类型，即使设置为其它语言，也可以显示中文，但是可能会触发一些比如翻译之类的插件-->
<html lang="zh-CN">
    <!-- 以下标签是头部标签， 是HTML必须要有的标签，有且只有一个 -->
    <head>
        <!-- 万国码：包含非常非常多语言-->
        <meta charset="UTF-8">
        <!-- 以下代码是文档名称，会显示在浏览器的标签栏内 -->
        <title>Hello world</title>
    </head>
    <body>
    
    </body>
</html>

HTML 基础标签

语义标签
  1. 标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  1. 段落标签
  1. 段落和段落之间会有一个较大的空隙
  2. 段落的宽度会根据浏览器的宽度而变化，越窄段落的上下长度越长，左右宽度越窄
<p>这是一个自然段。</p><p>这又是一个自然段。</p>
<p>换行还是一个自然段。</p>
  1. 换行标签
  1. 换行没有大空隙，但是会另起一行来写

> `br` 是一个单标签

123<br/>456
文本格式化标签
  1. 加粗
<strong>我加粗啦</strong>
<b>我加粗啦</b>
  1. 下划线
<ins>我也有下划线啦~</ins>
<u>我有下划线</u>
  1. 斜体
<rm>我也倾斜啦</rm> 
<i>我是斜体</i>
  1. 删除线
<del>我身上也是</del>
<s>我身上有一条删除线</s>
div 与 span 标签
  1. div 与 span 都是一个盒子
  2. 一行只能放一个div
<div>我是一个div标签，我一个人占一行</div>
<span>我是一个span，我一行可以显示多个</span>
图像标签

img是一个单标签

  1. src：是图像标签的必须属性，指向一张图片的地址或者URL
  2. alt：当找不到src中指向的图像时，就会显示这段文字
  3. title：当鼠标经过图像时候，就会显示这个标题
  4. width：图像的宽度（写入一个数字，单位是像素）
  5. height：图像的高度（写入一个数字，单位是像素）
  6. border：外边框大小，推荐在style或者class中设置
<!-- 下面是显示一张图片的基础操作 -->
<img src="img/img1.png" width="200"/>

<!-- 如果显示的图片有问题，我们可以采用img的alt属性来替换图像，如下所示 -->
<img src="img/imgxxx.png" alt="我显示不出来啦~" width="200"/>

<!-- 当鼠标经过图像时候，就会显示图片的标题 -->
<img src="img/img1.png" width="200" title="我是标题"/>

<!-- 下面图片有一个很大的黑色外框 -->
<img src="img/img1.png" width="200" border="15"/>

由于我并不存在一张名叫imgxxx.png的图片，所以以上代码在浏览器中的效果如下图所示：

在这里插入图片描述

为了方便演示，我给图片加了宽度，并且图与图之间加了换行。

超链接

a标签内部不仅可以嵌入文字，还可以嵌入图片等
若是指向的地址是个内部或外部地址，则会跳转到该地址
若是指向地址是一个资源，则会下载该资源（图片的话一般是打开一个新的标签页显示，可以右键保存，这是现在浏览器的特点）

  1. 外部链接

href：必要属性，指向一个地址，必须以http://开头
target：打开标签的方式，默认是_self，也就是本页打开，可以改成_blank，新页面内打开

<!-- 以下代码会在当前页面打开百度 -->
<a href="http://www.baidu.com">点我打开百度</a>
<!-- 以下代码会在新的页面打开百度 -->
<a href="http://www.baidu.com" target="_blank">点我在新的页面打开百度</a>
  1. 内部链接

内部标签的href指向一个文件即可
target标签同样生效

<a href="_HTML_01.1-语义标签.html">点我进入语义语法介绍页面</a>
  1. 空链接

若是还没有决定跳转到哪里，可以先在href中写一个#，表示不跳转。

<a href="#">点我没啥效果，我哪里都不去</a>
  1. 指向一个资源
  <!-- 点我下载资源 -->
  <a href="img/a.zip">点我下载资源</a>
  1. 指向页面内的一个锚点

我们可以在页面的某一个资源商写上id='xxx'，然后再a标签的href中指向这个元素，那么当我们点击这个a标签的时候，我们的页面会直接跳转到这个元素所在的位置。

注意：不能是class或者其他

<a href="#jump">点我跳转到锚点</a>
<h2 id="jump">我是一个锚点</h2>
特殊字符

空格 ：&nbsp;
小于号<：&lt;
大于号>：&gt;

基础标签 2 | 表格

表格的使用

表格标签
  1. table：一个表格
  2. tr：一行
  3. td：一个单元格
  4. th：表头单元格（与td同级），里面的文字会居中加粗显示
<!-- 以下代码表示一个表格 -->
<table>
    <tr>
        <th>我是标题1</th>
        <th>我是标题2</th>
        <th>我是标题3</th>
    </tr>
    <!-- 以下代码表示一行-->
    <tr>
        <td>我是一个单元格1.1</td>
        <td>我是一个单元格1.2</td>
        <td>我是一个单元格1.3</td>
    </tr>
    <tr>
        <td>我是一个单元格2.1</td>
        <td>我是一个单元格2.2</td>
        <td>我是一个单元格2.3</td>
    </tr>
</table>

以上代码在浏览器中的表现如下:

在这里插入图片描述

表格的具体属性如下：

在这里插入图片描述

  1. 黄色部分是table标签
  2. 三个蓝色部分（代码中只有两个）是tr标签
  3. 第一行的白色部分对应着th标签
  4. 其余白色部分对应着td标签
表格属性
属性属性值说明
alignleft、center、right文字对齐方式，左中右
border1或""规定表格单元是否拥有边框，默认是""，表示没有边框
cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素
cellspacing像素值规定单元格之间的空白，默认2像素
width像素值或百分比规定表格的宽度（百分比的话是相对父元素）

表格还是上面的表格，我对table标签做出如下修改后，表现如下图：

<table border="1" cellpadding="5" cellspacing="0" width="100%">
    <!-- 表格内容省略，与上面代码一致 -->
</table>

在这里插入图片描述

可以看到，宽度是100%，单元格和单元格之间的空隙是0，单元格与文字之间间距也很大，有边框，且文字居中显示。

我没有验证align属性，因为align属性已经过时了，在HTML5中不生效，事实上，以上的5个属性均已失效，只不过除了align以外剩下的4个还可以生效。

表格的头部与身体
标签说明
thead头部
tbody身体

合并单元格

  1. rowspan="合并单元格的个数"：跨行合并
  2. colspan="合并单元格的个数"：跨列合并
<table border="1 gray">
  <thead>
  <tr>
    <th>我是标题1</th>
    <th colspan="2">我是标题2，我合并了单元格</th>
  </tr>
  </thead>
  <tbody>
  <!-- 以下代码表示一行-->
  <tr>
    <td rowspan="2">我是一个单元格1.1</td>
    <td>我是一个单元格1.2</td>
    <td>我是一个单元格1.3</td>
  </tr>
  <tr>
    <td>我是一个单元格2.2</td>
    <td>我是一个单元格2.3</td>
  </tr>
  </tbody>
</table>

以上代码在浏览器中的效果如下图所示:

在这里插入图片描述

文章目录

  • HTML 基础标签 1
    • HTML 基础框架
    • HTML 基础标签
        • 语义标签
        • 文本格式化标签
        • `div` 与 `span` 标签
        • 图像标签
        • 超链接
        • 特殊字符
  • 基础标签 2 | 表格
    • 表格的使用
        • 表格标签
        • 表格属性
        • 表格的头部与身体
    • 合并单元格
  • 基础标签3 | 列表
    • 1. 无序列表
    • 2. 有序列表
    • 3. 自定义列表
  • 基础标签4 | 表单
    • 1. 表单域
    • 2. 表单中常用标签
        • 1. `input` 标签
        • 2. `<label>` 标签
        • 3. `<select>` | 选择标签
        • 4. `textarea` | 文本域
  • HTML5新特性1 | 新增基础标签
    • 1. 新增的布局标签
  • H5新增标签2 | 视频标签
      • 视频标签的使用
      • 解决浏览器不支持视频类型
      • 视频封面演示
  • H5新增标签3 | 音频标签
      • 使用方式
      • 兼容低版本浏览器
  • H5新增标签4 | 输入框新属性

基础标签3 | 列表

列表可以分为三大类：

  1. 无序列表
  2. 有序列表
  3. 自定义列表

1. 无序列表

  1. 无序列表的哥哥列表项之间没有顺序级别之分，是并列的
  2. <ul>标签中只能放<li>，不能单独书写文字或者其他标签
  3. <li>标签内可以放任何元素
  4. 无序列表会带有自己的样式属性，比如前面的小黑点（如下图）
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <!-- 省略... -->
</ul>

以上代码在浏览器中的表现如下:

在这里插入图片描述

2. 有序列表

  1. <ol>标签中只能放<li>，不能单独书写文字或者其他标签
  2. <li>标签内可以放任何元素
  3. 有序列表会带有自己的样式属性，但是在实际开发中我们会使用css来进行设置
<!-- 明星排行榜 -->
<ol>
    <li>刘德华</li>
    <li>谢霆锋</li>
    <!-- 省略更多... -->
</ol>

以上代码在浏览器中的表现如下:

在这里插入图片描述

3. 自定义列表

自定义列表常用于对属于或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>：自定义列表最外层标签
<dt>：一个小标题
<dd>：列表项

注意事项：

  1. dl白起爱你中只能包含<dt>和<dl>
  2. <dt>和<dl>标签是兄弟关系
  3. <dt>和<dl>的个数没有限制
<dl>
    <dt>我是小标题1</dt>
    <dd>我是列表项1</dd>
    <dd>我是列表项1</dd>
</dl>

以上代码在浏览器中的表现如下:

在这里插入图片描述

文章目录

  • HTML 基础标签 1
    • HTML 基础框架
    • HTML 基础标签
        • 语义标签
        • 文本格式化标签
        • `div` 与 `span` 标签
        • 图像标签
        • 超链接
        • 特殊字符
  • 基础标签 2 | 表格
    • 表格的使用
        • 表格标签
        • 表格属性
        • 表格的头部与身体
    • 合并单元格
  • 基础标签3 | 列表
    • 1. 无序列表
    • 2. 有序列表
    • 3. 自定义列表
  • 基础标签4 | 表单
    • 1. 表单域
    • 2. 表单中常用标签
        • 1. `input` 标签
        • 2. `<label>` 标签
        • 3. `<select>` | 选择标签
        • 4. `textarea` | 文本域
  • HTML5新特性1 | 新增基础标签
    • 1. 新增的布局标签
  • H5新增标签2 | 视频标签
      • 视频标签的使用
      • 解决浏览器不支持视频类型
      • 视频封面演示
  • H5新增标签3 | 音频标签
      • 使用方式
      • 兼容低版本浏览器
  • H5新增标签4 | 输入框新属性

基础标签4 | 表单

表单是用于收集用户信息的

表单通常由以下三部分组成：

  1. 表单域（整个表单）
  2. 表单控件（也称为表单元素，就是输入框、选择框、按钮之类的）
  3. 提示信息（label信息等）

1. 表单域

表单域就是form标签

<form>会把它范围内的白哦氮元素信息提交给浏览器

表单域含有以下属性:

属性属性值说明
actionurl地址用于指定接收并处理表单数据的服务器程序的URL地址
methodget/post用于设置表单数据的提交方式，其取值为get或post
name名称用于设置表单的名称，以区分同一个页面中的多个表单域

我们在使用VUE时候会用到一些第三方UI空间，比如Element-UI，其中的<el-form>也是一个表单域。

<!-- 下面是一个空的表单域 -->
<form action="demo.php" method="post" name="name1">
    
</form>

2. 表单中常用标签

1. input 标签

input标签具有以下几个属性

  1. type:定义输入框的类型
  2. name:可以理解成是给不同输入框取个名字以方便取值，也可以理解成是对单选框或者复选框进行分组（多个选择框使用相同的名字可以形成互斥）
  3. value:有一些表格，比如复选框选择爱好，那么他们框框本身应该有一个值（比如：足球、篮球、羽毛球），就是用value来进行定义
  1. type | 输入框的类型（必须有的属性）
属性值说明
button定义可点击按钮
checkbox定义复选框
file定义输入字段和"浏览"按钮，供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段。该字段中的字符将会被隐藏
radio定义单选按钮
reset定义重置按钮。重置按钮会清除表单中的所有数据
submit定义提交按钮
text定一单行的输入字段，用户可在其中输入文本。默认宽度为20个字符
<form method="post" name="name2">
    <input type="button"/><br>
    <input type="checkbox"/><br>
    <input type="file"/> <br>
    <input type="hidden"/><br>
    <input type="image"/><br>
    <input type="password"/><br>
    <input type="radio"/><br>
    <input type="reset"/><br>
    <input type="submit" value="注册"/><br>
    <input type="text" placeholder="请输入内容"/><br>
</form>

以上代码在浏览器中的表现如下:

在这里插入图片描述

以上代码中的单选框、复选框都不会生效，我们可以通过为他们添加name的方式区分它们，同时若是多个单选框使用同一个name，那么他们之间可以形成互斥。

  1. name | 输入框的名称或者分组
<form method="post" name="name2">
  <input type="radio" name="radio1"/>
  <input type="radio" name="radio1"/>
  <input type="radio" name="radio1"/>
</form>

这么写就可以实现单选，它们在浏览器中的表现如下:

在这里插入图片描述

  1. value | 输入框的值

以上代码即使我们选择了第二个复选框，他也是没有意义的，那么我们应该考虑如何让选择框本身有值，给它定义value即可，看以下代码:

同时比如文本输入框我们也可以在JS中通过这个元素获取它的值

一些按钮的value值用于设置其中显示的文字能容

<h2>我的爱好是</h2>
<form method="post" name="name2">
  足球<input type="radio" name="radio1" value="足球"/>
  篮球<input type="radio" name="radio1" value="篮球"/>
  羽毛球<input type="radio" name="radio1" value="羽毛球"/>
</form>

以上代码中我们选择第一个单选框，则是选择了篮球，选择第二个单选框，则是选择了足球（具体是使用单选框还是复选框根据情景进行判断）

在这里插入图片描述

  1. checked | 针对单选框或者复选框的默认选中事件

若是想单选框或者复选框在一开始就被选中，那么可以使用这个属性（比如用户注册的时候我默认是男性）

<h2>请选择你的性别</h2>
<form method="post" name="name2">
    男<input type="radio" name="radio1" value="男" checked/>
    女<input type="radio" name="radio1" value="女"/>
</form>

以上代码在浏览器中的表现如下（为了方便区分我将第三部分的代码的初始状态也截图进去了。

在这里插入图片描述

  1. maxlength | 针对文本输入框的最大输入长度

比如我设置是20，那么用户最大输入20个字符，将不能继续输入了

2. <label> 标签

label标签为input元素定义注解（标签）

与vue中的方式不同，这里是通过label的for属性和input的id属性绑定

<form>
    <label for="sex">男</label>
    <input type="checkbox" id="sex">
</form>
3. <select> | 选择标签
  1. select中至少包含两个option
  2. option中可以加一个selected属性，那么该值默认处于选定状态
籍贯
<select>
    <option>山东</option>
    <option>北京</option>
    <option>江苏</option>
    <option>上海</option>
</select>

在这里插入图片描述

4. textarea | 文本域

它可以写很多行字，但是文本框可以写很多行。

相关属性或方法:

  1. cols="每行的字符数"
  2. rows="显示的行数"
    实际开发中多用css来控制
  <textarea rows="20" cols="50">
    预显示文字
  </textarea>

以上代码在浏览器中的表现如下:

在这里插入图片描述

HTML5新特性1 | 新增基础标签

以下内容会有一些兼容性问题，基本都需要IE9以上版本。

因为DIV是没有特殊语义的，所以HTML5新增了一些带语义的标签

1. 新增的布局标签

标签说明
header头部标签
nav导航标签
article内容标签
section定义文档某个区域
aside侧边栏标签
footer尾部标签
  • 这种语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在IE9中，需要把这些元素转换为块级元素
  • 移动端更喜欢用这些标签

H5新增标签2 | 视频标签

视频：video

video是一个行内块元素，可以设置宽高，如果不能使用margin: 0 auto来居中

浏览器支持说明

浏览器MP4WebMOgg
IE√××
Chrome√√√
Firefox√ （从Firefox21版本开始，Linux从30版本开始)√√
Safari√××
Opera√（从Opera25版本开始）√√

相关属性

属性说明是否可简写备注
controls显示进度条、播放暂停按钮等空间（不点开始播放不会自动播放）√
autoplay自动播放，进入页面后开始播放√
muted静音播放（有controls的话可以解除静音）√
loop循环播放√
preload规定是否预加载视频（如果有autoplay，就忽略该属性）√auto(预加载视频)none（不应加载视频）
src视频链接×
poster视频封面图×

视频标签的使用

<video src="" controls></video>

在这里插入图片描述

不加controls="controls"则没有进度条、暂停之类的按钮，可能造成无法播放。

解决浏览器不支持视频类型

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    您的浏览器不支持播放此视频。
</video>

视频封面演示

<video src="video/video.mp4" controls poster="img/img3.png"></video>

以上代码在我没播放的时候就会显示poster中指定的图片，如下所示(随便找了张图)：

在这里插入图片描述

H5新增标签3 | 音频标签

浏览器支持说明

浏览器MP4WebMOgg
IE√××
Chrome√√√
Firefox√√√
Safari√√×
Opera√√√

相关属性

属性说明是否可简写备注
controls显示进度条、播放暂停按钮等空间（不点开始播放不会自动播放）√
autoplay自动播放，进入页面后开始播放√谷歌浏览器不支持
loop循环播放√
src音频链接×
muted静音播放（有controls的话可以解除静音）√
preload规定是否预加载视频（如果有autoplay，就忽略该属性）√auto(预加载视频)none（不应加载视频）

使用方式

<audio src="video/maobuyi.mp3" controls></audio>

兼容低版本浏览器

<audio controls>
    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
    您的浏览器不支持播放此视频。
</audio>

H5新增标签4 | 输入框新属性

<input type="email">

H5新增输入框属性说名

属性值说明
email用户输入必须为Email类型
url用户输入必须为URL类型
date用户输入必须为日期类型
time用户输入必须为时间类型
month用户输入必须为月类型
week用户输入必须为周类型
number用户输入必须为数字类型
tel手机号码
search搜索框
color生成一个颜色选择表单
属性值说明
required必须填写，不能为空
placeholder提示文本
autofocus自动聚焦属性，页面加载完成后自动聚焦在这里
autocomplete(off/on)当用户在字段开始键入时，浏览器就之前键入过的值，应该显示出在字段中填写的选项。（默认是开启状态，可以设置为off关闭）需要放在表单内，同时加上name属性。
multiple可以多选文本提交

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

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

相关文章

堡垒机jumpserver的安装部署和使用

堡垒机jumpserver的安装部署和使用

jumpserver的介绍&#xff1a; 官方文档&#xff1a;jumpserver官方中文文档 JumpServer 是广受欢迎的开源堡垒机&#xff0c;是符合 4A 规范的专业运维安全审计系统。JumpServer 帮助企业以更安全的方式管控和登录所有类型的资产&#xff0c;实现事前授权、事中监察、事后审计…
阅读更多...
千寻星地一体农机导航燃爆2024内蒙农机展

千寻星地一体农机导航燃爆2024内蒙农机展

千寻星地一体农机导航燃爆2024内蒙农机展 2024年3月9日-11日&#xff0c;2024内蒙古农牧业机械展览会在内蒙古呼和浩特敕勒川国际会展中心展出。展会上&#xff0c;千寻位置以“北斗时空智能&#xff0c;助力数智农业”为主题&#xff0c;展示了北斗导航农机自动驾驶系统、星地…
阅读更多...
ELEVENLABS AI在线AI语音合成工具,28种语言

ELEVENLABS AI在线AI语音合成工具,28种语言

一、Elevenlabs简介 ElevenLabs 可以使用合成语音、克隆语音或全新的「人工」语音将文本转化为语音&#xff0c;并且这些语音可以模仿不同性别、年龄和种族的声音。 ElevenLabs基于目前强大的生成式语音模型&#xff0c;提供文本生成语音、语音合成、语音克隆和语音识别分类功…
阅读更多...
深入了解与全面解析华为认证（HCIA/HCIP/HCIE）

深入了解与全面解析华为认证（HCIA/HCIP/HCIE）

一、网络行业技术认证 网络行业对于技术评定一般分为两种&#xff0c;一种是企业认证&#xff0c;一种是国家认证 企业认证属于技术认证&#xff0c;在国内的互联网企业都会承认&#xff0c;用于评定一个人的技术等级或者企业招投标的资质。 网络行业认证最好的有三种&#x…
阅读更多...
c++之旅——第六弹

c++之旅——第六弹

大家好啊&#xff0c;这里是c之旅第五弹&#xff0c;跟随我的步伐来开始这一篇的学习吧&#xff01; 如果有知识性错误&#xff0c;欢迎各位指正&#xff01;&#xff01;一起加油&#xff01;&#xff01; 创作不易&#xff0c;希望大家多多支持哦&#xff01; 一,静态成员&…
阅读更多...
网页脚本 bilibili006：视频下载脚本修改+油猴脚本发布

网页脚本 bilibili006：视频下载脚本修改+油猴脚本发布

视频下载脚本修改 原始脚本的下载的视频名称总是错的&#xff0c;调用的代码为 document.querySelector(.tag-txt).textContent &#xff0c;发现这是标签的名称 查找视频名称所在的类名称 <h1 title"任天堂告yuzu模拟器&#xff0c;龙神模拟器会被殃及池鱼吗"…
阅读更多...
工业数学模型——冶金烧结配矿（一）

工业数学模型——冶金烧结配矿（一）

1、工业场景 从很多种铁矿石中选出适合烧结配料的部分铁矿石及其比例&#xff0c;并使其成本最低。 2、数学模型 设Pi代表了第i种原料的成本&#xff0c;xi代表了第i种原料在总配料中的比例&#xff0c;其中i取值为1,2,…,n。计算1吨配料成本&#xff1a; 第种原料的成本是Y…
阅读更多...
分布式系统超详解析

分布式系统超详解析

目录 常见概念 基本概念 应用/系统 模块/组件 分布式 集群 主/从 中间件 评价指标 可用性 响应时长 吞吐量/并发量 架构演进 单机架构 应用数据分离架构 引入更多的应用服务器结点 读写分离架构 引入缓存--冷热分离的结构 垂直分库 业务拆分--微服务 为了更…
阅读更多...
【惠友小课堂】膝关节可以只换一半？单髁置换术，哪里坏了修哪里，重塑新“膝”望

【惠友小课堂】膝关节可以只换一半？单髁置换术，哪里坏了修哪里，重塑新“膝”望

髁 这个字念啥&#xff1f; 被指到的人来回答 不念“踝&#xff08;hui&#xff09;”也不念“果” 正确念法为“kē”&#xff08;科额~髁&#xff09; 膝关节是人体承重较大的关节&#xff0c;并且使用频率较高&#xff0c;因此膝关节很容易磨损、损伤等。年龄的增长、意外受…
阅读更多...
魔法之线：探索string类的神秘世界

魔法之线：探索string类的神秘世界

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f648;个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&…
阅读更多...
小马智行与卢森堡签署自动驾驶合作谅解备忘录

小马智行与卢森堡签署自动驾驶合作谅解备忘录

近日&#xff0c;自动驾驶企业小马智行宣布与卢森堡大公国政府签署谅解备忘录&#xff0c;促进自动驾驶汽车及技术在卢森堡的发展。该文件由小马智行联合创始人、CEO彭军与卢森堡经济部长Lex Delles共同签署&#xff0c;这也标志着小马智行与卢森堡政府就推动该地区的自动驾驶研…
阅读更多...
Python：数据分析工具Streamlit

Python：数据分析工具Streamlit

简介&#xff1a;Streamlit是一个开源Python库&#xff0c;可以轻松创建和共享用于机器学习和数据科学的漂亮的自定义web应用程序。只需几分钟&#xff0c;您就可以构建和部署功能强大的数据应用程序&#xff0c;同时可以结合 matplotlib 做出漂亮的图表&#xff0c;实现数据可…
阅读更多...
图像运算 - 图像像素点的加减异或操作

图像运算 - 图像像素点的加减异或操作

1、前言 图像是由像素组成的，而像素是由灰度值表现，灰度值由具体的正整数表现（0代表黑色，255代表白色）。因此，对于正整数可以进行一系列的数学运算，加减乘除等等，通过这些运算可以达到截取，合并图像等效果 2、图像的掩膜 掩膜的意思是利用特定的模板将图像感兴趣区域…
阅读更多...
StringJoiner --java学习笔记

StringJoiner --java学习笔记

StringJoiner IDK8开始才有的&#xff0c;跟StrinaBuilder一样&#xff0c;也是用来操作字符串的&#xff0c;也可以看成是一个容器&#xff0c;创建之后里面的内容是可变的好处:不仅能提高字符串的操作效率&#xff0c;并且在有些场景下使用它操作字符串&#xff0c;代码会更…
阅读更多...
Google发布创新AI工具Path Foundation和Derm Foundation，突破医学影像解读瓶颈，开启病理学与皮肤科研究新纪元

Google发布创新AI工具Path Foundation和Derm Foundation，突破医学影像解读瓶颈，开启病理学与皮肤科研究新纪元

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
2024-3-11-C++作业

2024-3-11-C++作业

1>试编程 要求&#xff1a; 提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数 源代码: #include <iostream>using namespace std;int main() {string s;cout << "请输入字符串&#xff1a;"…
阅读更多...
采购管理系统：寻源到付款 (S2P) 流程自动化有什么好处？

采购管理系统：寻源到付款 (S2P) 流程自动化有什么好处？

企业的采购部门由各种流程和团队驱动&#xff0c;包括采购和应付账款。为实现战略目标而采用的策略流程之一是寻源到付款&#xff08;S2P&#xff09;流程。 何时使用 “寻源到付款”&#xff1f; 顾名思义&#xff0c;寻源到付款的主要目的是寻找最佳供应商以满足业务需求&a…
阅读更多...
传感器是什么？有哪些类型及应用

传感器是什么？有哪些类型及应用

什么是传感器 传感器是一种用于检测、测量和感知某种特定物理量或环境参数的设备或器件。它们能够将所测量的物理量转换为可供处理和分析的电信号、数字信号或其他形式的输出信号。传感器在各种领域中都有广泛的应用&#xff0c;包括工业、医疗、环境监测、汽车、航空航天、农…
阅读更多...
MonkeyRunner在自动化测试里的应用场景！

MonkeyRunner在自动化测试里的应用场景！

MonkeyRunner是Android提供的一个自动化测试工具&#xff0c;主要用于对Android设备或模拟器进行功能和压力测试。以下是一些MonkeyRunner在自动化测试中的应用场景及实例代码&#xff1a; 基本操作测试 点击屏幕上的特定位置或元素。 模拟滑动和手势操作。 发送按键事件。 …
阅读更多...
nginx的使用，homebrew安装及使用nginx。

nginx的使用，homebrew安装及使用nginx。

Nginx 是一个高性能的 HTTP 和反向代理服务器&#xff0c;它提供了诸如 IMAP、POP3 和 SMTP 等邮件代理服务。以下是 Nginx 的主要作用&#xff1a;12345 作为 Web 服务器。Nginx 能够以较少的系统资源提供高效率的服务&#xff0c;尤其在高并发连接下表现出色。1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023