html实用的嵌套规则

.内联元素（也叫行元素、内嵌元素）不能嵌套块元素，例如：<p>元素和<h1~6>元素不能嵌套块元素；

2.块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：

3.有几个很特殊的块级元素只能包含内联元素，不能再包含块级元素，特殊的标签是一下这些：

p、dt、h1、h2、h3、h4、h5、h6

4.嵌套块级元素可以和块级元素并列，内嵌元素可以和内嵌元素并列，例如：

除注明外的文章,均为来源:汤久生博客(QQ:1917843637),转载请保留本文地址！

何计算机语言都会包含大量的内置函数，当然也可以自定义函数。

JS函数是由事件驱动或者当它被调用时执行的可重复使用的代码块。相对来说，JS的函数比较复杂。

目录
1 常规函数
2 JS嵌套函数
3 JSt函数字面值
4 函数对象Function
5 匿名函数，也叫内联函数
6 闭包
7 内联函数作为对象的方法
8 常规函数做为对象的方法
9 对象字面量

1 常规函数

JS函数是先定义后调用。（C语言还要先声明）

function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);

JS可以在<script>标签中直接调用函数，也可以在链接或事件中调用。

2 JS嵌套函数

JavaScript允许函数用作数据，也允许在函数中嵌入函数。

function hypotenuse(a, b) {
function square(x) { return x*x; }
return Math.sqrt(square(a) + square(b));
}

hypotenuse(1, 2); // This will produce 2.2360

3 JSt函数字面值

字面值函数的语法很类似的函数声明，不同之处在于它被用作表达，它不是作为一个声明，函数名是必需的。

var func = function(x,y){ return x*y };
你可以在上面函数中调用如下：
func(10,20); // This will produce 200

4 函数对象Function

Function也是一个对象，可以使用new运算符创建一个实例。

<script type="text/javascript">
var variablename = new Function(Arg1, Arg2..., "Function Body");
</script>
下面是创建一个函数的例子：
<script type="text/javascript">
var func = new Function("x", "y", "return x*y;");
</script>

Function()函数构造预期任意数量的字符串参数。最后一个参数是函数体，它可以包含任意JavaScript语句，用分号彼此分开。

请注意，Function()构造不通过任何参数，指定一个名字为它创建函数。使用Function()构造函数创建的未命名的函数称为匿名函数。

5 匿名函数，也叫内联函数

函数(没有名字)定义可以被赋值给一个变量，该变量被用作函数的引用。

匿名函数是指那些无需定义函数名的函数。匿名函数与 Lambda 表达式（拉姆达表达式）是一回事。唯一的不同——语法形式不同。Lambda 表达式更进一步。本质上，它们的作用都是：产生方法——内联方法，也就是说，省去函数定义，直接写函数体。

var abc=function(x,y){
return x+y;
}
alert(abc(2,3)); // "5"

匿名函数也可以作为事件方法：

window.onload = function(){
alert("Welcome");
}

var baz1 = function() {
var foo = 10;
var bar = 2;
return foo * bar;
};
function mutil() {
var foo = 10;
var bar = 2;
return foo * bar;
};
alert(baz1());
var baz2 = mutil();
alert(baz2);

baz1 与 baz2 完全一样，但 baz1 与 baz2 相比，省去了函数定义，直接函数体——看上去多简约。

6 闭包

闭包是定义在另一个函数中的匿名函数。当外部函数退出时，它会返回内部匿名函数的引用，使得通过引用调用内部函数成为可能。闭包意味着局部变量对内部函数仍然可用，即使它已经超出其作用域。闭包可以让变量一直存活到不再需要它们的时候。闭包，其实就是指程序语言中能让代码调用已运行的函数中所定义的局部变量。js中某个函数的内部函数在该函数执行结束后仍然可以访问这个函数中定义的变量，这称为闭包(Closure) 。

闭包可以用在许多地方。它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

请看下面的代码。

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
alert(n);
}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是“nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个

匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

function foo() {
var a = 10;
function bar() {
a *= 2;
return a;
}
return bar;
}

var baz = foo();
document.write(baz(),"<br>");
document.write(baz(),"<br>");
document.write(baz(),"<br>");
var blat = foo();
document.write(blat(),"<br>");
//20,40,80,20

7 内联函数作为对象的方法

function Distance(r,t){
this.rate = r;
this.time = t;
this.calculate=function() { return r * t;}
}

<body>
var trip1 = new Distance(50, 1.5);
var trip2 = new Distance(75, 3.2);
document.write("trip 1 distance: "+trip1.calculate(),"<br />");
document.write("trip 2 distance: "+trip2.calculate(),"<br />");
//75,240
</body>

