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

web前端基础修炼手册

news 2026/4/2 13:17:29

引言

1. 安装插件

2. 前端三剑客

3. 开发者模式

第一章 HTML

1.文件结构

2. 常见标签

2.1 注释标签

2.2 标题标签

2.3 段落标签

2.4 换行标签

2.5 格式化标签

2.6 图片标签

2.7 超链接标签

2.8 表格标签

2.9 列表标签

2.10 form标签

2.11 input 标签

2.12 label标签

2.13 select标签

2.14 textarea 标签

2.15 div & span无语义标签

3. 特殊字符

第二章 CSS

1. 基本语法规范

2. 引入方式

2.1 内部样式表

2.2 行内样式表

2.3 外部样式

3. 基础选择器

4. 复合选择器

4.1 后代选择器

4.2 子选择器

4.3 并集选择器

4.4 伪类选择器

4.5 小结

5. 常用元素属性

6. 显示模式

6.1 块级元素

6.2 行内元素/内联元素

6.3 行内元素和块级元素的区别

6.4 改变显示模式

7. 盒模型

7.1 边框

7.2 取消边框撑大盒子

7.3 内边距

7.4 外边距

7.5 块级元素水平居中

7.6 去除浏览器默认样式

8. 弹性布局

8.1 子类改变宽高

8.2 子类水平展开

第三章 JavaScript

1. 三大组成

2. js的三种引入方法

2.1 行内式

2.2 内部式

2.3 外部式

3. 变量

4. 数据类型

5. 运算符

6. 流程控制

7. Math内置方法

8. eval内置方法

9. 字符串运算问题

10. 字符串转换方法

11. 自定义对象

11.1 方式一(了解)

11.2 方式二(了解)

11.3 方式三(重点)

引言

1. 安装插件

这里我使用的是vscode开发环境

Auto Rename Tag是语法自动补齐
view-in-browser是快速在浏览器中打开
live server实时网页刷新

2. 前端三剑客

html 超文本标记语言(不仅仅是文本)，把网页内容展示出来
css 层叠样式表，美化页面(页面布局)
javaScript 简写js,操作页面(动态交互)和服务端进行网络请求

3. 开发者模式

说明一下：

在浏览器中按F12就可以进入开发者模式
它开发/测试用它来查看请求，源码，控制台

第一章 HTML

1.文件结构

<html><head><title>第一个页面</title></head><body>hello world</body>
</html>

说明一下：

html 标签是整个 html 文件的 根标签 ( 最顶层标签 )
head 标签中写页面的属性
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题

<!DOCTYPE html> 称为 DTD ( 文档类型定义 ), 描述当前的文件是一个 HTML5 的文件 .
<html lang="en"> 其中 lang 属性表示当前页面是一个 " 英语页面 ". 这里暂时不用管 . ( 有些浏览器会根据此处的声明提示是否进行自动翻译).
<meta charset="UTF- 8"> 描述页面的字符编码方式 . 没有这一行可能会导致中文乱码 .
<meta name="viewport" content="width=device-width, initial- scale=1.0">
name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区
域 .
content="width=device- width, initial - scale=1.0" 在设置可视区和设备宽度等宽 , 并
设置初始缩放为不缩放 ( 这个属性对于移动端开发更重要一些 )

2. 常见标签

2.1 注释标签

快捷键：ctrl + /

2.2 标题标签

<h1>这是一个标题</h1>

2.3 段落标签

<p>这是一个段落</p>

2.4 换行标签

<br/>

2.5 格式化标签

2.6 图片标签

<img src = "路径" alt = "替换文本 " title = "提示文本 " width = "像素" height = "像素" border = "像素" >

2.7 超链接标签

<a href="网址" target = "_blank">文字</a>

不写target默认是_self在当前窗口中打开

外部链接

<a href="http://www.baidu.com">百度</a>

内部链接

<!-- 1.html -->我是 1.html
<a href = "2.html" > 点我跳转到 2.html </a>
<!-- 2.html -->
我是 2.html
<a href = "1.html" > 点我跳转到 1.html </a>

空链接

<a href = "#" > 空链接 </a>

下载链接

<a href="test.zip">下载文件</a>

网页元素链接(图片链接)

<a href = "http://www.sogou.com" ><img src = "rose.jpg" alt = "" >
</a>

