Html

什么是重排、重绘？首先咱们须要先理解浏览器渲染机制，浏览器渲染引擎是浏览器的外围组成部分之一，它负者将网页代码(html,CSS，javaScript) 转换为可视化的内容。 浏览器在渲染页面时，大抵分为解析HTML、解析CSS、构建DOM树和CSS树、合并DOM树和CSS树、布局和绘制，以及解决用户交互等。 解析HTML：浏览器首先会获取HTML文件，而后从上到下逐行解析HTML文档，生成DOM（Document Object Model）树。DOM树是一个节点树，它示意了文档的构造，使得开发者能够不便地操作和批改文档的内容和构造。解析CSS：在解析HTML的同时，浏览器也会解析CSS文件，生成CSSOM（CSS Object Model）树。CSSOM树蕴含了文档的款式信息，如元素的色彩、大小、地位等。构建渲染树：浏览器将DOM树和CSSOM树合并，生成渲染树（Render Tree）。渲染树只蕴含须要显示的节点和这些节点的款式信息。布局：浏览器依据渲染树，计算每个元素的地位和大小，这就是布局（Layout）过程。绘制：最初，浏览器依据渲染树和计算出的布局信息，将每个元素绘制到屏幕上，这就是绘制（Painting）过程。1. 解析html生成DOM树，解析css，生成CSSOM树，将DOM树和CSSOM树联合，生成渲染树；2. 依据渲染树，浏览器能够计算出网页中有哪些节点，各节点的CSS以及从属关系 - 回流3. 依据渲染树以及回流失去的节点信息，计算出每个节点在屏幕中的地位 - 重绘4. 最初将失去的节点地位信息交给浏览器的图形处理程序，让浏览器中显示页面在渲染过程中，浏览器还会进行各种优化，以进步渲染速度和效率。例如，浏览器会尽可能地并行加载和解析HTML、CSS和JavaScript文件，以缩小等待时间。此外，浏览器还会应用缓存、预加载等技术，以进步渲染速度。这些优化和并行处理使得浏览器的渲染速度更快，用户体验更好。 重排重排(reflow)：当页面的元素的地位、尺寸等产生扭转时，浏览器会从新计算该元素的几何属性并摆放到正确的地位的过程叫做重排。个别页面首次渲染、带有动画的元素、增加或删除性能、图片放大放大、浏览器扭转时都可能会触发重排。重排和回流其实是一回事，重排也叫回流。 要缩小重排，能够采取以下策略：批量批改元素：尽可能减少单个元素的批改次数，能够将屡次批改合并成一次，缩小浏览器的重排次数。防止频繁查问布局信息：在JavaScript中，防止频繁查问布局信息，如offsetWidth和offsetHeight，因为这些查问会导致浏览器强制同步，减少重排次数。应用文档片段：如果须要频繁地向页面中增加大量DOM节点，能够先将他们增加到文档片段中，最初再对立插入文档中，这样能够缩小重排的次数。应用CSS动画和过渡：在须要实现动画成果时，应用CSS动画和过渡，而不是JavaScript来操作元素款式，因为CSS动画和过渡能够由浏览器的合成线程来解决，不会触发重排。应用CSS Grid和Flex布局：这两种布局形式能够缩小对元素地位的频繁调整，从而缩小重排。防止table布局：table属性变动应用会间接导致布局重排或者重绘，因而尽量减少table的应用。请留神，尽管上述策略有助于缩小重排，但在某些状况下，重排是必要的，例如当页面的内容或布局发生变化时。因而，在优化重排时，须要衡量性能和用户体验，确保页面可能正确地出现并响应用户的操作。 缩小重排和重绘1.合并款式缩小重排的次数，比方给一个元素增加多个css款式属性，每一个属性都会造成重排回流，应将屡次操作合并成一个。例如：border、padding、margin。。。尽量将屡次操作合并成一次。 <style> p{ padding:10px; margin: 0px; border:1px solid red }</style>2.批量操作DOM3.防止屡次触发布局

w3c 标准结构化规范语言款式规范语言行为规范语言如何了解HTML语义化的?应用正确的标签做正确的事件。html 语义化让页面的内容结构化，构造清晰，便于对浏览器、搜索引擎解析，有利于开发者浏览。有利于搜索引擎的爬取，有利于seoiframe 框架有那些优缺点？长处： iframe 可能一成不变的把嵌入的网页展示进去。如果有多个网页援用 iframe，那么你只须要批改 iframe 的内容，就能够实现调用的每一个页面内容的更改，方便快捷。网页如果为了对立格调，头部和版本都是一样的，就能够写成一个页面，用 iframe 来嵌套，能够减少代码的可重用。如果遇到加载迟缓的第三方内容如图标和广告，这些问题能够由 iframe 来解决。毛病： 框架结构中呈现各种滚动条iframe 会阻塞主页面的 Onload 事件搜索引擎的检索程序无奈解读这种页面，不利于 SEOiframe 和主页面共享连接池，而浏览器对雷同域的连贯有限度，所以会影响页面的并行加载。img 上 title 与 alt答案：title 鼠标放到图片上展现的信息、alt 图片不显示时显示的文字 Viewport 属性值width 设置 layout viewport 的宽度，为一个正整数，或字符串"width-device"initial-scale 设置页面的初始缩放值，为一个数字，能够带小数minimum-scale 容许用户的最小缩放值，为一个数字，能够带小数maximum-scale 容许用户的最大缩放值，为一个数字，能够带小数height 设置 layout viewport 的高度，这个属性对咱们并不重要，很少应用user-scalable 是否容许用户进行缩放，值为"no"或"yes", no 代表不容许，yes 代表容许这些属性能够同时应用，也能够独自应用或混合应用，多个属性同时应用时用逗号隔开就行了。html 常见兼容性问题双边距 BUG float 引起的， 解决办法: 应用 display：inline解决3像素问题 应用 float 引起的 解决办法: 应用 dislpay:inline -3px超链接 hover 点击后生效 解决办法: 应用正确的书写程序 link visited hover activeIe z-index 问题 解决办法: 给父级增加 position:relativePng 通明 ...

成果预览按下右侧的“点击预览”按钮能够在以后页面预览，点击链接能够全屏预览。 https://codepen.io/comehope/pen/qBLRbBM 源代码下载每日前端实战系列的全副源代码请从 github 下载： https://github.com/comehope/front-end-daily-challenges 代码解读这个撕日历的我的项目尽管代码量不大，但外面有一些精妙的技巧，值得咱们学习。 整个作品咱们分成三个步骤开发，先进行动态布局，而后实现动静更换日历页，最初退出动画成果。 一、动态布局DOM 构造是一个 .calendar 容器，其中蕴含一个示意日历页的 .page 元素，.page 里包含示意月份的 .month 元素，示意日期的 .day 元素，示意星期的 .day-name 元素，示意年的 .year 元素。 回忆一下生存中的日历，一本日历是蕴含很多日历页的，在这里也是同样的，前面你会看到，当撕掉一个 .page 元素之后，就会减少一个新的 .page 元素。当初咱们只解决布局，所以临时 DOM 中只排版一页就够了： <div class="calendar"> <div class="page"> <p class="month">November</p> <p class="day">1</p> <p class="day-name">Monday</p> <p class="year">2021</p> </div></div>设置 body 的子元素，也就是 .calendar 元素居中，同时设置深色背景： body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #222;}画出日历的轮廓，用 background-image 的线性突变函数，把 .calendar 容器分成上、中、下三局部，上局部是砖红色的日历顶部，中部是浅黄色的日历页，下部是深卡其色的日历底部： .calendar { width: 152px; height: 218px; background-image: linear-gradient( firebrick 0, firebrick 45px, lightgoldenrodyellow 45px, lightgoldenrodyellow 208px, darkkhaki 208px, darkkhaki 218px ); position: relative;}以后成果如下图所示： ...

