元素语义化

元素语义化好处

• 利于 SEO（搜索引擎优化）
• 利于无障碍访问
• 利于浏览器的插件分析网页

HTML5 标签含义之元素周期表

资源提示符

优化网页性能，减少加载时间

• async：异步加载 JS，加载完立即执行（适用于独立、不依赖 DOM 的脚本）
• defer：异步加载 JS，DOM 解析后按顺序执行（适用于需要按顺序执行的 JS）
• preload：预加载当前页面关键资源（字体、CSS、JS、视频）
• prefetch：预取未来可能需要的资源（下一页的 JS、CSS、图片等）
• dns-prefetch：提前解析域名（适用于跨域资源，如 CDN）
• preconnect：提前建立连接（适用于远程 API、CDN 资源）
• prerender：预渲染整个页面（适用于高概率访问的下一页）

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

<link rel="prefetch" href="next-page.js">

<link rel="dns-prefetch" href="//cdn.example.com">

<link rel="preconnect" href="https://cdn.example.com">

<link rel="prerender" href="https://example.com/next-page">

<script src="script.js" async></script>
<script src="script.js" defer></script>