锚点链接

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">第一集<br>第二集<br>
</p>
<p id="two">第一集<br>第二集<br>
</p>...
<p id="three">第一集<br>第二集<br>
</p>

2.8 表格标签

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>男</td><td>10</td></tr><tr><td>小雨</td><td>男</td><td>18</td></tr></tbody></table>

说明一下：

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

合并单元格

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

2.9 列表标签

 <!-- 无序列表 --><ul><li>早</li><li>上</li><li>好</li></ul><!-- 有序列表 --><ol><li>下</li><li>午</li><li>好</li></ol><!-- 自定义列表 --><dl><dt>我的问候语</dt><dd>早上好</dd><dd>下午好</dd><dd>晚上好</dd></dl>

2.10 form标签

<form action="https://www.baidu.com" method="get">账号:<input type="text" name="username"><br>密码:<input type="password" name="password"><br><br><!--多选 type="checkbox" value提交的内容-->爱好:<br> <input type="checkbox" name="hobby" value="tt">烫头<input type="checkbox" name="hobby" value="tkx">脱口秀<input type="checkbox" name="hobby" value="xs">相声<br><!--单选 type="radio"   -->性别:<br><input type="radio" name="gander" value="1">男<input type="radio" name="gander" value="0">女<br><!--选择文件 type="file"  --><input type="file" name="my"><br><!--时间选择type="date"  年月日type="datetime-local"  年月日 时分type="datetime-local" step="1"  年月日 时分秒--><input type="date" name="birthday"><br><input type="datetime-local" name="createDate"><br><input type="datetime-local" step="1" name="createTime"><br><!--邮箱 type="email" -->邮箱:<input type="email" name="email"><br><!--数字 type="number"   -->年龄:<input type="number" name="age"><br><!--隐藏域 type="hidden"  -->id:<input type="hidden" name="id" value="9527"><br><textarea rows="10" cols="50" style="resize: none;"  name="ts"></textarea><br><select name="sel"><option value="ym">杨幂</option><option value="dlrb" selected>迪丽热巴</option><option value="glnz">古力娜扎</option><option value="mebh">马尔巴哈</option></select><br><!--重置 type="reset" 重置当前foem表单   --><input type="reset"><br><input type="submit"> &emsp;&emsp;<input type="button" value="取消"><button>按钮</button>
</form>

说明一下：

form表单标签多于input输入框标签使用
在select标签下的option标签中，如果没有value属性，默认提交option中间的内容,如果有value则提交value的值

2.11 input 标签

各种输入控件 , 单行文本框 , 按钮 , 单选框 , 复选框

button, checkbox, text, file, image, password, radio 等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 文本框 --><input type="text"><br> <!-- 密码框 --><input type="password"><br><!-- 单选框 --><input type="radio" name="sex"> 男<input type="radio" name="sex" checked="checked"> 女<!-- 注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果 --><br><!-- 多选框      --><input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">打游戏<br><input type="button" value="我是一个普通按钮"><!-- 注意:按钮需要和js配合使用 --><br><!-- 提交按钮 --><form action=""><input type="text" name="username"><input type="submit" value="提交"></form><br><!-- 清空 --><form action=""><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空"></form><br><!-- 提交文件  --><input type="file">
</body>
</html>

说明一下：

type="text" 默认值,文本输入框
name="username" 当前文本框输入的内容的名字
type="password" 密码输入框
type="submit" 当前输入框为 [提交]功能,提交当前form表单的内容到action的地址
value="取消" 给input 设置默认值

2.12 label标签

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

说明一下：

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提示用户体验
比如: 点男字的时候也会勾选,点小圆点的时候也会勾选

2.13 select标签

<!-- 下拉菜单 -->
<select><option>1991</option><option selected="selected">1992</option><option>1993</option><option>1994</option>
</select>

option 中定义 selected="selected" 表示默认选中

2.14 textarea 标签

<textarea rows="3" cols="50"></textarea>

textarea文本域添加style="resize: none;"属性，就可以取消拉伸

2.15 div & span无语义标签

<div><span>咬人猫</span><span>咬人猫</span><span>咬人猫</span>
</div>
<div><span>汪星人</span><span>汪星人</span><span>汪星人</span>
</div>

div 是独占一行的, 是一个大盒子
span 不独占一行, 是一个小盒子

3. 特殊字符

