在前端开发中，长时间运行的JavaScript任务一直是一个棘手的问题。它们会导致页面无响应，影响用户体验。传统上，开发者使用setTimeout()来分割长任务，但这种方法存在明显的缺陷。最近，Chrome129引入了一种新的、更高效的方法：scheduler.yield()。本文将深入探讨这种新技术，并比较其与传统...

在JavaScript的发展历程中，我们不断见证着语言特性的革新。最近，一个名为安全赋值操作符（?=）的新特性引起了广泛关注。这个操作符不仅简化了错误处理的流程，还大大提高了代码的可读性和简洁性。传统上，我们处理可能抛出异常的代码时，常常需要使用try-catch块：而现在，借助?=操作符，我们可以将上述代码简化为：这...

CSS可以为任何元素设置前景色和背景色。前景色(color)前景是指元素的文本，也包括元素四周的边框。因此影响元素前景色的除了color，还有边框的颜色。p.onep.two＜pclass=one＞第一个段落为红色。＜/p＞＜pclass=two＞第二个段落为蓝色。＜/p＞可以看到，第二个段落，即使没有为边框指定颜色，...

CSS字体属性定义字体的样式，如大小，加粗，下划线等等。字体族CSS定义了五种通用字体：衬线字体：宽度各异，有衬线。无衬线字体：宽度各异，无衬线。等宽字体：字形宽度一样，一般用于代码和表格数据显示。草书字体：模仿人类笔迹或手写体。奇幻字体：以上分类里不能表达的，归于此类。Serif、Sans-serif和Monospa...

在前端开发中，HTML标签是构建网页结构的基础。然而，除了常用的＜div＞、＜a＞和＜p＞等标签外，HTML还提供了许多鲜为人知但功能强大的标签。本文将介绍10个这样的标签，它们能为你的网页开发带来意想不到的便利和效果。1.＜progress＞和＜meter＞：进度条的两种形式＜progress＞标签用于创建标准的进度...

现在，我们基本上讲完了CSS布局的基本概念，以及布局的基本知识，作为此系列基础教程的最后一篇，我们来实现一个Blog的页面。这里会用到前面学过的HTML基础和CSS基础，其中主要是布局相关的。分析要实现的页面看起来是这样的。可以看到，从结构上它分成了顶部区域，导航栏区域和内容区域三大块。其中内容区域又分成了左右两块内容...

今天我们来聊聊CSS中的一个重要概念——响应式设计。随着移动设备的普及，用户访问网站的设备种类越来越多，从手机到平板再到桌面电脑，屏幕尺寸各不相同。响应式设计可以确保用户在不同设备上都能获得良好的体验。什么是响应式设计？简单来说，响应式设计是一种网页设计方法。这种设计方法使网页能够根据用户的设备和屏幕尺寸自动调整布局和...

CSS网格（Grid）是一种强大的布局系统。它允许我们在网页设计中创建复杂的布局。与传统的浮动布局和弹性盒子（Flexbox）相比，网格提供了更多的控制和灵活性。通过定义行和列，我们可以轻松地将元素放置在网格的特定位置上，从而实现精确的布局。一个简单的网格例子让我们从一个简单的例子开始，看看如何使用CSS网格创建一个基...

今天我们来聊聊CSS里的弹性盒子（FlexBox）。简单来说，弹性盒子是一种布局模式，可以让我们更轻松地排列和对齐网页上的元素，尤其是在我们不知道元素具体大小或者它们会动态变化的时候。基本概念弹性盒子布局主要由两部分组成：容器（container）和项目（items）。容器：就是包含弹性项目的父元素。项目：是直接位于容...

一、概述CSS定位(Positioning)属性允许你对元素进行定位。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。二、CSS定位机制CSS有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否...

float属性最初只用于在成块的文本内浮动图像，后来成为了在网页上创建多列布局的最常用工具之一。一个例子.float-box-1准备一个盒子的样式的样式，应用在div上。＜h1＞CSS入门教程之浮动(float)的例子＜/h1＞＜divclass=float-box-1＞浮动(float)＜/div＞＜p＞CSS全称C...

filter属性将模糊或颜色偏移等图形效果应用于元素，常用于调整图像、背景和边框的渲染。一个filter例子/*定义一个div基本样式*/div/*滤镜样式*/.filter-one定义了一个基本的div样式，和一个滤镜样式类。这是一个为元素添加阴影的样式。＜div＞没有滤镜＜/div＞＜divclass=filter...

无序列表(ul)和有序列表(ol)，默认情况下在网页的呈现和表格一样，比较粗糙。看一个无序和有序列表的代码：＜ul＞＜li＞CSS入门准备＜/li＞＜li＞简介与语法＜/li＞＜li＞选择器＜/li＞＜li＞值和单位＜/li＞＜li＞字体和字号＜/li＞＜li＞颜色和背景＜/li＞＜li＞链接＜/li＞＜li＞边框＜/...