背景保障数据安全是当今互联网时代的重要工作。为了应答日益简单的网络攻击，行为验证码应运而生。行为验证码通过剖析用户在网站上的行为模式，辨认失常用户并阻止歹意流动。 它不仅提供了更弱小的身份确认形式，还能无效缩小伪造身份和破解账户的危险。从行为验证码开始，咱们能够为数据安全建设起松软的防线。 前端代码<script src="https://cdn6.kgcaptcha.com/captcha.js"></script><script>kg.captcha({ // 绑定弹窗按钮 button: "#captchaButton", // 验证胜利事务处理 success: function (e) { // 验证胜利，间接提交表单 // form1.submit(); console.log(e); }, // 验证失败事务处理 failure: function (e) { console.log(e); }, // 点击刷新按钮时触发 refresh: function (e) { console.log(e); }});</script><a id="captchaButton">点击弹出验证窗口</a>Python代码from wsgiref.simple_server import make_serverfrom KgCaptchaSDK import KgCaptchadef start(environ, response): # 填写你的 AppId，在利用治理中获取 AppID = "AppID" # 填写你的 AppSecret，在利用治理中获取 AppSecret = "AppSecret" request = KgCaptcha(AppID, AppSecret) # 填写应用服务域名，在利用治理中获取 request.appCdn = "https://cdn6.kgcaptcha.com" # 申请超时工夫，秒 request.connectTimeout = 10 # 用户id/登录名/手机号等信息，当安全策略中的防控等级为3时必须填写 request.userId = "kgCaptchaDemo" # 应用其它 WEB 框架时请删除 request.parse，应用框架提供的办法获取以下相干参数 parseEnviron = request.parse(environ) # 前端验证胜利后颁发的 token，有效期为两分钟 request.token = parseEnviron["post"].get("kgCaptchaToken", "") # 前端 _POST["kgCaptchaToken"] # 客户端IP地址 request.clientIp = parseEnviron["ip"] # 客户端浏览器信息 request.clientBrowser = parseEnviron["browser"] # 去路域名 request.domain = parseEnviron["domain"] # 发送申请 requestResult = request.sendRequest() if requestResult.code == 0: # 验证通过逻辑解决 html = "验证通过" else: # 验证失败逻辑解决 html = f"{requestResult.msg} - {requestResult.code}" response("200 OK", [("Content-type", "text/html; charset=utf-8")]) return [bytes(str(html), encoding="utf-8")]httpd = make_server("0.0.0.0", 8088, start) # 设置调试端口 http://localhost:8088/httpd.serve_forever()最初SDK开源地址：https://github.com/KgCaptcha，顺便做了一个演示：https://www.kgcaptcha.com/demo/ ...

前言注册登录账户时，保障账户平安是首要任务！应用趣味滑块验证码，既能无效进攻歹意攻打，又能为验证过程削减一丝乐趣。让注册和登录变得更加乏味又平安！ HTML代码<script src="https://cdn6.kgcaptcha.com/captcha.js"></script><script>kg.captcha({ // 绑定元素，验证框显示区域 bind: "#captchaBox", // 验证胜利事务处理 success: function(e) { console.log(e); }, // 验证失败事务处理 failure: function(e) { console.log(e); }, // 点击刷新按钮时触发 refresh: function(e) { console.log(e); }});</script><div id="captchaBox">载入中 ...</div>PHP代码<?phpinclude "KgCaptchaSDK.php";// 填写你的 AppId，在利用治理中获取$appId = "appId";// 填写你的 AppSecret，在利用治理中获取$appSecret = "appSecret";$request = new kgCaptcha($appId, $appSecret);// 填写应用服务域名，在利用治理中获取$request->appCdn = "https://cdn6.kgcaptcha.com";// 前端验证胜利后颁发的 token，有效期为两分钟$request->token = $_POST["kgCaptchaToken"];// 当安全策略中的防控等级为3时必须填写$request->userId = "kgCaptchaDemo";// 申请超时工夫，秒$request->connectTimeout = 10;$requestResult = $request->sendRequest();if ($requestResult->code === 0) { // 验签胜利逻辑解决 echo "验证通过";} else { // 验签失败逻辑解决 echo "验证失败，错误代码：{$requestResult->code}， 错误信息：{$requestResult->msg}";}最初SDK开源地址：https://github.com/KgCaptcha，顺便做了一个演示：https://www.kgcaptcha.com/demo/ ...

你去看《孤注一掷》了吗？置信最近大家的朋友圈和抖音都被爆火电影《孤注一掷》胜利刷屏。取材于上万实在案例的《孤注一掷》揭发了缅甸欺骗园区残忍的统治，以及电信欺骗中系统性极强的欺骗技巧，引发了大量探讨。来源于电影《孤注一掷》 这部电影除了让人后背发凉外，也不禁让人回忆起了已经上网冲浪遇到的种种景象：看小说时性感荷官总在网页右下角在线发牌；看电影时网页左下角经常蹦出“在线老虎机”……这些让人烦不胜烦的广告弹窗之所以呈现，要么是建站人员唯利是图投放了非法广告，要么就是因为网站应用了不平安的 HTTP 协定而受到了攻打，失常的网页内容被歹意篡改。 网站是电信欺骗、网络赌博等非法内容呈现的重灾区，建站者和使用者都应该进步安全意识，特地是对建站者来说，爱护通信安全能力更好的承当起建站责任。本文将从 HTTP 讲起，介绍 HTTPS 爱护通信安全的原理，以及作为网络通信平安基石的 SSL 证书的重要性。 HTTP 协定HTTP（Hyper Text Transfer Protocol）协定是超文本传输协定。它是从 WEB 服务器传输超文本标记语言（HTML）到本地浏览器的传送协定。HTTP 基于 TCP/IP 通信协议来传递数据，通信单方在 TCP 握手后即可开始相互传输 HTTP 数据包。具体过程如下图所示：HTTP 建设流程 HTTP 协定中，申请和响应均以明文传输。如下图所示，在拜访一个应用 HTTP 协定的网站时，通过抓包软件能够看到网站 HTTP 响应包中的残缺 HTML 内容。 尽管 HTTP 明文传输的机制在性能上带来了劣势，但同时也引入了平安问题： 短少数据机密性爱护。HTTP 数据包内容以明文传输，攻击者能够轻松窃取会话内容。短少数据完整性校验。通信内容以明文传输，数据内容可被攻击者轻易篡改，且单方短少校验伎俩。短少身份验证环节。攻击者可假冒通信对象，拦挡实在的 HTTP 会话。HTTP 劫持作为划时代的互联网通信规范之一，HTTP 协定的呈现为互联网的遍及做出了不可磨灭的奉献。但正如上节谈到， HTTP 协定因为短少加密、身份验证的过程导致很可能被歹意攻打，针对 HTTP 协定最常见的攻打就是 HTTP 劫持。 HTTP 劫持是一种典型的中间人攻打。HTTP 劫持是在使用者与其目标网络服务所建设的数据通道中，监督特定数据信息，当满足设定的条件时，就会在失常的数据流中插入精心设计的网络数据报文，目标是让用户端程序解析“谬误”的数据，并以弹出新窗口的模式在使用者界面展现宣传性广告或间接显示某网站的内容。 下图是一种典型的 HTTP 劫持的流程。当客户端给服务端发送 HTTP 申请，图中发送申请为“梁安娜的电话号码是？”，歹意节点监听到该申请后将其放行给服务端，服务端返回失常 HTML 响应，要害返回内容本应该是“+86 130**1234”，歹意节点监听到该响应，并将要害返回内容篡改为泰国区电话“+66 6160 88”，导致用户端程序展现出错误信息，这就是 HTTP 劫持的全流程。HTTP 劫持流程 例如，在某网站浏览某网络小说时，因为该网站应用了不平安的 HTTP 协定，攻击者能够篡改 HTTP 相应的内容，使网页上呈现与原响应内容无关的广告，疏导用户点击，可能将跳转进入网络欺骗或其余非法内容的页面。原网页HTTP 劫持后网页 ...

前言在当今的数字时代，随着网络安全问题的日益突出，人们对于账户平安的需要也越来越迫切。而滑动拼图验证码作为一种翻新的验证形式，正逐步受到宽广用户的青睐和利用。 滑动拼图验证码不仅可能无效抵挡自动化攻打，更能够锤炼玩家的观察力和急躁。通过挪动拼图块，实现完满的画面重组，既考验了你的目力，也挑战了你的智力。 PHP代码<?phpinclude "KgCaptchaSDK.php";// 填写你的 AppId，在利用治理中获取$appId = "appId";// 填写你的 AppSecret，在利用治理中获取$appSecret = "appSecret";$request = new kgCaptcha($appId, $appSecret);// 填写应用服务域名，在利用治理中获取$request->appCdn = "https://cdn6.kgcaptcha.com";// 前端验证胜利后颁发的 token，有效期为两分钟$request->token = $_POST["kgCaptchaToken"];// 当安全策略中的防控等级为3时必须填写$request->userId = "kgCaptchaDemo";// 申请超时工夫，秒$request->connectTimeout = 10;$requestResult = $request->sendRequest();if ($requestResult->code === 0) { // 验签胜利逻辑解决 echo "验证通过";} else { // 验签失败逻辑解决 echo "验证失败，错误代码：{$requestResult->code}， 错误信息：{$requestResult->msg}";}HTML代码<script src="https://cdn6.kgcaptcha.com/captcha.js"></script><script>kg.captcha({ // 绑定元素，验证框显示区域 bind: "#captchaBox", // 验证胜利事务处理 success: function(e) { console.log(e); }, // 验证失败事务处理 failure: function(e) { console.log(e); }, // 点击刷新按钮时触发 refresh: function(e) { console.log(e); }});</script><div id="captchaBox">载入中 ...</div>成果展现 ...

前言遗记传统的验证码输出形式吧！翻新的文字点选验证码，让你通过抉择正确的文字来验证你的人类身份。这种形式不仅更加便捷，还能无效避免机器人攻打。体验文字点选验证码的魅力！ PHP代码<?phpinclude "KgCaptchaSDK.php";// 填写你的 AppId，在利用治理中获取$appId = "appId";// 填写你的 AppSecret，在利用治理中获取$appSecret = "appSecret";$request = new kgCaptcha($appId, $appSecret);// 填写应用服务域名，在利用治理中获取$request->appCdn = "https://cdn6.kgcaptcha.com";// 前端验证胜利后颁发的 token，有效期为两分钟$request->token = $_POST["kgCaptchaToken"];// 当安全策略中的防控等级为3时必须填写$request->userId = "kgCaptchaDemo";// 申请超时工夫，秒$request->connectTimeout = 10;$requestResult = $request->sendRequest();if ($requestResult->code === 0) { // 验签胜利逻辑解决 echo "验证通过";} else { // 验签失败逻辑解决 echo "验证失败，错误代码：{$requestResult->code}， 错误信息：{$requestResult->msg}";}HTMl代码<script src="https://cdn6.kgcaptcha.com/captcha.js"></script><script>kg.captcha({ // 绑定元素，验证框显示区域 bind: "#captchaBox", // 验证胜利事务处理 success: function(e) { console.log(e); }, // 验证失败事务处理 failure: function(e) { console.log(e); }, // 点击刷新按钮时触发 refresh: function(e) { console.log(e); }});</script><div id="captchaBox">载入中 ...</div>最初SDK开源地址：https://github.com/KgCaptcha，顺便做了一个演示：https://www.kgcaptcha.com/demo/ ...

之前在这篇文章（CSS 实现树状构造目录）中实现了一个树状构造，成果是这样的 整个实现没有用到任何 JavaScript，十分奇妙，有趣味能够回顾一下。 不过有时候还须要那种带连接线的款式，这样看起来层级会更清晰，就像这样 这是如何实现的呢？一起来看看吧~ 一、details 和 summary简略回顾一下，整体构造须要利用到 details 和 summary，人造地反对内容开展和收起。这里有一个 MDN 的例子 <details> <summary>System Requirements</summary> <p>Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.</p></details>间接就实现了开展和收起 还能够反对多层嵌套，只须要将details当做开展的内容就行了，如下 <details> <summary>我的项目1</summary> <details> <summary>文件夹0</summary> </details> <details> <summary>文件夹1-1</summary> <details> <summary>文件夹1-1-2</summary> </details> <details> <summary>文件夹1-1-3</summary> ... </details></details>这样就失去了一个简略的树状构造 ...

1.背景在云主机上写了一个很简略的html页面，预期能通过IP+端口查看下页面的样子，然而发现拜访异样，（该主机效期足够，绑过域名，已经http\s都失常）。 2.排查步骤2.1.平安组已凋谢端口 2.2.查看apache过程ps aux | grep apache 2.3.查看主机端口应用状况 2.4.查看httpd服务systemctl status httpd 2.5.查看防火墙状态systemctl status firewalld 2.6.拜访主机80端口 无法访问此网站114.*.*.206 的响应工夫过长。请试试以下方法：查看网络连接查看代理服务器和防火墙ERR_CONNECTION_TIMED_OUT2.7.从另外一台主机查看端口yum install -y nmap[root@yaong sysconfig]# nmap -p 80 114.*.*.206Starting Nmap 6.40 ( http://nmap.org ) at 2023-06-15 21:10 CSTNmap scan report for yaung (114.*.*.206)Host is up (0.0061s latency).PORT STATE SERVICE80/tcp filtered http 2.8.查看iptablescat /etc/sysconfig/iptables 2.9.查看防护墙过滤规定iptables -nvL 2.10.减少规定2.10.1.准许承受80端口的拜访申请iptables -I INPUT -p tcp --dport 80 -j ACCEPT2.10.2.再次拜访主站首页失常显示，拜访通了 2.10.3.再次查看防火墙配置cat /etc/sysconfig/iptables没有新增规定 2.10.4.另一台主机查问端口状态nmap -p 80 114.*.*.206 Host is up (0.0055s latency).PORT STATE SERVICE80/tcp open http2.11.保留防火墙规定2.11.1.对防火墙服务进行保留，再查看防火墙配置service iptables savecat /etc/sysconfig/iptables ...

能在安卓app上应用动静增加文字、并且文字可能拖拽、编辑、删除、缩放、设置色彩、字体大小、文字排列形式，还有能够插入图片、并且图片也能缩放、删除。 假如场景：用户在后盾页面上配置自定义海报，须要将数据传到app并展现。 我应用的是fabricjs。官网：http://fabricjs.com/ 实现的原理就是应用webview间接实现，我在网上找了很久也没有找到比拟快的办法实现，其实有一种，那就是应用canvas去实现，然而canvas的绘制很简单、麻烦。大佬能够试试emmm 间接上代码了emmm，做个笔记。 index.vue的代码如下： <template> <view class="promotionPosterEdit"> <web-view :src="'../../../hybrid/html/promotionPosterEdit/index.html?data=' + obj" @message="getMessage" ref="wv"></web-view> </view></template><script> import { pathToBase64, base64ToPath } from '../../../js_sdk/mmmm-image-tools/index.js'; export default { data() { return { obj: null, currentWebview: null, } }, onLoad() { let statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] let top = uni.getStorageSync('navbarHeight') + 30 let height = uni.getSystemInfoSync()['screenHeight'] - 64 - uni.getStorageSync('navbarHeight') - 74 let width = uni.getSystemInfoSync()['screenWidth'] - 100 let screenHeight = uni.getSystemInfoSync()['screenHeight'] let obj = { statusBarHeight: statusBarHeight, top: top, height: height, width: width, screenHeight: screenHeight } this.obj = JSON.stringify(obj) //这里是传给webview的参数用来调整款式的 }, onReady() { const self = this self.currentWebview = self.$scope.$getAppWebview().children()[0] }, methods: { getMessage(e) { console.log('接管html发送的数据', e.detail) if(e.detail.data[0].msg === 'openCamera') { //关上手机相册 uni.chooseImage({ count: 1, success: (res) => { console.log('长期门路', res.tempFilePaths[0]) pathToBase64(res.tempFilePaths[0]).then(base64 => { let info = base64.replace(/[\r\n]/g, '') const self = this; self.currentWebview.evalJS(`uniEvent(${JSON.stringify(info)})`); //app向html发送数据 }).catch(error => { console.log('转换失败：', error); }); } }) } else if(e.detail.data[0].msg === 'save') { //保留到手机相册 console.log('app', e.detail.data[0].canvas) uni.showLoading({ title: '保留中...' }) let imageStr = e.detail.data[0].canvas base64ToPath(imageStr).then(path => { console.log('转换下载图片', path) this.saveImage(path); }).catch(error => { console.error('长期门路转换出错了：', error); }); } else if(e.detail.data[0].msg === 'wx') { //转发到微信 uni.showToast({ icon: 'none', title: '暂未凋谢' }) } else if(e.detail.data[0].msg === 'friend') { //转发到微信朋友圈 uni.showToast({ icon: 'none', title: '暂未凋谢' }) } else if(e.detail.data[0].msg === 'addEmptyText') { //不能增加空文字 uni.showToast({ icon: 'none', title: '请输出文字' }) } }, // 保留canvas图片到手机相册 saveImage(filePath) { uni.saveImageToPhotosAlbum({ filePath, // 须要临时文件门路，base64无奈保留 success: () => { uni.hideLoading() uni.showToast({ icon: 'none', title: '保留胜利' }) }, fail: (error) => { console.error('保留失败，请重试', error); } }); }, } }</script><style lang="scss" scoped> .promotionPosterEdit { min-height: 100vh; background-color: #303030; }</style>/hybrid/html/promotionPosterEdit/index.html的代码如下：应用的插件html2canvas 1.4.1 https://html2canvas.hertzen.comfabricjs5.3.0 ...

欢送大家围观小阑精心整顿的API平安最新资讯，在这里你能看到最业余、最前沿的API平安技术和产业资讯，咱们提供对于寰球API平安资讯与信息安全深度察看。本周，咱们带来的分享如下：一篇对于凭证透露导致API破绽回升的文章一篇对于探讨API网关安全性的文章一篇对于PCI DSS 4.0对API平安影响的文章 凭证透露导致API破绽回升一篇来自Security Week的文章，探讨凭证透露导致的API破绽一直增长。最近的一项考察发现，超过一半的美国专业人士曾蒙受过API破绽，但77％人认为他们的组织无效地治理了API令牌。这听起来有点矛盾，因为很多专业人士对他们的凭证治理很有信念，但还是会产生凭证相干的API破绽状况。钻研结果表明，这种显著的矛盾背地有三个次要起因：不足对现有API组合的可视性；应用的API数量太多难以跟踪；低估了治理API凭证所需的工夫和精力。这项考察还掂量了凭证治理的老本，并发现大多数受访者每周破费超过15小时来治理凭证。这一数字可能并不齐全精确，但能够看出凭证治理老本的一直回升。问题将只会加剧，因为API扩散一直减少，构建环境变得更加扩散，须要更多的凭证散发和治理。面对这些挑战，组织只能抉择疏忽问题或投入更多的金钱来解决凭证管理所带来的问题。Corsha公司提出能够缓解这种状况的解决方案，就是为API提供多因素认证（MFA）。这种解决方案有三个长处： 能够进行微段隔离，防止网络中的横向流传；升高MFA疲劳的危险；打消凭证轮换问题，因为偷盗或透露的凭证无奈在满足MFA要求之前应用。小阑认为：随着API数量的一直减少以及对API安全性的加强需要，MFA将成为一个不可或缺的安全措施。同时，还须要思考到人工智能和自动化技术等方面的倒退，以便找到更好的办法来治理API凭证，并确保API的平安。另外，MFA疲劳攻打是一种重大的平安威逼，能够通过应用自动化工具对受爱护的帐户进行屡次MFA尝试来施行。攻击者可能会窃取敏感信息或执行其余不良行为，从而对组织的平安和业务流程造成影响。为了防备MFA疲劳攻打，组织能够采纳多种策略，例如应用MFA应用程序、设置帐户锁定策略、应用机器学习技术、减少MFA代码的复杂度以及增强身份验证。通过采取这些措施，组织能够更好地爱护其用户和敏感数据，并进步安全性。 你的API网关有多平安？这是一篇来自The New Stack的文章，深刻探讨了API网关平安的重要性。作者认为，因为API网关是基础设施中如此要害的一部分，负责部署网关的人必须充分考虑网关自身的安全性。因为它们与组织基础设施的严密耦合，API网关很少被更改，这使得抉择网关时安全性成为首要思考因素。文章提出有四个因素对API网关整体安全性产生影响：API网关个别是在开源实现和公有源代码之上构建的。因而，企业须要应用古代软件资料清单（SBOM）技术来治理整个软件堆栈中的破绽，以便更好地理解API网关的危险。除此之外，还须要思考API网关如何与其余平安防护措施（如Web应用程序防火墙、全局防火墙和负载均衡器、监控平台）集成。这种严密集成对于保障应用程序的高性能十分重要，并且须要尽量减少在部署混合多云环境时对操作团队的影响。大型企业应该思考在整个组织中执行雷同的策略可能会遇到的问题，特地是当技术堆栈十分异构的时候。这会导致不同反向代理以不同形式实现雷同的策略，从而导致奥妙但重要的差别。这种时候的解决办法是，确保在购买前进行彻底的概念验证（PoC）。最初须要特地关注API网关的速度（提早），这对长期应用和其安全性至关重要。如果抉择的API网关性能不佳，那么API团队最终会寻求调整策略，甚至在极其状况下齐全绕过API网关。因而，API的性能通常是API网关胜利的关键因素之一。小阑解读：API网关的访问控制通常以身份验证机制开始，以便确认调用的起源。目前，最受欢迎的网关验证协定是OAuth，它充当拜访基于Web的资源的代理而不向服务公开明码，基于密钥的身份验证在用于企业时，也有失落数据的案例，还不能百分之百保障密钥完全保密。API网关的劣势： 在对立的地位治理和施行；将大部分问题内部化，因而简化了API源代码；提供API的管理中心和视图，更不便采纳统一的策略；API网关的毛病：容易呈现单点故障或瓶颈；因为所有API规定都在一个地位，因而存在复杂性危险；被锁定的危险，日后零碎迁徙并不简略。安全性是公司首要思考基础架构中投入的头等关注点。然而，它也是现有API开发者最容易漠视的畛域。因为很多公司正在本人构建API作为产品，以部署Web，挪动客户端，物联网和其它应用程序，在整个过程中的每一步都须正确爱护，API网关是最无效的解决方案之一。 PCI DSS 4.0对API平安的影响PCI DSS规范是指支付卡行业数据安全规范（Payment Card Industry Data Security Standard），是由VISA、MasterCard、Discover、JCB和American Express等信用卡品牌独特制订的数据安全规范，旨在确保无关交易的解决和存储数据安全。任何解决信用卡领取的机构都必须恪守该规范。PCI DSS规范包含一些规定和要求，以确保对客户付款信息的爱护，避免数据透露和欺诈行为。最新版本4.0为软件的平安开发和部署提供了具体条款，文章探讨这些条款对API开发人员可能产生的影响。以下是与软件开发和部署相干的要害条款：6.2 – Bespoke and custom software are developed securely.这是采纳平安SDLC或采纳“左移”开发的领导。对于API开发，开发人员必须尽早理解平安需要，并在整个生命周期中应用平安开发方法。6.2.3 – Bespoke and custom software is reviewed prior to being released into production or to customers, to identify and correct potential coding vulnerabilities.该条款领导开发人员应用代码审核（包含OAS定义和API代码）来确保尽可能大程度上缩小编码破绽。这些审核能够在开发生命周期的各个阶段主动进行。6.2.4 – Software engineering techniques or other methods are defined and in use by software development personnel to prevent or mitigate common software attacks and related vulnerabilities in bespoke and custom software.在API上下文中，该控件批示应用高级测试方法来辨认针对API的各种软件攻打。倡议的最佳实际是应用特定的API测试来检测家喻户晓的破绽类型（如损坏的对象级别受权和损坏的身份验证），次要是应用自动化测试（专用的API平安扫描工具）或通过定制浸透测试。6.4 Public-facing web applications are protected against attacks.该标准规定应爱护面向公众的API免受攻打，通常通过API网关或专用API防火墙。小阑认为：API平安的重要性不言自明，它波及到数据和信息的爱护、合规性以及竞争劣势等多个方面，是每个企业在数字化转型过程中必须认真对待和增强的重要环节。随着数字化与智能化过程的减速推动，API成为不同零碎、利用和数据的粘合剂，承当着越来越多的业务性能。而这些业务性能往往包含金融交易数据、个人信息等波及个人隐私和商业秘密的数据。因而，确保API的安全性不仅是企业信息安全治理的重要一环，更是整个数字时代信息安全和隐衷爱护的基石。感激 http://APIsecurity.io 提供相干内容 ...

本周，咱们带来的分享如下： Money Lover爆出潜在API破绽丰田治理经营平台的API破绽一篇对于规范测试脱漏的API缺点文章Twitter发表施行API付费，解决机器人滥用问题Money Lover爆出潜在API破绽Dark Reading对越南Finsify开发的“Money Lover”应用程序中存在API潜在破绽。Money Lover是一款治理集体财务的工具应用程序。它能够帮忙用户记录和跟踪他们的收入、支出、估算、账单和债权等方面的状况。通过这个应用程序，用户能够更好地理解本人的财务状况，把握本人的收支流水，制订更理智的理财打算。此外，Money Lover还提供了多种性能，如数据同步、报表剖析、揭示告诉等，使用户的财务管理更加不便和高效。这个破绽是由Trustwave研究员Troy Driver发现的，他在通过代理服务器路由流量时，发现了Money Lover的安全性问题。每个共享钱包的电子邮件地址、钱包名称和实时交易数据对他来说是可见的。钻研人员没有走漏发现的破绽的确切细节，但阐明这破绽具备访问控制中断的所有特色，无论是对象级受权中断还是用户身份验证中断。对象级受权中断破绽指的是攻击者能够通过绕过应用程序中的受权查看，对未经受权的资源进行拜访、批改或删除等操作。在Money Lover利用中，如果存在该破绽，攻击者可能会利用此破绽获取到其余用户的敏感信息，如账户余额、交易记录等，并且还可能篡改或删除用户的数据，导致用户的账户受损或者财务数据被泄露。为了防备对象级受权中断破绽，须要采取一些安全措施，例如：对所有敏感资源进行访问控制，只容许通过受权的用户或角色进行拜访和操作。对要害业务逻辑进行审计和监控，及时发现并阻止未经受权的拜访或操作。对应用程序进行频繁的平安测试和破绽扫描，发现并修复问题。在开发过程中恪守平安最佳实际，如输出验证、输入编码、明码平安、错误处理等。 丰田治理经营平台的API破绽最近，平安研究员伊顿·兹韦尔（Eaton Zveare）发现了丰田公司治理经营的零碎存在安全漏洞，能够让攻击者不受到监测地拜访丰田外部的文件和用户账户。这个问题波及到超过14,000名用户和机密信息，如果攻击者利用破绽加上他们本人的账户，就能够长期地获取丰田的数据，影响公司的寰球经营。侥幸的是，丰田很快就修复了这个破绽，胜利地爱护了公司和客户的信息安全。Zveare宣称，他可能利用安全性较差的应用程序编程接口（API）来闯入丰田GSPIMS零碎，并能够齐全拜访丰田外部我的项目，文档和用户帐户，包含丰田内部合作伙伴/供应商的用户帐户。该治理经营平台的API破绽危险点，在于攻击者能够利用安全性较差的API接口入侵零碎，齐全拜访丰田外部的我的项目、文档和用户账户，包含供应商和内部合作伙伴的账户，甚至可能拜访机密文件和我的项目。攻击者能够增加本人的账户，并在不被发现的状况下永恒拜访丰田的数据，影响公司寰球经营，带来重大的财务和名誉损失。对于这种API破绽，小阑倡议能够采取以下防护措施： 增强API接口的安全性设计，对输入输出进行限度和过滤，避免歹意攻击行为；建设严格的用户权限管制机制，只受权给有必要拜访的人员，并对其进行监控和审计；对要害数据进行加密和脱敏解决，避免泄密和信息泄露；建设全面的安全事件应急预案和响应机制，确保在呈现平安问题时可能及时安顿应答措施，缩小损失和影响。对于规范测试脱漏的API缺点最近，《The Daily Swig》采访了Corey Ball，他分享了对2023年API安全性的认识。外围论断是，爱护API平安须要一种不同于Web应用程序平安的办法。尽管Web应用程序平安工具对于避免根本破绽缺点（如SQL注入）依然有用，然而它们无奈全面理解API实现的上下文，从而无奈检测某些类别的API破绽。因而，咱们须要针对API设计和施行专门的平安办法，能力更好地保障API的安全性。Ball提到，随着API的宽泛应用，它们越来越成为攻击者的次要攻打指标。网络上常见的API平安谬误在数量上急剧减少，其中包含生效的对象级受权和缺失性能级受权等问题，这些受权谬误使得攻击者能够未经受权地拜访其余用户的数据。Ball示意：“因为API受权破绽普遍存在，咱们过于信赖无效用户，并没有充沛的测试来确保用户不能更改彼此的数据。” 因而，企业须要采取措施来避免这种状况产生，包含施行严格的API受权访问控制和进行充沛的平安测试，能力确保API的安全性。其实，在事实我的项目中，规范测试往往无奈齐全检测出所有API缺点，除了文章中提到的问题，还有一些可能被脱漏的API缺点： 认证问题：规范测试可能无奈检测出API认证计划中存在的弱点或者未被发现的破绽。受权问题：因为受权问题通常波及低频率事件或者特定场景，规范测试可能无奈笼罩所有的受权场景并检测受权中的破绽。配置问题：API配置谬误可能导致安全性问题。例如，未正确设置SSL/TLS证书、应用默认凭据等。这种问题不会在规范测试中失去充沛检测。数据保护问题：在API设计和实现阶段对数据保护进行有余的思考可能导致平安问题。例如敏感数据的传输时没有加密爱护。持久性问题：规范测试可能无奈齐全检测出与API持久性相干的平安问题，例如利用程序逻辑谬误、数据库注入、 文件系统攻打等。平安日志记录问题：规范测试有可能无奈检测出API平安日志记录的问题，如平安日志记录缺失或日志记录有余，这可能导致对安全事件的响应和复原艰难。文章论述的API破绽次要是生效的对象级受权，让攻击者能够利用生效的对象级别受权的API端点，通过操纵在申请中发送的对象拜访未经受权的敏感数据。这个问题在基于API的应用程序中极为常见，因为服务器组件通常不齐全跟踪客户端的状态，而是更多地依赖于从客户端发送的对象ID等参数来决定对象的拜访。面对文章中所说的API破绽问题，小阑倡议： 施行依赖于用户策略和层次结构的适当的受权策略。应用受权机制查看登录用户是否有权拜访通过URL指定的资源。应用随机或者不可预测的值作为记录ID，如GUID。编写测试用例来评估受权机制的破绽，不要公布测试失败的变更。Twitter发表施行API付费 解决机器人滥用问题本周，简略介绍Twitter在打击滥用其API的机器人帐户方面的停顿。报道谈到了Twitter在打击机器人造假帐号问题上的停顿，这是Twitter面临的一个很大的问题。机器人能够被网络犯罪分子利用来流传垃圾邮件和歹意链接，同时也会影响公众舆论的造成。Twitter团队发表，他们将不再提供收费的API拜访，有些人认为这是因为Twitter想借此伎俩赚更多的广告支出。一些人持狐疑态度，认为社交媒体网站能够采取更好的策略和工具来打击这种僵尸网络，例如：辨认可疑帐户、应用业余工具、将帐户与事实世界的集体和组织分割起来等等。歹意机器人滥用是一种利用API接口实现的攻打伎俩。攻击者能够编写特定的程序，利用API接口一直生成、公布大量自动化的虚伪信息、垃圾邮件和歹意链接，从而诱骗用户点击、下载恶意软件或输出集体敏感信息，导致用户受到坑骗和侵害。这种机器人的滥用会带来许多重大的结果，例如毁坏公共秩序，诱发社会事件，影响公众舆论，甚至可能泄露用户个人隐私等。另外，因为歹意机器人是自动化的，因而攻击者能够轻松地制作大规模的攻打，这对网络安全造成了极大的威逼。为了防备歹意机器人滥用，小阑倡议能够采取以下措施： 增强API访问控制，减少用户认证和受权机制；开发主动监控机制，及时检测和封禁异样行为；应用机器学习和人工智能等技术，辨认并过滤歹意机器人产生的信息；激励用户进步安全意识，不轻易点击或下载未知起源的内容。感激 http://APIsecurity.io 提供相干内容

HTML混合3D渲染在古代Web设计中，3D成果成为越来越受欢迎的设计趋势。HTML 作为 Web 的根底技术之一，如何在其根底上实现3D成果呢？本文将介绍如何通过HTML和CSS，联合JavaScript的一些工具库实现3D混合渲染。 HTML5 3D 渲染HTML5引入了<canvas>元素，它能够被用于应用JavaScript来绘制2D和3D图形。 这个元素是一个画布，定义了一个区域，咱们能够在其中应用JavaScript进行绘制。 绝对于传统的HTML元素，<canvas>容许咱们创立各种动画和交互式内容。 应用3D时，咱们能够应用 <canvas> 和 WebGL API 将3D场景渲染到屏幕上。 CSS3 3D转换除了应用HTML5 3D渲染外，咱们还能够应用CSS3 3D转换来实现3D成果。 transform-style: preserve-3d; 是CSS属性transform的一个值，它能够使CSS元素的子元素在三维空间中变换。 .parent { transform-style: preserve-3d; }.child { transform: translateZ(-100px);}在这个例子中，.parent元素被设置为 preserve-3d， 它的子元素.child应用 translateZ() 函数进行z轴的平移，从而产生3D成果。 基于JavaScript的3D库在实现简单的3D场景时，咱们能够应用一些基于JavaScript的工具库。其中最风行的包含Three.js、Babylon.js和A-Frame。 Three.jsThree.js是一个用于创立WebGL渲染的JavaScript库。它提供了各种3D几何形态、材质和光线追踪等性能。 Three.js 能够帮忙咱们轻松地构建简单的3D场景。 Babylon.jsBabylon.js是另一个用于WebGL渲染的JavaScript库，与Three.js相似。它提供了各种3D几何形态、材质、动画和物理引擎等性能。 Babylon.js 的次要长处是对游戏开发特地敌对。 A-FrameA-Frame是一个用于WebVR的框架，它基于HTML实现了一种申明式语法来定义3D场景。 应用A-Frame，咱们能够疾速地构建VR体验，而无需学习传统的3D编程语言。 论断通过 HTML 和 CSS 以及 JavaScript 工具库，咱们能够十分轻松地创立出令人惊叹的3D成果。 在将来，3D将持续成为Web设计中不可或缺的一部分，它将为咱们提供更具交互性和视觉冲击力的Web体验。

很多组件库都参照的element的这种文档解决形式，就是markdown生成文档架子搭建可能还好，须要依据咱们本人的需要须要定制解决剩下的就是文档格局和文档编写了https://github.com/ElemeFE/element/tree/dev/examples/docs/zh-CN

前言之前曾经介绍过: 动静表单的构建动静表单的数据库的构造如何将数据库中的数据渲染出表单具体能够参考之前两篇文章（见文末），本文内容如下： 显示动静表单的首页列表数据的增改成果演示:stackBlitz: https://stackblitz.com/github/chshihang/dynamic-form-index?fi... 1、申请类型不同，列表显示字段不同: 2、不同的申请类型，新增字段不同: 3、编辑与新增 我的项目构造：实例中以AppComponent作为着陆组件，index、add、edit别离用来显示首页列表，新增与编辑。DynamicFormService的局部性能为模仿数据库。 ├── MockData.ts 预定义数据├── add│   ├── add.component.html│   └── add.component.ts├── app-routing.module.ts├── app.component.html├── app.component.ts├── app.module.ts├── dynamic-form│   ├── dynamic-form.module.ts│   ├── entity│   │   ├── apply-type.ts│   │   ├── apply.ts│   │   ├── data-item.ts│   │   ├── data-set.ts│   │   ├── field-record.ts│   │   ├── field-type.ts│   │   ├── field-validator.ts│   │   ├── field.ts│   │   ├── form-info.ts│   │   ├── rule-type.ts│   │   └── table-label.ts│   ├── field│   │   ├── components│   │   │   ├── control-type-list.config.ts│   │   │   ├── dynamic-checkbox│   │   │   │   ├── dynamic-checkbox.component.html│   │   │   │   └── dynamic-checkbox.component.ts│   │   │   ├── dynamic-dropdown│   │   │   │   ├── dynamic-dropdown.component.html│   │   │   │   └── dynamic-dropdown.component.ts│   │   │   ├── dynamic-error│   │   │   │   ├── dynamic-error.component.html│   │   │   │   └── dynamic-error.component.ts│   │   │   ├── dynamic-radio│   │   │   │   ├── dynamic-radio.component.html│   │   │   │   └── dynamic-radio.component.ts│   │   │   └── dynamic-textbox│   │   │   ├── dynamic-textbox.component.html│   │   │   └── dynamic-textbox.component.ts│   │   ├── field.component.html│   │   ├── field.component.ts│   │   ├── interface│   │   │   ├── dynamic-form.interface.ts│   │   │   └── dynamic-service.interface.ts│   │   └── services│   │   ├── dynamic-checkbox.service.ts 获取value(首页列表展现)│   │   ├── dynamic-dropdown.service.ts 获取value(首页列表展现)│   │   ├── dynamic-form.service.ts 转换数据/充当数据库│   │   ├── dynamic-radio.service.ts 获取value(首页列表展现)│   │   └── dynamic-textbox.service.ts 获取value(首页列表展现)│   └── form│   ├── form.component.html│   └── form.component.ts├── edit│   ├── edit.component.html│   └── edit.component.ts└── index ├── index.component.html └── index.component.tsER图: ...

前言还在苦恼怎么让你的验证码显示Logo吗，KgCaptcha 这个验证码产品，你能够得心应手地设置你想要的Logo图片、链接地址、地位等。上面我就给大家介绍一下如何设置吧？ 01 水印Logo透明度设置水印Logo透明度，范畴：0-1之间小数，设置0时将不显示。 设置成果如下： 02 图片水印Logo设置底图水印Logo，最佳规格：75x15px。 设置成果如下： 03 Logo 链接URL设置验证码中Logo点击跳转到的链接地址，为空时无链接。 设置成果如下： 04 水印Logo地位设置水印Logo地位，可抉择左上/右上/左下/右下，并填写偏移值。 左上角 右上角 左下角 右下角 相干链接SDK下载：https://github.com/KgCaptcha 在线体验：https://www.kgcaptcha.com/demo/

HTML DOM 简介HTML DOM 定义了拜访和操作 HTML 文档的规范。 什么是 DOM？DOM 是 W3C（万维网联盟）的规范。DOM 定义了拜访 HTML 和 XML 文档的规范："W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它容许程序和脚本动静地拜访和更新文档的内容、构造和款式。" W3C DOM 规范被分为 3 个不同的局部：• 外围 DOM - 针对任何结构化文档的规范模型• XML DOM - 针对 XML 文档的规范模型• HTML DOM - 针对 HTML 文档的规范模型 残缺内容请点击下方链接查看： 学习HTML DOM笔记 版权申明：本文内容由阿里云实名注册用户自发奉献，版权归原作者所有，阿里云开发者社区不领有其著作权，亦不承当相应法律责任。具体规定请查看《阿里云开发者社区用户服务协定》和《阿里云开发者社区知识产权爱护指引》。如果您发现本社区中有涉嫌剽窃的内容，填写侵权投诉表单进行举报，一经查实，本社区将立即删除涉嫌侵权内容。

素材治理在一次我的项目中，为了使验证码更加贴合本身格调。我找到了一款验证码产品能够通过设置图片素材，来批改验证码的底图，使其更加符合。上面就是我对该产品的一些记录。 我的素材进入到素材治理，我的素材个别默认为空，能够通过文件上传和从官网素材库中抉择。 接下来，点击按钮实现上传图片： 预览我的图片素材： 前端验证码的图片显示： 素材库官网也提供了一些图片给用户抉择，用户只需进入素材库，通过抉择本人喜爱的图片，点击即可退出我的素材。 抉择图片到我的素材： 我的素材退出胜利： 前端验证码显示： 相干链接SDK下载：https://github.com/KgCaptcha 在线体验：https://www.kgcaptcha.com/demo/

HTML是一种标记语言，用于创立Web页面它是Web开发的根底，并与CSS和JavaScript一起组成了古代Web开发技术的外围。在本文中，咱们将深入探讨HTML的一些基本知识和利用。 1.标记语言HTML应用标记来形容Web页面的构造和内容。标记是由尖括号括起来的一段文本，例如： cssCopy code<p>This is a paragraph.</p>在这个例子中，<p>标记示意一个段落，</p>标记示意该段落的结尾。 2.根本构造每个HTML文档都应该蕴含以下根本构造： phpCopy code<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>Heading</h1> <p>Paragraph</p> </body> </html>在这个例子中，<!DOCTYPE html>申明文档类型为HTML5。<html>标记示意文档的根元素。<head>标记蕴含文档的元数据，例如题目和样式表。<body>标记蕴含文档的内容，例如题目和段落。 3.元素和属性HTML中的元素指的是标记的名称和它所蕴含的内容。元素能够有属性，属性提供了元素的更多信息。例如，元素用于创立链接，它有一个href属性，指定链接的指标地址： phpCopy code<a href="https://www.example.com">Example</a>在这个例子中，元素示意一个链接，href属性指定链接的指标地址，Example是链接的文本内容。 4.文本和格式化HTML中的文本能够应用<p>、<h1>等元素蕴含。除了标记文本以外，HTML还提供了许多元素和属性，用于格式化文本，例如： <u>和<s>用于下划线和删除线；<pre>用于显示预格式化的文本。 5.表格和表单HTML提供了用于创建表格和表单的元素和属性。<table>元素用于创建表格，<tr>元素用于创建表格行，<td>元素用于创立单元格： cssCopy code<table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>HTML还提供了用于创立表单的元素和属性，例如<form>、<input>和<button>等。 总之，HTML是一种标记语言，用于创立Web页面。

前言系列首发于公众号『前端进阶圈』 ，更多精彩内容敬请关注公众号最新消息。前端面试实录HTML篇1. HTML5 有哪些更新？引入了语义化标签： header: 头部元素section: 两头元素footer: 底部元素nav: 导航区域aside: 侧边栏区域article:内容元素process: 进度条bdo: 定义文字方向sub: 下标sup: 上标pre: 预格式化文本媒体标签： audio: 音频标签video: 视频标签source: 格局源标签input 标签的扩大： 属性扩大： placeholder: 默认提醒文本autofocus: 主动聚焦required: 必填项type 属性扩大： date: 日期抉择框color: 色彩选择器button: 按钮radio: 单选框checkbox: 复选框range: 滑块history API: history.go(): 跳转某个页面(URL)/上个页面(-1)/下个页面(1)history.back(): 返回上个页面history.forward(): 跳转下个页面history.pushstate(): 增加 history 栈history.replacestate(): 替换 history 栈数据存储： localStorage：永久性存储sessionStorage：会话存储2. 对 HTML 语义化的了解？一句话：正确的标签做正确的事。长处： 对机器敌对：更便于解析和爬虫，有利于 SEO对开发者敌对：加强了代码可读性，构造更加清晰，便于开发和保护3. 行内元素有哪些？块级元素有哪些？空元素有哪些？行内元素：a,b,span,img,input,select,strong块级元素：div,ul,ol,li,dl,dt,dd,h1~h6,p空元素：(即没有内容的 HTML 元素，在开始标签中敞开的，也就是没有闭合标签) <br>、<hr>、<img>、<input>、<link>、<meta>、<area>、<source>4. iframe 的优缺点？定义：iframe 会创立蕴含另一个文档的内联框架，可将另一个 HTML 页面嵌入到页面中。长处： 可用来加载速度较慢的内容(如广告)应用脚本并行下载实现跨子域通信毛病： 会阻塞主页面的 onload 工夫无奈被一些搜索引擎辨认到会产生较多页面，不便于管理5. DOCYPE(文档类型) 的作用？定义：一种规范通过标记语言文档类型申明，实质就是通知浏览器(解析器)以什么样的文档类型来解析文档。有不同的渲染模式，他们对 CSS 代码和 JavaScript 代码解析不同，必须写在文档的第一行。分类：(混淆模式，规范模式，准规范模式，超级规范模式) ...

原因一个页面须要两个验证码，应用同一个验证码调用两次会导致有前一个生效。那么咱们须要创立不同的两个验证码，别离做验证。 截图展现 具体实现同时引入多个KgCaptcha的js。引入多个JS时，请定义 plural 参数；通过该参数辨别定义对象名，如plural=1，则对象名为kg1，以此类推。<script src="captcha.js?appid=XXX&plural=1" id="KgCaptcha1"></script><script src="captcha.js?appid=XXX&plural=2" id="KgCaptcha2"></script>初始化验证码<script type="text/javascript">// 第一个验证码kg1.captcha({ // 绑定元素，验证框显示区域 bind: "#captchaBox1", // 验证胜利事务处理 success: function(e) { console.log(e); }, // 验证失败事务处理 failure: function(e) { console.log(e); }, // 点击刷新按钮时触发 refresh: function(e) { console.log(e); }}); // 第二个验证码kg2.captcha({ // 绑定元素，验证框显示区域 bind: "#captchaBox2", // 验证胜利事务处理 success: function(e) { console.log(e); }, // 验证失败事务处理 failure: function(e) { console.log(e); }, // 点击刷新按钮时触发 refresh: function(e) { console.log(e); }}); </script>创立验证框显示区域<!-- 第一个验证码 --><div id="captchaBox1"></div><!-- 第二个验证码 --><div id="captchaBox2"></div>总结SDK开源地址：https://github.com/KgCaptcha，顺便做了一个演示：https://www.kgcaptcha.com/demo/

结尾验证码利用于咱们生存、工作的方方面面，比方注册登录账号、领取订单、批改明码等。上面我是在一次我的项目中利用滑动拼图验证码和搜寻性能“单干共赢”的记录。 验证码展现 具体实现前端代码 // 引入js<script src="captcha.js?appid=XXX"></script><script>kg.captcha({ // 绑定弹窗按钮 button: "#captchaButton", // 验证胜利事务处理 success: function (e) { // 验证胜利，间接提交表单 // form1.submit(); console.log(e); }, // 验证失败事务处理 failure: function (e) { console.log(e); }, // 点击刷新按钮时触发 refresh: function (e) { console.log(e); }});</script><a id="captchaButton"></a>验证后果阐明 字段名数据类型形容codenumber返回code信息msgstring验证后果信息ridnumber用户的验证码利用idsensenumber是否开启无感验证，0-敞开，1-开启tokenstring验证胜利才有：tokenweightnumber谬误严重性，0失常谬误，能够持续操作，1个别谬误，刷新/从新加载拼图，2严重错误，谬误次数过多回绝拜访Python代码 from wsgiref.simple_server import make_serverfrom KgCaptchaSDK import KgCaptchadef start(environ, response): # 填写你的 AppId，在利用治理中获取 AppID = "AppId" # 填写你的 AppSecret，在利用治理中获取 AppSecret = "AppSecret" request = KgCaptcha(AppID, AppSecret) # 填写应用服务域名，在利用治理中获取 request.appCdn = "https://cdn.kgcaptcha.com" # 申请超时工夫，秒 request.connectTimeout = 10 # 用户id/登录名/手机号等信息，当安全策略中的防控等级为3时必须填写 request.userId = "kgCaptchaDemo" # 应用其它 WEB 框架时请删除 request.parse，应用框架提供的办法获取以下相干参数 parseEnviron = request.parse(environ) # 前端验证胜利后颁发的 token，有效期为两分钟 request.token = parseEnviron["post"].get("kgCaptchaToken", "") # 前端 _POST["kgCaptchaToken"] # 客户端IP地址 request.clientIp = parseEnviron["ip"] # 客户端浏览器信息 request.clientBrowser = parseEnviron["browser"] # 去路域名 request.domain = parseEnviron["domain"] # 发送申请 requestResult = request.sendRequest() if requestResult.code == 0: # 验证通过逻辑解决 html = "验证通过" else: # 验证失败逻辑解决 html = f"{requestResult.msg} - {requestResult.code}" response("200 OK", [("Content-type", "text/html; charset=utf-8")]) return [bytes(str(html), encoding="utf-8")]httpd = make_server("0.0.0.0", 8088, start) # 设置调试端口 http://localhost:8088/httpd.serve_forever()最初SDK开源地址：KgCaptcha (KgCaptcha) · GitHub，顺便做了一个演示：凯格行为验证码在线体验 ...

表单1 ： 表单标签<form></form>属性 ：action = '接口地址'method = 'get / post'name = '表单名称'2 ： 表单控件<input>属性：type = '控件类型'name：属性标识表单域的名称；Value：属性定义表单域的默认值，其余属性依据type的不同而有所变动。maxlength：管制最多输出的字符数，Size：管制框的宽度（以字符为单位）1）文本框<input type="text" value="默认值"/>2)明码框<input type="password" />3)提交按钮<input type="submit" value="按钮内容" />4)重置按钮<input type="reset" value="按钮内容" />5)空按钮<input type="button" value="按钮内容" />3：表单补充1）单选按钮组<input type=“radio” name=“ral” />男<input type=“radio” name=“ral”checked=“checked”/>(默认选中)女2）复选框组<input type="checkbox" name="" /><input type="checkbox" name="" disabled="disabled" /> disabled="disabled" (禁用)checked="checked" (默认选中)3）下拉列表（菜单）：<select ><option>下拉选项1</option><option>下拉选项2</option>…………</select>示意下拉列表，name属性不是必须的默认选择项用selected属性；4）表单域多行文本定义：语法: <textarea name="" cols="" rows="" ></textarea>多行文本。rows属性和cols属性用来设置文本输出窗口的高度和宽度，单位是字符。阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）5)上传文件：语法：<input type="file">4：表单标签补充1）表单字段集语法：<fieldset></fieldset>阐明：相当于一个方框，在字段集中能够蕴含文本和其余元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素能够嵌套，在其外部能够在设置多个fieldset对象。disabled定义空间禁制可用；2）字段级题目：语法：<legend align="left/center/right/justify"></legend>阐明：legend元素能够在fieldset对象绘制的方框内插入一个题目。legend元素必须是fieldset内的惟一个元素。3)提示信息标签：语法：<label for="绑定控件id名"></label>阐明：label元素用来定义标签，为页面上的其余元素指定提示信息。要将label元素绑定到其余的控件上，能够将label元素的for属性设置为与该控件的id属性值雷同。拓展：post/get(1). 从性能上讲，GET个别用来从服务器上获取资源，POST个别用来更新服务器上的资源；(2). 从REST服务角度上说，GET是幂等的，即读取同一个资源，总是失去雷同的数据，而POST不是幂等的，因为每次申请对资源的扭转并不是雷同的；进一步地，GET不会扭转服务器上的资源，而POST会对服务器资源进行扭转；(3). 从申请参数模式上看，GET申请的数据会附在URL之后，行将申请数据搁置在HTTP报文的 申请头 中，以?宰割URL和传输数据，参数之间以&相连。特地地，如果数据是英文字母/数字，原样发送；否则，会将其编码为 application/x-www-form-urlencoded MIME 字符串(如果是空格，转换为+，如果是中文/其余字符，则间接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制示意的ASCII)；而POST申请会把提交的数据则搁置在是HTTP申请报文的 申请体 中。(4). 就安全性而言，POST的安全性要比GET的安全性高，因为GET申请提交的数据将明文呈现在URL上，而且POST申请参数则被包装到申请体中，绝对更平安。(5). 从申请的大小看，GET申请的长度受限于浏览器或服务器对URL长度的限度，容许发送的数据量比拟小，而POST申请则是没有大小限度的。

