HTML5语义化标签是内容角色声明而非样式容器；全页唯一且不可嵌套，须配标题，仅用于明确导航意图区域；所有语义标签默认无margin/padding；Flex比Grid更适三栏与响应式布局；localStorage受无痕模式、HTTP协议等限制，需try/catch处理配额错误；Canvas绘图前须检查DOM加载与getContext返回值，并设宽高属性。
HTML5语义化标签不是“换汤不换药”的div重命名
很多人学完 <header></header>、<nav></nav> 就急着套进项目，结果页面结构更混乱了——因为没理解它们是**内容角色声明**，不是样式容器。
-
<main></main>全页只能出现一次，且不能嵌套在<article></article>、<aside></aside>、<footer></footer>里；否则屏幕阅读器会跳过或误读主体内容 -
<section></section>必须配<h1></h1>–<h6></h6>标题，否则语义失效，不如用<div> <li> <code><nav></nav>不是“所有链接集合”，页脚的“隐私政策”链接放进<nav></nav>反而降低可访问性；它只适用于主导航、面包屑、站内搜索入口这类导航意图明确的区域 - 所有语义标签默认块级，但**不带 margin/padding**，别指望它自动撑开间距——该写 CSS 还得写
- 主内容区优先用
display: flex; flex-direction: column处理垂直流（比如文章+评论），比 grid 更易预测高度行为 - 水平导航栏用
display: flex; justify-content: space-around比 float + clear 更干净，也避免父容器塌陷 - Flex 的
flex-wrap: wrap在小屏下自动换行，比 grid 的媒体查询断点更轻量 - 注意：Flex 容器子项的
margin在旧版 Safari（iOS 12–13）有渲染 bug，建议用gap替代 - 无痕模式下、HTTP 协议（非 HTTPS）页面、某些企业内网策略，
localStorage会被静默禁用，setItem不报错但无效 - 存入值超过 5MB（各浏览器略有差异）会抛
QuotaExceededError，必须 try/catch 捕获，否则后续 JS 执行中断 - 对象要先
JSON.stringify()，取出来要JSON.parse()；直接存对象会变成"[object Object]"字符串 - 敏感信息（如 token）不该存在
localStorage，它不防 XSS —— 被恶意脚本document.querySelector('script').innerHTML = 'console.log(localStorage.user)'就能偷走 - 确保 DOM 加载完成再执行：用
DOMContentLoaded事件，或把 script 放在
Flexbox 布局别一上来就 grid-template-columns
新手常把 <main></main> 直接设成 display: grid，再硬塞 grid-template-columns: 1fr 3fr，结果侧边栏错位、响应式崩塌——其实三栏布局用 Flexbox 更稳、更可控。
localStorage.setItem 写进去的数据，可能根本没存上
调用 localStorage.setItem('user', JSON.stringify(data)) 后刷新页面发现空了？不是代码写错了，而是浏览器限制或上下文出问题。
Canvas 绘图前不检查 getContext，等于对空气调用方法
const ctx = document.getElementById('draw').getContext('2d') 返回 null 是最常见错误，但控制台只报 Cannot read property 'fillRect' of null，新人常卡在这儿半天。
立即学习“前端免费学习笔记（深入）”；
