应使用语义化HTML标签组织自我介绍：用包裹，作标题，分段，强调重点；技能用列表并添加data-level属性便于扩展；图片需带alt、宽高及相对路径；长内容用实现无JS折叠。
用 HTML 语义标签组织自我介绍结构
直接用 <section></section> 包裹自我介绍内容，比用 <div> 更清晰，也利于 SEO 和屏幕阅读器识别。标题用 <code><h2></h2>（不是 <h1></h1>，因为 <h1></h1> 应该留给整个页面主标题），段落用 <p></p>，重点信息可加 <strong></strong>。
常见错误是把所有文字堆在一层 <div> 里，导致后期改样式或加交互时定位困难。比如想单独给“技能列表”加动画，没语义标签就只能靠 class 硬套，容易冲突。
<p>示例结构：</p>
<pre class='brush:php;toolbar:false;'><section id="about">
<h2>关于我</h2>
<p>我是前端开发者，专注 HTML/CSS/JavaScript 实战，喜欢写可维护的代码。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>目前就职于一家远程团队，业余维护 <strong>GitHub</strong> 上的开源小工具。</p>
</section></pre>
<h3>如何让技能列表不写死、便于更新</h3>
<p>用无序列表 <code><ul></ul> + <li> 表达技能项，比纯文字分行更语义化，也方便后续用 CSS 做图标对齐或响应式折行。
别把技能写成一段话如“熟悉 HTML、CSS、JavaScript、React、Git”，这不利于自动化提取或添加徽章图标。拆成独立 <li> 后，每个都能单独加 class 或 data 属性，比如标记熟练度：
<ul> <li data-level="expert">HTML5</li> <li data-level="expert">CSS3</li> <li data-level="intermediate">React</li> </ul>
这样未来加个 JS 脚本动态渲染「熟练度条」或过滤「中级以上技能」就很自然。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
照片和头像怎么嵌入才不拉垮页面加载
用 <img alt="index.html如何制作一个个人主页的自我介绍板块？" > 标签时必须加 alt 属性（哪怕只是 alt="我的头像"），否则无障碍访问失败，部分浏览器也会显示缺失图标。同时建议指定 width 和 height（可以是实际像素值，也可以是 CSS 控制，但至少留占位空间），避免图片加载时页面跳动。
路径别用绝对路径如 C:\Users\...\avatar.jpg，本地测试会 404；统一用相对路径，比如头像图放在同级 assets/ 文件夹下，就写：<img src="assets/avatar.jpg" alt="我的头像" style="max-width:90%" style="max-width:90%">。
如果头像尺寸大（>200KB），先用工具压缩（例如 Squoosh.app 或 ImageOptim），否则首屏加载明显变慢，尤其手机用户。
移动端折叠介绍内容的简单实现方式
自我介绍文字一多，手机上容易撑满整屏。不用 JS 也能用原生 HTML/CSS 折叠：用 <details></details> + <summary></summary>，点击展开收起，兼容性好（Chrome 12+、Firefox 49+、Safari 12.1+ 都支持）。
示例：
<details> <summary>点此查看更多经历</summary> <p>2021 年开始自学前端，2023 年完成首个上线项目……</p> </details>
注意 <summary></summary> 必须是 <details></details> 的第一个子元素，否则不生效；默认展开加 open 属性：<details open></details>。别试图用 display: none 模拟，那会破坏可访问性和语义。
真正容易被忽略的是：别在 <details></details> 里塞太多 DOM 节点或复杂组件，它只适合纯文本或简单内联元素。如果有按钮、表单或 iframe，得换 JS 方案。
