html中的main标签,html中div标签、section标签和acticle标签三者有啥区别,main和div

骑猪看日落 2022-10-10 11:21 186阅读 0赞

html中div标签、section标签和acticle标签三者有啥区别什么是html中的div标签、section标签和acticle标签的区别，

![64422808f652166fc279964d60eed59c.png][]

线索：

本来我以为这三个标签的作用差不多。后来查了相关资料，才知道其中还有区别。

(学习视频分享：html视频教程

让我们介绍一下他们之间的区别：

1.div元素：

它本身没有语义，用作布局和样式标签，可以在文档中定义分区或节，相当于一个容器。主要用于大框架布局，也就是说网页的骨架主要由div搭建，而网页的血肉由span、p或ul完成。

2.secion元素：

Section元素是html5中新添加的结构元素，有更进一步的语义。表示页面中的内容块，如章节、页眉、页脚或页面的其他部分。可以和h1、h2、h3、h4、h5、h6等元素组合，标记文档结构。

3.文章元素：

文章元素也是html5中新增的结构元素。a是一个特殊的节标签，它比section有更明确的语义。它代表了一个独立完整的相关内容块，代表了页面上一段自上而下无关的独立内容，比如博客中的一篇文章。

注意：文章元素可以嵌套，原则上内层的内容需要和外层的内容关联。比如在一篇博文中，对文章的评论可以使用嵌套的文章元素；用于呈现注释的文章元素包含在代表整个内容的文章元素中。嵌套代码如下：

文章

页眉

h1项目元素的嵌套使用/h1

发布日期：发布时间=’发布日期’ 2019年8月6日/时间/p

/header

此选项卡显示了整篇文章的主要内容，对文章的评论在下面的节元素中/p >

部分

h2注释/h2

文章

页眉

H3由Cherish599/h3出版

P1小时前/p

/header

p这篇文章很好，顶一下！/p

/article

文章

页眉

H3出版商：两个柚子/h3

P2小时前/p

/header

p这篇文章很棒。它非常详细地解释了文章的嵌套/p

/article

/section

/文章摘要：

div，section，article的语义是从零开始逐渐增强的。Div没有语义，仅用作风格化或脚本化的标签。对于一个主题内容，小节是适用的，如果这个内容能够脱离上下文作为一个完整独立的内容，文章是适用的。原则上可以用article的时候也可以用section，但实际上如果用article更合适，就不要用section。

相关推荐：html的教程之上是HTML中的div标签、区段标签和动作标签的区别的详细内容。请多关注其他关于Lei.com PHP知识的相关实践！

[64422808f652166fc279964d60eed59c.png]: /images/20221005/4e6ddf704ae54017a85124c1e66e4caf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML＜DIV＞常用标签

目录 1. 什么是DIV 1.1 div是什么意思？ 1.2 div标签怎么用？ 1.3 div布局优势? 1.4 DIV作用是什么？ 1.5 有哪些DIV方式

刺骨的言语ヽ痛彻心扉/ 2023年10月11日 19:37/ 0 赞/ 38 阅读

相关 html中的main标签,html中div标签、section标签和acticle标签三者有啥区别,main和div

html中div标签、section标签和acticle标签三者有啥区别什么是html中的div标签、section标签和acticle标签的区别， ![64422808f6

骑猪看日落/ 2022年10月10日 11:21/ 0 赞/ 187 阅读

相关 html5 div标签属性,HTML: <div> 标签

HTML: 标签 HTML 标签定义了HTML文档中的通用容器，该容器通常用于对元素进行分组。此标签通常也称为元素。在线示例文档中创建了三个标签：示例

ゞ浴缸里的玫瑰/ 2022年10月06日 06:57/ 0 赞/ 398 阅读

相关 Html5中的＜section＞标签

本文导读：<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。section元素标签用来表现普通的文档内容或应用区块。一个s

曾经终败给现在/ 2022年08月02日 14:37/ 0 赞/ 202 阅读

相关 html切换div标签

实现切换table标签实例，如下代码可以直接copy，根据自己需要的样式调试使用。 <!DOCTYPE html> <html lang="en"> <head>

古城微笑少年丶/ 2022年06月01日 01:05/ 0 赞/ 346 阅读

相关 HTML DIV标签布局

这个代码是我学习制作网页时候在网上搜索的到的一篇文章，我也是第一次学，当我看到这个代码的时候首先想到的是创建文本然后复制，保存为test.html。打开先看看实现了怎么样的功能

╰半橙微兮°/ 2022年02月01日 19:13/ 0 赞/ 577 阅读

相关 HTML DIV标签

1. 标签分类常见的html标签大体上分为两种：内联标签、块级标签。内联标签：不会新起一行显示。（常见的有：label、span、a、input、img、select、

男娘i/ 2021年09月14日 02:02/ 0 赞/ 458 阅读

相关 HTML <div>标签

div是块级元素，主要用作大的框架布局，比如将网页划分左中右结构。也就是说网页的骨架主要通过div来架设的，而网页的血肉则是有span、p或者ul等元素完成。

小灰灰/ 2020年05月16日 20:44/ 0 赞/ 837 阅读

相关 HTML < section> 标签

此标签的功能与`< article>`标签比较类似，两者联系与区别简单总结如下：（1）.`< article>`可以认为是特殊`< section>`。（...

小灰灰/ 2020年05月15日 17:58/ 0 赞/ 867 阅读

相关 HTML < main> 标签

`< main>`标签用于创建页面中主要内容。此标签中的内容在原则上不能是网站页面中重复出现的内容，比如不能是导航栏或站点版权信息等。

小灰灰/ 2020年05月15日 17:55/ 1 赞/ 1648 阅读