Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
收货地址表单禁用标签，因语义错误且导致浏览器自动填充失效；必须严格使用小写连字符格式的autocomplete值（如address-level1），配合type="text"和对应name，省市区需js动态联动，邮编用pattern="[0-9]{6}"校验。
别用 <address></address> 标签做收货地址表单——它语义错误，浏览器自动填充也基本失效。
autocomplete 值填错就等于没写
浏览器（Chrome/Safari/Edge）靠 autocomplete 属性触发地址自动填充，但中文场景下几乎全军覆没，原因就是值写错：
-
autocomplete="name"是收件人姓名，不是"full-name"或"recipient-name" -
autocomplete="tel"是手机号，不是"phone"或"mobile" - 中国“省”对应
address-level1，“市”对应address-level2（注意：不是“区/县”，国内极少需要单独采集address-level3） -
street-address必须包含门牌号，不要拆成“街道”+“门牌号”两个字段 -
postal-code别写成"zip"或"postcode"，后者在中文环境不识别
省市区下拉联动不是 HTML 能解决的
<select></select> 本身没有数据源，纯 HTML 只能写死或留空。真实项目中：
- 静态展示可写死几个常用省：
<option value="zj">浙江省</option> - 但“选省后加载市”必须靠 JS 请求接口（如省级编码 → 市级列表），
<select></select>标签自身不带逻辑 - 若强行用
<datalist></datalist>模拟，搜索体验差、无层级关系、移动端支持弱 - 别给
<select autocomplete="address-level1"></select>加type="search"——会弹出错误键盘，且破坏自动填充链路
type 和 name 必须配合 autocomplete 才有效
只写 autocomplete="street-address" 不够，type 和 name 也要对齐规范：
- 统一用
type="text"：安全，兼容所有自动填充引擎；type="tel"会强制数字键盘，type="search"触发放大镜图标和历史记录干扰 -
name建议与autocomplete一致（如name="street-address"），虽非强制，但后端解析更直观 - 禁用
required在省/市字段：用户可能填“上海市”而不填“上海市市辖区”，留空反而更容错 - 邮编字段加
pattern="[0-9]{6}"可约束输入，但别用inputmode="numeric"——部分安卓浏览器会禁粘贴
结构上避免嵌套 <address></address> 或滥用 <p></p>
<address></address> 是语义化「联系人归属信息」，比如页脚公司地址，不是表单字段容器。常见误用：
- 把整个收货地址区块包进
<address></address>→ 搜索引擎和读屏器会误判为页面联系方 - 用
<p></p>包每个字段（如<p><label>省</label><input></p>）→ 语义冗余，无障碍体验下降 - 正确做法：用
<div class="form-group"> 或直接平铺 <code><label></label>+<input>，保持语义扁平 - 如果真要结构化地址（比如给 Google 地图卡片用），得补 JSON-LD，不是靠 HTML 标签嵌套
最易被忽略的一点：autocomplete 值大小写敏感，"Street-Address" 或 "street address" 全部无效——必须严格小写、连字符、无空格。填错一个字符，整条自动填充链就断了。
