整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
