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

系列学习前端之第 2 章：一文精通 HTML

news 文章来源：https://blog.csdn.net/BiandanLoveyou/article/details/134227980 2024/9/12 20:09:21

全套学习 HTML+CSS+JavaScript 代码和笔记请下载网盘的资料：

链接: https://pan.baidu.com/s/1-vY2anBdrsBSwDZfALZ6FQ 提取码: 6666

HTML 全称：HyperText Markup Language（超文本标记语言）

1、 HTML 标签

1. 标签又称元素，是HTML的基本组成单位。
2. 标签分为：双标签与单标签 （绝大多数都是双标签）。
3. 标签名不区分大小写，但推荐小写，因为小写更规范。

2、HTML 标签属性

1. 用于给标签提供附加信息。
2. 可以写在：起始标签 或 单标签中，形式如下：

3. 有些特殊的属性，没有属性名，只有属性值，例如：<input disabled>

4. 注意点：
1. 不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写，后面会详细总结）。
2. 属性名、属性值不能乱写，都是W3C规定好的。
3. 属性名、属性值，都不区分大小写，但推荐小写。
4. 双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
5. 标签中不要出现同名属性，否则 后写的会失效，例如：
<input type = "text" type = "password" >

 3、HTML 基本结构

1. 在网页中，如何查看某段结构的具体代码？ —— 点击鼠标右键，选择 “ 检查 ” 。
2. 【检查】 和 【查看网页源代码】的区别：
【查看网页源代码】看到的是：程序员编写的源代码。
【检查】看到的是：经过浏览器 “ 处理 ” 后的源代码。
备注：日常开发中，【检查】用的最多。
3. 网页的 基本结构 如下：
1. 想要呈现在网页中的内容写在 body 标签中。
2. head 标签中的内容不会出现在网页中。
3. head 标签中的 title 标签可以指定网页的标题。 
<html><head><title>网页标题</title></head><body>......</body>
</html

4、HTML 注释

1. 特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见。
2. 作用：对代码进行解释和说明。
3. 写法： <!-- 注释内容 -->
4. 注释不可以嵌套，以下这么写是错的（反例）。
<!--
我是一段注释
<!-- 我是一段注释 -->
-->

5、HTML 文档声明

1. 作用：告诉浏览器当前网页的版本。
2. 写法： <!DOCTYPE html>
3. 注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。

6、HTML 字符编码

1. 计算机对数据的操作：
存储时，对数据进行： 编码 。
读取时，对数据进行： 解码 。
2. 编码、解码，会遵循一定的规范 —— 字符集 。
3. 字符集有很多中，常见的有（了解）：
1. ASCII ：大写字母、小写字母、数字、一些符号，共计 128 个。
2. ISO 8859 - 1 ：在 ASCII 基础上，扩充了一些希腊字符等，共计是 256 个。
3. GB2312 ：继续扩充，收录了 6763 个常用汉字、 682 个字符。
4. GBK ：收录了的汉字和符号达到 20000+ ，支持繁体中文。
5. UTF - 8 ：包含世界上所有语言的：所有文字与符号。 —— 很常用。
4. 使用原则是怎样的？
原则 1 ：存储时，务必采用合适的字符编码 。
否则：无法存储，数据会丢失！
原则 2 ：存储时采用哪种方式编码 ，读取时就采用哪种方式解码。
否则：数据错乱（乱码）！
5. 总结：
平时编写代码时，统一采用 UTF - 8 编码（最稳妥）。
为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指
定字符编码。
<head>
        <meta charset = "UTF-8" />
</head>

7、HTML 设置语言

1. 主要作用：
让浏览器显示对应的翻译提示。
有利于搜索引擎优化。
2. 具体写法： <html lang = "zh-CN">

8、HTML标准结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

在 vscode 编辑器中，输入 ! ，随后回车即可快速生成标准结构。

在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标。

9、HTML 基础

1、开发者文档

W3C官网： http://www.w3c.org/
W3School： https://www.w3school.com.cn/
MDN： http://developer.mozilla.org/ —— 平时用得最多

2. 排版标签

1. h1 最好写一个， h2~h6 能适当多写。
2. h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
3. p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签（暂时先这样记，后面会说规律）。

3. 语义化标签

  • 概念：用特定的标签，去表达特定的含义。
  • 原则：标签的默认效果不重要（后期可以通过 CSS 随便控制效果），语义最重要！
  • 举例：对于 h1 标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。
  • 优势：
  • 代码结构清晰可读性强。
  • 有利于 SEO（搜索引擎优化）。
  • 方便设备解析（如屏幕阅读器、盲人阅读器等）。

4. 块级元素 与 行内元素


        1. 块级元素：独占一行（排版标签都是块级元素）。
        2. 行内元素：不独占一行（目前只学了： input ，稍后会学习更多）。
        3. 使用原则：
 
1. 块级元素 中能写 行内元素 和 块级元素（简单记：块级元素中几乎什么都能写）。
2. 行内元素 中能写 行内元素，但不能写 块级元素。
3. 一些特殊的规则：
h1~h6 不能互相嵌套。
p 中不要写块级元素。