导语本文将介绍如何通过【图片压缩】能力，让您降本增效的应用 COS ，文章将写得浅显易懂，旨在疾速率领用户理解图片压缩的用法及带来的收益。 图片压缩为什么会让您降本增效?随着互联网业务量的不断扩大，导致对象存储 COS 的上行出流量迅速增大，尤其是 Web 中最要害的局部（图片业务），因为 HTML 的同步加载个性，通常是一张加载完才会加载下一张。应用图片压缩能力将会缩小您图片的体积，减小后的图片在网络上传输会占用更小的带宽、耗费更少的流量，从而升高您的流量带宽老本。同时，体积减小后的图片，在网络中传输得耗时更小，从而晋升您的客户端加载图片的速度。  应用图片压缩的筹备工作图片压缩服务是由腾讯云数据万象产品所提供，您能够先按以下几步将图片压缩服务开启： ►►►步骤1：开明数据万象产品在腾讯云控制台中，抉择云产品 > 数据万象，进入数据万象控制台，开明数据万象服务。【操作链接】：https://console.cloud.tencent.com/ci ►►►步骤2：将数据万象与您存储图片的存储桶进行绑定【操作链接】：https://console.cloud.tencent.com/ci/bucket ►►►步骤3：开启图片高级压缩服务在对象存储控制台中，抉择已绑定数据万象的存储桶，找到 数据处理 > 图片解决 菜单，开启高级压缩。 疾速上手从0到1，带您疾速上手图片压缩应用形式，1分钟让您的图片业务疾速降本！图片压缩反对通过URL参数、API、SDK等进行应用。 一、上传图片至COS1. 在已开启图片高级压缩的存储桶中，进入文件列表 抉择上传文件 > 抉择文件，抉择须要上传至存储桶的图片，例如名为 exampleimage.png 的图片。单击上传，即可将图片 exampleimage.png 上传至存储桶。二、失常拜访 COS 上的图片1. 在控制台文件列表中找到刚刚上传的 exampleimage.png 图片，点击操作栏的详情 复制对象地址，在浏览器新的窗口中关上该地址，即可拜访到该图片。留神 如果您关上图片时看到报错信息为Access Denied，阐明该图片为公有读拜访权限，您须要在对象地址前面携带签名参数能力失常拜访。 在详情中您能够通过复制长期链接，疾速获取一个携带签名的对象地址。 能够看到，exampleimage.png 图片在浏览器拜访的大小为原图1.7MB，图片加载的整体工夫为3.24秒 三、应用图片压缩，并拜访压缩后的图片 以将图片压缩为avif格局为例：在 3.2 步骤中的对象地址前方，间接增加一段AVIF图片压缩参数，通过 ? 符号连贯参数：?imageMogr2/format/avif 留神如果上述链接是曾经携带签名参数的，同样能够间接在链接前面增加的AVIF图片压缩参数，通过 & 符号连贯参数：&imageMogr2/format/avif 能够看到，exampleimage.png 图片，在携带了压缩参数后，会实时压缩，在浏览器拜访的大小为压缩后的图75.5KB，图片加载的整体工夫为287毫秒。 通过 API 应用图片压缩您能够通过对象存储 COS 拜访对象的接口 GET Object 来间接应用图片压缩能力。1. 调用GET Object接口 接口中的<ObjectKey>参数前面间接加上图片压缩参数，通过 ? 符号连贯。【GET Object接口文档】：https://cloud.tencent.com/document/product/436/7753【图片压缩参数文档】：https://cloud.tencent.com/document/product/436/44883留神图片压缩是通过格局转换参数管制的，您能够将图片转换为webp、avif、heif、tpg这四种压缩格局，来达到图片体积缩小的目标。 通过 SDK 应用图片压缩以后图片压缩参数曾经集成到了所有的 COS SDK 中，提供 Java、Python 等12种开发语言的 SDK 及对应的疾速入门指引，您能够点击下方链接找到适宜本人的SDK：【SDK链接】：https://cloud.tencent.com/document/product/436/6474 不同压缩图片格式比照 ...

1、地址栏输出url，回车会产生什么？ 1）浏览器像服务器发送申请 2）服务器将申请的HTML内容返回给浏览器 3）浏览器由上到下解析HTML内容，解析实现之后生成DOM树 4）浏览器依据DOM树内容转化为各个节点，显示在页面上2、script标签defer，async属性的作用？ 浏览器解析HTML本是由上往下同步执行，这种状况下，若script标签不是在放在body标签之后，则浏览器解析到script时，若此script的src指向了一个较大的资源，并且执行工夫也很长的话，位于前面的html元素解析就会停滞，需等到这个耗时的js资源加载执行结束后，才接着往下解析，造成页面加载白屏长。而defer和async属性的呈现就会很好的防止这一问题。相同点： 1）带有两者的script标签，其src指向的js脚本都是异步加载的，很好的防止了文档解析阻塞不同点： 1）defer 指向的js脚本是异步加载后，待到文档解析实现，脚本才会执行，而async会在js脚本下载实现后立刻执行 2）基于不同点1），defer会在DOMContentLoaded事件触发前执行，而async无奈保障与DOMContentLoaded的先后顺序 综上所述：在script加defer属性和咱们把script放在body最底部的成果一样，都能够确保js脚本能获取到页面的DOM，而async指向的脚本中，不适宜有操作DOM的逻辑 tips：DOMContentLoaded 事件是 dom 加载结束了，然而各种标签外面的内容没有拿到，比如说图片，所以咱们看到有图片区域会显示空白

1.ChatGPT应用场景自ChatGPT上线以来，仅用几天就爆火出圈，成为社会热议话题，人工智能已是大势所趋。现在ChatGPT已从原生模型降级为模型训练，反对对官网GPT3.0的根底模型进行“微调”训练和应用，以满足用户在特定业务情境下的智能问答利用须要。  自媒体时代，人人皆是创作者，继续输入优质内容也成为了吸引用户的重要伎俩之一，但往往写篇文章要花大半天工夫，写进去的文章成果平平，没有吸引力，文章打回来又重写批改，发内容的最佳时机就这样散失了。 然而如果将想法观点交给ChatGPT，它很快就能加工创作出一篇优良文章。  将你的原文章或者参考文章主动生成新文章，为创作者提供大量稿件，极大缩小写作工夫和老本，并帮忙获取流量。应用办法非常简单，只须要将内容输出文本框，所有瓜熟蒂落。 2.ChatGPT如何无代码集成第三方零碎？高质量文案，爆款话题，自媒体人如何利用智能AI来为本人创作赋能呢，当初集简云联合ChatGPT，让这所有有迹可循。 利用集简云零碎，企业能够轻松实现这个性能，将多个软件中的数据主动同步，并且无需开发，即使没有任何技术常识的业务人员，也能够轻松应用。  通过集简云无代码集成平台，无需开发就能够将ChatGPT集成到各种第三方利用零碎，例如：OA办公零碎，客户服务零碎，MySQL数据库，企业微信，表单零碎，CRM等数十款利用零碎，以及企业外部零碎进行数据同步与性能执行。 查看残缺的可用利用列表：软件应用集成列表 | 集简云 让连贯更简略 集简云的应用流程：· 触发动作：当一个利用零碎产生了什么事件时· 执行动作：主动在一个或者多个不同零碎中执行不同事件 【浏览器插件+ChatGPT+明道云利用】具体操作演示 Chrome浏览器插件是集简云的一个内置利用，次要用于触发动作启动流程；能够疾速获取以后页面的URL并反对在编辑流程时设置自定义字段。  ChatGPT是由OpenAI开发的一种认知语言模型。次要目标是帮忙用户天然地与AI进行对话，答复问题并执行各种工作，例如提供信息、解决问题、生成文本等。它能够与各种应用程序集成，以提供高效且牢靠的人机对话体验。 明道云利用是明道云旗下产品, 通过明道云利用，企业能够疾速设计和开发工具。但不须要任何代码编写，一般业务人员就能把握应用。通过灵便的性能组件，让企业能够搭建个性化的CRM、ERP、OA、项目管理、进销存等零碎。 1、 实现目标：基于指定文字内容，撰写引人入胜的短文。 2、数据流程由两个局部组成（触发&执行）● 触发动作：当浏览器插件触发时● 执行动作：依照自定义设置主动发问ChatGPT● 执行动作：主动增加数据到明道云  3、达成成果：浏览器插件+ChatGPT+明道云。当浏览到本人喜爱的文章时，无需关上其余利用，能够疾速复制内容粘贴到浏览器插件，ChatGPT会依照训练模型主动生成文章改写的文案，并保留到明道云表单中。 3.更多流程示例● 微信公众号+OpenAI(ChatGPT)内置+微信公众号：当用户在微信公众号中发送文本音讯时，主动应用ChatGPT答复，并将答复回传至微信公众号发送给指定用户● 飞书即时消息+OpenAI(ChatGPT)内置+飞书即时消息：当飞书即时消息机器人接管到音讯时，ChatGPT主动答复，并将答复数据传回至飞书即时消息● 邮件触发+OpenAI(ChatGPT)内置+SMTP邮件发送:用户发送邮件征询问题时，主动应用ChatGPT回复，在主动应用邮件将回复内容发送给指定用户● 抖音+OpenAI(ChatGPT)内置+抖音：抖音收到新评论时，ChatGPT主动答复，并经答复内容主动回传至都应发送给指定用户● 定时启动工作+抖音+OpenAI(ChatGPT)内置+百度百家号：定时查问抖音热词通过ChatGPT生成文章，并且百家号主动公布 集简云: 让连贯更简略集简云是一款超级软件连接器，无需开发，无需代码常识就能够轻松买通数百款软件之间的数据连贯，构建自动化与智能化的业务流程。通过自动化业务流程，每月可节俭您数百甚至数万小时的人工成本。 咱们置信：业务流程自动化与智能化是企业新的增长引擎官网地址：「集简云官网」软件集成能够如此简略 为什么抉择集简云 ？无需开发，简略疾速地扩大现有零碎的性能 通过集简云能够疾速扩大您现有零碎的性能，例如为您的表单零碎减少微信揭示，邮件揭示，短信揭示性能，为您的微信公众号减少赠送卡券同步CRM零碎性能，为您的OA办公零碎减少逻辑判断与数据存储性能等等。而这所有无需任何技术开发，简略疾速地晋升您零碎的能力。 业务流程自动化，节俭企业数万小时的人工成本 您的团队还在人工导出导入不同零碎之间的数据信息，手动的在不同的零碎中录入，批改和执行各种操作吗？通过集简云，无需任何开发既能够疾速搭建自动化的业务流程，简略快捷，人人可用，几分钟创立的自动化业务流程或者能够节俭企业数万小时的人工成本。 利用AI人工智能技术，晋升业务流程的效率与价值 在自动化业务流程之外，集简云提供了AI人工智能组件，帮忙企业将那些须要人工参加的重复性工作转由AI人工智能技术主动解决，包含语义剖析，预测模型，信息主动提取等多种不同的AI模块。 集简云开放平台：让您的零碎领有与500+款软件连贯的能力集简云开放平台是集简云为开发者（软件公司，企业外部开发者，独立开发者）提供疾速与集简云平台中的利用进行连贯的能力，您能够将您的软件接口上线到集简云平台轻松实现数百款应用软件的数据互通。 您也能够将集简云的集成能力嵌入到您的软件系统中，将数百款软件的集成能力变成您产品的性能与卖点，扩大额定支出，晋升客户成交率，成交金额与满意度。

前言前两天面试的时候，面试官问我：一个ip发申请过去，是一个ip对应一个线程吗？我忽然愣住了，对于SpringBoot如何解决申请如同素来没认真思考过，所以面试完结后就认真钻研了一番，当初就来探讨一下这个问题。注释咱们都晓得，SpringBoot默认的内嵌容器是Tomcat，也就是咱们的程序实际上是运行在Tomcat里的。所以与其说SpringBoot能够解决多少申请，到不如说Tomcat能够解决多少申请。对于Tomcat的默认配置，都在spring-configuration-metadata.json文件中，对应的配置类则是org.springframework.boot.autoconfigure.web.ServerProperties。 和解决申请数量相干的参数有四个： server.tomcat.threads.min-spare：起码的工作线程数，默认大小是10。该参数相当于长期工，如果并发申请的数量达不到10，就会顺次应用这几个线程去解决申请。server.tomcat.threads.max：最多的工作线程数，默认大小是200。该参数相当于临时工，如果并发申请的数量在10到200之间，就会应用这些临时工线程进行解决。server.tomcat.max-connections：最大连接数，默认大小是8192。示意Tomcat能够解决的最大申请数量，超过8192的申请就会被放入到期待队列。server.tomcat.accept-count：期待队列的长度，默认大小是100。 举个例子阐明一下这几个参数之间的关系： 如果把Tomcat比作一家饭店的话，那么一个申请其实就相当于一位客人。min-spare就是厨师(长期工)；max是厨师总数(长期工+临时工)；max-connections就是饭店里的座位数量；accept-count是门口小板凳的数量。来的客人优先坐到饭店外面，而后厨师开始忙活，如果长期工能够干的完，就让长期工干，如果长期工干不完，就再让临时工干。图中画的厨师一共15人，饭店里有30个座位，也就是说，如果当初来了20个客人，那么就会有5集体先在饭店里等着。如果当初来了35集体，饭店里坐不下，就会让5集体先到门口坐一下。如果来了50集体，那么饭店座位+门口小板凳一共40个，所以就会有10人来到。也就是说，SpringBoot同时所能解决的最大申请数量是max-connections+accept-count，超过该数量的申请间接就会被丢掉。纸上得来终觉浅，绝知此事要躬行。下面只是实践后果，当初通过一个理论的小例子来演示一下到底是不是这样：创立一个SpringBoot的我的项目，在application.yml里配置一下这几个参数，因为默认的数量太大，不好测试，所以配小一点： server:  tomcat:    threads:       # 起码线程数      min-spare: 10       # 最多线程数      max: 15     # 最大连接数    max-connections: 30     # 最大期待数    accept-count: 10复制代码再来写一个简略的接口：     @GetMapping("/test")     public Response test1(HttpServletRequest request) throws Exception {         log.info("ip:{},线程:{}", request.getRemoteAddr(), Thread.currentThread().getName());         Thread.sleep(500);         return Response.buildSuccess();    }复制代码代码很简略，只是打印了一下线程名，而后休眠0.5秒，这样必定会导致局部申请解决一次性解决不了而进入到期待队列。而后我用Apifox创立了一个测试用例，去模仿100个申请： 察看一下测试后果： ...

