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

admin 管理员组

文章数量: 1086019

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://roclinux.cn/b/1718306108a720014.html">http://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/1738340508a1966669.html" class="post-item-title" title="快速电商排版网页布局ps神器插件_安装教程"> <h3>快速电商排版网页布局ps神器插件_安装教程</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">首先我们需要下载“淘宝电商店招海报排版PS扩展面板”，支持CC2015以上版本软件，下面我们来演示一下安装教程。 01、软件图标右键，打开文件位置。 02、打开文件夹“Req</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740070338a2128640.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">2月前</div> </div> <p class="post-item-summary">调用微信内置浏览器实现微信打开的网页上的图片能点击打开的效果为啥微信打开的网页有的图片能点击打开，有的不能呢？因为微信内置浏览器对打开的网页做了限制。一般我们使用微信的时候都不会特意修改浏览器，所以如果不做处理的话，微信打开的网页上的</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740071916a2128920.html" class="post-item-title" title="Google浏览器全屏打开指定网页（两种方式）"> <h3>Google浏览器全屏打开指定网页（两种方式）</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">第一种 kiosk 方式在桌面右键创建快捷方式，目标地址（Google浏览器安装地址要根据实际情况做修改）： “C:UsersAdministra</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740072191a2128969.html" class="post-item-title" title="浏览器网页链接打开本地exe程序"> <h3>浏览器网页链接打开本地exe程序</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">浏览器网页超链接打开本地exe程序的方法一、加注册表## 新建 aclient.reg 文件，加入以下代码，双击运行aclient.reg，就会将以下信息加到注册表中</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740073051a2129123.html" class="post-item-title" title="批量打开指定网页(windows)"> <h3>批量打开指定网页(windows)</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">批量打开网页地址：批量打开网址、网页、网站（网址、超链接批量打开工具，如何批量一键快速打开多个网站、网页） 在地址框内输入要批量打开的网页地址点击</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740073699a2129239.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">2月前</div> </div> <p class="post-item-summary">通过微信的扫一扫去下载，会出现白屏的情况，可能是因为安全性的考虑或者其他什么原因，目前已经无法通过微信的扫一扫去下载apk了。根据网友们提供的思路，本文整理了三种方案。 1、申请腾讯开放平台开发者具体流程可以去访问http:op</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740073797a2129255.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">2月前</div> </div> <p class="post-item-summary">今天遇到了一个问题，笔记能正常进行网络连接，微信、qq等软件都能正常消息收发，但是所有的浏览器都无法进行网页的访问，试了很多方法没有成功&#xf</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740073811a2129256.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">2月前</div> </div> <p class="post-item-summary">浏览器访问网页过程从在浏览器中输入网址，到最终屏幕上显示出网页的内容，在这个几秒不到的过程中到底是经历了那些步骤呢？ 其实访问一个网页就好比打电话这个过程。首先先得知道</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740073882a2129269.html" class="post-item-title" title="safari浏览器如何在下次打开时显示上次关掉的网页"> <h3>safari浏览器如何在下次打开时显示上次关掉的网页</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">设置-通用，如图所示，把对钩去掉。</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1740118654a2137220.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">1月前</div> </div> <p class="post-item-summary">在使用电脑的过程中，我们有时候会遇到网页打不开的情况。明明电脑没有断开网络，网页却打不开，这是怎么回事呢？这种情况一般都是跟网络问题&#xff0</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1741134913a2261783.html" class="post-item-title" title="电脑连不上网，浏览器网页打不开，但qq微信能发消息"> <h3>电脑连不上网，浏览器网页打不开，但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">1月前</div> </div> <p class="post-item-summary">这种情况一般是因为之前电脑挂了VPN或者梯子，未关闭退出就把电脑直接关机了，这样会导致电脑DNS域名出问题。 1. 打开Windows系统设置 2. 在搜索栏中搜索Internet选项 3.</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1742417126a2389314.html" class="post-item-title" title="在浏览器中运行Windows11网页版"> <h3>在浏览器中运行Windows11网页版</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">按照微软的预告，Windows 11 正式版会在 2021 年底推出。现在网上已经有了 Windows 11 ISO 预览版本，不过应该还是开发测试版，并不能应用于正式环境。</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1742569703a2409885.html" class="post-item-title" title="XMing + XShell 打开Linux服务器网页界面"> <h3>XMing + XShell 打开Linux服务器网页界面</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">1、修改X0.hosts文件修改为服务器的ip地址 2、打开XLaunch、XMing 打开XLaunch后一路下一步>下一步>完成打开XMing 3、XShell连接服务器连接服务器的时候SSH->隧道</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1742570467a2409986.html" class="post-item-title" title="设置网页默认为360浏览器极速模式打开"> <h3>设置网页默认为360浏览器极速模式打开</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">设置网页默认为360浏览器极速模式打开在head标签中添加一行代码： <html><head><meta name"renderer" content&quo</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1742571081a2410064.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">1月前</div> </div> <p class="post-item-summary">问题： 能够正常登陆QQ、微信等软件，但各个浏览器都无法访问网页。解决方法： 打开网络与Internet---代理---关闭使用自动代理出现问题的原因&</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1742571128a2410071.html" class="post-item-title" title="手机网页通过js打开app"> <h3>手机网页通过js打开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">1月前</div> </div> <p class="post-item-summary">因为公司市场需要，然后花了点时间研究下，本身是做的混合式APP嘛，有兴趣的大佬可以研究下先说重点： 1. 第三方浏览器通过网页打开app的普遍方法</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743680288a2461538.html" class="post-item-title" title="如何解压7z文件？8种方法（WinMac手机网页端）"> <h3>如何解压7z文件？8种方法（WinMac手机网页端）</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">18天前</div> </div> <p class="post-item-summary">7z 文件是一种高效的压缩文件格式，由 7 - Zip 软件开发者所采用。它运用独特的压缩算法，能显著缩小文件体积，便于存储与传输各类数据，像软件安装包</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743815345a2484361.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">16天前</div> </div> <p class="post-item-summary">本文的步骤是建立在，请求的是一个简单的 HTTP 请求，没有 HTTPS、HTTP2、最简单的 DNS、没有代理、并且服务器没有任何问题的基础上，尽管这是不切实际的。首先我们会一个个字母去敲击键盘打出来，然后屏幕显示到浏览器的输出框里，</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743862953a2492634.html" class="post-item-title" title="计算机无法播放flash,电脑中已安装Flash网页视频还是提示未安装Flash播放器怎么办..."> <h3>计算机无法播放flash,电脑中已安装Flash网页视频还是提示未安装Flash播放器怎么办...</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">16天前</div> </div> <p class="post-item-summary">‍ 如果在电脑中播放网页视频提示“未安装Flash播放器”，那么我们通常会考虑电脑中是否安装Flash插件或者是否更新到最新版本。但是在已经安装最新版Flash的情况下还是会出现该提示，导致无法播</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1743864156a2492828.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">16天前</div> </div> <p class="post-item-summary">网页打开后，微信分享的时候，微信没抓到图片怎么办？ 或者我们不想让微信随便抓，想有个默认的图片怎么办？ 我们这边采用最简单粗暴的</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=swFsHpsaGuSY3at5vmCZmJpAemwfyKUdor69CWqXL_2Fe5hOsYeNqhqPWU5t9pZY5LECIA7wNIETHkCfZyfKzNmA_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/1744005550a2517220.html" title="html - How do I apply line break in javascript - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> html - How do I apply line break in javascript - Stack Overflow </h3> </div> </a> <a href="/p/1744010883a2518129.html" title="javascript - changing button style not working - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> javascript - changing button style not working - Stack Overflow </h3> </div> </a> <a href="/b/1744021536a2519882.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="/p/1744063163a2527097.html" title="html - Toggle icon on button via JavaScript - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> html - Toggle icon on button via JavaScript - Stack Overflow </h3> </div> </a> <a href="/p/1744066469a2527690.html" title="javascript - Get attribute value with jQuery - Stack Overflow" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> javascript - Get attribute value with jQuery - Stack Overflow </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="javascript - Uncaught TypeError: String is not a function - Stack Overflow" target="_blank" href="/p/1743992658a2515018.html"> <h3>javascript - Uncaught TypeError: String is not a function - Stack Overflow</h3> </a> <span class="post-date">14天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Performance slow with kineticjs - Stack Overflow" target="_blank" href="/p/1744006040a2517305.html"> <h3>javascript - Performance slow with kineticjs - Stack Overflow</h3> </a> <span class="post-date">14天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - What is the easiest way to log how long someone is viewing a page using PHP? - Stack Overflow" target="_blank" href="/p/1744037472a2522635.html"> <h3>javascript - What is the easiest way to log how long someone is viewing a page using PHP? - Stack Overflow</h3> </a> <span class="post-date">14天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Jquery - How to change img src on hover? - Stack Overflow" target="_blank" href="/p/1744040408a2523147.html"> <h3>javascript - Jquery - How to change img src on hover? - Stack Overflow</h3> </a> <span class="post-date">14天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Unable to recreate python wand composite command in wand which works in imagemagick composite - Stack Overflow" target="_blank" href="/p/1744055430a2525760.html"> <h3>Unable to recreate python wand composite command in wand which works in imagemagick composite - Stack Overflow</h3> </a> <span class="post-date">14天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - how do i get file from filefield in ext js? - Stack Overflow" target="_blank" href="/p/1744067528a2527879.html"> <h3>javascript - how do i get file from filefield in ext js? - Stack Overflow</h3> </a> <span class="post-date">14天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Error: bundle initial-es5 exceeded maximum budget. Budget 6.00 MB was not met by 133.51 kB with a total of 6.13 MB " target="_blank" href="/p/1744068902a2528125.html"> <h3>javascript - Error: bundle initial-es5 exceeded maximum budget. Budget 6.00 MB was not met by 133.51 kB with a total of 6.13 MB </h3> </a> <span class="post-date">14天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - How can I give a dynamic class to vue3 main div #app? - Stack Overflow" target="_blank" href="/p/1744069126a2528163.html"> <h3>javascript - How can I give a dynamic class to vue3 main div #app? - Stack Overflow</h3> </a> <span class="post-date">14天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Darken an image using CSS - Stack Overflow" target="_blank" href="/p/1744088807a2531643.html"> <h3>javascript - Darken an image using CSS - Stack Overflow</h3> </a> <span class="post-date">13天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Is there anything wrong with mixing asyncawait with .then()? - Stack Overflow" target="_blank" href="/p/1744098263a2533302.html"> <h3>javascript - Is there anything wrong with mixing asyncawait with .then()? - Stack Overflow</h3> </a> <span class="post-date">13天前</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="javascript - How do I toggle the readonly attribute of all child element with jquery - Stack Overflow" target="_blank" href="/p/1744100356a2533471.html"> <h3>javascript - How do I toggle the readonly attribute of all child element with jquery - Stack Overflow</h3> </a> <span class="post-date">13天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Might it be possible to block an entire US state from accessing my site, using PHP? - Stack Overflow" target="_blank" href="/p/1744100331a2533470.html"> <h3>javascript - Might it be possible to block an entire US state from accessing my site, using PHP? - Stack Overflow</h3> </a> <span class="post-date">13天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="c++ - Is dereferencing std::span::end always undefined? - Stack Overflow" target="_blank" href="/p/1744100330a2533469.html"> <h3>c++ - Is dereferencing std::span::end always undefined? - Stack Overflow</h3> </a> <span class="post-date">13天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Delay function execution if it has been called recently - Stack Overflow" target="_blank" href="/p/1744100302a2533468.html"> <h3>javascript - Delay function execution if it has been called recently - Stack Overflow</h3> </a> <span class="post-date">13天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="javascript - Google Maps Autocomplete List - Stack Overflow" target="_blank" href="/p/1744100275a2533467.html"> <h3>javascript - Google Maps Autocomplete List - Stack Overflow</h3> </a> <span class="post-date">13天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="windows设置断电重启开机后自动输入锁屏密码登录" target="_blank" href="/b/1744098521a2533348.html"> <h3>windows设置断电重启开机后自动输入锁屏密码登录</h3> </a> <span class="post-date">13天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Windows系统设置开机默认开启数字小键盘" target="_blank" href="/b/1744098338a2533314.html"> <h3>Windows系统设置开机默认开启数字小键盘</h3> </a> <span class="post-date">13天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Windows11 开机自动同步时间（开机时间不更新问题）" target="_blank" href="/b/1744098057a2533264.html"> <h3>Windows11 开机自动同步时间（开机时间不更新问题）</h3> </a> <span class="post-date">13天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="windows配置开机自启动软件或脚本" target="_blank" href="/b/1744097709a2533205.html"> <h3>windows配置开机自启动软件或脚本</h3> </a> <span class="post-date">13天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="【Redis】Windows设置Redis为开机自启动" target="_blank" href="/b/1744097548a2533178.html"> <h3>【Redis】Windows设置Redis为开机自启动</h3> </a> <span class="post-date">13天前</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">3月前</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">3月前</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">3月前</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">3月前</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">3月前</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 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>