使用CSS对表格进行美化，是一项必须的技能，因为表格默认的样式实在太苍白。＜table＞＜caption＞21天CSS入门更新记录＜/caption＞＜thead＞＜tr＞＜th＞序号＜/th＞＜th＞文章标题＜/th＞＜th＞发布时间＜/th＞＜/tr＞＜/thead＞＜tbody＞＜tr＞＜td＞01＜/td＞＜t...

CSS中的盒子模型，或盒模型，是boxmodel。它指的是我们把元素看成一个个盒子。所以看到说盒子怎么怎么样，实际指的是某个元素的行为如何。boxmodel定义了盒子四个部分（如下）之间如何协作，最后创建出一个显示在页面上可以看到的盒子。外边距margin边框border填充（有时也翻译成内边距）padding内容在讲...

前面在介绍选择器时，提到了伪类和伪元素，并列举了CSS里的伪类列表。在讲链接时介绍的链接的四个状态，就是伪类。伪，就是假的意思，也可以理解为不存在。那伪类和伪元素，都有一个“伪”字，它们有什么区别呢？伪类伪类，就是假的类，不存在的类。那指的是在哪里不存在呢？这里要引入一个概念DOM，也就是HTML文档结构树，具体理解不...

属性display定义元素如何显示，听起来像废话。这里要来回顾一下之前在HTML教程讲过的块元素（block）和内联元素（inline），如果不记得就先复习一下。visibility属性，则用于指定元素是可见还是隐藏。显示（display）属性display有以下几个常用值：noneblockinlineinline-...

前面介绍了边框，一个元素除了边框这种能看见的，它还有两个看不见的空间，就是外边距（margin）和填充（padding）。为方便起见，以下直接使用margin和padding叙述。margin定义元素与外部元素之间的间距，而padding定义的，是元素自身边框与元素内容之间的间距。咱们看一张图就清楚了。在最中间的内容块...

边框样式，即可以为元素指定边框。看起来似乎很简单。来看看示例：这些都是使用CSS实现的，是不是有点子强大？边框位置(top,right,bottom,left)当我们谈论为元素指定边框时，我们说的是上下左右四个边框线。但是在CSS里，我们不按这样的顺序来说，而是会说上，右，下，左。聪明的你一定想到了，这是顺时针的顺序。...

前面的HTML教程图片与超链接里，讲过链接的标签，现在来看看对于链接有哪些样式。链接的状态链接不同于普通文字，它可以点击，而点击用到了鼠标。结合可点击和鼠标是否在链接上面，链接分成以下四个状态：a:link-正常的链接，也就是没有被用户访问过的链接状态。a:visited-已经被用户访问过的链接，即点击过的链接状态。a...

我们知道，HTML是标记语言，用来组织网页中的各种内容，包括文本，图片，音频，视频等。而CSS则是样式规则语言，将样式应用于HTML内容，能使得网页更美观，更具有设计性。JavaScript呢，是一种脚本语言，在网页上，通过使用JavaScript，可以创建动态更新的内容，控制音频视频，制作动画等等。虽然JavaScr...

还是老规矩，工欲善其事，必先利其器。来看看JavaScript开发环境的准备。客户端的JavaScript的学习，只要有编辑器和浏览器就足够了，不需要安装其它。代码编辑器VSCode依然沿用学习HTML和CSS时的编辑器VSCode，如果还没有准备，参考HTML入门准备和CSS入门准备做相应准备。在确保安装了VSCod...

今天我们来聊聊JavaScript的基本语法，包括变量、数据类型、操作符和表达式。首先，JavaScript是区分大小写的，并使用Unicode字符集。在JavaScript中，指令被称为语句，并用分号（;）进行分隔。如果一条语句独占一行，分号则可以省略，但不建议这么做，而且像prettier这样的扩展会默认把分号加上...

控制结构帮助我们根据不同的条件执行不同的代码块，或者重复执行某段代码。那就来看看两种常见的控制结构：条件语句和循环语句。条件语句条件语句允许我们根据某个条件的真假来执行不同的代码。最常见的条件语句是if语句和else语句。理解成中文就是：如果...否则...if语句if语句用于在条件为真（true）时执行某段代码。语法...

函数是可重复使用的代码块。可以把它想象成一个小机器，输入一些东西（参数），然后输出一些东西（返回值）。如何定义和调用函数？定义一个函数很简单，你可以使用function关键字。下面是一个简单的例子：//定义一个函数functionsayHello()//调用这个函数sayHello();在这个例子中，我们定义了一个名为...