1、间接在html文件中应用SkeyeWebPlayer.js播放器2、最终成果 <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>SkeyeWebPlayer播放器</title> <link rel="shortcut icon" href="/favicon.ico"> <link rel="stylesheet" href="./styles/reset.css"> <style> .header-view { height: 60px; position: relative; } .header-bar { height: 60px; background-color: #032C43; box-shadow: 0 6px 10px -3px rgba(0, 0, 0, 0.5); position: fixed; top: 0; width: 100%; z-index: 1; } .header-group { display: flex; align-items: center; justify-content: space-between; height: 100%; color: #ffffff; } .head-title { font-size: 20px; font-weight: bold; } .container { max-width: 800px; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; } .web-media-player { margin-top: 30px; } .play-url { margin-top: 30px; width: 100%; display: flex; align-items: center; justify-content: space-between; } .play-url input { width: 100%; height: 24px; padding: 0 10px; } .btn { margin-left: 15px; padding: 3px 8px; border-radius: 4px; background-color: #666; color: #fff; flex-shrink: 0; } </style></head><body><div id="app"> <div class="header-view"> <div class="header-bar"> <div class="container header-group"> <div class="head-title">SkeyeWebPlayer播放器测试</div> </div> </div> </div> <section class="container"> <!--播放器容器--> <div class="web-media-player" id="SkeyeWebPlayer"></div> <div class="play-url"> <input type="text" id="url" value="rtsp://192.168.0.111:5540/00000000031316423888/0"> <button class="btn" onclick="play()">播放</button> </div> </section></div><script src="./static/vue.min.js"></script><script src="./static/vue-router.min.js"></script><script src="./static/element-ui/index.js"></script><script src="./static/axios.min.js"></script><script src="static/SkeyeWebPlayer/SkeyeWebPlayer.js"></script><script type="application/javascript">let player = nullinitPlayer()// 初始化播放器function initPlayer() { // new WebMediaPlayer（url,domId,callback,options） player = new WebMediaPlayer( '', `SkeyeWebPlayer`, callbackFunc, { cbUserPtr: this, decodeType: 'auto', openAudio: 0, BigPlay: false, Height: 56.25 });}// 播放function play() { let url = document.getElementById('url').value player.play(url, 1, 0)}// 回调function callbackFunc(cbType, cbParams) { console.log(cbType, cbParams)}</script></body></html>

<input>的disable属性在不同浏览器的机制是不同的。chrom限度的是内容的输出，对点击事件还能够响应；在firefox输出和点击都限度了。如果想实现禁止输出成果，倡议用readonly属性。

前端波及到的文件下载还是很多利用场景的，那么前端文件下载有多少种形式呢？每种形式有什么优缺点呢？上面就来一一介绍。 a 标签通过a标签的download属性来实现文件下载，这种形式是最简略的，也是咱们比拟罕用的形式，先来看示例代码：下载就下面的这个示例，咱们点击下载，发现是跳转到了百度的首页，并没有真的下载文件。 因为a标签下载只能下载同源的文件，如果是跨域的文件，这里包含图片、音视频等媒体文件，都是预览，也无奈下载。 下面的代码是间接通过书写a标签来实现文件下载，咱们也能够通过js来实现，代码如下： const a = document.createElement('a')a.href = 'http://www.baidu.com'a.download = 'baidu.html'a.click()成果和下面的一样，都是跳转到百度的首页，没有下载文件。 这里的重点是a标签的download属性，这个属性是HTML5新增的。 它的作用是指定下载的文件名，如果不指定，那么下载的文件名就会依据申请内容的Content-Disposition来确定，如果没有Content-Disposition，那么就会应用申请的URL的最初一部分作为文件名。 window.open下面应用a标签的案例也能够通过window.open来实现，成果是一样的，代码如下：window.open('http://www.baidu.com', '_blank')这里的_blank是指定关上的形式，如果不指定，那么就会在以后页面关上，这里指定_blank，就是在新的页面关上。 同样a标签的download属性也是能够应用的，代码如下： window.open('http://www.baidu.com', '_blank', 'download=baidu.html')当然这种形式也是有缺点的，比照于a标签，这种形式不能下载.html、.htm、.xml、.xhtml等文件，因为这些文件会被当成html文件来解决，所以会间接在以后页面关上。 同样也不能下载跨域的文件，毕竟是window.open，不是window.download（window.download是假想）。 location.href这种形式和window.open(url)是一样的，代码如下：location.href = 'http://www.baidu.com'这种形式领有window.open的所有缺点，所以不举荐应用，这里只当作理解，所以不做过多的解说。 location.?其余属性这里的其余指代的都是能跳转页面的属性，比方location.assign、location.replace、location.reload等，这些属性都是能够实现文件下载的，代码如下：location.assign('http://www.baidu.com')location.replace('http://www.baidu.com')location.reload('http://www.baidu.com')这里的location.reload是有点非凡的，它的作用是从新加载以后页面，然而它也能够承受一个参数，这个参数就是要跳转的页面，所以也能够实现文件下载。 当然同location.href一样，这些形式的毛病都一样，同时还有属于每个属性本身的个性，这里只当拓展常识，不做过多的解说。 XMLHttpRequest这种形式就是咱们常说的ajax下载，包含axios、fetch等都是雷同的，代码如下：const xhr = new XMLHttpRequest()xhr.open('GET', 'http://www.baidu.com')xhr.send() xhr.onload = function () { const blob = new Blob([xhr.response], { type: 'text/html' }) const a = document.createElement('a') a.href = URL.createObjectURL(blob) a.download = 'baidu.html' a.click()}这里就不讲和XMLHttpRequest相干的常识了，只讲和文件下载相干的局部。 这里次要的逻辑是当咱们的申请胜利后，咱们会拿到响应体的response，这个response就是咱们要下载的内容，而后咱们把它转换成blob对象，而后通过URL.createObjectURL来创立一个url，而后通过a标签的download属性来实现文件下载。 这里的知识点就有两个，一个是blob对象，一个是URL.createObjectURL。 5.1 blob上面是blob对象的定义，来自MDN[1]： Blob对象示意一个不可变、原始数据的类文件对象。它的数据能够按文本或二进制的格局进行读取，也能够转换成 ReadableStream 来用于数据操作。 Blob示意的不肯定是JavaScript原生格局的数据。File 接口基于 Blob，继承了blob的性能并将其扩大以反对用户零碎上的文件。 blob对象是html5新增的对象，它的作用是用来存储二进制数据的，比方图片、视频、音频等，它的应用办法如下： ...

Html根本款式1. Html各种标签（蕴含html5新标签，从罕用到十分用）标签及它们的默认款式https://code.ciaoca.com/html/... 2. Html Element Default CSS valuehttps://www.w3schools.com/css... Html, Css及各根本知识点通常，前端页面开发遵循 先布局 -> 再填充 的形式布局：遵循由“页面大体布局”到“区块中的具体布局”的特点 惯例流布局 （链接，讲了大略的无）————————————————————————————————————————（未完待续...）

1 html布局1.1 应用div块元素<div> 元素是用于分组 HTML 元素的块级元素；1.1.1 举例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>布局学习</title></head><body> <div id="container" style="width: 1920;"> <div id="title" style="background-color: rgb(172, 132, 140);"> <h2 style="margin-bottom: 0">NoamaNelson的博客 <div> <span style="text-align: center;font-size: small;">专一测试畛域的测试技术钻研，测试实践、测试方法、测试治理等测试常识分享 </span> </div> </h2> </div> <br> <div id="menu" style="background-color:rgb(201, 201, 219);float: left;"> 1000&nbsp;&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100万&nbsp;&nbsp;&nbsp;&nbsp;10<br> 原创&nbsp;&nbsp;&nbsp;&nbsp;周排名&nbsp;&nbsp;&nbsp;&nbsp;总排名&nbsp;&nbsp;&nbsp;&nbsp;拜访&nbsp;&nbsp;&nbsp;&nbsp;等级<br> <br> 5000&nbsp;&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10万&nbsp;&nbsp;&nbsp;&nbsp;8000<br> 积分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;粉丝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;获赞&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;评论&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;珍藏<br> </div> <div id="content" style="text-align: center;background-color: khaki;height: 500;"> 内容在这里内容在这里内容在这里<br> 内容在这里内容在这里内容在这里<br> 内容在这里内容在这里内容在这里<br> 内容在这里内容在这里内容在这里<br> 内容在这里内容在这里内容在这里<br> </div> <div id="text"> <h3 style="clear: both;">热门文章</h3> <div style="background-color: khaki;float: left;"> <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p> <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p> <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p> </div> </div> <div id="list"> <h3 style="clear: both;">文章分类</h3> <div style="background-color: rgb(112, 102, 7);float: left;"> <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p> <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p> <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p> </div> </div> </div></body></html> ...

1 图像1.1 图像标签图像由<img> 标签定义；<img> 是空标签，只蕴含属性，并且没有闭合标签；须要应用源属性（src），页面上能力显示图像，其值是图像的 URL 地址；标签阐明<img>定义图像<map>定义图像地图<area>定义图像地图中的可点击区域1.2 应用办法<img src="url" alt="可替换的文本信息">1.3 Alt属性用来为图像定义一串准备的可替换的文本；文本的内容用户自定义；作用：浏览器无奈载入图像时，就会显示替换文本，这样很容易晓得错误信息。1.4 高度和宽度应用height（高度 与 width（宽度）进行设置；属性值默认单位为像素；应用办法：<img src="xxx.jpg" alt="可替换文本信息" width="数字" height="数字">倡议对图像的宽度和高度进行设置，这样便于图片显示，而不打乱页面布局；1.5 举例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>图像学习</title></head><body> <!-- 图像在文字中的应用 --> <h3>1、图像居中、底部对齐(vertical-align: middle、bottom)：</h3> <p><b>鹿柴-王维〔唐代〕</b></p> <p>空山不见人，<img src="F:\html_study\img\1.jpg" alt="图片居中" style="vertical-align: middle;" width="64" height="64">但闻人语响。 </p> <p>返景入深林，<img src="F:\html_study\img\1.jpg" alt="图片底部对齐" style="vertical-align: bottom;" width="64" height="64">复照青苔上。</p> <hr> <h3>2、图像顶部对齐、居中(vertical-align: middle、top)：</h3> <p><b>送别-王维〔唐代〕</b></p> <p>山中相送罢，<img src="F:\html_study\img\1.jpg" alt="顶部对齐" style="vertical-align: top;" width="64" height="64">日暮掩柴扉。 </p> <p>春草明年绿，<img src="F:\html_study\img\1.jpg" alt="图片居中" style="vertical-align: middle;" width="64" height="64">王孙归不归？ </p> <hr> <h3>3、图像浮动在段落右边、左边(float: left、right)：</h3> <p><b>春晓-孟浩然〔唐代〕</b></p> <p>春眠不觉晓，<img src="F:\html_study\img\1.jpg" alt="图像浮动在段落右边" style="float: left;" width="64" height="64">处处闻啼鸟。 </p> <p>夜来风雨声，<img src="F:\html_study\img\1.jpg" alt="图像浮动在段落左边" style="float: right;" width="64" height="64">花落知多少。 </p> <hr> <h3>4、图像链接(a herf)-无、有边框：</h3> <a href="https://blog.csdn.net/NoamaNelson" <br><img border="0" src="F:\html_study\img\1.jpg" alt="图像链接无边框" width="64" height="64"> <img border="10" src="F:\html_study\img\1.jpg" alt="图像链接有边框" width="64" height="64"></a> <hr> <h3>5、点击图片中的对应区域：</h3> <img border="0" src="F:\html_study\img\2.jpg" width="565" height="367" alt="图片" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="333,212,530,322" alt="矩形" href="html\矩形.html"> <area shape="circle" coords="160,269,69" alt="圆形" href="html\圆形.html"> <area shape="poly" coords="272,31,369,31,404,99,369,168,272,168,237,99" alt="多边形" href="html\多边形.html"> </map></body></html> 1.6 总结对于图像映射标签<area>;shapecoordsrect(矩形)矩形左上角和右下角的坐标circle(圆形)圆心的坐标和半径poly(多边形)规定多边形各顶点坐标2 表格2.1 表格标签由 <table> 标签来定义；每个表格均有若干行（由 <tr> 标签定义）；每行被宰割为若干单元格（由 <td> 标签定义）；数据单元格能够蕴含文本、图片、列表、段落、表单、水平线、表格等；举例：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表格学习</title></head><body> <table border="1"> <tr> <td>r1, c1</td> <td>r1, c2</td> </tr> <tr> <td>r2, c1</td> <td>r2, c2</td> </tr> </table></body></html> ...

1 文本格式化1.1 文本格式化标签应用某些标签对文本进行格式化，如加粗、歪斜等，这类标签即称为文本格式化标签。如下罕用的文本格式化标签有：标签阐明<b> 定义粗体文本<em>定义着重文字<i>定义斜体字<small> 定义小号字<strong>定义减轻语气<sub>定义下标字<sup>定义上标字<ins>定义插入字<del>定义删除字1.2 举例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文本格式化标签</title></head><body> <b>【这是规定】</b><br> 这是<b> 定义粗体文本</b> 的标签！<br> 这是<em> 定义着重文字</em> 的标签！<br> 这是<i> 定义斜体字</i> 的标签！<br> 这是<small> 定义小号字</small> 的标签！<br> 这是<strong> 定义减轻语气</strong> 的标签！<br> 这是_{定义下标字} 的标签！<br> 这是^{定义上标字} 的标签！<br> 这是<ins> 定义插入字</ins> 的标签！<br> 这是<del> 定义删除字</del> 的标签！<br> <hr> <p><b>【这是举例】</b></p> <p>已经有一份真挚的恋情<b>摆在我的背后</b></p> <p>我没有好好珍惜 <i>等到失去时</i> 才感到悔恨</p> <p>如果老天可能再^{给我一次机会}</p> <p>我会对那个女孩说 <strong>我爱你</strong></p> <p>如果非要在这个爱上_{加个期限的话}</p> <p>我心愿是 <del>一万年</del></p></body></html> 2 链接应用标签 <a>来设置超文本链接;超链接能够是一个字，一个词，或者一组词，也能够是一幅图像;以点击这些内容来跳转到新的文档或者以后文档中的某个局部;在标签<a> 中应用了href属性来形容链接的地址。2.1 链接标签应用标签 <a>来示意超文本链接；应用href属性形容链接地址。2.2 链接语法<a href="url">链接文本</a>2.3 链接属性属性阐明<href>链接地址<target >定义被链接的文档在何处显示<id>创立一个 HTML 文档书签2.4 举例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>链接学习</title></head><body> <p><b>在以后标签中关上网页</b></p> <a href="https://blog.csdn.net/NoamaNelson">NoamaNelson的CSND博客</a><br> <a href="https://www.cnblogs.com/noamanelson">NoamaNelson的博客园</a><br> <hr> <p><b>在新的窗口中关上网页</b></p> <a href="https://blog.csdn.net/NoamaNelson" target="_blank">NoamaNelson的CSND博客</a><br> <a href="https://www.cnblogs.com/noamanelson" target="_blank">NoamaNelson的博客园</a><br> <hr> <p><b>id属性</b></p> <p><a id="NoamaNelson">NoamaNelson的博客有：</a></p> <a href="https://blog.csdn.net/NoamaNelson#NoamaNelson">CSND博客</a><br> <a href="https://www.cnblogs.com/noamanelson#NoamaNelson">博客园博客</a><br> <hr> <p>创立图片链接(有边框)：<br> <a href="https://blog.csdn.net/NoamaNelson#NoamaNelson"> <img border="10" src="F:\html_study\img\1.jpg" alt="NoamaNelson的CSND博客" width="64" height="64"></img></a> </p> <p>创立图片链接(无边框)：<br> <a href="https://blog.csdn.net/NoamaNelson#NoamaNelson"> <img border="0" src="F:\html_study\img\1.jpg" alt="NoamaNelson的CSND博客" width="64" height="64"></img></a> </p></body></html> ...

开发流程作为开发人员，咱们心愿将开发环境与生产环境尽可能地匹配，以确保咱们构建的内容在部署时可能失常工作。咱们还心愿可能疾速开发，这意味着咱们心愿构建速度要快，也心愿能够应用调试器之类的开发工具。容器是整顿咱们的开发环境的一种好办法，然而咱们须要正确定义 Dockerfile 以便可能与咱们的容器疾速交互。增量构建Dockerfile 是用于构建容器镜像的一个申明清单。Docker 构建器将每个步骤的后果作为镜像层进行缓存的同时，缓存可能会有效，从而导致使缓存有效的步骤以及所有后续步骤都须要从新运行，并从新生成相应的层。当 COPY 或 ADD 援用构建上下文中的文件发生变化时，缓存会生效。所以构建步骤的程序可能会对构建的性能产生十分大的影响。 让咱们看一个在 Dockerfile 中构建 NodeJs 我的项目的示例。在这个我的项目中，在 package.json 文件中指定了一些依赖项，这些依赖项是在运行 npm ci 命令时获取的。最简略的 Dockerfile 文件如下所示：FROM node:lts ENV CI=trueENV PORT=3000 WORKDIR /codeCOPY . /codeRUN npm ci CMD [ "npm", "start" ]复制代码每当构建上下文中的文件发生变化时，咱们依照上述构造构建 Dockerfile 都会导致在 COPY 这一行使得缓存生效。也就是说除了会破费很长时间得 package.json 文件以外的其余任何文件产生了变更得话，都将会从新获取依赖项搁置到 node_modules 目录上面去。为了防止这种状况发送，只在依赖项产生变更时（即，当 package.json 或 package-lock.json 更改时）才从新获取依赖，咱们应该思考将依赖项装置与应用程序的构建和运行离开。优化后得 Dockerfile 如下所示：FROM node:lts ENV CI=trueENV PORT=3000 WORKDIR /codeCOPY package.json package-lock.json /code/RUN npm ciCOPY src /code/src CMD [ "npm", "start" ]复制代码应用这种拆散的形式，如果 package.json 或 package-lock.json 文件没有变更，则缓存将用于 RUN npm ci 指令生成的这一层。这意味着，当咱们编辑应用程序源代码并进行重建时，就不会从新下载依赖项，从而节俭了很多工夫。在主机和容器之间放弃实时加载该技巧和 Dockerfile 并不间接相干，但咱们常常听到这样的问题：在容器中运行应用程序并在主机上从 IDE 批改源代码时，如何放弃代码的热更新？在咱们这里的示例，咱们须要将咱们的我的项目目录挂载到容器中，并传递一个环境变量来启用 Chokidar，该我的项目封装了 NodeJS 文件的更改事件。运行命令如下所示：$ docker run -e CHOKIDAR_USEPOLLING=true -v ${PWD}/src/:/code/src/ -p 3000:3000 repository/image_name复制代码这里咱们通过 -v 将宿主机下面的代码目录挂载到容器中，当宿主机上的代码有任何变更时都会在容器中进行实时加载更新。构建一致性Dockerfile 最重要的事件之一就是从雷同的构建上下文（源，依赖项…）构建完全相同的镜像。这里咱们将持续改良上一部分中定义的 Dockerfile。从源上进行统一构建如上一节所述，咱们能够通过在 Dockerfile 形容中增加源文件和依赖项并在其上运行命令来构建应用程序。然而在后面的示例中，其实咱们每次运行 docker build 时都无奈确认生成的镜像是否雷同，为什么呢？因为每次 NodeJS 公布后，lts 标签就会指向 NodeJS 镜像的最新 LTS 版本，该版本会随着工夫的推移而变动，并可能带来重大变动。所以咱们能够通过对根底映像应用确定的标签来轻松解决此问题。如下所示：FROM node:13.12.0 ...

1 元素1.1 语法示例：开始标签元素内容完结标签<p>段落</p><a>链接</a><br>换行 语法：# 以开始标签起始，以完结标签终止；# 元素内容是开始标签与完结标签之间的内容；# 空元素在开始标签中进行敞开（以开始标签的完结而完结）；# 少数元素可领有属性。1.2 元素嵌套比方之前写的：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>开始学习html，这是我的第一个页面，哈哈哈！</title></head><body> <h1>题目1：尽管我不会，然而我有学习的能源！</h1> <h2>题目2：明天我认真的学习了！</h2> <p>这是一个段落！</p></body></html>>以上内容蕴含的元素有<html>、<head>、<body>、<h1>、<h2>、<p>六个html元素；1.3 空元素没有内容的 HTML 元素被称为空元素。空元素是在开始标签中敞开的；比方前边说的<br> 就是没有敞开标签的空元素；空元素的敞开办法为，例如<br />；1.4 书写注意事项元素倡议应用小写，比方<a>dsd</a>，而不要写<A>sdsd</A>。1.5 HTML标签内容比拟多，能够参考学习https://www.runoob.com/tags/html-reference.html2 属性2.1 属性阐明对TML 元素能够设置属性；属性能够在元素中增加附加信息；属性个别形容于开始标签；属性总是以名称/值对的模式呈现,比方python中的字典，有键和值，比方name="zhangsan";2.2 示例比方元素<a>的href 属性，示意链接的地址；<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>开始学习html，这是我的第一个页面，哈哈哈！</title></head><body> <h1>题目1：尽管我不会，然而我有学习的能源！</h1> <h2>题目2：明天我认真的学习了！</h2> <p>这是一个段落！</p> <a href="https://blog.csdn.net/NoamaNelson">点击进入我的博客链接</a></body></html>>浏览器中关上如下： 2.3 属性举例属性阐明class规定元素的类名（classname）id规定元素的惟一 idstyle规定元素的行内款式title规定元素的额定信息2.4 注意事项属性倡议应用小写；应用双引号或单引号括起来；如果遇到有双引号和单引号一起用的，留神要成对用，比方name='gebi "laowang"';3 题目3.1 题目阐明这个和markdown查不对，都应用h来示意；应用<h1>到<h6>标签进行定义；<h1>是最大题目，顺次减小，<h6>最小；3.2 应用办法<h1>题目1（相似一级题目，集体叫法）</h1><h2>题目2（相似二级题目，集体叫法）</h2><h1>题目1（相似一级题目，集体叫法）</h1><h1>题目1（相似一级题目，集体叫法）</h1>3.3 举例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>题目学习</title></head><body> <h1>1、xx工具的应用</h1> <h2>1.1、xx工具的下载</h2> <h3>1.1.1、xx工具下载网址</h3> <a href="https://blog.csdn.net/NoamaNelson">点击进入我的博客链接</a></body></html>> 4 水平线4.1 HTML水平线应用标签<hr> 来定义 页面中的水平线；其作用可用来宰割内容。4.2 应用办法<p>段落1</p><hr><p>段落2</p><p>段落3</p><p>段落4</p><p>段落5</p><hr>4.3 举例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>水平线学习</title></head><body> <p align="center">静夜思</p> <hr> <p align="center">床前明月光，</p> <p align="center">疑是地上霜。</p> <p align="center">举头望明月，</p> <p align="center">抬头思故土。</p> <hr></body></html> 5 正文5.1 HTML正文应用<!-- xxxx -->进行正文；和编程语言一样，晋升代码的可浏览性，不会被浏览器显示进去。5.2 应用办法<!-- 写正文的内容 -->5.3 举例vs code间接在须要加正文的代码行应用ctrl + /即可疾速进行代码正文； ...

前言前几天加入了原宇宙我的项目的学习，奈何是blender老手，工作工夫不能学习，只能忙里偷闲，先先做一个记录，我的项目用到的和没用到的文件都在src目录下的resources文件夹外面。想着做不同的，那么就用框架不一样吧，利用vite搭建的react我的项目，下载threeJs安装包书写。 筹备工作1 ，工具应用的是blender 因为blender对于mac和windows都是能够应用的，3dMax只实用于windows零碎（不过因为我之前学过3dMax的，所以，尽管我是mac，然而也装置了一个windows的虚拟机，3dMax跑起来还是能够应用的。）2，网址blender下载地址：https://www.blender.org/thanks/下载贴图或者材质的：https://www.textures.com/library一些根本模型：https://sketchfab.com/ (在sketchfab上能够拿模型，实现模型的小局部自在)（qq邮箱，google邮箱能够，163邮箱注册如同不行）用于模型绑定骨骼： https://www.mixamo.com/ （无动画的角色，演示的时候用的glb不反对，没提醒。用fbx格局的能够） 3，blender中的一些快捷键在blender中应用的的右手坐标系 性能快捷键全选:A 勾销全选:AA 复制物体:Shift+D挪动:G 缩放:S 挪动视角:鼠标滚轮键旋转:R 搜寻:F3 删除:X填充面:F 合并顶点:M 编辑模式:Tab前视图:1 右视图:3 顶视图:7切换视图:Alt+鼠标中键 透视显示模式:Alt+Z 拆散:P属性栏:N 左侧工具栏:T环选:Alt+A反选:Ctrl+I 暗藏物体:H勾销暗藏:Alt+H查看全副:Shift+C 父子链接:Ctrl+P相机视图:0着色模式:Z 弹出上次的渲染窗口:F11创立汇合:M设置游标:Shift+S 最大化以后窗口:Ctrl+空格物体交互模式设置:Ctrl+Tab进入/退出三视图:Ctrl+Alt+Q 挤出:F9游标回到原点:Shift+C开启/敞开吸附性能:Shift+Tab 抉择相连元素:L一般复制:Shift+D去除父子关系:Alt+P 创立父子关系:Ctrl+P挪动物体:M连贯节点:F 断开节点:Ctrl+鼠标左键增加转换点:Shift+鼠标左键暂停/播放:Alt+A 上一帧/下一帧:左右箭头删除关键帧:Alt+I切换点线面:Ctrl+Tab 撕开后填充:Alt+V倒角工具:Ctrl+B切割工具:K 挤出工具:E细分物体:按住S+鼠标中键渲染:F12 保留用户设置:Ctrl+U有些快捷键我没有试过，能够本人入手尝试做一下 4，代码实现时可能遇到的几个坑动画为什么不动,须要在动画中设置帧的播放程序为什么依照操作，整个画面是黑的,因为相机在外部，须要将相机的地位进行设置为什么底部的材质是黑的, 能够用一个环境光，将四周的亮度调亮 5，代码1，应用vite搭建我的项目这里抉择的是react版本 npm create vite@latest2,下载three.js安装包下载后查看文档对应下载的版本进行查看，因为不同的版本相应的文件可能存在的文件夹不一样，这里我用的是0.145.0 npm install three@0.145.0 3,具体代码1，引入相干文件 import { useState, useEffect, useRef } from 'react'import * as THREE from 'three';// 引入three.js其余扩大库，对应版本查看文档，最新扩大库在addons文件夹下，eg：'three/addons/controls/OrbitControls.js';// OrbitControls控件反对鼠标左中右键操作和键盘方向键操作import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';2,设置盒子宽高 ...

标签 tag根底标签div 块元素介绍：没有任何含意，次要用于 div 进行模块布局 类型：块级元素 block，盒子占用宽度为一整行 属性：没有属性 <div>我是模块</div><AppCard> <div>我是模块</div> </AppCard> span 行内文本元素介绍：没有任何含意，次要用于展现文本内容 类型：内联元素 inline，盒子占用宽度依据内容决定 属性：没有属性 <span>我是内容</span><AppCard> <span>我是内容</span></AppCard> p 段落元素介绍：默认自带了 margin 款式，次要用于展现一段内容 类型：块级元素 block，独占一行 属性：没有属性 <p>我是内容我是内容我是内容我是内容</p><AppCard> <p>我是内容我是内容我是内容我是内容</p></AppCard> img 图片元素介绍：单标签、次要用于展现图片 类型：内联元素 inline，占用地位依据图片宽度决定 属性： src ：图片的门路alt ：图片加载不进去时显示的文本width ：图片展现宽度height ：图片展现高度<img src="xxx.png" alt="加载失败" width="100px" height="100px" /><AppCard> <img src="./tag/noxussj.png" alt="加载失败" width="100" height="100" /></AppCard> h1 ~ h6 一级题目 ~ 六级题目介绍：默认自带了 margin 和 font 款式，次要用于展现不同级别题目 类型：块级元素 block，盒子占用宽度为一整行 属性：没有属性 <h1>我是题目1</h1><h2>我是题目2</h2><h3>我是题目3</h3><h4>我是题目4</h4><h5>我是题目5</h5><h6>我是题目6</h6><AppCard> <h1>我是题目1</h1><h2>我是题目2</h2><h3>我是题目3</h3><h4>我是题目4</h4><h5>我是题目5</h5><h6>我是题目6</h6></AppCard> a 超链接介绍：默认自带了 font 款式，次要用于展现超链接文字 类型：内联元素 inline，盒子占用宽度依据内容决定 属性： href ：超链接地址target ：窗口打开方式，\_blank（新窗口）、\_self（以后窗口，默认）<a href="http://www.baidu.com" target="_blank">点我跳转</a><AppCard> ...

Web 规范 & W3C 标准援用最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要在花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和PC端浏览，深色和浅色模式。 原文链接：https://note.noxussj.top/ Web 规范web 规范次要分为构造、体现、行为 3 局部。 构造：指咱们平时在 body 外面写的标签，次要是由 html 标签组成体现：指更加丰盛 html 标签款式，次要由 css 款式组成行为：指页面和用户的交互，次要由 javascript 局部组成W3C 标准w3c 对 web 规范提出了规范化的要求，即代码标准。 对构造的要求标签字母要小写 正确示范 <div></div>谬误示范 <DIV></DIV> 标签要闭合 正确示范 <div></div><img src="" alt="" />谬误示范 <div><img src="" alt=""> 标签不容许随便嵌套 正确示范 <div> <i></i></div>谬误示范 <div> <i></div> </i>对体现和行为的要求倡议应用外链 css 和 javascript 脚本，实现构造与体现拆散、构造与行为拆散，能进步页面的渲染效率，更快地显示网页内容。 <script setup>import { loginRead } from '../../../src/utils/login-read' loginRead('11004')</script>

HTML5 介绍援用最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要在花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和PC端浏览，深色和浅色模式。 原文链接：https://note.noxussj.top/ 什么是 HTML5 ？HTML5 将成为 HTML 、XHTML 以及 HTML DOM 的新规范，HTML5 是公认的下一代 Web 语言。按目前的状况能够间接了解为 HTML5 就是 HTML 的升级版。 HTML 历史版本网络起源信息看一眼就能够了 HTML 1.0——在 1993 年 6 月发为互联网工程工作小组(IETF)工作草案公布（并非规范）HTML 2.0——1995 年 11 月作为 RFC 1866 公布，在 RFC 2854 于 2000 年 6 月公布之后被发表曾经过期HTML 3.2——1996 年 1 月 14 日，W3C 举荐规范HTML 4.0——1997 年 12 月 18 日，W3C 举荐规范HTML 4.01（渺小改良）——1999 年 12 月 24 日，W3C 举荐规范HTML 和 HTML5 有什么区别？文档类型申明HTML 的文档类型申明太长而且简单，而 HTML5 的文档申明相对来说更为简便，有利于程序员疾速浏览和开发。 ...

HTML 介绍援用最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要在花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和PC端浏览，深色和浅色模式。 原文链接：https://note.noxussj.top/ ::: warning 留神HTML 的根底构造必须要把握::: 什么是 HTML ？超文本标记语言（英语：HyperText Markup Language ，简称：HTML ）是一种用于创立网页的规范标记语言。您能够应用 HTML 来建设本人的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 超文本超过一般文本的个性，不仅是文字，还能够有图片、图形、表格、动画、音频、视频、链接、程序等非文本信息。 标记语言将上述超文本的信息组合起来进行展现（蕴含构造和数据）的一种语言。 HTML 根底构造html 标签：根节点标签head 标签：头部标签，次要寄存网站的根本形容信息body 标签：注释标签，次要寄存网页显示的内容<html> <head> <title>我是网站题目</title> <style></style> </head> <body> <h1>我是注释内容</h1> <script></script> </body></html>标签标签是 HTML 的外围局部。 个性标签由两个尖括号蕴含起来的关键字，例如 <html>标签个别都是成对的呈现，开始标签和完结标签，例如 <html> </html>也有一些标签是单标签，例如 <br /> <img />浏览器渲染的时候不会单纯的显示该标签，而是解析该标签后转换成另外一种模式进行展现分类 类型 布局形式 尺寸 嵌套 案例 块元素 独占一行 可设置宽高 可嵌套任何元素 display: blockdisplay: flex 行内元素 占用的地位由内容决定 宽度高度由内容决定 倡议只嵌套行内元素 display: inline 行内块元素 占用的地位由内容决定 宽度高度由内容决定 可嵌套任何元素 display: inline-blockdisplay: inline-flex

Visual Studio Code介绍Visual Studio Code 是一款十分轻量的前端代码编写工具，也是目前比拟支流的。其中还蕴含了丰盛的插件市场、十分难看的界面风格、可在软件内间接应用命令行工具等。 :::warning 倡议在学习前端之前能够先把软件下载好，不便实际操作。::: 装置官网下载地址：https://code.visualstudio.com 汉化咱们下载完后是英文版的，所以要去 VS Code 的插件市场中去下载中文版插件 Chinese 装置插件后，重新启动 VS Code 开发习惯配置以下是我的集体习惯，小伙伴们能够自行看是否须要 设置手动代码提醒快捷键文件 -> 首选项 -> 键盘快捷键形式 或者 Windows 快捷键：CTRL + K + S 扩大插件VS Code 弱小的插件市场，次要介绍几款罕用的插件。 :::tip 提醒如果你目前用不上这些插件，能够先不必装置。::: One Dark Pro 难看的代码主题 GitLens — Git supercharged Git 记录查看工具，不便随时随刻查看某个人某工夫点改了某一行代码。不便查看单个文件的批改记录。目前小伙伴们可能用不上，须要先把握 Git 技术后能力用。 Path Autocomplete URL 门路补充插件，当你须要查找某个 src 门路的时候，它会给你代码提醒。例如写 img 标签的 src 门路时候能用上。 Vuter 用于高亮 .vue 文件的代码，次要实用于 Vue2.0。目前如果用不上能够先不装置。 ...

咱们常常会看到页面中有一些非凡的动静款式，例如，点击文本的时候，文本色彩发生变化，鼠标悬停在文本区域的时候，文本区域背景色彩产生了扭转，这样的成果该如何实现呢？（案例参照：新闻类型的网站） 网站中的标签及文本，默认没有任何的动态效果，如果想要增加这样动静款式，则须要配合鼠标的各种行为去实现，比方：鼠标点击，鼠标划过等；这些行为都能够应用CSS中的伪类选择器来实现。 伪类选择器，属于类选择器中的一种，他是依据特定状态选取元素。根本语法为：selector冒号前面跟上鼠标行为；在这里selector为其余选择器；冒号及鼠标行为就是罕用的伪类选择器。（selector:link; selector:visited; selector:hover; selector:active 能够展现一下代码的格局） a:link{ color:red} a:visited{ color:red} 罕用的伪类选择器有四个 第一个：鼠标点击前，应用冒号和link连贯 (:link)；代表：鼠标没有操作元素时，元素的默认款式. 第二个：鼠标点击后，应用冒号和visited连贯 (:visited)；代表：鼠标点击并来到元素之后的款式 第三个：鼠标悬停时，应用冒号和hover连贯 (:hover)；代表：鼠标悬停或者是划过元素时元素的款式 第四个：鼠标点击时，应用冒号和active连贯 (:active)；代表：鼠标点击元素霎时，元素显示的款式. 在这里须要留神的是：1，冒号和前面的鼠标行为，没有任何空格，必须连贯在一起；2，四个伪类选择器必须依照以上介绍的程序书写（:link,:visited,:hover,:active）,否则在浏览器中局部款式不能实现；3，如果想要将伪类选择器一起应用，只能利用在超链接a元素下面，因为，其余标签不能实现鼠标拜访前，和鼠标拜访后的两种款式润饰. 在004目录下，创立一个pseudo_class_selector.html文件，构建根本代码，在body外面增加一个a标签，并且为href属性增加一个“#”，设置为空的链接地址；a标签外部增加文本：“王者英雄最强出装”。 在浏览器里预览页面，一个自带下划线，并且文本色彩为蓝色的超链接曾经显示加载实现。 返回代码，应用伪类选择器对a标签进行润饰；在head标签外面增加style标签，应用：a冒号link(a:link{})申明超链接拜访前的款式 ：color red; 在浏览器中查看成果，默认文本色彩蓝色超链接文本变成了红色； 再次返回代码，持续润饰a标签， 应用a冒号visited（a:visited{}）申明超链接拜访后的款式color green，此时浏览器中没有任何的成果显示，因为浏览器中的超链接还未进行点击； 持续润饰a标签，应用a冒号hover（a:hover{}）申明超链接鼠标悬停的款式：color yellow，此时浏览器中鼠标划过a标签的时候，a标签的文本变成了黄色。 持续返回代码，持续润饰a标签，应用a冒号active（a:active{}）， 申明超链接鼠标点击的款式： color skyblue。 超链接的润饰曾经增加结束，回到浏览器，咱们一起来查看成果：超链接文本点击前默认蓝色变为红色款式曾经实现，当鼠标在超链接文本移入移出之时，文本色彩，由红色变成绿色成果也曾经实现；当鼠标在超链接上点击的那一瞬间，能够看到超链接文本变成天蓝色曾经实现；点击过后，鼠标移出文本，超链接的文本色彩变成了绿色。 在这里须要留神的是，伪类选择器也能够利用在其余元素上，然而只能实现active激活霎时和hover鼠标悬停成果; 在a标签的完结地位处回车，增加一个div标签，并且增加文本：“我是一个一般的div标签”，style标签中，应用元素选择器找到div进行润饰;（须要略微进展两秒间接演示代码敲出即可:div{width:200px;height:200px;backgound-color:skyblue}） 持续为div增加款式，鼠标划过时批改div背景色为红色，div:hover ，background-color:red ;（div:hover{background-color:red}） 再来增加一个款式，鼠标点击div时,批改div的宽度高度：(div:active{width:100px;height:100px}) 回到浏览器外面，鼠标划过背景色变为红色成果实现了，并且点击的时候，div的大小也产生了扭转； 文章配套视频链接：https://www.bilibili.com/vide...

如果页面构造很简单，给每个元素设置类名会是很‘头疼’的事件。咱们来举个例子。 通过布局和款式，实现这样的页面成果。 在 004 目录下，创立一个 css-combinators.html 文件，构建根本代码。在 body 里增加一个div 元素，在 div 里增加一个 h1 元素，一个 p 元素，一个 h3 元素。 编写 emmet 命令：ol 大于号 小括号 li 大于号 p 乘以 3，补全代码。 ol>(li>p)*3 给各个元素填入相应的文本。 在浏览器里预览页面，根本构造制作实现了。 开始增加款式：在 head 元素里增加 style 元素，定义元素选择器 h1，申明款式 text-align center。定义类选择器 .color，申明款式 color blue。 给 h3 和div外面的三个 p 元素增加 class 属性，值都设置为 color。 再看一下成果，款式都增加好了。 仔细观察，给每个元素都增加了同一个款式类 color，显得很啰嗦。可不可以简洁一些呢？这就要应用组合选择器了。 通过一些特殊符号将多个简略选择器连接起来，就形成了组合选择器。在 CSS 中，组合选择器有四种： 第一种，后辈选择器，通过空格连贯。 第二种，子选择器，通过大于号（>）连贯。 第三种，相邻的兄弟选择器，通过加号（+）连贯。 第四种，个别兄弟选择器，通过波浪线（~）连贯。 后两个咱们在学习CSS3时再具体介绍，本节课咱们重点学习前两个。 后辈选择器匹配作为指定元素后辈的所有元素。这个例子抉择了<div>元素内的所有<p>元素。 div p { background-color: yellow; ...

最近Evil.js被探讨的很多，我的项目介绍如下 我的项目被公布到npm上后，引起了强烈的探讨，最终因为平安问题被npm官网移除，代码也闭源了作为一个前端老司机，我必定是拥护这种行为，泄私愤有很多种形式，代码里下毒会被git log查到，万一守法了，还不如到职的时候给老板一个大逼兜来的解恨明天咱们来讨论一下，如果你作为我的项目的负责人，如何甄别这种代码下毒欢送退出前端学习，一起上王者,交个敌人下毒手法最朴实无华的下毒手法就是间接替换函数，比方evil.js中，给JSON.stringify下毒了，把外面的I换成了l ，每周日prmise的then办法有10%的概率不触发，只有周日能触发着实有点损了, 并且npm的报名就叫lodash-utils，看起来的确是个正经库，后果被下毒function isEvilTime(){ return new Date().getDay() === 0 && Math.random() < 0.1 }const _then = Promise.prototype.thenPromise.prototype.then = function then(...args) { if (isEvilTime()) { return} else { _then.call(this, ...args)}} const _stringify = JSON.stringifyJSON.stringify = function stringify(...args) { return _stringify(...args).replace(/I/g, 'l') }console.log(JSON.stringify({name:'Ill'})) // {"name":"lll"} 复制代码检测函数toString检测函数是否被原型链投毒，我首先想到的办法就是检测代码的toString，默认的这些全局办法都是内置的，咱们在命令行里执行一下 咱们能够简略粗犷的查看函数的toStringfunction isNative(fn){ return fn.toString() === function ${fn.name}() { [native code] }} console.log(isNative(JSON.parse)) // trueconsole.log(isNative(JSON.stringify)) // false 复制代码不过咱们能够间接重写函数的toString办法，返回native这几个字符串，就能够越过这个查看 JSON.stringify = ...JSON.stringify.toString = function(){ return function stringify() { [native code] }}function isNative(fn){ return fn.toString() === function ${fn.name}() { [native code] }}console.log(isNative(JSON.stringify)) // true复制代码iframe咱们还能够在浏览器里通过iframe创立一个被隔离的window, iframe被加载到body后，获取iframe外部的contentWindowlet iframe = document.createElement('iframe')iframe.style.display = 'none'document.body.appendChild(iframe)let {JSON:cleanJSON} = iframe.contentWindowconsole.log(cleanJSON.stringify({name:'Illl'})) // '{"name":"Illl"}'复制代码这种解决方案对运行环境有要求，iframe只有浏览器里才有， 而且攻击者够聪慧的话，iframe这种解决方案也能够被下毒,重写appendChild函数，当加载进来的标签是iframe的时候，重写contentWindow的stringify办法const _stringify = JSON.stringifylet myStringify = JSON.stringify = function stringify(...args) { return _stringify(...args).replace(/I/g, 'l')} ...

获取元素的尺寸信息，有很多种办法。不同的尺寸属性有不同的定义，如果没有很好的总结，就很容易混同。上面就一起来看看。 偏移尺寸（offset）元素绝对于偏移父元素（offsetParent）的偏移尺寸。 offsetWidth元素在程度方向上占用的像素尺寸，包含：content、padding、vertical scrollbar（macos零碎的滚动条不占据空间，因而不计算）、border。 ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。 offsetHeight元素在垂直方向上占用的像素尺寸，包含：content、padding、horizontal scrollbar（macos零碎的滚动条不占据空间，因而不计算）、border。 ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。 offsetParentoffsetLeft和offsetRight属性的返回值，示意元素与该元素的offsetParent之间的偏移间隔，因而确定offsetParent很重要。 元素的offsetParent确定步骤 —— 依照蕴含的层级关系，从近到远顺次判断该元素的父元素： 是否为定位（position不是static）元素；如果是，则返回该元素。是否为<table>、<th>、<td>元素；如果是，则返回该元素。是否为<body>元素；如果是，则返回该元素。offsetParent为null的状况： 如果该元素或者其父元素的款式属性display设置为none。如果该元素的款式属性position设置为fixed（Firefox返回<body>）。该元素为<body>或<html>。offsetLeft定义：元素左边框外侧间隔该元素offsetParent左边框内侧的像素数。 ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。 offsetTop定义：元素上边框外侧间隔该元素offsetParent上边框内侧的像素数。 ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。 客户端尺寸clientWidth元素外部的宽度，包含：content、padding。 ❗对于inline元素，clientWidth返回0。 ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。 clientHeight元素外部的高度，包含：content、padding。 ❗对于inline元素，clientHeight返回0。 ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。 滚动尺寸容器元素蕴含四个滚动属性：scrollWidth、scrollHeight、scrollTop、scrollLeft。 scrollWidth容器元素在不应用程度滚动条时，能够全副展现外部元素的最小宽度，包含：content、padding。 <!-- <p align="center"><img src="./3.png" width="50%"></p> --> ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。 scrollHeight容器元素在不应用垂直滚动条时，能够全副展现外部元素的最小高度，包含：content、padding。 <!-- <p align="center"><img src="./3.png" width="50%"></p> --> ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。 scrollTop获取该属性时，返回：容器元素在垂直方向滚动的像素数。 设置该属性时：设定容器元素在垂直方向滚动的像素数。 ❗垂直方向设置滚动像素数的范畴：[0, scrollHeight - clientHeight]； 小于0时，scrollTop被设置为0。大于scrollHeight - clientHeight时，scrollTop被设置为scrollHeight - clientHeight。<!-- <p align="center"><img src="./3.png" width="50%"></p> --> ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。 scrollLeft获取该属性时，返回：容器元素在程度方向滚动的像素数。 设置该属性时：设定容器元素在程度方向滚动的像素数。 ❗程度方向设置滚动像素数的范畴：[0, scrollWidth - clientWidth]； ...

制作“社区疫情流调信息表”关上编辑器，新建一个 case_form.html 文件，补全根底代码，在 body 外部增加一个 H1 题目标签，在 H1 题目标签外部输出 “社区疫情流调信息表” ，给 h1 标签定义程度居中的 align 属性，值设置为 center。 接下来再增加一个 p 标签，将提前准备好的文本粘贴到 p 标签里，并且在文字前增加两个&emsp；实现首行缩进的成果。保留页面。 在浏览器中关上页面，题目和段落就制作好了。上面开始制作表单。 回到编辑器中，在段落标签前面，增加一个 form 标签，在 form 里增加 fieldset 和 legend标签，实现根本信息区域分组的成果。 在 legend 标签中增加文本：“根本信息”。保留。回到浏览器，刷新，“根本信息”分组边框就做好了。 回到编辑器，持续增加一个 h4 标签，标签外部增加 文本“1.您的姓名”。持续增加一个 input 标签，type 属性值设置为 text，或者不定义 type 属性，应用默认单行输入框的控件类型。回车换行。 再增加 h4 标签，标签外部增加文本 “2 . 您的手机号” 。再增加一个 input 标签。因为手机号输入框有默认的文本显示且不能批改，所以须要先定义一个 value 属性，值设置成 1 3 7 四个星 2 4 7 3 ，“137**2473”，再定义一个 readonly 属性。保留。 回到浏览器，刷新，成果实现了。  回到编辑器，再增加一个 h4 标签，给它增加文本 “3 . 您的性别”。回车换行。应用 emmet 语句： input[type=radio name=gender]*3，按下 tab，疾速补全三个 input 标签，在标签前面别离增加文本 “男，女和窃密”。 ...

const res1 = await this.$api.AccountManagement.getBillmanagementTenant(this.userInfo.frontTenantId); let strArr = String(res1.data.balance).split('.'); res1.data.balance = strArr.length > 1 ? res1.data.balance : res1.data.balance + '.00';

获取代码： learnhtml.txt HTML 代表超文本标记语言。 它是一种容许咱们为万维网编写页面的语言。它是一种标记语言，它使咱们可能应用代码编写网页来批示应如何显示文本和数据。事实上，HTML 文件是简略的文本文件。 这个标记是什么？它是一种通过用开始标签和完结标签突围页面数据来组织页面数据的办法。此标记用于赋予它所蕴含的文本以意义。与其余计算机语言一样，HTML 有许多版本。这里咱们将探讨 HTML5。 留神： 你能够在相似 codepen 的网站上的教程中，尝试不同的标签和元素带来的成果，了解它们如何起效，并且逐步相熟这门语言。本文次要关注 HTML 语法和一些有用的技巧。 <!-- 正文要像本行一样被包围起来！ --><!-- #################### 标签 #################### --> <!-- 上面是一个咱们将要剖析的HTML文件的例子。 --><!doctype html> <html> <head> <title>我的网站</title> </head> <body> <h1>Hello, world!</h1> <a href = "http://codepen.io/anon/pen/xwjLbZ">来看看这里有什么</a> <p>这是一个段落。</p> <p>这是另外一个段落。</p> <ul> <li>这是一个非计数列表的一项（我的项目合乎列表）</li> <li>这是另一项</li> <li>这是列表中的最初一项</li> </ul> </body> </html><!-- 一个HTML文件通常开始于向浏览器表明本页面是HTML。 --><!doctype html><!-- 在这之后，由<html>开始标签作为起始。 --><html><!-- 在文件的最初会由</html>标签完结。 --></html><!-- 在最终的标签前面应该没有任何货色。 --><!-- 在其中（在开始标签<html>和完结标签</html>两头）咱们能够看到： --><!-- 由标签<head>定义的头部 （头部必须被</head>标签敞开）。 --><!-- 头部蕴含一些不显示的形容和额定信息；这些是元数据。 --><head> <title>我的网站</title><!-- <title>标签通知浏览器在浏览器窗口的题目区和标签栏应该显示什么题目。 --></head><!-- 在<head>区域之后，咱们能够看到<body>标签 --><!-- 在这点之前的内容都不会显示在浏览器的窗口中。 --><!-- 咱们必须在注释区填上须要显示的内容。 --><body> <h1>Hello, world!</h1> <!-- h1标签创立了一个题目 --> <!-- <h1>标签能够有一些副标题，从最重要的（h2）到最轻微的（h6）。 --> <a href = "http://codepen.io/anon/pen/xwjLbZ">来看看这里有什么</a> <!-- 一个指向href=""属性中URL的超链接 --> <p>这是一个段落。</p> <!-- <p>标签让咱们在html页面中显示文字 --> <p>这是另外一个段落。</p> <ul> <!-- <ul>标签创立了一个我的项目合乎列表。 --> <!-- 如果须要一个编号列表，咱们能够应用<ol>标签。这样会在在第一项前显示1.，第二项前显示2.，以此类推。 --> <li>这是一个非计数列表的一项（我的项目合乎列表）</li> <li>这是另一项</li> <li>这是列表中的最初一项</li> </ul></body><!-- 好了，创立一个HTML文件就是这么简略。 --><!-- 当然咱们还能够退出很多额定的HTML标签类型。 --><!-- 插入图片。 --><img src="http://i.imgur.com/XWG0O.gif"/> <!-- 图片源是由src=""属性指明的 --><!-- 图片源能够是一个URL或者你电脑上一个文件的门路。 --><!-- 创建表格也没问题。 --><table> <!-- 咱们开始一个<table>元素 --> <tr> <!-- <tr>让咱们创立一行 --> <th>第一个表头</th> <!-- <th>让咱们给表格列一个题目 --> <th>第二个表头</th> </tr> <tr> <td>第一行第一列</td> <!-- <td>让咱们创立一个单元格 --> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr></table>应用HTML 文件应用 .html 后缀。 ...

按钮在咱们的生存中随处可见，比方：QQ登录界面中的登录按钮，12306购票零碎中的注册按钮，以及购物实现之后的"开始抽奖"按钮等等，这些页面都是通过按钮来取得用户点击确认信息的。 表单控件中的按钮总共分为5类。别离是：提交按钮、重置按钮、一般按钮、图像按钮以及双标签button 按钮。 先来介绍第一类：提交按钮 。他具备 点击确认提交信息，同时发送表单数据给后盾的性能。提交按钮也是通过 input 控件实现，定义 type 的值为 submit sei 即可。submit 就是提交的意思。 关上编辑器，新建一个 input_button.html 页面，实现根底代码，在 body 增加 form 标签，在form 标签外部增加文本 "姓名：" ，再增加一个 input 输入框标签，type 属性值为 text，在输入框前面增加 br 标签换行。在 form 里再次增加文本 "邮箱："，再增加一个 input 输入框标签，type 属性值同为 text，再增加一个 br 换行标签。 最初在 form 里增加 input，type 属性赋值为 submit。se 保留。在浏览器中关上页面，输出姓名和邮箱地址，点击 "提交" 按钮。 表单提交后，页面产生了什么变动？其实，当咱们点击按钮时，产生了三件事：第一件事：页面刷新了；第二件事：输入框的内容隐没了；第三件事：浏览器地址栏里多了一个问号。 咱们刷新一下页面，再次操作一遍，大家仔细观察。刷新，填入姓名和邮箱，点击 "提交"，咱们发现页面闪了一下，这里多了个问号，输入框的内容也隐没了。 上面，咱们来揭发三件事背地暗藏的假相。 页面为什么刷新了？事件的假相是：当用户填写完表单，点击提交按钮，数据提交给了网站的后盾服务器，后盾服务器再将数据保留到数据库中。这里的服务器会给网页的表单提供一个拜访地址。 回到编辑器，咱们曾经觉察到，form 表单里并没有定义服务器地址。那如何定义呢？咱们须要在 form 标签上定义一个 action 属性，action 是口头的意思，就是用户点击提交按钮后，做什么动作。 事实上它的值就是服务器的地址。这个地址咱们得找后端的小伙伴去要，当然，你能够写一个任意的网站地址测试一下。 回到编辑器，咱们给 form 定义 action 属性，赋值为：http://www.baidu.com (全副读出来)，保留页面。 ...

实现表单控件的只读和禁用设置。先来看一个案例，在填写"流调信息表"时，当点击输入框控件，光标会在输入框里闪动，期待咱们输出内容。此时，称这个输入框取得了焦点。刷新一下页面，再点击一下这个输入框控件左侧的题目文本，发现这个输入框也取得了焦点，用户填写表单的体验明显增强了。应用 HTML 如何实现这一性能呢?实现这一性能，只须要在表单中增加 label 标签就能够了。label 是表单标签的意思，根本语法为：尖角号 label，尖角号/label。label 标签对屏幕阅读器用户很有用，因为当用户关注输出元素时，屏幕阅读器会大声读出标签。 label 还能够帮忙咱们点选难以点击的 十分小的区域，比方单选按钮或复选框，当用户点击 label 元素内的文本时，它能够切换单选按钮或复选框。咱们来演示一下。 关上编辑器，新建一个 label.html 文件，主动补全根底代码，在body标签外部编写一个 form 表单标签，在 form 标签外面增加文本请输出用户名： (冒号读出来) ，紧接着增加一个 input 标签，type 属性的值为 text。用 lable 标签把 "请输出用户名" 包裹起来，保留。 在浏览器中关上页面，点击文本，输入框控件并没有呈现光标，哪里呈现了问题？原来，单纯的应用 label 标签还不够，须要为 label 标签增加 for 属性，作用就是用来定义与 label 关联的表单控件，它的值为表单控件的 id 属性值。 这里须要留神，id 属性值具备唯一性，一个页面中不能呈现两个雷同的 id 属性值。返回编辑器中，咱们给 input 输入框定义 id 属性，值设置为 username，再为 label 增加 for 属性，它的值要设置为输入框 id 属性的值： username。 保留页面。返回浏览器，刷新，再次点击文本，输入框取得了焦点，成果实现了。持续回到"流调信息表"案例，在手机号输入框中，默认曾经填入了手机号码，当初咱们试图更改它，却发现无奈批改，这个控件是只读的。只读输入框控件尽管内容不能被输出和批改，却能够复制控件外面原有的文本 (这里有操作，录音时能够慢点)。 在提交表单时，只读控件的值能够被收集并发送给后端，这个特点咱们未来再介绍。另外，textarea 多行输入框控件也能够设置成只读的。如何实现这个成果呢？其实很简略，给控件定义一个 readonly 只读属性就能够实现了。回到编辑器，咱们改一下文件名，增加单词 readonly。持续在原文档里编写代码。在输入框前面增加一个 br 标签，书写文本 "您的手机号:" ，并在文本前面增加 input 标签，type 的取值设置 为text。为了在浏览器中默认显示一个手机号码，须要为它定义一个 value 属性，value 的含意是值的意思，作用是给输入框一个默认值，能够在浏览器中显示给用户。 ...

**散会，常常须要基于资料发展探讨。然而，置信大家也都碰到过这样的挑战：** 1会中忽然被cue，急急忙忙翻找文件，耽搁大家工夫；2对后面资料有疑难，想要翻看核实，但与会者泛滥不不便打断共享；3会中共享的资料没有对立归档，会后难以查找； 如何不便地在会中收发资料呢？当初就关上腾讯会议利用市场，试试“会议文件空间”吧！ 点击上图立刻装置“会议文件空间”利用 “会议文件空间”是腾讯云企业网盘推出的会议专属版本，能够帮忙参会者在散会过程中便捷地拜访、共享、收发文件，晋升沟通合作效率！ 亮点性能介绍参会材料一键分享，权限紧密把控 还在放心会中匆忙找资料？ 用腾讯云企业网盘治理你的会议资料，会中一键关上，共享资料当场散发，其余与会者能够一边在线预览，一边听取分享解说。 您还可设置分享文件的权限，仅可预览、下载次数管控……全面保障会议文件平安。 还能够邀请指定参会人一起编辑文档，无需额定投屏，文档批改间接在线对齐，缩小会后沟通老本。 会议专属群组一键发动，连接会后积淀 会中资料泛滥，放心在会后难以查找？ 当初，在合作空间内创立会议群组，将邀请链接发送到会议聊天窗口中，即可邀请参会人退出合作群组并独特治理会议文件，不便会后材料的收集与分享。 网盘也能疾速“约会” 您还能够在腾讯云企业网盘中间接发动疾速会议、预约会议，可间接进行会议明码、周期性等设置，随时随地疾速“约会”！点击返回：腾讯云企业网盘还等什么，快来体验吧！

作者：Mahdhi Rezvi译者：前端小智起源: medium微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。自1996年公布以来，JS 始终在稳步改良。随着ECMAScript版本的许多改良，最近的版本是ES2020。JS 的一个重要更新是Promise，在2015年,它以 ES6 的名义公布。 什么是 Promise ？MDN 上对 Promise 的定义：Promise 对象用于示意一个异步操作的最终实现 (或失败)及其后果值。对于老手来说，这听起来可能有点太简单了。 国外一位大什么对Promises的解释如下：“设想一下你是个孩子。 你老妈向你保障，她下周会给你买一部新手机。” 你要到下周能力晓得你是否能获取那部手机。你老妈要么真的给你买了一个全新的手机，要么因为不开心就不给你买。 这个就是一个Promise。 一个Promise有三个状态。 别离是： Pending：你不晓得你是否能失去那部手机Fulfilled：老妈快乐了，给你买了Rejected：老娘不开森了，不给你买了这个是我目前听到，最快能了解 Promise 事例。 如果你还没有开始学习 Promise ，倡议你这样做。 Promise蕴含几种十分有用的内置办法。 明天咱们次要介绍这两种办法。 Promise.race()-与 ES6 一起公布Promise.any() -仍处于第4阶段的提案中Promise.race()Promise.race()办法最后是在 ES6 中引入 Promise 时公布的，这个办法须要一个iterable作为参数。 Promise.race(iterable) 办法返回一个 promise，一旦迭代器中的某个promise解决或回绝，返回的 promise 就会解决或回绝。 与Promise.any()办法不同，Promise.race()办法次要关注 Promise 是否已解决，而不论其被解决还是被回绝。 语法Promise.race(iterable)参数iterable — 可迭代对象，相似 Array。 iterable 对象实现Symbol.iterator办法。 返回值一个待定的 Promise 只有给定的迭代中的一个promise解决或回绝，就采纳第一个promise的值作为它的值，从而异步地解析或回绝（一旦堆栈为空）。 留神因为参数承受iterable，所以咱们能够传递一些值，比方根本值，甚至数组中的对象。在这种状况下，race办法将返回传递的第一个非 promise 对象。这次要是因为办法的行为是在值可用时(当 promise 满足时)立刻返回值。 此外，如果在iterable中传递了曾经解决的Promise，则Promise.race()办法将解析为该值的第一个。 如果传递了一个空的Iterable，则race办法将永远处于待处理状态。 事例const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, 'promise 1 resolved');});const promise2 = new Promise((resolve, reject) => { setTimeout(reject, 100, 'promise 2 rejected');});const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 200, 'promise 3 resolved')});(async () => { try { let result = await Promise.race([promise1, promise2, promise3]); console.log(result); } catch (err) { console.error(err); }})(); // 输入- "promise 2 rejected" // 只管promise1和promise3能够解决，但promise2回绝的速度比它们快。 // 因而Promise.race办法将以promise2回绝实在用例当初，你可能想晓得，咱们在实战中何时 Promise.race() ？ 来看看。 ...

