link 与 @import、src 与 href、label、data-* 属性分别有什么区别和用途？
先理解原理和示例，再练习完整口述与追问。
回答要点
link 是 HTML 元素，能被预加载扫描器提前发现并行下载；@import 在 CSS 下载解析后才发现，形成串行瀑布。src 嵌入并使用资源，href 建立到资源的关联。label 关联表单控件，扩大点击区域并提供可访问名称。data-* 存放自定义数据，通过 dataset 读取。
原理拆解
浏览器解析 HTML 时，预加载扫描器能提前发现 <link rel="stylesheet">，并行请求；@import 写在 CSS 文件中，必须先下载父样式表才能发现子样式表，层层嵌套会拉长关键路径。link 还支持 media、rel="preload"，也可通过 JS 切换 disabled；构建工具通常会在打包时内联 @import。
src（script、img、iframe）表示该元素要加载并使用这个资源，普通 script 的 src 会阻塞解析，async/defer 除外。href（a、link）建立文档与资源的关联：a 用于导航，link rel="stylesheet" 会阻塞渲染但不阻塞 HTML 解析。
label 通过 for 对应控件 id，或直接包裹控件；点击文字会聚焦输入框或切换复选框，屏幕阅读器读出控件名称。data-* 属性的连字符名转为 dataset 的驼峰名，例如 data-user-id 对应 el.dataset.userId，也可用 [data-state="open"] 写样式。
示例与推演
<link rel="stylesheet" href="/app.css" media="screen">
<label for="agree"><input id="agree" type="checkbox"> 同意协议</label>
<button data-action="delete" data-item-id="42">删除</button>
事件委托中读取 event.target.closest('[data-action]').dataset.itemId，得到字符串 '42'。
易错点
data-* 的值都是字符串，不要放令牌、权限等敏感数据；placeholder 不能替代 label。<meta name="viewport">、charset、description 等 meta 也常一起被问，作用分别是视口、编码与摘要。
参考回答可直接练习口述
link 是 HTML 标签，浏览器解析时能提前发现并行下载；@import 要等外层 CSS 下载解析后才发现，会串行拉长关键路径。src 表示把资源嵌入并使用，比如 script 和 img；href 是建立关联，比如链接和样式表。label 让文字和控件关联，点击文字也能操作，并给读屏软件提供名称。data-* 放自定义数据，用 dataset 读取，值是字符串，不放敏感信息。