HTML4与HTML5浏览器兼容差异解析

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《HTML4与HTML5浏览器要求不同，老浏览器部分支持HTML5。》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

HTML4兼容IE6+等老浏览器，HTML5则要求IE9+；老浏览器需通过DOCTYPE、HTML5 Shiv和特性检测实现有限兼容，但核心API无法真正支持。

HTML4 和 HTML5 对浏览器要求完全不同

HTML4 能在 IE6+、Firefox 2+、Chrome 早期版等几乎一切“能叫浏览器”的环境里跑起来；HTML5 则明确要求现代解析能力——IE9 是分水岭，IE8 及以下基本不认 article、section、video 等语义标签，连 document.querySelector 都可能报错。

老浏览器（如 IE6–IE8）能“用”HTML5 吗？能，但必须垫底

所谓“能用”，是指：页面不会白屏、基础内容仍可读，但新特性不会生效。关键靠三件事撑住：

• 必须写在第一行——它让 IE6–IE8 进入“准标准模式”，避免触发更糟的怪异模式
• 语义标签（如 nav、header）需用 HTML5 Shiv 注入 DOM 支持：

  <!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
  <![endif]-->

• 所有新 API（如 localStorage、canvas.getContext、input[type="date"]）必须先检测再调用：

  if ('localStorage' in window) {
    localStorage.setItem('key', 'value');
  } else {
    // 降级到 cookie 或隐藏该功能
  }

哪些 HTML5 特性在老浏览器里“假装存在”但实际失效？

很多属性看似写了就起作用，实则被静默忽略——开发者容易误判兼容性：

• required、placeholder、autofocus 在 IE9 以下完全无效，表单提交照样通过，前端校验必须手写
• audio 和 video 标签会被解析为未知元素，但可通过