当前位置： 首页 > news >正文

HTML零基础入门教学

news 来源：原创 2025/6/10 4:33:02

目录

一.   HTML语言

二.   HTML结构

 三.   HTML文件基本结构

四.   准备开发环境

五.   快速生成代码框架

六.   HTML常见标签

6.1   注释标签

6.2   标题标签：h1-h6

6.3   段落标签：p

6.4   换行标签：br

6.5   格式化标签

6.6   图片标签：img

6.7 超链接标签：a

6.8   表格标签

6.9   列表标签

6.9.1   无序列表

6.9.2   有序列表

6.9.3   自定义列表

6.10   表单标签

6.10.1   form标签

6.10.2   input标签

6.11   label标签

6.12   select标签

6.13   textarea标签

6.14   无语义标签：div & span

七.   综合示例：展示简历信息

八.   综合示例：填写简历信息

九.   Emmet快捷键

十.   HTML特殊字符

此篇博客讲解如何零基础入门HTML。干货满满！！！

一.   HTML语言

HTML是超文本标记语言。
超文本：文本、图片、声音、视频、表格、链接等等。
标记：由许许多多的标签组成。

二.   HTML结构

HTML 代码是由 "标签" 构成的。
形如: 
<body>hello</body>
  • 标签名 (body) 放到 < > 中。
  • 大部分标签成对出现。为开始标签， 为结束标签。
  • 少数标签只有开始标签， 称为 "单标签"。
  • 开始标签和结束标签之间， 写的是标签的内容。 (例如上面的hello)
  • 开始标签中可能会带有 "属性"。 id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)。
<body id="myId">hello</body>

 三.   HTML文件基本结构

下面我们来看看一个基本的HTML文件结构式什么样的。打开记事本，新建一个文件，写上下面的代码： 
<html><head><title>第一个页面</title></head><body>hello world</body>
</html>

 然后保存这个文件，文件后缀为.html。

双标签：有开始有结束
  • html 标签是整个 html 文件的根标签(最顶层标签)
  • head 标签中写页面的属性。
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题。
标签之间的结构关系， 构成了一个 DOM 树：

DOM 是 Document Object Mode (文档对象模型) 的缩写。

所有的标签都是HTML的子标签。head与body是兄弟标签，head和title是父子标签。

每一个标签相当于是一个对象，程序员可以通过代码拿到这些对象，拿到之后可以对这些对象进行增删查改。
我们双击运行上面的html后缀文件，就可以打开浏览器如下：

 按下F12就可以出现上图右边的代码显示。

四.   准备开发环境

在企业中我们习惯于使用VsCode软件来进行Web开发。还没有安装VsCode的小伙伴可以移步我这篇文章（vscode配置C/C++环境（保姆级详细教程）_vscode配置c++环境-CSDN博客） 。

我们这里主要讲一下如何搭建Web开发的配置。我们点击VsCode左侧扩展图标：

 在里面搜索安装三个扩展，分别是：

好勒。环境配置完毕，下面可以开始进行第一份正式代码编写了！！！ 

五.   快速生成代码框架

直接输入！+回车即可生成以下代码：

这里讲一下浏览器解码规则：
假如我们设置编码规则为 UTF-8：

那么打开网页效果为：

是可以正常显示的。而如果编码规则改为 ISO，那么：
这里就变成了乱码。

六.   HTML常见标签

6.1   注释标签

注释不会显示在界面上. 目的是提高代码的可读性。 
<!-- 我是注释 -->
ctrl + / 快捷键可以快速进行注释/取消注释 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 -->
</body>
</html>

6.2   标题标签：h1-h6

有六个，从h1-h6，数字越大，字体越小： 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6>
</body>
</html>

6.3   段落标签：p

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落。
例如： 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 -->css中的1px并不等于设备的1px在css中我们一般使用px作为单位还有一个因素也会引起css中px的变化在移动端浏览器中以及某些桌面浏览器中
</body>
</html>

虽然我们在HTML编写时进行了换行，但是实际在浏览器页面打开换行变成了一个空格：

是并没有换行的。 在body中的换行，实际在页面上显示是一个空格。如果我们想要一段一段的显示，那么需要用到p标签： 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的1px并不等于设备的1px</p><p>在css中我们一般使用px作为单位</p><p>还有一个因素也会引起css中px的变化</p><p>在移动端浏览器中以及某些桌面浏览器中</p>
</body>
</html>

注意：
  • p 标签之间存在一个空隙
  • 当前的 p 标签描述的段落, 前面还没有缩进。 (未来 CSS 会学)
  • 自动根据浏览器宽度来决定排版。
  • html 内容首尾处的换行, 空格均无效。
  • 在 html 中文字之间输入的多个空格只相当于一个空格。
  • html 中直接输入换行不会真的换行, 而是相当于一个空格。

6.4   换行标签：br

br 是 break 的缩写。表示换行。
  • br 是一个单标签(不需要结束标签)
  • br 标签不像 p 标签那样带有一个很大的空隙.
  • <br/>是规范写法。不建议写成<br>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的1px并不等于<br/>设备的1px</p><p>在css中我们一般使用px作为单位</p><p>还有一个因素也会引起css中px的变化</p><p>在移动端浏览器中以及某些桌面浏览器中</p>
</body>
</html>

换行标签换行之后间隙比段落标签间隙小。

6.5   格式化标签

  • 加粗: strong 标签 和 b 标签
  • 倾斜: em 标签 和 i 标签
  • 删除线: del 标签 和 s 标签
  • 下划线: ins 标签 和 u 标签
<strong>strong 加粗</strong>
<b>b 加粗</b><em>倾斜</em>
<i>倾斜</i><del>删除线</del>
<s>删除线</s><ins>下划线</ins>
<u>下划线</u>
如： 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的<strong>1px</strong>并不等于<br/>设备的1px</p><p>在css中<em>我们一般使用</em>px作为单位</p><p>还有一个<del>因素</del>也会引起css中px的变化</p><p>在<ins>移动端浏览器</ins>移动端浏览器中以及某些桌面浏览器中</p>
</body>
</html>