5.文本标签


1. 用于包裹：词汇、短语等。
2. 通常写在排版标签里面。
3. 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
4. 文本标签通常都是行内元素。

生活中的例子： div 是大包装袋， span 是小包装袋。

6、图片标签

 1. 像素（ px ）是一种单位，学到 CSS 时，我们会详细讲解。

2. 尽量不同时修改图片的宽和高，可能会造成比例失调。
3. 暂且认为 img 是行内元素（学到 CSS 时，会认识一个新的元素分类，目前咱们只知道：
块、行内）。
4. alt 属性的作用：
搜索引擎通过 alt 属性，得知图片的内容。 —— 最主要的作用。
当图片无法展示时候，有些浏览器会呈现 alt 属性的值。
盲人阅读器会朗读 alt 属性的值。

 7、路径的分类

7.1 相对路径：以当前位置作为参考点，去建立路径。

注意点：
相对路径中的 ./ 可以省略不写。
相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改

7.2 绝对路径：以根位置作为参考点，去建立路径。

1. 本地绝对路径： E:/a/b/c/ 奥特曼 .jpg 。（很少使用）
2. 网络绝对路径： http://www.atguigu.com/images/index_new/logo.png 。
注意点：
使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。
使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入
失败

8、 常见图片格式

1. jpg 格式
概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节
丢弃了）。
主要特点： 支持的颜色丰富、占用空间较小 、不支持透明背景、不支持动态图。
使用场景：对图片细节 没有极高要求 的场景，例如：网站的产品宣传图等 。 —— 该格式网
页中很常见。
2. png 格式
概述：扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。
主要特点： 支持的颜色丰富 、占用空间略大、 支持透明背景 、不支持动态图。
使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司 logo 图、重要配
图等。
3. bmp 格式
概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
主要特点： 支持的颜色丰富、保留的细节更多 、占用空间极大、不支持透明背景、不支持动
态图。
使用场景：对图片细节 要求极高 的场景，例如：一些大型游戏中的图片 。（网页中很少使
用）
4. gif 格式
概述：扩展名为 .gif ，仅支持 256 种颜色，色彩呈现不是很完整。
主要特点：支持的颜色较少、 支持 简单 透明背景、支持动态图 。
使用场景：网页中的动态图片。
5. webp 格式
概述：扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。
主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
使用场景：网页中的各种图片。
6. base64 格式
1. 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
2. 原理：把图片进行 base64 编码，形成一串文本。
3. 如何生成：靠一些工具或网站。
4. 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
5. 使用场景：一些较小的图片，或者需要和网页一起加载的图片。

9、超链接

主要作用：从当前页面进行跳转。
可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定应用。

 9.1. 跳转到页面
<!-- 跳转其他网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a>
<!-- 跳转本地网页 -->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>

注意点：
1. 代码中的多个空格、多个回车，都会被浏览器解析成一个空格！
2. 虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素！

9.2 跳转到文件
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
注意 1 ：若浏览器无法打开文件，则会引导用户下载。
注意 2 ：若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称。
9.3 跳转到锚点

什么是锚点？—— 网页中的一个标记点。

具体使用方式：

第一步：设置锚点

<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>
注意点：
1. 具有 href 属性的 a 标签是 超链接 ，具有 name 属性的 a 标签是 锚点 。
2. name 和 id 都是区分大小写的，且 id 最好别是数字开头。

第二步：跳转锚点

<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>
9.4 唤起指定应用

通过 a 标签，可以唤起设备应用程序。

<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

10、列表

1. 有序列表

概念：有顺序或侧重顺序的列表。

<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
2. 无序列表

概念：无顺序或不侧重顺序的列表

<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>深圳</li>
</ul>
3. 列表嵌套

概念：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把解构写完整）。

<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>杜莎夫人蜡像馆</li>
<li>
<a href="https://www.opg.cn/">东方明珠</a>
</li>
<li>迪士尼乐园</li>
</ul>
</li>
<li>西安</li>
<li>武汉</li>
</ul>
注意： li 标签最好写在 ul 或 ol 中，不要单独使用。
4. 自定义列表

1. 概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。
2. 一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多
个）。

<h2>如何高效的学习？</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版，也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正后并记住，就是经验</dd>
</dl>

11、表格

1  基本结构
一个完整的表格由： 表格标题 、 表格头部 、 表格主体 、 表格脚注 ，四部分组成。

表格涉及到的标签：
table ：表格
caption ：表格标题
thead ：表格头部
tbody ：表格主体
tfoot ：表格注脚
tr ：每一行
th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）
具体编码： 
<table border="1">
<!-- 表格标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>20</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
2.常用属性

注意点：

1. <table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度，
只能控制表格最外侧边框的宽度，这个问题如何解决？ —— 后期靠 CSS 控制。
2. 默认情况下，每列的宽度，得看这一列单元格最长的那个文字。
3. 给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。
4. 给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了。
3. 跨行跨列
1. rowspan ：指定要跨的行数。
2. colspan ：指定要跨的列数。

