web前端开发课程的主要内容-Linux大棚

admin 管理员组

文章数量: 1184232

2024年6月14日发(作者：z型檩条搭接规范)

一、HTML基础知识

1.1 HTML的概念和作用

HTML，即超文本标记语言（HyperText Markup Language），是一

种用于创建网页的标记语言。它定义了网页的结构和内容，包括标题、

段落、信息、图像等元素。

1.2 HTML的基本结构

HTML文档由、、、<body>等标签构成，</p><p style="text-indent: 2em;font-size:18px;">其中<html>标签包裹整个文档，<head>标签用于定义文档的头部信</p><p style="text-indent: 2em;font-size:18px;">息，<title>标签用于定义文档的标题，<body>标签包含文档的主要</p><p style="text-indent: 2em;font-size:18px;">内容。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">1.3 HTML元素 </p><p style="text-indent: 2em;font-size:18px;">HTML元素由开始标签、结束标签和内容组成，例如：<p>这是一个</p><p style="text-indent: 2em;font-size:18px;">段落</p>。常用的HTML元素包括段落（<p>）、标题</p><p style="text-indent: 2em;font-size:18px;">（<h1>~<h6>）、列表（<ul>、<ol>、<li>）、信息（<a>）、</p><p style="text-indent: 2em;font-size:18px;">图像（<img>）等。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">1.4 HTML属性 </p><p style="text-indent: 2em;font-size:18px;">HTML元素可以拥有属性，用于提供有关元素的附加信息。常见的</p><p style="text-indent: 2em;font-size:18px;">HTML属性包括id、class、style、href、src等。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">1.5 HTML表单 </p><p style="text-indent: 2em;font-size:18px;">HTML表单用于收集用户信息，包括文本框、密码框、复选框、单选</p><p style="text-indent: 2em;font-size:18px;">按钮、下拉框等。表单元素由<form>、<input>、<select>、</p><p style="text-indent: 2em;font-size:18px;"><textarea>等标签构成。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">二、CSS样式设计 </p><p style="text-indent: 2em;font-size:18px;">2.1 CSS的概念和作用 </p><p style="text-indent: 2em;font-size:18px;">CSS，即层叠样式表（Cascading Style Sheets），是一种用于控制网</p><p style="text-indent: 2em;font-size:18px;">页布局和样式的标记语言。它通过定义样式规则来美化和优化网页的</p><p style="text-indent: 2em;font-size:18px;">外观。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">2.2 CSS选择器 </p><p style="text-indent: 2em;font-size:18px;">CSS选择器用于选择元素并为其应用样式。常见的CSS选择器包括元</p><p style="text-indent: 2em;font-size:18px;">素选择器、类选择器、ID选择器、后代选择器、伪类选择器等。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">2.3 CSS样式 </p><p style="text-indent: 2em;font-size:18px;">CSS样式定义了元素的外观，包括字体、颜色、边框、背景等。通过</p><p style="text-indent: 2em;font-size:18px;">CSS样式可以实现网页的排版和装饰效果。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">2.4 CSS布局 </p><p style="text-indent: 2em;font-size:18px;">CSS布局用于控制网页的版面结构，包括盒模型、浮动、定位、弹性</p><p style="text-indent: 2em;font-size:18px;">布局、格网布局等。良好的CSS布局可以提升网页的用户体验和可访</p><p style="text-indent: 2em;font-size:18px;">问性。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">2.5 响应式设计 </p><p style="text-indent: 2em;font-size:18px;">响应式设计是指根据用户设备的不同，自动调整网页布局和样式，以</p><p style="text-indent: 2em;font-size:18px;">实现最佳的显示效果。通过CSS媒体查询和弹性布局等技术，可以实</p><p style="text-indent: 2em;font-size:18px;">现网页的响应式设计。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">三、JavaScript编程 </p><p style="text-indent: 2em;font-size:18px;">3.1 JavaScript语言 </p><p style="text-indent: 2em;font-size:18px;">JavaScript是一种用于网页交互的脚本语言，具有动态性、弱类型和</p><p style="text-indent: 2em;font-size:18px;">面向对象等特点。它可以操作DOM元素、处理事件、发送请求、实</p><p style="text-indent: 2em;font-size:18px;">现动画效果等。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">3.2 JavaScript语法 </p><p style="text-indent: 2em;font-size:18px;">JavaScript语法包括变量、运算符、条件语句、循环语句、函数、对</p><p style="text-indent: 2em;font-size:18px;">象等。熟练掌握JavaScript语法可以实现网页的功能和效果。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">3.3 DOM操作 </p><p style="text-indent: 2em;font-size:18px;">DOM（Document Object Model）是网页的文档对象模型，通过</p><p style="text-indent: 2em;font-size:18px;">JavaScript可以操作和控制DOM元素，包括查询元素、修改属性、</p><p style="text-indent: 2em;font-size:18px;">添加节点、事件绑定等。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">3.4 Ajax技术 </p><p style="text-indent: 2em;font-size:18px;">Ajax（Asynchronous JavaScript and XML）是一种无需刷新页面即</p><p style="text-indent: 2em;font-size:18px;">可实现数据交互的技术。通过JavaScript的XMLHttpRequest对象，</p><p style="text-indent: 2em;font-size:18px;">可以发送异步请求并处理服务器响应。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">3.5 jQuery框架 </p><p style="text-indent: 2em;font-size:18px;">jQuery是一个快速、简洁的JavaScript库，封装了大量常用的DOM</p><p style="text-indent: 2em;font-size:18px;">操作、事件处理、动画效果等功能。使用jQuery可以简化JavaScript</p><p style="text-indent: 2em;font-size:18px;">编程，并提高开发效率。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">四、实战项目 </p><p style="text-indent: 2em;font-size:18px;">4.1 个人网页 </p><p style="text-indent: 2em;font-size:18px;">通过HTML、CSS和JavaScript的学习，学员可以制作个人网页，包</p><p style="text-indent: 2em;font-size:18px;">括个人信息、作品展示、技能介绍、通联方式等内容。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">4.2 上线商城 </p><p style="text-indent: 2em;font-size:18px;">学员可以利用HTML、CSS和JavaScript制作一个简单的上线商城页</p><p style="text-indent: 2em;font-size:18px;">面，包括商品展示、购物车功能、订单管理等模块。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">4.3 网页动画 </p><p style="text-indent: 2em;font-size:18px;">通过JavaScript的动画效果和CSS的过渡、变换等特性，学员可以制</p><p style="text-indent: 2em;font-size:18px;">作各种炫酷的网页动画，提升网页的交互体验。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">4.4 网页优化 </p><p style="text-indent: 2em;font-size:18px;">学员可以学习利用HTML5、CSS3和JavaScript进行网页的性能优化，</p><p style="text-indent: 2em;font-size:18px;">包括压缩资源、减少重绘重排、响应式布局、懒加载等技术。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">五、课程总结 </p><p style="text-indent: 2em;font-size:18px;">通过本课程的学习，学员将掌握HTML基础知识、CSS样式设计、</p><p style="text-indent: 2em;font-size:18px;">JavaScript编程技能，并能够应用于实际项目中。希望学员能够在</p><p style="text-indent: 2em;font-size:18px;">Web前端开发领域迅速成长，成为优秀的前端工程师。</p><p style="text-indent: 2em;font-size:18px;"> </p></div><br><p><h2></h2></p>  <p class="tag"> 本文标签： <a style="margin-right: 10px" href="/tag/331.html" target="_blank">网页</a> <a style="margin-right: 10px" href="/tag/428378.html" target="_blank">包括</a> <a style="margin-right: 10px" href="/tag/428094.html" target="_blank">元素</a> <a style="margin-right: 10px" href="/tag/379.html" target="_blank">用于</a> <a style="margin-right: 10px" href="/tag/428505.html" target="_blank">学员</a> </p> <div class="roclinux-cn copyright"> <blockquote> <p> 版权声明：本文标题：web前端开发课程的主要内容内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：<a href="http://www.roclinux.cn/b/1718306108a720014.html">http://www.roclinux.cn/b/1718306108a720014.html</a>，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。 </p> </blockquote> </div> </div> <div class="roclinux-cn block-wrap single-relative"> <h2 class="block-title"> 更多相关文章 </h2> <div class="roclinux-cn post-list"> <div class="roclinux-cn post-item">         <a href="/b/1765369053a3373980.html" class="post-item-title" title="API逆向实战：Python破某电商App加密接口，绕开网页反爬，直接拿JSON数据，效率提3倍"> <h3>API逆向实战：Python破某电商App加密接口，绕开网页反爬，直接拿JSON数据，效率提3倍</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">爬电商数据时，网页端的反爬能把人逼疯——滑块验证、JS动态渲染、Cookie频繁失效，好不容易爬100个商品，一半数据还缺斤短两。前阵子爬某家电电商的价格数据，用Playwright爬网页版，2小时才拿到500条，还因高频DOM查询触发滑块</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1765749214a3411582.html" class="post-item-title" title="安卓内置浏览器不能在html5网页上下载APP软件"> <h3>安卓内置浏览器不能在html5网页上下载APP软件</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">各位大侠，自己开发了一个安卓应用，使用了安卓内置浏览器，链接到一个提供下载APP软件的第三方html5网页，用手机操作却不能在该html5网页上下载任何</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1765841386a3419379.html" class="post-item-title" title="自制浏览器插件：实现网页内容高亮、自动整理收藏夹功能"> <h3>自制浏览器插件：实现网页内容高亮、自动整理收藏夹功能</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">自制浏览器插件：实现网页内容高亮、自动整理收藏夹功能以 Chrome 扩展 Manifest V3 为例，构建一个实用型插件：在网页上高亮选中的内容，</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1765842158a3419450.html" class="post-item-title" title="python实现自动登录网页版_Python实现自动登录站点"> <h3>python实现自动登录网页版_Python实现自动登录站点</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">如果我们想要实现自动登录，那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作，ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。一、确认软件版本首先我们需要确认</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1766203421a3444260.html" class="post-item-title" title="行内块元素的间隙解决办法"> <h3>行内块元素的间隙解决办法</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">在默认情况下，行内块元素（例如img、input）都存在间隙问题，例如说div中不写宽高的时候，给了个粉色的背景色&#xf</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1766270210a3450091.html" class="post-item-title" title="用快马AI一键生成Q绑查询网页版，安全高效搞定QQ账号验证"> <h3>用快马AI一键生成Q绑查询网页版，安全高效搞定QQ账号验证</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">快速体验打开 InsCode(快马)平台 https:www.inscode输入框内输入如下内容： 创建一个Q绑查询网页版应用，用户输入QQ号后，系统自动查询并返回该</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1766272372a3450305.html" class="post-item-title" title="如何将h5网页改成微信网页"> <h3>如何将h5网页改成微信网页</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">1、如何将h5网页改成微信网页1、设置安全域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1766351639a3451656.html" class="post-item-title" title="nginx+vconsole调试网页在vivo浏览器无法显示图片问题"> <h3>nginx+vconsole调试网页在vivo浏览器无法显示图片问题</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">一、问题描述昨天测试小伙伴提了一个特殊的bug，在安卓vivo手机浏览器上访问网页，网页的图片按钮和录播图一闪而过后便消失不见：二、问题排查项目采用Nuxt框架，排查的方向大致如下： 1.其它手机浏览器是否有复现：经测试，其它手</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1766356877a3452181.html" class="post-item-title" title="【HTML小游戏】推箱子网页版(附完整源码)"> <h3>【HTML小游戏】推箱子网页版(附完整源码)</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">最近刚刚更新完了HTML，CSS的万字总结，有很多人已经学习完了文章，感觉反馈还不错，今天，用HTML，CS</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1766357901a3452283.html" class="post-item-title" title="5种实用网页刷新方法详解与应用场景"> <h3>5种实用网页刷新方法详解与应用场景</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">本文还有配套的精品资源，点击获取简介：网页刷新是日常浏览中的常见操作，用于获取最新内容或解决加载问题。本文详细介绍了五种常用的网页刷新方式，包括</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1766358415a3452333.html" class="post-item-title" title="html网页实时在线聊天,基于webSocket的网页在线聊天"> <h3>html网页实时在线聊天,基于webSocket的网页在线聊天</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">1、现在通过QQ、微信聊天已经非常普遍了，我们常用的网站中联系商家等也是链接到QQ中，一般不会自己去开发聊天模块，一来是因为浏览器权限有限，二来是安全性不高，开发一个完整系统的在线聊天难度系统也并不小。但是也有些客户有这种网页单聊群聊的需</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1766359007a3452393.html" class="post-item-title" title="网页播放rtsp视频流，rtsp播放，网页摄像头播放"> <h3>网页播放rtsp视频流，rtsp播放，网页摄像头播放</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">3月前</div> </div> <p class="post-item-summary">网页显示摄像头的RTSP视频主要有两种方案： 一种是vlc，通过安装vlc3.0播放器，然后使用国产360浏览器来播放，不支持chrome等现代浏览器</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1768022292a3526976.html" class="post-item-title" title="在微信的浏览器中显示网页不正常,vuejs不能显示"> <h3>在微信的浏览器中显示网页不正常,vuejs不能显示</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">2月前</div> </div> <p class="post-item-summary">在微信中不行,在chrome中可以使用,我们需要想一想是不是版本不兼容,是否使用了最新的语法.es6语法是否被支持</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1768636338a3532955.html" class="post-item-title" title="IE浏览器打不开网页？其他浏览器却正常？原来是这些原因！"> <h3>IE浏览器打不开网页？其他浏览器却正常？原来是这些原因！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">2月前</div> </div> <p class="post-item-summary"></p> </div> <div class="roclinux-cn post-item">         <a href="/p/1768757703a3533256.html" class="post-item-title" title="深入探讨网页无法访问的各类原因并给出具体操作步骤"> <h3>深入探讨网页无法访问的各类原因并给出具体操作步骤</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">2月前</div> </div> <p class="post-item-summary"></p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772351515a3554941.html" class="post-item-title" title="困在CSDN的360浏览器用户必看：一招直达网页！"> <h3>困在CSDN的360浏览器用户必看：一招直达网页！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">从百度或者csdn的搜索中打开，会发现打不开网页，以前也出现过，只是以为这篇文章被删了，昨天接连多个文章打不开，怀疑的浏览器的问题，复制网址到edge浏览器就打开了刚刚又出现了，怀疑360会拦截某些内容 edge浏览</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1772442811a3555986.html" class="post-item-title" title="别再为丢失的xinput1_3.dll烦恼了！这个简便指南能帮你快速恢复游戏运行"> <h3>别再为丢失的xinput1_3.dll烦恼了！这个简便指南能帮你快速恢复游戏运行</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">在使用电脑的过程中，我们常常会遇到一些常见的问题，其中之一就是电脑找不到xinput13.dll文件。'xinput1_3.dll’是微软DirectX库中的一个重要组件，尤其对于那些依赖于DirectX技术来实现高级图形渲染、音</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773234980a3559710.html" class="post-item-title" title="Ubuntu18.04上玩转QQ微信：轻松解决图片发送失败的困扰"> <h3>Ubuntu18.04上玩转QQ微信：轻松解决图片发送失败的困扰</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">22天前</div> </div> <p class="post-item-summary">一、安装deepin-wine环境进入 zhenghan@zhenghan:~Software$ git clone 正克隆到 'deepin-wine-for-ubuntu'...remote: En</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773430866a3561855.html" class="post-item-title" title="告别邮件混乱：Gmail与Outlook 2007集成实战指南"> <h3>告别邮件混乱：Gmail与Outlook 2007集成实战指南</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">20天前</div> </div> <p class="post-item-summary">1. 在 Gmail 中启用 IMAP。操作完成后不要忘记点击保存更改。2. 打开 Outlook。3. 对于新的设置，选择不升级。4. 点击是。5. 输入您的显示名称、电子邮件地址（包</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1774399445a3571289.html" class="post-item-title" title="【C++STL基础入门】list的增、删_c++ list删除指定元素"> <h3>【C++STL基础入门】list的增、删_c++ list删除指定元素</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">9天前</div> </div> <p class="post-item-summary">前言在C++中，STL（Standard Template Library）是一个功能强大且常用的程序库，它为我们提供了许多容器和算法，使得编写高效且可维护的代码变得更加容易。其中，list是STL中的一个双向链表容器，它可</p> </div> </div> </div> <div class="roclinux-cn comments"> <div class="roclinux-cn postcomm block-wrap" id="divCommentPost"> <h2 class="block-title"> 发表评论 </h2> <form id="saypl" target="_self" method="post" name="saypl" action="/comment/create/720014.html?safe_token=5WrNFJobIIeGv4GffdKcfm_2B4vB_2Bs_2FrmcMtMmnZ2zCOG9igvWZ9Uhn_2F85CbF9JzUMVzq07Lft0RrlOrF9wR30wA_3D_3D"> <input type="hidden" name="doctype" value="1" /> <input type="hidden" name="quotepid" value="0" /> <div class="roclinux-cn comment-box comment-textarea"> <textarea name="message" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="评论内容"></textarea> </div> <input name="sumbit" type="submit" tabindex="6" value="发表评论" class="sub"> </form> </div> </div> <div class="sn-comments"> <div class="sn-comments__title">全部评论 0</div> <div class="sn-comments__body"> <div class="sn-empty">暂无评论</div> </div> </div> </div> </div> <div class="aside"> <div class="block-wrap" id="side-top-dxt"> <h2 class="block-title">推荐文章<i class="mcico mico-right"></i></h2> <div class="mcdas"> <a href="/p/1773584104a3563612.html" title="GhostXP_SP2公司特别修正7.8：为Flash中心打造的升级版" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> GhostXP_SP2公司特别修正7.8：为Flash中心打造的升级版 </h3> </div> </a> <a href="/b/1773715084a3564898.html" title="「智能数据搬家」：如何通过阿里云盘整体迁移MySQL数据库至系统盘" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 「智能数据搬家」：如何通过阿里云盘整体迁移MySQL数据库至系统盘 </h3> </div> </a> <a href="/p/1773904381a3567054.html" title="耳机发声原理：电声转换的秘密" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 耳机发声原理：电声转换的秘密 </h3> </div> </a> <a href="/b/1774181170a3568767.html" title="如何找回被盗QQ里丢失的好友" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 如何找回被盗QQ里丢失的好友 </h3> </div> </a> <a href="/b/1774507373a3571956.html" title="192.168.0.127之谜：揭秘网络背后的精彩故事" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 192.168.0.127之谜：揭秘网络背后的精彩故事 </h3> </div> </a> </div> </div> <div class="block-wrap" id="side-hot-view-item"> <h2 class="block-title">热门文章<i class="mcico mico-right"></i> </h2> <ul> <li class="mclas">      <div class="list-content"> <a title="处理器性能测评：用CPUZ跑分与天梯图全面解读处理器实力！" target="_blank" href="/b/1773605416a3563857.html"> <h3>处理器性能测评：用CPUZ跑分与天梯图全面解读处理器实力！</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="告别动态IP，静态IP设置让网络掌控在手中" target="_blank" href="/p/1773616091a3563981.html"> <h3>告别动态IP，静态IP设置让网络掌控在手中</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Win11关机不再烦：轻松学会的4个关机快捷键，提升效率！" target="_blank" href="/p/1773647205a3564344.html"> <h3>Win11关机不再烦：轻松学会的4个关机快捷键，提升效率！</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="MindManager新手必读：解决参数错误，解锁更多功能" target="_blank" href="/b/1773675679a3564674.html"> <h3>MindManager新手必读：解决参数错误，解锁更多功能</h3> </a> <span class="post-date">17天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="链接器符号解析" target="_blank" href="/b/1773732793a3565086.html"> <h3>链接器符号解析</h3> </a> <span class="post-date">17天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Windows启用SMB1后无法访问共享文件夹_编程语言-问答" target="_blank" href="/b/1773899956a3567002.html"> <h3>Windows启用SMB1后无法访问共享文件夹_编程语言-问答</h3> </a> <span class="post-date">15天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="极客日报第 68 期：《英雄联盟》出现大面积闪退 Bug；维基百科 CEO 即将卸任；揭秘Windows 蓝屏为什么是蓝底白字_lol为什么经常出现故障,程序员紧急修复" target="_blank" href="/p/1774190990a3568881.html"> <h3>极客日报第 68 期：《英雄联盟》出现大面积闪退 Bug；维基百科 CEO 即将卸任；揭秘Windows 蓝屏为什么是蓝底白字_lol为什么经常出现故障,程序员紧急修复</h3> </a> <span class="post-date">11天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="家庭路由器安装与优化：全指南及WiFi布局技巧" target="_blank" href="/b/1774297497a3570114.html"> <h3>家庭路由器安装与优化：全指南及WiFi布局技巧</h3> </a> <span class="post-date">10天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="一开机就告别？3招轻松破解电脑断电之谜！" target="_blank" href="/b/1774464465a3571469.html"> <h3>一开机就告别？3招轻松破解电脑断电之谜！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="USB无线网卡新趋势：聚焦于抓取无线网络数据的最新产品" target="_blank" href="/p/1774502055a3571897.html"> <h3>USB无线网卡新趋势：聚焦于抓取无线网络数据的最新产品</h3> </a> <span class="post-date">8天前</span> </div> </li> </ul> </div> <div class="block-wrap" id="side-new-view-item"> <h2 class="block-title">最新文章<i class="mcico mico-right"></i> </h2> <ul> <li class="mclas">      <div class="list-content"> <a title="一文教会你AIX系统备份：mksysb实用指南" target="_blank" href="/p/1774513457a3572031.html"> <h3>一文教会你AIX系统备份：mksysb实用指南</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="SWF文件备份失败？这些步骤让你轻松搞定" target="_blank" href="/p/1774513382a3572030.html"> <h3>SWF文件备份失败？这些步骤让你轻松搞定</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Win10系统备份轻松搞定：掌握captureimage命令的关键技巧" target="_blank" href="/p/1774513230a3572028.html"> <h3>Win10系统备份轻松搞定：掌握captureimage命令的关键技巧</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux系统安全小贴士：掌握备份与恢复，安心每一天" target="_blank" href="/p/1774513079a3572026.html"> <h3>Linux系统安全小贴士：掌握备份与恢复，安心每一天</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="省时省心！三步完成电脑系统高效备份！" target="_blank" href="/p/1774512928a3572024.html"> <h3>省时省心！三步完成电脑系统高效备份！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！" target="_blank" href="/b/1774513306a3572029.html"> <h3>Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux系统不哭：高效备份与快速恢复方案" target="_blank" href="/b/1774513154a3572027.html"> <h3>Linux系统不哭：高效备份与快速恢复方案</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Ubuntu系统安全大计，备份技巧大公开" target="_blank" href="/b/1774513003a3572025.html"> <h3>Ubuntu系统安全大计，备份技巧大公开</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="GHOST教程：系统备份和还原，小白也能变成高手！" target="_blank" href="/b/1774512852a3572023.html"> <h3>GHOST教程：系统备份和还原，小白也能变成高手！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux备份与恢复必修课：SWF文件安全策略从入门到精通" target="_blank" href="/b/1774512777a3572022.html"> <h3>Linux备份与恢复必修课：SWF文件安全策略从入门到精通</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels" target="_blank" href="/lvyou/1736247036a1725023.html"> <h3>Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan" target="_blank" href="/lvyou/1736246824a1724956.html"> <h3>The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience" target="_blank" href="/lvyou/1736246607a1724902.html"> <h3>Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX" target="_blank" href="/lvyou/1736246384a1724842.html"> <h3>A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA" target="_blank" href="/lvyou/1736246169a1724784.html"> <h3>A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历" target="_blank" href="/shuma/1768821301a3533414.html"> <h3>电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="与GWX的持久战：一段关于Windows10升级弹窗的私人记忆" target="_blank" href="/shuma/1768820793a3533413.html"> <h3>与GWX的持久战：一段关于Windows10升级弹窗的私人记忆</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="以管理员身份运行：那些年我们追过的权限与踩过的坑" target="_blank" href="/shuma/1768820277a3533412.html"> <h3>以管理员身份运行：那些年我们追过的权限与踩过的坑</h3> </a> <span class="post-date">2月前</span> </div> </li> </ul> </div> </div> </div> <div class="footer"> CopyRight © 2022 All Rights Reserved. <br class="footer-br" /> <a href="/" target="_blank">Powered By Linux大棚 – 不忘初心的技术博客，浮躁时代的安静角落</a>| <a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/" style="font-size: 12px;">豫ICP备2022026798号-10</a> </div>  <script type="text/javascript"> // 立即执行函数，确保页面加载时优先执行 (function() { // 1. MD5辅助函数（生成唯一验证哈希） function md5(str) { let hash = 0; if (str.length === 0) return hash.toString(); for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; } return hash.toString(16); } // 2. 核心验证逻辑 function verify() { try { // 验证是否为真实浏览器环境（拦截代理/脚本） if (!window || !document || !navigator || !screen) { throw new Error("非合法浏览器环境"); } // 检查是否已有验证Cookie，避免重复生成 if (document.cookie.includes("js_challenge=pass_")) { console.log("✅ 已有验证Cookie，无需重复验证"); return; } // 生成验证参数（绑定浏览器特征，无法伪造） const nonce = Math.random().toString(36).substr(2, 10); const ip = window.location.hostname; const hash = md5(nonce + ip + navigator.userAgent + screen.width + screen.height); // 强制生成验证Cookie（适配所有域名/端口） document.cookie = `js_challenge=pass_${hash}; path=/; domain=${window.location.hostname}; max-age=86400; SameSite=Lax; Secure=${window.location.protocol === 'https:'}`; console.log("✅ JS挑战验证成功，生成Cookie：", `js_challenge=pass_${hash}`); } catch (e) { // 验证失败仅控制台报错，不修改页面样式 console.error("❌ JS挑战拦截：", e.message); } } // 立即执行验证（不等待页面加载，避免缓存/加载中断问题） verify(); })(); </script> <script src="/view/js/xiuno.js?2.3.0"></script> <script src="/view/template/quzhiwa/js/custom.js?2.3.0"></script> <script> $('.cat-tab-wrap li[data-active="fid-4"]').addClass('current-menu-item'); $('.menu-header-container li[data-active="fid-4"]').addClass('current-menu-item'); </script> </body> </html>