不加alt会导致浏览器渲染失败、屏幕阅读器无法播报、seo权重下降；alt是语义必需项，纯装饰图应设为alt=""，链接中的图片需说明目标。
为什么 <img> 不加 alt 会出问题
浏览器渲染失败、屏幕阅读器无法播报、SEO 权重下降——这三个后果都源于漏写 alt 属性。它不是可选的“备注”，而是语义必需项：当图片加载失败、禁用图片或用户依赖辅助技术时，alt 是唯一能传达内容意图的字段。
-
alt值应简洁描述图像功能，而非堆砌关键词（比如alt="红色按钮，点击提交表单"比alt="submit button red ui element"更有效） - 纯装饰图应设为
alt=""（空字符串），而非省略；否则屏幕阅读器可能读出文件名或报错 - 若图片是链接的一部分，
alt需说明链接目标（如alt="返回首页"），而非只描述图本身
<link rel="preload"> 和 <link rel="preconnect"> 别混用
两者都出现在 ，但作用完全不同：rel="preload" 是“提前下载某个具体资源”，rel="preconnect" 是“提前和某个域名建立连接”。用错就等于白写。
-
rel="preload"必须带as属性（如as="font"、as="script"），否则浏览器无法判断资源类型，可能降级为普通 fetch -
rel="preconnect"只对跨域请求有效（如 CDN 字体、第三方分析脚本），同域预连接无意义，还浪费 socket - 不要给未使用的域名加
preconnect；每个预连接会占用一个 HTTP/1.1 连接槽位，过多反而拖慢首屏
<meta charset="UTF-8"> 必须放在
这个标签位置错了，中文就会乱码，且无法通过后续 JS 或 CSS 补救。原因在于浏览器解析 HTML 时，一旦遇到非 ASCII 字符，会立即按当前已知编码解析；如果 charset 声明靠后，前面的中文已被错误解码，再改也晚了。
- 它必须是
中第一个子元素（紧随开始标签之后），不能被<title></title>或其他<meta>挡住 - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">；HTML5 只认charset简写形式，旧写法兼容性差且易被忽略 - 服务端响应头中若已声明
Content-Type: text/html; charset=utf-8，HTML 内仍需保留该标签——部分浏览器（尤其移动端）优先信 HTML 内声明
<button></button> 的 type 属性不写就是坑
默认 type="submit"，这意味着只要它在 <form></form> 里，点一下就会触发表单提交——哪怕你本意只是个“取消”或“展开详情”的操作按钮。
- 明确写
type="button"表示纯行为按钮，与表单无关 -
type="reset"仅用于清空当前<form></form>内所有控件值，慎用；多数现代交互用 JS 控制更可控 - 不要依赖 CSS 类名或 JS 绑定来“阻止默认行为”，那是补救措施，不是设计逻辑；从源头设对
type才可靠
<meta charset="UTF-8"> 的位置约束和 <button></button> 的 type 默认值——它们不出错时不显眼，一出错却很难定位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