使用 CSS 也可以完成类似的效果. 实际开发中以 CSS 方式为主。

6.6   图片标签：img

img 标签必须带有 src 属性。表示图片的路径。 
<img src="rose.jpg">
此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中。（ 可以根据绝对/相对路径自行设置 ）
下面演示打开网页图片： 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的<strong>1px</strong>并不等于<br/>设备的1px</p><p>在css中<em>我们一般使用</em>px作为单位</p><p>还有一个<del>因素</del>也会引起css中px的变化</p><p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659552792,3869332496&fm=253&gp=0.jpg">以及某些桌面浏览器中</p>
</body>
</html>

img 标签的其他属性：
  • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字。alt后面的文案，只有当图片加载失败的时候才会展示。如果图片加载成功，这个文案就不会展示。
  • title: 提示文本. 鼠标放到图片上, 就会有提示。
  • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡。
  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定。
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">
属性与属性之间可以用空格或者换行隔开。
首先来看alt： 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的<strong>1px</strong>并不等于<br/>设备的1px</p><p>在css中<em>我们一般使用</em>px作为单位</p><p>还有一个<del>因素</del>也会引起css中px的变化</p><p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic." alt="图片加载失败">以及某些桌面浏览器中</p>
</body>
</html>
这个图片的网址是错误的，那么网页上就会出现：

然后title：

我们平常进行搜索的时候。我们将鼠标放在这个bing图片上的时候，会出现一个《返回到必应搜索》的提示，这就是title的效果。 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的<strong>1px</strong>并不等于<br/>设备的1px</p><p>在css中<em>我们一般使用</em>px作为单位</p><p>还有一个<del>因素</del>也会引起css中px的变化</p><p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659552792,3869332496&fm=253&gp=0.jpg" title="这是一张风景图片">以及某些桌面浏览器中</p>
</body>
</html>

可以看到是出现了效果的。

然后width/height属性：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的<strong>1px</strong>并不等于<br/>设备的1px</p><p>在css中<em>我们一般使用</em>px作为单位</p><p>还有一个<del>因素</del>也会引起css中px的变化</p><p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659552792,3869332496&fm=253&gp=0.jpg" width="100px" height="100px">以及某些桌面浏览器中</p>
</body>
</html>

对比于之前图片是明显变小的（px是像素的意思）

最后是border属性：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的<strong>1px</strong>并不等于<br/>设备的1px</p><p>在css中<em>我们一般使用</em>px作为单位</p><p>还有一个<del>因素</del>也会引起css中px的变化</p><p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659552792,3869332496&fm=253&gp=0.jpg" width="100px" height="100px" border="10px">以及某些桌面浏览器中</p>
</body>
</html>

6.7 超链接标签：a

  • href: 必须具备, 表示点击后会跳转到哪个页面.
  • target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开. 
<a href="http://www.baidu.com">百度</a>
链接的几种形式：
  • 外部链接：href引用其他网站的地址
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://news.qq.com/">跳转到腾讯网</a>
</body>
</html>

  • 内部链接：网站内部页面之间的链接。写相对路径即可。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://news.qq.com/">跳转到腾讯网</a><a href="1.html">跳转到1.html页面</a>
</body>
</html>

  • 空链接：使用#在href中占位。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://news.qq.com/">跳转到腾讯网</a><a href="1.html">跳转到1.html页面</a><a href="#">跳转到当前页面</a>
</body>
</html>

  • 下载链接：href对应的路径是一个文件（可以使用zip文件）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://news.qq.com/">跳转到腾讯网</a><a href="1.html">跳转到1.html页面</a><a href="#">跳转到当前页面</a><a href="D:\Microsoft edge download\citation-network1.zip">下载文件</a>
</body>
</html>

  • 网页元素链接：可以给图片等任何元素添加链接。
例如：

点击这个图片之后，会跳转到bing搜索主页 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://news.qq.com/">跳转到腾讯网</a><a href="1.html">跳转到1.html页面</a><a href="#">跳转到当前页面</a><a href="D:\Microsoft edge download\citation-network1.zip">下载文件</a><a href="http://www.sogou.com"><img src="../OIP.jpg" alt=""></a>
</body>
</html>

点击之后：

  • 锚点链接：指我点击页面中的某一个链接(锚点链接)，就会跳到这个页面的指定位置(锚点)。
例如多个网站中的回到顶部按钮就是用锚点做的 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p name="top" id="top"></p><a href="https://news.qq.com/">跳转到腾讯网</a><a href="1.html" target="_blank">跳转到1.html页面</a><a href="#">跳转到当前页面</a><a href="D:\Microsoft edge download\citation-network1.zip">下载文件</a><a href="http://www.sogou.com"><img src="../OIP.jpg" alt=""></a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><a href="#top">回到顶部</a>
</body>
</html>

点击之后：

确实是回到了顶部。
上面都是说的href属性，下面来看看target属性有什么用：
我们如果不想要跳转之后仍然在当前页面，我们可以修改target属性，默认是_self，即当前页面跳转，还可以设置为_blank，即重新打开一个页面显示跳转结果： 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://news.qq.com/">跳转到腾讯网</a><a href="1.html" target="_blank">跳转到1.html页面</a><a href="#">跳转到当前页面</a><a href="D:\Microsoft edge download\citation-network1.zip">下载文件</a><a href="http://www.sogou.com"><img src="../OIP.jpg" alt=""></a>
</body>
</html>

可以看到点击之后打开了一个新页面。
如果我们要禁止a标签跳转： 
<a href="javascript:void(0);"> 或者 <a href="javascript:;">

6.8   表格标签

  • table 标签: 表示整个表格
  • tr: 表示表格的一行
  • td: 表示一个单元格
  • th: 表示表头单元格. 会居中加粗
  • thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
  • tbody: 表格的主体区域