<p>空格：&nbsp</p>
<p>小于：&lt</p>
<p>大于：&gt</p>
<p>按位与：&amp</p>

第二章 CSS

1. 基本语法规范

选择器 + {一条/N条声明}

<style>p {/* 设置字体颜色 */color: red;/* 设置字体大小 */font-size: 30px;}
</style>
<p>hello</p>

说明一下：

选择器决定针对谁修改 ( 找谁 )
声明决定修改啥 . ( 干啥 )
声明的属性是键值对 . 使用 ; 区分键值对 , 使用 : 区分键和值

2. 引入方式

2.1 内部样式表

优点: 这样做能够让样式和页面结构分离
缺点: 分离的还不够彻底. 尤其是 css 内容多的时候

2.2 行内样式表

优点: 优先级较高会覆盖其他样式
缺点 : 不能写太复杂的样式

2.3 外部样式

说明一下：

创建一个 css 文件，使用 link 标签引入 css
优点: 样式和结构彻底分离了
缺点: 受到浏览器缓存影响, 修改之后不一定立刻生效

3. 基础选择器

	作用	特点
标签选择器	能选出所有相同标签	不能差异化选择
类选择器	能选出一个或多个标签	根据需求选择 , 最灵活 , 最常用
id 选择器	能选出一个标签	同一个 id 在一个 HTML 中只能出现一次
通配符选择器	选择所有标签	特殊情况下使用

4. 复合选择器

4.1 后代选择器

说明一下：

可以选择亲儿子，孙子，孙子的孙子等等

4.2 子选择器

说明一下：

只选亲儿子, 不选孙子元素

4.3 并集选择器

说明一下：

每个选择器之前使用 逗号隔开 最后一个不用加

4.4 伪类选择器

链接伪类选择器

说明一下：

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接 ( 鼠标按下了但是未弹起 )

force 伪类选择器

<div class="three"><input type="text"><input type="text"><input type="text"><input type="text">
</div>

.three>input:focus {color: red;
}

说明一下：

force 是焦点的意思，即选中它的时候会发生.....

4.5 小结

选择器	作用	注意事项
后代选择器	选择后代元素	可以是孙子元素
子选择器	选择子元素	只能选亲儿子 , 不能选孙子
并集选择器	选择相同样式的元素	更好的做到代码重用
链接伪类选择器	选择不同状态的链接	重点 a:hover 的写法
:focuse 伪类选择器	选择被选中的元素	重点 input:focus

5. 常用元素属性

参考手册: CSS 参考手册

.shuxing {font-size: 16px;font-family: 宋体;font-weight: 700;/* 取消字体倾斜 */font-style: normal;/* 设置字体倾斜 */font-style: italic;color: red;/* color: #ff0000;color: rgb(255, 0, 0); */border: 10px solid green;text-align: left;/* text-decoration: none; 一般给a链接去掉下划线 */text-decoration: underline;/* 1 个 em 就是当前元素的文字大小 */text-indent: 2em;/* 注: 行高等与元素高度, 就可以实现文字居中对齐 *//* 行高 = 上下边距 + 字体大小 */line-height: 40px;/* background-color: transparent; 背景透明 */background-color: blue;background-image: url(./001.png);background-repeat: no-repeat;/* 注: 背景位置的y轴是向下的 */background-position: 20 50;background-size: contain;/* 圆角矩形 */border-radius: 10%;
}

6. 显示模式

6.1 块级元素

h1 - h6 p div ul ol li等等

独占一行
高度, 宽度, 内外边距, 行高都可以控制.
宽度默认是父级元素宽度的 100% (和父元素一样宽)
是一个容器(盒子), 里面可以放行内和块级元素

6.2 行内元素/内联元素

a strong b em i del s ins u span ...

不独占一行, 一行可以显示多个
设置高度, 宽度, 行高无效
左右外边距有效(上下无效). 内边距有效.
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素

6.3 行内元素和块级元素的区别

块级元素独占一行 , 行内元素不独占一行
块级元素可以设置宽高, 行内元素不能设置宽高
块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置

6.4 改变显示模式

display: block 改成块级元素 [常用]
display: inline 改成行内元素 [ 很少用 ]
display: inline - block 改成行内块元素

7. 盒模型

边框 border+内容 content+内边距 padding+ 外边距 margin

7.1 边框

