HTML语义化 语义化的意义在HTML中各个标签是有特定语义含义的，正是因为这些语义信息，浏览器才能正确解析HTML内容。如果没有按照正确的语义信息去写HTML代码，虽然整个网页还是可以加载，但可能会导致异常解析。我们举个例子：<!DOCTYPE HTML><html lang="en-GB"> <head> <title> Demonstration </title> </head> <body> <table>
css实现一侧开口三角形 简单画了一个示意图，在css中我们经常可以需要用到这样的对话框。下面是演示代码： <div class="demo"> <a href class="button">我是按钮</a> </div> <div class="triangle"></div> .button { display: inline-block; line-height: 36px; pad.
CSS实现三道杠 样式大致如下：html代码如下：<i class="icon-menu"></i>css如下：.icon-menu { display: inline-block; width: 140px; height: 10px; padding: 35px 0; border-top: 10px solid; border-bottom: 10px solid; background-color: currentColor;
HTTP/1问题和HTTP/2解决思路 古老的HTTP/1HTTP起源于1991年发明的HTTP/0.9。该协议最初是为一个更简单的电子文档Web而设计的，只能使用单一方法（GET）。这些用HTML编写的文档能够通过锚点标签链接到其他文档。HTTP/0.9协议能够很好的实现这一目标。随着时间的推移，人们添加了两个具有额外功能和方法（例如提交表单数据的POST）的HTTP新实现。其版本号是v1.0好v1.1，他们在1996年标准化，从那时起，HTTP/1就成了Web的主力军。然而接下来，随着Web技术的演进，Web从提供简单的HTML文档转变
性能优化：实现动画效果优先考虑css的transition 在实现页面动画时候，相比于使用js，使用css实现动画效果无疑开销要少很多。因此，推荐优先应该尽可能使用css来实现动画效果。这里面最常用的就是transition属性了。下面举一个例子：.box { width: 128px; height: 128px; background-color: #c40a0a; transition: border-radius 2s ease-out;}.box:hover { border-radius: 50%;}应用这段css，当用户悬停在.
React简单表单最佳实践 从一个简单表单谈起假设我们要做一个表单，比如是这样，要怎么做？你可能会这样写：firstName对应一个键盘记录，lastName对应一个键盘记录：import React from 'react'class Uncontrolled extends React.Component { constructor(props) { super(props) this.state = { firstName: '', lastName: '',
React兄弟组件之间通信 兄弟组件之间通信React是只有单项数据流动模式，也就是只能父组件的数据传递给子组件，而没有办法将子组件的数据传递给父组件。那么如果想要两个子兄弟组件通信该怎么办呢？答案是可以通过子组件向父组件推送信息或者触发事件，然后父组件的状态会发生更新。传递到子组件的数据也会发生更改。这样两个兄弟组件就可以通过公有父组件实现通信。让我们来去举一个具体例子，我们有一个counter组件来实现计数功能，样式大致是这样的：公有父组件可以写成这样：import React from 'react'import
CSS几行代码快速实现轮播图 代码实现相比于网上使用较为复杂的方案实现轮播图，本文使用css的Scroll Snap可以用更少的代码来实现轮播图效果。具体而言，主要使用两个css代码，分别是scroll-snap-type和scroll-snap-align。前者用于确定轮播图吸附轴向，后者用于确定轮播图是初始吸附还是中间吸附还是后面吸附。下面是HTML代码： <div class="box"> <div class="box_item box_item--bg1"></div>
用background渐变画斜线 写的CSS样式举例如下：.test { height: 90px; background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%); /* background-size: 30px 30px; */}实现的效果会是在居中的位置画一条绿色的斜杠。这段代码的意思是在135度的位置，从0到4
用Hook的方式实现防抖 需要进行页面防抖是前端编程时经常遇到的问题了。如果不太了解什么是防抖的话，可以参考浅谈 JS 防抖和节流。这篇文章，我们分别用传统方式来实现防抖和用Hook方式实现防抖。传统方式const debounce = (func, delay) => { let timeout return () => { if (timeout) { clearTimeout(timeout) } timeout = setTimeout(function() {
前端异步请求数据未获取导致报错解决办法 我们在编写前端程序的时候，往往需要异步请求后端数据，然后拿着得到的数据重现渲染页面。有的时候，数据还没有获取到，这个时候会是undefined形式。比如说，let test = "123"，但是后端还没有传回来数据的话，会是test=undefined，如果test里面还有属性的话，比如获取test.name就会直接报错。对于这样的问题，可以写成这样：test?.name || "哈哈"这个?可以保证即使后面有属性但是没有值也是返回的是undefined，而不会报错。如果前面是undefined的话，
React Hook基本使用踩坑指南 React因为提倡函数式编程，所以提出了Hook思想来增强函数组件的功能，以此来替代基于Class的组件。但是我们有可能从基于Class这样的实例化组件转向函数组件时思想还没有完全转过来，还是用基于实例的思想考虑问题，忘记了函数有用完即销毁（特别是纯函数）这样的特点，导致在使用React Hook的时候可能会出一些问题。下面的内容就来记录一下，使用React Hook的新手可能会遇到的一些问题。Hook使用原则首先要强调一下Hook的使用原则，可以参考我之前写的文章：如何使用React Hook最后的
如何使用React Hook class组件和函数组件我们希望编写代码的时候，尽可能将整块可复用的部分封装起来。这样可以一定程度提高代码的内聚性，将其耦合性，使得程序开发变得更加可维护。通常情况下，我们将代码块抽离成组件来实现封装。在React中，实现组件封装有两种方式，分别是通过class方式以及函数组件方式。class方式：class List extends React.Component { constructor(props) { super(props) } render() {
CSS设置样式时，鼠标移动到div上，发生抖动问题解决办法 出现抖动现象背后的原因比如你可能会遇到这样的场景，就是有一个div块，当鼠标悬浮的时候，需要添加一个border（比如多个div块以卡片的形式排列起来）。你可能会考虑写成这样的CSS：div:hover {border: 1px solid blue}但是这样写会导致一个问题，就是div块之间比如说间距是3px，这时候加了一个border，间距可能会变成4px。div块之间间距突然拉大（比如说那种多个卡片场景），从视觉上来看就好像页面的div块间发生了抖动。你可能会考虑使用box-sizing:
CSS实现图片居中且缩放不影响图片纵横比 实现代码我们在编写页面代码的时候往往会需要添加图片。在使用过程中，获取的图片尺寸经常可能和页面需要的尺寸不一致，这时候就需要对获取图片进行缩放。对图片缩放有一定技巧，或者说是固定的编写代码套路。否则可能稍有不慎，就会导致图片被拉伸，失去原有纵横比。下面代码展示了一种保持图片纵横比缩放图片的套路。建议首先看一下这篇文章，使得基线位置和中线位置保持一致：图片垂直居中下面是代码：<!DOCTYPE html><html> <head> <
用CSS写出一个下拉菜单小箭头 向右小箭头width: 13px;height: 13px;border: 1px solid #0F1520;border-top: none;border-left: none;transform: rotate(-45deg);
React中使用setState 不要直接修改 Statestate数据不能直接修改，必须要通过setState来修改。但是设置值的时候不能影响到之前state的值，举个栗子：// 处理数组，不会改变原有数组this.setState({ list1: this.state.list1.concat(100), // 追加 list2: [...this.state.list2, 100], // 追加 list3: this.state.list3.slice(0, 3), // 截取 list4:
vscode快捷操作 快捷键Ctrl + Shift + P 打开快捷键Ctrl + D: 第一次按下Ctrl+D，会选择当前光标处的单词，再按下会该快捷键时，会在下一个相同单词位置添加新光标Ctrl + Shift + P: 该快捷键会在当前光标出现的所有位置，都添加光标...
如何使用vscode安装和调试Java程序 步骤一：安装调试Vscode官方出的安装指南步骤二：运行Java程序需要注意的是，Java程序不能单独运行（就是单独写一个文件然后运行），要在项目里才可以运行起来。运行时注意事项和可能出现的问题...
关注