12、常用标签补充

注意点：
1. 不要用 <br> 来增加文本之间的行间隔，应使用 <p> 元素，或后面即将学到的 CSS
margin 属性。
2. <hr> 的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用 CSS 完成。

13、表单

概念：一个包含交互的区域，用于收集用户提供的数据。
1. 基本结构

<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
2. 常用表单控件
① 文本输入框
常用属性如下：
<input type = "text" >
name 属性：数据的名称。
value 属性：输入框的默认输入值。
maxlength 属性：输入框最大可输入长度。

② 密码输入框
<input type = "password" >
常用属性如下：
name 属性：数据的名称。
value 属性：输入框的默认输入值（一般不用，无意义）。
maxlength 属性：输入框最大可输入长度。

③ 单选框
<input type = "radio" name = "sex" value = "female" > 女
<input type = "radio" name = "sex" value = "male" > 男
常用属性如下：
name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
value 属性：提交的数据值。
checked 属性：让该单选按钮默认选中。
④ 复选框
<input type = "checkbox" name = "hobby" value = "smoke" > 抽烟
<input type = "checkbox" name = "hobby" value = "drink" > 喝酒
<input type = "checkbox" name = "hobby" value = "perm" > 烫头
常用属性如下：：
name 属性：数据的名称。
value 属性：提交的数据值。
checked 属性：让该复选框默认选中。

⑤ 隐藏域
<input type = "hidden" name = "tag" value = "100" >
用户不可见的一个输入区域，作用是：
提交表单的时候，携带一些固定的数据。
name 属性：指定数据的名称。
value 属性：指定的是真正提交的数据。
⑥ 提交按钮
<input type = "submit" value = " 点我提交表单 " >
<button> 点我提交表单 </button>
注意：
1. button 标签 type 属性的默认值是 submit 。
2. button 不要指定 name 属性
3. input 标签编写的按钮，使用 value 属性指定按钮文字
⑦ 重置按钮
<input type = "reset" value = " 点我重置 " >
<button type = "reset" > 点我重置 </button>
注意点：
1. button 不要指定 name 属性
2. input 标签编写的按钮，使用 value 属性指定按钮文字
⑧ 普通按钮
<input type = "button" value = " 普通按钮 " >
<button type = "button" > 普通按钮 </button>
注意点：普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。
⑨文本域
<textarea name = "msg" rows = "22" cols = "3" > 我是文本域 </textarea>
常用属性如下：
1. rows 属性：指定默认显示的行数，会影响文本域的高度。
2. cols 属性：指定默认显示的列数，会影响文本域的宽度。
3. 不能编写 type 属性，其他属性，与普通文本输入框一致。
⑩ 下拉框
<select name = "from" >
<option value = " 黑 " > 黑龙江 </option>
<option value = " 辽 " > 辽宁 </option>
<option value = " 吉 " > 吉林 </option>
<option value = " 粤 " selected > 广东 </option>
</select>
常用属性及注意事项：
1. name 属性：指定数据的名称。
2. option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文
字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
3. option 标签设置了 selected 属性，表示默认选中。
3.禁用表单控件
给表单控件的标签设置 disabled 既可禁用表单控件。
input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性
4.label 标签
label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与 label 关联方式如下：
1. 让 label 标签的 for 属性的值等于表单控件的 id 。
2. 把表单控件套在 label 标签的里面。
5. fieldset 与 legend 的使用（了解）
fieldset 可以为表单控件分组、 legend 标签是分组的标题。
6.表单总结

14、框架标签

iframe 标签的实际应用：
1. 在网页中嵌入广告。
2. 与超链接或表单的 target 配合，展示不同的内容。

15、HTML实体

在 HTML 中我们可以用一种 特殊的形式 的内容，来表示某个 符号 ，这种特殊形式的内容，就是 HTML 实
体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须
在 HTML 源码中插入字符实体。
字符实体 由三部分组成：一个 & 和 一个实体名称（或者一个 # 和 一个实体编号），最后加上一
个分号 ; 。
常见字符实体总结：
完整实体列表，请参考： HTML Standard

16、HTML全局属性

完整的全局属性，请参考： 全局属性 - HTML （超文本标记语言） | MDN (mozilla.org)

17、meta 元信息

1. 配置字符编码
<meta charset = "utf-8" >
2. 针对 IE 浏览器的兼容性配置。
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
3. 针对移动端的配置（移动端课程中会详细讲解）
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
4. 配置网页关键字
<meta name = "keywords" content = "8-12 个以英文逗号隔开的单词 / 词语 " >
5. 配置网页描述信息
<meta name = "description" content = "80 字以内的一段话，与网站内容相关 " >
6. 针对搜索引擎爬虫配置：
<meta name = "robots" content = " 此处可选值见下表 " >
7. 配置网页作者：
<meta name = "author" content = "tony" >
8. 配置网页生成工具
<meta name = "generator" content = "Visual Studio Code" >
9. 配置定义网页版权信息：
<meta name = "copyright" content = "2023-2027© 版权所有 ">
10. 配置网页自动刷新
<meta http-equiv = "refresh" content = "10;url=http://www.baidu.com" >

 完整的网页元信息，请参考：文档级元数据元素 | MDN

