文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我写<div />这样的东西时,为什么浏览器会变得疯狂？

当你写<div />这样的东西时，浏览器会变得疯狂的原因是因为这种写法是自闭合标签的语法，但在HTML中，<div>标签是一个块级元素，不应该使用自闭合标签的语法。浏览器会尝试去解析这种不正确的语法，导致解析错误，进而可能引发其他问题。

在HTML中，自闭合标签的语法应该用于一些空元素，例如<br>、<img>等。这些元素是没有内容的，因此可以使用自闭合标签的语法来简化代码。

正确的写法应该是<div></div>，或者在XHTML中可以使用<div />来表示自闭合。

推荐的腾讯云相关产品和产品介绍链接地址：

相关搜索:为什么当我传递词汇表的参数时，sklearn的TfidfVectorizer会返回一个空矩阵，而不是这样呢？为什么当我在div中使用hover时，它也会悬停在我的文本旁边？为什么当我在一个程序中插入像';‘或'&’这样的东西时，我会得到一个错误？为什么当我执行loc.innerHTML = xhr.responseText时，浏览器会自动将我的responseText括在双引号中？为什么当我的菜单打开时，我的图像会像这样移动？为什么当我编写代码时，我的障碍仍然会一个接一个地出现，这样它们就不会出现了？为什么当我调整大小或向下恢复时，我的CSS中的椭圆div会放在我网站的右侧墙(边框)旁边？为什么当我调整浏览器大小时我的div会重叠？当我输入一个超出范围的数字时，循环返回的值与我输入一个来自范围的数字时的值相同。为什么会这样呢？我无法在Chrome浏览器中查看我的下拉菜单，但当我在此处插入代码时，我可以查看它。怎么会这样?
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

SpringMVC中的@Controller和@RequestMapping到底什么鬼？

1494897692559029057.png 在上图中，我们可以看它的路径是“D:\电影”，该路径下又有一个文件夹【疯狂动物城 2016】，里面是这样的 1494897702152088854.png...同理，如果我在同一个Controller里面设置两个相同的RequestMapping 1494897766027073622.png 编译是可以通过的，但是当我启动tomcat后， 我通过url “http...再来看RequestMapping，最终对应的必然是一个方法，方法的功能无非就是进行一些业务的操作，或者返回一个什么东西。...1.3 @ResponseBody的作用 在Controller里面，我们经常可以看到@ResponseBody这个注解，它的意思很简单，就是说明这个方法返回的东西会通过IO流的方式写入到浏览器。..."; } 最终在浏览器获得的效果是这样的： 1494897809137032549.png

96791

从零开始：一个正式的vue+webpack项目的目录结构是怎么形成的

然后我们在src目录下面新建一个app.vue文件，里面就可以写一些关于项目的业务代码： {{text}} </template...同样的，我们希望使用模块依赖，因为项目中会做很多可复用的代码，把它写到一个模块里面去，这样的话当我们再去写一个新项目的时候，不用再把原来的代码重新写一遍，或者是拷贝一份。...这样看起来，名称就变得更加的合理。...以后新建的文件不要乱放，因为项目一旦做大，维护时间比较久的时候，可能两三个月里面都有一个文件你不会去碰它。到时候如果要去找一个东西的时候，你会找不到它，这是非常令人难受的一件事情。...最重要的一点是，目录结构的混乱，会导致你后续开发项目的效率变得非常的低。 这次关于“一个正式项目的目录结构是怎么形成的”的话题就说到这里，我之后的文章会讲些什么呢？

1.5K70

React从入门到放弃，一个关于网页速度的故事

如果你从没做过那样的工作，千万别去做。我会给那些愿意听我抱怨的人，喋喋不休地讲我遇到的各种困难。当我开始深入研究前端的替代方案时，我发现了 FRP、Flapjax 和 ClojureScript。...而且 UX 开发者通过出色的实时重新加载（多亏了 CLJS），能够从编辑器连接到浏览器的 REPL，并直接在编辑器试验。那简直太棒了！ 长话短说，我们的前端变得越来越大。...服务端渲染只能帮助一部分，但是混合渲染会阻塞浏览器。在比较老旧的硬件或 Android 系统上，这变得不可接受！...除此之外，在执行下面描述的操作时，我们发现 React 也会导致一些有问题的实践。...当我纠结于对 HTML 片段的请求时，我明白了一件事：当我为目录页选择技术路线图时，最后的选择是“类似 intercooler 的小东西”。 那为什么还不行动呢？

1K20

把 React 作为 UI 运行时来使用

