<section>和<div>有什么区别?

<section><div>in有HTML什么区别
我们不是在两种情况下都定义了节吗?

Gil2020/03/16 14:35:17

<section>标签定义文档中的部分,如章节,页眉,页脚,或该文件的任何其它部分。

而:

<div>标签定义的划分或HTML文档中的一个部分。

<div>标记用于组块元件,以将它们与CSS格式化。

Tom西里路易2020/03/16 14:35:17

<section></section>

HTML <section>元素表示文档的一般部分,即内容的主题分组,通常带有标题。<section>通常应通过将标题(<h1>- <h6>元素)作为元素的子元素来标识每个<section> 元素。详情请点击链接。

参考文献:


<div></div>

HTML <div>元素(或HTML Document Division Element)是流内容的通用容器,它本质上不代表任何内容。它可以用于对元素进行分组以进行样式设置(使用class或id属性),或者因为它们共享属性值(例如lang)。仅当没有其他语义元素(例如<article><nav>)合适时才应使用它

参考:-http: //www.w3schools.com/tags/tag_div.asp-https : //developer.mozilla.org/en/docs/Web/HTML/Element/div


以下是一些链接,它们更多地讨论了它们之间的区别:

十三小哥2020/03/16 14:35:17

这是有关如何在Web应用程序(纯粹是主观的)的情况下区分几个最近的html5元素的提示。

<section>在图形用户界面中标记窗口小部件,而<div>窗口小部件的组件的容器是容器,例如包含按钮和标签的容器。

<article> 对具有共同目的的小部件进行分组。

<header> 是标题和菜单栏。

<footer> 是状态栏。

神乐Green2020/03/16 14:35:17

使用<section>可能会更整洁,帮助屏幕阅读器搜索引擎优化,同时<div>在字节小更快地型

总体上差别不大。

此外,不建议把<section><section>,而不是放置<div><section>

米亚猴子2020/03/16 14:35:17

注意不要过度使用section标签代替div元素。代码应在上下文中定义一个显著区域的身体从语义上讲,HTML5鼓励我们按以下方式定义文档:

<html>
<head></head>
<body>
    <header></header>
    <section>
        <h1></h1>
        <div>
            <span></span>
        </div>
        <div></div>
    </section>
    <footer></footer>
</body>
</html>

这种策略使网络机器人和自动屏幕阅读器可以更好地理解您的内容流。该标记明确定义了主要页面内容的包含位置。当然,页眉和页脚通常在网站的数百甚至数千页面中很常见。部分标签应限于解释这里独特的内容包含。然后,section标签内,我们应继续使用层次结构中较低的HTML标签(例如h1divspan等)来标记和控制内容

在大多数简单页面中,应该只有一个section标签,而不是多个。也请考虑其他有趣的HTML5标签,它们与section相似考虑在文档流中使用articlesummaryaside和其他内容。如您所见,这些标签进一步增强了我们定义HTML文档主要区域的能力。

路易村村2020/03/16 14:35:17

<div>—the generic flow container we all know and love. It’s a block-level element with no additional semantic meaning (W3C:Markup, WhatWG)

<section>—通用文档或应用程序部分。通常,A具有标题(标题),也可能具有页脚。它是一大堆相关内容,例如长篇文章的小节,页面的主要部分(例如,首页上的新闻部分)或Webapp的选项卡式界面中的页面。(W3C:Markup,WhatWG)

我的建议:div:使用较低的版本(我认为仍为4.01)html元素(很多设计师对此进行了处理)。部分:最近使用(html5)html元素。

LEYHarryHarry2020/03/16 14:35:17

在HTML5标准中,<section>元素被定义为相关元素的块。

<div>元素被定义为子元素的块。

Sam小哥Tom2020/03/16 14:35:17

section标签为html提供了更多的语义语法。div是节的通用标记。当您将section标签用于适当的内容时,它也可以用于搜索引擎优化。section标签还使html解析变得容易。有关更多信息,请参阅。http://blog.whatwg.org/is-not-just-a-semantic

小小蛋蛋2020/03/16 14:35:17

只是观察-尚未找到任何证实这一点的文档

如果一个节包含另一个节,则内部节中的h1标题将以比外部节中的h1标题更小的字体显示。当使用div而不是section时,内部div h1标头显示为h1。

<section>
  <h1>Level1</h1>
  some text
  <section>
    <h1>Level2</h1>
    some more text
  </section>
</section>

-Level2-标头的字体比Level1-标头的字体小。

当使用css为h1标头着色时,内部h1也被着色(表现为常规h1)。在Firefox 18,IE 10和Chrome 28中,这是相同的行为。

老丝乐2020/03/16 14:35:17

<div> Vs <Section>

第1轮

<div>:HTML 元素(或HTML文档分割元件)是用于流内容,这本身不表示任何一般容器。它可以用于对元素进行分组以进行样式设置(使用class或id属性),或者因为它们共享属性值(例如lang)。仅当没有其他语义元素(例如<article><nav>)合适时才应使用它

<section>:HTML段件(<section>)表示一个文件,一个通用的部分,即,内容的主题分组,典型地具有一个标题。


第二回合

<div>: 浏览器支持 在此处输入图片说明

<section>: 浏览器支持

表格中的数字指定了完全支持该元素的第一个浏览器版本。 在此处输入图片说明

因此,div仅从纯CSS或DOM角度而言是相关的,而部分也与语义有关,并且在不久的将来与搜索引擎的索引也相关。

小宇宙猴子2020/03/16 14:35:17

<section> 表示内部的内容已分组(即,与单个主题相关),并且应作为条目出现在页面轮廓中。

<div>,在另一方面,没有传达任何意义来自于它的任何发现一旁classlangtitle属性。

所以不:使用a <div>不会在HTML中定义部分。

从规格:

<section>

<section>元素表示一个文档或应用程序的通用部分。在这种情况下,一节是内容的主题分组。section通常应通过将标题(h1-h6元素)作为元素的子元素来标识每个<section>元素。

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

...

The <section> element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the <div> element instead. A general rule is that the <section> element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

(https://www.w3.org/TR/html/sections.html#the-section-element)

<div>

The <div> element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

Note: Authors are strongly encouraged to view the <div> element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the <div> element leads to better accessibility for readers and easier maintainability for authors.

(https://www.w3.org/TR/html/grouping-content.html#the-div-element)

小小西门2020/03/16 14:35:17

<section>标记一个<div>标记一个没有关联语义的通用块。