table 包含 tr , tr 包含 td 或者 th。

表格标签有一些属性, 可以用于设置大小边框等。 但是一般使用 CSS 方式来设置。
这些属性都要放到 table 标签中。

  • align：是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
  • border：表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框。
  • cellpadding: 内容距离边框的距离, 默认 1 像素。
  • cellspacing: 单元格之间的距离. 默认为 2 像素。
  • width / height: 设置尺寸。

注意, 这几个属性, vscode 都提示不出来。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table border="1px" width="500px" height="200px" cellspacing="0" cellpadding="50" align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr> </thead> <tr><td>姓名</td><td>性别</td><td>年龄</td></tr>   <tr><td>张三</td><td>男</td><td>3</td></tr>    <tr><td>李四</td><td>男</td><td>4</td></tr>    <tr><td>王五</td><td>女</td><td>5</td></tr> </table>
</body>
</html>

合并单元格：

跨行合并: rowspan="n"，合并n行。
跨列合并: colspan="n"，合并n列。

  • 先确定跨行还是跨列
  • 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
  • 删除的多余的单元格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table border="1px" width="500px" height="200px" cellspacing="0" cellpadding="50" align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr> </thead>   <tr><td>张三</td><td rowspan="2">男</td><td>3</td></tr>    <tr><td>李四</td><!-- <td>男</td> --><td>4</td></tr>    <tr><td colspan="2">王五/女</td><!-- <td>女</td> --><td>5</td></tr> </table>
</body>
</html>

6.9   列表标签

6.9.1   无序列表

无序列表：ul li

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>这是一个无序列表</h1><ul><li>这是内容一</li><li>这是内容一</li><li>这是内容一</li></ul>
</body>
</html>

如果想修改列表前面的图形，可以用type属性：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>这是一个无序列表</h1><ul type="disc"><li>这是内容一</li><li>这是内容二</li><li>这是内容三</li></ul><ul type="square"><li>这是内容一</li><li>这是内容二</li><li>这是内容三</li></ul><ul type="circle"><li>这是内容一</li><li>这是内容二</li><li>这是内容三</li></ul>
</body>
</html>

6.9.2   有序列表

有序列表： ol li

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>这是一个有序列表</h1><ol><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol>
</body>
</html>

同样我们想要修改列表前面的数字样式，可以通过type属性设置：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>这是一个有序列表</h1><ol type="a"><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol><ol type="A"><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol><ol type="i"><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol><ol type="I"><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol><ol type="1"><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol>
</body>
</html>

也可以修改起始的序号值，比如从2开始计数：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>这是一个有序列表</h1><ol type="a" start="2"><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol>
</body>
</html>

6.9.3   自定义列表

自定义列表：dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>这是一个自定义列表</h1><dl><dt> 自定义列表显示内容<dd>自定义列表内容一</dd><dd>自定义列表内容一</dd><dd>自定义列表内容一</dd></dt></dl>
</body>
</html>

注意事项：
  • 元素之间是并列关系
  • ul/ol 中只能放 li 不能放其他标签，dl 中只能放 dt 和 dd
  • li 中可以放其他标签。
  • 列表带有自己的样式，可以使用 CSS 来修改。 (例如前面的小圆点都会去掉)

6.10   表单标签

表单是让用户输入信息的重要途径。 用表单标签来完成与服务器的一次交互。将前端填写的数据提交给服务器。
分成两个部分:
  • 表单域: 包含表单元素的区域. 重点是 form 标签。
  • 表单控件: 输入框, 提交按钮等. 重点是 input 标签。

6.10.1   form标签

<form action="test.html">... [form 的内容]</form>

描述了要把数据按照什么方式, 提交到哪个页面中。

关于 form 需要结合 服务器 & 网络编程 来进一步理解. 后面再详细研究。

6.10.2   input标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框。
  • type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等。
  • name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一。
  • value: input 中的默认值。
  • checked: 默认被选中。(用于单选按钮和多选按钮)
  • maxlength: 设定最大长度。
文本框： 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">姓名<input type="text"></form>
</body>
</html>

密码框：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">姓名<input type="text"><br>密码<input type="password"></form>
</body>
</html>

单选框：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">姓名<input type="text"><br>密码<input type="password"><br>性别<input type="radio" name="gender">男<input type="radio" name="gender" checked="checked">女</form>
</body>
</html>

注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果。

checked表示默认性别为女。

如果我们两个都加上checked呢？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">姓名<input type="text"><br>密码<input type="password"><br>性别<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender" checked="checked">女</form>
</body>
</html>

这个就根据实际浏览器自己去实现甄别。

复选框：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">姓名<input type="text"><br>密码<input type="password"><br>性别<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender" checked="checked">女<br>爱好<input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">玩游戏</form>
</body>
</html>

普通按钮：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">姓名<input type="text"><br>密码<input type="password"><br>性别<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender" checked="checked">女<br>爱好<input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">玩游戏<br><input type="button" value="这是一个普通按钮" onclick="alert('hello')"></form>
</body>
</html>

提交按钮：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="https://blog.csdn.net/weixin_75172965?type=blog">课程：<input type="text" name="course"><input type="submit"></form>
</body>
</html>

提交之后，就会跳转到博客主页：

清空按钮：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="https://blog.csdn.net/weixin_75172965?type=blog">课程：<input type="text" name="course"><input type="submit"><input type="reset"></form>
</body>
</html>

点击重置之后，就会清空输入内容：

选择文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="https://blog.csdn.net/weixin_75172965?type=blog">课程：<input type="text" name="course"><input type="submit"><input type="reset"><input type="file"></form>
</body>
</html>

点击选择文件之后，会弹出文件管理器页面选择文件：

任意点击一个文件之后，会显示：

6.11   label标签

搭配 input 使用。 点击 label 也能选中对应的单选/复选框, 能够提升用户体验。

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应。(此时点击才是有用的)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="radio" name="sex">男<input type="radio" name="sex">女
</body>
</html>