div {width: 500px;height: 250px;border-width: 10px;border-style: solid;border-color: green;
}

说明一下：

border: 1px solid red; 支持简写, 没有顺序要求
border-top/bottom/left/right 可以改四个方向的任意边框.

7.2 取消边框撑大盒子

* {box-sizing: border-box;
}

7.3 内边距

padding 设置内容和边框之间的距离

div {height: 200px;width: 300px;padding-top: 5px;padding-left: 10px; 
}

7.4 外边距

控制 盒子和盒子 之间的距离

<div class="first">蛤蛤</div>
<div>呵呵</div>

div {background-color: red;width: 200px;height: 200px;
}
.first {margin-bottom: 20px;
}

7.5 块级元素水平居中

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

说明一下：

margin: auto 是给块级元素用得到.
text-align: center 是让行内元素或者行内块元素居中的

7.6 去除浏览器默认样式

* {marign: 0;padding: 0;
}

8. 弹性布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./testcss.css"><style>div {width: 100%;height: 150px;background-color: red;}div>span {background-color: green;width: 100px;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span></div>
</html>

8.1 子类改变宽高

在父级添加上了 display:flex,就是子类的行内元素变成了块级元素，就可以更改宽高

8.2 子类水平展开

说明一下：

在给父类加了justify-content: space-around;
此时可以看到这些 span 已经能够水平隔开了

第三章 JavaScript

1. 三大组成

ECMAScript(核心) DOM(文档对象模型) BOM(浏览器对象模型)

2. js的三种引入方法

2.1 行内式

特点：无法复用，字符串容易出错，没有提示

<body><a href="javascript:alert('你好啊！勇士....')">点我</a>
</body>

2.2 内部式

特点：只能当前页面复用

<body><script>alert("你就当我是一个绅士......犯了错吧！");</script>
</body>

2.3 外部式

特点：可以多个文件复用

<script src="./static/js/my.js"></script>

3. 变量

说明一下：

js代码写在 script标签里面，ES5中js中所有数据类型都由 var 来接收
如果一个变量在声明的时候没有赋值，那么他就是undefined未定义

4. 数据类型

说明一下：

js 的进制解决方案：0o123:八进制， 0xFF:十六进制，9:非零开头:十进制
在js中0参与运算，0是一个无限接近0的数字，0.00000....1
js中的非数(not a number)，1. 不与任何值相等，包括本身 2. 所有和NaN的操作，结果都是NaN
在js中0，null,"",undefined,NaN,false均可以表示假，其他的值包括true,{} []均可以表示真

5. 运算符

说明一下：

js中的大部分运算符和C++一样
但 == 只比较值，不比较类型，而===先比较类型，再比较值

6. 流程控制

js和C++的流程控制完全一致，就是if else,for while,do while,switch case那些

7. Math内置方法

8. eval内置方法

eval函数可以将字符串当脚本代码执行

9. 字符串运算问题

说明一下：

只要是字符串+，就会变成拼接效果
除了+之外，其他的纯数字的字符串，在js都会做计算

10. 字符串转换方法

说明一下：

使用parseint()时，会转换到非数字字符为止，
且如果第一个字符不是数字字符，那结果就是NaN

11. 自定义对象

11.1 方式一(了解)

11.2 方式二(了解)

11.3 方式三(重点)

web前端基础修炼手册

目录引言 1. 安装插件 2. 前端三剑客 3. 开发者模式第一章 HTML 1.文件结构 2. 常见标签 2.1 注释标签 2.2 标题标签 2.3 段落标签 2.4 换行标签 2.5 格式化标签 2.6 图片标签 2.7 超链接标签 2.8 表格标签 2.9 列表标签 2.10 form标签 2.11 input 标签 2.12 la…...

编程日记 2025/3/4 2:13:59

【无标题】Ubuntu22.04编译视觉十四讲slambook2 ch4时fmt库的报错

