html5布局之路怎么样_浅析html5布局学习路线【经验】

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 还得写

Flexbox 布局别一上来就 grid-template-columns

新手常把 <main></main> 直接设成 display: grid，再硬塞 grid-template-columns: 1fr 3fr，结果侧边栏错位、响应式崩塌——其实三栏布局用 Flexbox 更稳、更可控。

• 主内容区优先用 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 替代

localStorage.setItem 写进去的数据，可能根本没存上

调用 localStorage.setItem('user', JSON.stringify(data)) 后刷新页面发现空了？不是代码写错了，而是浏览器限制或上下文出问题。

• 无痕模式下、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)' 就能偷走

Canvas 绘图前不检查 getContext，等于对空气调用方法

const ctx = document.getElementById('draw').getContext('2d') 返回 null 是最常见错误，但控制台只报 Cannot read property 'fillRect' of null，新人常卡在这儿半天。

立即学习 “ 前端免费学习笔记（深入）”；

• 确保 DOM 加载完成再执行：用 DOMContentLoaded 事件，或把 script 放在