但是这样是不能通过点击汉字“男”或者“女”来选择的，所以用上label标签：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><label for="male">男</label><input type="radio" name="sex" id="male"><label for="female">女</label><input type="radio" name="sex" id="female">
</body>
</html>

6.12   select标签

下拉菜单选择。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><label for="male">男</label><input type="radio" name="sex" id="male"><label for="female">女</label><input type="radio" name="sex" id="female"><select name="" id=""><option value="">--请选择年份--</option><option value="" selected="selected">--2000--</option><option value="">--2001--</option><option value="">--2002--</option><option value="">--2003--</option></select>
</body>
</html>

selected="selected"表示默认选择的。

6.13   textarea标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><label for="male">男</label><input type="radio" name="sex" id="male"><label for="female">女</label><input type="radio" name="sex" id="female"><select name="" id=""><option value="">--请选择年份--</option><option value="" selected="selected">--2000--</option><option value="">--2001--</option><option value="">--2002--</option><option value="">--2003--</option></select><textarea name="" id="" cols="20" rows="10"></textarea>
</body>
</html>

超过10行之后会出现滚轮（红色方框内）。

6.14   无语义标签：div & span

无语义标签没有固定的用途，拿着这个标签啥都可以做。
div标签：division的缩写，含义是分割。
span标签：含义是跨度。
就是两个盒子。用于网页布局：
  • div是独占一行的，是一个大盒子。
  • span不独占一行，是一个小盒子。
div里面可以嵌套div，span以及之前的标题，段落标签等等有具体用途的标签。 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div><div><span>吃饭</span><span>睡觉</span><span>打游戏</span><span>看书</span></div><div><div>吃饭</div><div>睡觉</div><div>打游戏</div><div>看书</div></div></div>
</body>
</html>

七.   综合示例：展示简历信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>小灵蛇</h1><div><h2>基本信息</h2><img src="https://c-ssl.duitang.com/uploads/item/201910/05/20191005000222_tmgxw.jpg" alt="" width="200" height="200"><span><p>求职意向:C++开发</p></span><span><p>联系电话:xxx-xxxx-xxxx</p></span><span><p>邮箱:xxx@163.com</p></span><span><p><a href="https://blog.csdn.net/weixin_75172965?type=blog">我的博客</a></p></span><span><p><a href="https://gitee.com/">我的Gitee</a></p></span></div><div><h2>教育背景</h2><ol><li>xxxx-xxxx 小学</li><li>xxxx-xxxx 初中</li><li>xxxx-xxxx 高中</li><li>xxxx-xxxx 大学</li></ol></div><div><h2>专业技能</h2><ul><li>掌握C++编程</li><li>掌握Linux平台编程</li><li>掌握前端相关技能：html，css，JavaScript</li></ul></div><div><h2>个人项目</h2><ol><h3><li>留言墙</li></h3><p>开发时间：2024年4月~2024年5月</p><p>功能介绍：</p><ul><li>支持留言发布</li><li>支持匿名留言</li></ul></ol><ol><h3><li>学习小助手</li></h3><p>开发时间：2024年5月~2024年6月</p><p>功能介绍：</p><ul><li>错词检测</li><li>支持同学探讨</li></ul></ol></div><div><h2>个人评价</h2><p>热爱生活，热爱编程</p></div>
</body>
</html>

八.   综合示例：填写简历信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table><thead><h3>请填写简历信息</h3></thead><tr><td><label for="name">姓名</label></td><td><input type="text" name="" id="name"></td></tr><tr><td>性别</td><td><input type="radio" name="sex" id="male" checked="checked"><label for="male"><img src="../male.png" alt="" width="20" height="20">男</label><input type="radio" name="sex" id="female"><label for="female"><img src="../female.png" alt="" width="20" height="20">女</label></td></tr><tr><td>出生日期</td><td><select name="" id=""><option value="">--请选择年份--</option><option value="">--2000--</option><option value="">--2001--</option><option value="">--2002--</option><option value="">--2003--</option><option value="">--2004--</option></select><select name="" id=""><option value="">--请选择月份--</option><option value="">--1--</option><option value="">--2--</option><option value="">--3--</option><option value="">--4--</option><option value="">--5--</option><option value="">--6--</option><option value="">--7--</option><option value="">--8--</option><option value="">--9--</option><option value="">--10--</option><option value="">--11--</option><option value="">--12--</option></select><select name="" id=""><option value="">--请选择日期--</option><option value="">--1--</option><option value="">--2--</option><option value="">--3--</option><option value="">--4--</option><option value="">--6--</option><option value="">--7--</option><option value="">--8--</option><option value="">--9--</option><option value="">--10--</option><option value="">--11--</option><option value="">--12--</option><option value="">--13--</option><option value="">--14--</option><option value="">--15--</option><option value="">--16--</option><option value="">--17--</option><option value="">--18--</option><option value="">--19--</option><option value="">--20--</option><option value="">--21--</option><option value="">--22--</option><option value="">--23--</option><option value="">--24--</option><option value="">--25--</option><option value="">--26--</option><option value="">--27--</option><option value="">--28--</option><option value="">--29--</option><option value="">--30--</option><option value="">--31--</option></select></td></tr><tr><td><label for="school">就读学校</label></td><td><input type="text" id="school"></td></tr><tr><td>应聘岗位</td><td><input type="checkbox" name="" id="fe"><label for="fe">前端开发</label><input type="checkbox" name="" id="server"><label for="server">后端开发</label><input type="checkbox" name="" id="test"><label for="test">测试开发</label><input type="checkbox" name="" id="yunwei"><label for="yunwei">运维开发</label></td></tr><tr><td>掌握的技能</td><td><textarea name="" id="" cols="30" rows="20"></textarea></td></tr><tr><td>项目经历</td><td><textarea name="" id="" cols="30" rows="20"></textarea></td></tr><tr><td></td><td><input type="checkbox" id="read"><label for="read">我已仔细阅读公司的招聘要求</label></td></tr><tr><td></td><td><a href="#">查看我的状态</a></td></tr><tr><td></td><td><h3>请应聘者确认</h3></td></tr><tr><td></td><td><ul><li>以上信息有效</li><li>可以尽早去到公司实习</li><li>可以接受公司加班文化</li></ul></td></tr></table>
</body>
</html>