而当我们探讨为什么会这样时却很有意思。 事实上，你很少会直接调用 ReactDOM.render 。相反，在 React 应用中程序往往会被拆分成这样的函数： ?...我们想要在渲染更新概念上相同的 UI 时保留这些状态。我们也想可预测性地摧毁它们，当我们在概念上渲染的是完全不同的东西时（例如从 转换到 ）。...例如，渲染一棵很深的树（在每次页面转换的时候发生）而不阻塞浏览器。改变跟踪并不会让它变得更快 — 这样只会让其变得更慢因为我们执行了额外的订阅工作。另一个问题是我们需要等待返回的数据在渲染视图之前。...相反，React 会先触发所有的事件处理器，然后再触发一次重渲染以进行所谓的批量更新。 批量更新虽然有用但可能会让你感到惊讶如果你的代码这样写： ?...有些时候，大多数组件需要相同的东西 — 例如，当前选中的可视主题。将它一层层地传递会变得十分麻烦。 在 React 中，我们通过 Context 解决这个问题。

2.5K40

没人告诉你关于 CSS 变量的那些事

我们的第二个背景颜色并没有被浏览器划掉，反而是第一个背景样式被划掉了。因为第二个背景样式重写了第一个。 为什么会发生这样的事情 ？...当我们使用变量作为属性，浏览器只会在 "计算值时间" 去评估值，因为我们需要首先知道变量的内容。在这种例子中，当浏览器做联级时，会认为属性值是有效的，之后才会变成无效。...在我们的例子中，浏览器做级联时，认为最后一个声明是有效的。但是到评估值的时候，最后一个声明被认定是无效的，所以它被忽略。...因为一个值是有效还是无效时基于 CSS 变量的，所以浏览器一开始时不能真正知道。...它们可以有奇怪的语法 最后一个也是有趣的一个。 你知道你能像下面这样写么？ body { --:red; background:var(--); } 很神奇，对吧？

48620

CSS萌新不知道的5件事

CSS 是这样, 但是它远不止这些! 一个成功的CSS项目需要最完美的构建。写得不好的CSS是脆弱的，很快就变得难以维护。关键是要学会如何组织代码，以便创建具有长期可用性的可维护结构。...但即使是优秀的代码库，也必须处理疯狂的设备数量、屏幕大小、功能和用户偏好。 更别提还有可达性，国际化，和浏览器的兼容性！ CSS 就像一直小熊: 可爱无害的，但是随着年龄的增长，他会活吃了你。...分享与参与 分享真的非常的重要，我多么希望当我刚开始进入这一行的时候有人跟我分享，我用了10年的时间去了解分享的价值; 当我做到的时候, 它完全改变了我对我工作的态度和与他人的合作的方式。...CSS开发者要远不止写CSS这么简单。构建你的代码, 编译, linting, 格式化, 以及浏览器实时刷新，这些都是你每天要处理的一小部分。 挑选适合自己的IDE。...了解浏览器 浏览器不仅仅只是你的画布, 同样也是一个强大的调试器可以来调试你的代码, 测试性能, 以及向别人学习。 学习浏览器如何渲染你的代码，会让你大开眼界。它可以使你的代码提升一个等级。

44320

用 ref 访问 Vue.js 程序中的 DOM

在浏览器中进行模板检查时，它们根本不显示，因为它不是 HTML 属性，只是一个 Vue 模板属性。...，该计数器在单击时会被更新，但是当你在浏览器中打开开发人员工具时，你会注意到它没有记录日志。...正确的使用语法非常重要，因为这意味着 Vue 不会将此视为错误，的确如此。根据我们已经知道的关于 Vue refs的内容，它们会返回一个对象，但是根据未定义的响应来判断，有些东西是错误的。...检查test.vue 快速查看代码块将揭示正确的语法：在模板中它被称为 ref，但是当我们在 Vue 实例中引用它时，它被称为 $refs。当不返回 undefined时，这提示是非常重要的。...为了说明这一点，可创建一个这样的简单列表： I am car

2.9K20

React 我爱你，但你太让我失望了

当我刚开始遇到你时，我刚刚结束了和 Angular.js 的长期关系。我已经被 watch 和 digest 折腾累了，更不用说 scope 了。我一直在寻找不会让我感到痛苦的东西。 这就是一见钟情。... )); 你可能会问，为什么这么难？...对于像我这样必须维护庞大代码库的人来说，这种持续的 API 膨胀是一场噩梦。看到你每天化的妆越来越浓，会不断提醒你想要刻意隐藏的东西。 严格的限制 你的 Hooks 是个好创意，但它们是有代价的。...; }; 因此，所有 effects 的依赖项中都包含 isVisible props，并且可能会过于频繁地运行（可能会损耗性能）。...Facebook 的宗旨是 让人们更紧密地联系在一起 ！每当我拜访你的父母时，我都会结识新朋友。 但后来事情变得一团糟了，你的父母参加了一个人群操纵计划。

1.1K20

H5学习之路之Web存储解决方案