最近在入门三维，刚好须要解决一个数据。把县区的数据转成市区。简略点的说就是把小图合成一张大图。成果须要把整个广州市区的县合并起来，生成的后果如下： 步骤开发三维的人都晓得，解决地形数据，qgis是少不了的。接下来咱们就用qgis来解决一下数据。第一步 线转面把数据拖入qgis当中，把以后的县界转成面在转成面的过程中，须要做以下操作：后果转化胜利后，就能够看到生成的面了。而后在鼠标右键点击这个面，能够查看属性。 第二步： 交融在第一步的根底上，有了21个面，那么咱们能够对以后的面进行交融操作，生成一个面，也就是咱们须要的市区边界数据。 具体步骤如下： 点击交融按钮 在交融的弹窗上面，点击运行 后果 总结本期和大家分享了如何应用qgis来将一个县区的线转成一个市区的线。其实次要就是把线转成面，而后面在进行交融操作即可。 更多qgis的操作能够查看这里

【欧拉多咖·操作系统研讨会】第五期：OS 视窗 将于本周六10 月29日 14:00线上举办！届时，openKylin社区技术委员会委员余杰将受邀加入，与清华路奇、华为李平，杨程云和统信张海东五位专家别离从桌面PC，智能座舱，终端，嗅觉计算和交互等多种场景分享对视窗零碎的了解和构建教训，探讨人机交互对OS零碎的将来倒退可能，最初一起与华为 OS视窗钻研畛域负责人 陈秋林博士就 “将来终端视窗体验面临哪些新挑战”进行凋谢探讨，欢送大家退出会议，一起畅聊和大家都相干的本期乏味话题！openKylin（凋谢麒麟）社区旨在以“共创”为外围，在开源、被迫、平等、合作的根底上，通过开源、凋谢的形式与企业构建合作伙伴生态体系，独特打造桌面操作系统顶级社区，推动Linux开源技术及其软硬件生态凋敝倒退。社区首批理事成员单位包含麒麟软件、普华根底软件、中科方德、麒麟信安、凝思软件、一铭软件、中兴新支点、元心科技、中国电科32所、技德零碎、北京麟卓、先进操作系统翻新核心等13家产业同仁和行业机构。 审核：openKylin

场景： 最近在开发网站的时候，有两处中央须要用到文本自适应高度。 一处是应用富文本编辑器的时候，富文本编辑器会随着文本高度变动而变动。然而套在内部的div不会啊。第二处是从后端发送申请，接管来自后端的数据再渲染至前端时。数据的展现量不是固定的，比方一篇文章，你不晓得这篇文章是字多还是字少。遇到以上两种状况，我一开始用的方法是对渲染数据的容器做监听，每当容器大小扭转时，就将其父容器等等也同样扭转尺寸。这就很麻烦了，还须要对好几个对象进行操作，并且还要计算高度等等。 解决： 也是在偶尔的阅览中，发现css自带一个属性：min-height; 这个属性是让dom元素高度不小于指定高度。当父容器带了这个属性，子容器高度小于父容器时，父容器高度为最小高度，当子容器高度大于父容器时，父容器高度随着子容器高度变动而变动，几乎就是完满解决了我的问题，而且竟然这么简略。min-height详解 我感觉对于日常开发中这个属性挺实用的，特此记录。

本文来自InfoQ,作者:Tina，核子可乐技术和软件开发畛域存在一种乏味的景象，就是同样的模式迭起兴衰、周而复始。 htmx 的走红过来 Web 非常简单。URL 指向服务器，服务器将数据混合成 html，而后在浏览器上出现该响应。围绕这种简略范式，诞生了各种 Javascript 框架，以前可能须要数月工夫实现的一个应用程序基本功能，当初借助这些框架创立绝对简单的我的项目却只须要数小时，咱们节俭了很多工夫，从而能够将更多精力花在业务逻辑和利用程序设计上。 但随着 Web 一直地倒退，Javascript 失控了。不知何故，咱们决定向用户抛出大量 App，并在应用时收回一直减少的网络申请；不知何故，为了生成 html，咱们必须应用 JSON，收回数十个网络申请，抛弃咱们在这些申请中取得的大部分数据，用一个越来越不通明的 JavaScript 框架黑匣子将 JSON 转换为 html，而后将新的 html 修补到 DOM 中...... 难道大家快遗记了咱们能够在服务器上渲染 html 吗？更快、更统一、更靠近应用程序的理论状态，并且不会向用户设施发送任何不必要的数据？然而如果没有 Javascript，咱们必须在每次操作时从新加载页面。 当初，有一个新的库呈现了，摒弃了定制化的办法，这就是 htmx。作为 Web 开发将来理念的一种实现，它的原理很简略： 从任何用户事件收回 AJAX 申请。让服务器生成代表该申请的新应用程序状态的 html。在响应中发送该 html。将该元素推到它应该去的 DOM 中。htmx 呈现在 2020 年，创建者Carson Gross 说 htmx 起源自他于 2013 年钻研的一个我的项目intercooler.js。2020 年，他重写了不依赖 jQuery 的 intercooler.js，并将其重命名为 htmx。而后他诧异的发现 Django 社区迅速并戏剧性地承受了它！ 图片起源：https://lp.jetbrains.com/django-developer-survey-2021-486/ Carson Gross认为 htmx 设法抓住了开发者对现有 Javascript 框架不满的浪潮，“这些框架非常复杂，并且常常将 Django 变成一个愚昧的 JSON 生产者”，而 htmx 与开箱即用的 Django 配合得更好，因为它通过 html 与服务器交互，而 Django 十分善于生成 html。 ...

原文链接：举荐几款难看又好用的开源博客Vuepress Auroravuepress-theme-aurora 是一款基于 Vuepress2 的博客主题，将本地 Markdown 文件解析成动态 html 页面，作为博客文章。搭配 说说，时间轴，文章分类，评论，友情链接，相册，音乐播放器 等特色性能，给您不一样的应用体验。 100%自定义简洁，丑陋高扩大多功能配置文档 Github地址：https://github.com/vuepress-a...文档地址：https://aurora.xcye.xyz/动漫Demo：https://aurora-animate.xcye.xyz/非动漫Demo：https://aurora-common.xcye.xyz/Vdoingvuepress-theme-vdoing 是一款简洁高效的 VuePress 常识治理&博客主题。它以 Markdown 为核心的我的项目构造，内置自动化工具，以更少的配置实现更多的事。配合多维索引疾速定位每个知识点，能够作为知识库也能够作为博客零碎；其蕴含三种典型的常识治理状态：结构化、碎片化、体系化。轻松打造属于你本人的常识治理平台；专为浏览设计的UI，配合多种色彩模式、可敞开的侧边栏和导航栏，带给你一种沉迷式浏览体验。 常识治理简洁高效沉迷式浏览 Github地址：https://github.com/xugaoyi/vu...Gitee镜像：https://gitee.com/xugaoyi/vue...文档地址：https://doc.xugaoyi.com/知识库兼博客站：https://xugaoyi.com/仅博客站：https://xugaoyi.github.io/vdo...仅知识库：https://xugaoyi.github.io/vdo...Hopevuepress-theme-hope 一个具备弱小性能的 vuepress 主题✨。V2 基于 VuePress2，带有 Vite2 / Webpack5和 Vue3 的弱小性能。 更丰盛的内容Markdown 加强页面 UI残缺的博客反对搜寻性能搜索引擎加强 Github地址：https://github.com/vuepress-t...Fork地址：https://stackblitz.com/fork/v...文档地址：https://vuepress-theme-hope.g...在线案例：https://mister-hope.github.io/Butterfly（本站所用）hexo-theme-butterfly 一个为 Hexo 打造的简洁、丑陋、疾速的主题。 简略丑陋，文章内容好看易读Material Design 设计响应式设计，博客在桌面端、平板、手机等设施上均能很好的展示瀑布流式的博客文章列表（文章无特色图片时会有 24 张丑陋的图片代替）工夫轴式的归档页丰盛的对于我页面（包含对于我、文章统计图、我的我的项目、我的技能、相册等）可自定义的数据的友情链接页面反对文章置顶和文章打赏反对 MathJax可设置复制文章内容时追加版权信息Gitalk、Gitment、Valine 和 Disqus 评论模块集成了不蒜子统计、谷歌剖析（Google Analytics）和文章字数统计等性能反对在首页的音乐播放和视频播放性能 Github地址：https://github.com/jerryc127/...文档地址：https://butterfly.js.org/post...预览地址：https://tzy1997.com/Hexo Aurorahexo-theme-aurora 是应用极光色彩和 UI 元素的下一代主题。它给你平滑晦涩的色调和将来感。基于 Vue3 构建，享受由 Vue3 建设的单页面利用（SPA）所带来的更优雅，更敌对的用户体验。 NEW NPM/Yarn 疾速装置 - 能够轻易的应用 NPM 或者 Yarn 装置主题。举荐区域 - 能够在文章的 meta 中增加 feature 属性，让头 3 篇文章指定到首页举荐地位。实时多语言反对 - 能够实时切换博客内次要文字的语言。数据统计 - 统计文字数、文章数、分类数和标签数。文章浏览时长 - 每个文章都会显示文章的预估浏览时长。Mathjax 反对 - 反对在 markdown 中写 Maxjax 语法的数学公式。单页面利用 - 页面与页面之间的跳转没有提早或者期待，数据都是动静加载的。评论插件 - 反对应用 Gitalk 或者 Valine 评论插件文章搜寻 - 能够搜寻全站的所有文章文章导航 - 能够在文章详情底部跳转到上一篇或者下一篇文章。最新评论 - 给首页增加一个最新评论模块，反对应用 gitalk 或者 valine。 ...

1.在咱们夏天天气炎热的时候，咱们总会感叹天气的极其，那么咱们又如何在页面上表白这种对天气炎热的埋怨感呢，例如： 2.那咱们该怎么样去显示出这种成果呢？A.应用菊花字符488&#488;行代码： <h2>今&#x488;天&#x488;真&#x488;是&#x488;热&#x488;死&#x488;了&#x488;</h2>B.通过伪元素生成：首先要把文字拆分开来，如何包裹上一个个<span></span>标签 [...'明天真是热死了'].map(el=>`<span>${el}</span>`).join('') span::after{content:'\488'}这样子下来，页面当中就不会有特殊字符了，对搜索引擎也更敌对了 C.通过文本装璜生成应用text-emphasis,其大小为原文本字体大小的1/2，将来不影响原题目的大小，能够利用伪元素生成一份雷同的文案，具体做法如下：<p title="明天真是热死了">明天真是热死了</p> 文本装饰业放在伪元素上，并且设置相对定位 p::before{ position: absolute; content:attr(title); text-emphasis: '\488';}而后放大字体，放大两倍： p::before{ position: absolute; content:attr(title); text-emphasis: '\488'; font-size: 200%; }示意图变成这样子了：当初会发现文字太大，而后字符间距加大了，所以要放大字符间距，能够用letter-spacing实现 p::before{ position: absolute; content:attr(title); text-emphasis: '\488'; font-size: 200%; letter-spacing: -0.5em; }示意图：最初要将多余的文本暗藏起来： -webkit-text-fill-color:transparent; p::before{ position: absolute; content:attr(title); text-emphasis: '\488'; font-size: 200%; letter-spacing: -0.5em; -webkit-text-fill-color:transparent; }最初示意图：