九.   Emmet快捷键

  • 快速输入标签
input[tab]
  • 快速输入多个标签
div*3[tab]
  • 标签带id
div#sex[tab]
  • 标签带类名
div.sex[tab]
  • 标签带子元素
ul>li*3[tab]
  • 标签带兄弟元素
span+span
  • 标签带内容
div{hello}
  • 标签带内容(带编号)
div{$.hello}
除此之外还有很多, 大家可以在使用中自己积累。

十.   HTML特殊字符

有些特殊的字符在html文件中是不能直接表示的，例如：
  • 空格： 
  • 小于号：<
  • 大于号：>
  • 按位与：&
上面最后的分号都不能省去。 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>这里有四个空格    开始编写页面</p><p>这里有四个空格&nbsp;&nbsp;&nbsp;&nbsp;开始编写页面</p><p><>&</p><p>&lt;&gt;&amp;</p>
</body>
</html>

总结：

好了，到这里今天的知识就讲完了，大家有错误一点要在评论指出，我怕我一人搁这瞎bb，没人告诉我错误就寄了。

祝大家越来越好，不用关注我（疯狂暗示）

 

相关文章：

HTML零基础入门教学

目录 一. HTML语言 二. HTML结构 三. HTML文件基本结构 四. 准备开发环境 五. 快速生成代码框架 六. HTML常见标签 6.1 注释标签 6.2 标题标签&#xff1a;h1-h6 6.3 段落标签&#xff1a;p 6.4 换行标签&#xff1a;br 6.5 格式化标签 6.6 图片标签&a…...

编程日记 2025/6/1 2:47:21

AI-PR曲线

PR曲线 人工智能里面的一个小概念。 2.3 性能度量&#xff08;查全率&#xff0c;查准率&#xff0c;F1&#xff0c;PR曲线与ROC曲线&#xff09; 预测出来的是一个概率&#xff0c;不能根据概率来说它是正类还是负类&#xff0c;要有一个阈值。 查准率&#xff08;Precision&…...

编程日记 2025/6/3 1:59:17

[创业之路-199]：《华为战略管理法-DSTE实战体系》- 3 - 价值转移理论与利润区理论

目录 一、价值转移理论 1.1. 什么是价值&#xff1f; 1.2. 什么价值创造 &#xff08;1&#xff09;、定义 &#xff08;2&#xff09;、影响价值创造的因素 &#xff08;3&#xff09;、价值创造的三个过程 &#xff08;4&#xff09;、价值创造的实践 &#xff08;5&…...

编程日记 2025/6/4 10:50:24

问题解决: python 调用存储过程获取不到返回值

python 调用存储过程获取不到返回值 1. 检查存储过程是否有副作用&#xff08;例如关闭结果集&#xff09;2. 在 Python 代码中&#xff0c;确保在执行存储过程时按正确的顺序操作&#xff1a;3. 使用游标检查结果集 1. 检查存储过程是否有副作用&#xff08;例如关闭结果集&am…...

编程日记 2025/6/4 4:13:54

AI前沿分析：Github Copilot 推出免费版本，AI + 编程更高效！

名人说&#xff1a;莫听穿林打叶声&#xff0c;何妨吟啸且徐行。—— 苏轼 Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、GitHub Copilot&#xff1a;AI编程的“革命性”助力二、免费版本上线&#xff1a;AI编程的普及时代&…...

编程日记 2025/6/3 21:52:52

浅谈仓颉语言的优劣

仓颉语言&#xff0c;作为华为自研的新一代编程语言&#xff0c;以其高效、安全、现代化的特点&#xff0c;引起了广泛的关注。 仓颉语言的优势 高效并发 仓颉语言的一大亮点是其轻松并发的能力。它实现了轻量化用户态线程和并发对象库&#xff0c;使得高效并发变得轻松。仓颉…...

编程日记 2025/6/3 21:52:49

AI证件照制作 API 快速生成证件照

本文将介绍一种 AI证件照制作 API 对接说明&#xff0c;它是可以通过输入人像照片URL以及自己喜欢的模板来制作各种风格的证件照。 接下来介绍下 AI证件照制作 API 的对接说明。 申请流程 要使用 API&#xff0c;需要先到 AI证件照制作 API 对应页面申请对应的服务&#xff…...

编程日记 2025/6/4 4:08:38

Java.10--IO流

JavaSE&#xff08;Java Standard Edition&#xff09;中的IO&#xff08;输入输出&#xff09;库提供了用于读写数据的类和接口。 这些功能可以用来处理文件、网络连接、内存中的数据结构等。 一、IO流分类 Java中的IO&#xff08;输入输出&#xff09;库可以按照不同的标准…...

编程日记 2025/6/3 21:52:47

Firewalld 防火墙全面解析与配置指南

在当今网络环境中，网络安全至关重要，而防火墙作为网络安全的关键防线，在Linux系统中扮演着极其重要的角色。本文将深入探讨Firewalld防火墙，涵盖其基础概念，优势特点，配置方法等多面内容，为您提供全面的Firewalld防火墙知识体系 一，Linux防火墙基础 （一) 防火墙内核…...

编程日记 2025/6/3 21:52:45

Javascript-web API-day02

文章目录 01-事件监听02-点击关闭广告03-随机点名案例04-鼠标经过或离开事件05-可点击的轮播图06-小米搜索框07-键盘类型事件08-键盘事件-发布评论案例09-focus选择器10-评论回车发布11-事件对象12-trim方法13-环境对象14-回调函数15-tab栏切换 01-事件监听 <!DOCTYPE html…...