18、HTML5

1. 什么是HTML5
  • HTML5 是新一代的 HTML 标准，2014年10月由万维网联盟（ W3C ）完成标准制定。
  • 官网地址：
  • W3C 提供：
  • https://www.w3.org/TR/html/index.html
  • WHATWG 提供：https://whatwg-cn.github.io/html/multipage
  • HTML5 在狭义上是指新一代的 HTML 标准，在广义上是指：整个前端。
2. HTML5 优势
1. 针对 JavaScript ，新增了很多可操作的接口。
2. 新增了一些语义化标签、全局属性。
3. 新增了多媒体标签，可以很好的替代 flash 。
4. 更加侧重语义化，对于 SEO 更友好。
5. 可移植性好，可以大量应用在移动设备上。

3.HTML5兼容性
支持： Chrome 、 Safari 、 Opera 、 Firefox 等主流浏览器。
IE 浏览器必须是 9 及以上版本才支持 HTML5 ，且 IE9 仅支持部分 HTML5 新特性。

4、新增语义化标签
1.新增布局标签

2.新增状态标签

3. 新增列表标签

<input type="text" list="mydata">
<datalist id="mydata">
<option value="周冬雨">周冬雨</option>
<option value="周杰伦">周杰伦</option>
<option value="温兆伦">温兆伦</option>
<option value="马冬梅">马冬梅</option>
</datalist>
<details>
<summary>如何走上人生巅峰？</summary>
<p>一步一步走呗</p>
</details>
4.新增文本标签

 

<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby>
文本标记
注意： W3C 建议 mark 用于标记搜索结果中的关键字。

5、新增表单功能

 

2. input 新增属性值

3. form 标签新增属性

6、新增多媒体标签
1. 视频标签
<video> 标签用来定义视频，它是双标签
2.音频标签
<audio> 标签用来定义音频，它是双标签。
7、新增全局属性（了解）
7、HTML5兼容性处理

添加元信息，让浏览器处于最优渲染模式。

<!-- 设置 IE 总是使用最新的文档模式进行渲染 -->
<meta http-equiv = "X-UA-Compatible" content = "IE=Edge" >
<!-- 优先使用 webkit ( Chromium ) 内核进行渲染 , 针对 360 等壳浏览器 -->
<meta name = "renderer" content = "webkit" >

使用 html5shiv 让低版本浏览器认识 H5 的语义化标签

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->
lt 小于
lte 小于等于
gt 大于
gte 大于等于
! 逻辑非
<!--[if IE 8]> 仅 IE8 可见 <![endif]-->
<!--[if gt IE 8]> 仅 IE8 以上可见 <![endif]—>
<!--[if lt IE 8]> 仅 IE8 以下可见 <![endif]—>
<!--[if gte IE 8]>IE8 及以上可见 <![endif]—>
<!--[if lte IE 8]>IE8 及以下可见 <![endif]—>
<!--[if !IE 8]> 非 IE8 的 IE 可见 <![endif]-->

相关文章：

系列学习前端之第 2 章：一文精通 HTML

全套学习 HTMLCSSJavaScript 代码和笔记请下载网盘的资料&#xff1a; 链接: https://pan.baidu.com/s/1-vY2anBdrsBSwDZfALZ6FQ 提取码: 6666 HTML 全称&#xff1a;HyperText Markup Language&#xff08;超文本标记语言&#xff09; 1、 HTML 标签 1. 标签又称元素&#…...

编程日记 2023/12/9 20:35:28

SCSS Module 这样处理配置和使用太赞了

SCSS Module 只是Scss和Css Module结合&#xff0c;可以利用SCSS对代码静态处理的能力&#xff0c;使得样式处理更强大一些&#xff0c;并不是什么新的东西&#xff0c;对比css-in-js和scoped&#xff0c;个人偏向喜欢Scss Module做样式隔离&#xff0c;先说一下优点&#xff1…...

编程日记 2023/12/9 20:33:27

【Unity动画】Unity 2D动画创建流程

本文以2D为案例&#xff0c;讲解Unity 播放动画的流程 准备和导入2D动画资源 外部导入序列帧生成的 Unity内部制作的 外部导入的3D动画 2.创建动画过程 打开时间轴Ctrl6 选中场景中的一个未来需要播放动画的物体 回到时间轴点击Create一个新动画片段 拖动2D动画资源放入…...

编程日记 2023/12/9 20:32:26

【算法每日一练]-图论（保姆级教程篇12 tarjan篇）#POJ3352道路建设 #POJ2553图的底部 #POJ1236校园网络 #缩点

