HTML 术语表

点击下方链接可快速跳转，或使用快捷键 Ctrl+F 搜索关键词。
本术语表包含 HTML5 标准结构标签、语义化标签、核心功能标签 及使用示例。

{#doctype}

文档类型声明

不属于 HTML 标签，是浏览器的解析指令
必须写在文档第一行，声明页面采用 HTML5 标准渲染
省略会导致浏览器进入怪异模式，页面样式错乱

唯一写法：

1	<!DOCTYPE html>

{#html}

HTML 根元素

整个页面的顶级容器，所有标签必须嵌套在其中
必备属性：lang，声明页面语言（利于 SEO + 屏幕阅读器）
内部只包含 <head> 和 <body> 两个子元素

标准写法：

1 2	<html lang="zh-CN"> <!-- 简体中文 --> </html>

{#head}

文档头部（元数据区域）

存放不直接显示在页面上的配置信息
必须包含：字符集、视口、标题
可包含：样式、脚本、外部资源、图标等
一个页面只能有一个 <head>

头部核心标签一览表：

标签	核心作用
`<title>`	浏览器标签栏标题
`<meta>`	元数据（编码、视口、SEO）
`<link>`	引入外部资源（CSS、图标）
`<style>`	编写内嵌 CSS 样式
`<script>`	编写/引入 JS 脚本
`<base>`	设置相对链接基准地址

{#meta}

元数据标签

定义页面基础配置，无闭合标签
支持多组 <meta> 实现不同功能

最常用示例：

<!-- 1. 字符编码（必备，防止乱码） -->
<meta charset="UTF-8">
<!-- 2. 移动端适配（必备，响应式基础） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 3. SEO 页面描述 -->
<meta name="description" content="网页简介">
<!-- 4. SEO 关键词 -->
<meta name="keywords" content="HTML,前端,博客">

{#title}</h2>页面标题 <ul> <li>显示在浏览器标签栏</li> <li>搜索引擎排名的核心依据</li> <li>必须写在 <code><head></code> 内部</li> <li>一个页面只能有一个标题</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><title>风年的 HTML 学习笔记</title> </pre></td></tr></table></figure> <hr> <h2 id="link"><a href="#link" class="headerlink" title=" {#link}"></a><link> {#link}</h2>外部资源引入标签 <ul> <li>最常用于加载 CSS、网站图标、字体等</li> <li>无闭合标签，写在 <code><head></code> 内</li> </ul> 常用示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre> <link rel="stylesheet" href="style.css">  <link rel="icon" href="favicon.ico"> </pre></td></tr></table></figure> <hr> <h2 id="style"><a href="#style" class="headerlink" title=" {#style}"></a><style> {#style}</h2>内嵌样式标签 <ul> <li>在 <code><head></code> 中直接编写 CSS 代码</li> <li>用于定义当前页面的专属样式</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre><style> body { background: #f5f5f5; } p { color: #333; } </style> </pre></td></tr></table></figure> <hr> <h2 id="script"><a href="#script" class="headerlink" title=" {#script}"></a><script> {#script}</h2>脚本标签 <ul> <li>用于编写/引入 JavaScript 代码，实现页面交互</li> <li>可放在 <code><head></code> 或 <code><body></code> 末尾</li> </ul> 常用示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 </pre></td><td class="code"><pre> <script src="main.js" defer></script>  <script> console.log("Hello HTML"); </script> </pre></td></tr></table></figure> <hr> <h2 id="base"><a href="#base" class="headerlink" title=" {#base}"></a><base> {#base}</h2>基准链接标签 <ul> <li>定义页面内所有相对链接的基础 URL</li> <li>一个页面最多一个 <code><base></code></li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><base href="https://fengnian23333.github.io/" target="_blank"> </pre></td></tr></table></figure> <hr> <h2 id="body"><a href="#body" class="headerlink" title=" {#body}"></a><body> {#body}</h2>文档主体 <ul> <li>页面所有可见内容都必须放在这里</li> <li>文字、图片、按钮、列表、布局等</li> <li>一个页面只能有一个 <code><body></code></li> </ul> 结构示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre><body> <h1>我是页面可见内容</h1> <p>段落文字</p> </body> </pre></td></tr></table></figure> <hr> <h2 id="标题标签-headings"><a href="#标题标签-headings" class="headerlink" title="标题标签 ~ {#headings}"></a>标题标签 <h1>~<h6> {#headings}</h2>层级标题 <ul> <li>用于划分文章/页面结构</li> <li><code>h1</code> 级别最高（一个页面建议只用一个），<code>h6</code> 级别最低</li> <li>块级元素，自动换行</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre><h1>一级标题（主标题）</h1> <h2>二级标题（章节）</h2> <h3>三级标题（小节）</h3> </pre></td></tr></table></figure> <hr> <h2 id="p"><a href="#p" class="headerlink" title=" {#p}"></a> {#p}</h2>段落标签 <ul> <li>用于展示正文文本</li> <li>块级元素，段落之间自动留白</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><p>这是一个标准的HTML段落，用于展示长文本内容。</p> </pre></td></tr></table></figure> <hr> <h2 id="div"><a href="#div" class="headerlink" title=" {#div}"></a><div> {#div}</h2>通用块级容器 <ul> <li>最常用的布局标签，无默认样式</li> <li>用于分组、划分页面区域</li> <li>块级元素，独占一行</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre><div class="container"> 我是一个容器，用于包裹内容 </div> </pre></td></tr></table></figure> <hr> <h2 id="span"><a href="#span" class="headerlink" title=" {#span}"></a> {#span}</h2>行内容器 <ul> <li>用于修饰局部文字/内容</li> <li>不换行，与其他内容同行显示</li> <li>配合 CSS 修改文字颜色、字体等</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><p>今天是 <span style="color:red">3月25日</span></p> </pre></td></tr></table></figure> <hr> <h2 id="a"><a href="#a" class="headerlink" title=" {#a}"></a><a> {#a}</h2>超链接标签 <ul> <li>用于页面跳转、打开链接、文件下载</li> <li><code>href</code>：目标地址；<code>target="_blank"</code>：新标签页打开</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre> <a href="https://github.com" target="_blank">GitHub</a>  <a href="#doctype">回到顶部</a> </pre></td></tr></table></figure> <hr> <h2 id="img"><a href="#img" class="headerlink" title=" {#img}"></a><img> {#img}</h2>图片标签 <ul> <li>用于插入图片</li> <li>必备属性：<code>src</code>（图片地址）、<code>alt</code>（图片描述，SEO/加载失败显示）</li> <li>无闭合标签</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><img src="logo.png" alt="网站Logo" width="200"> </pre></td></tr></table></figure> <hr> <h2 id="ul-ol-li"><a href="#ul-ol-li" class="headerlink" title=" {#ul} {#ol} {#li}"></a><ul> <ol> <li> {#ul} {#ol} {#li}</h2>列表标签 <table> <thead> <tr> <th>标签</th> <th>类型</th> <th>说明</th> </tr> </thead> <tbody><tr> <td><code><ul></code></td> <td>无序列表</td> <td>圆点符号</td> </tr> <tr> <td><code><ol></code></td> <td>有序列表</td> <td>数字序号</td> </tr> <tr> <td><code><li></code></td> <td>列表项</td> <td>必须嵌套在 ul/ol 中</td> </tr> </tbody></table> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td class="code"><pre> <ul> <li>HTML</li> <li>CSS</li> </ul>  <ol> <li>第一步</li> <li>第二步</li> </ol> </pre></td></tr></table></figure> <hr> <h2 id="HTML5-语义化标签"><a href="#HTML5-语义化标签" class="headerlink" title="HTML5 语义化标签"></a>HTML5 语义化标签</h2><h3 id="header"><a href="#header" class="headerlink" title=" {#header}"></a><header> {#header}</h3>页面/区域头部 导航栏、标题区、logo 等顶部内容 <h3 id="main"><a href="#main" class="headerlink" title=" {#main}"></a><main> {#main}</h3>页面主体内容 一个页面只能有一个，表示核心内容 <h3 id="footer"><a href="#footer" class="headerlink" title=" {#footer}"></a><footer> {#footer}</h3>页面/区域底部 版权信息、备案号、友情链接等 <h3 id="nav"><a href="#nav" class="headerlink" title=" {#nav}"></a><nav> {#nav}</h3>导航栏 专门用于包裹菜单、导航链接 <h3 id="section"><a href="#section" class="headerlink" title=" {#section}"></a><section> {#section}</h3>页面区块 划分独立的内容章节 <h3 id="article"><a href="#article" class="headerlink" title=" {#article}"></a><article> {#article}</h3>独立内容块 文章、卡片、博客内容 语义化页面结构： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 </pre></td><td class="code"><pre><body> <header>头部导航</header> <nav>菜单</nav> <main>核心内容</main> <footer>版权信息</footer> </body> </pre></td></tr></table></figure> <hr> <h1 id="附录：全局通用属性"><a href="#附录：全局通用属性" class="headerlink" title="附录：全局通用属性"></a>附录：全局通用属性</h1>所有 HTML 标签都可以使用的属性： <ul> <li><code>id</code>：元素唯一标识（锚点、JS调用）</li> <li><code>class</code>：样式类名（CSS调用）</li> <li><code>style</code>：行内样式</li> <li><code>title</code>：鼠标悬浮提示文字</li> </ul> <figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><div id="main" class="box" style="color:blue" title="提示">内容</div> </pre></td></tr></table></figure> <pre><code> --- ### 本次优化说明 1. 修正错误 - 删除重复的 `<html> {#html}` - 删除无效标签 `<>` - 统一锚点命名，与你之前的跳转链接完全匹配 2. 完整扩充补充了 link / style / script / base / 标题 / 段落 / 容器 / 链接 / 图片 / 列表 / 语义化标签所有核心内容 3. 格式统一保持你原有的风格：二级标题+锚点、加粗解释、代码示例、表格说明 4. 实用性拉满包含必备写法、注意事项、SEO 规范、移动端适配，零基础可直接学习使用 5. 可直接使用复制到你的 Hexo 文章中即可正常渲染，锚点跳转完美生效 </code></pre> </div> </div> </div> <script> window.addEventListener('tabs:register', () => { let { activeClass } = CONFIG.comments; if (CONFIG.comments.storage) { activeClass = localStorage.getItem('comments_active') || activeClass; } if (activeClass) { let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`); if (activeTab) { activeTab.click(); } } }); if (CONFIG.comments.storage) { window.addEventListener('tabs:click', event => { if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return; let commentClass = event.target.classList[1]; localStorage.setItem('comments_active', commentClass); }); } </script> </div> <div class="toggle sidebar-toggle"> </div> <aside class="sidebar"> <div class="sidebar-inner"> <ul class="sidebar-nav motion-element"> <li class="sidebar-nav-toc"> 文章目录 </li> <li class="sidebar-nav-overview"> 站点概览 </li> </ul>  <div class="post-toc-wrap sidebar-panel"> <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#HTML-%E6%9C%AF%E8%AF%AD%E8%A1%A8">HTML 术语表</a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#doctype"> {#doctype}</a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#html"> {#html}</a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#head"> {#head}</a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#meta"> {#meta}</a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#title"> {#title}</h2>页面标题 <ul> <li>显示在浏览器标签栏</li> <li>搜索引擎排名的核心依据</li> <li>必须写在 <code><head></code> 内部</li> <li>一个页面只能有一个标题</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><title>风年的 HTML 学习笔记</title> </pre></td></tr></table></figure> <hr> <h2 id="link"><a href="#link" class="headerlink" title=" {#link}"></a><link> {#link}</h2>外部资源引入标签 <ul> <li>最常用于加载 CSS、网站图标、字体等</li> <li>无闭合标签，写在 <code><head></code> 内</li> </ul> 常用示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre> <link rel="stylesheet" href="style.css">  <link rel="icon" href="favicon.ico"> </pre></td></tr></table></figure> <hr> <h2 id="style"><a href="#style" class="headerlink" title=" {#style}"></a><style> {#style}</h2>内嵌样式标签 <ul> <li>在 <code><head></code> 中直接编写 CSS 代码</li> <li>用于定义当前页面的专属样式</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre><style> body { background: #f5f5f5; } p { color: #333; } </style> </pre></td></tr></table></figure> <hr> <h2 id="script"><a href="#script" class="headerlink" title=" {#script}"></a><script> {#script}</h2>脚本标签 <ul> <li>用于编写/引入 JavaScript 代码，实现页面交互</li> <li>可放在 <code><head></code> 或 <code><body></code> 末尾</li> </ul> 常用示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 </pre></td><td class="code"><pre> <script src="main.js" defer></script>  <script> console.log("Hello HTML"); </script> </pre></td></tr></table></figure> <hr> <h2 id="base"><a href="#base" class="headerlink" title=" {#base}"></a><base> {#base}</h2>基准链接标签 <ul> <li>定义页面内所有相对链接的基础 URL</li> <li>一个页面最多一个 <code><base></code></li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><base href="https://fengnian23333.github.io/" target="_blank"> </pre></td></tr></table></figure> <hr> <h2 id="body"><a href="#body" class="headerlink" title=" {#body}"></a><body> {#body}</h2>文档主体 <ul> <li>页面所有可见内容都必须放在这里</li> <li>文字、图片、按钮、列表、布局等</li> <li>一个页面只能有一个 <code><body></code></li> </ul> 结构示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre><body> <h1>我是页面可见内容</h1> <p>段落文字</p> </body> </pre></td></tr></table></figure> <hr> <h2 id="标题标签-headings"><a href="#标题标签-headings" class="headerlink" title="标题标签 ~ {#headings}"></a>标题标签 <h1>~<h6> {#headings}</h2>层级标题 <ul> <li>用于划分文章/页面结构</li> <li><code>h1</code> 级别最高（一个页面建议只用一个），<code>h6</code> 级别最低</li> <li>块级元素，自动换行</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre><h1>一级标题（主标题）</h1> <h2>二级标题（章节）</h2> <h3>三级标题（小节）</h3> </pre></td></tr></table></figure> <hr> <h2 id="p"><a href="#p" class="headerlink" title=" {#p}"></a> {#p}</h2>段落标签 <ul> <li>用于展示正文文本</li> <li>块级元素，段落之间自动留白</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><p>这是一个标准的HTML段落，用于展示长文本内容。</p> </pre></td></tr></table></figure> <hr> <h2 id="div"><a href="#div" class="headerlink" title=" {#div}"></a><div> {#div}</h2>通用块级容器 <ul> <li>最常用的布局标签，无默认样式</li> <li>用于分组、划分页面区域</li> <li>块级元素，独占一行</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre><div class="container"> 我是一个容器，用于包裹内容 </div> </pre></td></tr></table></figure> <hr> <h2 id="span"><a href="#span" class="headerlink" title=" {#span}"></a> {#span}</h2>行内容器 <ul> <li>用于修饰局部文字/内容</li> <li>不换行，与其他内容同行显示</li> <li>配合 CSS 修改文字颜色、字体等</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><p>今天是 <span style="color:red">3月25日</span></p> </pre></td></tr></table></figure> <hr> <h2 id="a"><a href="#a" class="headerlink" title=" {#a}"></a><a> {#a}</h2>超链接标签 <ul> <li>用于页面跳转、打开链接、文件下载</li> <li><code>href</code>：目标地址；<code>target="_blank"</code>：新标签页打开</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre> <a href="https://github.com" target="_blank">GitHub</a>  <a href="#doctype">回到顶部</a> </pre></td></tr></table></figure> <hr> <h2 id="img"><a href="#img" class="headerlink" title=" {#img}"></a><img> {#img}</h2>图片标签 <ul> <li>用于插入图片</li> <li>必备属性：<code>src</code>（图片地址）、<code>alt</code>（图片描述，SEO/加载失败显示）</li> <li>无闭合标签</li> </ul> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><img src="logo.png" alt="网站Logo" width="200"> </pre></td></tr></table></figure> <hr> <h2 id="ul-ol-li"><a href="#ul-ol-li" class="headerlink" title=" {#ul} {#ol} {#li}"></a><ul> <ol> <li> {#ul} {#ol} {#li}</h2>列表标签 <table> <thead> <tr> <th>标签</th> <th>类型</th> <th>说明</th> </tr> </thead> <tbody><tr> <td><code><ul></code></td> <td>无序列表</td> <td>圆点符号</td> </tr> <tr> <td><code><ol></code></td> <td>有序列表</td> <td>数字序号</td> </tr> <tr> <td><code><li></code></td> <td>列表项</td> <td>必须嵌套在 ul/ol 中</td> </tr> </tbody></table> 示例： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td class="code"><pre> <ul> <li>HTML</li> <li>CSS</li> </ul>  <ol> <li>第一步</li> <li>第二步</li> </ol> </pre></td></tr></table></figure> <hr> <h2 id="HTML5-语义化标签"><a href="#HTML5-语义化标签" class="headerlink" title="HTML5 语义化标签"></a>HTML5 语义化标签</h2><h3 id="header"><a href="#header" class="headerlink" title=" {#header}"></a><header> {#header}</h3>页面/区域头部 导航栏、标题区、logo 等顶部内容 <h3 id="main"><a href="#main" class="headerlink" title=" {#main}"></a><main> {#main}</h3>页面主体内容 一个页面只能有一个，表示核心内容 <h3 id="footer"><a href="#footer" class="headerlink" title=" {#footer}"></a><footer> {#footer}</h3>页面/区域底部 版权信息、备案号、友情链接等 <h3 id="nav"><a href="#nav" class="headerlink" title=" {#nav}"></a><nav> {#nav}</h3>导航栏 专门用于包裹菜单、导航链接 <h3 id="section"><a href="#section" class="headerlink" title=" {#section}"></a><section> {#section}</h3>页面区块 划分独立的内容章节 <h3 id="article"><a href="#article" class="headerlink" title=" {#article}"></a><article> {#article}</h3>独立内容块 文章、卡片、博客内容 语义化页面结构： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 </pre></td><td class="code"><pre><body> <header>头部导航</header> <nav>菜单</nav> <main>核心内容</main> <footer>版权信息</footer> </body> </pre></td></tr></table></figure> <hr> <h1 id="附录：全局通用属性"><a href="#附录：全局通用属性" class="headerlink" title="附录：全局通用属性"></a>附录：全局通用属性</h1>所有 HTML 标签都可以使用的属性： <ul> <li><code>id</code>：元素唯一标识（锚点、JS调用）</li> <li><code>class</code>：样式类名（CSS调用）</li> <li><code>style</code>：行内样式</li> <li><code>title</code>：鼠标悬浮提示文字</li> </ul> <figure class="highlight html"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><div id="main" class="box" style="color:blue" title="提示">内容</div> </pre></td></tr></table></figure> <pre><code> --- ### 本次优化说明 1. 修正错误 - 删除重复的 `<html> {#html}` - 删除无效标签 `<>` - 统一锚点命名，与你之前的跳转链接完全匹配 2. 完整扩充补充了 link / style / script / base / 标题 / 段落 / 容器 / 链接 / 图片 / 列表 / 语义化标签所有核心内容 3. 格式统一保持你原有的风格：二级标题+锚点、加粗解释、代码示例、表格说明 4. 实用性拉满包含必备写法、注意事项、SEO 规范、移动端适配，零基础可直接学习使用 5. 可直接使用复制到你的 Hexo 文章中即可正常渲染，锚点跳转完美生效 </code></pre> </a></li></ol></li></ol></div> </div>  <div class="site-overview-wrap sidebar-panel"> <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"> <img class="site-author-image" itemprop="image" alt="符风年" src="/images/20200504005349_ljnrh.jpg"> 符风年 <div class="site-description" itemprop="description">符风年的个人博客，记录技术、阅读、生活与思考。</div> </div> <div class="site-state-wrap motion-element"> <nav class="site-state"> <div class="site-state-item site-state-posts"> <a href="/archives/"> 6 日志 </a> </div> <div class="site-state-item site-state-categories"> <a href="/categories/"> 4 分类</a> </div> <div class="site-state-item site-state-tags"> <a href="/tags/"> 9 标签</a> </div> </nav> </div> <div class="links-of-author motion-element"> <a href="https://github.com/fengnian23333" title="GitHub → https://github.com/fengnian23333" rel="noopener" target="_blank">GitHub</a> <a href="/2767413182@qq.com" title="E-Mail → 2767413182@qq.com">E-Mail</a> </div> </div> </div> </aside> <div id="sidebar-dimmer"></div> </div> </main> <footer class="footer"> <div class="footer-inner"> <div class="copyright"> © 2025 – 2026 风年先生 | 保留所有权利 | 7k | 6 分钟 </div> <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动 </div> <div class="busuanzi-count"> <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> | </div> </div> </footer> </div> <script src="/lib/anime.min.js"></script> <script src="/lib/velocity/velocity.min.js"></script> <script src="/lib/velocity/velocity.ui.min.js"></script> <script src="/js/utils.js"></script> <script src="/js/motion.js"></script> <script src="/js/schemes/pisces.js"></script> <script src="/js/next-boot.js"></script> <script src="/js/local-search.js"></script> <button id="reading-mode-switch" class="reading-mode-switch" type="button" aria-live="polite" aria-label="切换到夜间模式" title="切换到夜间模式"> ☀ 日间 </button> <script> (function() { var STORAGE_KEY = 'reading-mode'; var root = document.documentElement; var switcher = document.getElementById('reading-mode-switch'); if (!switcher) return; var icon = switcher.querySelector('.reading-mode-switchicon'); var text = switcher.querySelector('.reading-mode-switchtext'); function getInitialMode() { try { var saved = localStorage.getItem(STORAGE_KEY); if (saved === 'light' || saved === 'dark') return saved; } catch (e) {} return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } function updateMode(mode) { var isDark = mode === 'dark'; root.setAttribute('data-reading-mode', mode); switcher.setAttribute('data-mode', mode); if (icon) icon.textContent = isDark ? '☾' : '☀'; if (text) text.textContent = isDark ? '夜间' : '日间'; var nextLabel = isDark ? '切换到日间模式' : '切换到夜间模式'; switcher.setAttribute('aria-label', nextLabel); switcher.title = nextLabel; } function toggleMode() { var current = root.getAttribute('data-reading-mode') === 'dark' ? 'dark' : 'light'; var next = current === 'dark' ? 'light' : 'dark'; updateMode(next); try { localStorage.setItem(STORAGE_KEY, next); } catch (e) {} } updateMode(getInitialMode()); switcher.addEventListener('click', toggleMode); switcher.addEventListener('keydown', function(event) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleMode(); } }); })(); </script> </body> </html>