编程日记 2025/6/2 17:13:18

Python爬虫之代理的设置

【1】urllib中使用公开代理 import urllib.requesturl http://www.baidu.com/s?wdipheaders {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36 }# 请求对象的定制 request urllib.req…...

编程日记 2025/6/1 21:37:05

Qt：QMetaObject::connectSlotsByName实现信号槽自动关联

简介 在Qt中&#xff0c;QMetaObject::connectSlotsByName 是一个便利的方法&#xff0c;它可以根据对象的对象名&#xff08;objectName&#xff09;自动将信号和槽连接起来。但是&#xff0c;要使用这个方法&#xff0c;必须确保&#xff1a; 1 控件&#xff08;如按钮&…...

编程日记 2025/6/1 21:37:03

芝法酱学习笔记（2.1）——sql性能优化1

一、前言 做程序员这行&#xff0c;相信大家都会接触到性能优化这个概念。并且多数程序员&#xff0c;为自己能参与到性能优化的工作而感到自豪。 在普通应用系统的业务开发中&#xff0c;程序的性能瓶颈往往在数据库查询的IO上&#xff0c;所以优化数据库查询则是重中之重的工…...

编程日记 2025/6/4 9:31:58

【Mysql】Java的JDBC编程

本节目标 数据库驱动 JDBC的概念及作用 掌握JDBC的工作原理 掌握JDBC中几个常用接口和类 掌握基于数据库的应用程序开发流程 一. 数据库编程的必备条件 编程语言&#xff0c;如Java&#xff0c;C、C、Python等 数据库&#xff0c;如Oracle&#xff0c;MySQL&#xff0c;S…...

编程日记 2025/6/3 16:51:21

PHPUnit使用指南：编写高效的单元测试

PHPUnit使用指南&#xff1a;编写高效的单元测试 单元测试是软件开发中不可或缺的一部分&#xff0c;它能够帮助开发者确保代码的正确性和稳定性。PHPUnit是PHP中最流行的单元测试框架之一&#xff0c;提供了一套强大的工具和功能来编写和运行测试。本文将详细介绍如何使用PHP…...

编程日记 2025/6/3 15:47:34

二、HTML5

一、HTML5简介 1、什么是HTML5 HTML5 是新一代的 HTML 标准&#xff0c;2014年10月由万维网联盟&#xff08;W3C&#xff09;完成标准制定。 官网地址&#xff1a; W3C 提供&#xff1a; https://www.w3.org/TR/html/index.html WHATW…...

编程日记 2025/6/2 22:35:21

授权模型MAC

MAC&#xff08;Mandatory Access Control&#xff09;是一种授权模型&#xff0c;用于实现对系统资源访问的强制控制。在MAC模型中&#xff0c;授权是基于预先定义的安全策略&#xff0c;且该策略由系统管理员来配置和管理。 在MAC模型中&#xff0c;每个用户和每个资源都被赋…...

编程日记 2025/6/1 7:11:01

GaussDB数据库迁移方案介绍

云数据库GaussDB提供了多种数据迁移方案&#xff0c;可满足从MySQL数据库、Oracle数据库、GaussDB数据库、PostgreSQL数据库、DB2 for LUW、RDS for SQL Server、Microsoft SQL Server数据库到云数据库GaussDB的迁移。 数据迁移工具有DRS、DAS和gs_loader。推荐使用DRS&#x…...

编程日记 2025/6/4 10:23:40

web3跨链桥协议-Nomad

项目介绍 Nomad是一个乐观跨链互操作协议。通过Nomad协议&#xff0c;Dapp能够在不同区块链间发送数据&#xff08;包括rollups&#xff09;&#xff0c;Dapp通过Nomad的合约和链下的代理对跨链数据、消息进行验证、传输。其安全通过乐观验证机制和欺诈证明制约验证者实现&…...

编程日记 2025/6/3 7:45:53

白话java设计模式

创建模式 单例模式&#xff08;Singleton Pattern&#xff09;&#xff1a; 就是一次创建多次使用&#xff0c;它的对象不会重复创建&#xff0c;可以全局来共享状态。 工厂模式&#xff08;Factory Method Pattern&#xff09;&#xff1a; 可以通过接口来进行实例化创建&a…...

编程日记 2025/5/31 19:01:45

代码的注释

代码注释是程序开发中至关重要的一部分&#xff0c;良好的注释能够大大提升代码的可读性、可维护性和团队协作效率。注释帮助开发人员理解代码的逻辑、目的和背后的设计思想&#xff0c;尤其是在面对复杂的业务逻辑或算法时&#xff0c;注释可以帮助未来的开发人员快速理解并有…...

编程日记 2025/6/4 9:51:22

Java中的Consumer接口应该如何使用（通俗易懂图解）

应用场景&#xff1a; 第一次程序员A写好了个基础的遍历方法&#xff1a; public class Demo1 {public static void main(String[] args) {//假设main方法为程序员B写的,此时需要去调用A写好的一个遍历方法//1.如果此时B突然发现想将字符串以小写的形式打印出来&#xff0c;则…...

编程日记 2025/6/2 14:59:27

数据库设计的基础与进阶：1NF、2NF、3NF及BCNF解析

目录 什么是数据库范式&#xff1f; 1. 第一范式&#xff08;1NF&#xff09; 2. 第二范式&#xff08;2NF&#xff09; 3. 第三范式&#xff08;3NF&#xff09; 4. 博茨-科德范式&#xff08;BCNF&#xff09; 总结 在数据库设计中&#xff0c;范式是为了确保数据存储结…...

编程日记 2025/6/3 1:47:36

ARM Cortex-A7 MPCore 架构