目录&#xff1a; 今天知识点 加边使得无向图图变成双连通图 找出度为0的强连通分量 加边使得有向图变成强连通图 将有向图转成DAG图进行dp POJ3352&#xff1a;道路建设 思路&#xff1a; POJ2553&#xff1a;图的底部 思路&#xff1a; POJ1236校园网络 思路&#x…...

编程日记 2023/12/9 20:30:24

Python数据科学视频讲解：数据挖掘与建模的注意事项

1.7 数据挖掘与建模的注意事项 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解1.7节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学应用的全流程&#xff0c;包括…...

编程日记 2023/12/9 20:29:23

unity | 动画模块之循环滚动选项框

一、作者的话 评论区有人问&#xff0c;有没有竖排循环轮播选项框&#xff0c;我就写了一个 二、效果动画 如果不是你们想要的&#xff0c;就省的你们继续往下看了 三、制作思路 把移动分成里面的方块&#xff0c;还有背景&#xff08;父物体&#xff09;&#xff0c;方块自…...

编程日记 2023/12/9 20:26:21

TinyMPC - CMU （卡耐基梅隆大学）开源的机器人 MPC 控制器

系列文章目录 CasADi - 最优控制开源 Python/MATLAB 库 文章目录 系列文章目录前言一、机器人硬件对比1.1 Teensy 上的微控制器基准测试1.2 机器人硬件1.3 BibTeX 二、求解器三、功能&#xff08;预期&#xff09;3.1 高效3.2 鲁棒3.3 可嵌入式3.4 最小依赖性3.5 高效热启动3.…...

编程日记 2023/12/9 20:25:20

C++ 对象的初始化和清理：构造函数和析构函数

目录 构造函数和析构函数 构造函数 析构函数 构造函数的分类及调用 括号法 显示法 隐式转换法 拷贝构造函数的调用时机 使用一个已经创建完毕的对象来初始化一个新对象 值传递的方式给函数参数传值 以值方式返回局部对象 构造函数调用规则 初始化列表 类对象作…...

编程日记 2023/12/9 20:22:17

Tmux中使用Docker报错 - 解决方案

问题 进入Tmux会话后&#xff0c;在其中使用Docker可能会出现如下报错&#xff1a; Got permission denied while trying to connect to the Docker ……解决方案 退出tmux会话: tmux detach在tmux会话外部杀掉tmux进程&#xff1a; pkill -f tmux重新进入tmux&#xff1a…...

编程日记 2023/12/9 20:21:16

如何在WordPress中批量替换图片路径？

很多站长在使用WordPress博客或者搬家时&#xff0c;需要把WordPress文章中的图片路径进行替换来解决图片不显示的问题。总结一下WordPress图片路径批量替换的过程&#xff0c;方便有此类需求的站长们学习。 什么情况下批量替换图片路径 1、更换了网站域名 有许多网站建设初期…...

编程日记 2023/12/9 20:20:16

el-pagination 纯前端分页

需求&#xff1a;后端把所有数据都返给前端&#xff0c;前端进行分页渲染。 实现思路&#xff1a;先把数据存储到一个大数组中&#xff0c;然后调用方法进行切割。主要使用数组的slice方法 所有代码&#xff1a; html <template><div style"padding: 20px&qu…...

编程日记 2023/12/9 20:17:14

基于springboot的校园二手市场

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…...

编程日记 2023/12/9 20:14:11

【开源】基于Vue和SpringBoot的在线课程教学系统

项目编号&#xff1a; S 014 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S014&#xff0c;文末获取源码。} 项目编号&#xff1a;S014&#xff0c;文末获取源码。 目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2…...

编程日记 2023/12/9 20:12:09

Mysql分布式集群部署---MySQL集群Cluster将数据分成多个片段，每个片段存储在不同的服务器上

1.1 目的 部署MysqlCluster集群环境 1.2 MySQL集群Cluster原理 1 数据分片 MySQL集群Cluster将数据分成多个片段&#xff0c;每个片段存储在不同的服务器上。这样可以将数据负载分散到多个服务器上&#xff0c;提高系统的性能和可扩展性。 2. 数据同步 MySQL集群Cluster使…...

编程日记 2023/12/9 20:11:09

身份认证技术

身份认证是对系统的用户进行有效性、真实性验证。 1&#xff0e;口令认证方式 使用口令认证方式&#xff0c;用户必须具有一个唯一的系统标识&#xff0c;并且保证口令在系统的使用和存储过程中是安全的&#xff0c;同时口令在传输过程中不能被窃取、替换。另外特别要注意的是在…...

编程日记 2023/12/9 20:10:08

Centos7、Mysql8.0 load_file函数返回为空的终极解决方法--暨selinux的深入理解

零、问题背景 最近想换房&#xff0c;为了方便自己对比感兴趣的房子&#xff0c;因此决定将目标房源的基本信息放在表里&#xff0c;特别是要一目了然的看到众多房子的各种图纸和照片&#xff0c;因此决定要在Mysql8.0.34数据库中以二进制形式保存图片&#xff08;抛开合理性和…...

