前端小白别慌：HTML表格边线重合问题一招搞定（附避坑指南）
前端小白别慌：HTML表格边线重合问题一招搞定（附避坑指南）
前端小白别慌：HTML表格边线重合问题一招搞定（附避坑指南）
开篇先唠两句
说实话，我当年刚学前端那会儿，被表格边框这事儿折磨得够呛。就一个简单的需求——画个表格，边框别那么粗，看起来清爽点——结果愣是搞了一下午。
那会儿写的代码大概长这样：
<tableborder="1"><tr><td>姓名</td><td>年龄</td></tr><tr><td>张三</td><td>25</td></tr></table>浏览器一打开，我当场就懵了。这啥啊？双线边框？粗得像城墙一样，单元格之间还有那种诡异的缝隙，丑得我直接Alt+F4。后来问了老大哥，才知道有个叫border-collapse的东西，但那时候搜到的资料要么太官方看不懂，要么就直接给答案不给原理，用了几次还是稀里糊涂的。
所以今天咱们就把这个陈年老坑彻底填平。不搞那些虚的，就聊人话，把border-collapse这玩意儿从里到外扒清楚，顺便把我这些年踩过的坑、攒下的骚操作全抖出来。看完这篇，保证你以后再遇到表格边框问题，能淡定地泡杯咖啡慢慢调。
这玩意儿到底是啥
先给完全没概念的朋友补个课。border-collapse是CSS里专门管表格边框怎么显示的属性，它就两个值：collapse和separate。
这俩兄弟性格完全相反：
- separate（默认值）：每个单元格各自为政，边框是分开的，中间会有缝隙
- collapse：把相邻的边框合并成一条，看起来就是单线
浏览器默认用的是separate，这就是为什么你明明只写了一个border，看起来却像两条线叠在一起——因为左边单元格的右边框和右边单元格的左边框各自画了一条，中间还隔着border-spacing的距离。
来，上代码直观感受一下：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>表格边框对比</title><style>/* 默认情况：separate */.table-default{border: 2px solid #333;width: 300px;margin-bottom: 30px;}.table-default td{border: 2px solid #666;padding: 10px;}/* 合并边框：collapse */.table-collapse{border-collapse: collapse;border: 2px solid #333;width: 300px;}.table-collapse td{border: 2px solid #666;padding: 10px;}</style></head><body><h3>默认 separate（双线+缝隙）</h3><tableclass="table-default"><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table><h3>设置 collapse（单线合并）</h3><tableclass="table-collapse"><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table></body></html>你把这代码扔浏览器里看一眼就懂了。上面的表格边框粗得能跑马，下面的就清爽多了。就这么简单一个属性，省了多少事儿啊。
但这里有个坑要注意：很多人以为border-collapse是写在td上的，错！这属性是给table标签用的，写在单元格上毛用没有。我就见过新手在CSS里写.td { border-collapse: collapse; }，然后跑过来问我为啥没效果，我当场笑出声。
深入扒一扒collapse的脾气
你以为border-collapse: collapse就是简单地把两条线合成一条？太天真了。这里面的门道多着呢。
边框合并的规则
当两个单元格的边框相遇时，到底显示哪条？CSS规范里有一套复杂的优先级算法，但咱们不用背那些枯燥的规则，记住这几个实用的就行：
- 粗的优先于细的：如果一边是2px，一边是1px，显示2px的
- 样式优先：
solid>dashed>dotted（大概这么个意思，具体看浏览器） - 颜色看来源：如果优先级一样，后来定义的或者更具体的选择器会赢
来，看个例子你就明白了：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>边框优先级测试</title><style>.test-table{border-collapse: collapse;width: 400px;}/* 普通单元格 */.test-table td{border: 1px solid #ccc;padding: 12px;}/* 重点行：边框更粗 */.test-table tr.highlight td{border: 3px solid #ff6b6b;}/* 特定单元格：颜色不同 */.test-table td.special{border: 2px solid #4ecdc4;}</style></head><body><tableclass="test-table"><tr><td>普通单元格</td><tdclass="special">特殊颜色</td><td>普通单元格</td></tr><trclass="highlight"><td>粗边框行</td><tdclass="special">粗+特殊颜色冲突</td><td>粗边框行</td></tr></table></body></html>你看第二行中间的单元格，它既有highlight行的3px红色边框，又有自己定义的2px青色边框。最后显示的是啥？自己去浏览器看，然后想想为啥。这种冲突在实际项目中经常遇到，特别是当你用类名控制不同状态的表格时。
border-spacing直接报废
这是个大坑，我得重点说说。当你用了border-collapse: collapse之后，border-spacing属性就直接失效了。啥意思？就是你没法再用这个属性控制单元格之间的间距了。
有些设计师或者产品经理会提这种需求：“表格边框要单线，但单元格之间要留10px的间隙”。听到这种需求我直接头大，因为技术上这俩是互斥的。collapse模式下边框必须贴在一起，不可能有间隙。
那咋办？用padding啊！给td加内边距，内容看起来就有间距了。如果非得要那种视觉上分离的效果，那你得放弃collapse，回到separate模式，然后精心调整border-spacing。
/* collapse模式下，这个没用 */.table-wrong{border-collapse: collapse;border-spacing: 10px;/* 纯属浪费字节 */}/* 正确做法：用padding撑开 */.table-right{border-collapse: collapse;}.table-right td{border: 1px solid #ddd;padding: 15px;/* 内容周围的空白就是这个 */}浏览器的小脾气
虽然border-collapse是个老属性了，但不同浏览器渲染起来还是有点小差异。特别是涉及到复杂嵌套表格、跨行跨列的单元格（rowspan、colspan）时，IE（对，包括IE11）有时候会有奇怪的1px偏差。
我遇到过最诡异的情况是：在Chrome里表格边框完美对齐，到了Safari就错位1px，检查了半天发现是border-width用了小数比如0.5px。所以稳妥起见，边框宽度用整数，别搞那些花里胡哨的。
这招好用但也有坑
先说说好处
用了border-collapse: collapse，最直观的好处就是表格看起来清爽。特别是那种数据量大的后台管理系统，表格密密麻麻的，如果是双线边框，视觉上简直灾难，眼睛都看花了。
而且代码量真的少。你不用去算哪些边框该隐藏、哪些该显示，也不用写那种.td:first-child去掉左边框、.td:last-child去掉右边框的啰嗦代码。一行border-collapse: collapse搞定，维护起来省心。
但麻烦事儿也不少
单独控制某条边线很费劲
有时候设计师会提这种需求：“表格整体是单线，但表头下面那条线要加粗，和其他行区分开”。在collapse模式下，这条线既是表头单元格的下边框，又是第一行数据单元格的上边框。你想单独加粗？那两边的单元格都得设置，而且还得确保优先级算对。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>单独控制边框的麻烦</title><style>.complex-table{border-collapse: collapse;width: 100%;}.complex-table th, .complex-table td{border: 1px solid #ddd;padding: 12px;text-align: left;}/* 想给表头底部加粗边框 */.complex-table th{border-bottom: 2px solid #333;/* 这样写其实会影响左右边框！ */}/* 正确的做法：单独指定底部，同时保留其他边 */.complex-table th{border: 1px solid #ddd;border-bottom: 2px solid #333;}/* 但这样第一行的td上面也会显示2px，因为合并了 *//* 所以第一行的td需要覆盖 */.complex-table tr:first-child td{border-top: none;/* 去掉上边框，但这样左边右边也没了... */}/* 最终靠谱的写法 */.complex-table th{border-width: 1px 1px 2px 1px;border-style: solid;border-color: #ddd #ddd #333 #ddd;}.complex-table tr:first-child td{border-width: 0 1px 1px 1px;/* 上边框0，其他1px */border-style: solid;border-color: #ddd;}</style></head><body><tableclass="complex-table"><thead><tr><th>姓名</th><th>职位</th><th>部门</th></tr></thead><tbody><tr><td>张三</td><td>前端工程师</td><td>技术部</td></tr><tr><td>李四</td><td>产品经理</td><td>产品部</td></tr></tbody></table></body></html>看到没？就加粗一条线，CSS写得跟绕口令似的。这还是简单表格，要是那种有合并单元格的，我直接选择放弃治疗，跟设计师商量改方案。
复杂嵌套表格可能出幺蛾子
表格里面再套表格，这种需求虽然不太常见，但偶尔会遇到。比如一个单元格里嵌入一个小表格展示详情。这时候外层用了border-collapse: collapse，内层表格如果没单独设置，可能会继承一些奇怪的样式，边框对不齐或者消失。
我的建议是：嵌套表格一定要给内层表格单独写完整的边框样式，别指望继承，那玩意儿不靠谱。
/* 外层表格 */.outer-table{border-collapse: collapse;}/* 内层表格必须重置 */.outer-table .inner-table{border-collapse: separate;/* 或者collapse，但得明确指定 */border-spacing: 0;margin: 10px 0;}.outer-table .inner-table td{border: 1px solid #999;/* 其他样式... */}老版本IE的兼容性
虽然现在IE11都快没人用了，但有些国企、银行的项目还得伺候这大爷。IE对border-collapse的支持有点迷，特别是和position: relative或者background-color一起用的时候，可能会出现边框消失或者颜色不对的情况。
我的解决方案是：给IE单独写hack，或者用更稳妥的separate模式加手动去边框的方式兼容。不过说实话，现在新项目真没必要为IE费这么大劲了，让客户升级浏览器吧，咱不伺候了。
实际项目里咋用才稳
讲了这么多原理和坑，来说说实际项目中我是怎么用的。
后台管理系统表格
这种场景border-collapse: collapse是标配。数据量大、列数多，双线边框根本没法看。我通常会封装一个基础的表格样式类，整个系统的表格都基于这个改。
/* 基础表格样式 - 后台系统通用 */.data-table{border-collapse: collapse;width: 100%;font-size: 14px;line-height: 1.5;}.data-table th, .data-table td{border: 1px solid #e8e8e8;padding: 12px 16px;text-align: left;vertical-align: middle;}/* 表头样式 */.data-table thead th{background-color: #fafafa;font-weight: 600;color: #333;border-bottom: 2px solid #d9d9d9;/* 表头底部加粗 */}/* 数据行hover效果 */.data-table tbody tr:hover{background-color: #f5f5f5;transition: background-color 0.2s;}/* 斑马纹 */.data-table tbody tr:nth-child(even){background-color: #fafafa;}/* 对齐方式工具类 */.data-table .text-center{text-align: center;}.data-table .text-right{text-align: right;}.data-table .text-left{text-align: left;}/* 列宽控制 - 常用列 */.data-table .col-checkbox{width: 48px;text-align: center;}.data-table .col-index{width: 60px;text-align: center;color: #999;}.data-table .col-action{width: 120px;text-align: center;}.data-table .col-date{width: 160px;}.data-table .col-status{width: 100px;text-align: center;}用这个基础类，再配合一些工具类，能覆盖80%的后台表格需求。而且因为用了border-collapse，边框清爽，加上斑马纹和hover效果，用户体验还不错。
财务报表类表格
财务报表对边框的要求更严格，特别是那种有合计行、分组小计的，边框要有层次。我通常会用collapse配合不同的边框粗细来区分层级。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>财务报表表格示例</title><style>.finance-table{border-collapse: collapse;width: 100%;font-family:'Courier New', monospace;/* 等宽字体，数字对齐 */font-size: 13px;}.finance-table th, .finance-table td{padding: 8px 12px;text-align: right;/* 财务数字右对齐 */border: 1px solid #333;}.finance-table th{background-color: #f0f0f0;font-weight: bold;text-align: center;}/* 分组标题行 */.finance-table .group-header td{background-color: #e8e8e8;font-weight: bold;text-align: left;border-top: 2px solid #333;}/* 明细行 */.finance-table .detail-row td{border: 1px solid #999;}/* 小计行 */.finance-table .subtotal td{border-top: 1px solid #666;border-bottom: 1px solid #666;font-weight: bold;background-color: #f9f9f9;}/* 总计行 - 双边框效果 */.finance-table .grand-total td{border-top: 2px double #000;/* 双边框 */border-bottom: 2px solid #000;font-weight: bold;font-size: 14px;background-color: #fff3cd;}/* 金额负数显示红色 */.finance-table .negative{color: #cf1322;}/* 第一列文字左对齐 */.finance-table td:first-child, .finance-table th:first-child{text-align: left;}</style></head><body><tableclass="finance-table"><thead><tr><th>项目</th><th>本月发生额</th><th>本年累计</th><th>预算金额</th><th>执行率</th></tr></thead><tbody><trclass="group-header"><tdcolspan="5">一、主营业务收入</td></tr><trclass="detail-row"><td>产品销售收入</td><td>1,250,000.00</td><td>8,750,000.00</td><td>10,000,000.00</td><td>87.5%</td></tr><trclass="detail-row"><td>服务收入</td><td>380,000.00</td><td>2,280,000.00</td><td>2,500,000.00</td><td>91.2%</td></tr><trclass="subtotal"><td>小计</td><td>1,630,000.00</td><td>11,030,000.00</td><td>12,500,000.00</td><td>88.2%</td></tr><trclass="group-header"><tdcolspan="5">二、其他业务收入</td></tr><trclass="detail-row"><td>租金收入</td><td>50,000.00</td><td>300,000.00</td><td>360,000.00</td><td>83.3%</td></tr><trclass="grand-total"><td>收入总计</td><td>1,680,000.00</td><td>11,330,000.00</td><td>12,860,000.00</td><td>88.1%</td></tr></tbody></table></body></html>这种表格用collapse模式特别合适，因为边框的层级关系（普通线、粗线、双线）通过简单的border-width就能控制，不用去算哪些该隐藏。
响应式布局下的注意事项
现在做项目都要考虑移动端，表格在手机上展示一直是个头疼的问题。用了border-collapse之后，要注意几个点：
- 宽度计算：
collapse模式下，边框是算在单元格宽度里的，但不同浏览器计算方式可能有细微差别。响应式布局时最好用box-sizing: border-box统一一下。 - 横向滚动：手机屏幕小，表格经常要横向滚动。记得给表格容器加
overflow-x: auto，并且确保边框在滚动时不会莫名其妙地消失。
.table-responsive{overflow-x: auto;-webkit-overflow-scrolling: touch;/* iOS平滑滚动 */border: 1px solid #ddd;/* 容器边框，防止表格边框贴边 */}.table-responsive table{border-collapse: collapse;min-width: 600px;/* 保证最小宽度，触发横向滚动 */}- 触摸反馈：移动端hover效果没用，得加
:active状态或者JS触摸反馈。
踩坑了怎么救场
说了这么多，真遇到问题怎么排查？我列几个最常见的症状和药方。
边框消失不见
症状：明明写了border，但页面上啥也看不到。
检查清单：
- 颜色是不是和背景一样了？比如白色背景写了
border: 1px solid #fff，那当然看不见 - 被其他样式覆盖了？打开开发者工具，检查
border属性有没有被划掉 - 表格宽度是不是0？有时候父容器没宽度，表格 collapse 了，边框也跟着缩没了
/* 调试技巧：给表格加个临时背景色，确认它真的存在 */table.debug{background-color:rgba(255, 0, 0, 0.1);border-collapse: collapse;}双线变单线失败
症状：设置了border-collapse: collapse，但还是双线。
可能原因：
- 写错地方了：检查是不是写在
table上，而不是td或tr - 被重置了：后面有代码又写成了
separate，或者引入了重置CSS（比如某些UI框架） - 浏览器默认样式：有些浏览器对
table有默认的border属性，得显式覆盖
/* 彻底重置表格边框 */table.clean-slate{border-collapse: collapse;border: none;/* 先去掉表格本身的边框 */}table.clean-slate th, table.clean-slate td{border: 1px solid #ddd;/* 再单独加单元格边框 */}颜色不对
症状：边框颜色和自己设置的不一样，或者有的地方深有的地方浅。
这通常是优先级问题。检查：
- 是不是有更具体的选择器覆盖了你的样式？
- 是不是用了
!important被反杀了？ - 透明度过渡：有时候
rgba颜色和背景混合后看起来不对
移动端变形
症状：手机上表格边框错位、对不齐，或者某些边框消失了。
这多半是宽度计算问题。试试：
- 给表格设置
table-layout: fixed，让列宽均匀分布 - 检查有没有单元格内容太长把表格撑变形了，加
word-break: break-all或者white-space: nowrap控制
.mobile-friendly-table{border-collapse: collapse;table-layout: fixed;/* 固定布局，列宽按设置来 */width: 100%;}.mobile-friendly-table td{word-wrap: break-word;/* 长文本自动换行 */overflow-wrap: break-word;}打印样式悲剧
症状：网页上看好好的，打印出来边框没了，或者变成双线了。
打印样式要单独写，而且有些浏览器打印时对border-collapse的支持有差异。稳妥的做法是打印时用separate模式，手动控制边框。
@media print{.print-table{border-collapse: separate;border-spacing: 0;}.print-table th, .print-table td{border: 1px solid #000 !important;/* 打印用黑色边框更清晰 */}/* 去掉hover背景色，省墨 */.print-table tr:hover{background-color: transparent !important;}}老前端私藏的几个骚操作
最后抖点压箱底的技巧，都是血泪换来的。
CSS变量管理边框颜色
大型项目里表格样式可能有很多变种，边框颜色改起来麻烦。用CSS变量（自定义属性）统一管理，改一处全变。
:root{--table-border-color: #e8e8e8;--table-header-bg: #fafafa;--table-hover-bg: #f5f5f5;--table-border-width: 1px;}/* 暗色主题 */[data-theme="dark"]{--table-border-color: #434343;--table-header-bg: #1f1f1f;--table-hover-bg: #2c2c2c;}.data-table{border-collapse: collapse;border:var(--table-border-width) solid var(--table-border-color);}.data-table th, .data-table td{border:var(--table-border-width) solid var(--table-border-color);padding: 12px;}.data-table thead th{background-color:var(--table-header-bg);}.data-table tbody tr:hover{background-color:var(--table-hover-bg);}这样切主题的时候，只需要改data-theme属性，表格样式自动跟着变，不用写一堆覆盖规则。
第一行和最后一行单独处理
有时候想要表格第一行上边没边框（贴紧容器），最后一行下边没边框，中间都有。这种"缺口"效果用:first-child和:last-child配合collapse要小心。
.smart-table{border-collapse: collapse;width: 100%;}.smart-table td{border: 1px solid #ddd;border-top: none;/* 默认去掉上边框 */padding: 10px;}.smart-table tr:first-child td{border-top: 1px solid #ddd;/* 第一行加回来 */}/* 如果表格在容器里，想要整体有外边框 */.table-container{border: 1px solid #ddd;border-radius: 4px;overflow: hidden;/* 配合圆角 */}但注意，border-collapse模式下，第一行的上边框和表头的下边框是同一根线（如果有thead的话），这时候得用thead th和tbody tr:first-child td分别控制。
hover效果配合transition
虽然border-collapse主要管边框，但和hover效果配合好了体验更佳。加个过渡动画，鼠标移上去不突兀。
.data-table tbody tr{transition: background-color 0.2s ease, transform 0.1s ease;}.data-table tbody tr:hover{background-color: #f5f5f5;transform:translateX(2px);/* 轻微位移，有"浮起来"的感觉 */box-shadow: 0 2px 8px rgba(0,0,0,0.1);/* 阴影增强层次感 */}不过注意，transform可能会让边框渲染有点模糊，如果追求极致清晰，可以只用background-color过渡。
表头固定时的边框陷阱
做那种表头固定、内容滚动的表格时，border-collapse会有个坑：表头和内容的边框可能对不齐，因为滚动条占了宽度。
解决方案是：表头单独一个表格，内容另一个表格，但这样collapse模式下的边框合并就失效了（两个独立表格）。我的做法是放弃collapse，用separate模式，然后精心计算边框，或者干脆用div模拟表格布局。
<!-- 表头固定方案 - 用div模拟更稳 --><divclass="table-header"><divclass="th">姓名</div><divclass="th">年龄</div></div><divclass="table-body"><divclass="tr"><divclass="td">张三</div><divclass="td">25</div></div></div><style>.table-header, .table-body{display: table;width: 100%;table-layout: fixed;}.th, .td{display: table-cell;border: 1px solid #ddd;padding: 10px;}/* 表头固定 */.table-header{position: sticky;top: 0;background: #fff;z-index: 1;}</style>暗色主题下调色
暗色模式下，如果还用#ddd这种浅灰边框，会刺眼得像霓虹灯。得把边框颜色调深，对比度降低。
[data-theme="dark"] .data-table{border-collapse: collapse;}[data-theme="dark"] .data-table th, [data-theme="dark"] .data-table td{border-color: #434343;/* 深灰色，别用纯黑 */color: #d9d9d9;}/* 暗色模式下hover别用太亮的背景 */[data-theme="dark"] .data-table tbody tr:hover{background-color: #2c2c2c;}暗色主题还有个坑：有些浏览器默认的表单控件、滚动条在暗色背景下格格不入，记得一起处理。
最后唠点实在的
看完这篇，你应该对border-collapse这玩意儿有了个全面的认识。说实话，它看似简单，但真用起来坑不少。我这些年遇到的表格边框问题，能写满一张纸。
几个建议送给大家：
项目里统一规范。别前端A写一套表格样式，前端B又写一套，最后合并代码的时候冲突得想打架。提前定好基础表格类，大家都基于这个扩展。
遇到奇怪问题先开F12。别猜，别试，直接看开发者工具里的计算样式（Computed），看看border属性最终算出来是啥，被谁覆盖了。这能省80%的调试时间。
实在不行重置再来。有时候表格样式被各种覆盖搞得一团糟，别费劲去修，直接给那个表格加个特定的类名，全部重置重新写，反而更快。
能不用table就别用table。这话虽然有点极端，但现代前端确实越来越多用div+flex/grid来模拟表格布局，特别是那种复杂交互的。table标签的渲染机制有点古老，某些场景下确实不如div灵活。但纯数据展示的场景，table的语义化和可访问性还是更好的。
好了，就聊到这儿。希望下次你再遇到表格边框问题，能想起这篇碎碎念，然后淡定地解决掉。有啥新坑也欢迎交流，前端这行就是踩坑填坑，永无止境。
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
| 专栏系列（点击解锁） | 学习路线(点击解锁） | 知识定位 |
|---|---|---|
| 《微信小程序相关博客》 | 持续更新中~ | 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等 |
| 《AIGC相关博客》 | 持续更新中~ | AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结 |
| 《HTML网站开发相关》 | 《前端基础入门三大核心之html相关博客》 | 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识 |
| 《前端基础入门三大核心之JS相关博客》 | 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心 | |
| 《前端基础入门三大核心之CSS相关博客》 | 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页 | |
| 《canvas绘图相关博客》 | Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化 | |
| 《Vue实战相关博客》 | 持续更新中~ | 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅 |
| 《python相关博客》 | 持续更新中~ | Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具 |
| 《sql数据库相关博客》 | 持续更新中~ | SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能 |
| 《算法系列相关博客》 | 持续更新中~ | 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维 |
| 《IT信息技术相关博客》 | 持续更新中~ | 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识 |
| 《信息化人员基础技能知识相关博客》 | 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方 | |
| 《信息化技能面试宝典相关博客》 | 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面 | |
| 《前端开发习惯与小技巧相关博客》 | 持续更新中~ | 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等 |
| 《photoshop相关博客》 | 持续更新中~ | 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结 |
| 日常开发&办公&生产【实用工具】分享相关博客》 | 持续更新中~ | 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