1、Cortex-A7 MPCore 简介 Cortex-A7 MPcore 处理器支持 1~4 核，通常是和 Cortex-A15 组成 big.LITTLE 架构的， Cortex-A15 作为大核负责高性能运算，比如玩游戏啥的， Cortex-A7 负责普通应用，因为 CortexA7 省电。 Cortex-A7 本身性能也不弱，不要看它叫做 Cortex-A7 但是…...

编程日记 2025/6/4 3:43:17

【操作系统】数据集合集！

本文将为您介绍经典、热门的数据集&#xff0c;希望对您在选择适合的数据集时有所帮助。 1 HarmonyOS 更新时间&#xff1a;2024-07-20 访问地址: GitHub 描述&#xff1a; 是首个基于微内核的全场景分布式操作系统&#xff0c;是华为自主研发的操作系统&#xff0c;华为将率…...

编程日记 2025/6/4 16:44:55

原生js图片预览

下面的图片预览是从一个JSON文件中加载图片列表&#xff0c;并且支持点击缩略图预览大图&#xff0c;还可以使用鼠标滚轮进行图片缩放。接下来了给大家把html、css、js一个一个的讲解一下 首先是html <div class"container"></div><div id"imag…...

编程日记 2025/6/4 14:43:37

【系统】Mac crontab 无法退出编辑模式问题

【系统】Mac crontab 无法退出编辑模式问题 背景一、问题回答1.定位原因&#xff1a;2.确认编辑器类型3.确保编辑器进入正确3.1 确认是否有crontab调度任务3.2 进入编辑器并确保编辑器正常3.3 保存操作 4.确认crontab任务存在5.确保脚本的可执行性和正确性 二、后续 背景 之前…...

编程日记 2025/6/1 7:10:41

【进程篇】04.进程的状态与优先级

一、进程的状态 1.1 进程的状态 1.1.1 并行与并发 • 并行: 多个进程在多个CPU下分别&#xff0c;同时进行运行 • 并发: 多个进程在一个CPU下采用进程切换的方式&#xff0c;在一个时间片内&#xff0c;让多个进程都得以推进 1.1.2 时间片的概念 LInux/windows这些民用级别…...

编程日记 2025/6/3 10:11:14

linux下蓝牙调试工具hcitool的使用

hcitool 是一个用于蓝牙设备管理的命令行工具&#xff0c;主要用于查看和管理蓝牙设备。以下是一些常见的用法和示例&#xff1a; 1. 查看本地蓝牙适配器信息 使用 hcitool dev 命令可以查看本地蓝牙适配器的信息。 hcitool dev示例输出&#xff1a; Devices:hci0 00:11:22…...

编程日记 2025/6/3 4:02:04

【RAG实战】Prompting vs. RAG vs. Finetuning: 如何选择LLM应用选择最佳方案

在构建基于大型语言模型&#xff08;LLM&#xff09;的应用时&#xff0c;通常不可能立即使用模型而无需任何调整。为了保持高实用性&#xff0c;我们可以选择以下几种方法之一&#xff1a; Prompt Engineering&#xff08;提示工程&#xff09;Fine-tuning&#xff08;微调&a…...

编程日记 2025/6/3 9:12:29

EasyExcel 动态设置表格的背景颜色和排列

项目中使用EasyExcel把数据以excel格式导出&#xff0c;其中设置某一行、某一列单元格的背景颜色、排列方式十分常用&#xff0c;记录下来方便以后查阅。 1. 导入maven依赖&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>easy…...

编程日记 2025/6/3 9:06:15

python俄罗斯方块.py

俄罗斯方块.py import pygame import random# 初始化游戏 pygame.init()# 设置游戏窗口的大小 screen_width 800 screen_height 600 play_width 300 play_height 600 block_size 30top_left_x (screen_width - play_width) // 2 top_left_y screen_height - play_heigh…...

编程日记 2025/6/4 1:23:45

IP协议详解

