HTML5是浏览器原生支持的现代网页标准，需严格遵循文档结构三要求：DOCTYPE必须首行小写无空格、html标签须含lang属性、meta charset须在head内靠前；语义化标签影响SEO与可访问性；多媒体标签需兼容格式与属性；其价值在于结构、样式、脚本协同及降级友好设计。
HTML5 文档结构必须写对的三处硬性要求
很多初学者页面乱码、样式错位、移动端缩放异常，根源都在文档开头没写准：
-
<!DOCTYPE html>必须是文件第一行，且严格小写、无空格、无引号；写成<!doctype HTML>或漏掉会触发怪异模式（Quirks Mode） -
<html lang="zh-CN">中的lang属性虽不报错，但缺失会导致屏幕阅读器语调错误、SEO 语义降权 -
<meta charset="UTF-8">必须在<head>内且靠前；放在<title>后面可能让中文标题显示为方块
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个HTML5页面</title> </head> <body> <header><h1>欢迎</h1></header> </body> </html>
语义化标签不是“换汤不换药”，而是影响 DOM 和 SEO 的底层结构
用 <div class="header"> 和用 <header> 渲染效果可能一样，但机器理解完全不同：
- 搜索引擎爬虫把
<main>当作唯一主体内容区，多个<main>会降低页面权重 -
<nav>被屏幕阅读器识别为导航区，用户可一键跳转；<div class="nav">则完全不可访问 -
<section>需配合<h2>–<h6>使用才有层级语义，单独用等于白用
多媒体标签 <video> 和 <audio> 不是“贴上去就能播”
直接写 <video src="demo.mp4"></video> 在部分安卓机或 Safari 上大概率静音/黑屏，原因很实际：
- 缺少
controls属性：用户看不到播放控件，误以为没加载 - 未提供备用格式：MP4（H.264+AAC）兼容最好，但 WebM 更省带宽；建议双源写法
- 自动播放限制：Chrome/Safari 要求
muted+autoplay才允许静音自动播
<video controls autoplay muted> <source src="demo.mp4" type="video/mp4"> <source src="demo.webm" type="video/webm"> 您的浏览器不支持 video 标签。 </video>
别把 HTML5 当成“功能堆砌”，它的价值在约束与协同
HTML5 本身不提供动画、校验逻辑或存储封装——它只定义 <input type="email"> 这样的语义输入类型，而校验行为由浏览器决定；它暴露 localStorage 接口，但不负责加密或同步。
立即学习“前端免费学习笔记（深入）”；
真正起作用的是三者咬合：<form> 结构 + CSS3 :valid/:invalid 伪类 + JavaScript 的 checkValidity() 方法。脱离任一环，所谓“HTML5 表单增强”就只剩一个好看的 placeholder。
最容易被忽略的一点：HTML5 的所有新特性都默认“降级友好”——<canvas> 里写文字，老浏览器就显示那段文字；<header> 在 IE8 里就是普通块级元素。这不是巧合，是设计前提。强行用 Modernizr 做“有无检测”再加载 polyfill，反而破坏了这个前提。
