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

修改网页标题的HTML方法详解

时间:2026-04-26 12:44:58 337浏览 收藏

本文深入解析了修改网页标题的两种唯一可靠方法——静态写入HTML的``标签内或运行时通过`document.title`赋值,并明确指出其他所有DOM操作(如修改`textContent`、动态插入标签等)均不可靠,尤其会严重损害SEO效果和浏览器历史记录行为;文章还系统揭示了`<title>`必须位于``内的规范原因、`document.title`在SPA路由中的关键作用及兼容性注意事项,并细致梳理了标题内容常见陷阱,如长度限制、HTML字符转义、服务端模板拼接错误以及构建产物与源码不一致等问题,强调验证真实HTML源码而非开发者工具Elements面板才是判断标题是否生效的金标准。

html怎么改网页标题_html修改浏览器标签页标题方法

改网页标题只有两种可靠方式:静态写在 里的 </code>,或运行时用 <code>document.title</code> 赋值。其他任何操作——比如 <code>querySelector('title').textContent</code>、往 <code><body></code> 里塞 <code><title></code>、用 JS 插入新 <code><title></code> 标签——都不保证生效,尤其对 SEO 和历史记录。</strong></p> <h3>为什么 <code><title></code> 必须放在 <code><head></code> 里</h3> <p>HTML 规范强制要求 <code><title></code> 是 <code><head></code> 的直接子元素。浏览器解析时若在 <code><body></code> 中遇到它,会尝试“修复”并挪动,但这个过程不可控:</p> <ul><li>旧版 Safari 或某些 WebView 可能静默丢弃,导致标签页显示“无标题”或文件名</li> <li>搜索引擎爬虫直接忽略非 <code><head></code> 内的 <code><title></code>,SEO 失效</li> <li>部分构建工具(如 Vite 的 <code>html-plugin</code>)会覆盖模板中写的 <code><title></code>,得查最终生成的 HTML 源码确认</li> </ul><h3><code>document.title</code> 是唯一安全的动态修改方式</h3> <p>单页应用(SPA)路由切换后必须手动调用它,否则前进/后退时标题不会更新。注意几个关键点:</p> <ul><li><code>document.querySelector('title').textContent = '新标题'</code> 不生效——<code><title></code> 是特殊节点,DOM 操作不触发浏览器标题栏更新</li> <li>所有现代浏览器(包括微信内置浏览器)都支持 <code>document.title</code> 读写,但 IE6–8 对含中文的标题有兼容问题,需确保页面声明了 <code><meta charset="utf-8"></code></li> <li><code>document.title</code> 修改不触发任何事件,也不影响 <code>history.state</code>,别指望靠监听它做响应</li> </ul><h3>标题内容本身容易踩的坑</h3> <p>即使位置和 API 都对了,标题内容写错照样出问题:</p> <ul><li>长度超过 50 字符,移动端和搜索结果页大概率被截断;微信分享卡片也会自动加省略号</li> <li>含未转义的 <code>&</code>、<code>、<code>></code> 会被当成 HTML 标签解析,轻则显示异常,重则破坏整个 <code><head></code> 结构;<code>&</code> 必须写成 <code>&</code></code></li> <li>服务端模板(如 PHP、Jinja)里如果 <code><head></code> 被拆开拼接,容易漏掉或重复插入 <code><title></code>,导致只取第一个、其余被忽略</li> <li>构建产物中的 <code><title></code> 可能和源码不一致——务必用 <code>curl -s URL | grep "<title>"</code> 或“查看网页源码”(不是 Elements 面板)验证真实输出</li> </ul><p>最常被忽略的是:你本地刷新看到标题变了,不代表爬虫也看到了。首屏 HTML 源码里没有有效 <code><title></code>,SEO 就没地基可打。</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>   |  2个月前  |   <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>   |  5个月前  |   </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>   |  5个月前  |   </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>   |  5个月前  |   </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>   |  2小时前  |   </div> <div class="tit lineOverflow"><a href="/article/640620.html" title="CSS anchor-name 怎样让浮动提示跟随触发元素定位" class="aBlack">CSS anchor-name 怎样让浮动提示跟随触发元素定位</a></div> <div class="opt"> <span><i class="view"></i>387</span> <span class="collectBtn user_collection" data-id="640620" 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>   |  2小时前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="javascript:;" class="aLightGray" title="dom">dom</a> <a href="javascript:;" class="aLightGray" title="Promise">Promise</a> <a href="javascript:;" class="aLightGray" title="布局稳定">布局稳定</a> <a href="javascript:;" class="aLightGray" title="图片解码">图片解码</a> <a href="javascript:;" class="aLightGray" title="HTMLImageElement.decode">HTMLImageElement.decode</a> </div> <div class="tit lineOverflow"><a href="/article/640619.html" title="HTMLImageElement.decode 怎样在布局前等待图片解码" class="aBlack">HTMLImageElement.decode 怎样在布局前等待图片解码</a></div> <div class="opt"> <span><i class="view"></i>355</span> <span class="collectBtn user_collection" data-id="640619" 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>   |  2小时前  |   </div> <div class="tit lineOverflow"><a href="/article/640618.html" title="IndexedDB versionchange 处理旧连接阻塞升级的方法" class="aBlack">IndexedDB versionchange 处理旧连接阻塞升级的方法</a></div> <div class="opt"> <span><i class="view"></i>363</span> <span class="collectBtn user_collection" data-id="640618" 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>   |  2小时前  |   <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="ServiceWorker">ServiceWorker</a> <a href="javascript:;" class="aLightGray" title="Service Worker">Service Worker</a> <a href="javascript:;" class="aLightGray" title="skipWaiting">skipWaiting</a> <a href="javascript:;" class="aLightGray" title="clients.claim">clients.claim</a> <a href="javascript:;" class="aLightGray" title="controllerchange">controllerchange</a> <a href="javascript:;" class="aLightGray" title="前端发布">前端发布</a> </div> <div class="tit lineOverflow"><a href="/article/640617.html" title="Service Worker 更新后让页面安全切换版本的方案" class="aBlack">Service Worker 更新后让页面安全切换版本的方案</a></div> <div class="opt"> <span><i class="view"></i>269</span> <span class="collectBtn user_collection" data-id="640617" 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>   |  2小时前  |   <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="深色模式">深色模式</a> <a href="javascript:;" class="aLightGray" title="prefers-color-scheme">prefers-color-scheme</a> <a href="javascript:;" class="aLightGray" title="color-scheme">color-scheme</a> <a href="javascript:;" class="aLightGray" title="原生表单控件">原生表单控件</a> <a href="javascript:;" class="aLightGray" title="前端主题">前端主题</a> </div> <div class="tit lineOverflow"><a href="/article/640616.html" title="CSS color-scheme 怎样让原生表单控件适配深色模式" class="aBlack">CSS color-scheme 怎样让原生表单控件适配深色模式</a></div> <div class="opt"> <span><i class="view"></i>204</span> <span class="collectBtn user_collection" data-id="640616" 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>   |  2小时前  |   <a href="javascript:;" class="aLightGray" title="imports">imports</a> <a href="javascript:;" class="aLightGray" title="ES modules">ES modules</a> <a href="javascript:;" class="aLightGray" title="import maps">import maps</a> <a href="javascript:;" class="aLightGray" title="scopes">scopes</a> <a href="javascript:;" class="aLightGray" title="浏览器模块">浏览器模块</a> </div> <div class="tit lineOverflow"><a href="/article/640615.html" title="ES modules import maps 管理浏览器依赖映射的配置" class="aBlack">ES modules import maps 管理浏览器依赖映射的配置</a></div> <div class="opt"> <span><i class="view"></i>140</span> <span class="collectBtn user_collection" data-id="640615" 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>   |  2小时前  |   <a href="/articletag/39953_new_0_1.html" class="aLightGray" title="前端工程">前端工程</a> · <a href="javascript:;" class="aLightGray" title="环境变量">环境变量</a> <a href="javascript:;" class="aLightGray" title="vite">vite</a> <a href="javascript:;" class="aLightGray" title="mode">mode</a> <a href="javascript:;" class="aLightGray" title="前端构建">前端构建</a> <a href="javascript:;" class="aLightGray" title="import.meta.env">import.meta.env</a> <a href="javascript:;" class="aLightGray" title="envPrefix">envPrefix</a> </div> <div class="tit lineOverflow"><a href="/article/640614.html" title="Vite import.meta.env 控制客户端变量暴露范围的方法" class="aBlack">Vite import.meta.env 控制客户端变量暴露范围的方法</a></div> <div class="opt"> <span><i class="view"></i>181</span> <span class="collectBtn user_collection" data-id="640614" 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>   |  2小时前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="卡片布局">卡片布局</a> <a href="javascript:;" class="aLightGray" title="margin">margin</a> <a href="javascript:;" class="aLightGray" title="margin-trim">margin-trim</a> </div> <div class="tit lineOverflow"><a href="/article/640613.html" title="CSS margin-trim 怎样统一卡片容器的首尾外边距" class="aBlack">CSS margin-trim 怎样统一卡片容器的首尾外边距</a></div> <div class="opt"> <span><i class="view"></i>380</span> <span class="collectBtn user_collection" data-id="640613" 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>   |  2小时前  |   <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="锚点定位">锚点定位</a> <a href="javascript:;" class="aLightGray" title="前端布局">前端布局</a> <a href="javascript:;" class="aLightGray" title="anchor-size()">anchor-size()</a> <a href="javascript:;" class="aLightGray" title="浮动面板">浮动面板</a> <a href="javascript:;" class="aLightGray" title="尺寸约束">尺寸约束</a> </div> <div class="tit lineOverflow"><a href="/article/640612.html" title="CSS anchor-size() 按锚点尺寸控制浮动面板大小的写法" class="aBlack">CSS anchor-size() 按锚点尺寸控制浮动面板大小的写法</a></div> <div class="opt"> <span><i class="view"></i>363</span> <span class="collectBtn user_collection" data-id="640612" 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>   |  2小时前  |   <a href="/articletag/243_new_0_1.html" 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="请求取消">请求取消</a> <a href="javascript:;" class="aLightGray" title="AbortSignal.any">AbortSignal.any</a> </div> <div class="tit lineOverflow"><a href="/article/640611.html" title="Fetch AbortSignal.any 合并多个取消来源的处理" class="aBlack">Fetch AbortSignal.any 合并多个取消来源的处理</a></div> <div class="opt"> <span><i class="view"></i>255</span> <span class="collectBtn user_collection" data-id="640611" 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>   |  2小时前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/39796_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="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="FormData">FormData</a> <a href="javascript:;" class="aLightGray" title="append">append</a> <a href="javascript:;" class="aLightGray" title="getAll">getAll</a> <a href="javascript:;" class="aLightGray" title="重复字段">重复字段</a> <a href="javascript:;" class="aLightGray" title="entries">entries</a> <a href="javascript:;" class="aLightGray" title="提交顺序">提交顺序</a> </div> <div class="tit lineOverflow"><a href="/article/640610.html" title="FormData 读取重复字段并保留提交顺序的方法" class="aBlack">FormData 读取重复字段并保留提交顺序的方法</a></div> <div class="opt"> <span><i class="view"></i>232</span> <span class="collectBtn user_collection" data-id="640610" 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>   |  2小时前  |   <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="表单校验">表单校验</a> <a href="javascript:;" class="aLightGray" title="前端组件">前端组件</a> <a href="javascript:;" class="aLightGray" title=":has()">:has()</a> <a href="javascript:;" class="aLightGray" title="关系选择器">关系选择器</a> <a href="javascript:;" class="aLightGray" title="父级样式">父级样式</a> </div> <div class="tit lineOverflow"><a href="/article/640609.html" title="CSS :has() 按子元素状态控制父级样式的实现" class="aBlack">CSS :has() 按子元素状态控制父级样式的实现</a></div> <div class="opt"> <span><i class="view"></i>140</span> <span class="collectBtn user_collection" data-id="640609" 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>