智慧园区引言 明天，咱们正经验着一场信息反动，以<font color=orange>物联网、大数据、云计算、BIM、电子商务</font>等为代表的信息技术必将从撑持修建产业倒退向引领产业现代化改革逾越。中国修建产业转型降级就是以<font color=blue>互联化、集成化、数据化、智能化</font>的信息化伎俩为无效撑持，通过技术创新与治理翻新，带动企业与人员能力的晋升，最终实现建造过程、经营过程、修建及基础设施产品三方面的降级 建筑业在疾速倒退的同时，仍存在着<font color=red>治理粗放、效率低下、节约较大、能耗过高、科技翻新有余</font>等问题。同时，我国经济步入新常态，传统粗放式的高速增长阶段，进入高效率、低成本、可继续的中高速增长阶段。 传统建造模式已不再合乎可继续倒退的要求，迫切需要利用以信息技术为代表的现代科技伎俩，实现中国修建产业转型降级与跨越式倒退。 基于以上的状况，智慧园区就很有必要了 成果 看完动图之后有没有感觉，没有感觉的话，请系好安全带，开发发车 <iframe height=500 width=500 src="//player.bilibili.com/player.html?aid=467121851&cid=551399627&page=1" scrolling="no" border="0" frameborder="no" framespacing="0"></iframe> 请各位看清楚哈，这是在<font color=red>浏览器</font>中运行的3D的智慧园区的案例，难看么，想要源码的么？那就来聊我吧！总体架构图 性能园区总览 园区总览外面次要蕴含了<font color=red>园区介绍、设施正告、园区成绩和车流统计</font>等,在以后模块中能够实时的统计以后园区的真实情况，各个指标是否符合要求等。当然除了写着性能外，在以后的园区总览中还有进行漫游和电子围栏等。这里解释一下啥叫做漫游，意思是说，能够对以后的园区的特定中央进行观光和浏览，大抵如下图： 园区态势 园区态势外面次要蕴含了以后园区的<font color=red>商家，企业</font>等的入驻状况，并且须要把以后的行业散布状况和园区胜利等对立应用echarts报表的形式来进行展现 设施设施 设施设施次要蕴含以后园区的所有公共设施的应用状况，不便园区的管理员实时查看以后园区的最新情况，并且如果园区的设施存在肯定的告警状况，在以后模块也能够进行及时的预警管理员及时处理 安防治理 安防治理则是园区的重中之重，在以后模块中次要从三个方面来进行管控： 安防预警通信管控停车治理 在这三个方面中全方面的管控园区的平安，高效的保障全区的失常流转 能源管理 能源管理则是园区的外围，过分的能源节约是不必要的，所以能够在以后的模块中查看哪一栋和哪一层的能源节约最多，从而防止更多的能源节约。

有时候须要在页面里绘画线条,简单点的能够应用canvas去画,简略点的能够间接应用css搞定,通过:before和:after伪类实现。 成果如图: 代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background-color: black; } .tree { display: flex; } .line { background-color: white; position: relative; } .content { background-color: aqua; } .content .box { text-align: center; } </style></head><body> <div class="tree"> <div class="line" id="tree-line"> </div> <div class="content" id="tree-content"> </div> </div> <script> //元素信息 let elementInfo = { total: 12,//元素总量 perHeight: 30,//每个元素高度 perWidth: 120,//每个元素宽度 maxLevel: 5,//最大层级 } //连接线信息 let lineInfo = { perLevelWidth: 30,//每一层宽度 size: 2,//线宽 or 高 color: "black",//线色彩 styleSheet: "",//款式,依据drawLine动态变化 } let lineElement = document.getElementById("tree-line");//线区 let contentElement = document.getElementById("tree-content");//内容区 lineElement.style.width = `${elementInfo.maxLevel * lineInfo.perLevelWidth}px`;//依据层级确定线条区域的宽度 //初始化内容区数据 function drawData() { for (let i = 1; i <= elementInfo.total; i++) { let divEle = document.createElement("div"); divEle.className = "box"; divEle.innerText = `test-${i}`; divEle.style.height = `${elementInfo.perHeight}px`; divEle.style.lineHeight = `${elementInfo.perHeight}px`; divEle.style.width = `${elementInfo.perWidth}px`; contentElement.appendChild(divEle); } } //依据给定参数绘出连接线 function drawLine(rowStart, rowEnd, level) { if (rowStart < 1) return; if (rowEnd > elementInfo.total) return; if(level < 1 || level > elementInfo.maxLevel) return; let lineVerticalEle = document.createElement("div"); let lineHorizontalEle = document.createElement("div"); let lineVerticalClassName = `line${rowStart}-${rowEnd}-vertical`; let lineHorizontalClassName = `line${rowStart}-${rowEnd}-horizontal`; lineVerticalEle.className = lineVerticalClassName; lineHorizontalEle.className = lineHorizontalClassName; let tempStyle = ` .${lineVerticalClassName}::after { display: block; content: ""; position: absolute; background-color: ${lineInfo.color}; width: ${lineInfo.size}px; height: ${(rowEnd - rowStart) * elementInfo.perHeight}px; top: ${(rowStart - 1) * elementInfo.perHeight + elementInfo.perHeight / 2}px; left: ${(level - 1) * lineInfo.perLevelWidth + lineInfo.perLevelWidth / 2}px; } .${lineHorizontalClassName}::before { display: block; content: ""; position: absolute; background-color:${lineInfo.color}; height: ${lineInfo.size}px; width: ${(elementInfo.maxLevel - level) * lineInfo.perLevelWidth + lineInfo.perLevelWidth / 2}px; top: ${(rowStart - 1) * elementInfo.perHeight + elementInfo.perHeight / 2}px; left: ${(level - 1) * lineInfo.perLevelWidth + lineInfo.perLevelWidth / 2}px; } .${lineHorizontalClassName}::after { display: block; content: ""; position: absolute; background-color: ${lineInfo.color}; height:${lineInfo.size}px; width: ${(elementInfo.maxLevel - level) * lineInfo.perLevelWidth + lineInfo.perLevelWidth / 2}px; top: ${(rowEnd - 1) * elementInfo.perHeight + elementInfo.perHeight / 2}px; left:${(level - 1) * lineInfo.perLevelWidth + lineInfo.perLevelWidth / 2}px; } ` lineInfo.styleSheet += tempStyle + "\n"; lineElement.appendChild(lineVerticalEle); lineElement.appendChild(lineHorizontalEle); } drawData(); drawLine(1, 12, 1); drawLine(6, 9, 2); drawLine(10, 11, 2); let head = document.head || document.getElementsByTagName('head')[0]; let lineStyle = document.createElement('style'); lineStyle.type = 'text/css'; lineStyle.innerHTML = lineInfo.styleSheet; head.appendChild(lineStyle);//增加线条款式 </script></body></html>

<el-table-column prop="receiptDate" label="日期" :formatter="formatDate_self"></el-table-column>//日期格式化 formatDate_self(row, column) { // 获取单元格数据 let data = row[column.property] if (data == null) { return null } let dt = new Date(data) return dt.getFullYear() + '-' + ((dt.getMonth() + 1) > 9 ? (dt.getMonth() + 1) : ("0" + (dt.getMonth() + 1))) + '-' + (dt.getDate() > 9 ? (dt.getDate()) : ("0" + dt.getDate())) }

<el-table-column type="number" prop="total" label="共计" :formatter="rounding"></el-table-column> //展现时数据格式化 rounding(row, column) { return parseFloat(row[column.property]).toFixed(2) },

HTML元素语义化标签CSS选择器继承属性外围模块背景图像革除浮动定位BFC应用 attr()展现 tooltipJavaScript基础知识实用技巧内存治理JS 思维导图学习 JS 的 8 张思维导图jQuery 的 deferred 对象jQuery 学习笔记PromiseHTTP导学细节跨域和缓存Ajax 技术细节前端路由原理性能优化Regex正则表达式正则表达式实例Vue基础知识计算属性v-bind 及 class 与 style 绑定内置指令办法与事件表单与 v-model组件详解自定义指令Render 函数函数化组件Vue 插件状态治理与 Vuex部署 github pagesInterview导学HTMLCSSJavaScriptES6NodeHTTP性能优化WebRTCwebrtc:one-to-one-talkwebrtc:sdpNodejskoa-blogWebpackbasic-configure