Ubuntu22.04编译视觉十四讲slambook2 ch4时fmt库的报错 cmake ..顺利，make后出现如下报错： in function std::make_unsigned<int>::type fmt::v8::detail::to_unsigned<int>(int): trajectoryError.cpp:(.text._ZN3fmt2v86detail11to_unsi…...

编程日记 2025/3/4 2:12:57

macos下myslq图形化工具之Sequel Ace

什么是Sequel Ace 官方github：https://github.com/Sequel-Ace/Sequel-Ace Sequel Ace 是一款快速、易于使用的 Mac 数据库管理应用程序，用于处理 MySQL 和 MariaDB 数据库。 Sequel Ace 是一款开源项目，采用 MIT 许可证。用户可以通过 Ope…...

编程日记 2025/3/4 2:11:56

【AHK】资源管理器自动化办公实例/自动连点设置

此处为一个自动连续点击打开检查的自动化操作案例，没有quicker的鼠键录制，不常用了，做个备份 #MaxThreadsPerHotkey 2 ; 这个是核心！！！！确保可以同时运行多个热键或标签global isRunning : tru…...

编程日记 2025/3/4 2:10:55

通用查询类接口数据更新的另类实现

文章目录一、简要概述二、java工程实现1. 定义main方法2. 测试运行3. 源码放送一、简要概述我们在通用查询类接口开发的另类思路中，关于接口数据的更新，提出了两种方案： 文件监听 #mermaid-svg-oJQjD6jQ8T19XlHA {font-family:"tre…...

编程日记 2025/3/4 2:06:50

Linux ls 命令

Linux ls（英文全拼： list directory contents）命令用于显示指定工作目录下之内容（列出目前工作目录所含的文件及子目录)。语法 ls [-alrtAFR] [name...] 参数 : -a 显示所有文件及目录 (. 开头的隐藏文件也会列出)-d 只列出目…...

编程日记 2025/3/4 2:04:48

【问题记录】Go项目Docker中的consul访问主机8080端口被拒绝

【问题记录】Go项目Docker中的consul访问主机8080端口被拒绝问题展示解决办法问题展示在使用docker中的consul服务的时候，通过命令行注册相应的服务（比如cloudwego项目的demo_proto以及user服务）失败。解决办法经过分析，是…...

编程日记 2025/3/4 2:02:46

面试题：说一下你对DDD的了解？

面试题：说一下你对DDD的了解？在面试中，关于 DDD（领域驱动设计，Domain-Driven Design）的问题是一个常见的技术考察点。DDD 是一种软件设计方法论，旨在通过深入理解业务领域来构建复杂的软件系统。以下是一个清晰、详细的回答模板，帮助你在面试中脱颖而出： DDD 的定义…...

编程日记 2025/3/4 2:00:42

React低代码项目：问卷编辑器 I

问卷编辑器 Date: February 20, 2025 4:17 PM (GMT8) 目标完成问卷编辑器的设计和开发完成复杂系统的 UI 组件拆分完成复杂系统的数据结构设计内容需求分析技术方案设计开发注意事项： 需求指导设计，设计指导开发。前两步很重要页面复杂的话&…...

编程日记 2025/3/4 1:50:30

蓝桥杯2024年真题java B组【H.拼十字】

蓝桥杯2024年真题java B组【H.拼十字】原题链接：拼十字思路： 使用树状数组或线段树解决。先将输入的信息存入到一个n行3列的数组中，将信息排序，按照长度小到大，长相同时，宽度小到大排序。建立三个…...

编程日记 2025/3/4 1:48:28

Spring MVC 程序开发（1）

目录 1、什么是 SpringMVC2、返回数据2.1、返回 JSON 对象2.2、请求转发2.3、请求重定向2.4、自定义返回的内容 1、什么是 SpringMVC 1、Tomcat 和 Servlet 分别是什么？有什么关系？ Servlet 是 java 官方定义的 web 开发的标准规范；Tomcat 是…...

编程日记 2025/3/4 1:46:26

PyCharm接入本地部署DeepSeek 实现AI编程！【支持windows与linux】

今天尝试在pycharm上接入了本地部署的deepseek，实现了AI编程，体验还是很棒的。下面详细叙述整个安装过程。本次搭建的框架组合是 DeepSeek-r1:1.5b/7b Pycharm专业版或者社区版 Proxy AI（CodeGPT） 首先了解不同版本的deepsee…...

编程日记 2025/3/4 1:42:20

Linux服务升级：Almalinux 升级 DeepSeek-R1

目录一、实验 1.环境 2.Almalinux 部署 Ollama 3.Almalinux 升级 DeepSeek-R1 4.Almalinux 部署 docker 5. docker 部署 DeepSeek-R1 6.Almalinux 部署 Cpolar (内网穿透) 7.使用cpolar内网穿透二、问题 1.构建容器失败一、实验 1.环境 （1&#xff09…...

