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小時內與您取得聯系。

整合營銷服務商