我的确对Facebook聊天行为做了一些钻研。并且我感觉它对各方面的解决极具好看，比方聊天框、图片的解决、援用的解决、头像、状态的变动等。这突破了我“聊天性能太容易了”的固有想法。 解决单张图片你可能会认为解决不同大小和宽高比的图像所需的工作是一项简略的工作。很多人仿佛会这么做：max-width: 100%？Facebook的状况并非如此。 当用户上传图像时，其宽度被增加为内联CSS，并且利用padding-bottom（高宽比，当初被广泛应用在元素的本身响应式中）解决图像的响应性。 <a class="image" href="#"> <div class="image__main"> <div class="image__element" style="width: 348.259px; "> <div class="image__aspectRatio" style="padding-bottom: 57.4286%"> <div class="image__wrapper"> <img src="assets/thumb-1.png" alt=""> </div> </div> </div> </div></a>.image { display: block; border-radius: 18px; border: 1px solid #0006; overflow: hidden;}.image__main { max-width: 480px;}.image__element { max-width: 100%; position: relative;}.image__aspectRatio { position: relative;}.image__wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;}.image__wrapper img { display: block; max-width: 100%; max-height: 200px; width: 100%; height: 100%;}以下是每个图像应遵循的规定： 最大宽度为480px最大高度为200px调整大小时，图像应放弃雷同的纵横比如果图像小于最大值，则按原样显示它这里十分nice的一点就在于，宽高比是依据所应用的图像动静生成的。 除此之外，重要的是要记住，flexbox不会将flex我的项目放大到其最小内容大小以下。这意味着，如果将浏览器大小调整为特定宽度，flex 项将不会放大到低于其最小内容大小。要解决此问题，咱们须要增加 min-width: 0。否则，对图片来讲，相对会呈现溢出的状况。 ...

transform变换~ 简单的变换参数。Transform 取值`none `初始值None 实用于除 “基元行内”框之外的所有元素 百分数绝对范畴框计算 计算值指定的值，不过绝对长度值会计算为相对长度 继承性否 动画性变形 坐标系1.1 在CSS中，笛卡尔坐标系应用三个轴示意（如下图）： x轴（横轴）y轴（纵轴）z轴（深度轴）每个元素都有本人的参照物，各轴都绝对本身而动。 2D变形只须要关注x轴和y轴;3D要加上 z轴x轴的正值在右侧，负值在左侧。y轴的正值纵轴向下，负值纵轴向上。z轴从显示器上跃出，指向你的眼前。z轴上的正值离你较近，负值离你较远。1.2 旋转如果旋转了元素，轴也随之旋转。旋转之后再变形，是绝对旋转后的轴计算CSS变形性能中应用的另一个坐标系——球坐标系 罕用平移translate()translate3d()translateX()translateY()translateZ() 缩放scale()scale3d()scaleX()scaleY()scaleZ() 旋转rotate()rotate3d()rotateX()rotateY()rotateZ() rotate3d(x,y,z,deg)应用 rotate(45deg)用3D旋转示意是 rotate3d(0,0,1,45deg)应用rotate3d()。前三个值指定3D空间中向量x,y和z的向量，第四个值是角度值，指上图中rotate(45deg)在3D空间中，等价于rotate3d(0,0,1,45deg)。前三个数设定向量的三个重量，这个向量在x轴和y轴上的大小为0。在z轴上的大小为1。因而，这个向量在z轴上，指向正方向，即指向观察者。如果看向量的原点，元素是顺时针旋转。 如果说旋转函数是rotate3d(-0.95,0.5,1,45deg)形容的向量。假如有个边长200像素的立方体，那么这个向量在x轴上的大小为190像素，指向左方。在y轴上的大小为100像素，指向下方。在z轴上的大小为200像素，指向观察者。这个向量从原点(0,0,0)指向(-190px,100px,200px)。如下图： ps:rotate3d(1,1,0,45deg)与 rotateX(45deg) rotateY(45deg) rotateZ(0deg)不等效。 歪斜skew()skewX()skewY() 透视点在3D空间中扭转元素的状态时，基本上都要赋予元素肯定的视域。视域为元素赋予前后深度，而这深度能够依据须要设定。能够了解成镜头的焦距越大示意越远，越小示意越近；近大远小；有3D成果须要配置合应用 perspective()500px到1000px之前的值产生“适中的视域”。下图展现了雷同旋转角度下不同视域值得到的后果。必须是负数，而且不能为零。其余值都将导致 perspective()函数被疏忽。肯定要把 perspective()函数放在首位，只有也要放在以来视域的变形之前。 perspective 属性与perspective()函数的区别 perspective()函数只为指标元素定义视域，比方申明perspective(800px) rotateY(45deg)。那么只有利用这个规定的元素能力应用设定的视域。perspective 属性定义的视域深度利用到指标元素的所有子元素上。其余挪动原点transform-origin目前所见的变形有个共同点，都以元素的相对核心为变形的原点。第一个值针对横向，第二个值针对纵向，可选的第三个值是z轴上的长度。 变形形式transform-style设置元素的子元素是位于 3D 空间中还是立体中。 .outer { transform: perspective(750px) translateY(60px) rotateX(-20deg); transform-style: perserve-3d;}.inner { transform: perspective(750px) translateZ(60px) rotateX(45deg); }<div class="outer"> <div class="inner">inner</div></div>ps:transform-style设定的变形形式可能会被其余属性笼罩,导致有效perserve-3d overflow: visiblefilter: noneclip: autoclip-path: nonemask-image: nonemask-border-source: nonemix-blend-mode: normal解决反面在3D变形中，backface-visibility属性能够看到元素的反面。 .card {position: relative;perspective: 800px;transform-style: preserve-3d;width:200px;height:280px;transition: all .6s;border: 1px solid #000;border-radius: 4px;}.card:hover {transform: rotateY(180deg);}img {position: absolute;width:100%;height: 100%;transition: all .5s;backface-visibility: hidden;}/*因为咱们将两个图像都藏在了反面，所以另一面没有任何货色。 所以接下来须要再把.front-face翻转180度*/.back-face {transform: rotateY(180deg);}<div class="card"> <img class="front-face" src="1.jpg"> <img class="back-face" src="2.jpg"></div>留神范畴框：计算范畴框时，轮廓和外边距不算在内变形的元素有本人的重叠上下文：变形前小或大，元素在页面上所占的空间与变形前放弃不变。对所有变形函数都成立示意一个或多个变形函数：两头以空格分隔。如：transform: rotate(30deg) skewX(-25deg) scaleY(2);变换程序：从最右边第一个开始，始终到最初一个正确设置值：有多个变形函数时，每个都要设置正确，要确保全副无效。如果有一个函数是有效的，整个值都将生效。变形叠加：变形通常不叠加。如果扭转了元素的状态，而后再想增加一种变形，那么要在原变形根底上批改。变形当初还不能利用到基元行内框上。基元行内框指span，超链接等行内框。这些元素能够随着块级父元素一起变形，然而不能间接旋转。除非把它们的显示方式改为display:block，display:inline-block等。有3D成果须要配合**perspective**应用 ...

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，蕴含一线大厂面试残缺考点、材料以及我的系列文章。本文不是要答辩 Vue 好还是 React 好，而是要看看这两个框架在低层次上是如何抉择的。 我晓得有些开发者在抉择框架之前会偏向于看基准。然而，这并不是最要害的方面，因为99%的性能都来自于你写的代码，而不是你应用的框架。 那么，我是如何得出这个论断的呢？ 这里选取了三个常见的web应用程序问题，并查看了Vue和React在每个场景中的响应状况。 我的项目这里有一个相似 TODO 的我的项目，不过这里增加的不是事项而是水果。 上面是 React 代码： Vue 代码： 测试1： 动态模块在第一个测试中，咱们将比拟 React 和 Vue 是如何编译动态局部的。 先来看看React： 如上图所示，在 JSX 中，编译器是非常简单的。所有的 JSX 元素都被替换成 React 的createElement 函数。它将在应用程序的每次状态更新时从新渲染所有动态元素。 再来看看 Vue 中是怎么做的： 可能看起来有些简单，但这里留神一下 hoisted_1 变量和 setup 办法。正如咱们所看到的，hoisted_1变量蕴含了咱们的动态内容，并被定义在 setup 函数之外。 在编译过程中，Vue检测所有不依赖于应用程序状态的动态节点，并将变量晋升到组件设置之外，这样它就不用在每次渲染后从新生成这些动态节点。 小结React 只将 JSX 编译为JS，而 Vue 通过晋升无效地优化了动态块。这种优化对具备许多节点和深层树状构造的大页面是无益的。 测试2：从新渲染React 和 Vue 之间的显著差别在这第二个测试中显现出来。 当咱们在文本输出中输出 "TEST "时，React 应用程序的控制台: 咱们能够看到，MyFruits组件被渲染了五次。 在父组件的第一次渲染时一次在输出中每按一次键，就有四次（test 的个数）。再来看看 Vue 的状况： ...

默认路由的配置数据定义在 default-routing-config.ts 文件内： 一些例子： login: { paths: ['login'], protected: false, authFlow: true, }, register: { paths: ['login/register'], protected: false, authFlow: true, },RoutingModule 的 forRoot 办法： 在 webpack.require 的时候，forRoot 办法就会被触发： RoutingModule：projects\core\src\routing\routing.module.ts - 初始化 configurable routeRoutingModule：projects\storefrontlib\cms-structure\routing\routing.module.ts - 提供默认 route 配置AppRoutingModule：projects\storefrontlib\router\app-routing.module.ts：如果在 AppModule 里不 import AppRoutingModule： Spartacus 无奈实现加载，这显示是意料之中的事件，因为 No provider for Router 的谬误音讯提醒很明确了： 正文了 AppRoutingModule 之后，来自 @angular/router 里的 规范 RouterModule，基本没有被导入到 AppModule 中。 打印出 Spartacus Router.config 的值： 打印进去全是这种 generic 的配置： ...

新出了一个系列：Vue2与Vue3 技巧小册 微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。最近正在将一个应用单文件组件的 Options API 的 Vue2 JavaScript 我的项目降级为 Vue3 typescript，并利用 Composition API 的劣势。 比方，上面这种 选项API 形式： export default { props: { name: { type: String, required: true. } }, emits: ['someEvent', 'increaseBy']};咱们将它转成 组合API 形式： const props = defineProps<{ name: string; }>(); const emit = defineEmits<{ (event: 'someEvent): void; (event: 'increaseBy', value: number): void; }>();从 选项API 的 emit 和 props 到 组合API 的 defineemit 和 defineProps 函数的基于类型语法的转换并不简略。我也很好奇 Vue 是如何解决接口的。 ...

　在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。　DOM 节点　依据 W3C 的 HTML DOM 规范，HTML 文档中的所有内容都是节点：　整个文档是一个文档节点　每个 HTML 元素是元素节点　HTML 元素内的文本是文本节点　每个 HTML 属性是属性节点　正文是正文节点　HTML DOM 节点树　HTML DOM 将 HTML 文档视作树结构。这种构造被称为节点树：　HTML DOM Tree 实例　HTML DOM Node Tree　通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行拜访。所有 HTML 元素（节点）均可被批改，也能够创立或删除节点。　节点父、子和同胞　节点树中的节点彼此领有层级关系。　父（parent）、子（child）和同胞（sibling）等术语用于形容这些关系。父节点领有子节点。同级的子节点被称为同胞（兄弟或姐妹）。　在节点树中，顶端节点被称为根（root）　每个节点都有父节点、除了根（它没有父节点）　一个节点可领有任意数量的子　同胞是领有雷同父节点的节点　上面的图片展现了节点树的一部分，以及节点之间的关系：　DOM 节点关系　请看上面的 HTML 片段：　...

子盒子始终撑满父盒子减去导航的高度，应用calc和flex两种办法。代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>子盒子始终撑满父盒子减去导航的高度</title> <style> .test { width: 500px; height: 40vh; border: 1px solid #000; } .test nav { width: 100%; height: 100px; background-color: red; } .test .content { background-color: green; height: calc(100% - 100px); } .test2 { width: 500px; height: 40vh; border: 1px solid #000; display: flex; flex-direction: column; } .test2 nav { width: 100%; background-color: red; } .test2 .content { background-color: green; flex: 1; } </style></head><body> <div class="test"> <nav>导航导航</nav> <div class="content"> 子盒子始终占满父盒子减去导航的高度 <br> height: calc(100% - 100px); </div> </div> <hr> <div class="test2"> <nav>导航导航</nav> <div class="content"> 子盒子始终占满父盒子减去导航的高度 <br> 利用display:flex实现一盒子固定宽高另一盒子占满残余宽度 </div> </div></body></html> ...

欢送关注我的公众号：前端侦探在很多客户端应用程序中，个别会通过利用图标的角标来显示以后音讯的数量，例如 其实，web 中也有相似的设定，花两分钟理解一下吧 一、navigator.setAppBadge当初的navigator早已不是以前的navigator了，印象中的navigator通常用于获取设施的信息，浏览器倒退这么多年，当初navigator也赋予了很多原生底层的能力，比方明天要讲到的设置利用图标徽章的能力，navigator.setAppBadge。 语法很简略，如下 navigator.setAppBadge(?contents);这里的contents示意要设置的数字，不是必填的。 如果你轻易关上一个网页，而后在控制台执行 navigator.setAppBadge(33);然而并不会有什么变动 起因其实很简略，这时的 Chrome浏览器图标并不是该网站的利用图标，解决形式有两种 首先如果是一般的网站，比方方才的 MDN官网，须要将该网站创立快捷方式 这样，MDN 官网也有了本人的利用图标 当初从新在控制台执行以上代码 这样利用图标上就有数字提醒了，和一般的应用程序齐全一样 还有另外一种形式，当初有一些PWA利用，体验会更好，能够离线应用，比方vue3官网，右上角会提醒“装置利用” 装置后关上，而后在控制台执行以上代码 同样能够反对数字展现 二、不同参数的细节后面提到，参数不是必须的，比方不传参数 navigator.setAppBadge();此时示意数量是不确定的，在 Mac OS 下的体现是这样的，一个红色圆圈 在 windows 下，有磁贴和图标两种展示模式 参数反对的格局是BigUint64Array，简略来说就是非负整数 navigator.setAppBadge(3);实测小数、数字类型的字符串也是反对的 navigator.setAppBadge('3.5'); windows 零碎体现如下 如果为0，则会革除标识 navigator.setAppBadge(0);还有一个景象，如果超过 99，则展现为99+ navigator.setAppBadge(100); windows 零碎体现如下（磁贴竟然没有数字了） 三、electron 中的利用事实上，目前反对PWA的网站是少之又少，大多数人也没有将网站快捷方式另存的习惯，所以理论生产中简直没有setAppBadge的用武之地。 不过，如果你有开发electron的需要，无妨试一下这个办法，完满反对利用图标告诉提醒 相比electron原生的办法益处是，能够间接在渲染过程应用，无需通信 四、总结和阐明以上就是全部内容了，你学会了吗？上面总结一下要点 navigator 当初很弱小，反对了很多原生底层的性能navigator.setAppBadge 能够用来设置利用图标徽章，也就是右上角的红色数字角标浏览器图标并不是该网站的利用图标，须要将网站独自设置快捷方式navigator.setAppBadge 传入参数为空时，体现为一个圆圈，示意未知数字，参数为0时，会革除角标，参数大于99时，会展现为99+理论状况下简直很少应用，毕竟国内反对PWA网站不多在electron开发中也能够完满应用navigator上面还有很多办法，都是和原生底层相干的，比方对于剪贴板的（Navigator.clipboard），还有能够调用零碎原生分享的（Navigator.share）等等，这些 API会让 web 看起来更加原生，很多以前须要用到客户端sdk的能力也在缓缓反对，置信会越来越好的。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤ 欢送关注我的公众号：前端侦探

Fluid也是自己应用的主题，这是一款 Material Design 格调的 Hexo 主题，以简洁的设计帮忙你专一于写作。 该主题相较于其余主题的劣势： 设计遵循简洁至上，同时具备轻快的体验，和优雅的颜值；提供大量定制化配置项，使每个用户应用该主题都能具备独特的款式；响应式页面，适配手机、平板等设施。Github 地址：https://github.com/fluid-dev/hexo-theme-fluid在线演示：https://hexo.fluid-dev.com/装置教程：Hexo Fluid 用户手册 (fluid-dev.com) Butterfly一款很粗劣简略，但功能强大的主题。 次要有以下特点： Material Design 设计，简略丑陋，文章内容好看易读；响应式设计，博客在桌面端、平板、手机等设施上均能很好的展示；性能多，反对友链、评论模块、文章统计、音乐播放、视频播放等。Github 地址：https://github.com/jerryc127/hexo-theme-butterfly在线演示：https://butterfly.js.org/装置教程：https://butterfly.js.org/post... Diaspora一款基於hexo-theme-melody批改的主題。 Github 地址：https://github.com/jerryc127/hexo-theme-butterfly在线演示：https://butterfly.js.org/装置教程：https://github.com/Fechin/hex... ICARUS一款简略，粗劣和古代的主题。 Github 地址：https://github.com/ppoffice/hexo-theme-icarus在线演示：https://blog.zhangruipeng.me/hexo-theme-icarus/装置教程：ppoffice/hexo-theme-icarus：动态站点生成器Hexo的简略，粗劣和古代的主题。 (github.com) SnippetSnippet 简洁而不简略，兴许是一款你寻找已久 hexo 主题。 Github 地址：https://github.com/shenliyang/hexo-theme-snippet在线演示：https://www.91h5.cc/装置教程：https://github.com/shenliyang... HackerHacker 是一款专一于写作的简洁博客主题。在如此考究简单排版的趋势下，抉择回归根源，专一于写作这件事。 Github 地址：https://github.com/CodeDaraW/Hacker在线演示：https://blog.daraw.cn/装置教程：https://github.com/CodeDaraW/Hacker black-blueHexo的黑蓝主题款。 Github 地址：https://github.com/maochunguang/black-blue在线演示：https://geeksblog.cc/装置教程：https://github.com/maochungua...博主集体博客网站：奇想派 本文原创作者：奇想派、一名致力分享的程序员。 文章首发平台：微信公众号【编程达人】 原创不易！各位小伙伴感觉文章不错的话，无妨关注公众号，进行点赞（在看）、转发三连走起！谢谢大家！

HTML简介网页网页网站：利用前端技术制作的网页汇合。 网页：形成网站的根本元素，通常是 HTML 格局的文件（.htm 或 .html），必须通过浏览器来浏览。 HTML超文本：由图片、声音、动画、视频等形成且能够互相链接的文本。 HTML：超文本标记语言（HTML 不是编程语言，而是由一套标记标签形成的标记语言）。 网页的造成前端代码开发浏览器解析、渲染代码出现 Web 页面浏览器五大罕用浏览器Chrome、Firefox、Safari、Opera、 Edge 四大浏览器内核IE（Trident）Firefox（Gecko）Safari（Webkit）Chrome / Opera / Edge（Blink 属于 Webkit 的分支，Blink 兼容 Webkit）注：目前国内浏览器个别都采纳 Webkit / Blink 内核。 Web规范W3C： 万维网联盟，国内最驰名的标准化组织之一。 Web规范：W3C 组织和其余标准化组织为 Web 开发制订的一系列规范的汇合。 Web规范形成构造：用于对网页元素进行整顿和分类，现阶段次要指的是 HTML体现：用于设置网页元素的版式、大小、色彩等外观款式，次要指 CSS行为：网页模型的定义及交互方式的编写，现阶段次要指的是 JavaScriptHTML标签语法标准标签HTML 标签是由尖括号突围的关键字词，例如：<html>。 双标签HTML 标签通常是成对呈现的，例如：<html> 和 </html>，咱们称为双标签。标签对中的第一个标签是开始标签，第二个标签是完结标签。 单标签有些非凡的标签必须是单个标签，例如：<br />，咱们称为单标签。 留神：/ 之前有一个空格（Coding Style 编码格调）。每个标签原则上都应该有结束符，即： /。所以单标签的最初要加 / 以示意完结，当然不加也是能够被浏览器失常解析的。 备注： HTML5 标准中明确阐明单标签 / 是能够疏忽的，理论开发中倡议不要给单标签增加斜线。任何标签都倡议不要大写，即使是 <!doctype html> 标签。标签关系蕴含关系 <head> <title></title></head>并列关系 <head></head><body></body>根底构造标签每个网页都会有一个根底的构造标签（骨架标签：4组），页面内容也是在这些根底标签上书写的。 HTML 页面也称为 HTML 文档。 <html> <head> <title></title> </head> <body> </body></html>标签名定义阐明<html> </html>根标签页面中最大的标签（最根底的标签）<head> </head>头部标签在 head 标签中咱们必须要设置 title 标签<title> </title>题目标签页面本人的网页题目<body> </body>主体标签蕴含文档的所有内容文档类型申明标签 doctype<!doctype> 文档类型申明，作用是通知浏览器应该应用哪种 HTML 版本来解析渲染网页。 ...

只能输出整数：<input type="text" name="text" onkeyup="this.value=this.value.replace(/\D/g,'')" onpaste="this.value=this.value.replace(/\D/g,'')" />只能输出数字，包含小数点：<input type="text" name="text" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')" />注解：这里的正则用途是输出的值不是数字就替换为空。援用onkeyup 事件会在键盘按键被松开时产生，onpaste 是粘贴触发援用replace() 办法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串援用\D:相似[ ^0-9 ] 非数字 g :全局匹配管制input只能输出数字和两位小数<input type="text" name="je" onkeyup="clearNum(this)" />function clearNum(obj){ obj.value = obj.value.replace(/[^\d.]/g,""); //革除"数字"和"."以外的字符 obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字 obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个, 革除多余的 obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输出两个小数 if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上曾经过滤，此处管制的是如果没有小数点，首位不能为相似于 01、02的金额 if(obj.value.substr(0,1) == '0' && obj.value.length == 2){ obj.value= parseFloat(obj.value); } }}

写在开篇什么是表单呢？以后端想要提交数据给后端，怎么搞？那么在前端开发中，表单是罕用的伎俩，比方常见的场景有：登录框、账号注册页、主机信息录入CMDB等等场景都是须要表单。那么在本篇中，笔者除了讲一些根本的知识点，还会再联合后端的形式来演示如何接管表单提交的数据。心愿这些小小的演示能够起到抛砖引玉的成果。盘点HTML表单根底1. from元素构建表单，次要是通过from元素，咱们先来一个最简略的小栗子，看上面代码：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>彩虹运维技术栈社区主页</title> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <h3>主机信息录入CMDB</h3> <form> <label for="hostname">主机名：</label><br> <input type="text" id="hostname" name="hostname"><br> <label for="ipaddr">IP地址：</label><br> <input type="text" id="ipaddr" name="ipaddr"><br> <input type="submit" value="提交"> </form> </body></html>成果如下图： 通下面的小栗子能够晓得，form表单的次要天堑是用于收集用户的输出。在from表单外面，还蕴含着各种不同类型的input元素，比方咱们下面小栗子中用到的文本（text）、提交按钮（submit）。input元素是表单里最重要的元素，它有很多type属性，上面咱们来总结下： 类型形容text文本输出radio单选按钮checkbox提交按钮submit提交按钮button可单击按钮在下面小栗子中，除了input元素之外，不晓得大家留神label元素没有。label元素的主要用途是为input元素定义标签，且用for属性和input元素的id属性进行绑定呢。2. 单选按钮什么是单选按钮？就是在多个选项中，你只能选其中1个，不能多选。上面咱们看个小栗子，看上面代码：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>彩虹运维技术栈社区主页</title> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <h3>问答题1（单选）：某站长，工作经验不足1年，仅从互联网收集学习材料制订学习路线售卖盈利，从道德层面角度剖析是否有问题？</h3> <form> <input type="radio" id="i1" name="problem" value="yes"> <label for="i1">有</label> <input type="radio" id="i2" name="problem" value="no"> <label for="i2">没有</label> <input type="radio" id="i3" name="problem" value="not_clear"> <label for="i3">不分明</label> </form> <h3>问答题2（单选）：理论工作经验不足1年的人员折腾的学习材料您感觉是否对你有帮忙？</h3> <form> <input type="radio" id="w1" name="problem" value="yes"> <label for="w1">有</label> <input type="radio" id="w2" name="problem" value="no"> <label for="w2">没有</label> <input type="radio" id="w3" name="problem" value="not_clear"> <label for="w3">不分明</label> </form> </body></html>成果如下图： 下面的小栗子中，出了两道问答题，均为单选题。那么，相似的需要都是能够应用输出类型为radio来实现须要应用单选按钮的场景。3. 复选框什么是复选框？复选框就是能够抉择多个选项，当须要多选的时候，应用复选框输出类型就对了。看上面代码：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>彩虹运维技术栈社区主页</title> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <h3>问答题1（单选）：某站长，工作经验不足1年，仅从互联网收集学习材料制订学习路线售卖盈利，从道德层面角度剖析是否有问题？</h3> <form> <input type="checkbox" id="i1" name="problem" value="yes"> <label for="i1">有</label> <input type="checkbox" id="i2" name="problem" value="no"> <label for="i2">没有</label> <input type="checkbox" id="i3" name="problem" value="not_clear"> <label for="i3">不分明</label><br> <input type="submit" value="提交"> </form> <h3>问答题2（单选）：理论工作经验不足1年的人员折腾的学习材料您感觉是否对你有帮忙？</h3> <form> <input type="checkbox" id="w1" name="problem" value="yes"> <label for="w1">有</label> <input type="checkbox" id="w2" name="problem" value="no"> <label for="w2">没有</label> <input type="checkbox" id="w3" name="problem" value="not_clear"> <label for="w3">不分明</label><br> <input type="submit" value="提交"> </form> </body></html>成果如下图： ...

欢送关注微信公众号前端侦探舒适提醒：在浏览本文之前，能够先回顾这篇文章：Web 中的“选区”和“光标”，有很多你可能不太晓得的原生 API，以下内容是对该内容的实际使用在写作编辑中，有很多须要成对呈现的标点符号，比方引号、括号、书名号等，如下所示： 为了不便输出，某些输入法自带了标点主动配对性能。什么意思呢？比方输出一个前括号，主动补全后括号，而后光标位于两头。上面是小米手机自带输入法的演示： 不仅仅是输入法，大部分编辑器也实现了相似的性能，比方 vscode 那么，这么好用的个性，如何让 web 中的输入框也能反对呢？ 一、实现原理原理其实非常简单，能够分为以下几个步骤 检测输出的内容，如果是以上标点符号就下一步依据输出的标点，主动补全与之对应的后半局部将光标移到两个标点之间是不是十分好了解呢？然而，外面的细节远不止这些，波及到十分多的比拟生僻的原生办法，一起看看如何实现的吧 二、检测输出的内容这里检测的是在键盘按下的时候，须要晓得以后按下的是什么字符，所以一开始我想到了用keydown办法 editor.addEventListener("keydown", (ev) => { console.log(ev.key, ev.code)})在keydown办法中，与键值相干的属性有ev.key和ev.code，如下 看似如同没啥问题，能够通过ev.key辨别具体输出的是什么字符。其实还有很多问题，比方无奈辨别中英文标点输出。 举个例子：在中英文下别离输出方括号 能够看到，两者的ev.key和ev.code是齐全一样的！ 还有更离谱的，在中文输入法下，某些标点是顺次呈现的，比方中文的单双引号，按一次是上引号“，再按一次是下引号”，还有半括号，按一次是「，再按一次是『等等，像这类输出就更加没法判断了 为啥会这样呢？因为这些标点都在一个按键上，keydown事件反馈的是和键盘相干的属性，如下 一个按键上稀稀拉拉的塞下了4个标点符号 所以，咱们须要用别的形式来检测输出的内容。 在这里，能够用input事件来监听，ev.data示意以后输出的字符。 editor.addEventListener("input", (ev) => { console.log(ev.data)})留神，这里是字符，也就是真正输出到页面的文字，如下 须要留神的是，在windows中文输入法下，input 会触发两次，如下 这是因为在 windows 中文输入法下，标点输出也和一般拼音输入一样，有候选词的过程，就像这样 所以解决这个问题也很简略，用compositionend事件就能够了，示意候选完结之后 editor.addEventListener("compositionend", (ev) => { console.log(ev.data)}) 因而，兼容 windows 和 Mac OS的残缺写法应该是这样 const input = function(ev){ if (ev.inputType === "insertText" || ev.type === 'compositionend') { console.log(ev) }}editor.addEventListener('compositionend', input)editor.addEventListener('input', input)因为咱们只检测标点符号，所以也无需放心反复触发的问题。 ...

写在开篇假如有一个需要，想要在网页内显示其它网页，怎么搞？很简略，能够用iframe来解决，那啥是iframe？本篇的主题就是它，接下来咱们一一解剖它的用法。嵌入第三方url页面咱们先来两个测试场景，比照一下，啥场景呢？就是可被嵌入的页面和不可被嵌入的页面。上面这2个页面是不可被嵌入的 嵌入python的官网主页 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>彩虹运维技术栈社区主页</title> </head> <body> <iframe src="https://www.python.org/"></iframe> </body></html>成果如下图： 嵌入百度主页 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>彩虹运维技术栈社区主页</title> </head> <body> <iframe src="https://www.baidu.com/"></iframe> </body></html>成果如下： 上面这2个https的页面是可被嵌入的 嵌入zabbix官网的主页 <!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>彩虹运维技术栈社区主页</title></head><body> <iframe src="https://www.zabbix.com/cn/"></iframe></body></html>成果如下图： 嵌入prometheus官网主页<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>彩虹运维技术栈社区主页</title> </head> <body> <iframe src="https://prometheus.io/"></iframe> </body></html>成果如下图： 好了，测试完下面的两个场景，当初就产生一个疑难了。为什么有的页面能够被嵌入？而有的页面不能被嵌入呢？答案就是：同源策略的限度所致，第三方的web服务器端并没有容许iframe的拜访，这就是外围问题之所在。 对于同源策略、以及什么是跨域拜访、cookie重写等等这些知识点，当前笔者都会抽时间缓缓给大家逐个分析哈！咱们目前阶段的主题是放在html中，后续就是css、js，而后就是前端框架vue.js，甚至中途还会讲讲Go、Python方面的常识，Web框架等等。 嵌入本地的页面小栗子，咱们在home.html页面中嵌入本地test.html页面home.html <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>彩虹运维技术栈社区主页</title> </head> <body> <iframe src="./test.html" style="height:200px;width:700px;" title="TtrOpsStack" ></iframe> </body></html>test.html <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>运维开发工程师，攻破前端技能。</title> </head> <body> <h1 id="WeChatPublicID">点击查看彩虹运维技术栈社区的微信公众号</h1> <button onclick="dis_wechat_public_id()">速度点击查看</button> <script> function dis_wechat_public_id() { document.getElementById("WeChatPublicID").innerHTML = "微信公众号ID：TtrOpsStack" } </script> </body></html>成果如下图： ...

写在开篇哈喽！我又来写”水文“了，回顾上篇讲到的class属性，那么class属性和本篇要讲的id属性有什么不一样呢？追随笔者步调，一一解剖。HTML中的id属性间接先上个例子，看看成果，而后咱们逐个分析一下。看上面代码：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> <style> #id1 { background-color: lightblue; color: black; padding: 40px; text-align: center; } #id2 { background-color: lightcoral; color: white; padding: 30px; text-align: center; } </style> </head> <body> <h2 id="id1">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <p id="id2">咱们会继续分享运维和运维开发畛域相干的技术文章</p> </body></html> 在下面的例子中，h2元素和p元素都通过id属性来作为HTML元素的惟一ID，援用元素ID属性的语法是在后面减少#号，留神到style标签了嘛？通过#id1和#id2来为h2和p元素设置了CSS属性呢。须要留神，id属性的值在，在HTML文档中必须是惟一的，并且它是对大小写敏感的，这个要留神哦！Class属性和ID属性的区别在上次的分享中，咱们讲到了class属性，那么它跟id属性有啥区别呢？简而言之就是class是可共享的，id是惟一的。怎么说呢？也就是说同一个类名能够由多个HTML元素应用，而一个id名称只能由页面中的一个HTML元素应用。上面咱们来看小栗子，将id的名称设置为一样，看看会有啥奇怪的景象。代码如下： <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> <style> #id1 { background-color: lightblue; color: black; padding: 40px; text-align: center; } #id1 { background-color: lightcoral; color: white; padding: 30px; text-align: center; } </style> </head> <body> <h2 id="id1">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <p id="id1">咱们会继续分享运维和运维开发畛域相干的技术文章</p> </body></html>效果图如下： ...

导读本文次要针对罕用跨端技术Flutter、ReactNative、Weex、H5，从技术特点、根本架构、编译原理、根本渲染流程等进行梳理剖析；以及一些常见性能问题如何优化解决，而后如何进行技术选型或在进行业务开发时抉择不同技术栈的逻辑是什么。 01背景在往年的麻利团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？由此我的Runner探索之旅开始了！ 随着技术的倒退，产生了越来越多的端，如Android、iOS、Mac、Windows、Web、Fuchsia OS、鸿蒙等，而随着公司业务的倒退，呈现了越来越多的业务场景；作为APP开发人员，在日常工作中难免会碰到以下问题，如：1、UI设计师在进行UI审查时、测试同学在回归测试过程中、业务方在应用过程中，多少会发现端与端存在着差别，影响用户体验；2、同样的业务、同样的性能在不同的端上，须要每端投入资源去开发实现。而挪动互联网的倒退曾经处于早期，领导们越来越关怀投入产出。 与此同时，呈现了一些跨端的技术解决方案，能够实现一套代码在多端运行，解决业务倒退上的痛点，如Flutter、ReactNative、Weex、H5（注：小程序和其它基于DSL的计划暂不在本文探讨范畴）。而后对一些罕用APP进行了比照剖析，论断和预期统一，大部分都在应用跨端技术；Flutter和ReactNative使用率较高，Weex使用率绝对低一些，H5根本都在应用，应用多种跨端技术框架是一种常态。那么，它们都有哪些特点呢? 02 四种技术栈特点介绍 了解，首先 MCube 会根据模板缓存状态判断是否须要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的构造，转换实现后将通过表达式引擎解析表达式并获得正确的值，通过事件解析引擎解析用户自定义事件并实现事件的绑定，实现解析赋值以及事件绑定后进行视图的渲染，最终将指标页面展现到屏幕。 图1-技术栈特点 通过图1，从性能、开发语言、渲染、包大小、社区、反对平台等方面梳理了它们的次要特点；不禁产生几个问题：为什么原生和Flutter性能更好？为什么ReactNative和Weex性能绝对较差？为什么H5页加载慢？这些性能问题该如何去优化，这是须要深刻理解的问题，上面将从根本的架构、渲染流程、编译运行原理等一起剖析。 03基础架构介绍 3.1 Flutter基础架构介绍 ABM是Apple公司提供的iOS利用的散发渠道之一，与App Store平台不同，ABM是2019年10月才开始在中国区启动的一套全新的利用散发零碎，局部性能和企业账号相似，旨在为企业提供疾速、高效的形式来部署利用到企业领有的苹果设施。ABM与App Store两个平台的要害区别如下： 图2-Flutter基础架构 Google在2018年公布了Flutter 1.0，如图2所示，次要分为Framework层和Engine层； Framework层：基于Dart实现，次要包含Text、Image、Button、动画、手势等各种Widgets，外围根底类库io、async、ui等package；基于Framework开发App，其运行在Engine层上，Framework和逻辑层都在基于Dart语言开发，对于开发而言，一切都是Widget，Widget是UI实现的根底；Engine层：基于C++、C实现；次要包含Skia渲染引擎库、Dart Runtime、Text文本渲染库等，而Engine层自带Skia渲染引擎，以此实现所有端的渲染展现对立，在Engine层适配平台差别和跨平台反对，实现更完满的跨端成果；Dart代码通过AOT编译为运行平台的二进制代码。也就是说Flutter不须要桥接，本人实现从逻辑侧和渲染侧的所有能力，和原生相似。这也是它性能突出的关键所在。另外Android自带Skia引擎，所以也使得在Android的的编译产物比iOS更小。除了反对挪动端外，还反对Mac OS、Windows等PC端和Web端，在新的Funchsia OS也反对Dart，应用Flutter作为UI框架。 对于Flutter Web，Framework层是专用的，意味着业务层能够应用此层的widgets实现逻辑跨端；但Engine层则不同，须要通过Canvas Render或者 HTML Render对齐Engine的能力。2022年5月Google IO大会公布Flutter 3.0，除了挪动端，更好的反对了Mac OS、Linux平台，也包含其它一系列优化和反对，大家能够多关注。 3.2 ReactNative基础架构介绍 ABM是Apple公司提供的iOS利用的散发渠道之一，与App Store平台不同，ABM是2019年10月才开始在中国区启动的一套全新的利用散发零碎，局部性能和企业账号相似，旨在为企业提供疾速、高效的形式来部署利用到企业领有的苹果设施。ABM与App Store两个平台的要害区别如下： 图3-ReactNative基础架构 ReactNative是Facebook于2015年开源，如图3所示，次要服务于Android和iOS两端，采纳React开发实现逻辑侧代码（也可利用于前端），采纳Redux实现状态治理，在APP中UI渲染、网络申请、动画等均由原生侧桥接实现；在这里理论运行过程中，js侧的dom会造成一个virtual dom，并通过bridge桥接将此dom构造传输到原生侧，原生侧会解析并映射到原生控件，造成原生的dom构造后，再调用原生能力进行渲染展现。 2021年ReactNative新版本对底层进行了重构，能够关注一下，如扭转线程模型，引入异步渲染能力，容许多个渲染并简化异步数据处理，简化 JSBridge等。 3.3 Weex基础架构介绍 图4-Weex基础架构 Weex是阿里2016年公布的跨端框架，如图4所示，Weex编译产物js bundle能够部署在服务端，APP加载完即可运行，也能够看出具备动静公布的能力；和ReactNative相似，Weex在理论运行过程中，js侧会造成一个dom，并通过Bridge交由原生侧解析，映射到原生控件再由原生能力进行渲染；Weex基于JS V8引擎，基于Vue设计，反对Android、iOS、Web三端。3.4 WebView基础架构介绍 图5-WebView内核基础架构WebView内核模块较简单，如图5所示，这里次要介绍WebView架构次要的几个局部：桥接协定是下层逻辑测与WebView的通信层，是JS和Native相互通信的能力层； WebCore是浏览器加载和排版渲染页面的根底，次要包含资源加载、HTML解析、CSS解析、DOM解析、排版渲染等，JavaScript引擎是JavaScript解析器，JavaScriptCore是Webkit的JavaScript引擎，V8是Google的Blink的默认引擎；WebKit Ports是WebKit中移植局部，包含网络、字体、图片解码、音视频解码、硬件加速等模块；而后再往下也应用了很多第三方库，包含2D图形库、3D图形库、网络库、存储库、音视频库等；最底层是操作系统，反对Android、iOS、Windows等零碎。 3.5 编译原理剖析 Flutter反对Release、Profile、Debug编译模式。 Release模式即应用AOT预编译模式，预编译为机器码，通过编译生成对应架构的代码，在用户设施上间接运行对应的机器码，运行速度快，执行性能好；此模式敞开了所有调试工具，只反对真机。对于编译产物，iOS侧次要生成App.framework和Flutter.framework；App.framework为dart代码编译产物，Flutter.framework为引擎编译产物；Android侧次要在lib下减少了libapp.so和libflutter.so，libapp.so为dart代码编译产物，libflutter.so为引擎编译产物，不同的是在assets下减少了flutter_assets寄存援用资源文件。 Profile模式和Release模式相似，此模式最重要的作用是能够用DevTools来检测利用的性能，做性能调试剖析。 Debug模式应用JIT即时编译技术，反对罕用的开发调试性能hot reload，在开发调试时应用，包含反对的调试信息、服务扩大、Observatory、DevTools等调试工具，反对模拟器和真机。iOS侧次要生成App.framework和Flutter.framework，在App.framework文件夹里多了isolate_snapshot_data，kernel_blob.bin，vm_snapshot_data；Android侧也同样多了多了以上文件，但lib下少了libapp.so文件。 ReactNative整体分为逻辑侧和渲染侧，逻辑侧基于js引擎，会将基于React写的代码编译为JavaScript原生代码，再编译生成jsbundle文件，内置或下发到APP端运行；而渲染侧依赖于Android或iOS原生渲染，须要分平台编译对应的编译产物，而后公布到服务端或内置到APP。 Weex和ReactNative相似，weex会将源码编译为js bundle，这些js bundle能够部署在服务端，APP下载完js bundle后，通过js引擎构建虚构dom并通过桥接映射到原生dom，由原生渲染引擎进行渲染。 H5：以React和Vue为例，会将以框架开发的代码编译为JavaScript原生代码，即而后在浏览器或者WebView中执行；内核会先建设连贯、加载资源，而后解析、排版布局、绘制渲染出现给用户。3.6 根本渲染流程比照 图6-根本渲染流程比照 简略剖析渲染流程，基于Android和iOS原生开发APP，调用Framework框架层实现下层逻辑，通过布局绘制后间接调用零碎渲染引擎进行渲染展现；基于Flutter开发APP，会间接调用Skia渲染引擎进行渲染展现；不依赖于原生渲染。 ...

download：2022降级！《慕慕到家》家政小程序组件化进阶实战线段树（动静开点）的两种形式题目描述Tag : 「线段树（动静开点）」、「线段树」实现一个 MyCalendar 类来存放你的日程安排。如果要增加的工夫内不会导致三重预订时，则可能存储这个新的日程安排。MyCalendar 有一个 book(int start, int end) 方法。它意味着在 start 到 end 工夫内减少一个日程安排，注意，这里的工夫是半开区间，即 [start,end)[start, end)[start,end), 实数 xxx 的范畴为， start<=x<end start <= x < end start<=x<end。当三个日程安排有一些工夫上的交叉时（例如三个日程安排都在同一时间内），就会产生三重预订。每次调用 MyCalendar.book 方法时，如果可能将日程安排胜利增加到日历中而不会导致三重预订，返回 true。否则，返回 false 并且不要将该日程安排增加到日历中。请按照以下步骤调用 MyCalendar 类: MyCalendar cal = new MyCalendar(); MyCalendar.book(start, end)示例：MyCalendar();MyCalendar.book(10, 20); // returns trueMyCalendar.book(50, 60); // returns trueMyCalendar.book(10, 40); // returns trueMyCalendar.book(5, 15); // returns falseMyCalendar.book(5, 10); // returns trueMyCalendar.book(25, 55); // returns true 解释： 前两个日程安排可能增加至日历中。 第三个日程安排会导致双重预订，但可能增加至日历中。第四个日程安排流动（5,15）不能增加至日历中，因为它会导致三重预订。第五个日程安排（5,10）可能增加至日历中，因为它未使用已经双重预订的工夫10。第六个日程安排（25,55）可能增加至日历中，因为工夫 [25,40] 将和第三个日程安排双重预订；工夫 [40,50] 将独自预订，工夫 [50,55）将和第二个日程安排双重预订。复制代码提醒： ...

写在开篇开篇之前，先提个问题，什么是类？分类吗？能够这么说吧！咱们能够给物体分类，也能够给人分类。正所谓，物以类聚，人以群分。难道咱们这里是给元素分类？用分类来了解是不精确的啦！从某些角度，也能够了解成分类，说白了也就是个标识而已。废话不说，咱们正式步入今晚的主题！HTML类html中的类是什么鬼？先上个例子，而后再分析它：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> <style> .c1 { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body> <div class="c1"> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> </div> <div class="c1"> <p>笔者亲自设计的，一个入侵性极低的Oracle监控计划</p> <a href="https://mp.weixin.qq.com/s/PDm2bK7IMFOwjNHFOblgXg" target="_blank">oracledb_exporter监控Oracle，一个入侵性极低的监控计划。</a> </div> <div class="c1"> <p>意犹未尽的第2篇再次推出，一个入侵性极低的Oracle监控计划</p> <a href="https://mp.weixin.qq.com/s/gFeWlZRGkIMAOCNFpKm8-Q" target="_blank">意犹未尽的第2篇再次推出，持续解说oracledb_exporter监控Oracle，一个入侵性极低的监控计划。</a> <div> </body></html>成果如下图： 好了，咱们正式开始对它进行分析，搞清楚到底啥是类，下面的小栗子中，定义了3个div元素，它们的class属性值均为 "c1"。而后留神到没有？在head中的style标签里，通过 ”.c1“ 的形式同时对3个div进行了css款式的设置。所以也由此引出了它的一个特点，那就是多个HTML元素能够共享同一个类，上述的例子中3个div（元素）的类（class）名都定义了为“c1”，且同时对3个div进行了css款式的设置，这就是它的共享性。不晓得笔者说明确了没有，好难堪。那接下来，咱们再来个小栗子： <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> <style> .c2 { font-size: 120%; color: crimson; } </style> </head> <body> <h1>彩虹<span class="c2">运维</span>技术栈社区</h1> <p>咱们会<span class="c2">继续分享</span>运维和运维开发畛域相干的技术文章</p> </body></html>成果如下图： 下面的例子中，“运维”和“继续分享”这两个字都在span标签里，且这两个span标签都定义了class属性，class=“c2”，同时通过“.c2”的形式设置了CSS属性。下面的例子中，就是通过这样的方法实现了对某局部的文字进行款式的设置。截止目前，咱们通过两个小栗子，间接解剖了什么是类，那么咱们再做个小总结： class属性能够用于任何HTML元素类名辨别大小写CLASS的语法其实在后面的小栗子中，曾经解说过class的语法了，不晓得宽广盆友们留神到了没有。如果没有留神到，咱们再这个章节从新温习一下。看上面代码： <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> <style> .cc3 { background-color: blue; color: white; padding: 8px; } </style> </head> <body> <h2 class="cc3">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <p class="cc3">咱们会继续分享运维和运维开发畛域相干的技术文章</p> </body></html>成果如下图： ...

本文次要是建设网站博客，以疾速建站，讲求效率为主。给最须要CSS样式表丑化为亮点的你。搭建分为两个局部。其一是抉择服务器，其二是注册域名。而后是域名绑定服务器就能够实现制作。 装置TomcatTomcat是罕用的JSP服务器。它是Apache-Jakarta我的项目的一个子项目，也是官网举荐的Servlet和JSP容器。http://archive.apache.org/dis...Tomcat的装置很简略，如果下载的是压缩包文件，只须要解压至硬盘某目录中（目录中不要蕴含中文和空格字符），即可实现装置，如果下载的是可执行文件，双击实现装置。1）启动Tomcat服务找到bin目录中的startup.bat启动Tomcat。呈现启动终端界面。2）拜访TomcatTomcat启动后，能够在浏览器中通过地址"http://localhost:8080"拜访Tomcat主页。3）进行Tomcat服务找到bin目录下的shutdown.bat，可进行Tomcat服务。 注册域名在这里选用腾讯云注册域名，个别实名认证后就能够购买相应域名。这里咱们抉择新顶级域名.top，购买即可得9元/年的域名资格。接下来关上域名解析界面，这里有很多备选参数。咱们点击新建解析，将主机IP地址复制到对应IP地址处：关上终端输出ipconfig显示主机IPv4,间接填入地址栏即可。关上Tomcat 目录下的conf，找到server.xml文件关上编辑。将用户主机号改成对应域名。端口号改成80。准备端口改成443。<Connector port="80" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="443" />改成新的host名。 <Engine name="Catalina" defaultHost="www.qtzzpxq.top"> <Host name="www.qtzzpxq.top" appBase="webapps" unpackWARs="true" autoDeploy="true">至此，整道工序就实现啦。间接在webapp文件下替换本人的web我的项目即可。=.=.谢谢观看。

写在开篇运维开发必备前端技能！尽管很干燥，知识点很多，但要保持住哦！笔者和大家一起保持。本篇和大家一起坚固html中的块元素和内联元素以及DIV容器。块元素块元素的特点是啥？块级元素在浏览器显示时，通常会以新行来开始（和完结），块级元素只能呈现在body元素内。html中的div元素就是块元素，咱们看看上面的例子： <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> </head> <body> <div style="border: 1px solid black">彩虹运维技术栈社区，公众号ID：TtrOpsStack</div> <p>欢送广发盆友来稿，知识点不限！以下语言知识点可来稿：</p> </body></html>成果如下图： 在html中，都有哪些块级元素呢？笔者来给大家汇总一下，以下是HTML中所有的块级元素： <address> 联系方式信息<article> 文章内容<aside> 随同内容<blockquote> 块援用<canvas> <dd> 定义列表中定义条目形容<div> 文档分区<dl> 定义列表<dt> 用于生成定义列表中各列表项的题目，重复使用能够定义多个列表项的题目<fieldset> 可将表单内的相干元素分组<figcaption> 定义figure元素的题目（caption）<figure> 规定独立的流内容（图像、图表、照片、代码等等）<footer> 定义文档或节的页脚<form> 标签用于为用户输出创立 HTML 表单<h1>-<h6> 题目级别 1-6<header> 定义文档的页眉（介绍信息）<hr> 程度分割线<li> 定义列表我的项目，<li>标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中<main> 标签规定文档的次要内容<nav> 定义导航链接的局部<noscript> 用来定义在脚本未被执行时的代替内容（文本）<ol> 有序列表<p> 行<pre> 预格式化文本<section> 一个页面区段<table> 表格<tfoot> 定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容<ul> 无序列表<video> 定义视频，比方电影片段或其余视频流内联元素那内联元素有啥特点呢？内联元素在显示时通常不会以新行开始。举个小栗子，比方span元素就是内联元素，咱们看看上面的例子： <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> </head> <body> <p>彩虹运维技术栈社区<span style="border: 1px solid black">公众号：TtrOpsStack</span> 敬请大家的关注！</p> <p>咱们会继续分享原创运维畛域技术文章</p> </body></html>成果如下图： ...

写在开篇html列表热身HTML反对有序、无序和定义列表，本篇笔者对每个知识点进行分析，跟紧步调，咱们一起登程吧！无序列表无序列表以ul标签开始，每个列表项都以li标签开始，无序列表是一个我的项目的列表，默认状况下，此列我的项目应用粗体圆点（典型的小黑圆圈）进行标记废话不说，间接看上面小栗子，代码如下： <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <p>咱们目前在做：</p> <ul> <li>分享数据库方面技术文章</li> <li>分享监控方面技术文章</li> <li>分享Linux方面技术文章</li> </ul> </body></html>成果如下图： 有序列表有序列表以ol标签开始，每个列表项以li标签开始，列表我的项目应用数字进行标记废话不说，间接看上面小栗子，代码如下： <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <p>咱们目前在做：</p> <ol> <li>分享数据库方面技术文章</li> <li>分享监控方面技术文章</li> <li>分享Linux方面技术文章</li> </ol> </body></html>留神到了吗？只是将ul变成了ol，就是辣么简略。效果图下图： 自定义列表自定义列表以dl标签开始，每个自定义列表项以dt开始，每个自定义列表项的定义以dd开始。废话不说，间接看上面小栗子，代码如下： <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <p>欢送广发盆友来稿，知识点不限！</p> <dl> <dt>Linux知识点：</dt> <dd>route</dd> <dd>iptable</dd> <dd>LVM</dd> <dd>等等</dd> <dt>编程语言：</dt> <dd>Go</dd> <dd>Python</dd> <dd>Shell</dd> <dt>云原生：</dt> <dd>Docker</dd> <dd>K8S</dd> <dt>监控：</dt> <dd>Prometheus</dd> <dd>Zabbix</dd> <dt>数据库：</dt> <dd>Oracle</dd> <dd>MySql</dd> </dl> </body></html>成果如下图： 对于列表标签的知识点做个小总结<ul>是定义无序列表<ol>是定义有序列表<li>是定义列表项<dl>是定义定义列表<dt>是定义定义我的项目<dd>是定义定义的形容接下来咱们持续进阶，深刻分析和实战HTML无序列表解剖通过css来管制无序列表的款式先看小栗子，通过css的list-style-type:disc;属性来管制了款式，不过这个是默认的款式，哪怕不指定，也是这样的成果。 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <p>运维开发工程师必须把握的语言</p> <ul style="list-style-type:disc;"> <li>Go</li> <li>Python</li> <li>Shell</li> </ul> </body></html>成果如下图： ...

子操作符: >ul>li <ul> <li></li></ul>援用并列操作符: +div+span <div></div><span></span>下级操作符: ^div>h1^span > <div>> <h1></h1>> </div>> <span></span>div>ul>li>i^^span <div> <ul> <li><i></i></li> </ul> <span></span></div>反复操作符: *ul>li*3 <ul> <li></li> <li></li> <li></li></ul>分组操作符: ()div>(p>span)*2 <div> <p><span></span></p> <p><span></span></p></div>属性操作选择器: id 和 classdiv#header+div.main+div#footer <div id="header"></div><div class="main"></div><div id="footer"></div>属性值: [key=value]a[title=test target=_blank] <a href="" title="test" target="_blank"></a>数列值: $h$.title$*5 <h1 class="title1"></h1><h2 class="title2"></h2><h3 class="title3"></h3><h4 class="title4"></h4><h5 class="title5"></h5>h$.title$$*5 <h1 class="title01"></h1><h2 class="title02"></h2><h3 class="title03"></h3><h4 class="title04"></h4><h5 class="title05"></h5>数列操作符: @h$@-*3h$@-1*3 <h3></h3><h2></h2><h1></h1>h$@2*3 <h2></h2><h3></h3><h4></h4>h$@-2*3 <h4></h4><h3></h3><h2></h2>字符操作字符操作: {} `span{文本内容}<span>文本内容</span>`

写在开篇始终在想，在HTML中对图片的应用，这个简略到爆的知识点要不要独自拿一篇来讲。起初是不想独自拿一篇来讲的，起初发现，对于它的应用场景还挺多。有时候，越是简略的知识点，咱们越是要把握好。于是，有了本篇的输入，欢送宽广盆友批评指正。HTML图片上面咱们持续解说在html中如何嵌入图片，少来前戏，间接步入主题。看上面小栗子：指定了本地的图片，看上面代码 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> </head> <body> <h1>彩虹运维技术栈社区</h1> <img src="./img/logo-wechat-id.jpg" alt="运维技术栈社区图片缺失" width="500" height="333"> </body></html>成果如下图： 如果不能正确的找到图片，将会显示alt属性中的内容，成果如下图： 很显著了，想要应用图片，是用img标签实现，src属性是指定图片的地位（能够是本地、也能够是来自其余网站的图像链接）那么width和height属性，一眼就能够看出是管制宽度和高度。再看这个小栗子：从其余站点引入图片，看上面代码 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> </head> <body> <h1>彩虹运维技术栈社区，Hello World!</h1> <img src="https://img0.baidu.com/it/u=3277119817,840848377&fm=253&fmt=auto&app=138&f=JPG?w=500&h=265" alt="来自其余站点的图片缺失" width="500" height="350"> </body></html>成果如下图： 咱们持续，深刻分析一下图像的大小、宽度和高度这两个知识点，在下面的例子中，间接应用了width和height属性指定了宽度和高度。那么，其实还能够应用style属性指定图像的宽度和高度，上面咱们一起来看看小栗子： <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> </head> <body> <h1>彩虹运维技术栈社区，Hello World!</h1> <img src="./img/logo-wechat-id.jpg" alt="图片缺失" style="width:250px;height:250px;"> </body></html>成果如下： OK！十分完满，忽然发现一个问题，width,height和style属性在HTML中都无效，那到底应用哪个好？笔者倡议应用style属性，因为它能够避免样式表更改图像的大小，看上面的小栗子： <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> <style> img{ width:50%; } </style> </head> <body> <h1>彩虹运维技术栈社区，Hello World!</h1> <img src="./img/TtrOpsTackQRCode.jpg" alt="图片缺失" width="300px" height="300px"> <br> <img src="./img/logo-wechat-id.jpg" alt="图片缺失" style="width:300px;height:300px;"> </body></html>效果图如下： 留神到head中的style标签了嘛？它管制了img元素的width属性。那么，在body中img标签，应用了style属性来管制宽度和高度的图片没有受到影响，这就是其精髓之所在。持续下一个知识点，如果想将图片可作为链接，也就是点击图片可跳转到其余的站点，怎么做？看上面的小栗子： <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你温习坚固，攻破前端技能</title> </head> <body> <h1>彩虹运维技术栈社区</h1> <p>网友来稿：内网环境或网速差怎么破？一文带你搭建本地Yum源，点击上面图片进入公众号速看！</p> <a href="https://mp.weixin.qq.com/s/vgeZUqPunVUYRSC9NH1cuA" target="_blank"> <img src="./img/logo-wechat-id.jpg" alt="图片缺失" style="width:300px;height:300px;"> </a> </body></html>成果如下图： ...

HTML 元素HTML 文档由 HTML 元素定义。 HTML 元素开始标签 元素内容 完结标签 <p> 这是一个段落 </p> 这是一个链接Gb16978 换行 *开始标签常被称为起始标签（opening tag），完结标签常称为闭合标签（closing tag）。HTML 元素语法HTML 元素以开始标签起始HTML 元素以完结标签终止元素的内容是开始标签与完结标签之间的内容某些 HTML 元素具备空内容（empty content）空元素在开始标签中进行敞开（以开始标签的完结而完结）大多数 HTML 元素可领有属性正文: 您将在本教程的下一章中学习更多无关属性的内容。 嵌套的 HTML 元素大多数 HTML 元素能够嵌套（HTML 元素能够蕴含其余 HTML 元素）。 HTML 文档由互相嵌套的 HTML 元素形成。 HTML 文档实例<!DOCTYPE html><html> <body><p>这是第一个段落。</p></body> </html>以上实例蕴含了三个 HTML 元素。 HTML 实例解析<p> 元素: <p>这是第一个段落。</p>这个 <p> 元素定义了 HTML 文档中的一个段落。这个元素领有一个开始标签 <p> 以及一个完结标签 </p>.元素内容是: 这是第一个段落。 <body> 元素: <body><p>这是第一个段落。</p></body><body> 元素定义了 HTML 文档的主体。这个元素领有一个开始标签 <body> 以及一个完结标签 </body>。元素内容是另一个 HTML 元素（p 元素）。 ...

写在开篇如果您是一名运维开发工程师，将来想要打造B/S架构产品，那么前端必须得攻破，笔者会和你一起保持，请追随我的步调一起登程吧！ 本篇带你一起温习坚固HTML罕用的元素和HTML属性，记住，所有的HTML文档是由HTML元素定义的，且HTML属性是HTML元素提供的附加信息。 HTML元素有哪些？HTML 元素指的是从开始标签（start tag）到完结标签（end tag）的所有代码。代码如下: <!DOCTYPE html><html> <head > <title>彩虹运维技术栈社区，公众号ID：TtrOpsStack</title> <meta charset="utf-8" /> </head> <body> <h1>彩虹运维技术栈社区公众号ID：TtrOpsStack</h1> <br> <p>咱们会继续分享原创技术文章</p> </body></html>阐明： 如：开始标签是<h1>，两头是内容，完结标签是</h1>，特地阐明：某些HTML元素没有内容 (如 <br> )。这些元素称为空元素。空元素没有完结标记！成果如下: 嵌套的HTML元素阐明： 大多数 HTML 元素能够嵌套（能够蕴含其余 HTML 元素）。HTML 文档由嵌套的 HTML 元素形成。上面的示例蕴含四个HTML元素 (<html>, <body>, <h1> , <p>):小栗子 <!DOCTYPE html><html> <body> <h1>彩虹运维技术栈社区</h1> <p>公账号ID：TtrOpsStack</p> </body></html>小栗子解析 <html> 元素定义了整个 HTML 文档。它有一个开始标签 <html> ，以及一个完结标签 </html>。在 <html> 元素外部还有其余元素： <body>:代码如下: <!DOCTYPE html><html> <head> <title>彩虹运维技术栈社区</title> <meta charset="UTF-8" /> </head> <body> <h1>彩虹运维技术栈社区</h1> <p>公账号ID：TtrOpsStack</p> </body></html>阐明: <body> 元素定义了 HTML 文档的主体。它有一个开始标签 <body> ，以及一个完结标签 </body>。在 <body> 元素外部还有两个其余元素：<h1> 和 <p>:代码如下: ...

本篇文章次要来教大家实现一个美食我的项目的首页，文中附含局部性能实现的示例代码，有须要的敌人能够借鉴参考下，心愿可能有所帮忙 介绍：美食杰首页这个是轮播图成果：利用了element ui框架搭建的html、css款式，而后再通过vue指令和data存储数据和methods办法在操作data外面的数据来实现数据交互继而渲染到页面上就如下图。 这个是内容精选页成果：也是利用了element ui框架搭建的html、css款式 过程：援用了element ui框架搭建的轮播图框架，利用数据交互实现成果。 先装置element ui，再main.js外面引入element ui import elementUi from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(elementUi)这是html构造 这是css款式： 数据交互过程（要搭配写好的组件）： <script>import MenuCard from '@/components/menu-card.vue' //引入的组件1import Waterfall from '@/components/waterfall.vue'//引入的组件2import {getBanner,getMenus} from '@/service/api.js'//引入的封装好的api办法// 引入 注册 应用export default { name: 'home', components: { MenuCard: MenuCard, Waterfall }, data(){ return { banners:[], menuList:[], page:1, pages:5 } }, mounted(){ getBanner().then(({data})=>{ this.banners=data.list; // console.log(this.banners) }), // 1. getMenus({page:this.page}).then(({data})=>{ console.log(data) // this.menuList=data.list;当传了页码就不能这么赋值了 this.menuList=data.list;//存了第一页的数据 // this.pages=Math.ceil(data.total/data.page_size) }) }, methods:{ loadingMenuHanle(){ console.log('在内部监听的滚动') this.page++; // 2. if(this.page > this.pages){ this.$refs.waterfall.isloading=false; return; } this.$refs.waterfall.isloading=true; getMenus({page:this.page}).then(({data})=>{ this.menuList.push(...data.list);//在第一次数据加载实现后再持续增加(push)渲染五条数据 this.$refs.waterfall.isloading=false; }) } }}</script>注意事项：在引入是肯定要留神引入css的门路，就从element-ui开始找看看没一个嵌套关系的文件夹名是不是始终，另外在最新版本的element-ui中theme-default就应该被改为theme-chal，特地须要留神的是默认的轮播是垂直的，如果想改为程度，那么须要将direction: 'horizontal'。 ...

写在开篇先探讨一个问题：运维开发工程师是什么？所谓的运维、所谓的开发，到底怎么了解？到底是运维还是开发？笔者是不是能够这样去了解：只有开发跟运维畛域相干的脚本、工具、产品，那么也都能够说是运维开发？假如这个了解是成立的，那么运维开发工程师平时只写一些零零散散的脚本，那算得上是运维开发工程师不？笔者认为算不上，顶多就是运维工程师，运维工程师对脚本（python、shell）的开发能力是必备的。那么运维开发工程师所须要把握的技能要求是什么？笔者认为，应该具备打造运维工具、产品的能力，也就是全栈：运维技能+全栈开发技能=运维开发工程，而基本的指标是：研发运维畛域相干工具、产品。所以，把握的常识就须要更多，如：运维自身的技能、前端、后端、数据库、各种开发框架（web、分布式、事件驱动），尽管要学习的货色有很多，但只有坚持不懈、坚定不移、忍受得住寂寞，就必定能把握必备技能。不要忘了，万丈高楼平地起，根底不牢，地动山摇。前端的技能是笔者薄弱点，所以决定先从前端技能开始温习坚固（尽管以前学习过）。当然除了温习坚固根底的（HTML、CSS、JavaScript），笔者也还会继续分享Vue.JS的相干技能常识。总而言之就是先把前端的开发技能给打牢固了。且前端技能的温习坚固路线还须要分阶段，指标拆解。废话不说！进入主题：本篇先温习坚固（解说）最根底的HTML。html文档阐明： 所有 HTML 文档都必须以文档类型申明结尾: <!DOCTYPE html>。 HTML 文档以 <html> 开始，以 </html> 完结。 HTML 文档的可见局部位于 <body> 和 </body> 之间。案例： <!DOCTYPE html><html> <head > <title>彩虹运维技术栈社区</title> <meta charset="utf-8" /> </head> <body> <h1>彩虹运维技术栈社区</h1> <p>这是彩虹运维技术栈社区，公众号ID：TtrOpsStack</p> </body></html><!DOCTYPE> 申明阐明： <!DOCTYPE> 申明示意文档类型，并帮忙浏览器正确显示网页。它只呈现一次，在页面顶部（在任何HTML标记之前）。<!DOCTYPE> 申明不辨别大小写。<!DOCTYPE> 申明是 HTML5 网页:案例： <!DOCTYPE html>HTML 题目HTML 题目是要在网页上显示的题目或副标题。阐明： HTML 题目（Heading）是通过 <h1> 到 <h6> 等标签进行定义的。<h1> 定义最重要的题目。 <h6> 定义不重要的题目。倡议：应该将 <h1> 用作主题目（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。案例： <!DOCTYPE html><html> <head > <title>彩虹运维技术栈社区</title> <meta charset="utf-8" /> </head> <body> <h1>这是彩虹运维技术栈社区</h1> <h2>微信公众ID（WeChat public ID）：TtrOpsStack</h2> <h2>全称：Taste The Rainbow Operations Stack Community</h2> <h3>简称：TtrOps Stack Community</h3> <h4>意义：Taste The Rainbow Operations Stack Community （品尝彩虹运维技术栈社区）</h4> <h5>TTR（Taste The Rainbow），“TTR”是“Taste The Rainbow”的缩写，意思是“品尝彩虹”</h5> <h5>彩虹象征的寓意是美妙、童话、空想。彩虹在雨后才会呈现，阐明所要谋求的漂亮，要在历经肯定的挫折之后能力达到想要的指标或是美妙的心愿。也是一种踊跃、衰弱的生活观、生存形式。不经验风雨怎能见彩虹？</h5> </body></html>HTML 段落能够把 HTML 文档宰割为若干段落。段落总是从新行开始，通常是一个文本块。阐明： ...

标签在挪动端浏览器有一些特地的用法，有时能够给用户提供很大的便当。拨打电话<a href="tel:18882323232">打电话 18882323232</a>发送短信<a href="sms:18882323232">发短信 18882323232</a>发送邮件<a href="mailto:haorooms@126.com?subject=The%20subject%20of%20the%20mail">给haorooms发送邮件</a>关上APP<a href="https://apple-wellknown.foundingaz.com" target="_blank">关上APP Store(Safari可间接关上app)</a>在线演示DEMO

在我的项目中实现自定义滚动条代码实现::-webkit-scrollbar { width: 10px; height: 10px;}::-webkit-scrollbar-thumb { border-radius: 50px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); background: #ccc;}::-webkit-scrollbar-thumb:hover { background: #b4b4b4;}::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 8px;}代码属性剖析首先，::-webkit-scrollbar这是一个非标准的个性，仅在基于 Blink 或 WebKit 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其它基于 WebKit 的浏览器）上可用。 ::-webkit-scrollbar定义竖向滚动条的宽度和横向滚动条多的高度。 ::-webkit-scrollbar-thumb定义滚动条自身的圆角、暗影、背景色彩等相干属性。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* body { background: url(./assets/airpods.png) no-repeat; background-size: 100% 100%;} */div { width: 500px; height: 500px; border: 2px solid red; background: url(./images/dog.jpg) no-repeat; /* background: url(./assets/airpods.png) no-repeat; */ /* background-size: 500px 200px; */ /* 1.只写一个参数 必定是宽度 高度省略 这时会等比例缩放 */ /* background-size: 500px; */ /* 2.外面能够跟% 绝对与父盒子来说 */ /* background-size: 50%; */ /* background-size: 100% 100%; */ /* 3. cover 要齐全笼罩div盒子 可能有局部背景图片显示不全 */ /* background-size: cover; */ /* 4. contain 高度和宽度等比例拉伸 当宽度或者高度铺满div盒子时 不再拉伸 可能有局部空白区域 */ background-size: contain;}</style></head><body> <div></div></body></html> ...

语义化标签HTML的次要工作是编辑文本构造和文本内容（也称为 语义semantics）以便浏览器能正确的显示，同时能够让搜索引擎更好的捕获你网页的内容。 语义是指对一个词或者句子含意的正确解释。语义化标签强调的是 HTML 的 构造 和HTML标签的 意义 ，而不是它显示的款式( 体现 )。题目与段落HTML有6种级别的题目, h1~h6。6种级别的题目示意文档的6级目录的层级关系，比如说： <h1> 用作主题目（最重要的），其后是 <h2>（次重要的），再其次是 <h3> ，以此类推一篇一般的文章，题目级别倡议管制在3级，其中 <h1> 作为文章的主题目，个别只有一个。<h1>一级题目</h1><h2>二级题目</h2><h3>三级题目</h3><h4>四级题目</h4><h5>五级题目</h5><h6>六级题目</h6>段落<p>前后会主动</p>换行 文本格式化<strong>语气减轻</strong><b>文字加粗</b><hr /><em>强调文本</em><i>斜体文本</i><hr /><del>被删除的文字</del><s>删除线</s><hr /><ins>插入的文字</ins><u>下划线</u><hr /><mark>被标记的文本</mark><br /><br /><q>这是短援用</q><blockquote>这是长援用</blockquote><p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>计算机代码：<code>print("hello world")</code><br /><pre>锄禾日当午,汗滴禾下土。谁吃盘中餐,粒粒皆辛苦。</pre><address>Mailbox by <a href="mailto:1838576587@qq.com">1838576587@qq.com</a>.<br>WebSite：https://www.timeic.xyz<br /></address><p>这段文本蕴含 _下标</p><p>这段文本蕴含 ^上标</p> 其中<span title="strong"><strong></span>、<span title="emphasize"><em></span>、<span title="delete"><del></span>、<span title="insert"><ins></span>、<mark> 标签 在语义上有突出强调的意义; 个别用在有非凡意义的词或句。 而<b>(bold)、<i>(italic)、<s>(Strikethrough)、<u>(underline) 标签仅代表显示上的成果，没有其余语义。 <hr> 水平线，<br> 换行 <q> 为短援用(两端主动加双引号)，援用一段或一句文本。 <blockquote> 为长援用(起始缩进)，援用一篇或一章文本。 <cite> 作品（比方书籍、歌曲、电影、电视节目、绘画、雕塑等等）的题目。 <code> 示意计算机代码(如：C、Java、JavaScript、Python) <pre> 预格局文本(以文本编辑时的格局显示，能够应用 字符实体 在浏览器中显示HTML代码)。 <address> 示意作者分割信息 <sup>(上标字)和<sub>(下标字)可用于内容示意 脚注 、化学或数学的 公式符号 等。 列表<!-- 无序列表 --><ul> <li>榴莲</li> <li>臭豆腐</li> <li>鲱鱼罐头</li> <li>西红柿</li></ul><!-- 有序列表 --><ol> <li>刘德华 10000</li> <li>刘若英 1000</li> <li>Time Science</li></ol><!-- 自定义列表 --><dl> <dt>关注咱们</dt> <dd>新浪微博</dd> <dd>官网微信</dd> <dd>电话分割</dd></dl><!-- 多级列表 --><ul> <li>首页</li> <li>专题 <ul> <li>前端 <ul> <li>HTML</li> <li>CSS</li> </ul> </li> </ul> </li> <li>单干 <ul> <li>单干模式</li> <li>联系方式</li> </ul> </li></ul><ul> 标签为 无序列表 ，<ol> 标签为 有序列表 ...

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>大数据热点图</title> <style> body { background-color: #333;}@keyframes move_pulse { 0% { } 70% { width: 40px; height: 40px; /* scale会把暗影也放大，成果很难看 */ /* transform: scale(5); */ opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; }}.map { position: relative; width: 747px; height: 617px; background: url(./media/map.png) no-repeat; margin: 0 auto;}.city { position: absolute; right: 193px; top: 227px;}.tb { right: 84px; top: 501px;}.gz { right: 184px; top: 528px;}.dotted { width: 8px; height: 8px; border-radius: 4px; background-color: #09f;}.city div[class ^= 'pulse'] { /* 设置咱们小波纹在父盒子程度居中 放大之后核心就会向周围发散 */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; /* 暗影 */ box-shadow: 0 0 12px #009dfd; animation: move_pulse 1.2s linear infinite;}.city div.pulse2 { /* 应用动画的提早(时间差)实现多层暗影的队列成果 */ animation-delay: 0.4s;}.pulse3 { animation-delay: 0.8s !important;}</style></head> ...

9090# snail-player-native009 一个纯原生代码编写的h5视频播放器, 功能完善，根本满足应用，仅供学习，禁止商用演示 演示减速 Install1. git clone https://github.com/snail-boy/snail-player-native.git2. 拷贝lib目录下的文件到本人我的项目里Usage间接运行index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #snailPlayId { width: 800px; height: 500px; margin: 0 auto; } h1 { text-align: center; } </style></head><body><h1>snail-player</h1><div id='snailPlayId'></div></body><script type="module"> import SnailPlayer from "./lib/index.js"; new SnailPlayer({ el: '#snailPlayId', src: 'https://webrabbit.oss-cn-beijing.aliyuncs.com/drawingbed/video.mp4', autoplay: true, // 是否自动播放 loop: true // 是否循环播放 })</script></html>Some Codemain.js// 计算进度条工夫progressTime(offsetY) { return utils.formatSeconds((offsetY / this.progressw * this.playVideo.duration).toFixed(2))}// 进度条计算公式progressCalculate() { return (this.progressw / this.playVideo.duration * this.playVideo.currentTime).toFixed(2)}// 全屏fullScreenFun() { const docElm = document.documentElement if (!this.isFullScreen) { utils.addClass(this.el, 'fullscreen-active') utils.addClass(this.playVideo, 'fullscreen-active') utils.showClass('snail-player-full-screen-icon') utils.hiddenClass('snail-player-fullscreen-btn') utils.changeInnerText('fullscreen-icon', '退出全屏') utils.addClass(this.playBottom, 'sn-player-fullscreen-bottom-active') setTimeout(() => { if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (document.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, 100) this.isFullScreen = true utils.hiddenClass('snail-player-web-fullscreen-box') } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } utils.showClass('snail-player-web-fullscreen-box') utils.removeClass(this.el, 'fullscreen-active') utils.removeClass(this.playVideo, 'fullscreen-active') utils.hiddenClass('snail-player-full-screen-icon') utils.showClass('snail-player-fullscreen-btn') utils.changeInnerText('fullscreen-icon', '进入全屏') utils.removeClass(this.playBottom, 'sn-player-fullscreen-bottom-active') this.isFullScreen = false }}index.js//加载cssrenderCss(url) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.type='text/css'; link.rel = 'stylesheet'; link.href = url; head.appendChild(link);}//加载faviconrenderIcon(url) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.type='type="image/x-icon"'; link.rel = 'shortcut icon'; link.href = url; head.appendChild(link);}Utilsclass Utils { hasClass(ele, cls) { return !!ele.className.match(new RegExp('(\s|^)' + cls + '(\s|$)')) } addClass(ele, cls) { if (!this.hasClass(ele, cls)) ele.className += ' ' + cls } removeClass(ele, cls) { if (this.hasClass(ele, cls)) { const reg = new RegExp('(\s|^)' + cls + '(\s|$)') ele.className = ele.className.replace(reg, '') } } set(key, value) { localStorage.setItem(key, value) } get(key) { return localStorage.getItem(key) } showClass(cls) { cls ? document.getElementsByClassName(cls)[0].style.display = 'block' : new Error('请输出类名') } hiddenClass(cls) { cls ? document.getElementsByClassName(cls)[0].style.display = 'none' : new Error('请输出类名') } changeInnerText(cls, text) { document.getElementsByClassName(cls)[0].innerHTML = text } clickfu(to, cls){ //回调函数，to为点击对象 to.setAttribute("class",cls); const siblings = to.parentNode.childNodes; for(let i=0; i<siblings.length; i++) if(siblings[i].nodeType == 1 && siblings[i] != to)siblings[i].className = ''; } formatSeconds(value) { if(!value) return '00:00' value = parseInt(value); let time; if (value > -1) { let hour = Math.floor(value / 3600); let min = Math.floor(value / 60) % 60; let sec = value % 60; let day = parseInt(hour / 24); if (day > 0) { hour = hour - 24 * day; time = day + "day " + hour + ":"; } else if (hour > 0) { time = hour + ":"; }else { time = ""; } if (min < 10) { time += "0"; } time += min + ":"; if (sec < 10) { time += "0"; } time += sec; } return time; } classEle(cls) { return cls && document.getElementsByClassName(cls)[0] }}export default UtilsFunction按空格键暂停播放点击屏幕暂停播放视频进度条拖拽，辨别色彩鼠标挪动到进度条上方显示工夫视频快进慢放视频声音管制画中画整屏播放双击全屏播放等运行环境反对es6的各种浏览器最好用chrome源码地址，欢送stargithub地址 ...

近期在我的项目开发中，在调整登录认证模块，发现我的项目启动胜利，本地也失常关上，然而公布服务的时候，发现网页无奈失常关上，并提醒"该网页无奈失常运作"，如图1.1图1.1 在确保其余代码失常无误的状况下，我把问题的起因聚焦在了cookie下面，同时做了屡次尝试：如1、查看cookie的个数和内存大小（查看是否超出限度）；2、管制cookie的大小和个数（适当增减个数和内容大小）；3、尝试清理cookie，重启电脑（重试大法）；通过上述尝试均有效，在百度的时候发现了相似的问题存在，然而提供的办法也只是清理cookie，管制写入形式，但对于我的这种状况仍不失效，通过重复测试，发现了导致该问题的起因是我在**存取cookie的时候，cookie内容存在中文数据，影响有二： 局部低Tomcat版本读取的时候存在问题写入中文cookie可能导致某些不确定的异样但理论利用场景中，我是须要存入中文cookie的，而后尝试援用JSON的解决形式，在JS中调用JSON的办法JSON.stringify()进行简略解决** let realName = JSON.stringify(obj.realName);该办法可能进行转译，简略解决之后再公布，发现页面失常关上，性能不再收到影响。本次为问题解决记录，如果存在雷同问题，能够尝试查看是否为该问题导致。

HTML是创立网页的规范标记语言，而HTML文件则是用于浏览器中展现各种内容的网页文件格式。HTML文件中通常蕴含有HTML标签、层叠样式表、JavaScript等Word文件无奈兼容的内容，因而HTML文件通常无奈间接准确转换为Word文档，只有非常简单的网页能力达到较好的成果。如果想要将HTML文件转为Word文档并且保留原始排版布局，就须要更改HTML代码，缩小或去除Word不反对的内容。本文向大家介绍一个简略的办法将HTML文件转换为Word文档。 引入DLL一、 通过NuGet装置 可右键单击解决方案中的依赖项，找到“治理NuGet包”，在其中搜寻“FreeSpire.Doc”并增加到援用项中。复制以下内容到控制台装置PM> Install-Package FreeSpire.Doc二、 手动增加DLL可在在FreeSpire.Doc for .NET官网下载免费版后解压，在解决方案中找到依赖项，右键单击找到增加援用项，找到Spire.Doc.dll并增加到援用项中。用Spire.Doc转换HTML文件为Word文档的操作非常简略，次要步骤如下： 创立 Document 对象。用 Document.LoadFormFile() 从磁盘加载 HTML 文件。用 Document.SaveToFile() 办法将HTML文件转为Word并保留。C# using System;using Spire.Doc;using Spire.Doc.Documents;namespace ConvertHTMLtoWord{ internal class Program { static void Main(string[] args) { //创立 Document 对象 Document document = new Document(); //从磁盘加载 HTML 文件 document.LoadFromFile(@"D:\testp\示例.html"); //将 HTML 文件转为 Word 并保留 String result = "HtmltoWord.docx"; document.SaveToFile(result, FileFormat.Html); }}}VB.NET Imports SystemImports Spire.DocImports Spire.Doc.DocumentsModule Program Sub Main(args As String()) '创立 Document 对象 Dim document As New Document() '从磁盘加载 HTML 文件 document.LoadFromFile("D:\testp\示例.html") '将 HTML 文件转为 Word 并保留 Dim result As String = "Html转Word.docx" document.SaveToFile(result, FileFormat.Docx2013) End SubEnd Module转换成果展现： ...