那么今天我们说的是H5才提出的存储方案：localStorage和sessionStorage 首先说一下为什么需要这个东西，为什么之前已经有了cookie但是H5的时候却在客户端存储这块重新定义了这两部分呢...，这样的做法结果是用户体验会更好，因为毕竟速度会快很多，这是一点，另外，服务器的压力会变的很小。...我关闭浏览器重新打开还是继续计数的，那么说明浏览器只要不变就是没有问题的。 当我们换一个浏览器的时候效果是这样的： ?...3、浏览器的隐私模式下是不可使用的 4、它的存储空间是变得很大，大概5M左右，那么如果什么我们都存在页面上的话，其实我们是不推荐这样使用的，这样导致的结果是页面变得很卡。...value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。

67610

CSS元素选择器是怎样运作的？

CSSOM树 当我们写下一组 CSS 样式时，例如： #id .class h4 + p { ... } 浏览器在解析它时，你可能会认为 CSS 会按照由左到右的依序找出＃id>.class>h4...通过 中的 .d 来思考，这样的 CSSOM 树在套用样式时，必须对所有的样式规则进行检查，以确认样式规则是否会影响到 .d，到最后才能确定可能会影响到 .d 的样式规则有这三条...除了开发者定义好的 CSS 档外，还有几个地方可能会定义样式规则，影响画面的渲染： HTML 的 inline style 设置 浏览器预设值（就是 CSS reset/normalize 要覆盖掉的东西...） 浏览器的使用者偏好设定 浏览器负责处理 CSS 的部分，会吧前面所有的东西以及 CSS 文件定义的样式规则分别整理成单独的样式规则组（CSS 规则集），内容记载了样式规则、目标属性等信息。...这样在取用时，可以依据目标元素是否存在这个属性，快速筛出可能会套用的样式。

1.7K10

为什么JavaScript开发如此疯狂

事实是，的确如此，你遗漏了一些解决问题的重要片段。 并且，前端开发实际上已经陷入了疯狂。 不仅仅是你。 拉过一把椅子，坐下来。到时间写JavaScript应用了。 第一步是准备本地开发环境并运行。...你看了一些React文档，“Redux是JavaScript app可预测的状态容器。”真棒！你一定需要那些中的其中之一。 为什么构建JavaScript应用会如此疯狂？！？...让我来帮助你理解为什么我要说这一切是如此疯狂。让我们从一个例子开始，然后转移到漂亮的图片。 这是React的“Hello, world!”应用。 ? 没有完全完成。 ?...你是（大多数时候）对的，但你还需要走一小步才能理解为什么一切都疯了。 下面是我承诺过的图片。 ? 绝大多数你将工作的JavaScript web应用程序，会落在钟形曲线中部的某个位置。...并且在中部，如果你从一个完整的React堆栈开始，那么从一开始你就大量过度设计了你的应用程序。 这就是为什么一切都变得疯狂。

64120

所有程序员都应该遵守的11条规则

但作为一个程序员，所有这些东西并不是问题真正的解决方案，相反，它们只是帮助我们解决问题的简单工具。 在面对那些我们喜欢或是当前非常流行的特殊技术时，我们必须非常小心，而不是变得过于疯狂。...一种经常出现的情况是，当我们写出一段“聪明”的代码时，这段代码并不是特别的“清晰”。 这条规则非常重要，尤其是当我们思考我们要做一些特别“聪明”的事情时。...当我跟Bob Martin在一起时，他说： “你写的每个注释，都代表着你表达能力的欠缺“ －整洁代码：敏捷软件艺术手册 这并不是说一点注释也不写，但通常我们可以通过一种更好的方式——命名来避免。...写代码有很多乐趣，我希望我能写更多的代码。 我这几天经常忙于写代码并试图让它占据我更多的时间，这也是我为什么如此清晰地记得它有多么的有趣。...当我写代码时我会遵循很多”最佳实践“，但有时我也会背离它们。 原则是永恒的，最佳实践是变通的. 11、力求精简 所有问题都可以进行分解. 最佳的解决方案往往是最简单的.

73380

前端单测，为什么不要测 “实现细节”？

这样做的原因主要是因为这些 API 会测到很多代码的实现细节 (Implementation Details)。...然后，很多人又会问：为什么不要测 代码的实现细节（Implemantation Details） 呢？很简单：测试本身就很困难了，我们不应该再弄那么多规则来让测试变得更复杂。...重构中的 “假错误” 我知道大多数人都不喜欢写测试，特别是写 UI 测试。原因千千万，但其中我听得最多的一个原因就是：大部分人会花特别多的时间来伺候这些测试代码（指测试实现细节的测试代码）。...每次我改点东西，测试都会崩！—— 心声 一旦测试代码写得不好，会严重拖垮你的开发效率。下面来看看这类的测试代码会产生怎样的问题。...这也是为什么 Enzyme 测试用例为什么这么容易出现 “假错误”，因为 当用它来写一些 End User 和 Developer 都不 care 的测试用例时，我们实际上是在创造第三个用户视角：Tests