编程日记 2023/12/9 20:09:07

基于Spring Boot的水产养殖管理系统

文章目录 项目介绍主要功能截图：部分代码展示设计总结项目获取方式🍅 作者主页：超级无敌暴龙战士塔塔开 🍅 简介：Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我，都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring Boot的水产养殖管理系统,jav…...

编程日记 2023/12/9 20:05:03

LCR 090. 打家劫舍 II(leetcode)动态规划

文章目录 前言一、题目分析二、算法原理1.状态表示2.状态转移方程3.初始化4.填表顺序5.返回值是什么 三、代码实现总结 前言 在本文章中&#xff0c;我们将要详细介绍一下LeetcodeLCR 090. 打家劫舍 II。采用动态规划解决&#xff0c;这是一道经典的多状态dp问题 一、题目分析…...

编程日记 2023/12/9 20:03:02

【小沐学Python】Python实现语音识别（Whisper）

文章目录 1、简介1.1 whisper简介1.2 whisper模型 2、安装2.1 whisper2.2 pytorch2.3 ffmpeg 3、测试3.1 命令测试3.2 代码测试&#xff1a;识别声音文件3.3 代码测试&#xff1a;实时录音识别 结语 1、简介 https://github.com/openai/whisper 1.1 whisper简介 Whisper 是…...

编程日记 2023/12/9 20:01:01

Nginx负载均衡实战

&#x1f3b5;负载均衡组件 ngx_http_upstream_module https://nginx.org/en/docs/http/ngx_http_upstream_module.html upstream模块允许Nginx定义一组或多组节点服务器组&#xff0c;使用时可以通过多种方式去定义服务器组 样例&#xff1a; upstream backend {server back…...

编程日记 2023/12/9 19:59:59

Redis skiplist源码解析（支持范围查询）

跳表是一个多层的有序链表&#xff0c;在跳表中进行查询操作时&#xff0c;查询代码可以从最高层开始查询。层数越高&#xff0c;结点数越少&#xff0c;同时高层结点的跨度会比较大。因此&#xff0c;在高层查询结点时&#xff0c;查询一个结点可能就已经查到了链表的中间位置…...

编程日记 2023/12/9 19:55:56

MVSNeRF：多视图立体视觉的快速推广辐射场重建（2021年）

MVSNeRF&#xff1a;多视图立体视觉的快速推广辐射场重建&#xff08;2021年&#xff09; 摘要1 引言2 相关工作3 MVSNeRF实现方法3.1 构建代价体3.2 辐射场的重建3.3 体渲染和端到端训练 3.4 优化神经编码体 Anpei Chen and Zexiang Xu and Fuqiang Zhao et al. MVSNeRF: Fast…...

编程日记 2023/12/9 19:51:52

华为OD机试真题-CPU算力分配-2023年OD统一考试（C卷）

题目描述： 现有两组服务器A和B，每组有多个算力不同的CPU，其中A[i]是A组第i个CPU的运算能力，B[i]是B组第i个CPU的运算能力。一组服务器的总算力是各CPU的算力之和。为了让两组服务器的算力相等，允许从每组各选出一个CPU进行一次交换，求两组服务器中，用于交换的CPU的算力，…...

编程日记 2023/12/9 19:50:51

校验数据是否重叠（各种操作符＞,＜,＞=,＜=,or,and）

最近接到一个需求&#xff0c;其中部分功能涉及到数据的重叠校验&#xff0c;并且录入的数据需要包含各种操作符。如果只通过java代码来查询并进行循环判断的话&#xff0c;判断情况会很复杂&#xff0c;幸好有同事的帮忙提供了一个用sql查询重叠部分的方法&#xff0c;现在分享…...

编程日记 2023/12/9 19:49:50

大一C语言作业 12.8

1.C 对一维数组初始化时&#xff0c;如果全部元素都赋了初值&#xff0c;可以省略数组长度。 这里没有指定数组长度&#xff0c;编译器会根据初始化列表的元素个数来确定数组长度。 2.C 在C语言中&#xff0c;字符数组是不能用赋值运算符直接赋值的。 3.C 在二维数组a中&#x…...

编程日记 2023/12/9 19:47:09

ELasticsearch：什么是语义搜索？

语义搜索定义 语义搜索是一种解释单词和短语含义的搜索引擎技术。 语义搜索的结果将返回与查询含义匹配的内容&#xff0c;而不是与查询中的单词字面匹配的内容。 语义搜索是一组搜索引擎功能&#xff0c;其中包括根据搜索者的意图及其搜索上下文理解单词。 此类搜索旨在通过…...

编程日记 2023/12/9 19:43:54

ooTD I 女儿是自己的，尽情打扮尽情可爱

分享女宝的时尚穿搭 奶乎乎的黄色也太好看了 超足充绒量&#xff0b;优质面料 柔软蓬松上身体验感超赞 怎么穿都好看系列 轻轻松松打造时尚造型&#xff01;&#xff01;...

编程日记 2023/12/9 19:41:52

第62天：django学习（十一）

