<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>web自我介绍代码</title> <style> body {  font-family: 'Courier New',介绍 monospace; background: #0d1117; color: #c9d1d9; padding: 2em; line-height: 1.7; } .comment {  color: #8b949e; font-style: italic; } .tag {  color: #ff7b72; } .attr {  color: #79c0ff; } .string {  color: #a5d6ff; } .highlight {  background: #161b22; padding: 0.2em 0.5em; border-radius: 4px; } </style> </head> <body> <h1><span class="tag">&lt;self_intro&gt;</span></h1> <p>我写这段代码的时候，刚修完第三个bug——一个是代码因为忘了闭合div，另一个是介绍css选择器权重撞车。你看，代码连自我介绍都逃不过调试的介绍宿命。</p> <h2><span class="tag">&lt;who_i_am&gt;</span></h2> <p><span class="attr">name</span> = <span class="string">"一个把咖啡当编译器用的代码前端开发者"</span><br> <span class="attr">years_of_learning</span> = <span class="string">"3年，其中2年在跟IE兼容性搏斗"</span><br> <span class="attr">current_status</span> = <span class="string">"正在用flexbox解决人生布局问题"</span></p> <p>别笑。介绍上周我为了把一个导航栏垂直居中，代码花了四十分钟。介绍最后发现是代码父元素忘了给高度。那一刻我对着屏幕说了句：<span class="highlight">"这很css"</span>——就像生活，介绍你以为在调样式，代码其实在调逻辑。介绍</p> <h2><span class="tag">&lt;my_skills&gt;</span></h2> <ul> <li><span class="tag">&lt;skill&gt;</span> HTML：能写出语义化标签，代码但偶尔会把<span class="tag">&lt;section&gt;</span>当div用<span class="tag">&lt;/skill&gt;</span></li> <li><span class="tag">&lt;skill&gt;</span> CSS：精通选择器优先级吵架，介绍擅长用!important解决家庭矛盾<span class="tag">&lt;/skill&gt;</span></li> <li><span class="tag">&lt;skill&gt;</span> JavaScript：能写闭包，但经常忘记为什么需要闭包<span class="tag">&lt;/skill&gt;</span></li> <li><span class="tag">&lt;skill&gt;</span> 调试：擅长在console.log里寻找人生真谛<span class="tag">&lt;/skill&gt;</span></li> </ul> <p>上周重构一个老项目，发现三年前的自己写的注释是：<span class="comment">// 这里别动，动了就炸</span>。我没听，动了，然后真的炸了。所以我现在写自我介绍也留了一句：<span class="comment">&lt;!-- 别删这一行，删了会失去某种人生意义 --&gt;</span></p> <h2><span class="tag">&lt;my_philosophy&gt;</span></h2> <p>我喜欢把代码写得像散文——每个函数有明确的职责，每个变量名能读出故事。但现实是，我的代码经常像意识流小说，只有自己看得懂，三天后自己也看不懂了。</p> <p>所以我养成了一个习惯：在关键位置写详细注释，在更关键的位置写<span class="highlight">"为什么"</span>而不是<span class="highlight">"是什么"</span>。因为"是什么"看代码就知道，"为什么"是留给未来那个熬夜加班的自己的情书。</p> <h2><span class="tag">&lt;contact_me&gt;</span></h2> <p>最好的联系方式是GitHub——你会在issue区看到我提问，在PR区看到我学习，在commit记录里看到我凌晨三点的挣扎。<br> 如果你想聊技术，我很乐意；如果你想聊为什么flexbox的justify-content有时候不生效，我有一肚子故事。</p> <hr> <p><span class="comment">&lt;!-- 最后一行代码，但绝不是结束 --&gt;</span><br> <span class="tag">&lt;/self_intro&gt;</span></p> <p style="color:#8b949e; font-size:0.9em;">页面加载完毕。控制台没有报错，但人生总会有的。</p> </body> </html>