93750

React 教程：React 快速上手指南

大量不断推出的新技术的同时，也在被不需要它们的人嘲笑，往往很多人都会这样做。我们有时会对不断涌现的信息、库和讨论感到不知所措，总希望能有一些稳定的东西，就像能让我们可以休整一段时间的避风港。...前面我提到了 Babel，这是一个工具，可以帮助我们预览那些尚未在 JavaScript 中（更确切地说是在浏览器中）支持的东西，或者以某种方式对 JavaScript 进行扩展（或者类似于 TypeScript...感谢Babel： JSX 将被转化为成浏览器可以理解的代码。 我们可以使用尚未在浏览器中实现的新功能（例如类属性）。 我们可以支持新浏览器中的特性，同时在旧浏览器中支持较旧的功能。...我很不喜欢对库进行比较，特别是当我们被迫把梨和苹果放在一起进行比较时。 因此，我将尝试使用一系列简短的问题和答案将 React 与 Angular 和 Vue 进行比较。...prop 还有一个更有用的东西叫做 defaultProps，这是一个静态字段，它可以告诉你组件的默认 prop 是什么（比如当它们没有传递给组件时）。

1.4K30

页面导入样式时，使用link和@import有什么区别？

很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。 方式二： 嵌入样式 嵌入方式指的是在 HTML 头部中的 标签下书写 CSS 代码。...因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。...因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。...CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。...； 2、@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件； 3、当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载

4K20

如何 通过使用优先级提示，来控制所有网页资源加载顺序

由于有太多的活动，有效地管理这些流量的优先级变得至关重要。带宽争用是真实存在的，当所有请求同时触发时，有些HTTP请求的优先级并不像其他请求那样高。...因此，预加载通常最适用于晚些时候发现的资源 - 任何不直接由你的HTML加载的东西，比如通过内联样式属性加载的背景图像。但它也适用于任何其他可能不像你希望的那样被浏览器优先考虑的东西。...当设置为true时，即使页面终止，浏览器也会完成该请求。 何时使用 当你知道多个请求正在并发执行，并且你明确知道哪个最重要（或哪个可以安全地被降级）时，指示fetch()的优先级。...当开始下载时，这三者都是“低”优先级。但很快，页面首部的那个切换到了“高”优先级。 当我为第一张图片添加fetchpriority属性时，情况变得更加可预测： <img src="....这就是<em>为什么</em>这些优先级提示存在<em>的</em>原因：为了使指令清晰，并且让<em>浏览器</em>很少有机会做出错误<em>的</em>决策。下次当你研究自己应用程序<em>的</em>网络活动<em>时</em>，记住它们，当有意义<em>时</em>，使用它们来帮助使你<em>的</em>页面性能更加智能。

19110

响应式、模版克隆、Proxy 代理。。。JavaScript 框架工作原理你还了解多少？

当我阅读大型框架领域的最新动态时，我常常会被自己不知道的事情压得喘不过气来。 不过，了解某些东西如何工作的最好方法之一就是自己动手创建。...换句话说，像 或 这样的东西不会自动开始下载任何东西。 与手动 DOM API 相比，速度有多快？下面是一个小型基准测试。...当我们构建玩具示例时，我们也将使用标记模版字面量（Tagged Template Literals），简单来说它可以让我们用另一种方式进行函数调用，来创建这样的 API： const dom = html...当我们将该 state 传递给 render 时，它应该返回应用了该状态的 DOM 树： Blue!...未来，我认为如果浏览器 API 的功能足够齐全，那么构建自定义框架就会变得更加容易。

17710

50个有价值的CSS编写规则，让你写出更好的CSS

特定选择器的示例： section#sample-section —（问为什么需要指定“ section”和ID） main div p.title —（询问为什么需要指定.title以外的任何内容）...当嵌套和定位常见的 HTML 标签（如 、 和 标签）时，样式选择器的会更糟。寻找允许您有效渲染 CSS 但不要采取任何极端措施的策略。...对我来说，这些是像带有显示 flex 或网格的 center 这样的东西，所以我创建了一个类 .center-flex 和 .center-grid。创建类实用程序来自动化这些重复的样式组合。...19、对CSS写注释 注释是个好东西，采纳吧！如果你编写了复杂的 hacks 或发现某些事情有效但不知道为什么，请添加注释。...字体过多的网站可能会变得混乱，因此，请始终确保包含页面所需的字体。字体加载和应用可能需要一些时间，当你有太多字体时，你的 UI 通常会在字体加载后跳转不到位。

2.3K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券