HTML5是重写规范的全新起点，非HTML4补丁
先明确一个核心认知：HTML5绝非HTML4的简单“升级补丁”。它是经过重写规范后的全新起点。这意味着，两者在浏览器的解析逻辑上存在本质差异，甚至部分内容并不兼容。如果直接将旧写法混入新标准，很可能触发浏览器的“怪异模式”，导致布局莫名其妙错乱，或者某些API干脆无法使用。
DOCTYPE 和字符编码声明怎么写才不掉坑
还记得HTML4时代那令人头疼的DOCTYPE吗？Strict、Transitional、Frameset三种变体，必须带着长长的完整URL，一旦写错或漏掉，浏览器立刻“摆烂”降级到怪异模式。到了HTML5，这一切被彻底简化：统一为 。它大小写不敏感，但切记，除了这短短几个字符，别画蛇添足加任何注释或空格。
字符编码的声明也迎来了“瘦身”。过去你得写 ，而现在，一句简洁的 就搞定了。需要注意的是，新旧写法最好不要共存，否则一些老式浏览器可能会“认旧弃新”，忽略掉更简洁的新声明。
语义化标签不是“换汤不换药”，而是影响 DOM 结构和可访问性
在HTML4里，我们几乎用 搭建一切。但这对于屏幕阅读器和搜索引擎来说，就像面对一堆没有标签的盒子，完全不知道里面装的是什么。HTML5引入的 、、 等语义化标签，彻底改变了这一局面。
这些标签自带隐含的ARIA角色，会直接影响DOM树的层级结构，并明确告知辅助技术：“这里是导航”、“那里是独立文章”。不过，使用时有几个细节必须留意： 必须包含一个标题（–），否则其语义会失效； 可以嵌套使用，但 这个标签，在整个页面中全局只能出现一次。
表单和多媒体标签不用再拼插件或 hack
过去，想在HTML4里实现一个邮箱输入框的校验，得写一堆Ja vaScript正则表达式，再手动拼上提示文案。现在呢？直接使用 type="email" 就行。类似的，type="date"、type="number" 等类型，不仅能原生触发输入约束，还能在移动端自动适配更友好的软键盘。
音视频播放也终于摆脱了对Flash等插件的依赖。一个 或 标签就能搞定播放。当然，格式兼容性仍是需要关注的现实问题，比如Safari不支持WebM格式，而老旧的IE则完全不支持这些新标签。另外， 这个位图绘制接口，常被拿来和SVG比较。其实它们定位不同： 更适合动态图形渲染，比如游戏或图表；而SVG作为矢量图形，则在缩放无损的图标领域更具优势。
立即学习“前端免费学习笔记（深入）”；
localStorage 和 sessionStorage 替代 Cookie 要小心作用域和容量
在数据存储方面，HTML4时代几乎只能依赖 document.cookie。它容量小，而且每次HTTP请求都会自动携带，无形中增加了流量负担。HTML5带来了 localStorage 和 sessionStorage 这两个纯前端的键值存储方案，容量通常能达到5-10MB，且数据不会随请求自动发送。
但替换Cookie时，有几个关键区别必须小心：sessionStorage 的生命周期仅限于当前标签页，关闭即清空；而 localStorage 会持久存在，但它没有自动过期机制——你需要自己用时间戳字段来管理有效期。还有一点，它们都只接受字符串，如果要存储对象，务必先使用 JSON.stringify() 进行转换。
最后，提一个最容易被忽略的细节：HTML5解析器允许省略某些结束标签（比如 、）。但这仅仅是解析器的宽容行为，绝非语法上的自由。如果省略后嵌套逻辑不正确，代码可能看似能运行，但实际生成的DOM树结构可能已经意外扁平化，这会直接影响到后续CSS选择器的匹配或Ja vaScript的查询结果，埋下难以察觉的隐患。
