HTML5与HTML4主要差异有哪些？新旧版本核心特性详解对比？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1044个文字，预计阅读时间需要5分钟。
最直接的方案：
注意两个坑：
• IE8 及更早版本遇到 <!DOCTYPE html> 会触发标准模式，但若漏写或写错（比如多空格、大小写混用），可能意外掉进怪异模式，布局全乱；
• <meta charset> 必须放在 <head> 最前面，否则部分浏览器（尤其是旧版 Safari）可能忽略它，导致中文变问号。
<header>、<nav> 这些标签不是“高级 div”，它们有真实语义约束
很多人把 <header> 当成 <div class="header"> 的语法糖，其实不是。这些标签会影响 DOM 结构、辅助技术识别逻辑，甚至搜索引擎提取内容的方式。
-
<main>在整个页面中只能出现一次，且不能嵌套在<article>、<aside>、<footer>、<header>或<nav>内部 -
<nav>应该包裹的是“主要导航链接集合”，比如顶部菜单、侧边栏跳转入口；页脚里一堆友情链接不算，RSS 订阅按钮也不算 -
<article>和<section>不可互换：<article>强调内容可独立分发（如一篇博客、一条新闻），<section>只是逻辑分组（如“评论区”“相关推荐”），且必须配合<h1>–<h6>使用才能体现层级
滥用语义标签不会报错，但会让屏幕阅读器读出混乱结构，也削弱 SEO 效果——搜索引擎现在真会按语义解析标题层级和内容权重。
立即学习“前端免费学习笔记（深入）”；
表单验证不是“加个属性就完事”，pattern 和 type="date" 有兼容性陷阱
HTML5 表单控件看着省事，但实际项目里最容易翻车：
-
<input type="email">只校验基础格式（a@b.c算通过），不发请求验邮箱是否存在；required在 iOS Safari 上有时不触发弹窗提示 -
<input pattern="[0-9]{6}">的正则不支持\p{Han}这类 Unicode 属性类，只认 JS 正则基础语法；而且 pattern 错误时默认提示是英文，得靠setCustomValidity()手动覆盖 -
<input type="date">在 Safari 和旧版 Android 浏览器里直接退化成普通文本框，没有日期选择器——必须搭配 JS fallback（比如 flatpickr）才可靠
别指望纯 HTML5 表单验证能替代后端校验，它只是第一道用户体验过滤器，不是安全边界。
本地存储用 localStorage 前，先想清楚“永久”有多久
HTML4 只能靠 cookie 存点小数据，HTML5 的 localStorage 看起来很美，但现实很骨感：
- 容量约 5–10MB（各浏览器不同），但存大量 JSON 容易触发 QuotaExceededError
- 数据是字符串，存对象得手动
JSON.stringify()，取出来得JSON.parse()，忘了这步会默默失败 - 所谓“永久”是指除非用户主动清除，否则一直存在——但隐私模式下每次关闭窗口就清空；某些国产浏览器还默认禁用
localStorage（需用户授权） -
sessionStorage比localStorage更容易被误用：它按 tab 页隔离，同一网站开两个 tab，彼此的sessionStorage完全不互通
真正需要持久化关键状态时，别只依赖前端存储——它太不可控，该发请求存后端还得存。
本文共计1044个文字，预计阅读时间需要5分钟。
最直接的方案：
注意两个坑：
• IE8 及更早版本遇到 <!DOCTYPE html> 会触发标准模式，但若漏写或写错（比如多空格、大小写混用），可能意外掉进怪异模式，布局全乱；
• <meta charset> 必须放在 <head> 最前面，否则部分浏览器（尤其是旧版 Safari）可能忽略它，导致中文变问号。
<header>、<nav> 这些标签不是“高级 div”，它们有真实语义约束
很多人把 <header> 当成 <div class="header"> 的语法糖，其实不是。这些标签会影响 DOM 结构、辅助技术识别逻辑，甚至搜索引擎提取内容的方式。
-
<main>在整个页面中只能出现一次，且不能嵌套在<article>、<aside>、<footer>、<header>或<nav>内部 -
<nav>应该包裹的是“主要导航链接集合”，比如顶部菜单、侧边栏跳转入口；页脚里一堆友情链接不算，RSS 订阅按钮也不算 -
<article>和<section>不可互换：<article>强调内容可独立分发（如一篇博客、一条新闻），<section>只是逻辑分组（如“评论区”“相关推荐”），且必须配合<h1>–<h6>使用才能体现层级
滥用语义标签不会报错，但会让屏幕阅读器读出混乱结构，也削弱 SEO 效果——搜索引擎现在真会按语义解析标题层级和内容权重。
立即学习“前端免费学习笔记（深入）”；
表单验证不是“加个属性就完事”，pattern 和 type="date" 有兼容性陷阱
HTML5 表单控件看着省事，但实际项目里最容易翻车：
-
<input type="email">只校验基础格式（a@b.c算通过），不发请求验邮箱是否存在；required在 iOS Safari 上有时不触发弹窗提示 -
<input pattern="[0-9]{6}">的正则不支持\p{Han}这类 Unicode 属性类，只认 JS 正则基础语法；而且 pattern 错误时默认提示是英文，得靠setCustomValidity()手动覆盖 -
<input type="date">在 Safari 和旧版 Android 浏览器里直接退化成普通文本框，没有日期选择器——必须搭配 JS fallback（比如 flatpickr）才可靠
别指望纯 HTML5 表单验证能替代后端校验，它只是第一道用户体验过滤器，不是安全边界。
本地存储用 localStorage 前，先想清楚“永久”有多久
HTML4 只能靠 cookie 存点小数据，HTML5 的 localStorage 看起来很美，但现实很骨感：
- 容量约 5–10MB（各浏览器不同），但存大量 JSON 容易触发 QuotaExceededError
- 数据是字符串，存对象得手动
JSON.stringify()，取出来得JSON.parse()，忘了这步会默默失败 - 所谓“永久”是指除非用户主动清除，否则一直存在——但隐私模式下每次关闭窗口就清空；某些国产浏览器还默认禁用
localStorage（需用户授权） -
sessionStorage比localStorage更容易被误用：它按 tab 页隔离，同一网站开两个 tab，彼此的sessionStorage完全不互通
真正需要持久化关键状态时，别只依赖前端存储——它太不可控，该发请求存后端还得存。