section,div,artical的区别

section:看起来像是有语义版的<div>,但实际的使用是用在一个专题性的版块,且通常带有一个标题。适合用于章节、标签切换效果的每一个tab容器或论文中有编号的地方,也可以用于网站主页中划分简介、新闻、联系信息等板块

artical是一个特殊的section标签,比section具有更明确的语义,代表一个独立的、完整的相关内容块。一般来说,artical会有标题部分(通常包含在header内),有时也会包含footer

总结:

div section article ,语义是从无到有,逐渐增强的。div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article。原则上来说,能使用 article 的时候,也是可以使用 section 的,但是实际上,假如使用 article 更合适,那么就不要使用 section 。nav 和 aside 的使用也是如此,这两个标签也是特殊的 section,在使用 nav 和 aside 更合适的情况下,也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在,这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块,但是它只能算是组成整体的一部分,article 才是一个完整的整体。

注:section不是一个普通的容器元素,为了样式布局,建议使用div。当元素内容明确的列举在大纲时建议使用section

原文地址:https://www.cnblogs.com/110162-wsx/p/9465147.html

时间: 2024-10-11 16:16:56

section,div,artical的区别的相关文章

HTML5新元素section和article的区别详解

HTML5带出了一系列新元素,并且将在未来被广泛应用.然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>. 在问答网站经常可以看到别人问:在什么情况下我们应该使用这些元素?我们应该如何正确的使用这些元素?<article>和<section>有什么区别? 鉴于以上的这些问题,E良师益友网为大家讲解一下<article>和<section>的区别: 一.Article元素 从名字上,它已经很好的

div与span区别及用法

DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候,遇到第一个问题是div与span有什么区别,什么时候用div,什么时候用span标签. 目录 特点与区别 小结 知识扩展 案例效果演示 一.DIV与SPAN的区别与特点   -   TOP 以下是在没有对开发网页页面设置css样式时候情况下,系统默认情况下的介绍div与span区别div占用的位置是

span元素和div元素的区别

span元素和div元素的区别:本章节简单介绍一下span元素和div元素的区别,因为这两个元素在布局中非常的常用,可以说几乎没有任何页面不适用这两个元素,下面就简单介绍一下它们两者的主要区别.一.元素的性质:span元素内联元素,而div元素是块级元素.关于两种类型元素的区别可以参阅什么是块级元素和内联元素一章节. 二.元素的使用方式:div元素主要是用作大的框架布局,而span元素则是主要用于对内容的修饰,比如颜色字体大小.代码如下: <!DOCTYPE html> <html>

HTML5之article元素与section元素之间的区别?

在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的结构元素.内容区块是指将HTML页面按逻辑分割后 的单位.例如对于书籍来说,章.节可以称为内容区块:对于博客网站来说,导航菜单.文章正文.文章的评论等每一个部分都可称为内容区块.       在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素,这两个元素是什么意思?通常用于哪些内容区块?何时用article元素?何时用section元素?两者之间的区别是什么?   

div.offersetLeft 和 div.left的区别

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便. 2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left. 3. st

[html5]HTML5中&lt;section&gt;和&lt;article&gt;的区别

一.section元素 从字面理解就是区块.部分的意思,相对于article元素更加广泛,每个区块都可以使用,比如页面里的导航菜单.文章正文.文章的评论等. 1.section元素用于对网站或应用程序中页面上的内容进行分块,section元素的作用是对页面上的内容进行分块,或者说对文章进行分段,: 2.一个section元素通常由内容及其标题组成.通常不推荐为那些没有标题的内容使用section元素, 3.section元素并非一个普通的容器元素:当一个内容需要被直接定义样式或通过脚本定义行为时

div a 和 div &gt; a 的区别———后者指作用到div下一级的 a 标签 ,仅一级

如: <div> <a href="#">可以作用到</a> <ul> <i><a href="#">作用不到</a></i> <i></i> </ul> <p><a href="#">作用不到</a></p> </div>

spinlock,mutex,semaphore,critical section的作用与区别

某年深信服的笔试题,考的就是多线程的同步,简单的解释下方便记忆: 1.spinlock:自旋锁.是专为防止多处理器并发而引入的一种锁. 2.mutex:互斥量.只有拥有互斥对象的线程才有访问公共资源的权限.保证了资源不会同时被多个线程访问. 3.semaphore:信号量.允许多个线程同时访问资源,限制访问资源的最大线程数. 4.critical section:临界区.任意时刻只允许一个线程对共享资源进行访问.

Laravel @section/endsection 与 @section/show, @yield 的区别

base layout 中需要使用 @section("section_name") 区块链是什么? @show 继承的 blade 中需要使用 @section("section_name") 区块链的定义 @endsection 其会覆盖父模板中的内容. 如果需要基于原 layout section 附加内容 @section("section_name") @parent <p>区块链是xxx</p> @endsec