cookie和session 发展史 一开始,只有一个页面&#xff0c;没有登录功能&#xff0c;大家看到东西都一样。 时代发展&#xff0c;出现了需要登录注册的网站&#xff0c;要有一门技术存储我们的登录信息&#xff0c;于是cookie诞生了。 cookie: - 存储形式&#xff1a;k:v键值对…...

编程日记 2023/12/9 19:40:51

Rust测试字符串的移动，Move

代码创建了一个结构体&#xff0c;结构体有test1 字符串&#xff0c;还有指向字符串的指针。一共创建了两个。 然后我们使用swap 函数 交换两个结构体内存的内容。 最后如上图。相同的地址&#xff0c;变成了另外结构体的内容。注意看指针部分&#xff0c;还是指向原来的地址…...

编程日记 2023/12/9 19:38:50

vue+electron问题汇总

1. Vue_Bug Failed to fetch extension, trying 4 more times 描述&#xff1a;项目启动时报错 解决&#xff1a;注释图片中内容 2. Module not found: Error: Can’t resolve ‘fs’ in 描述&#xff1a;项目启动报错 解决&#xff1a;vue.config.js中添加图中数据 3.导入…...

编程日记 2023/12/9 19:36:48

Linux中的网络时间服务器

本章主要介绍网络时间的服务器 使用chrony配置时间服务器配置chrony客户端服务器同步时间 1.1 时间同步的重要性 一些服务对时间要求非常严格&#xff0c;例如如图所示的由三台服务器搭建的ceph集群 这三台服务器的时间必须保持一致&#xff0c;如果不一致&#xff0c;就会显…...

编程日记 2023/12/9 19:32:45

fastadmin打印页面

如下图选中订单号进行打印 html中增加代码 <div id"toolbar" class"toolbar"><a href"javascript:;" class"btn btn-primary btn-refresh" title"{:__(Refresh)}" ><i class"fa fa-refresh">&l…...

编程日记 2023/12/9 19:29:42

Java 将word转为PDF的三种方式和处理在服务器上下载后乱码的格式

我这边是因为业务需要将之前导出的word文档转换为PDF文件&#xff0c;然后页面预览下载这样的情况。之前导出word文档又不是我做的&#xff0c;所以为了不影响业务&#xff0c;只是将最后在输出流时转换成了PDF&#xff0c;当时本地调用没什么问题&#xff0c;一切正常&#xf…...

编程日记 2023/12/9 19:24:35

C\C++ 获取最值

C C 语言的不同类型的最值可以在 limits.h 头文件里找到定义 #include <limits.h>int main() {printf("%d", INT_MAX); // 整数最大值printf("%d", INT_MIN); // 整数最小值 } C C 有模板&#xff0c;可以通过替换下面的 int 和 double&#xff…...

编程日记 2023/12/9 19:22:33

机器学习之无监督学习：九大聚类算法

今天&#xff0c;和大家分享一下机器学习之无监督学习中的常见的聚类方法。 今天&#xff0c;和大家分享一下机器学习之无监督学习中的常见的聚类方法。 在无监督学习中&#xff0c;我们的数据并不带有任何标签&#xff0c;因此在无监督学习中要做的就是将这一系列无标签的数…...

编程日记 2023/12/9 19:20:31

Linux高级管理-搭建网站服务

在Ihternet 网络环境中&#xff0c;Web 服务无疑是最为流行的应用系统。有了Web站点&#xff0c;企业可以充分 展示自己的产品&#xff0c;宣传企业形象。Web站点还为企业提供了与客户交流、电子商务交易平台等丰富 的网络应用。部署与维护Web 服务是运维工程师必须掌握的一个技…...

编程日记 2023/12/9 19:17:29

Windows 系统，TortoiseSVN 无法修改 Log 信息解决方法

使用SVN提交版本信息时&#xff0c;注释内容写的不全。通过右键TortoiseSVN的Show log看到提交的的注释&#xff0c;右键看到Edit log message的选项&#xff0c;然而提交后却给出错误提示&#xff1a; Repository has not been enabled to accept revision propchanges; ask …...

编程日记 2023/12/9 19:15:27

编译 Android gradle-4.6-all.zip 报错问题记录

编译 Android gradle-4.6-all.zip 报错问题记录 方法一&#xff1a;替换资源&#xff1a;方法二&#xff1a;修改源方法三&#xff1a;修改版本 编译时候无法下载 gradle-4.6-all Downloading https://services.gradle.org/distributions/gradle-4.6-all.zip 方法一&#xf…...

编程日记 2023/12/9 19:13:25

Linux系统调试课：Valgrind 内存调试

文章目录 一、为什么要学会Valgrind二、什么是内存泄露三、Valgrind的移植四、Valgrind相关参数沉淀、分享、成长，让自己和他人都能有所收获！😄 📢Valgrind 是一个开源的内存调试和性能分析工具，用于帮助开发者找出程序中的内存错误，如内存泄漏、使用未初始化的内存、非…...

