html5是标记规则而非编程语言,零基础两天可上手;input需理清type、name与form关系;localstorage只存字符串,须json序列化;canvas动画需requestanimationframe和离屏渲染;doctype声明缺一不可。

HTML5 不是需要“系统学习”的编程语言,它是一套标记规则,零基础两天就能写出可用页面——关键不在学多少,而在从第一天就写真实片段、立刻在浏览器里看效果。
怎么用 <input> 才不被表单提交搞懵
很多人卡在点按钮没反应、值取不到、类型乱跳,本质是没理清 type、name 和表单上下文的关系。
-
type决定输入控件行为(text、email、number),但不决定后端能否收到——name属性才是提交时的键名,没写name就等于没提交 - 单独的
<input>不会触发任何提交;必须包在<form></form>里,或用form属性指向一个表单 ID -
type="button"是纯 UI 按钮,不参与表单逻辑;要提交得用type="submit"或绑定 JS 的click事件 - 移动端对
type="tel"、type="email"会调起对应键盘,但校验仍需 JS 或后端补全——浏览器只做基础格式提示,不阻断提交
为什么 localStorage 存进去又读不出来
不是 API 坏了,是它只接受字符串,而新手常直接塞对象或数字进去,存的是 [object Object] 或 NaN。
- 存对象前必须
JSON.stringify(),读出来后必须JSON.parse(),漏一步就得到空或报错 - 容量约 5MB,但超出会静默失败(
setItem抛QuotaExceededError),建议加 try/catch - 不同协议、子域、无痕窗口之间完全隔离,
http://a.com存的在https://a.com里读不到 - 它不触发跨 tab 同步事件,改了值,其他打开的同源页面不会自动更新——要用
storage事件监听
Canvas 动画卡顿,是不是硬件不行
大概率不是。Canvas 帧率掉到 30fps 以下,90% 是因为重复创建路径、没用 requestAnimationFrame、或每帧都重绘整个画布。
立即学习“前端免费学习笔记(深入)”;
- 清屏别用
clearRect(0,0,w,h)硬擦,先save(),画完restore();复杂场景用离屏 canvas 预渲染图元 - 动画循环必须用
requestAnimationFrame,不用setTimeout或setInterval——后者不和屏幕刷新同步,容易撕裂或掉帧 - 避免在绘制循环里频繁调用
getContext('2d'),它返回的对象可复用 - 文字绘制比图形慢很多,
fillText多次调用比拼成一个字符串再画更耗时
最常被跳过的其实是文档类型声明: 必须顶格写在第一行,少一个字符或前面有空格,浏览器就进 quirks mode,CSS 盒模型、JS 行为全变样——这种问题查三天,修复只要十秒。










