解决了 HTML4 中仅靠 <div class="header"> 无意义嵌套的问题，让页面结构更清晰（利于 SEO、后期维护），是定制网站「结构化布局」的基础。
✅ 定制建站优势：比如做电商网站时，用 <article> 包裹商品卡片，<nav> 做分类导航，搜索引擎能更精准识别内容结构，提升 SEO 排名。
- 核心属性：
controls（显示播放控件）、autoplay（自动播放，需配合 muted 静音）、loop（循环）、poster（加载前封面图）、preload（预加载策略）。
- 兼容性：支持 MP4（推荐）、WebM 格式，覆盖所有现代浏览器。
- 核心属性：同
<video>，支持 MP3、WAV 格式，适合定制网站的「语音导航、背景音效」。
<track>：为视频 / 音频添加字幕（如多语言字幕、产品讲解字幕）。<audio>：内联音频（隐藏控件，适合短音效，如按钮点击声）。
解决了 Cookie 存储量小（仅 4KB）、安全性差的问题，适合定制网站的「用户偏好记忆、离线数据缓存、表单暂存」等场景。
✅ 示例（本地存储用户主题偏好）：
HTML5 新增了多种表单类型和属性，原生支持验证、提示，无需额外写 JS，适合定制网站的「注册、登录、报名、下单」等表单场景。
.
required：必填项（原生提示「请填写此字段」）。placeholder：输入提示文本（如 “请输入手机号”）。pattern：自定义正则验证（如手机号 pattern="1[3-9]\d{9}"）。disabled/readonly：禁用 / 只读状态。multiple：允许选择多个值（如文件上传 type="file" multiple）。form：关联指定表单（无需嵌套在 <form> 内，灵活布局）。
✅ 示例（定制网站注册表单核心字段）：
原生支持绘图、拖放、地理位置等交互，无需依赖第三方库，适合定制网站的「数据可视化、互动营销、个性化功能」。
- 用途：动态绘制图表、动画、小游戏、自定义图形（如产品流程图、数据报表）。
- 核心：通过 JS 操作像素，适合位图绘制（放大失真）。
- 示例（绘制简单图表）：
- 用途：图标、Logo、地图（放大不失真），适合定制网站的「品牌图标、动态图标」。
- 区别于 Canvas：SVG 是 XML 格式，可直接用 CSS/JS 修改样式 / 动画。
- 示例（简单图标）：
- 拖放 API：通过
draggable="true" 实现元素拖拽（如定制网站的「购物车拖拽添加、自定义排序」）。
- Geolocation 地理位置：获取用户位置（需授权），适合「本地服务推荐、同城配送」等定制功能。
- Web Workers：后台线程处理耗时操作（如大数据计算、文件解析），避免页面卡顿（适合定制网站的「批量导入、数据统计」）。
- WebSocket：实时通信（如在线客服、订单实时通知），无需轮询，降低服务器压力。
<picture>：根据屏幕尺寸加载不同图片（适配移动端，减少带宽消耗）：
srcset+sizes：图片自适应（替代复杂的 CSS 适配）。
manifest.json：定义网站图标、启动页、全屏模式，让网页像 App 一样（适合定制「企业官网 PWA、工具类网站」）。Service Worker：拦截网络请求，实现离线访问、缓存资源（提升弱网环境体验）。
crossorigin：控制跨域资源共享（如跨域图片、脚本的权限）。sandbox：iframe 沙箱模式（限制嵌入页面的权限，防止恶意代码）。
- 优先用语义化标签：不仅利于 SEO，后期修改布局时无需重构大量代码（如调整导航栏，直接操作
<nav> 即可）。
- 表单用 HTML5 原生类型：减少 JS 验证代码，同时提升移动端体验（如数字键盘、日期选择器）。
- 本地存储谨慎存敏感数据：
localStorage 明文存储，不适合存密码，可存用户偏好、非敏感缓存。
- 多媒体优先用
<video>/<audio>：替代 Flash，兼容性更好，且支持响应式适配。
- 复杂交互选对技术：简单图表用 Canvas，图标用 SVG，实时功能用 WebSocket。
