在不涉及样式情况下，页面元素的优先显示与标签选用无关。请判断这句话的正确与否？

最新推荐文章于 2023-05-04 16:45:54 发布

学不会只能哭

最新推荐文章于 2023-05-04 16:45:54 发布

阅读量2.1k

点赞数

分类专栏：前端学习笔记文章标签： css html css3 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_61696809/article/details/129133714

版权

前端学习笔记专栏收录该内容

52 篇文章 0 订阅

订阅专栏

这句话是不准确的。在不涉及样式的情况下，页面元素的显示顺序与标签选用是有关系的。

HTML标签的渲染顺序是从上到下，从左到右，即先加载的元素会先渲染出来。因此，如果将一个元素放在页面的靠前位置，它会比同样没有样式的标签放在后面的位置先渲染出来。举个例子，如果一个页面中有两个div，一个在页面顶部，另一个在底部，即使这两个div的HTML代码完全相同，第一个div仍然会比第二个div更快地渲染出来。

需要注意的是，样式可以改变元素的渲染顺序。例如，如果一个元素的样式使用了绝对定位或浮动，它可能会跳过标准的渲染顺序，从而在页面中优先显示。因此，在涉及样式的情况下，元素的渲染顺序可能与标签选用的顺序无关。

当我们在HTML中使用不同的标签时，这些标签会根据它们的默认样式来显示不同的布局行为和渲染效果。

例如，<div>元素是块级元素，它默认情况下会在页面中占据一整行。这意味着如果我们在HTML中使用了多个<div>元素，它们会依次排列在不同的行上。下面的例子中，我们在HTML中使用了三个<div>元素，它们分别代表了网页的头部、内容和底部：

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <divid="header">
      <h1>Welcome to My Website</h1>
    </div>
    <divid="content">
      <p>Here is some content for my website.</p>
    </div>
    <divid="footer">
      <p>&copy; 2023 My Website. All rights reserved.</p>
    </div>
  </body>
</html>

在页面中，这三个<div>元素会各自占据一行，它们之间没有任何空隙。这是因为<div>元素是块级元素，它们默认情况下是显示为块级盒子的。

另一个例子是<span>元素，它是一个内联元素，通常用于包裹文本或者其他内联元素。和<div>元素不同，<span>元素不会独占一整行，而是会和相邻的元素在同一行上显示。下面的例子中，我们在HTML中使用了<span>元素来标记一段文本：

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <p>Welcome to <spanclass="my-website">My Website</span>! We're glad you're here.</p>
  </body>
</html>

在这个例子中，<span>元素包裹了一个文本字符串My Website。由于<span>元素是内联元素，它会和文本一起显示在同一行上。

这些标签的默认样式和默认行为可以通过CSS样式来改变和覆盖，但是这并不影响它们的默认行为。