用纯HTML搭家乡页应先解决乱码、路径、移动端适配三大问题：保存为UTF-8 with BOM；图片统一放同级images文件夹并用相对路径；必须加viewport meta标签；语义化结构优先，再逐步增强。
用纯 HTML 快速搭出家乡介绍页，不需要框架或服务器
能，而且建议从 index.html 一个文件开始。不是“能不能”，而是“怎么避免一上来就卡在图片路径、中文乱码、手机打不开”。
- 本地双击打开的 HTML 文件，默认用系统编码读取——Windows 记事本存为 UTF-8 **必须勾选“BOM”**，否则中文变乱码；VS Code 默认无 BOM，要手动在右下角编码处点“Save with Encoding” → “UTF-8 with BOM”
- 所有图片别放桌面或“我的文档”，统一建个
images文件夹，和index.html同级，引用写成<img src="images/bridge.jpg">，别用绝对路径（如C:\Users\...） - 浏览器直接双击打开时，
file://协议下部分 CSS 动画、字体加载会失败，先用live-server或 Python 快速起服务：python3 -m http.server 8000，然后访问http://localhost:8000
标题、段落、图片这些基础内容怎么组织才不翻车
别急着套模板。先确保语义正确：家乡名用 <h1>，景点名用 <h2>，描述用 <p>，图配文用 <figure><img><figcaption>。这样既利于屏幕阅读器，也方便以后加 CSS。
-
<h1>全页只能有一个，就是你家乡的名字，比如“景德镇” - 避免用
<div>堆砌标题，浏览器不知道那是标题，搜索引擎也不认 - 图片加
alt属性不是可选项：<img src="images/yaochuan.jpg" alt="景德镇古窑码头上的传统制瓷船">，既辅助无障碍，也防止图片加载失败时留白 - 长段文字别塞进一个
<p>，按逻辑拆成多段，每段讲清楚一件事：地理、历史、方言、小吃
让网页在手机上正常显示的关键三行代码
90% 的本地做的家乡页，在手机 Safari 或 Chrome 里缩成一团、字小得看不见，问题就出在没告诉浏览器“别自作主张缩放”。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须在
<head>里加这行：<meta name="viewport" content="width=device-width, initial-scale=1"> - 别信“自动适配”的传言，没有这行，移动端浏览器默认按 980px 宽渲染，再缩小显示，文字糊成一片
- 如果用了固定像素字号（如
font-size: 16px），在手机上依然可能过小——改用相对单位：font-size: 1rem或1.2em，依赖根元素缩放
想加地图、天气、视频？先看这三条边界
纯静态 HTML 能做的事有明确边界。加外部服务不是加一行代码就行，得考虑协议、跨域、稳定性。
立即学习“前端免费学习笔记（深入）”；
- 嵌入高德或百度地图：必须用它们开放平台的 JS API，且需申请
ak（密钥），本地file://协议下大概率被拒绝加载——先部署到http://环境再测 - 天气插件基本都依赖第三方 API，返回 JSON 数据，但浏览器禁止
file://下发 AJAX 请求，所以“本地双击运行时显示天气”这事技术上走不通 - 视频优先用
<video>标签本地播放（MP4 格式最兼容），别直接贴 YouTube 链接；如果真要嵌入，用官方提供的<iframe>代码，但注意它依赖网络且可能被地区屏蔽
真正容易被忽略的是：你花三天调好一张轮播图，结果用户用 iOS 微信内置浏览器打开，CSS 动画全失效——这种兼容性问题不会报错，只会静默不工作。先跑通基础结构，再一层层加交互，比反复调试炫酷效果更省时间。