8 常规函数做为对象的方法

var toy = new Object();
toy.name = "Lego";
toy.color = "red";
toy.shape = "rectangle";
toy.display = printObject;
function printObject(){
document.write("<b>The toy is a " + toy.name + ".<br>");
document.write("It is a " + toy.color + " " + toy.shape + ".<br />");
}

<body>
<script>
toy.display();
toy.color = "blue";
toy.display();
</script>
</body>

运行结果：

The toy is a Lego.
It is a red rectangle.
The toy is a Lego.
It is a blue rectangle.

9 对象字面量，也用匿名函数做为对象方法

<script>
var soldier = {
name: undefined,
rank: "captain",
picture: "keeweeboy.jpg",
fallIn: function(){
document.write("At attention……<br>");
},
fallOut: function(){
document.write("Drop out of ……<br>");
}
};
</script>

<body>
<script>
soldier.name="Tian";
document.write("The soldier's name is ", soldier.name,".<br />");
document.write(soldier.name+"'s name is ", soldier.rank,".<br />");
soldier.fallIn();
soldier.fallOut();
</script>
</body>

－End－

载地址：https://juejin.cn/post/7219478427300479034
来源：掘金

项目地址：olivewind/weekly

发布时间：2023.04.08

本周内容：资讯x3、开源x8、文章x4、产品*3

行业资讯

Chrome 112 支持 CSS 嵌套语法

近期 Chrome 团队发布 112 版本的功能清单，其中最值得一提的是，从该版本开始支持 CSS 嵌套语法，随着原生 CSS 语法的不断强大，也许很快我们就可以丢弃 Less、Sass 等扩展工具。

// 112 版本之前
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

// 112 版本开始
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}
复制代码

第 95 届 TC39 会议的更新

Stage 3:

异步显式资源管理：解决软件开发中有关各种资源（内存、I/O 等）的生命周期和管理的常见模式
import attribute：Import Assertions 重新进入 Stage-3。在导入 es module 时支持选项，例如 JSON 模块import json from "./foo.json" with { type: "json" }; 复制代码

Stage 2:

Async Context：提议是提供一种机制，以符合人体工程学的方式跟踪 JavaScript 中的异步上下文
Float16Array：TypedArrays、DataView、Math.f16round 上的 Float16
Iterator.range : ECMAScript 添加一个内置的建议Iterator.range()

Stage 1：

Await Dictionary:：建议添加Promise.ownProperties()，Promise.fromEntries()
Class Method Parameter Decorators : ECMAScript 类方法和构造函数参数的装饰器
Promise.withResolvers：创建一个带有reject,resolve和promise函数的 Promise 作为方法放在 promise 对象本身上
时区规范化：TC39 提案以改进对 IANA 时区数据库更改的处理

React Labs：我们一直在做的事情（英文）

React 官方团队近期发布了团队的工作事项，主要包括 React Server Components、Asset Loading、Document Metadata、优化编译器、离屏渲染等方向的一些工作。最值得关注的更新来自 React Forget 的进展，这是一个优化编译器，其目标是能够使用已有的 JavaScript 和 React 心智模型构建完全反应式系统，编译器会处理最棘手的部分。

开源项目

FormidableLabs/react-live

React Live 是一个可以实时编辑和预览 React 组件的库，该库采用模块化结构，可让您自由设计和组合其组件。

dutiyesh/chrome-extension-cli（1.7k star）

该项目可用于快速初始化一个完整的 Chorme 插件项目，支持 TypeScipt 和多种模板。

apify/crawleeh（21k star）

Crawlee 是一个用于 Node.js 的网络爬取和浏览器自动化库，可帮助您快速地构建可靠的爬虫。

import { PlaywrightCrawler, Dataset } from 'crawlee';

// PlaywrightCrawler crawls the web using a headless
// browser controlled by the Playwright library.
const crawler = new PlaywrightCrawler({
    // Use the requestHandler to process each of the crawled pages.
    async requestHandler({ request, page, enqueueLinks, log }) {
        const title = await page.title();
        log.info(`Title of ${request.loadedUrl} is '${title}'`);

        // Save results as JSON to ./storage/datasets/default
        await Dataset.pushData({ title, url: request.loadedUrl });

        // Extract links from the current page
        // and add them to the crawling queue.
        await enqueueLinks();
    },
    // Uncomment this option to see the browser window.
    // headless: false,
});

// Add first URL to the queue and start the crawl.
await crawler.run(['https://crawlee.dev']);
复制代码

refinedev/refine（9.3k star）

