必须写，且至少包含、和，否则中文乱码、手机缩放失灵、标题不显示；关键信息须用语义化标签（如姓名、地址、邮箱、电话），并内联css确保跨设备可读。
用纯 HTML 写名片页，到底要不要写
要，而且必须写。很多人直接开写 ，结果中文乱码、标题不显示、手机上字体炸开——全是没配 <meta charset="UTF-8"> 和 <meta name="viewport"> 惹的祸。
最简但可用的 至少包含：
-
<meta charset="UTF-8">（否则中文变 ） -
<meta name="viewport" content="width=device-width, initial-scale=1">（不然手机默认缩放，文字小得看不清） -
<title></title>（浏览器标签页上显示的名字，别留空）
不用引入外部 CSS 或 JS 也能跑，但少了这两行 meta，页面在真实设备上大概率“看起来不像个网页”。
姓名、电话、邮箱这些字段，该用什么 HTML 标签？
别全塞 <div> 或 <code><p></p>。语义不对，屏幕阅读器读不出来，SEO 也弱。关键字段优先用语义化标签：
- 姓名：用
<h1></h1>（唯一主标题，代表页面核心身份） - 职位/简介：用
<h2></h2>或<p></p>，别套<h3></h3>以下层级 - 邮箱：
@#@#@#@#@#@#@#@#@#@0（点一下直接唤起邮件客户端） - 电话：
@#@#@#@#@#@#@#@#@#@1（注意tel:协议和国际格式，国内号码建议加+86） - 地址：用
<address></address>标签（专为联系信息设计，浏览器默认斜体，语义明确）
错误写法：<p>联系电话：13800138000</p> —— 没超链接、没协议、没法一键拨打。
怎么让名片在手机上不缩放、文字不挤成一团？
光靠 <meta name="viewport"> 还不够。纯 HTML 页面没有 CSS，默认排版会把所有内容堆在左上角、字号极小。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
必须加几行内联 CSS（不用外链，免配置）：
<style>
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; }
h1, h2 { margin-top: 0; }
address { font-style: normal; margin: 0; }
@media (max-width: 480px) {
body { padding: 1rem; }
h1 { font-size: 1.5rem; }
}
</style>
重点说明：
-
font-family列了系统字体栈，iOS / Android / Windows 都能 fallback 到可读字体 -
line-height: 1.6是可读性底线，小于 1.4 的行高在手机上极易误读 -
@media块里只调了移动端的padding和h1字号，别的不动——过度响应式反而让简单页变复杂
部署到 GitHub Pages 后样式失效，问题出在哪？
常见原因是路径写死了。比如你在本地用 <link rel="stylesheet" href="style.css">，但 GitHub Pages 默认发布在子路径（如 https://xxx.github.io/my-card/），相对路径就错了。
纯 HTML 名片页最稳的做法：彻底放弃外链 CSS/JS，全部写进 <style></style> 和 <script></script> 标签里。连图标都用 Unicode（比如 ? ✆ ?）或 inline SVG，不依赖外部资源。
检查点：
- 打开浏览器开发者工具 → Network 标签页 → 刷新 → 看有没有
404请求 - 右键“查看页面源代码”，确认所有
<link>或<script src="..."></script>路径是否真存在 - GitHub Pages 设置里确认 Source 是
main分支 +/ (root)，不是/docs
越简单的页面，越要警惕“看似省事”的外部引用——它会在你换环境时第一个掉链子。
