HTML没有标记默认收货地址的原生标签或属性，address仅表示联系信息，input无default属性；应使用data-is-default="true"等自定义属性配合CSS/JS实现，默认状态需前后端字段名统一并显式转换布尔值。
HTML 里没有 default 地址标签，别被“默认”俩字带偏了
HTML 本身不提供「标记默认收货地址」的语义化标签或原生属性。address 元素只表示联系信息，form 里的 input 也没有 default 属性——所谓“默认”，是业务逻辑层的事，不是 HTML 能解决的。
常见错误现象：
– 直接写 <address default> 或 <div is-default="true">，以为浏览器会识别并高亮
– 把后端返回的 is_default: true 字段硬塞进 HTML 属性，却没配套 JS 或 CSS 处理
- 真正能起作用的是：用自定义属性（如
data-is-default="true"）存状态，再靠 CSS 或 JS 渲染样式/行为 -
data-前缀是唯一合规且可读的扩展方式，浏览器不会解析，但 JS 可以安全读取 - 别用
default、selected这类已存在语义的属性名去“重载”，容易和select、option冲突
CSS 怎么让「默认地址」在页面上一眼看出
靠视觉区分最直接，但得避开依赖 JS 的渲染时机问题。推荐纯 CSS 方案：
- 给默认地址容器加
data-is-default="true"属性，例如：<div class="address-item" data-is-default="true"> - 用属性选择器写样式：
[data-is-default="true"] { border-left: 4px solid #007bff; background-color: #f8f9fa; } - 如果需要图标标识，可用伪元素：
[data-is-default="true"]::before { content: "✓"; color: #28a745; margin-right: 6px; } - 避免用
:first-child或序号类选择器代替data-is-default，因为地址列表可能排序、筛选、分页，顺序不等于默认
JS 怎么安全读取并操作默认地址
别直接查 DOM 里有没有 “默认” 文字，也别靠 class 名硬匹配（比如 class="default"），文字和 class 都可能变，且易误判。
立即学习“前端免费学习笔记（深入）”；
- 统一用
dataset.isDefault读取：const el = document.querySelector('.address-item[data-is-default="true"]'); const isDefault = el?.dataset.isDefault === 'true'; - 切换默认地址时，先清除所有
data-is-default，再给目标设为"true"，避免多选或无选 - 提交表单前校验：
if (!document.querySelector('[data-is-default="true"]')) { alert('请先设置默认地址'); return false; } - 注意大小写：
el.dataset.isDefault对应data-is-default，不是data-default或data-isdefault
后端传参和前端渲染怎么对齐“默认”状态
前后端最容易在这里脱节：后端返回 default: 1，前端却按 is_default: true 解析；或者 JSON 字段名是 is_default，但模板里写成 item.default。
- 约定字段名统一用
is_default（snake_case）或isDefault（camelCase），并在接口文档里明确标注类型和含义 - 模板渲染时，确保布尔值正确输出：
<div data-is-default="{{ item.is_default|lower }}">（Jinja）或<div :data-is-default="item.isDefault">（Vue） - 如果后端返回的是数字
1/0，前端 JS 必须显式转布尔：!!item.is_default，否则data-is-default="0"在 dataset 中仍是字符串"0"，不是false - 移动端 WebView 或低版本 Safari 对
dataset支持稳定，但别依赖dataset存复杂对象，只放简单标识
真正麻烦的从来不是加个标识，而是当用户编辑、删除、新增地址后，“默认”状态是否还能被准确追踪、同步、持久化。这个逻辑一旦散落在 HTML、JS、后端三处，不出错才怪。