目录 一. IP协议概述 1. 概念 2. 特点 (1) 无连接性 (2) 不可靠传输 (3) 数据包分片和重组 二. IP协议报文格式 1. 版本 (4位) 2. 首部长度 (4位) 3. 服务类型 (8位) 4. 总长度 (16位) 5. 标识, 标志位, 片偏移 6. 生存时间 (8位) 7. 协议 (8位) 8. 首部检验和 (1…...

编程日记 2025/6/3 2:25:43

青少年编程与数学 02-004 Go语言Web编程 02课题、依赖管理

青少年编程与数学 02-004 Go语言Web编程 02课题、依赖管理 课题摘要:一、项目结构各目录说明&#xff1a; 二、依赖项三、依赖管理任务四、依赖管理步骤1. 初始化Go Modules项目2. 添加依赖3. 指定依赖版本4. 更新依赖5. 清理未使用的依赖6. 离线工作7. 模块隔离8. 可重现构建 …...

编程日记 2025/6/2 14:56:48

代码生成器

源码 表结构 代码的目录结构 后端代码 前端代码 查询数据库的表 前端 后端 只查询当前数据库的表去除掉定时任务和生成器的表格去除掉已经导入的表格<select id="selectDbTableList" parameterType="GenTable" resultMap="GenTableResult"…...

编程日记 2025/6/3 6:08:36

MySQL 性能调优：打造高效数据库

SQL 语句层面的性能调优策略 合理选择字段属性 在创建 MySQL 表时&#xff0c;为了获取更好的性能&#xff0c;选择合适的字段属性至关重要。 首先&#xff0c;要依据实际情况合理设置字段的类型及宽度。例如&#xff0c;对于像手机号码这类固定长度为 11 位的字段&#xff…...

编程日记 2025/6/2 14:39:52

Elasticsearch 实战应用：提升数据洞察与交互体验

随着数据量的不断增长和数据处理需求的日益复杂&#xff0c;Elasticsearch 在实战应用中的价值愈发凸显。在本次教学中&#xff0c;我们继续深入探索 Elasticsearch 的更多高级实战应用&#xff0c;致力于培养学生在数据洞察和用户交互方面的卓越能力。 一、数据建模与优化策略…...

编程日记 2025/5/31 19:15:58

Ubuntu 配置静态 IP 地址

在 Ubuntu 系统中配置静态 IP 地址&#xff0c;适用于服务器或虚拟机需要固定 IP 的场景。以下是详细的步骤说明。 1. 确认网络接口信息 在配置之前&#xff0c;先确认系统的网络接口名称和当前的网络配置。 1.1 查看网络接口 运行以下命令获取网络接口的名称&#xff08;如…...

编程日记 2025/6/1 7:10:27

2025美赛数学建模十大常用算法之层次分析法AHP详解

层次分析法&#xff08;Analytic Hierarchy Process, AHP&#xff09;详解 一、层次分析法简介 层次分析法&#xff08;AHP&#xff09;是一种系统化的多准则决策方法&#xff0c;由美国运筹学家萨蒂&#xff08;Thomas L. Saaty&#xff09;于20世纪70年代提出。AHP通过构建层…...

编程日记 2025/6/1 2:50:42

鸿蒙学习笔记：用户登录界面

文章目录 1. 提出任务2. 完成任务2.1 创建鸿蒙项目2.2 准备图片资源2.3 编写首页代码2.4 启动应用 3. 实战小结 1. 提出任务 本次任务聚焦于运用 ArkUI 打造用户登录界面。需呈现特定元素&#xff1a;一张图片增添视觉感&#xff0c;两个分别用于账号与密码的文本输入框&#…...

编程日记 2025/6/3 15:29:45

电脑上怎么运行手机APP（电脑上运行手机APP的4种方法）

玩家可能不愿意在小屏幕上使用 Android 应用程序。此外&#xff0c;某些游戏玩家可能更喜欢在更大的屏幕上寻找刺激的体验&#xff0c;例如 PC 提供的体验&#xff0c;这可以增强他们的乐趣。因此&#xff0c;他们可能对如何在 PC 上流畅地运行 Android 应用程序感到好奇。本指…...

编程日记 2025/6/4 10:18:57

Java原生实现代码沙箱的实现

代码沙箱实现 代码沙箱&#xff1a;只负责接收代码和输入&#xff0c;返回编译运行的结果&#xff0c;不负责判题&#xff08;可作为独立项目/服务&#xff0c;提供给其他需要执行代码的项目使用&#xff09; 以Java语言为主&#xff0c;实现代码沙箱。主要学习其思想、关键流…...

编程日记 2025/5/31 21:18:27

Docker基础命令实战

问题&#xff1a;Error response from daemon: Get "https://index.docker.io/v1/search?qmysql&n25": dial tcp 199.59.148.9:443: connect: connection refused 在pull nginx时出现的报错&#xff0c;可能原因是镜像源过期了&#xff0c;我们需要更换镜像源 …...

编程日记 2025/5/31 10:46:43

【QT实战の心情笔记】

文章目录 界面布局主要界面分为三部分&#xff1a;1. 笔记列表区域2. 笔记内容编辑区域3. 操作按钮区域 Qt Designer 界面设计步骤完整界面布局图各控件设置和属性Qt Designer 文件 (.ui) 数据库表结构SQL 表结构&#xff1a; 逻辑代码1. 项目结构2. Note 类 (Note.h 和 Note.c…...

编程日记 2025/6/3 20:09:10

关于Unity VFX 在Spawn状态的一些笔记

一. periodic burst 和 single burst 的区别 1. Single Burst 定义：Single Burst 是一次性发射粒子，只在粒子系统启动时触发一次。 它是一个瞬时的发射行为，适合单次效果。 特性： 只触发一次。发射时间通常是粒子系统启动时。不会重复发射，除非重新触发粒子系统。适用场景…...

编程日记 2025/6/1 7:10:16

AutoMQ 流表一体新特性 Table Topic 发布： 无缝集成 AWS S3 Table 和 Iceberg

超越共享存储&#xff1a;使用 Apache Iceberg 中的 AutoMQ Table Topic 实现流处理与分析的统一 自 2023 年底官宣以来&#xff0c;AutoMQ 成功地将 Apache Kafka 从“Shared Nothing architecture”转变为“Shared Storage architecture”&#xff0c;这为京东、知乎、小红书…...

编程日记 2025/5/31 8:50:43

springboot445新冠物资管理(论文+源码)_kaic

摘 要 使用旧方法对新冠物资管理的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在新冠物资管理的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发的新冠物资管…...

编程日记 2025/6/4 13:54:33

【AIGC】LangChain 环境搭建及模型API能力集成使用详解

目录 一、前言 二、LangChain 概述 2.1 LangChain 是什么 2.2 LangChain 主要特点 2.3 LangChain能做什么和能力一览 2.4 LangChain 主要应用场景 三、环境准备 3.1 python 开发环境 3.1.1 python环境 3.1.2 配置vscode环境 3.1.3 安装LangChain相关插件包 3.2 获取…...

编程日记 2025/6/1 6:45:40

YOLOv8目标检测(六)_封装API接口

YOLOv8目标检测(一)_检测流程梳理&#xff1a;YOLOv8目标检测(一)_检测流程梳理_yolo检测流程-CSDN博客 YOLOv8目标检测(二)_准备数据集&#xff1a;YOLOv8目标检测(二)_准备数据集_yolov8 数据集准备-CSDN博客 YOLOv8目标检测(三)_训练模型&#xff1a;YOLOv8目标检测(三)_训…...

编程日记 2025/6/2 17:26:53

Firecrawl教程①：自动化抓取与数据转化，赋能AI应用

Firecrawl教程①：自动化抓取与数据转化，赋能AI应用 前言一、功能特点1. 支持 LLM 可处理的数据格式2. 全面抓取网站3. 强大的操作支持4. 灵活的定制选项5. 支持多种编程语言 SDK二、如何开始使用 Firecrawl第一步：获取 API 密钥第二步：官网在线工具使用第三步：安装 Firecr…...

编程日记 2025/6/1 6:45:36