HTML5语义化
nav（定义导航栏）
data-fetch-key:通常用于唯一标识一个数据请求，以便于管理和缓存- style="display:none"
- 当前页面导航栏被隐藏
- 取消隐藏后可以看到设计的导航栏，说明此处有显示的交互条件
data-vue-ssr-id:在使用 Vue.js 进行服务器端渲染时，由 Vue 服务器端渲染器自动生成的一个属性，用于唯一标识 DOM 中的每个节点。在服务器端渲染的过程中，Vue 会将组件渲染成 HTML 字符串，并将其发送给客户端。客户端接收到这些 HTML 后，Vue.js 会接管页面，将其变成一个动态的单页应用。在这个过程中，data-vue-ssr-id属性确保了服务器端渲染的 HTML 能够正确地与客户端的 Vue 实例相匹配，使得客户端能够恢复服务器端渲染的状态，包括数据和组件的层次结构。 简而言之，data-vue-ssr-id是 Vue SSR 中用于连接服务器端和客户端渲染过程的重要机制，它帮助客户端正确地“复活”服务器端渲染的静态 HTML，使其变成一个完整的、可交互的 Vue 应用。
section（定义文档中的区段）
在HTML5中，<section>标签是一个语义化的标签，用于定义文档中的一个独立的区段或部分。它通常包含一个标题和一些内容，这些内容共同构成了文档中的一个主题区域。
SSR框架
可以发现网页采用了SSR（服务器端渲染），由框架与构建工具配合，并依据一定的项目结构和编码方式，共同运。在SSR框架中，当用户请求一个页面时，服务器会根据请求的URL渲染对应的HTML模板，并包含实际内容。然后，服务器将这个静态的HTML页面发送给客户端。客户端接收到HTML后，会执行JavaScript来“激活”页面，使其变得可交互。
稀土掘金的首页应该就采用了SSR+CSR混合模式，静态展示的内容采用 SSR，动态获取的内容采用CSR。刷新时可以看到nav和侧边栏有数据的，而中间的内容则动态获取。
- 实现一个简单的"Hello,World"
此处采用外部JavaScript文件的方式，将JavaScript代码放在单独的文件中，然后在HTML文件中引用该文件。除此之外还可以采用内联事件处理器（在HTML元素中直接使用JavaScript代码）、内联事件属性（在HTML元素中使用
on前缀和事件名称）、DOM操作（通过JavaScript操作HTML文档结构）等方法。
