登录
推荐 文章 Go 技术 课程 下载 专题 AI
首页 >  文章 >  前端

HTML添加作者信息及元数据设置技巧

时间:2026-03-26 19:53:32 206浏览 收藏

本文深入讲解了在HTML中全面、规范地声明作者信息及设置多维度元数据的实用技巧,涵盖从基础的``标签配置,到JSON-LD结构化数据(schema.org/Person)、HTTP Author响应头、Open Graph `article:author`属性等五种互补方案,帮助开发者精准传递作者身份、联系方式与归属关系,显著提升内容在搜索引擎结果页、社交平台分享、开发工具解析及服务器端日志追踪等多场景下的可识别性与专业度。

HTML如何添加作者信息_元数据设置指南【技巧】

如果您希望在HTML文档中正确声明作者信息并设置相关元数据,需要通过标签在文档的部分进行配置。以下是实现该目标的具体操作步骤:

一、使用name属性声明作者信息

通过设置标签的name属性为"author",可向浏览器和搜索引擎明确标识文档的作者姓名或联系人信息。该标签不参与页面渲染,但被爬虫和开发工具识别。

1、在HTML文件的区域内插入标签。

2、将name属性值设为author。

3、在content属性中填入作者真实姓名或标准化署名,例如“张明”或“前端技术组”。

