html5网站都有那个

语义化标签

HTML5引入了更丰富的语义化标签，使网页结构更清晰,便于搜索引擎理解和解析。

• <header>：定义页眉区域
• <nav>：表示导航链接
• <article>：独立的内容块
• <section>：文档中的章节
• <footer>：页脚信息
• <aside>：侧边栏内容

多媒体支持

HTML5原生支持音视频播放，无需依赖第三方插件（如Flash）。
示例代码：

<video src="video.mp4" controls autoplay></video>
<audio src="audio.mp3" controls loop></audio>

图形与动画

• Canvas：通过JavaScript绘制2D/3D图形，适用于游戏、图表等。
• SVG：支持矢量图形，可缩放不失真，适合图标和复杂图形。
• CSS3动画：结合@keyframes实现过渡效果,减少对Flash的依赖。

本地存储与离线应用

HTML5提供本地存储方案，提升用户体验：
| 存储类型 | 特点 |
|—————-|—————————————-|
| localStorage | 长期存储，容量约5MB，需手动清除 |
| sessionStorage | 临时存储，页面关闭后自动清除 |
| IndexedDB | 结构化数据库，支持复杂数据存储 |
| Service Worker | 实现离线缓存、推送通知等功能 |

设备兼容与响应式设计

• Viewport控制：通过<meta name="viewport">适配移动设备。
• 媒体查询：结合CSS3实现不同屏幕尺寸的布局适配。
• 输入类型扩展：新增<input type="color">、type="date"等,提升移动端输入体验。

网络与通信增强

• WebSockets：支持全双工通信，适用于实时聊天、游戏等场景。
• Geolocation API：获取用户地理位置，用于地图导航或定位服务。
• 跨域请求：CORS机制简化跨域数据传输,替代传统JSONP。

相关问题与解答

问题1：HTML5是否已经完全取代Flash？
解答：是的，HTML5通过<video>、<canvas>、WebGL等标签和API，实现了视频播放、动画渲染等功能，且支持移动设备，Adobe已宣布停止更新Flash，主流浏览器也逐步禁用插件,HTML5成为现代网页技术的标准。

问题2：如何检测浏览器是否支持HTML5的某项功能？
解答：可通过以下方法检测：

1. 属性检测：检查元素是否拥有特定属性。

   if (typeof document.createElement('video').canPlayType === 'function') {
       // 支持Video标签
   }

2. 功能测试：尝试调用API并捕获异常。

   try {
       if (localStorage.setItem) {
           // 支持localStorage
       }
   } catch(e) {
       //