编程日记 2023/12/9 19:12:24

python主流开发工具排名,python开发工具有哪些

本篇文章给大家谈谈python的开发工具软件有哪些&#xff0c;以及python主流开发工具排名&#xff0c;希望对各位有所帮助&#xff0c;不要忘了收藏本站喔。 python中用到哪些软件 一、Python代码编辑器1、sublime Textsublime Text是一款非常流行的代码编辑器&#xff0c;支持P…...

编程日记 2023/12/9 19:09:22

Spring Boot Async：从入门到精通，原理详解与最佳实践

Spring Boot 的异步功能&#xff08;Async&#xff09;允许我们将某些任务异步执行&#xff0c;而不会阻塞主线程。这对于处理耗时的操作非常有用&#xff0c;如发送电子邮件、生成报表、调用外部 API 等。通过异步处理&#xff0c;我们可以释放主线程&#xff0c;让它继续处理…...

编程日记 2023/12/9 19:08:21

oracle 19c创建db_link名称带.com域名问题处理

文章目录 一、修改PDB的global_name二、重启数据库实例三、修改domain后重试 一、修改PDB的global_name SYSorcl1>sho pdbsCON_ID CON_NAME OPEN MODE RESTRICTED ---------- ------------------------------ ---------- ----------2 PDB$SEED …...

编程日记 2023/12/9 19:07:20

银行卡二要素API的应用案例：从在线购物到金融投资

引言 随着互联网技术的不断发展&#xff0c;人们的金融需求也在不断增加。随之而来的是各种新型金融服务的涌现&#xff0c;让用户的金融体验更加便利快捷。其中&#xff0c;银行卡二要素API的应用&#xff0c;则为用户的金融体验和安全性提供了极大的保障。 银行卡二要素API…...

编程日记 2023/12/9 19:03:17

MySQL 忘记root密码后重置密码操作

在忘记 MySQL 密码的情况下&#xff0c;可以通过 --skip-grant-tables 关闭服务器的认证&#xff0c;然后重置 root 的密码&#xff0c;具体操作步骤如下。 步骤 1)&#xff1a;关闭正在运行的 MySQL 服务。打开 cmd 进入 MySQL 的 bin 目录。 步骤 2)&#xff1a;输入mysqld -…...

编程日记 2023/12/9 18:59:12

开源电子合同签署平台小程序源码/电子文件签字+在线合同签署系统源码/电子合同小程序源码

源码简介&#xff1a; 开源电子合同签署平台小程序源码&#xff0c;它是电子文件签字在线合同签署系统源码/电子合同小程序源码 目前商业端和开源端一致&#xff0c;免费开源状态&#xff01; 聚合市场上各类电子合同解决方案商&#xff0c;你无需一个一个的对接电子合同厂商…...

编程日记 2023/12/9 18:57:11

J.408之数据结构

J-408之数据结构_北京信息科技大学第十五届程序设计竞赛&#xff08;同步赛&#xff09; (nowcoder.com) 思维好题&#xff0c;直接用两个set存没出现的数字就好了 // Problem: 408之数据结构 // Contest: NowCoder // URL: https://ac.nowcoder.com/acm/contest/68572/J // Me…...

编程日记 2023/12/9 18:54:08

前端食堂技术周刊第 107 期：技术播客节、Deno Cron、FEDAY、XState v5、Electron 2023 生态系统回顾

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;烤椰拿铁 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来看下…...

编程日记 2023/12/9 18:50:05

三防平板|手持终端PDA|8寸/10寸工业三防平板电脑主板方案定制

近年来&#xff0c;随着科技的快速发展&#xff0c;三防平板成为了各行各业中不可或缺的工具。三防平板采用IP67级别的防护设计&#xff0c;通过了多项测试标准&#xff0c;如国标和美标&#xff0c;具备防水、防摔、防尘、防撞、防震、防跌落以及防盐雾等多重防护功能。因此&a…...

编程日记 2023/12/9 18:49:04

【C语言】动态内存管理（C语言的难点与精华，数据结构的前置知识，你真的掌握了吗？）

文章目录 引言一、为什么要动态内存分配二、动态内存分配的相关函数2.1 malloc2.2 free2.3 calloc2.4 realloc 三、常见的动态内存的错误3.1 对NULL指针的解引用3.2 对动态内存越界访问3.3 对非动态内存释放3.4 对动态内存部分释放3.5 对动态内存多次释放3.6 未对动态内存释放&…...

编程日记 2023/12/9 18:48:03

最长子序列问题（LCS）--动态规划解法

题目描述&#xff1a; 如果Z既是X的子序列&#xff0c;又是Y的子序列&#xff0c;则称Z为X和Y的公共子序列。 如果给定X、Y&#xff0c;求出Y及其长度。 示例&#xff1a; 输入 ABCPDSFJGODIHJOFDIUSHGD OSDIHGKODGHBLKSJBHKAGHI 输出 SDIHODSHG 9 分析&#xff1a; c…...

编程日记 2023/12/9 18:47:02