编程日记 2025/3/4 1:40:17

Linux操作系统5- 补充知识（可重入函数，volatile关键字，SIGCHLD信号）

上篇文章：Linux操作系统5-进程信号3（信号的捕捉流程，信号集，sigaction）-CSDN博客本篇Gitee仓库：myLerningCode/l26 橘子真甜/Linux操作系统与网络编程学习 - 码云 - 开源中国 (gitee.com) 目录一. 可重入…...

编程日记 2025/3/4 1:38:12

ctfshow刷题笔记—栈溢出—pwn61~pwn64

目录前言一、pwn61（输出了什么？） 二、pwn62（短了一点） 三、pwn63(又短了一点) 四、pwn64(有时候开启某种保护并不代表这条路不通) 五、一些shellcode 前言这几道都是与shellcode有关的题，实在是…...

编程日记 2025/3/4 1:35:10

java23种设计模式-责任链模式

责任链模式（Chain of Responsibility Pattern）学习笔记编程相关书籍分享：https://blog.csdn.net/weixin_47763579/article/details/145855793 DeepSeek使用技巧pdf资料分享：https://blog.csdn.net/weixin_47763579/article/details/145884039 🌟 模式定义责任链模式是…...

编程日记 2025/3/4 1:34:09

新一代跨境电商ERP系统：从订单到发货的全流程自动化管理

随着全球电商市场的持续扩张，跨境电商卖家面临着多平台运营、国际物流、税务合规等复杂挑战。如何高效整合订单、库存、物流和财务数据，实现从客户下单到商品交付的无缝衔接，成为企业降本增效的关键。Zoho Books作为一款专为跨境商家设计的智…...

编程日记 2025/3/4 1:33:08

苹果廉价机型 iPhone 16e 影像系统深度解析

【人像拍摄差异】尽管iPhone 16e支持后期焦点调整功能，但用户无法像iPhone 16系列那样通过点击屏幕实时切换拍摄主体。前置摄像头同样缺失人像深度控制功能，不过TrueTone原彩闪光灯系统在前后摄均有保留。很多人都高估了 iPhone 的安全性，查…...

编程日记 2025/3/4 1:31:05

hive 面试题

Hive基础概念 1.1 Hive是什么？ 基于Hadoop的数据仓库工具，支持类SQL（HiveQL）查询，底层转换为MapReduce/Tez/Spark任务。核心功能：数据ETL、查询、分析；定位：OLAP（分析…...

编程日记 2025/3/4 1:29:03

VScode在windows10上使用clang-format

用途：自动调整代码格式，如缩进等。 clang-format官方文档：ClangFormat — Clang 21.0.0git documentation 前提：有一个.clang-format文件下载LLVM：https://github.com/llvm/llvm-project/releases，将可…...

编程日记 2025/3/4 1:25:59

手把手教你用QQbot对接多青龙面板（含CK分配技巧）

手把手教你用QQbot对接多青龙面板（含CK分配技巧） 在自动化管理工具日益普及的今天，如何高效管理多个青龙面板成为许多开发者的痛点。本文将带你从零开始，通过QQbot实现多青龙面板的智能对接，并深入探讨Cookie&#xff…...

编程新知 2026/4/2 12:05:27

Flowise语音交互扩展：Whisper+TTS构建全模态助手

Flowise语音交互扩展：WhisperTTS构建全模态助手 1. 引言：为什么需要语音交互？ 想象一下这样的场景：你正在厨房做饭，手上沾满了面粉，突然想到一个技术问题需要查询。这时候如果还要打字输入，简…...

编程新知 2026/4/2 12:01:26

OpenClaw技能开发案例：为千问3.5-9B添加日历管理功能

OpenClaw技能开发案例：为千问3.5-9B添加日历管理功能 1. 为什么需要自定义日历管理技能去年我接手了一个私人项目，需要定期跟踪十几个线上活动的排期。最初尝试用Python脚本Google Calendar API管理，但每次修改都要手动调整代码参数。后来…...

编程新知 2026/4/2 11:06:26

5分钟搞定！Windows直接安装APK的终极免费方案

5分钟搞定！Windows直接安装APK的终极免费方案【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾想在Windows电脑上直接安装安卓应用，却因…...