refine 是一个 React 开发框架，用于快速开发 Web 应用程序，它消除了 CRUD 操作所需的模板代码，并为身份验证、访问控制、路由、网络、状态管理和 i18n 等关键部分提供行业标准解决方案。

sindresorhus/np（7.1k star）

np 可以作为 npm publish 命令的完全代替，其提供了交互式 UI、分支检查、代码提交检查、运行测试、错误回滚、版本生成等大量实用特性。

petyosi/react-virtuoso（3.6k star）

号称最强大的 React 虚拟列表/表格组件，主要有以下特性：

支持可变高度的 item
支持响应式网格布局
支持使用粘性标题进行分组
支持页眉和页脚

splitbee/react-notion（2.6k star）

react-notion 是一个用于渲染 Notion 页面的 React 组件，其渲染结果和 Notion 几乎相同，你可以用它轻松实现一个博客，文档或个人站点。

NotionX/react-notion-x（3.5k star）

如果上一个 react-notion 项目无法满足你的需求，那么你可以试试 react-notion-x，这是一个生产级的 Notion 页面渲染方案，笔者的博客站（liguo.run）正是基于该项目构建，基于此我可以在 Notion 里直接发布我的文章，这极大降低了站点维护的成本。

优质文章

系列：100 天学习现代 CSS（英文）

CSS 发展至今已经非常成熟和先进，也许你每天都在使用它，但是可能有些特性已经发布很久了你却还未有过了解，比如 color-mix()、:has()、@property、::part 等。通过这一系列文章了解下 CSS 近些年更新的特性，强烈建议你泡上一杯咖啡静下心完整阅读完该文章，一定会有非常多收获

重新思考 React 最佳实践（英文）

多年前，React 重新思考和定义客户端 SPA 领域的最佳实践，如今 React 已被大规模应用，同时也难以避免遭受各种“批评”和“怀疑”。React 18 与 React Server Components (RSC) 的发布标记着其定位的转变，这篇文章将尝试理解该演变过程。

2023 React 调试指南（英文）

想要构建高质量的 Web 应用程序，无法跳过调试阶段，是否熟练掌握调试技巧也是衡量一个 Web 工程师的重要手段。本文章将介绍 React 调试的来龙去脉，了解常见的 React 错误及其调试工具和方式。虽然该文章以 React 作为承载，但大部分工具和方法适用于任何 JavaScript 应用。

Node.js CLI 相关工具库概况（应用）

当我们需要使用 Node.js 构建一个 CLI 时，面临的第一个问题就是工具选型，社区有大量的工具库可供选择，但很多都相当陈旧。有些已经停滞不前，有些已经被他们的维护者抛弃，还有很多没有跟上现代开发实践。这篇文章旨在对最受欢迎的工具包进行分类，并重点介绍其中的一些软件包及其当前的开发状态。

有趣产品

raycast

Raycast 是一个速度极快、可扩展极强、颜值清新的启动器，可以用于代替 Mac 自带的 Spotlight 以及众所周知的 Alfred，最关键的是 Raycast 对个人用户免费。一旦你开始使用它，你就再也无法离开它。

pageblox

Web 应用交付时通常会有一个环节叫“设计还原度走查”，常规的走查流程是设计师走查->截图->汇总->修改->同步->确认，如果有问题就需要重复这个过程，这是一个非常耗时且容易出错的过程，如果设计师可以直接在浏览器里的真实页面上和 figma 的标注评论一样进行走查，那团队效率将得到有效提升，pageblox 便是解决此类问题的一个产品，目前该产品还在 beta 阶段，但我已经对它的正式推出迫不及待。

codux

日常前端开发通常会遇到两类业务组件复用的问题：

同一仓库下：当可复用组件较多且无法清晰从命名推断出每个组件的“真实面貌”时，开发者通常没有耐心尝试渲染它验证是否满足需求，而是选择再造轮子
不同仓库下：复用流程繁琐，不管使用 npm、模块联邦还是微前端都对文档管理、版本管理、协作流程有较大的挑战

如果可以在已有项目里直接开一个目录维护通用组件并可以清晰看到每个组件的渲染结果就可以有限缓解上述问题，codux 便是解决此类问题的一个实现完善的可视化 React IDE。其最大优点是可以和现有系统进行集成，不需要对原有系统代码做任何改造，并且对 TypeScript、Git、Sass 等工具有开箱即用的支持。codux 和 Storybook 有部分类似的地方，不过 codux 更专注于本地 DX。值得一提的是，codux 背后的公司是大名鼎鼎的无代码建站平台 Wix。

在线咨询

上一篇：咪咕讯飞电子阅读器评测：这是一本可以听的电子书
下一篇：2021年山东专升本考生必刷题-（11.13）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商