整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
eb前端基礎,Web前端教程
塊元素又名塊級元素(blockelement)，和其對應的是內聯元素(inlineelement)，都是html規范中的概念。大多數HTML元素被定義為塊級元素或內聯元素。塊級元素在瀏覽器顯示時，通常會以新行來開始(和結束)。
如果介紹HTML網頁基本標簽的嵌套規則，首先要說的就是元素的分類。元素可以劃分為塊級元素和行級元素，塊級元素是什么？它可以獨占一行，可以設置寬高度，默認是100%；行級元素與之相反，它的內容決定它的寬高度，至于特殊字符就當成是文字來看
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>HTML塊級、行級元素，特殊字符，嵌套規則</title>
</head>
<body>
<!--塊元素:獨占一行，可以設置寬高、默認寬度100%-->
塊元素分為文字類和容器類
文字類塊元素:p、h1——h6
容器類塊元素：div、table、tr、td、frame、ul>li、ol、dl、dt、dd（序列）
<!--行元素:不獨占一行，寬高度取決于內容-->
行元素：aimginputstrongemdelspan
特殊字符：文字br hr
</body>
</html>
嵌套規則總結如下幾點：
1.塊元素可以嵌套行元素2.行元素可以嵌套行元素3.行元素不可以嵌套塊元素4.文字類塊元素不可以嵌套塊元素5.容器類塊元素可以嵌套塊元素
塊元素和內聯元素的基本差異是塊元素一般都從新行開始，相鄰的塊級元素將會在不同行顯示。而當加入了css控制以后，塊元素和內聯元素的這種屬性差異就不成為差異了。比如，我們完全可以把內聯元素加上display:block這樣的屬性，讓它也有每次都從新行開始的屬性，即成為塊元素同樣我們可以把塊元素加上display:inline這樣的屬性，讓它也在一行上排列。
-html 嵌套規范注意點
1-1塊級元素一般作為大容器，可以嵌套：文本，塊級元素，行內元素，行內塊元素等；但是，p標簽中不要嵌套div標簽，p，h,等塊級標簽；
1-2-a標簽內可以嵌套任意元素，但是，a標簽不能嵌套a標簽；
2-注意點
2-1大標簽嵌套小標簽。是父子；
2-2塊級嵌套行內
p標簽不能嵌套嵌套h1~h6；
h1~h6不能嵌套p標簽
一個段落，一個是標題；
3-1-1測試 p標簽不能嵌套div；代碼截圖：
3-1-2 瀏覽器顯示：
小結，右鍵檢查，顯示瀏覽器自動閉合了兩個p標簽，強制不準p標簽嵌套h1和div標簽；
3-2-1 p標簽嵌套其他標簽，比如
span,b,strong,i,em,s,del,u,ins,ins,small,big,sub,sup;
3-2-2 測試代碼截圖：
瀏覽器截圖：
對比不嵌套圖片和代碼：
小結，嵌套標簽后瀏覽器顯示正常，檢查圖如下；檢查后，未發現強制閉合標簽；
4-1 測試a標簽,a標簽不能嵌套a標簽;
代碼截圖：
瀏覽器顯示和瀏覽器檢查截圖：
小結，當a標簽嵌套a標簽后，顯示瀏覽器點擊檢查后，看到標簽被強制閉合，使其不能被嵌套；
檢查顯示a標簽嵌套h1,div標簽時，顯示正常；
4-2 測試a標簽嵌套其他標簽，代碼和瀏覽器顯示截圖；
瀏覽器檢查截圖
小結，瀏覽器顯示a標簽嵌套后，文本顯示正常，瀏覽器檢查正常，無強制閉合；
a標簽嵌套標簽后，所有字體變成藍色，點擊后變色，并且，自帶下劃線；
a標簽嵌套標簽后，不會自動換行，需要添加br換行進行對比參照。
載地址：https://juejin.cn/post/7219478427300479034
來源：掘金
項目地址：olivewind/weekly
發布時間：2023.04.08
本周內容：資訊x3、開源x8、文章x4、產品*3
近期 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;
}
}
}
復制代碼Stage 3:
Stage 2:
Stage 1：
React 官方團隊近期發布了團隊的工作事項，主要包括 React Server Components、Asset Loading、Document Metadata、優化編譯器、離屏渲染等方向的一些工作。最值得關注的更新來自 React Forget 的進展，這是一個優化編譯器，其目標是能夠使用已有的 JavaScript 和 React 心智模型構建完全反應式系統，編譯器會處理最棘手的部分。
React Live 是一個可以實時編輯和預覽 React 組件的庫，該庫采用模塊化結構，可讓您自由設計和組合其組件。
該項目可用于快速初始化一個完整的 Chorme 插件項目，支持 TypeScipt 和多種模板。
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']);
復制代碼refine 是一個 React 開發框架，用于快速開發 Web 應用程序，它消除了 CRUD 操作所需的模板代碼，并為身份驗證、訪問控制、路由、網絡、狀態管理和 i18n 等關鍵部分提供行業標準解決方案。
np 可以作為 npm publish 命令的完全代替，其提供了交互式 UI、分支檢查、代碼提交檢查、運行測試、錯誤回滾、版本生成等大量實用特性。
號稱最強大的 React 虛擬列表/表格組件，主要有以下特性：
react-notion 是一個用于渲染 Notion 頁面的 React 組件，其渲染結果和 Notion 幾乎相同，你可以用它輕松實現一個博客，文檔或個人站點。
如果上一個 react-notion 項目無法滿足你的需求，那么你可以試試 react-notion-x，這是一個生產級的 Notion 頁面渲染方案，筆者的博客站（liguo.run）正是基于該項目構建，基于此我可以在 Notion 里直接發布我的文章，這極大降低了站點維護的成本。
CSS 發展至今已經非常成熟和先進，也許你每天都在使用它，但是可能有些特性已經發布很久了你卻還未有過了解，比如 color-mix()、:has()、@property、::part 等。通過這一系列文章了解下 CSS 近些年更新的特性，強烈建議你泡上一杯咖啡靜下心完整閱讀完該文章，一定會有非常多收獲
多年前，React 重新思考和定義客戶端 SPA 領域的最佳實踐，如今 React 已被大規模應用，同時也難以避免遭受各種“批評”和“懷疑”。React 18 與 React Server Components (RSC) 的發布標記著其定位的轉變，這篇文章將嘗試理解該演變過程。
想要構建高質量的 Web 應用程序，無法跳過調試階段，是否熟練掌握調試技巧也是衡量一個 Web 工程師的重要手段。本文章將介紹 React 調試的來龍去脈，了解常見的 React 錯誤及其調試工具和方式。雖然該文章以 React 作為承載，但大部分工具和方法適用于任何 JavaScript 應用。
當我們需要使用 Node.js 構建一個 CLI 時，面臨的第一個問題就是工具選型，社區有大量的工具庫可供選擇，但很多都相當陳舊。有些已經停滯不前，有些已經被他們的維護者拋棄，還有很多沒有跟上現代開發實踐。這篇文章旨在對最受歡迎的工具包進行分類，并重點介紹其中的一些軟件包及其當前的開發狀態。
Raycast 是一個速度極快、可擴展極強、顏值清新的啟動器，可以用于代替 Mac 自帶的 Spotlight 以及眾所周知的 Alfred，最關鍵的是 Raycast 對個人用戶免費。一旦你開始使用它，你就再也無法離開它。
Web 應用交付時通常會有一個環節叫“設計還原度走查”，常規的走查流程是設計師 走查->截圖->匯總->修改->同步->確認，如果有問題就需要重復這個過程，這是一個非常耗時且容易出錯的過程，如果設計師可以直接在瀏覽器里的真實頁面上和 figma 的標注評論一樣進行走查，那團隊效率將得到有效提升，pageblox 便是解決此類問題的一個產品，目前該產品還在 beta 階段，但我已經對它的正式推出迫不及待。
日常前端開發通常會遇到兩類業務組件復用的問題：
如果可以在已有項目里直接開一個目錄維護通用組件并可以清晰看到每個組件的渲染結果就可以有限緩解上述問題，codux 便是解決此類問題的一個實現完善的可視化 React IDE。其最大優點是可以和現有系統進行集成，不需要對原有系統代碼做任何改造，并且對 TypeScript、Git、Sass 等工具有開箱即用的支持。codux 和 Storybook 有部分類似的地方，不過 codux 更專注于本地 DX。值得一提的是，codux 背后的公司是大名鼎鼎的無代碼建站平臺 Wix。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