编程新知 2026/4/2 10:44:16

Ubuntu20.04下QGroundControl开发环境搭建全攻略（含常见错误解决方案）

Ubuntu 20.04下QGroundControl开发环境搭建全攻略（含常见错误解决方案） 在无人机和机器人开发领域，QGroundControl作为一款开源的飞行控制地面站软件，已经成为开发者不可或缺的工具。本文将带你从零开始，在Ubuntu 20.0…...

编程新知 2026/4/2 9:51:29

用鲸鱼优化算法（WOA）整定PID参数：Matlab与Simulink实战

鲸鱼优化算法（WOA）整定 PID 参数，m 文件加 simulink仿真，仿真程序给出适应度优化曲线，参数优化曲线以及优化对比波形，适用 matlab 2021b 及以上版本在自动控制领域，PID控制器因其结构简单、稳定…...

编程新知 2026/4/2 9:25:00

解锁Windows全版本安装自由：MediaCreationTool.bat实战指南

解锁Windows全版本安装自由：MediaCreationTool.bat实战指南【免费下载链接】MediaCreationTool.bat Universal MCT wrapper script for all Windows 10/11 versions from 1507 to 21H2! 项目地址: https://gitcode.com/gh_mirrors/me/MediaCreationTool.bat …...

编程新知 2026/4/2 8:48:11

基于FireRedASR-AED-L与AIGC技术：自动生成语音错误分析报告

基于FireRedASR-AED-L与AIGC技术：自动生成语音错误分析报告想象一下这个场景：你的团队刚刚完成了一轮大规模的语音识别系统测试，收集了上千小时的音频数据。接下来，你需要从海量的识别结果中，找出哪些词识别错了&…...

编程新知 2026/4/2 7:17:04

AI 面试系统设计题怎么准备？5 个完整案例 + 回答框架

AI 面试系统设计题怎么准备？5 个完整案例回答框架（CSDN 教程版） 摘要：系统设计题是 AI 面试中最能拉开差距的环节。本文提供 5 个完整案例和通用回答框架，帮助工程师高效准备 AI 面试系统设计题。前言系统设计题是…...

编程新知 2026/4/2 6:52:40

【架构心法】撕碎“实验室完美”的傲慢！直视滚刀与高压现场的物理混沌，论工业级控制系统的“防御性悲观主义”

摘要：在纯净的实验室里，“1”永远是“1”，“0”永远是“0”。但在重型机械的施工现场，物理法则充满了不可预测的恶意。无数工程师带着“代码没 Bug 就不会死机”的天真走向现场，最终却在震动、高温与电磁噪声的围剿下全…...

编程新知 2026/4/2 6:50:40

引言

1. 安装插件

2. 前端三剑客

3. 开发者模式

第一章 HTML

1.文件结构

2. 常见标签

2.1 注释标签

2.2 标题标签

2.3 段落标签

2.4 换行标签

2.5 格式化标签

2.6 图片标签

2.7 超链接标签

2.8 表格标签

2.9 列表标签

2.10 form标签

2.11 input 标签

2.12 label标签

2.13 select标签

2.14 textarea 标签

2.15 div & span无语义标签

3. 特殊字符

第二章 CSS

1. 基本语法规范

2. 引入方式

2.1 内部样式表

2.2 行内样式表

2.3 外部样式

3. 基础选择器

4. 复合选择器

4.1 后代选择器

4.2 子选择器

4.3 并集选择器

4.4 伪类选择器

4.5 小结

5. 常用元素属性

6. 显示模式

6.1 块级元素

6.2 行内元素/内联元素

6.3 行内元素和块级元素的区别

6.4 改变显示模式

7. 盒模型

7.1 边框

7.2 取消边框撑大盒子

7.3 内边距

7.4 外边距

7.5 块级元素水平居中

7.6 去除浏览器默认样式

8. 弹性布局

8.1 子类改变宽高

8.2 子类水平展开

第三章 JavaScript

1. 三大组成

2. js的三种引入方法

2.1 行内式

2.2 内部式

2.3 外部式

3. 变量

4. 数据类型

5. 运算符

6. 流程控制

7. Math内置方法

8. eval内置方法

9. 字符串运算问题

10. 字符串转换方法

11. 自定义对象

11.1 方式一(了解)

11.2 方式二(了解)

11.3 方式三(重点)

相关文章：