4、确保该标签位于标签之后、其他meta标签之前,以维持语义优先级。</p> <h2>二、添加电子邮件作为作者联系方式</h2> <p>当需提供作者可联络方式时,可扩展使用author name属性,并在content中嵌入邮箱地址。部分浏览器开发者工具会解析该字段用于协作追溯。</p> <p>1、新建一个<meta>标签,保持name属性为<strong><font color="green">author</font></strong>。</p> <p>2、在content属性中写入作者姓名与邮箱,格式为“姓名 <email@example.com>”。</p> <p>3、避免使用全角符号或空格分隔,确保邮箱格式符合RFC 5322基础规范。</p> <p>4、检查HTML验证器是否报告content值含非法字符,如中文括号或引号。</p> <h2>三、采用schema.org结构化数据标注作者</h2> <p>利用JSON-LD脚本块嵌入schema.org/Person类型数据,可增强作者信息在搜索引擎结果页中的富媒体呈现能力,属于现代元数据实践的重要补充方式。</p> <p>1、在<head>内添加<script type="application/ld+json"></script>标签对。</p> <p>2、在script标签内部写入JSON对象,设置@context为<strong><font color="green">https://schema.org</font></strong>。</p> <p>3、指定type为<strong><font color="green">Person</font></strong>,并提供name、email、url等字段(至少包含name)。</p> <p>4、确保JSON语法合法,无尾逗号、未闭合引号或Unicode控制字符。</p> <h2>四、通过HTTP头部注入作者元数据</h2> <p>服务器端可在响应头中添加Author字段,作为HTML文档元数据的外部补充来源。该方式独立于HTML源码,适用于内容管理系统或CDN策略部署。</p> <p>1、配置Web服务器(如Nginx或Apache)在响应中加入Author头。</p> <p>2、Header值格式为“Author: 张明 <zm@example.com>”,其中邮箱需URL编码若含特殊字符。</p> <p>3、确认浏览器开发者工具的Network面板中Response Headers区域可见该字段。</p> <p>4、注意该头部不被HTML解析器读取,仅对代理、日志系统或定制化爬虫有效。</p> <h2>五、使用Open Graph协议声明作者归属</h2> <p>针对社交平台分享场景,可通过og:article:author属性将作者信息绑定至Facebook、LinkedIn等平台抓取逻辑,提升内容溯源准确性。</p> <p>1、添加meta标签,name属性设为<strong><font color="green">article:author</font></strong>(非og:article:author,因Open Graph前缀由property属性承载)。</p> <p>2、改用property属性,值为<strong><font color="green">article:author</font></strong>,content为作者公开主页URL。</p> <p>3、该URL应返回包含profile:username或schema.org/Person的有效页面。</p> <p>4、同步设置og:type为article,否则部分平台可能忽略author字段。</p><p>终于介绍完啦!小伙伴们,这篇关于《HTML添加作者信息及元数据设置技巧》的介绍应该让你收获多多了吧!欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识,快来关注吧!</p> </div> <div class="labsList"> </div> </div> <!-- 最新阅读 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">相关阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1年前  |   <a href="javascript:;" class="aLightGray" title="提升">提升</a> <a href="javascript:;" class="aLightGray" title="箭头函数">箭头函数</a> <a href="javascript:;" class="aLightGray" title="函数表达式">函数表达式</a> <a href="javascript:;" class="aLightGray" title="函数声明">函数声明</a> <a href="javascript:;" class="aLightGray" title="Function构造函数">Function构造函数</a> </div> <div class="tit lineOverflow"><a href="/article/207000.html" title="JavaScript函数定义及示例详解" class="aBlack">JavaScript函数定义及示例详解</a></div> <div class="opt"> <span><i class="view"></i>502</span> <span class="collectBtn user_collection" data-id="207000" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1个月前  |   <a href="javascript:;" class="aLightGray" title="智能体">智能体</a> </div> <div class="tit lineOverflow"><a href="/article/621422.html" title="智能体安全引领产业升级——国内AI安全产品市场深度分析" class="aBlack">智能体安全引领产业升级——国内AI安全产品市场深度分析</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="621422" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4个月前  |   </div> <div class="tit lineOverflow"><a href="/article/619053.html" title="CSS变量简化按钮悬停效果技巧" class="aBlack">CSS变量简化按钮悬停效果技巧</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="619053" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4个月前  |   </div> <div class="tit lineOverflow"><a href="/article/618916.html" title="JavaScript符号类型详解与应用" class="aBlack">JavaScript符号类型详解与应用</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="618916" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  4个月前  |   </div> <div class="tit lineOverflow"><a href="/article/612539.html" title="HTML剪贴板复制粘贴怎么用" class="aBlack">HTML剪贴板复制粘贴怎么用</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="612539" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div> <!-- 最新阅读 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">最新阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  15小时前  |   </div> <div class="tit lineOverflow"><a href="/article/630144.html" title="前端状态更新频繁时,批处理与去抖分别解决什么" class="aBlack">前端状态更新频繁时,批处理与去抖分别解决什么</a></div> <div class="opt"> <span><i class="view"></i>227</span> <span class="collectBtn user_collection" data-id="630144" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  17小时前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/40050_new_0_1.html" class="aLightGray" title="可访问性">可访问性</a> · <a href="javascript:;" class="aLightGray" title="焦点陷阱">焦点陷阱</a> <a href="javascript:;" class="aLightGray" title="HTML dialog">HTML dialog</a> <a href="javascript:;" class="aLightGray" title="焦点恢复">焦点恢复</a> <a href="javascript:;" class="aLightGray" title="inert">inert</a> <a href="javascript:;" class="aLightGray" title="无障碍弹窗">无障碍弹窗</a> </div> <div class="tit lineOverflow"><a href="/article/630120.html" title="可访问弹窗的焦点陷阱、关闭恢复与背景隔离" class="aBlack">可访问弹窗的焦点陷阱、关闭恢复与背景隔离</a></div> <div class="opt"> <span><i class="view"></i>309</span> <span class="collectBtn user_collection" data-id="630120" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  19小时前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="ArrayBuffer">ArrayBuffer</a> <a href="javascript:;" class="aLightGray" title="postMessage">postMessage</a> <a href="javascript:;" class="aLightGray" title="前端性能">前端性能</a> <a href="javascript:;" class="aLightGray" title="Web Worker">Web Worker</a> <a href="javascript:;" class="aLightGray" title="Transferable">Transferable</a> <a href="javascript:;" class="aLightGray" title="structured clone">structured clone</a> </div> <div class="tit lineOverflow"><a href="/article/630096.html" title="Web Worker 传大数据为何卡顿:复制与 Transferable 对比" class="aBlack">Web Worker 传大数据为何卡顿:复制与 Transferable 对比</a></div> <div class="opt"> <span><i class="view"></i>220</span> <span class="collectBtn user_collection" data-id="630096" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  21小时前  |   <a href="javascript:;" class="aLightGray" title="请求超时">请求超时</a> <a href="javascript:;" class="aLightGray" title="Fetch">Fetch</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="AbortSignal">AbortSignal</a> <a href="javascript:;" class="aLightGray" title="用户取消">用户取消</a> <a href="javascript:;" class="aLightGray" title="前端异常处理">前端异常处理</a> </div> <div class="tit lineOverflow"><a href="/article/630072.html" title="Fetch 请求取消后,超时与用户中断要怎样区分" class="aBlack">Fetch 请求取消后,超时与用户中断要怎样区分</a></div> <div class="opt"> <span><i class="view"></i>466</span> <span class="collectBtn user_collection" data-id="630072" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  23小时前  |   <a href="/articletag/616_new_0_1.html" class="aLightGray" title="文件上传">文件上传</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="javascript:;" class="aLightGray" title="大文件上传">大文件上传</a> <a href="javascript:;" class="aLightGray" title="断点续传">断点续传</a> <a href="javascript:;" class="aLightGray" title="XMLHttpRequest">XMLHttpRequest</a> <a href="javascript:;" class="aLightGray" title="Blob.slice">Blob.slice</a> <a href="javascript:;" class="aLightGray" title="前端分片上传">前端分片上传</a> <a href="javascript:;" class="aLightGray" title="暂停上传">暂停上传</a> </div> <div class="tit lineOverflow"><a href="/article/630048.html" title="前端上传大文件:分片、暂停与失败续传怎样协作" class="aBlack">前端上传大文件:分片、暂停与失败续传怎样协作</a></div> <div class="opt"> <span><i class="view"></i>371</span> <span class="collectBtn user_collection" data-id="630048" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="javascript:;" class="aLightGray" title="列表详情">列表详情</a> <a href="javascript:;" class="aLightGray" title="View Transition API">View Transition API</a> <a href="javascript:;" class="aLightGray" title="前端渐进增强">前端渐进增强</a> </div> <div class="tit lineOverflow"><a href="/article/630024.html" title="View Transition API 做列表到详情过渡的渐进增强" class="aBlack">View Transition API 做列表到详情过渡的渐进增强</a></div> <div class="opt"> <span><i class="view"></i>385</span> <span class="collectBtn user_collection" data-id="630024" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   </div> <div class="tit lineOverflow"><a href="/article/629998.html" title="用 CSS Container Query 让卡片按容器而不是视口响应" class="aBlack">用 CSS Container Query 让卡片按容器而不是视口响应</a></div> <div class="opt"> <span><i class="view"></i>289</span> <span class="collectBtn user_collection" data-id="629998" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="javascript:;" class="aLightGray" title="环境变量">环境变量</a> <a href="javascript:;" class="aLightGray" title="vite">vite</a> <a href="javascript:;" class="aLightGray" title="loadEnv">loadEnv</a> <a href="javascript:;" class="aLightGray" title="vite.config">vite.config</a> </div> <div class="tit lineOverflow"><a href="/article/629976.html" title="Vite 环境变量为什么在配置加载时取不到" class="aBlack">Vite 环境变量为什么在配置加载时取不到</a></div> <div class="opt"> <span><i class="view"></i>133</span> <span class="collectBtn user_collection" data-id="629976" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   </div> <div class="tit lineOverflow"><a href="/article/629964.html" title="React useOptimistic 怎么在请求失败时回滚列表" class="aBlack">React useOptimistic 怎么在请求失败时回滚列表</a></div> <div class="opt"> <span><i class="view"></i>153</span> <span class="collectBtn user_collection" data-id="629964" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="javascript:;" class="aLightGray" title="前端路由">前端路由</a> <a href="javascript:;" class="aLightGray" title="hostname">hostname</a> <a href="javascript:;" class="aLightGray" title="URLPattern">URLPattern</a> <a href="javascript:;" class="aLightGray" title="pathname">pathname</a> </div> <div class="tit lineOverflow"><a href="/article/629940.html" title="URLPattern 怎么同时匹配域名和路径参数" class="aBlack">URLPattern 怎么同时匹配域名和路径参数</a></div> <div class="opt"> <span><i class="view"></i>108</span> <span class="collectBtn user_collection" data-id="629940" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="Intl.DurationFormat">Intl.DurationFormat</a> <a href="javascript:;" class="aLightGray" title="前端国际化">前端国际化</a> <a href="javascript:;" class="aLightGray" title="持续时间格式化">持续时间格式化</a> </div> <div class="tit lineOverflow"><a href="/article/629916.html" title="Intl.DurationFormat 怎么本地化显示持续时间" class="aBlack">Intl.DurationFormat 怎么本地化显示持续时间</a></div> <div class="opt"> <span><i class="view"></i>141</span> <span class="collectBtn user_collection" data-id="629916" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1天前  |   <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="/articletag/40054_new_0_1.html" class="aLightGray" title="浏览器API">浏览器API</a> · <a href="javascript:;" class="aLightGray" title="postMessage">postMessage</a> <a href="javascript:;" class="aLightGray" title="MessageChannel">MessageChannel</a> <a href="javascript:;" class="aLightGray" title="Web Worker">Web Worker</a> <a href="javascript:;" class="aLightGray" title="MessagePort">MessagePort</a> </div> <div class="tit lineOverflow"><a href="/article/629893.html" title="postMessage 转移 MessagePort 后原端口还能用吗" class="aBlack">postMessage 转移 MessagePort 后原端口还能用吗</a></div> <div class="opt"> <span><i class="view"></i>477</span> <span class="collectBtn user_collection" data-id="629893" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div> <!-- 课程推荐 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">课程推荐</div> <a href="/courselist.html" class="more">更多></a> </div> <ul class="classRecomList"> <li> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineOverflow"> 前端进阶之JavaScript设计模式 </dt> <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。</dd> <dd class="cont2"> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a> <span>543次学习</span> </dd> </dl> </li> <li> <a href="/course/2.html" title="GO语言核心编程课程" class="img_box"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineOverflow"> GO语言核心编程课程 </dt> <dd class="cont1 lineOverflow">本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。</dd> <dd class="cont2"> <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a> <span>516次学习</span> </dd> </dl> </li> <li> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineOverflow"> 简单聊聊mysql8与网络通信 </dt> <dd class="cont1 lineOverflow">如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让</dd> <dd class="cont2"> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a> <span>500次学习</span> </dd> </dl> </li> <li> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineOverflow"> JavaScript正则表达式基础与实战 </dt> <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd> <dd class="cont2"> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a> <span>487次学习</span> </dd> </dl> </li> <li> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineOverflow"> 从零制作响应式网站—Grid布局 </dt> <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。</dd> <dd class="cont2"> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a> <span>485次学习</span> </dd> </dl> </li> </ul> </div> </div> <!-- footer --> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="navIcon navIconHome"></em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="navIcon navIconRead"></em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="navIcon navIconCourse"></em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="navIcon navIconAi"></em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="navIcon navIconUser"></em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/frontend/common.js" defer></script> <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e34c3e8ab31ba35d7e1c48ea8d77315f"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>